feat: rename StyleLoadFinish to StyleLoaded

pansyjs · Jan 26, 2024 · 66bca62 · 66bca62
1 parent 9bb4f29
commit 66bca62
Show file tree

Hide file tree

Showing 9 changed files with 36 additions and 35 deletions.
diff --git a/src/components/StyleLoadFinish/index.tsx → src/components/StyleLoaded/index.tsx b/src/components/StyleLoadFinish/index.tsx → src/components/StyleLoaded/index.tsx
@@ -9,7 +9,7 @@ import { isStyleLoaded } from '../../utils/isStyleLoaded';
  */
 type ChildrenFun = (finish: boolean, isFirstTime: boolean) => React.ReactNode;
 
-export interface StyleLoadFinishProps {
+export interface StyleLoadedProps {
   /**
    * 样式加载完成子组件才可渲染，加载中卸载子组件
    * @default false 加载中不卸载子组件
@@ -21,7 +21,7 @@ export interface StyleLoadFinishProps {
   children?: React.ReactNode | ChildrenFun;
 }
 
-export const StyleLoadFinish = (props: StyleLoadFinishProps) => {
+export const StyleLoaded = (props: StyleLoadedProps) => {
   const { isFinishRender = false, children } = props;
   const { map } = useMap();
   const [, setStyleLoaded] = useState(0);

diff --git a/src/index.ts b/src/index.ts
@@ -1,9 +1,11 @@
+import Supercluster from 'supercluster';
+
 export { Map } from './components/Map';
 export type { MapProps } from './components/Map';
 export { Marker } from './components/Marker';
 export type { MarkerProps } from './components/Marker';
-export { StyleLoadFinish } from './components/StyleLoadFinish';
-export type { StyleLoadFinishProps } from './components/StyleLoadFinish';
+export { StyleLoaded } from './components/StyleLoaded';
+export type { StyleLoadedProps } from './components/StyleLoaded';
 export { Source } from './components/Source';
 export type { SourceProps } from './components/Source';
 export { Layer } from './components/Layer';
@@ -13,3 +15,4 @@ export type { MarkerClusterProps } from './components/MarkerCluster';
 export { WorldView } from './components/WorldView';
 export type { WorldViewProps } from './components/WorldView';
 export { useMap } from './hooks/useMap';
+export { Supercluster };
diff --git a/stories/Marker.stories.tsx b/stories/Marker.stories.tsx
@@ -1,5 +1,4 @@
-import React from 'react';
-import { Map, Marker, StyleLoadFinish } from '../src';
+import { Map, Marker, StyleLoaded } from '../src';
 
 import type { Meta, StoryObj } from '@storybook/react';
 
@@ -8,11 +7,11 @@ const meta = {
   render: (props) => {
     return (
       <Map containerStyle={{ height: 500 }}>
-        <StyleLoadFinish>
+        <StyleLoaded>
           <Marker {...props}>
             <div style={{ background: 'red', borderRadius: '50%', padding: '3px' }}>123</div>
           </Marker>
-        </StyleLoadFinish>
+        </StyleLoaded>
       </Map>
     );
   },

diff --git a/stories/StyleLoad.stories.tsx b/stories/StyleLoad.stories.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { Map, Marker, StyleLoadFinish } from '../src';
+import { Map, Marker, StyleLoaded } from '../src';
 
 import type { Meta, StoryObj } from '@storybook/react';
 
@@ -18,29 +18,29 @@ const TestCom = () => {
 
   return (
     isRender && (
-      <StyleLoadFinish>
+      <StyleLoaded>
         <Marker lngLat={[-110.414, 37.776]}>
           <div style={{ background: 'green', borderRadius: '50%', padding: '3px' }}>124</div>
         </Marker>
-      </StyleLoadFinish>
+      </StyleLoaded>
     )
   );
 };
 
 const meta = {
-  title: '组件/StyleLoad',
+  title: '组件/StyleLoaded',
   render: (props) => {
     return (
       <Map
         zoom={1}
         style="mapbox://styles/mapbox/satellite-streets-v12"
         containerStyle={{ height: 500 }}
       >
-        <StyleLoadFinish>
+        <StyleLoaded>
           <Marker lngLat={[-122.414, 37.776]}>
             <div style={{ background: 'red', borderRadius: '50%', padding: '3px' }}>123</div>
           </Marker>
-        </StyleLoadFinish>
+        </StyleLoaded>
         <div>
           <TestCom />
         </div>
@@ -51,7 +51,7 @@ const meta = {
   tags: ['autodocs'],
   argTypes: {},
   args: {},
-} satisfies Meta<typeof StyleLoadFinish>;
+} satisfies Meta<typeof StyleLoaded>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;

diff --git a/stories/examples/Cluster.stories.tsx b/stories/examples/Cluster.stories.tsx
@@ -1,6 +1,6 @@
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import { Language } from './components/Language';
-import { useMap, Map, Marker, Source, StyleLoadFinish, Layer } from '../../src';
+import { useMap, Map, Marker, Source, StyleLoaded, Layer } from '../../src';
 
 import type { Meta, StoryObj } from '@storybook/react';
 import type { LayerProps } from '../../src';
@@ -78,7 +78,7 @@ const meta = {
         style="mapbox://styles/mapbox/dark-v11"
         containerStyle={{ height: '100vh' }}
       >
-        <StyleLoadFinish>
+        <StyleLoaded>
           <Source
             id="earthquakes"
             type="geojson"
@@ -92,7 +92,7 @@ const meta = {
             <Layer {...unclusteredPointLayer} />
             <MarkerCluster />
           </Source>
-        </StyleLoadFinish>
+        </StyleLoaded>
         <Language />
       </Map>
     );

diff --git a/stories/examples/ClusterPro.stories.tsx b/stories/examples/ClusterPro.stories.tsx
@@ -1,6 +1,6 @@
 import { useRef, useState } from 'react';
 import { Avatar } from 'antd';
-import { Map, Marker, StyleLoadFinish, MarkerCluster } from '../../src';
+import { Map, Marker, StyleLoaded, MarkerCluster } from '../../src';
 import { Language } from './components/Language';
 
 import type { Meta, StoryObj } from '@storybook/react';
@@ -43,7 +43,7 @@ const meta = {
         style="mapbox://styles/mapbox/dark-v11"
         containerStyle={{ height: '100vh' }}
       >
-        <StyleLoadFinish>
+        <StyleLoaded>
           <MarkerCluster<UserInfo>
             ref={clusterRef}
             data={features}
@@ -67,7 +67,7 @@ const meta = {
               }
             }}
           />
-        </StyleLoadFinish>
+        </StyleLoaded>
         <Language />
       </Map>
     );

diff --git a/stories/examples/Flyto.stories.tsx b/stories/examples/Flyto.stories.tsx
@@ -1,5 +1,4 @@
-import React from 'react';
-import { Map, StyleLoadFinish } from '../../src';
+import { Map, StyleLoaded } from '../../src';
 import { Language } from './components/Language';
 import { Theme as ThemeCom, getStyleUrl } from './components/Theme';
 import { Flyto as FlytoCom } from './components/Flyto';
@@ -16,9 +15,9 @@ const meta = {
   render: () => {
     return (
       <Map containerStyle={{ height: '100vh' }} zoom={1} style={getStyleUrl(themes[0].value)}>
-        <StyleLoadFinish>
+        <StyleLoaded>
           <FlytoCom />;
-        </StyleLoadFinish>
+        </StyleLoaded>
 
         <ThemeCom options={themes} />
         <Language />

diff --git a/stories/examples/Theme.stories.tsx b/stories/examples/Theme.stories.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react';
 import { App, Button, Space } from 'antd';
-import { Map, StyleLoadFinish } from '../../src';
+import { Map, StyleLoaded } from '../../src';
 import { Language } from './components/Language';
 import { Theme as ThemeCom, getStyleUrl } from './components/Theme';
 
@@ -31,12 +31,12 @@ const meta = {
         <Map containerStyle={{ height: '100vh' }} zoom={3} style={getStyleUrl(themes[0].value)}>
           <ThemeCom />
           <Space>
-            <StyleLoadFinish>
+            <StyleLoaded>
               <Button type="primary">初次样式加载完成</Button>;
-            </StyleLoadFinish>
-            <StyleLoadFinish isFinishRender>
+            </StyleLoaded>
+            <StyleLoaded isFinishRender>
               <Child />
-            </StyleLoadFinish>
+            </StyleLoaded>
           </Space>
           <Language />
         </Map>

diff --git a/stories/examples/WorldView.stories.tsx b/stories/examples/WorldView.stories.tsx
@@ -1,6 +1,6 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { Radio } from 'antd';
-import { Map, StyleLoadFinish, WorldView as WorldViewCom } from '../../src';
+import { Map, StyleLoaded, WorldView as WorldViewCom } from '../../src';
 import { Language } from './components/Language';
 import { Flyto } from './components/Flyto';
 
@@ -39,10 +39,10 @@ const meta = {
           console.log(e);
         }}
       >
-        <StyleLoadFinish>
+        <StyleLoaded>
           <Flyto center={[85.14477595859074, 29.68859973130745]} zoom={4} />
           <WorldViewCom code={worldView as any} />
-        </StyleLoadFinish>
+        </StyleLoaded>
         <Language />
 
         <div style={{ position: 'absolute', background: '#efefef', right: 0, padding: 12 }}>