Skip to content

Commit

Permalink
refactor: 使用 StoryObj 定义 Story
Browse files Browse the repository at this point in the history 
不再使用废弃的类型 Story
  • Loading branch information
@xyy94813
xyy94813 committed Nov 28, 2023
1 parent 0e8c479 commit 3ef01fa
Show file tree
Hide file tree
Showing 21 changed files with 734 additions and 643 deletions.
98 changes: 51 additions & 47 deletions src/components/AMapAPIContainer/stories/createAMapAPIContainer.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React, { useRef, useEffect, Suspense } from 'react';
import type { Meta, Story } from '@storybook/react';
import type { Meta, StoryObj } from '@storybook/react';

import { createAMapAPIContainer, useAMapAPI } from '../../../index';

Expand All @@ -11,26 +11,6 @@ const meta: Meta = {

export default meta;

const SyncPluginAPIContainer = createAMapAPIContainer({
key: AMAP_API_KEY,
version: '2.0',
plugins: ['ControlBar', 'ToolBar', 'Scale', 'MapType', 'HawkEye'].map(
(pluginName) => `AMap.${pluginName}`,
),
AMapUI: {
version: '1.1',
plugins: ['overlay/SimpleMarker'],
},
});

const AsyncPluginAPIContainer = createAMapAPIContainer({
key: AMAP_API_KEY,
version: '2.0',
AMapUI: {
version: '1.1',
},
});

const initPlugin = (AMap: typeof global.AMap, map: AMap.Map) => {
new AMap.ControlBar().addTo(map);
new AMap.ToolBar({ position: 'LT', offset: [50, 120] }).addTo(map);
Expand All @@ -46,6 +26,14 @@ const initUIPlugin = (SimpleMarker: typeof AMapUI.SimpleMarker, map: AMap.Map) =
}).addTo(map);
};

const AsyncPluginAPIContainer = createAMapAPIContainer({
key: AMAP_API_KEY,
version: '2.0',
AMapUI: {
version: '1.1',
},
});

const AsyncPluginContentDrawer = () => {
const { __AMAP__: AMap } = useAMapAPI();
const $container = useRef(null);
Expand Down Expand Up @@ -80,15 +68,6 @@ const AsyncPluginContentDrawer = () => {
return <div ref={$container} style={{ height: 400 }} />;
};

export const AsyncPlugin: Story = () => (
<Suspense fallback="loading...">
<AsyncPluginAPIContainer>
<AsyncPluginContentDrawer />
</AsyncPluginAPIContainer>
</Suspense>
);
AsyncPlugin.storyName = '异步加载插件';

/**
* TODO：更好的自动生成 Code
*/
Expand Down Expand Up @@ -139,14 +118,37 @@ const AsyncPluginContentDrawer = () => {
return <div ref={$container} style={{ height: 400 }} />;
};
`;
AsyncPlugin.parameters = {
docs: {
source: {
code: AsyncPluginCode,

export const AsyncPlugin: StoryObj = {
name: '异步加载插件',
render: () => (
<Suspense fallback="loading...">
<AsyncPluginAPIContainer>
<AsyncPluginContentDrawer />
</AsyncPluginAPIContainer>
</Suspense>
),
parameters: {
docs: {
source: {
code: AsyncPluginCode,
},
},
},
};

const SyncPluginAPIContainer = createAMapAPIContainer({
key: AMAP_API_KEY,
version: '2.0',
plugins: ['ControlBar', 'ToolBar', 'Scale', 'MapType', 'HawkEye'].map(
(pluginName) => `AMap.${pluginName}`,
),
AMapUI: {
version: '1.1',
plugins: ['overlay/SimpleMarker'],
},
});

const SyncPluginContentDrawer = () => {
const { __AMAP__: AMap, __AMAP_UI__: AMapUI } = useAMapAPI();
const $container = useRef(null);
Expand All @@ -172,15 +174,6 @@ const SyncPluginContentDrawer = () => {
return <div ref={$container} style={{ height: 400 }} />;
};

export const SyncPlugin: Story = () => (
<Suspense fallback="loading...">
<SyncPluginAPIContainer>
<SyncPluginContentDrawer />
</SyncPluginAPIContainer>
</Suspense>
);
SyncPlugin.storyName = '同步加载插件';

const SyncPluginCode = `
const SyncPluginAPIContainer = createAMapAPIContainer({
version: '2.0',
Expand Down Expand Up @@ -229,10 +222,21 @@ const SyncPluginContentDrawer = () => {
</SyncPluginAPIContainer>
)
`;
SyncPlugin.parameters = {
docs: {
source: {
code: SyncPluginCode,

export const SyncPlugin: StoryObj = {
name: '同步加载插件',
render: () => (
<Suspense fallback="loading...">
<SyncPluginAPIContainer>
<SyncPluginContentDrawer />
</SyncPluginAPIContainer>
</Suspense>
),
parameters: {
docs: {
source: {
code: SyncPluginCode,
},
},
},
};
81 changes: 40 additions & 41 deletions src/components/AMapCircle/stories/AMapCircle.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
import React from 'react';
import type { Meta, Story } from '@storybook/react';
import type { Meta, StoryObj } from '@storybook/react';
import { actions } from '@storybook/addon-actions';

import { AMapCircle, AMapCircleProps } from '../../../index';
import { AMapCircle } from '../../../index';

import withAutoFitView from '../../../storybook-decorators/withAutoFitView';
import withAMap from '../../../storybook-decorators/withAMap';
Expand All @@ -28,6 +27,7 @@ const presetColors = ['#ff0000', '#00ff00', '#0000ff'];

const meta: Meta<typeof AMapCircle> = {
title: '组件(Components)/覆盖物(Overlay)/AMapCircle',
component: AMapCircle,
decorators: [
withAutoFitView,
withAMap(),
Expand All @@ -38,8 +38,6 @@ const meta: Meta<typeof AMapCircle> = {
center: [116.39, 39.9],
radius: 10_000,
visible: true,
onShow: eventHandler.onShow,
onHide: eventHandler.onHide,
},
argTypes: {
center: {
Expand Down Expand Up @@ -316,48 +314,49 @@ const meta: Meta<typeof AMapCircle> = {

export default meta;

type AMapCircleStory = Story<AMapCircleProps>;
const Template: AMapCircleStory = (args) => (
<AMapCircle {...args} />
);
type AMapCircleStory = StoryObj<typeof AMapCircle>;

export const CommonUse: typeof Template = Template.bind({});
CommonUse.storyName = '基本使用';
CommonUse.args = {};
export const CommonUse: AMapCircleStory = {
name: '基本使用',
};

export const CustomStyle: typeof Template = Template.bind({});
CustomStyle.storyName = '自定义样式';
CustomStyle.args = {
fillColor: 'yellow',
fillOpacity: 0.5,
strokeColor: 'red',
strokeStyle: 'dashed',
strokeOpacity: 0.1,
strokeWeight: 20,
strokeDasharray: [10, 40],
export const CustomStyle: AMapCircleStory = {
name: '自定义样式',
args: {
fillColor: 'yellow',
fillOpacity: 0.5,
strokeColor: 'red',
strokeStyle: 'dashed',
strokeOpacity: 0.1,
strokeWeight: 20,
strokeDasharray: [10, 40],
},
};

export const ClickEvent: typeof Template = Template.bind({});
ClickEvent.storyName = '点击事件（左单/左双/右单）';
ClickEvent.args = {
onClick: eventHandler.onClick,
onDBLClick: eventHandler.onDBLClick,
onRightClick: eventHandler.onRightClick,
export const ClickEvent: AMapCircleStory = {
name: '点击事件（左单/左双/右单）',
args: {
onClick: eventHandler.onClick,
onDBLClick: eventHandler.onDBLClick,
onRightClick: eventHandler.onRightClick,
},
};

export const MouseEvent: typeof Template = Template.bind({});
MouseEvent.storyName = '鼠标事件（按下/抬起/经过/移出）';
MouseEvent.args = {
onMousedown: eventHandler.onMousedown,
onMouseup: eventHandler.onMouseup,
onMouseover: eventHandler.onMouseover,
onMouseout: eventHandler.onMouseout,
export const MouseEvent: AMapCircleStory = {
name: '鼠标事件（按下/抬起/经过/移出）',
args: {
onMousedown: eventHandler.onMousedown,
onMouseup: eventHandler.onMouseup,
onMouseover: eventHandler.onMouseover,
onMouseout: eventHandler.onMouseout,
},
};

export const TouchEvent: typeof Template = Template.bind({});
TouchEvent.storyName = '触摸事件（触摸开始/触摸移动/触摸结束）';
TouchEvent.args = {
onTouchstart: eventHandler.onTouchstart,
onTouchmove: eventHandler.onTouchmove,
onTouchend: eventHandler.onTouchend,
export const TouchEvent: AMapCircleStory = {
name: '触摸事件（触摸开始/触摸移动/触摸结束）',
args: {
onTouchstart: eventHandler.onTouchstart,
onTouchmove: eventHandler.onTouchmove,
onTouchend: eventHandler.onTouchend,
},
};
34 changes: 21 additions & 13 deletions src/components/AMapControlBar/stories/AMapControlBar.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
import React from 'react';
import type { Story, Meta } from '@storybook/react';
import type { StoryObj, Meta } from '@storybook/react';
import { actions } from '@storybook/addon-actions';

import { AMapControlBar, AMapControlBarProps } from '../../../index';
import { AMapControlBar } from '../../../index';

import withAMap from '../../../storybook-decorators/withAMap';
import withAMapContainer from '../../../storybook-decorators/withAMapContainer';
Expand Down Expand Up @@ -106,16 +105,25 @@ const meta: Meta<typeof AMapControlBar> = {

export default meta;

const Template: Story<AMapControlBarProps> = (args) => <AMapControlBar {...args} />;
type AMapControlBarStory = StoryObj<typeof AMapControlBar>;

export const ChangeOffset: typeof Template = Template.bind({});
ChangeOffset.storyName = '设置偏移量';
ChangeOffset.args = { offset: [200, 200] };
export const ChangeOffset: AMapControlBarStory = {
name: '设置偏移量',
args: {
offset: [200, 200],
},
};

export const ChangePosition: typeof Template = Template.bind({});
ChangePosition.args = { position: 'RT' };
ChangePosition.storyName = '指定位置';
export const ChangePosition: AMapControlBarStory = {
name: '指定位置',
args: {
position: 'RT',
},
};

export const HideControlButton: typeof Template = Template.bind({});
HideControlButton.args = { showControlButton: false };
HideControlButton.storyName = '显示/隐藏控制按钮';
export const HideControlButton: AMapControlBarStory = {
name: '显示/隐藏控制按钮',
args: {
showControlButton: false,
},
};
Loading

0 comments on commit 3ef01fa

Please sign in to comment.