From e70f700486c21cd628187f6bc6bac9f131ded0ce Mon Sep 17 00:00:00 2001
From: thinkinggis <lzx199065@gmail.com>
Date: Tue, 11 Feb 2020 20:31:55 +0800
Subject: [PATCH] feat(react): add react lib

---
 .storybook/config.ts                          |  2 +-
 .../core/src/services/layer/ILayerService.ts  |  2 +-
 packages/react/README.md                      | 11 ++++
 packages/react/__tests__/react.test.js        |  7 +++
 packages/react/package.json                   | 36 +++++++++++
 packages/react/src/component/Layer.ts         | 17 ++++++
 .../src/component/LayerAttribute/Color.tsx    | 18 ++++++
 .../src/component/LayerAttribute/Layer.tsx    | 51 ++++++++++++++++
 .../src/component/LayerAttribute/Scales.tsx   | 21 +++++++
 .../src/component/LayerAttribute/Shape.tsx    | 18 ++++++
 .../src/component/LayerAttribute/Size.tsx     | 18 ++++++
 .../src/component/LayerAttribute/Source.tsx   | 19 ++++++
 .../src/component/LayerAttribute/Style.tsx    | 16 +++++
 .../src/component/LayerAttribute/index.ts     | 38 ++++++++++++
 packages/react/src/component/Scene.tsx        | 42 +++++++++++++
 packages/react/src/component/SceneContext.tsx |  7 +++
 packages/react/src/index.ts                   |  3 +
 packages/react/tsconfig.build.json            |  9 +++
 stories/React/React.stories.tsx               |  6 ++
 stories/React/components/Scene.tsx            | 60 +++++++++++++++++++
 20 files changed, 399 insertions(+), 2 deletions(-)
 create mode 100644 packages/react/README.md
 create mode 100644 packages/react/__tests__/react.test.js
 create mode 100644 packages/react/package.json
 create mode 100644 packages/react/src/component/Layer.ts
 create mode 100644 packages/react/src/component/LayerAttribute/Color.tsx
 create mode 100644 packages/react/src/component/LayerAttribute/Layer.tsx
 create mode 100644 packages/react/src/component/LayerAttribute/Scales.tsx
 create mode 100644 packages/react/src/component/LayerAttribute/Shape.tsx
 create mode 100644 packages/react/src/component/LayerAttribute/Size.tsx
 create mode 100644 packages/react/src/component/LayerAttribute/Source.tsx
 create mode 100644 packages/react/src/component/LayerAttribute/Style.tsx
 create mode 100644 packages/react/src/component/LayerAttribute/index.ts
 create mode 100644 packages/react/src/component/Scene.tsx
 create mode 100644 packages/react/src/component/SceneContext.tsx
 create mode 100644 packages/react/src/index.ts
 create mode 100644 packages/react/tsconfig.build.json
 create mode 100644 stories/React/React.stories.tsx
 create mode 100644 stories/React/components/Scene.tsx

diff --git a/.storybook/config.ts b/.storybook/config.ts
index 8d0e91a35c..6169a25011 100644
--- a/.storybook/config.ts
+++ b/.storybook/config.ts
@@ -1,5 +1,5 @@
 // tslint:disable-next-line:no-submodule-imports
-import '!style-loader!css-loader!sass-loader!./iframe.scss';
+// import '!style-loader!css-loader!sass-loader!./iframe.scss';
 import { addParameters, configure } from '@storybook/react';
 import { create } from '@storybook/theming';
 
diff --git a/packages/core/src/services/layer/ILayerService.ts b/packages/core/src/services/layer/ILayerService.ts
index b1575a0d07..8c164f1b56 100644
--- a/packages/core/src/services/layer/ILayerService.ts
+++ b/packages/core/src/services/layer/ILayerService.ts
@@ -116,7 +116,7 @@ export interface ILayer {
       Partial<IModelInitializationOptions>,
   ): IModel;
   init(): ILayer;
-  scale(field: string | IScaleOptions, cfg: IScale): ILayer;
+  scale(field: string | IScaleOptions, cfg?: IScale): ILayer;
   size(field: StyleAttrField, value?: StyleAttributeOption): ILayer;
   color(field: StyleAttrField, value?: StyleAttributeOption): ILayer;
   shape(field: StyleAttrField, value?: StyleAttributeOption): ILayer;
diff --git a/packages/react/README.md b/packages/react/README.md
new file mode 100644
index 0000000000..e3aedcdb13
--- /dev/null
+++ b/packages/react/README.md
@@ -0,0 +1,11 @@
+# `react`
+
+> TODO: description
+
+## Usage
+
+```
+const react = require('react');
+
+// TODO: DEMONSTRATE API
+```
diff --git a/packages/react/__tests__/react.test.js b/packages/react/__tests__/react.test.js
new file mode 100644
index 0000000000..b675145f41
--- /dev/null
+++ b/packages/react/__tests__/react.test.js
@@ -0,0 +1,7 @@
+'use strict';
+
+const react = require('..');
+
+describe('react', () => {
+    it('needs tests');
+});
diff --git a/packages/react/package.json b/packages/react/package.json
new file mode 100644
index 0000000000..18c422c3a0
--- /dev/null
+++ b/packages/react/package.json
@@ -0,0 +1,36 @@
+{
+  "name": "@antv/l7-react",
+  "version": "2.0.18",
+  "description": "",
+  "main": "lib/index.js",
+  "module": "es/index.js",
+  "types": "es/index.d.ts",
+  "sideEffects": true,
+  "files": [
+    "lib",
+    "es",
+    "README.md"
+  ],
+  "scripts": {
+    "tsc": "tsc --project tsconfig.build.json",
+    "clean": "rimraf dist; rimraf es; rimraf lib;",
+    "build": "run-p build:*",
+    "build:cjs": "BABEL_ENV=cjs babel src --root-mode upward --out-dir lib --source-maps --extensions .ts,.tsx --delete-dir-on-start --no-comments",
+    "build:esm": "BABEL_ENV=esm babel src --root-mode upward --out-dir es --source-maps --extensions .ts,.tsx --delete-dir-on-start --no-comments",
+    "watch": "BABEL_ENV=cjs babel src --watch --root-mode upward --out-dir lib --source-maps --extensions .ts,.tsx --delete-dir-on-start --no-comments",
+    "lint:ts": "run-p -c lint:ts-*",
+    "test": "jest"
+  },
+  "author": "lzxue",
+  "license": "ISC",
+  "dependencies": {
+    "@antv/l7": "^2.0.18",
+    "@antv/l7-maps": "^2.0.18",
+    "react": "^16.8.6",
+    "@babel/runtime": "^7.7.7"
+  },
+  "gitHead": "f2bd3c6473df79d815467b1677c6f985cf68800e",
+  "publishConfig": {
+    "access": "public"
+  }
+}
diff --git a/packages/react/src/component/Layer.ts b/packages/react/src/component/Layer.ts
new file mode 100644
index 0000000000..4deebbc545
--- /dev/null
+++ b/packages/react/src/component/Layer.ts
@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { ILayerProps } from './LayerAttribute';
+import BaseLayer from './LayerAttribute/Layer';
+
+const PolygonLayer = React.memo(function Layer(props: ILayerProps) {
+  return BaseLayer('polygonLayer', props);
+});
+
+const LineLayer = React.memo(function Layer(props: ILayerProps) {
+  return BaseLayer('polygonLayer', props);
+});
+
+const PointLayer = React.memo(function Layer(props: ILayerProps) {
+  return BaseLayer('pointLayer', props);
+});
+
+export { PolygonLayer, LineLayer, PointLayer };
diff --git a/packages/react/src/component/LayerAttribute/Color.tsx b/packages/react/src/component/LayerAttribute/Color.tsx
new file mode 100644
index 0000000000..f61cb9d161
--- /dev/null
+++ b/packages/react/src/component/LayerAttribute/Color.tsx
@@ -0,0 +1,18 @@
+import { ILayer, StyleAttrField } from '@antv/l7';
+import * as React from 'react';
+import { IAttributeOptions } from './';
+
+const { useEffect } = React;
+interface ILayerProps {
+  layer: ILayer;
+  color: Partial<IAttributeOptions>;
+}
+export default React.memo(function Chart(props: ILayerProps) {
+  const { layer, color } = props;
+  useEffect(() => {
+    color.field
+      ? layer.color(color.field as StyleAttrField, color.values)
+      : layer.color(color.value as StyleAttrField);
+  }, [color.value, color.field, JSON.stringify(color.values)]);
+  return null;
+});
diff --git a/packages/react/src/component/LayerAttribute/Layer.tsx b/packages/react/src/component/LayerAttribute/Layer.tsx
new file mode 100644
index 0000000000..983a69596d
--- /dev/null
+++ b/packages/react/src/component/LayerAttribute/Layer.tsx
@@ -0,0 +1,51 @@
+import { ILayer, LineLayer, PointLayer, PolygonLayer, Scene } from '@antv/l7';
+import * as React from 'react';
+import { useSceneValue } from '../SceneContext';
+import { Color, ILayerProps, Scales, Shape, Size, Source, Style } from './';
+
+const { useEffect, useState } = React;
+
+export default function BaseLayer(type: string, props: ILayerProps) {
+  const { source, color, shape, style, size, scales, options } = props;
+  const mapScene = (useSceneValue() as unknown) as Scene;
+  const [layer, setLayer] = useState();
+  if (!layer) {
+    let l: ILayer;
+    switch (type) {
+      case 'polygonLayer':
+        l = new PolygonLayer(options);
+        break;
+      case 'lineLayer':
+        l = new LineLayer(options);
+        break;
+      case 'pointLayer':
+        l = new PointLayer(options);
+        break;
+      default:
+        l = new PolygonLayer(options);
+    }
+    setLayer(l);
+  }
+
+  useEffect(() => {
+    mapScene.addLayer(layer);
+    return () => {
+      mapScene.removeLayer(layer);
+    };
+  }, []);
+  useEffect(() => {
+    if (layer) {
+      mapScene.render();
+    }
+  });
+  return (
+    <>
+      <Source layer={layer} source={source} />
+      {scales && <Scales layer={layer} scales={scales} />}
+      <Color layer={layer} color={color} />
+      {size && <Size layer={layer} size={size} />}
+      <Shape layer={layer} shape={shape} />
+      {style && <Style layer={layer} style={style} />}
+    </>
+  );
+}
diff --git a/packages/react/src/component/LayerAttribute/Scales.tsx b/packages/react/src/component/LayerAttribute/Scales.tsx
new file mode 100644
index 0000000000..13b13598a3
--- /dev/null
+++ b/packages/react/src/component/LayerAttribute/Scales.tsx
@@ -0,0 +1,21 @@
+import { ILayer, IScale, IScaleOptions } from '@antv/l7';
+import * as React from 'react';
+import { IScaleAttributeOptions } from './';
+
+const { useEffect } = React;
+interface ILayerProps {
+  layer: ILayer;
+  scales: Partial<IScaleAttributeOptions>;
+}
+export default React.memo(function Chart(props: ILayerProps) {
+  const { layer, scales } = props;
+  useEffect(
+    () => {
+      scales.field
+        ? layer.scale(scales.field as string, scales.value as IScale)
+        : layer.scale(scales.values as IScaleOptions);
+    },
+    Object.values(scales).map((scale) => JSON.stringify(scales)),
+  );
+  return null;
+});
diff --git a/packages/react/src/component/LayerAttribute/Shape.tsx b/packages/react/src/component/LayerAttribute/Shape.tsx
new file mode 100644
index 0000000000..374a173b36
--- /dev/null
+++ b/packages/react/src/component/LayerAttribute/Shape.tsx
@@ -0,0 +1,18 @@
+import { ILayer, StyleAttrField } from '@antv/l7';
+import * as React from 'react';
+import { IAttributeOptions } from './';
+
+const { useEffect } = React;
+interface ILayerProps {
+  layer: ILayer;
+  shape: Partial<IAttributeOptions>;
+}
+export default React.memo(function Chart(props: ILayerProps) {
+  const { layer, shape } = props;
+  useEffect(() => {
+    shape.field
+      ? layer.shape(shape.field, shape.values)
+      : layer.shape(shape.value as StyleAttrField);
+  }, [shape.field, shape.value, JSON.stringify(shape.values)]);
+  return null;
+});
diff --git a/packages/react/src/component/LayerAttribute/Size.tsx b/packages/react/src/component/LayerAttribute/Size.tsx
new file mode 100644
index 0000000000..472de09d89
--- /dev/null
+++ b/packages/react/src/component/LayerAttribute/Size.tsx
@@ -0,0 +1,18 @@
+import { ILayer, StyleAttrField } from '@antv/l7';
+import * as React from 'react';
+import { IAttributeOptions } from './';
+
+const { useEffect } = React;
+interface ILayerProps {
+  layer: ILayer;
+  size: Partial<IAttributeOptions>;
+}
+export default React.memo(function Chart(props: ILayerProps) {
+  const { layer, size } = props;
+  useEffect(() => {
+    size.field
+      ? layer.size(size.field, size.values)
+      : layer.size(size.value as StyleAttrField);
+  }, [size.field, size.value, JSON.stringify(size.values)]);
+  return null;
+});
diff --git a/packages/react/src/component/LayerAttribute/Source.tsx b/packages/react/src/component/LayerAttribute/Source.tsx
new file mode 100644
index 0000000000..d86d8ef9fc
--- /dev/null
+++ b/packages/react/src/component/LayerAttribute/Source.tsx
@@ -0,0 +1,19 @@
+import { ILayer } from '@antv/l7';
+import * as React from 'react';
+import { ISourceOptions } from './';
+
+const { useEffect } = React;
+interface ISourceProps {
+  layer: ILayer;
+  source: Partial<ISourceOptions>;
+}
+export default React.memo(function Chart(props: ISourceProps) {
+  const { layer, source } = props;
+  const { data, ...sourceOption } = source;
+
+  useEffect(() => {
+    // @ts-ignore
+    layer.source(data, sourceOption);
+  }, []);
+  return null;
+});
diff --git a/packages/react/src/component/LayerAttribute/Style.tsx b/packages/react/src/component/LayerAttribute/Style.tsx
new file mode 100644
index 0000000000..9ce621cbb7
--- /dev/null
+++ b/packages/react/src/component/LayerAttribute/Style.tsx
@@ -0,0 +1,16 @@
+import { ILayer } from '@antv/l7';
+import * as React from 'react';
+import { IStyleOptions } from './';
+
+const { useEffect } = React;
+interface ILayerProps {
+  layer: ILayer;
+  style: Partial<IStyleOptions>;
+}
+export default React.memo(function Chart(props: ILayerProps) {
+  const { layer, style } = props;
+  useEffect(() => {
+    layer.style(style);
+  }, Object.values(style));
+  return null;
+});
diff --git a/packages/react/src/component/LayerAttribute/index.ts b/packages/react/src/component/LayerAttribute/index.ts
new file mode 100644
index 0000000000..aab5dd025d
--- /dev/null
+++ b/packages/react/src/component/LayerAttribute/index.ts
@@ -0,0 +1,38 @@
+import { IScale, IScaleOptions, ISourceCFG } from '@antv/l7';
+import Color from './Color';
+import Scales from './Scales';
+import Shape from './Shape';
+import Size from './Size';
+import Source from './Source';
+import Style from './Style';
+export interface IAttributeOptions {
+  field: string;
+  value: string | number;
+  values: string[] | number[] | string;
+}
+
+export interface IScaleAttributeOptions {
+  field: string;
+  value: IScale;
+  values: IScaleOptions;
+}
+export interface IStyleOptions {
+  opacity: number;
+  [key: string]: any;
+}
+export interface ISourceOptions extends ISourceCFG {
+  data: any;
+}
+export interface ILayerProps {
+  options?: {
+    [key: string]: any;
+  };
+  source: ISourceOptions;
+  color: Partial<IAttributeOptions>;
+  shape: Partial<IAttributeOptions>;
+  scales?: Partial<IScaleAttributeOptions>;
+  size?: Partial<IAttributeOptions>;
+  style?: Partial<IStyleOptions>;
+}
+
+export { Source, Size, Color, Shape, Style, Scales };
diff --git a/packages/react/src/component/Scene.tsx b/packages/react/src/component/Scene.tsx
new file mode 100644
index 0000000000..498c22bc01
--- /dev/null
+++ b/packages/react/src/component/Scene.tsx
@@ -0,0 +1,42 @@
+import { IMapWrapper, Scene } from '@antv/l7';
+import React, { createElement, createRef, useEffect, useState } from 'react';
+import SceneContext from './SceneContext';
+interface IMapSceneConig {
+  style?: React.CSSProperties;
+  className?: string;
+  map: IMapWrapper;
+  children?: JSX.Element | JSX.Element[] | Array<JSX.Element | undefined>;
+}
+const MapScene = React.memo((props: IMapSceneConig) => {
+  const { style, className, map } = props;
+  const container = createRef();
+  const [scene, setScene] = useState();
+  useEffect(() => {
+    const sceneInstance = new Scene({
+      id: container.current as HTMLDivElement,
+      map,
+    });
+    sceneInstance.on('loaded', () => {
+      setScene(sceneInstance);
+    });
+    return () => {
+      sceneInstance.destroy();
+    };
+  }, []);
+
+  return (
+    <SceneContext.Provider value={scene}>
+      {createElement(
+        'div',
+        {
+          ref: container,
+          style,
+          className,
+        },
+        scene && props.children,
+      )}
+    </SceneContext.Provider>
+  );
+});
+
+export default MapScene;
diff --git a/packages/react/src/component/SceneContext.tsx b/packages/react/src/component/SceneContext.tsx
new file mode 100644
index 0000000000..4267010621
--- /dev/null
+++ b/packages/react/src/component/SceneContext.tsx
@@ -0,0 +1,7 @@
+import { Scene } from '@antv/l7';
+import { createContext, useContext } from 'react';
+const SceneContext = createContext(null);
+export function useSceneValue(): Scene {
+  return (useContext(SceneContext) as unknown) as Scene;
+}
+export default SceneContext;
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
new file mode 100644
index 0000000000..7f6e51c563
--- /dev/null
+++ b/packages/react/src/index.ts
@@ -0,0 +1,3 @@
+export * from './component/SceneContext';
+export { default as Scene } from './component/Scene';
+export * from './component/Layer';
diff --git a/packages/react/tsconfig.build.json b/packages/react/tsconfig.build.json
new file mode 100644
index 0000000000..17f6c4525a
--- /dev/null
+++ b/packages/react/tsconfig.build.json
@@ -0,0 +1,9 @@
+{
+  "extends": "../../tsconfig.build.json",
+  "compilerOptions": {
+    "declarationDir": "./es",
+    "rootDir": "./src",
+    "baseUrl": "./"
+  },
+  "include": ["./src"]
+}
\ No newline at end of file
diff --git a/stories/React/React.stories.tsx b/stories/React/React.stories.tsx
new file mode 100644
index 0000000000..d9b2ed6f31
--- /dev/null
+++ b/stories/React/React.stories.tsx
@@ -0,0 +1,6 @@
+import { storiesOf } from '@storybook/react';
+import * as React from 'react';
+import GaodeMapScene from './components/Scene';
+
+// @ts-ignore
+storiesOf('React', module).add('高德地图', () => <GaodeMapScene />);
diff --git a/stories/React/components/Scene.tsx b/stories/React/components/Scene.tsx
new file mode 100644
index 0000000000..31b1f412df
--- /dev/null
+++ b/stories/React/components/Scene.tsx
@@ -0,0 +1,60 @@
+import { GaodeMap, Mapbox } from '@antv/l7-maps';
+import { LineLayer, Scene } from '@antv/l7-react';
+import * as React from 'react';
+
+export default React.memo(function Map() {
+  // @ts-ignore
+  const amap = new GaodeMap({
+    center: [110.19382669582967, 50.258134],
+    pitch: 0,
+    style: 'dark',
+    zoom: 3,
+  });
+  const [data, setData] = React.useState();
+  React.useEffect(() => {
+    const fetchData = async () => {
+      const response = await fetch(
+        'https://gw.alipayobjects.com/os/basement_prod/32e1f3ab-8588-46cb-8a47-75afb692117d.json',
+      );
+      const data = await response.json();
+      setData(data);
+    };
+    fetchData();
+  }, []);
+  return (
+    <>
+      <Scene
+        map={amap}
+        style={{
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+        }}
+      >
+        {data && (
+          <LineLayer
+            key={'2'}
+            source={{
+              data,
+            }}
+            size={{
+              value: 1,
+            }}
+            color={{
+              value: '#fff',
+            }}
+            shape={{
+              value: 'line',
+            }}
+            style={{
+              opacity: 1,
+            }}
+          />
+        )}
+      </Scene>
+      />
+    </>
+  );
+});