diff --git a/src/components/AMapAPIContainer/stories/createAMapAPIContainer.stories.tsx b/src/components/AMapAPIContainer/stories/createAMapAPIContainer.stories.tsx index e36d5c8..0434cc3 100644 --- a/src/components/AMapAPIContainer/stories/createAMapAPIContainer.stories.tsx +++ b/src/components/AMapAPIContainer/stories/createAMapAPIContainer.stories.tsx @@ -5,9 +5,11 @@ import { createAMapAPIContainer, useAMapAPI } from '../../../index'; const AMAP_API_KEY: string = (import.meta as any).env.STORYBOOK_AMAP_API_KEY || ''; -export default { +const meta: Meta = { title: '组件(Components)/基础组件(Basic)/AMapAPIContainer', -} as Meta; +}; + +export default meta; const SyncPluginAPIContainer = createAMapAPIContainer({ key: AMAP_API_KEY, diff --git a/src/components/AMapCircle/stories/AMapCircle.stories.tsx b/src/components/AMapCircle/stories/AMapCircle.stories.tsx index 4eca47b..8e531d7 100644 --- a/src/components/AMapCircle/stories/AMapCircle.stories.tsx +++ b/src/components/AMapCircle/stories/AMapCircle.stories.tsx @@ -24,7 +24,9 @@ const eventHandler = actions( 'onTouchend', ); -export default { +const presetColors = ['#ff0000', '#00ff00', '#0000ff']; + +const meta: Meta = { title: '组件(Components)/覆盖物(Overlay)/AMapCircle', decorators: [ withAutoFitView, @@ -42,11 +44,18 @@ export default { argTypes: { center: { description: '圆心位置', - type: { required: true, summary: 'LngLatLike' }, + type: { required: true, name: 'array', value: { name: 'number' } }, + table: { + type: { summary: 'LngLatLike' }, + }, + control: 'object', }, radius: { description: '圆半径,单位:米', - type: { required: true, summary: 'number' }, + type: { required: true, name: 'number' }, + table: { + type: { summary: 'AMap.LngLatLike' }, + }, control: { type: 'number', min: 0, @@ -55,8 +64,11 @@ export default { }, zIndex: { description: '多边形覆盖物的叠加顺序', - type: { required: false, summary: 'number', defaultValue: 10 }, - table: { defaultValue: 10 }, + type: { required: false, name: 'number' }, + table: { + type: { summary: 'number' }, + defaultValue: { summary: 10 }, + }, control: { type: 'number', step: 1, @@ -64,51 +76,76 @@ export default { }, fillColor: { description: '多边形填充颜色', - type: { required: false, summary: 'color', defaultValue: '#00B2D5' }, - table: { defaultValue: '#00B2D5' }, - control: { type: 'color' }, + type: { required: false, name: 'string' }, + table: { + type: { summary: 'string' }, + defaultValue: { summary: '#00B2D5' }, + }, + control: { + type: 'color', + presetColors, + }, }, fillOpacity: { description: '多边形填充透明度,取值范围 [0,1]', - type: { required: false, summary: 'number', defaultValue: 0.5 }, - table: { defaultValue: 0.5 }, + type: { required: false, name: 'number' }, + table: { + type: { summary: 'string' }, + defaultValue: { summary: 0.5 }, + }, control: { - type: 'number', + type: 'range', min: 0, max: 1, - step: 0.01, + step: 0.1, }, }, strokeColor: { description: '轮廓线颜色,使用16进制颜色代码赋值。', - type: { required: false, summary: 'color', defaultValue: '#00D3FC' }, - table: { defaultValue: '#00D3FC' }, - control: { type: 'color' }, + type: { required: false, name: 'string' }, + table: { + type: { summary: 'string' }, + defaultValue: { summary: '#00D3FC' }, + }, + control: { + type: 'color', + presetColors, + }, }, strokeStyle: { description: '轮廓线样式', - type: { required: false, summary: 'solid | dashed', defaultValue: 'solid' }, - table: { defaultValue: 'solid' }, - control: { - type: 'select', - options: ['solid', 'dashed'], + type: { required: false, name: 'enum', value: ['solid', 'dashed'] }, + table: { + type: { summary: ['solid', 'dashed'].join('|') }, + defaultValue: { summary: 'solid' }, }, + options: { + 'solid(实线)': 'solid', + 'dashed(虚线)': 'dashed', + }, + control: 'select', }, strokeOpacity: { description: '轮廓线透明度,取值范围 [0,1]', - type: { required: false, summary: 'number', defaultValue: 0.9 }, - table: { defaultValue: 0.9 }, + type: { required: false, name: 'number' }, + table: { + type: { summary: 'number' }, + defaultValue: { summary: 0.9 }, + }, control: { - type: 'number', + type: 'range', min: 0, max: 1, - step: 0.01, + step: 0.1, }, }, strokeWeight: { description: '轮廓线宽度', - type: { required: false, summary: 'number', defaultValue: 2 }, - table: { defaultValue: 2 }, + type: { required: false, name: 'number' }, + table: { + type: { summary: 'number' }, + defaultValue: { summary: 2 }, + }, control: { type: 'number', min: 0, @@ -116,101 +153,168 @@ export default { }, }, strokeDasharray: { - description: '勾勒形状轮廓的虚线和间隙的样式', - type: { required: false, summary: 'Array' }, + description: '勾勒形状轮廓的虚线和间隙的样式,此属性在strokeStyle 为dashed 时有效', + type: { required: false, name: 'array', value: { name: 'number' } }, + table: { + type: { summary: 'number[]' }, + }, + control: 'object', }, cursor: { - description: '指定鼠标悬停时的鼠标样式', - type: { required: false, summary: 'string' }, + description: '指定鼠标悬停时的鼠标样式,自定义cursor,IE仅支持cur/ani/ico格式,Opera不支持自定义cursor', + type: { required: false, name: 'string' }, + table: { + type: { summary: 'string' }, + }, + control: 'text', }, extData: { description: '设置用户自定义属性', - type: { required: false, summary: 'Object' }, + type: { required: false, name: 'object', value: {} }, + table: { + type: { summary: 'object' }, + }, + control: 'object', }, draggable: { description: '是否可拖动', - type: { required: false, summary: 'type', defaultValue: false }, - table: { defaultValue: false }, - control: { - type: 'boolean', + type: { required: false, name: 'boolean' }, + table: { + type: { summary: 'boolean' }, + defaultValue: { summary: false }, }, + control: 'boolean', }, visible: { description: '显示或隐藏', - type: { required: false, summary: 'boolean', defaultValue: true }, - table: { defaultValue: true }, - control: { - type: 'boolean', + type: { required: false, name: 'boolean' }, + table: { + type: { summary: 'boolean' }, + defaultValue: { summary: true }, }, + control: 'boolean', }, bubble: { description: '是否将覆盖物的鼠标或touch等事件冒泡到地图上', - type: { required: false, summary: 'boolean', defaultValue: false }, - table: { defaultValue: false }, - control: { type: 'boolean' }, + type: { required: false, name: 'boolean' }, + table: { + type: { summary: 'boolean' }, + defaultValue: { summary: false }, + }, + control: 'boolean', }, onShow: { description: '显示,回调函数', - type: { required: false, summary: '(event: any) => void' }, + type: { required: false, name: 'function' }, + table: { + category: '事件', + type: { summary: '(event: any) => void' }, + }, control: false, }, onHide: { description: '隐藏,回调函数', - type: { required: false, summary: '(event: any) => void' }, + type: { required: false, name: 'function' }, + table: { + category: '事件', + type: { summary: '(event: any) => void' }, + }, control: false, }, onClick: { description: '左键单击,回调函数', - type: { required: false, summary: '(event: any) => void' }, + type: { required: false, name: 'function' }, + table: { + category: '事件', + type: { summary: '(event: any) => void' }, + }, control: false, }, onDBLClick: { description: '左键双击,回调函数', - type: { required: false, summary: '(event: any) => void' }, + type: { required: false, name: 'function' }, + table: { + category: '事件', + type: { summary: '(event: any) => void' }, + }, control: false, }, onRightClick: { description: '右键单击,回调函数', - type: { required: false, summary: '(event: any) => void' }, + type: { required: false, name: 'function' }, + table: { + category: '事件', + type: { summary: '(event: any) => void' }, + }, control: false, }, onMousedown: { description: '鼠标按下,回调函数', - type: { required: false, summary: '(event: any) => void' }, + type: { required: false, name: 'function' }, + table: { + category: '事件', + type: { summary: '(event: any) => void' }, + }, control: false, }, onMouseup: { description: '鼠标抬起,回调函数', - type: { required: false, summary: '(event: any) => void' }, + type: { required: false, name: 'function' }, + table: { + category: '事件', + type: { summary: '(event: any) => void' }, + }, control: false, }, onMouseover: { description: '鼠标经过,回调函数', - type: { required: false, summary: '(event: any) => void' }, + type: { required: false, name: 'function' }, + table: { + category: '事件', + type: { summary: '(event: any) => void' }, + }, control: false, }, onMouseout: { description: '鼠标移出,回调函数', - type: { required: false, summary: '(event: any) => void' }, + type: { required: false, name: 'function' }, + table: { + category: '事件', + type: { summary: '(event: any) => void' }, + }, control: false, }, onTouchstart: { description: '触摸开始,回调函数,仅移动设备有效', - type: { required: false, summary: '(event: any) => void' }, + type: { required: false, name: 'function' }, + table: { + category: '事件', + type: { summary: '(event: any) => void' }, + }, control: false, }, onTouchmove: { description: '触摸移动,回调函数,仅移动设备有效', - type: { required: false, summary: '(event: any) => void' }, + type: { required: false, name: 'function' }, + table: { + category: '事件', + type: { summary: '(event: any) => void' }, + }, control: false, }, onTouchend: { description: '触摸结束,回调函数,仅移动设备有效', - type: { required: false, summary: '(event: any) => void' }, + type: { required: false, name: 'function' }, + table: { + category: '事件', + type: { summary: '(event: any) => void' }, + }, control: false, }, }, -} as Meta; +}; + +export default meta; type AMapCircleStory = Story; const Template: AMapCircleStory = (args) => ( diff --git a/src/components/AMapControlBar/stories/AMapControlBar.stories.tsx b/src/components/AMapControlBar/stories/AMapControlBar.stories.tsx index ee8250a..c7fbe92 100644 --- a/src/components/AMapControlBar/stories/AMapControlBar.stories.tsx +++ b/src/components/AMapControlBar/stories/AMapControlBar.stories.tsx @@ -10,7 +10,7 @@ import withAPIContainer from '../../../storybook-decorators/withAPIContainer'; const eventHandler = actions('onShow', 'onHide'); -export default { +const meta: Meta = { title: '组件(Components)/地图控件(Control)/AMapControlBar', component: AMapControlBar, decorators: [ @@ -29,23 +29,45 @@ export default { argTypes: { position: { description: '控件停靠位置', + type: { + required: true, + name: 'union', + value: [ + { name: 'enum', value: ['LT', 'RT', 'LB', 'RB'] }, + { + name: 'object', + value: { + top: { required: false, name: 'string' }, + left: { required: false, name: 'string' }, + right: { required: false, name: 'string' }, + bottom: { required: false, name: 'string' }, + }, + }], + }, table: { - type: { summary: 'string|object' }, - defaultValue: { summary: 'LT' }, + type: { summary: [['LT', 'RT', 'LB', 'RB'].join('|'), 'object'].join('|') }, + defaultValue: { summary: 'LB' }, }, - control: { - type: 'select', - options: ['LT', 'RT', 'LB', 'RB'], + options: { + 'LT(左上)': 'LT', + 'RT(右上)': 'RT', + 'LB(左下)': 'LB', + 'RB(右下)': 'RB', }, + control: 'select', }, offset: { description: '相对于地图容器偏移量,正数代表地图中心,复数向地图外侧(实际现象与高德地图官方文档不一致)。', - type: { summary: 'array', required: false }, - control: 'array', + type: { required: false, name: 'array', value: { name: 'number' } }, + table: { + type: { summary: 'array' }, + }, + control: 'object', }, showControlButton: { description: '是否显示倾斜、旋转按钮。', + type: { required: false, name: 'boolean' }, table: { type: { summary: 'boolean' }, defaultValue: { summary: true }, @@ -54,16 +76,35 @@ export default { }, visible: { description: '显示或隐藏', + type: { required: false, name: 'boolean' }, + table: { + type: { summary: 'boolean' }, + defaultValue: { summary: true }, + }, control: 'boolean', }, onShow: { description: '显示时触发此事件', + type: { required: false, name: 'function' }, + table: { + category: '事件', + type: { summary: '(event: any) => void' }, + }, + control: false, }, onHide: { description: '隐藏时触发此事件', + type: { required: false, name: 'function' }, + table: { + category: '事件', + type: { summary: '(event: any) => void' }, + }, + control: false, }, }, -} as Meta; +}; + +export default meta; const Template: Story = (args) => ; diff --git a/src/components/AMapEllipse/stories/AMapEllipse.stories.tsx b/src/components/AMapEllipse/stories/AMapEllipse.stories.tsx index 189f0ab..5f24c2b 100644 --- a/src/components/AMapEllipse/stories/AMapEllipse.stories.tsx +++ b/src/components/AMapEllipse/stories/AMapEllipse.stories.tsx @@ -24,7 +24,9 @@ const eventHandler = actions( 'onTouchend', ); -export default { +const presetColors = ['#ff0000', '#00ff00', '#0000ff']; + +const meta: Meta = { title: '组件(Components)/覆盖物(Overlay)/AMapEllipse', decorators: [ withAutoFitView, @@ -42,21 +44,27 @@ export default { argTypes: { center: { description: '圆心位置', - type: { required: true, summary: 'LngLatLike' }, + type: { required: true, name: 'array', value: { name: 'number' } }, + table: { + type: { summary: 'LngLatLike' }, + }, + control: 'object', }, radius: { description: '圆半径,单位:米', - type: { required: true, summary: 'array' }, - control: { - type: 'array', - min: 0, - step: 1, + type: { required: true, name: 'array', value: { name: 'number' } }, + table: { + type: { summary: 'number[]' }, }, + control: 'object', }, zIndex: { description: '多边形覆盖物的叠加顺序', - type: { required: false, summary: 'number', defaultValue: 10 }, - table: { defaultValue: 10 }, + type: { required: false, name: 'number' }, + table: { + type: { summary: 'number' }, + defaultValue: { summary: 10 }, + }, control: { type: 'number', step: 1, @@ -64,51 +72,76 @@ export default { }, fillColor: { description: '多边形填充颜色', - type: { required: false, summary: 'color', defaultValue: '#00B2D5' }, - table: { defaultValue: '#00B2D5' }, - control: { type: 'color' }, + type: { required: false, name: 'string' }, + table: { + type: { summary: 'string' }, + defaultValue: { summary: '#00B2D5' }, + }, + control: { + type: 'color', + presetColors, + }, }, fillOpacity: { description: '多边形填充透明度,取值范围 [0,1]', - type: { required: false, summary: 'number', defaultValue: 0.5 }, - table: { defaultValue: 0.5 }, + type: { required: false, name: 'number' }, + table: { + type: { summary: 'string' }, + defaultValue: { summary: 0.5 }, + }, control: { - type: 'number', + type: 'range', min: 0, max: 1, - step: 0.01, + step: 0.1, }, }, strokeColor: { description: '轮廓线颜色,使用16进制颜色代码赋值。', - type: { required: false, summary: 'color', defaultValue: '#00D3FC' }, - table: { defaultValue: '#00D3FC' }, - control: { type: 'color' }, + type: { required: false, name: 'string' }, + table: { + type: { summary: 'string' }, + defaultValue: { summary: '#00D3FC' }, + }, + control: { + type: 'color', + presetColors, + }, }, strokeStyle: { description: '轮廓线样式', - type: { required: false, summary: 'solid | dashed', defaultValue: 'solid' }, - table: { defaultValue: 'solid' }, - control: { - type: 'select', - options: ['solid', 'dashed'], + type: { required: false, name: 'enum', value: ['solid', 'dashed'] }, + table: { + type: { summary: ['solid', 'dashed'].join('|') }, + defaultValue: { summary: 'solid' }, }, + options: { + 'solid(实线)': 'solid', + 'dashed(虚线)': 'dashed', + }, + control: 'select', }, strokeOpacity: { description: '轮廓线透明度,取值范围 [0,1]', - type: { required: false, summary: 'number', defaultValue: 0.9 }, - table: { defaultValue: 0.9 }, + type: { required: false, name: 'number' }, + table: { + type: { summary: 'number' }, + defaultValue: { summary: 0.9 }, + }, control: { - type: 'number', + type: 'range', min: 0, max: 1, - step: 0.01, + step: 0.1, }, }, strokeWeight: { description: '轮廓线宽度', - type: { required: false, summary: 'number', defaultValue: 2 }, - table: { defaultValue: 2 }, + type: { required: false, name: 'number' }, + table: { + type: { summary: 'number' }, + defaultValue: { summary: 2 }, + }, control: { type: 'number', min: 0, @@ -116,101 +149,159 @@ export default { }, }, strokeDasharray: { - description: '勾勒形状轮廓的虚线和间隙的样式', - type: { required: false, summary: 'Array' }, + description: '勾勒形状轮廓的虚线和间隙的样式,此属性在strokeStyle 为dashed 时有效', + type: { required: false, name: 'array', value: { name: 'number' } }, + table: { + type: { summary: 'number[]' }, + }, + control: 'object', }, cursor: { description: '指定鼠标悬停时的鼠标样式', - type: { required: false, summary: 'string' }, + type: { required: false, name: 'string' }, + table: { + type: { summary: 'string' }, + }, + control: 'text', }, extData: { description: '设置用户自定义属性', - type: { required: false, summary: 'Object' }, + type: { required: false, name: 'object', value: {} }, + table: { + type: { summary: 'object' }, + }, + control: 'object', }, draggable: { description: '是否可拖动', - type: { required: false, summary: 'type', defaultValue: false }, - table: { defaultValue: false }, - control: { - type: 'boolean', + type: { required: false, name: 'boolean' }, + table: { + type: { summary: 'boolean' }, + defaultValue: { summary: false }, }, + control: 'boolean', }, visible: { description: '显示或隐藏', - type: { required: false, summary: 'boolean', defaultValue: true }, - table: { defaultValue: true }, - control: { - type: 'boolean', + type: { required: false, name: 'boolean' }, + table: { + type: { summary: 'boolean' }, + defaultValue: { summary: true }, }, + control: 'boolean', }, bubble: { description: '是否将覆盖物的鼠标或touch等事件冒泡到地图上', - type: { required: false, summary: 'boolean', defaultValue: false }, - table: { defaultValue: false }, - control: { type: 'boolean' }, + type: { required: false, name: 'boolean' }, + table: { + type: { summary: 'boolean' }, + defaultValue: { summary: false }, + }, + control: 'boolean', }, onShow: { description: '显示,回调函数', - type: { required: false, summary: '(event: any) => void' }, + type: { required: false, name: 'function' }, + table: { + category: '事件', + type: { summary: '(event: any) => void' }, + }, control: false, }, onHide: { description: '隐藏,回调函数', - type: { required: false, summary: '(event: any) => void' }, + type: { required: false, name: 'function' }, + table: { + category: '事件', + type: { summary: '(event: any) => void' }, + }, control: false, }, onClick: { description: '左键单击,回调函数', - type: { required: false, summary: '(event: any) => void' }, + type: { required: false, name: 'function' }, + table: { + category: '事件', + type: { summary: '(event: any) => void' }, + }, control: false, }, onDBLClick: { description: '左键双击,回调函数', - type: { required: false, summary: '(event: any) => void' }, + type: { required: false, name: 'function' }, + table: { + category: '事件', + type: { summary: '(event: any) => void' }, + }, control: false, }, onRightClick: { description: '右键单击,回调函数', - type: { required: false, summary: '(event: any) => void' }, + type: { required: false, name: 'function' }, + table: { + category: '事件', + type: { summary: '(event: any) => void' }, + }, control: false, }, onMousedown: { description: '鼠标按下,回调函数', - type: { required: false, summary: '(event: any) => void' }, + type: { required: false, name: 'function' }, + table: { + category: '事件', + type: { summary: '(event: any) => void' }, + }, control: false, }, onMouseup: { description: '鼠标抬起,回调函数', - type: { required: false, summary: '(event: any) => void' }, + type: { required: false, name: 'function' }, + table: { + category: '事件', + type: { summary: '(event: any) => void' }, + }, control: false, }, onMouseover: { description: '鼠标经过,回调函数', - type: { required: false, summary: '(event: any) => void' }, + type: { required: false, name: 'function' }, + table: { + category: '事件', + type: { summary: '(event: any) => void' }, + }, control: false, }, onMouseout: { description: '鼠标移出,回调函数', - type: { required: false, summary: '(event: any) => void' }, - control: false, - }, - onTouchstart: { - description: '触摸开始,回调函数,仅移动设备有效', - type: { required: false, summary: '(event: any) => void' }, + type: { required: false, name: 'function' }, + table: { + category: '事件', + type: { summary: '(event: any) => void' }, + }, control: false, }, onTouchmove: { description: '触摸移动,回调函数,仅移动设备有效', - type: { required: false, summary: '(event: any) => void' }, + type: { required: false, name: 'function' }, + table: { + category: '事件', + type: { summary: '(event: any) => void' }, + }, control: false, }, onTouchend: { description: '触摸结束,回调函数,仅移动设备有效', - type: { required: false, summary: '(event: any) => void' }, + type: { required: false, name: 'function' }, + table: { + category: '事件', + type: { summary: '(event: any) => void' }, + }, control: false, }, }, -} as Meta; +}; + +export default meta; type AMapEllipseStory = Story; const Template: AMapEllipseStory = (args) => ( diff --git a/src/components/AMapGeoJSON/stories/AMapGeoJSON.stories.tsx b/src/components/AMapGeoJSON/stories/AMapGeoJSON.stories.tsx index c86c611..eafed20 100644 --- a/src/components/AMapGeoJSON/stories/AMapGeoJSON.stories.tsx +++ b/src/components/AMapGeoJSON/stories/AMapGeoJSON.stories.tsx @@ -98,7 +98,7 @@ const mockData: GeoJSON.FeatureCollection = { ], }; -export default { +const meta: Meta = { title: '组件(Components)/覆盖物(Overlay)/AMapGeoJSON', decorators: [ withAutoFitView, @@ -113,34 +113,34 @@ export default { argTypes: { geoJSON: { description: '要加载的标准 GeoJSON 对象', - type: { name: 'other', value: '', required: true }, + type: { required: true, name: 'object', value: {} }, table: { type: { - summary: 'GeoJSON', + summary: 'GeoJSON.FeatureCollection', detail: 'AMap 暂时不支持 `Feature`,需要转换成 `FeatureCollection`', }, }, }, visible: { description: '显示或隐藏', - type: { required: false, summary: 'boolean', defaultValue: true }, - table: { defaultValue: true }, - control: { - type: 'boolean', + type: { required: false, name: 'boolean' }, + table: { + type: { summary: 'boolean' }, + defaultValue: { summary: true }, }, + control: 'boolean', }, options: { description: '修改覆盖物属性(包括线样式、样色等等)', - type: { name: 'other', value: '', required: false }, + type: { required: false, name: 'object', value: {} }, table: { - type: { - summary: 'Object', - detail: '具体字段参考高德 JS API 文档', - }, + type: { summary: 'object', detail: '具体字段参考高德 JS API 文档' }, }, + control: 'object', }, getMarker: { description: '指定点要素的绘制方式,缺省时为 Marker 的默认样式。', + type: { required: false, name: 'function' }, table: { type: { summary: @@ -150,6 +150,7 @@ export default { }, getPolyline: { description: '指定点要素的绘制方式,缺省时为 Polyline 的默认样式。', + type: { required: false, name: 'function' }, table: { type: { summary: @@ -159,6 +160,7 @@ export default { }, getPolygon: { description: '指定点要素的绘制方式,缺省时为 Polygon 的默认样式。', + type: { required: false, name: 'function' }, table: { type: { summary: @@ -167,7 +169,9 @@ export default { }, }, }, -} as Meta; +}; + +export default meta; const Template: Story = (args) => ( diff --git a/src/components/AMapHawkEye/stories/AMapHawkEye.stories.tsx b/src/components/AMapHawkEye/stories/AMapHawkEye.stories.tsx index 3750c3e..333ecba 100644 --- a/src/components/AMapHawkEye/stories/AMapHawkEye.stories.tsx +++ b/src/components/AMapHawkEye/stories/AMapHawkEye.stories.tsx @@ -10,6 +10,8 @@ import withAPIContainer from '../../../storybook-decorators/withAPIContainer'; const eventHandler = actions('onShow', 'onHide', 'onOpen', 'onClose'); +const presetColors = ['#ff0000', '#00ff00', '#0000ff']; + export default { title: '组件(Components)/地图控件(Control)/AMapHawkEye', component: AMapHawkEye, @@ -28,90 +30,143 @@ export default { }, argTypes: { offset: { - description: - '相对于地图容器偏移量,正数代表地图中心,复数向地图外侧(实际现象与高德地图官方文档不一致)。', - control: { - type: 'object', + description: '缩略图距离地图右下角的像素距离', + type: { required: false, name: 'array', value: { name: 'number' } }, + table: { + type: { summary: 'number[]' }, }, + control: 'object', }, autoMove: { description: '是否随主图视口变化移动', - control: { - type: 'boolean', + type: { required: false, name: 'boolean' }, + table: { + type: { summary: 'boolean' }, + defaultValue: { summary: true }, }, + control: 'boolean', }, showRectangle: { description: '是否显示视口矩形', - control: { - type: 'boolean', + type: { required: false, name: 'boolean' }, + table: { + type: { summary: 'boolean' }, + defaultValue: { summary: true }, }, + control: 'boolean', }, showButton: { description: '是否显示打开关闭的按钮', - control: { - type: 'boolean', + type: { required: false, name: 'boolean' }, + table: { + type: { summary: 'boolean' }, + defaultValue: { summary: true }, }, + control: 'boolean', }, isOpen: { description: '默认是否展开', - control: { - type: 'boolean', + type: { required: false, name: 'boolean' }, + table: { + type: { summary: 'boolean' }, + defaultValue: { summary: true }, }, + control: 'boolean', }, mapStyle: { description: '缩略图要显示的地图自定义样式,如 "amap://styles/dark"', - control: { - type: 'text', + type: { required: false, name: 'string' }, + table: { + type: { summary: 'string' }, }, + control: 'text', }, width: { description: '缩略图的宽度,同CSS,如 "200px"', - control: { - type: 'text', - description: '缩略图的宽度,同CSS,如 "200px"', + type: { required: false, name: 'string' }, + table: { + type: { summary: 'string' }, }, + control: 'text', }, height: { description: '缩略图的高度,同CSS,如"200px"', - control: { - type: 'text', + type: { required: false, name: 'string' }, + table: { + type: { summary: 'string' }, }, + control: 'text', }, borderStyle: { description: '缩略图的边框样式,同CSS,如 "double solid solid double"', - control: { - type: 'text', + type: { required: false, name: 'string' }, + table: { + type: { summary: 'string' }, }, + control: 'text', }, borderColor: { - description: '缩略图的高度,同CSS,如 "silver"', + description: '缩略图的边框颜色,同CSS,如 "silver"', + type: { required: false, name: 'string' }, + table: { + type: { summary: 'string' }, + defaultValue: { summary: '#00B2D5' }, + }, control: { type: 'color', + presetColors, }, }, borderRadius: { - description: '缩略图的高度,同CSS,如 "5px"', - control: { - type: 'text', + description: '缩略图的圆角半径,同CSS,如 "5px"', + type: { required: false, name: 'string' }, + table: { + type: { summary: 'string' }, }, + control: 'text', }, borderWidth: { - description: '缩略图的高度,同CSS,如 "5px"', - control: { - type: 'text', + description: '缩略图的边框宽度,同CSS,如 "5px"', + type: { required: false, name: 'string' }, + table: { + type: { summary: 'string' }, }, + control: 'text', }, buttonSize: { description: '箭头按钮的像素尺寸,同CSS,如 "12px"', - control: { - type: 'text', + type: { required: false, name: 'string' }, + table: { + type: { summary: 'string' }, }, + control: 'text', }, visible: { description: '显示或隐藏', - control: { - type: 'boolean', + type: { required: false, name: 'boolean' }, + table: { + type: { summary: 'boolean' }, + defaultValue: { summary: true }, + }, + control: 'boolean', + }, + onShow: { + description: '显示时触发此事件', + type: { required: false, name: 'function' }, + table: { + category: '事件', + type: { summary: '(event: any) => void' }, + }, + control: false, + }, + onHide: { + description: '隐藏时触发此事件', + type: { required: false, name: 'function' }, + table: { + category: '事件', + type: { summary: '(event: any) => void' }, }, + control: false, }, }, } as Meta; diff --git a/src/components/AMapMap/stories/AMapMap.stories.tsx b/src/components/AMapMap/stories/AMapMap.stories.tsx index 0e99bb6..8cae78f 100644 --- a/src/components/AMapMap/stories/AMapMap.stories.tsx +++ b/src/components/AMapMap/stories/AMapMap.stories.tsx @@ -8,7 +8,7 @@ import withAPIContainer from '../../../storybook-decorators/withAPIContainer'; AMapMap.displayName = 'AMapMap'; -export default { +const meta: Meta = { title: '组件(Components)/基础组件(Basic)/AMapMap', component: AMapMap, decorators: [ @@ -17,34 +17,43 @@ export default { ], args: { features: ['bg', 'point', 'road', 'building'], + viewMode: '2D', }, argTypes: { viewMode: { description: '地图视图模式。注意,切换地图模式会创建新的地图实例,同时销毁原有地图实例。', + type: { required: false, name: 'enum', value: ['2D', '3D'] }, table: { type: { summary: 'string' }, defaultValue: { summary: '2D' }, }, - control: { - type: 'select', - options: ['2D', '3D'], - }, + options: ['2D', '3D'], + control: 'select', }, center: { description: '中心经纬度', + type: { required: false, name: 'array', value: { name: 'number' } }, table: { - type: { summary: 'array' }, + type: { summary: 'number[]' }, }, control: 'object', }, cityName: { description: '行政区名称支持中国、省、市、区/县名称,如遇重名的情况,会按城市编码表顺序返回第一个。', + type: { required: false, name: 'string' }, + table: { + type: { summary: 'string' }, + }, control: 'text', }, zoom: { description: '地图显示的缩放级别,可以设置为浮点数;若 center 与level 未赋值,地图初始化默认显示用户所在城市范围。', + type: { required: false, name: 'number' }, + table: { + type: { summary: 'number' }, + }, control: { type: 'number', min: 2, @@ -54,19 +63,22 @@ export default { }, features: { description: '设置地图上显示的元素种类', + type: { + required: false, + name: 'array', + value: { name: 'enum', value: ['bg', 'point', 'road', 'building'] }, + }, table: { type: { summary: 'string[]' }, defaultValue: { summary: "['bg', 'point', 'road', 'building']" }, }, - control: { - type: 'check', - options: { - 地图背景: 'bg', - POI: 'point', - 道路: 'road', - 建筑物: 'building', - }, + options: { + 'bg(地图背景)': 'bg', + 'point(POI)': 'point', + 'road(道路)': 'road', + 'building(建筑物)': 'building', }, + control: 'check', }, mapStyle: { description: [ @@ -74,6 +86,7 @@ export default { '官方样式模版,如 "amap://styles/grey"', '地图自定义平台定制地图样式,如 "amap://styles/d6bf8c1d69cea9f5c696185ad4ac4c86"', ].join('
'), + type: { required: false, name: 'string' }, table: { type: { summary: 'string' }, }, @@ -81,6 +94,7 @@ export default { }, pitch: { description: '俯仰角度,值范围:0-90。2D地图下无效 。', + type: { required: false, name: 'number' }, table: { type: { summary: 'number' }, defaultValue: { summary: '0' }, @@ -93,7 +107,9 @@ export default { }, }, }, -} as Meta; +}; + +export default meta; const Template: Story = (args) => ; diff --git a/src/components/AMapMapType/stories/AMapMapType.stories.tsx b/src/components/AMapMapType/stories/AMapMapType.stories.tsx index b103d68..c52824c 100644 --- a/src/components/AMapMapType/stories/AMapMapType.stories.tsx +++ b/src/components/AMapMapType/stories/AMapMapType.stories.tsx @@ -10,7 +10,7 @@ import withAPIContainer from '../../../storybook-decorators/withAPIContainer'; const eventHandler = actions('onShow', 'onHide'); -export default { +const meta: Meta = { title: '组件(Components)/地图控件(Control)/AMapMapType', component: AMapMapType, decorators: [ @@ -27,17 +27,20 @@ export default { argTypes: { defaultType: { description: '初始化默认图层类型。 默认底图: 0; 卫星图: 1。', + type: { required: false, name: 'enum', value: [0, 1] }, table: { type: { summary: '0|1' }, defaultValue: { summary: '0' }, }, - control: { - type: 'select', - options: [0, 1], + options: { + '0(默认底图)': 0, + '1(卫星图)': 1, }, + control: { type: 'select' }, }, showTraffic: { description: '叠加实时交通图层', + type: { required: false, name: 'boolean' }, table: { type: { summary: 'boolean' }, defaultValue: { summary: false }, @@ -46,6 +49,7 @@ export default { }, showRoad: { description: '叠加路网图层', + type: { required: false, name: 'boolean' }, table: { type: { summary: 'boolean' }, defaultValue: { summary: false }, @@ -54,16 +58,35 @@ export default { }, visible: { description: '显示或隐藏', + type: { required: false, name: 'boolean' }, + table: { + type: { summary: 'boolean' }, + defaultValue: { summary: true }, + }, control: 'boolean', }, onShow: { description: '显示时触发此事件', + type: { required: false, name: 'function' }, + table: { + category: '事件', + type: { summary: '(event: any) => void' }, + }, + control: false, }, onHide: { description: '隐藏时触发此事件', + type: { required: false, name: 'function' }, + table: { + category: '事件', + type: { summary: '(event: any) => void' }, + }, + control: false, }, }, -} as Meta; +}; + +export default meta; const Template: Story = (args) => ; diff --git a/src/components/AMapMarker/stories/AMapMarker.stories.tsx b/src/components/AMapMarker/stories/AMapMarker.stories.tsx index bd1533f..bb9ef23 100644 --- a/src/components/AMapMarker/stories/AMapMarker.stories.tsx +++ b/src/components/AMapMarker/stories/AMapMarker.stories.tsx @@ -36,7 +36,7 @@ const eventHandler = actions( 'onMoveAlong', ); -export default { +const meta: Meta = { title: '组件(Components)/覆盖物(Overlay)/AMapMarker', component: AMapMarker, decorators: [ @@ -55,64 +55,104 @@ export default { argTypes: { position: { description: '点标记在地图上显示的位置', - type: { required: true, summary: 'LngLatLike' }, - control: 'array', + type: { required: true, name: 'array', value: { name: 'number' } }, + table: { + type: { summary: 'LngLatLike' }, + }, + control: 'object', }, title: { description: '鼠标滑过点标记时的文字提示。不设置则鼠标滑过点标无文字提示。', - type: { required: false, summary: 'string' }, + type: { required: false, name: 'string' }, + table: { + type: { summary: 'string' }, + }, control: 'text', }, content: { description: '点标记显示内容。可以是HTML要素字符串或者HTML DOM对象。content有效时,icon属性将被覆盖。', - type: { required: false, summary: 'string | HTMLElement' }, + type: { required: false, name: 'string' }, + table: { + type: { summary: 'string | HTMLElement' }, + }, control: 'text', }, icon: { description: '在点标记中显示的图标。有合法的 content 内容设置时,此属性无效。', - type: { required: false, summary: 'AMap.Icon | string' }, + type: { required: false, name: 'string' }, + table: { + type: { summary: ['AMap.Icon', 'string'].join('|') }, + }, control: 'text', }, label: { description: '设置点标记文本标签内容', - type: { required: false, summary: 'LabelOptions' }, + type: { + required: false, + name: 'object', + value: { + content: { name: 'string' }, + direction: { name: 'string' }, + offset: { name: 'array', value: { name: 'number' } }, + }, + }, + table: { + type: { + summary: 'LabelOptions', + detail: '具体字段参考高德 JS API 文档', + }, + }, control: false, }, zooms: { description: '设置显示级别范围。注意:当前实现变更 zooms 时会触发重新创建实例。', - type: { required: false, summary: 'Vector2', defaultValue: [2, 20] }, - table: { defaultValue: [2, 20] }, + type: { required: false, name: 'array', value: { name: 'number' } }, + table: { + type: { summary: 'number[]' }, + defaultValue: { summary: '[2, 20]' }, + }, control: 'array', }, clickable: { description: '点标记是否可点击', - type: { required: false, summary: 'boolean', defaultValue: true }, - table: { defaultValue: true }, + type: { required: false, name: 'boolean' }, + table: { + type: { summary: 'boolean' }, + defaultValue: { summary: true }, + }, control: 'boolean', }, draggable: { description: '点标记是否可拖拽', - type: { required: false, summary: 'boolean', defaultValue: false }, - table: { defaultValue: false }, + type: { required: false, name: 'boolean' }, + table: { + type: { summary: 'boolean' }, + defaultValue: { summary: false }, + }, control: 'boolean', }, cursor: { description: '指定鼠标悬停时的鼠标样式', - type: { required: false, summary: 'string' }, + type: { required: false, name: 'string' }, + table: { + type: { summary: 'string' }, + }, control: 'text', }, extData: { description: '设置用户自定义属性', - type: { required: false, summary: 'Object' }, - control: false, + type: { required: false, name: 'object', value: {} }, + table: { + type: { summary: 'object' }, + }, + control: 'object', }, anchor: { description: '设置点标记锚点', - type: { required: false, summary: 'boolean', defaultValue: 'center' }, - table: { defaultValue: 'center' }, - control: { - type: 'select', - options: [ + type: { + required: false, + name: 'enum', + value: [ 'top-left', 'top-center', 'top-right', @@ -124,29 +164,95 @@ export default { 'bottom-right', ], }, + table: { + type: { + summary: [ + 'top-left', + 'top-center', + 'top-right', + 'middle-left', + 'center', + 'middle-right', + 'bottom-left', + 'bottom-center', + 'bottom-right', + ].join('|'), + }, + defaultValue: { summary: 'center' }, + }, + options: [ + 'top-left', + 'top-center', + 'top-right', + 'middle-left', + 'center', + 'middle-right', + 'bottom-left', + 'bottom-center', + 'bottom-right', + ], + control: 'select', }, offset: { description: '覆盖物偏移量', - type: { required: false, summary: 'Pixel | Vector2', defaultValue: [0, 0] }, - table: { defaultValue: [0, 0] }, - control: 'array', + type: { + required: false, + name: 'union', + value: [ + { name: 'array', value: { name: 'number' } }, + { + name: 'object', + value: { + x: { name: 'number' }, + y: { name: 'number' }, + }, + }, + ], + }, + table: { + type: { summary: ['Vector2', 'Pixel'].join('|') }, + defaultValue: { summary: '[0, 0]' }, + }, + control: 'object', }, angle: { description: '点标记的旋转角度', - type: { required: false, summary: 'number', defaultValue: 0 }, - table: { defaultValue: 0 }, + type: { required: false, name: 'number' }, + table: { + type: { summary: 'number' }, + defaultValue: { summary: 0 }, + }, control: { type: 'number', min: 0, max: 360 }, }, size: { description: '尺寸', - type: { required: false, summary: 'Size | Vector2' }, - // table: { defaultValue: [36, 36] }, - control: 'array', + type: { + required: false, + name: 'union', + value: [ + { name: 'array', value: { name: 'number' } }, + { + name: 'object', + value: { + width: { name: 'number' }, + height: { name: 'number' }, + }, + }, + ], + }, + table: { + type: { summary: ['AMap.Size', 'AMap.Vector2'].join('|') }, + defaultValue: { summary: '[36, 36]' }, + }, + control: 'object', }, zIndex: { description: '多边形覆盖物的叠加顺序', - type: { required: false, summary: 'number', defaultValue: 12 }, - table: { defaultValue: 12 }, + type: { required: false, name: 'number' }, + table: { + type: { summary: 'number' }, + defaultValue: { summary: 10 }, + }, control: { type: 'number', step: 1, @@ -155,108 +261,189 @@ export default { // visible: { description: '显示或隐藏', - type: { required: false, summary: 'boolean', defaultValue: true }, - table: { defaultValue: true }, + type: { required: false, name: 'boolean' }, + table: { + type: { summary: 'boolean' }, + defaultValue: { summary: true }, + }, control: 'boolean', }, // onShow: { description: '显示,回调函数', - type: { required: false, summary: '(event: any) => void' }, + type: { required: false, name: 'function' }, + table: { + category: '事件', + type: { summary: '(event: any) => void' }, + }, control: false, }, onHide: { description: '隐藏,回调函数', - type: { required: false, summary: '(event: any) => void' }, + type: { required: false, name: 'function' }, + table: { + category: '事件', + type: { summary: '(event: any) => void' }, + }, control: false, }, onClick: { description: '左键单击,回调函数', - type: { required: false, summary: '(event: any) => void' }, + type: { required: false, name: 'function' }, + table: { + category: '事件', + type: { summary: '(event: any) => void' }, + }, control: false, }, onDBLClick: { description: '左键双击,回调函数', - type: { required: false, summary: '(event: any) => void' }, + type: { required: false, name: 'function' }, + table: { + category: '事件', + type: { summary: '(event: any) => void' }, + }, control: false, }, onRightClick: { description: '右键单击,回调函数', - type: { required: false, summary: '(event: any) => void' }, + type: { required: false, name: 'function' }, + table: { + category: '事件', + type: { summary: '(event: any) => void' }, + }, control: false, }, onMousemove: { description: '鼠标移动', - type: { required: false, summary: '(event: any) => void' }, + type: { required: false, name: 'function' }, + table: { + category: '事件', + type: { summary: '(event: any) => void' }, + }, control: false, }, onMousedown: { description: '鼠标按下,回调函数', - type: { required: false, summary: '(event: any) => void' }, + type: { required: false, name: 'function' }, + table: { + category: '事件', + type: { summary: '(event: any) => void' }, + }, control: false, }, onMouseup: { description: '鼠标抬起,回调函数', - type: { required: false, summary: '(event: any) => void' }, + type: { required: false, name: 'function' }, + table: { + category: '事件', + type: { summary: '(event: any) => void' }, + }, control: false, }, onMouseover: { description: '鼠标经过,回调函数', - type: { required: false, summary: '(event: any) => void' }, + type: { required: false, name: 'function' }, + table: { + category: '事件', + type: { summary: '(event: any) => void' }, + }, control: false, }, onMouseout: { description: '鼠标移出,回调函数', - type: { required: false, summary: '(event: any) => void' }, + type: { required: false, name: 'function' }, + table: { + category: '事件', + type: { summary: '(event: any) => void' }, + }, control: false, }, onTouchstart: { description: '触摸开始,回调函数,仅移动设备有效', - type: { required: false, summary: '(event: any) => void' }, + type: { required: false, name: 'function' }, + table: { + category: '事件', + type: { summary: '(event: any) => void' }, + }, control: false, }, onTouchmove: { description: '触摸移动,回调函数,仅移动设备有效', - type: { required: false, summary: '(event: any) => void' }, + type: { required: false, name: 'function' }, + table: { + category: '事件', + type: { summary: '(event: any) => void' }, + }, control: false, }, onTouchend: { description: '触摸结束,回调函数,仅移动设备有效', - type: { required: false, summary: '(event: any) => void' }, + type: { required: false, name: 'function' }, + table: { + category: '事件', + type: { summary: '(event: any) => void' }, + }, control: false, }, onDragstart: { description: '开始拖拽点标记时触发事件', - type: { required: false, summary: '(event: any) => void' }, + type: { required: false, name: 'function' }, + table: { + category: '事件', + type: { summary: '(event: any) => void' }, + }, control: false, }, onDragging: { description: '鼠标拖拽移动点标记时触发事件', - type: { required: false, summary: '(event: any) => void' }, + type: { required: false, name: 'function' }, + table: { + category: '事件', + type: { summary: '(event: any) => void' }, + }, control: false, }, onDragend: { description: '点标记拖拽移动结束触发事件', - type: { required: false, summary: '(event: any) => void' }, + type: { required: false, name: 'function' }, + table: { + category: '事件', + type: { summary: '(event: any) => void' }, + }, control: false, }, onMoving: { description: '点标记在执行 `moveTo`,`moveAlong` 动画时触发事件', - type: { required: false, summary: '(event: any) => void' }, + type: { required: false, name: 'function' }, + table: { + category: '事件', + type: { summary: '(event: any) => void' }, + }, control: false, }, onMoveEnd: { description: '点标记在执行 `moveTo`,`moveAlong` 动画时触发事件', - type: { required: false, summary: '(event: any) => void' }, + type: { required: false, name: 'function' }, + table: { + category: '事件', + type: { summary: '(event: any) => void' }, + }, control: false, }, onMoveAlong: { description: '点标记执行 moveAlong 动画一次后触发事件', - type: { required: false, summary: '(event: any) => void' }, + type: { required: false, name: 'function' }, + table: { + category: '事件', + type: { summary: '(event: any) => void' }, + }, control: false, }, }, -} as Meta; +}; + +export default meta; const Template: Story = (args) => ; diff --git a/src/components/AMapMouseTool/stories/AMapMouseTool.stories.tsx b/src/components/AMapMouseTool/stories/AMapMouseTool.stories.tsx index 5b0bb61..9397eb5 100644 --- a/src/components/AMapMouseTool/stories/AMapMouseTool.stories.tsx +++ b/src/components/AMapMouseTool/stories/AMapMouseTool.stories.tsx @@ -10,7 +10,7 @@ import withAPIContainer from '../../../storybook-decorators/withAPIContainer'; const eventHandler = actions('onCompleted'); -export default { +const meta: Meta = { title: '组件(Components)/工具(Tools)/AMapMouseTool', decorators: [ withAMap(), @@ -28,10 +28,10 @@ export default { argTypes: { type: { description: '工具类型', - type: { required: true, summary: 'string ' }, - control: { - type: 'select', - options: [ + type: { + required: true, + name: 'enum', + value: [ 'marker', 'circle', 'rectangle', @@ -43,17 +43,56 @@ export default { 'rectZoomOut', ], }, + table: { + type: { + summary: [ + 'marker', + 'circle', + 'rectangle', + 'polyline', + 'polygon', + 'measureArea', + 'rule', + 'rectZoomIn', + 'rectZoomOut', + ].join('|'), + }, + // defaultValue: { summary: '' }, + }, + options: [ + 'marker', + 'circle', + 'rectangle', + 'polyline', + 'polygon', + 'measureArea', + 'rule', + 'rectZoomIn', + 'rectZoomOut', + ], + control: 'select', }, options: { description: '额外参数', - type: { summary: 'object' }, + type: { required: false, name: 'object', value: {} }, + table: { + type: { summary: 'object', detail: '具体字段参考高德 JS API 文档' }, + }, + control: 'object', }, onCompleted: { - description: '鼠标工具绘制覆盖物结束时触发此事件,obj对象为绘制出来的覆盖物对象', - type: { summary: '(event: AMap.Event<"draw">) => void' }, + description: '鼠标工具绘制覆盖物结束时触发此事件,obj 对象为绘制出来的覆盖物对象', + type: { required: false, name: 'function' }, + table: { + type: { + summary: '(event: AMap.Event<"draw">) => void', + }, + }, }, }, -} as Meta; +}; + +export default meta; const Template: Story = (args) => ( diff --git a/src/components/AMapOverlayGroup/stories/AMapOverlayGroup.stories.tsx b/src/components/AMapOverlayGroup/stories/AMapOverlayGroup.stories.tsx index 21de593..1d337c6 100644 --- a/src/components/AMapOverlayGroup/stories/AMapOverlayGroup.stories.tsx +++ b/src/components/AMapOverlayGroup/stories/AMapOverlayGroup.stories.tsx @@ -31,7 +31,7 @@ const eventHandler = actions( 'onTouchend', ); -export default { +const meta: Meta = { title: '组件(Components)/覆盖物(Overlay)/AMapOverlayGroup', decorators: [ withAutoFitView, @@ -47,84 +47,135 @@ export default { argTypes: { visible: { description: '显示或隐藏', - type: { required: false, summary: 'boolean', defaultValue: true }, - table: { defaultValue: true }, - control: { - type: 'boolean', + type: { required: false, name: 'boolean' }, + table: { + type: { summary: 'boolean' }, + defaultValue: { summary: true }, }, + control: 'boolean', }, options: { description: '修改覆盖物属性(包括线样式、样色等等)。注意:当前实现,嵌套使用时,父级组件会覆盖子组件的样式。', - type: { name: 'other', value: '', required: false }, + type: { required: false, name: 'object', value: {} }, table: { type: { - summary: 'Object', + summary: 'object', detail: '具体字段参考高德 JS API 文档', }, }, }, onShow: { description: '显示,回调函数', - type: { required: false, summary: '(event: any) => void' }, + type: { required: false, name: 'function' }, + table: { + category: '事件', + type: { summary: '(event: any) => void' }, + }, control: false, }, onHide: { description: '隐藏,回调函数', - type: { required: false, summary: '(event: any) => void' }, + type: { required: false, name: 'function' }, + table: { + category: '事件', + type: { summary: '(event: any) => void' }, + }, control: false, }, onClick: { description: '左键单击,回调函数', - type: { required: false, summary: '(event: any) => void' }, + type: { required: false, name: 'function' }, + table: { + category: '事件', + type: { summary: '(event: any) => void' }, + }, control: false, }, onDBLClick: { description: '左键双击,回调函数', - type: { required: false, summary: '(event: any) => void' }, + type: { required: false, name: 'function' }, + table: { + category: '事件', + type: { summary: '(event: any) => void' }, + }, control: false, }, onRightClick: { description: '右键单击,回调函数', - type: { required: false, summary: '(event: any) => void' }, + type: { required: false, name: 'function' }, + table: { + category: '事件', + type: { summary: '(event: any) => void' }, + }, control: false, }, onMousedown: { description: '鼠标按下,回调函数', - type: { required: false, summary: '(event: any) => void' }, + type: { required: false, name: 'function' }, + table: { + category: '事件', + type: { summary: '(event: any) => void' }, + }, control: false, }, onMouseup: { description: '鼠标抬起,回调函数', - type: { required: false, summary: '(event: any) => void' }, + type: { required: false, name: 'function' }, + table: { + category: '事件', + type: { summary: '(event: any) => void' }, + }, control: false, }, onMouseover: { description: '鼠标经过,回调函数', - type: { required: false, summary: '(event: any) => void' }, + type: { required: false, name: 'function' }, + table: { + category: '事件', + type: { summary: '(event: any) => void' }, + }, control: false, }, onMouseout: { description: '鼠标移出,回调函数', - type: { required: false, summary: '(event: any) => void' }, + type: { required: false, name: 'function' }, + table: { + category: '事件', + type: { summary: '(event: any) => void' }, + }, control: false, }, onTouchstart: { description: '触摸开始,回调函数,仅移动设备有效', - type: { required: false, summary: '(event: any) => void' }, + type: { required: false, name: 'function' }, + table: { + category: '事件', + type: { summary: '(event: any) => void' }, + }, control: false, }, onTouchmove: { description: '触摸移动,回调函数,仅移动设备有效', - type: { required: false, summary: '(event: any) => void' }, + type: { required: false, name: 'function' }, + table: { + category: '事件', + type: { summary: '(event: any) => void' }, + }, control: false, }, onTouchend: { description: '触摸结束,回调函数,仅移动设备有效', - type: { required: false, summary: '(event: any) => void' }, + type: { required: false, name: 'function' }, + table: { + category: '事件', + type: { summary: '(event: any) => void' }, + }, control: false, }, }, -} as Meta; +}; + +export default meta; type AMapOverlayGroupStory = Story; const Template: AMapOverlayGroupStory = (args) => ( diff --git a/src/components/AMapPolygon/stories/AMapPolygon.stories.tsx b/src/components/AMapPolygon/stories/AMapPolygon.stories.tsx index c5f2f10..2cef4d7 100644 --- a/src/components/AMapPolygon/stories/AMapPolygon.stories.tsx +++ b/src/components/AMapPolygon/stories/AMapPolygon.stories.tsx @@ -34,7 +34,9 @@ const eventHandler = actions( 'onTouchend', ); -export default { +const presetColors = ['#ff0000', '#00ff00', '#0000ff']; + +const meta: Meta = { title: '组件(Components)/覆盖物(Overlay)/AMapPolygon', decorators: [ withAutoFitView, @@ -56,12 +58,30 @@ export default { argTypes: { path: { description: '多边形轮廓线的节点坐标数组', - type: { name: 'other', required: true, summary: 'LngLatLike[] | LngLatLike[][] | LngLatLike[][][]' }, + type: { + required: true, + name: 'union', + value: [ + { name: 'array', value: { name: 'array', value: { name: 'number' } } }, // [number, number][] + { name: 'array', value: { name: 'array', value: { name: 'array', value: { name: 'number' } } } }, // [number, number][][] + { name: 'array', value: { name: 'array', value: { name: 'array', value: { name: 'array', value: { name: 'number' } } } } }, // [number, number][][][] + { name: 'array', value: { name: 'object', value: { lng: { name: 'number' }, lat: { name: 'number' } } } }, // { lng, lat }[] + { name: 'array', value: { name: 'array', value: { name: 'object', value: { lng: { name: 'number' }, lat: { name: 'number' } } } } }, // { lng, lat }[][] + { name: 'array', value: { name: 'array', value: { name: 'array', value: { name: 'object', value: { lng: { name: 'number' }, lat: { name: 'number' } } } } } }, // { lng, lat }[][][] + ], + }, + table: { + type: { summary: 'LngLatLike[] | LngLatLike[][] | LngLatLike[][][]' }, + }, + control: 'object', }, zIndex: { description: '多边形覆盖物的叠加顺序', - type: { required: false, summary: 'number', defaultValue: 10 }, - table: { defaultValue: 10 }, + type: { required: false, name: 'number' }, + table: { + type: { summary: 'number' }, + defaultValue: { summary: 10 }, + }, control: { type: 'number', step: 1, @@ -69,51 +89,76 @@ export default { }, fillColor: { description: '多边形填充颜色', - type: { required: false, summary: 'color', defaultValue: '#00B2D5' }, - table: { defaultValue: '#00B2D5' }, - control: { type: 'color' }, + type: { required: false, name: 'string' }, + table: { + type: { summary: 'string' }, + defaultValue: { summary: '#00B2D5' }, + }, + control: { + type: 'color', + presetColors, + }, }, fillOpacity: { description: '多边形填充透明度,取值范围 [0,1]', - type: { required: false, summary: 'number', defaultValue: 0.5 }, - table: { defaultValue: 0.5 }, + type: { required: false, name: 'number' }, + table: { + type: { summary: 'string' }, + defaultValue: { summary: 0.5 }, + }, control: { - type: 'number', + type: 'range', min: 0, max: 1, - step: 0.01, + step: 0.1, }, }, strokeColor: { description: '轮廓线颜色,使用16进制颜色代码赋值。', - type: { required: false, summary: 'color', defaultValue: '#00D3FC' }, - table: { defaultValue: '#00D3FC' }, - control: { type: 'color' }, + type: { required: false, name: 'string' }, + table: { + type: { summary: 'string' }, + defaultValue: { summary: '#00D3FC' }, + }, + control: { + type: 'color', + presetColors, + }, }, strokeStyle: { description: '轮廓线样式', - type: { required: false, summary: 'solid | dashed', defaultValue: 'solid' }, - table: { defaultValue: 'solid' }, - control: { - type: 'select', - options: ['solid', 'dashed'], + type: { required: false, name: 'enum', value: ['solid', 'dashed'] }, + table: { + type: { summary: ['solid', 'dashed'].join('|') }, + defaultValue: { summary: 'solid' }, + }, + options: { + 'solid(实线)': 'solid', + 'dashed(虚线)': 'dashed', }, + control: 'select', }, strokeOpacity: { description: '轮廓线透明度,取值范围 [0,1]', - type: { required: false, summary: 'number', defaultValue: 0.9 }, - table: { defaultValue: 0.9 }, + type: { required: false, name: 'number' }, + table: { + type: { summary: 'number' }, + defaultValue: { summary: 0.9 }, + }, control: { - type: 'number', + type: 'range', min: 0, max: 1, - step: 0.01, + step: 0.1, }, }, strokeWeight: { description: '轮廓线宽度', - type: { required: false, summary: 'number', defaultValue: 2 }, - table: { defaultValue: 2 }, + type: { required: false, name: 'number' }, + table: { + type: { summary: 'number' }, + defaultValue: { summary: 2 }, + }, control: { type: 'number', min: 0, @@ -122,148 +167,236 @@ export default { }, strokeDasharray: { description: '勾勒形状轮廓的虚线和间隙的样式', - type: { required: false, summary: 'Array' }, + type: { required: false, name: 'array', value: { name: 'number' } }, + table: { + type: { summary: 'number[]' }, + }, + control: 'object', }, cursor: { description: '指定鼠标悬停时的鼠标样式', - type: { required: false, summary: 'string' }, + type: { required: false, name: 'string' }, + table: { + type: { summary: 'string' }, + }, + control: 'text', }, extData: { description: '设置用户自定义属性', - type: { required: false, summary: 'Object' }, + type: { required: false, name: 'object', value: {} }, + table: { + type: { summary: 'object' }, + }, + control: 'object', }, draggable: { description: '是否可拖动', - type: { required: false, summary: 'type', defaultValue: false }, - table: { defaultValue: false }, - control: { - type: 'boolean', + type: { required: false, name: 'boolean' }, + table: { + type: { summary: 'boolean' }, + defaultValue: { summary: false }, }, + control: 'boolean', }, visible: { description: '显示或隐藏', - type: { required: false, summary: 'boolean', defaultValue: true }, - table: { defaultValue: true }, - control: { - type: 'boolean', + type: { required: false, name: 'boolean' }, + table: { + type: { summary: 'boolean' }, + defaultValue: { summary: true }, }, + control: 'boolean', }, bubble: { description: '是否将覆盖物的鼠标或touch等事件冒泡到地图上', - type: { required: false, summary: 'boolean', defaultValue: false }, - table: { defaultValue: false }, - control: { type: 'boolean' }, + type: { required: false, name: 'boolean' }, + table: { + type: { summary: 'boolean' }, + defaultValue: { summary: false }, + }, + control: 'boolean', }, zooms: { description: '此缩放范围内 polygon 可见', - type: { - name: 'other', - required: false, - summary: '[number, number]', - defaultValue: undefined, + type: { required: false, name: 'array', value: { name: 'number' } }, + table: { + type: { summary: 'number[]' }, + defaultValue: { summary: '[2, 20]' }, }, - table: { defaultValue: undefined }, + control: 'array', }, extrusionHeight: { description: '3D 模式下,设置立面体高度值。', - type: { - type: 'number', - required: false, - summary: 'number', - defaultValue: 0, + type: { required: false, name: 'number' }, + table: { + type: { summary: 'string' }, + defaultValue: { summary: 0 }, }, - table: { defaultValue: 0 }, control: { type: 'number', min: 0 }, }, roofColor: { description: '3D 模式下,立面体顶面颜色,支持 rgba、rgb、十六进制等。', - type: { required: false, summary: 'string', defaultValue: '#00B2D5' }, - table: { defaultValue: '#00B2D5' }, - control: { type: 'color' }, + type: { required: false, name: 'string' }, + table: { + type: { summary: 'string' }, + defaultValue: { summary: '#00B2D5' }, + }, + control: { + type: 'color', + presetColors, + }, }, wallColor: { description: '3D 模式下,立面体侧面颜色,支持 rgba、rgb、十六进制等。', - type: { required: false, summary: 'string', defaultValue: '#00D3FC' }, - table: { defaultValue: '#00D3FC' }, - control: { type: 'color' }, + type: { required: false, name: 'string' }, + table: { + type: { summary: 'string' }, + defaultValue: { summary: '#00D3FC' }, + }, + control: { + type: 'color', + presetColors, + }, }, onShow: { description: '显示,回调函数', - type: { required: false, summary: '(event: any) => void' }, + type: { required: false, name: 'function' }, + table: { + category: '事件', + type: { summary: '(event: any) => void' }, + }, control: false, }, onHide: { description: '隐藏,回调函数', - type: { required: false, summary: '(event: any) => void' }, + type: { required: false, name: 'function' }, + table: { + category: '事件', + type: { summary: '(event: any) => void' }, + }, control: false, }, onClick: { description: '左键单击,回调函数', - type: { required: false, summary: '(event: any) => void' }, + type: { required: false, name: 'function' }, + table: { + category: '事件', + type: { summary: '(event: any) => void' }, + }, control: false, }, onDBLClick: { description: '左键双击,回调函数', - type: { required: false, summary: '(event: any) => void' }, + type: { required: false, name: 'function' }, + table: { + category: '事件', + type: { summary: '(event: any) => void' }, + }, control: false, }, onRightClick: { description: '右键单击,回调函数', - type: { required: false, summary: '(event: any) => void' }, + type: { required: false, name: 'function' }, + table: { + category: '事件', + type: { summary: '(event: any) => void' }, + }, control: false, }, onMousedown: { description: '鼠标按下,回调函数', - type: { required: false, summary: '(event: any) => void' }, + type: { required: false, name: 'function' }, + table: { + category: '事件', + type: { summary: '(event: any) => void' }, + }, control: false, }, onMouseup: { description: '鼠标抬起,回调函数', - type: { required: false, summary: '(event: any) => void' }, + type: { required: false, name: 'function' }, + table: { + category: '事件', + type: { summary: '(event: any) => void' }, + }, control: false, }, onMouseover: { description: '鼠标经过,回调函数', - type: { required: false, summary: '(event: any) => void' }, + type: { required: false, name: 'function' }, + table: { + category: '事件', + type: { summary: '(event: any) => void' }, + }, control: false, }, onMouseout: { description: '鼠标移出,回调函数', - type: { required: false, summary: '(event: any) => void' }, + type: { required: false, name: 'function' }, + table: { + category: '事件', + type: { summary: '(event: any) => void' }, + }, control: false, }, onDragstart: { description: '开始拖拽=时触发事件', - type: { required: false, summary: '(event: any) => void' }, + type: { required: false, name: 'function' }, + table: { + category: '事件', + type: { summary: '(event: any) => void' }, + }, control: false, }, onDragging: { description: '鼠标拖拽移动=时触发事件', - type: { required: false, summary: '(event: any) => void' }, + type: { required: false, name: 'function' }, + table: { + category: '事件', + type: { summary: '(event: any) => void' }, + }, control: false, }, onDragend: { description: '拖拽移动结束触发事件', - type: { required: false, summary: '(event: any) => void' }, + type: { required: false, name: 'function' }, + table: { + category: '事件', + type: { summary: '(event: any) => void' }, + }, control: false, }, onTouchstart: { description: '触摸开始,回调函数,仅移动设备有效', - type: { required: false, summary: '(event: any) => void' }, + type: { required: false, name: 'function' }, + table: { + category: '事件', + type: { summary: '(event: any) => void' }, + }, control: false, }, onTouchmove: { description: '触摸移动,回调函数,仅移动设备有效', - type: { required: false, summary: '(event: any) => void' }, + type: { required: false, name: 'function' }, + table: { + category: '事件', + type: { summary: '(event: any) => void' }, + }, control: false, }, onTouchend: { description: '触摸结束,回调函数,仅移动设备有效', - type: { required: false, summary: '(event: any) => void' }, + type: { required: false, name: 'function' }, + table: { + category: '事件', + type: { summary: '(event: any) => void' }, + }, control: false, }, }, -} as Meta; +}; + +export default meta; type AMapPolygonStory = Story; diff --git a/src/components/AMapPolygonEditor/stories/AMapPolygonEditor.stories.tsx b/src/components/AMapPolygonEditor/stories/AMapPolygonEditor.stories.tsx index 21e4aed..4e1b350 100644 --- a/src/components/AMapPolygonEditor/stories/AMapPolygonEditor.stories.tsx +++ b/src/components/AMapPolygonEditor/stories/AMapPolygonEditor.stories.tsx @@ -95,7 +95,7 @@ const mockData: GeoJSON.FeatureCollection = { ], }; -export default { +const meta: Meta = { title: '组件(Components)/工具(Tools)/AMapPolygonEditor', decorators: [ withAutoFitView, @@ -110,25 +110,26 @@ export default { argTypes: { computeTarget: { description: '设置编辑对象', - type: { required: true, summary: '(allPolygons: AMap.Polygon[]): AMap.Polygon[] | null | undefined' }, + type: { required: true, name: 'function' }, + table: { + type: { summary: '(allPolygons: AMap.Polygon[]) => AMap.Polygon[] | null | undefined' }, + }, control: false, }, disabled: { description: '禁用 PolygonEditor', - type: { required: false, summary: 'boolean', defaultValue: true }, + type: { required: false, name: 'boolean' }, table: { - defaultValue: { - summary: false, - }, - }, - control: { - type: 'boolean', + type: { summary: 'boolean' }, + defaultValue: { summary: false }, }, + control: 'boolean', }, computeAdsorbPolygons: { description: '设置吸附多边形。默认地图上所有多边形都可吸附', - type: { required: false, summary: '(allPolygons: AMap.Polygon[]): AMap.Polygon[] | null | undefined' }, + type: { required: false, name: 'function' }, table: { + type: { summary: '(allPolygons: AMap.Polygon[]) => AMap.Polygon[] | null | undefined' }, defaultValue: { summary: '(allPolygons: AMap.Polygon[]) => allPolygons', }, @@ -137,11 +138,16 @@ export default { }, onChange: { description: 'Target 变化时的回调', - type: { required: false, summary: '(event: any) => void' }, + type: { required: true, name: 'function' }, + table: { + type: { summary: '(event: any) => void' }, + }, control: false, }, }, -} as Meta; +}; + +export default meta; const Template: Story = (args) => ( <> diff --git a/src/components/AMapPolyline/stories/AMapPolyline.stories.tsx b/src/components/AMapPolyline/stories/AMapPolyline.stories.tsx index 7e477b7..dc4f05a 100644 --- a/src/components/AMapPolyline/stories/AMapPolyline.stories.tsx +++ b/src/components/AMapPolyline/stories/AMapPolyline.stories.tsx @@ -32,7 +32,9 @@ const eventHandler = actions( 'onTouchend', ); -export default { +const presetColors = ['#ff0000', '#00ff00', '#0000ff']; + +const meta: Meta = { title: '组件(Components)/覆盖物(Overlay)/AMapPolyline', decorators: [ withAutoFitView, @@ -53,29 +55,51 @@ export default { }, argTypes: { path: { - description: '多边形轮廓线的节点坐标数组', - type: { name: 'other', required: true, summary: 'LngLatLike[] | LngLatLike[][] | LngLatLike[][][]' }, + description: '多边形轮廓线的节点坐标数组。支持 lineString 和 MultiLineString 类型。', + type: { + required: true, + name: 'union', + value: [ + { name: 'array', value: { name: 'array', value: { name: 'number' } } }, // [number, number][] + { name: 'array', value: { name: 'array', value: { name: 'array', value: { name: 'number' } } } }, // [number, number][][] + { name: 'array', value: { name: 'object', value: { lng: { name: 'number' }, lat: { name: 'number' } } } }, // { lng, lat }[] + { name: 'array', value: { name: 'array', value: { name: 'object', value: { lng: { name: 'number' }, lat: { name: 'number' } } } } }, // { lng, lat }[][] + ], + }, + table: { + type: { + summary: [ + 'Array', + 'Array>', + ].join(' | '), + }, + }, }, visible: { description: '显示或隐藏', - type: { required: false, summary: 'boolean', defaultValue: true }, - table: { defaultValue: true }, - control: { - type: 'boolean', + type: { required: false, name: 'boolean' }, + table: { + type: { summary: 'boolean' }, + defaultValue: { summary: true }, }, + control: 'boolean', }, draggable: { description: '是否可拖动', - type: { required: false, summary: 'type', defaultValue: false }, - table: { defaultValue: false }, - control: { - type: 'boolean', + type: { required: false, name: 'boolean' }, + table: { + type: { summary: 'boolean' }, + defaultValue: { summary: false }, }, + control: 'boolean', }, zIndex: { description: '多边形覆盖物的叠加顺序', - type: { required: false, summary: 'number', defaultValue: 10 }, - table: { defaultValue: 10 }, + type: { required: false, name: 'number' }, + table: { + type: { summary: 'number' }, + defaultValue: { summary: 10 }, + }, control: { type: 'number', step: 1, @@ -83,34 +107,50 @@ export default { }, strokeColor: { description: '轮廓线颜色,使用16进制颜色代码赋值。', - type: { required: false, summary: 'color', defaultValue: '#00D3FC' }, - table: { defaultValue: '#00D3FC' }, - control: { type: 'color' }, + type: { required: false, name: 'string' }, + table: { + type: { summary: 'string' }, + defaultValue: { summary: '#00D3FC' }, + }, + control: { + type: 'color', + presetColors, + }, }, strokeStyle: { description: '轮廓线样式', - type: { required: false, summary: 'solid | dashed', defaultValue: 'solid' }, - table: { defaultValue: 'solid' }, - control: { - type: 'select', - options: ['solid', 'dashed'], + type: { required: false, name: 'enum', value: ['solid', 'dashed'] }, + table: { + type: { summary: ['solid', 'dashed'].join('|') }, + defaultValue: { summary: 'solid' }, + }, + options: { + 'solid(实线)': 'solid', + 'dashed(虚线)': 'dashed', }, + control: 'select', }, strokeOpacity: { description: '轮廓线透明度,取值范围 [0,1]', - type: { required: false, summary: 'number', defaultValue: 0.9 }, - table: { defaultValue: 0.9 }, + type: { required: false, name: 'number' }, + table: { + type: { summary: 'number' }, + defaultValue: { summary: 0.9 }, + }, control: { - type: 'number', + type: 'range', min: 0, max: 1, - step: 0.01, + step: 0.1, }, }, strokeWeight: { description: '轮廓线宽度', - type: { required: false, summary: 'number', defaultValue: 2 }, - table: { defaultValue: 2 }, + type: { required: false, name: 'number' }, + table: { + type: { summary: 'number' }, + defaultValue: { summary: 2 }, + }, control: { type: 'number', min: 0, @@ -119,12 +159,19 @@ export default { }, strokeDasharray: { description: '勾勒形状轮廓的虚线和间隙的样式', - type: { required: false, summary: 'Array' }, + type: { required: false, name: 'array', value: { name: 'number' } }, + table: { + type: { summary: 'number[]' }, + }, + control: 'object', }, borderWeight: { description: '描边的宽度', - type: { required: false, summary: 'number', defaultValue: 2 }, - table: { defaultValue: 2 }, + type: { required: false, name: 'number' }, + table: { + type: { summary: 'number' }, + defaultValue: { summary: 2 }, + }, control: { type: 'number', min: 0, @@ -133,145 +180,231 @@ export default { }, isOutline: { description: '是否显示描边', - type: { required: false, summary: 'type', defaultValue: false }, - table: { defaultValue: false }, - control: { - type: 'boolean', + type: { required: false, name: 'boolean' }, + table: { + type: { summary: 'boolean' }, + defaultValue: { summary: false }, }, + control: 'boolean', }, outlineColor: { - description: '线条描边颜色,此项仅在isOutline为true时有效', - type: { required: false, summary: 'string', defaultValue: '#00B2D5' }, - table: { defaultValue: '#00B2D5' }, - control: { type: 'color' }, + description: '线条描边颜色,此项仅在 isOutline 为true时有效', + type: { required: false, name: 'string' }, + table: { + defaultValue: { summary: '#00B2D5' }, + }, + control: 'color', }, lineJoin: { description: '折线拐点的绘制样式', - type: { required: false, summary: 'miter|round|bevel', defaultValue: 'miter' }, - table: { defaultValue: 'miter' }, - control: { - type: 'select', - options: ['miter', 'round', 'bevel'], + type: { required: false, name: 'enum', value: ['miter', 'round', 'bevel'] }, + table: { + type: { summary: ['miter', 'round', 'bevel'].join('|') }, + defaultValue: { summary: 'miter' }, + }, + options: { + 'miter(尖角)': 'miter', + 'round(圆角)': 'round', + 'bevel(斜角)': 'bevel', }, + control: 'select', }, lineCap: { description: '折线拐点的绘制样式', - type: { required: false, summary: 'butt|round|square', defaultValue: 'butt' }, - table: { defaultValue: 'butt' }, - control: { - type: 'select', - options: ['butt', 'round', 'square'], + type: { required: false, name: 'enum', value: ['butt', 'round', 'square'] }, + table: { + type: { summary: ['butt', 'round', 'square'].join('|') }, + defaultValue: { summary: 'butt' }, + }, + options: { + 'butt(无头)': 'butt', + 'round(圆头)': 'round', + 'square(方头)': 'square', }, + control: 'select', }, geodesic: { description: '是否绘制成大地线', - type: { required: false, summary: 'type', defaultValue: false }, - table: { defaultValue: false }, - control: { - type: 'boolean', + type: { required: false, name: 'boolean' }, + table: { + type: { summary: 'boolean' }, + defaultValue: { summary: false }, }, + control: 'boolean', }, cursor: { - description: '指定鼠标悬停时的鼠标样式', - type: { required: false, summary: 'string' }, + description: '指定鼠标悬停时的鼠标样式。同 CSS 中的 cursor 属性', + type: { required: false, name: 'string' }, + table: { + type: { summary: 'string' }, + }, + control: 'text', }, extData: { description: '设置用户自定义属性', - type: { required: false, summary: 'Object' }, + type: { required: false, name: 'object', value: {} }, + table: { + type: { summary: 'object' }, + }, + control: 'object', }, bubble: { description: '是否将覆盖物的鼠标或touch等事件冒泡到地图上', - type: { required: false, summary: 'boolean', defaultValue: false }, - table: { defaultValue: false }, - control: { type: 'boolean' }, + type: { required: false, name: 'boolean' }, + table: { + type: { summary: 'boolean' }, + defaultValue: { summary: false }, + }, + control: 'boolean', }, zooms: { description: '此缩放范围内 polyline 可见', - type: { - name: 'other', - required: false, - summary: '[number, number]', - defaultValue: undefined, + type: { required: false, name: 'array', value: { name: 'number' } }, + table: { + type: { summary: 'number[]' }, + defaultValue: { summary: '[2, 20]' }, }, - table: { defaultValue: undefined }, + control: 'array', }, onShow: { description: '显示,回调函数', - type: { required: false, summary: '(event: any) => void' }, + type: { required: false, name: 'function' }, + table: { + category: '事件', + type: { summary: '(event: any) => void' }, + }, control: false, }, onHide: { description: '隐藏,回调函数', - type: { required: false, summary: '(event: any) => void' }, + type: { required: false, name: 'function' }, + table: { + category: '事件', + type: { summary: '(event: any) => void' }, + }, control: false, }, onClick: { description: '左键单击,回调函数', - type: { required: false, summary: '(event: any) => void' }, + type: { required: false, name: 'function' }, + table: { + category: '事件', + type: { summary: '(event: any) => void' }, + }, control: false, }, onDBLClick: { description: '左键双击,回调函数', - type: { required: false, summary: '(event: any) => void' }, + type: { required: false, name: 'function' }, + table: { + category: '事件', + type: { summary: '(event: any) => void' }, + }, control: false, }, onRightClick: { description: '右键单击,回调函数', - type: { required: false, summary: '(event: any) => void' }, + type: { required: false, name: 'function' }, + table: { + category: '事件', + type: { summary: '(event: any) => void' }, + }, control: false, }, onMousedown: { description: '鼠标按下,回调函数', - type: { required: false, summary: '(event: any) => void' }, + type: { required: false, name: 'function' }, + table: { + category: '事件', + type: { summary: '(event: any) => void' }, + }, control: false, }, onMouseup: { description: '鼠标抬起,回调函数', - type: { required: false, summary: '(event: any) => void' }, + type: { required: false, name: 'function' }, + table: { + category: '事件', + type: { summary: '(event: any) => void' }, + }, control: false, }, onMouseover: { description: '鼠标经过,回调函数', - type: { required: false, summary: '(event: any) => void' }, + type: { required: false, name: 'function' }, + table: { + category: '事件', + type: { summary: '(event: any) => void' }, + }, control: false, }, onMouseout: { description: '鼠标移出,回调函数', - type: { required: false, summary: '(event: any) => void' }, + type: { required: false, name: 'function' }, + table: { + category: '事件', + type: { summary: '(event: any) => void' }, + }, control: false, }, onDragstart: { description: '开始拖拽=时触发事件', - type: { required: false, summary: '(event: any) => void' }, + type: { required: false, name: 'function' }, + table: { + category: '事件', + type: { summary: '(event: any) => void' }, + }, control: false, }, onDragging: { description: '鼠标拖拽移动=时触发事件', - type: { required: false, summary: '(event: any) => void' }, + type: { required: false, name: 'function' }, + table: { + category: '事件', + type: { summary: '(event: any) => void' }, + }, control: false, }, onDragend: { description: '拖拽移动结束触发事件', - type: { required: false, summary: '(event: any) => void' }, + type: { required: false, name: 'function' }, + table: { + category: '事件', + type: { summary: '(event: any) => void' }, + }, control: false, }, onTouchstart: { description: '触摸开始,回调函数,仅移动设备有效', - type: { required: false, summary: '(event: any) => void' }, + type: { required: false, name: 'function' }, + table: { + category: '事件', + type: { summary: '(event: any) => void' }, + }, control: false, }, onTouchmove: { description: '触摸移动,回调函数,仅移动设备有效', - type: { required: false, summary: '(event: any) => void' }, + type: { required: false, name: 'function' }, + table: { + category: '事件', + type: { summary: '(event: any) => void' }, + }, control: false, }, onTouchend: { description: '触摸结束,回调函数,仅移动设备有效', - type: { required: false, summary: '(event: any) => void' }, + type: { required: false, name: 'function' }, + table: { + category: '事件', + type: { summary: '(event: any) => void' }, + }, control: false, }, }, -} as Meta; +}; + +export default meta; type AMapPolylineStory = Story; diff --git a/src/components/AMapPolylineEditor/stories/AMapPolylineEditor.stories.tsx b/src/components/AMapPolylineEditor/stories/AMapPolylineEditor.stories.tsx index 069c6a9..b82c476 100644 --- a/src/components/AMapPolylineEditor/stories/AMapPolylineEditor.stories.tsx +++ b/src/components/AMapPolylineEditor/stories/AMapPolylineEditor.stories.tsx @@ -37,7 +37,7 @@ const mockData: GeoJSON.FeatureCollection = { ], }; -export default { +const meta: Meta = { title: '组件(Components)/工具(Tools)/AMapPolylineEditor', decorators: [ withAutoFitView, @@ -52,26 +52,33 @@ export default { argTypes: { computeTarget: { description: '设置编辑对象', - type: { required: true, summary: '(allPolyline: AMap.Polyline[]): AMap.Polyline | null | undefined' }, + type: { required: true, name: 'function' }, + table: { + type: { summary: '(allPolyline: AMap.Polyline[]) => AMap.Polyline | null | undefined' }, + }, control: false, }, disabled: { description: '禁用 PolylineEditor', - type: { required: false, summary: 'boolean', defaultValue: true }, + type: { required: false, name: 'boolean' }, table: { - defaultValue: { - summary: false, - }, + type: { summary: 'boolean' }, + defaultValue: { summary: false }, }, - control: { type: 'boolean' }, + control: 'boolean', }, onChange: { description: 'Target 变化时的回调', - type: { required: false, summary: '(event: any) => void' }, + type: { required: true, name: 'function' }, + table: { + type: { summary: '(event: any) => void' }, + }, control: false, }, }, -} as Meta; +}; + +export default meta; const Template: Story = (args) => ( <> diff --git a/src/components/AMapScale/stories/AMapScale.stories.tsx b/src/components/AMapScale/stories/AMapScale.stories.tsx index dd86de2..799c69d 100644 --- a/src/components/AMapScale/stories/AMapScale.stories.tsx +++ b/src/components/AMapScale/stories/AMapScale.stories.tsx @@ -10,7 +10,7 @@ import withAPIContainer from '../../../storybook-decorators/withAPIContainer'; const eventHandler = actions('onShow', 'onHide'); -export default { +const meta: Meta = { title: '组件(Components)/地图控件(Control)/AMapScale', component: AMapScale, decorators: [ @@ -28,33 +28,73 @@ export default { argTypes: { position: { description: '控件停靠位置', + type: { + required: true, + name: 'union', + value: [ + { name: 'enum', value: ['LT', 'RT', 'LB', 'RB'] }, + { + name: 'object', + value: { + top: { required: false, name: 'string' }, + left: { required: false, name: 'string' }, + right: { required: false, name: 'string' }, + bottom: { required: false, name: 'string' }, + }, + }], + }, table: { - type: { summary: 'string|object' }, + type: { summary: [['LT', 'RT', 'LB', 'RB'].join('|'), 'object'].join('|') }, defaultValue: { summary: 'LB' }, }, - control: { - type: 'select', - options: ['LT', 'RT', 'LB', 'RB'], + options: { + 'LT(左上)': 'LT', + 'RT(右上)': 'RT', + 'LB(左下)': 'LB', + 'RB(右下)': 'RB', }, + control: 'select', }, offset: { description: '相对于地图容器偏移量,正数代表地图中心,复数向地图外侧(实际现象与高德地图官方文档不一致)。', - type: { summary: 'array', required: false }, - control: 'array', + type: { required: false, name: 'array', value: { name: 'number' } }, + table: { + type: { summary: 'array' }, + }, + control: 'object', }, visible: { description: '显示或隐藏', + type: { required: false, name: 'boolean' }, + table: { + type: { summary: 'boolean' }, + defaultValue: { summary: true }, + }, control: 'boolean', }, onShow: { description: '显示时触发此事件', + type: { required: false, name: 'function' }, + table: { + category: '事件', + type: { summary: '(event: any) => void' }, + }, + control: false, }, onHide: { description: '隐藏时触发此事件', + type: { required: false, name: 'function' }, + table: { + category: '事件', + type: { summary: '(event: any) => void' }, + }, + control: false, }, }, -} as Meta; +}; + +export default meta; type AMapScaleStory = Story; diff --git a/src/components/AMapToolBar/stories/AMapToolBar.stories.tsx b/src/components/AMapToolBar/stories/AMapToolBar.stories.tsx index a72da7c..461e8e8 100644 --- a/src/components/AMapToolBar/stories/AMapToolBar.stories.tsx +++ b/src/components/AMapToolBar/stories/AMapToolBar.stories.tsx @@ -10,7 +10,7 @@ import withAPIContainer from '../../../storybook-decorators/withAPIContainer'; const eventHandler = actions('onShow', 'onHide'); -export default { +const meta: Meta = { title: '组件(Components)/地图控件(Control)/AMapToolBar', component: AMapToolBar, decorators: [ @@ -28,33 +28,73 @@ export default { argTypes: { position: { description: '控件停靠位置', + type: { + required: true, + name: 'union', + value: [ + { name: 'enum', value: ['LT', 'RT', 'LB', 'RB'] }, + { + name: 'object', + value: { + top: { required: false, name: 'string' }, + left: { required: false, name: 'string' }, + right: { required: false, name: 'string' }, + bottom: { required: false, name: 'string' }, + }, + }], + }, table: { - type: { summary: 'string|object' }, - defaultValue: { summary: 'LT' }, + type: { summary: [['LT', 'RT', 'LB', 'RB'].join('|'), 'object'].join('|') }, + defaultValue: { summary: 'LB' }, }, - control: { - type: 'select', - options: ['LT', 'RT', 'LB', 'RB'], + options: { + 'LT(左上)': 'LT', + 'RT(右上)': 'RT', + 'LB(左下)': 'LB', + 'RB(右下)': 'RB', }, + control: 'select', }, offset: { description: '相对于地图容器偏移量,正数代表地图中心,复数向地图外侧(实际现象与高德地图官方文档不一致)。', - type: { summary: 'array', required: false }, - control: 'array', + type: { required: false, name: 'array', value: { name: 'number' } }, + table: { + type: { summary: 'array' }, + }, + control: 'object', }, visible: { description: '显示或隐藏', + type: { required: false, name: 'boolean' }, + table: { + type: { summary: 'boolean' }, + defaultValue: { summary: true }, + }, control: 'boolean', }, onShow: { description: '显示时触发此事件', + type: { required: false, name: 'function' }, + table: { + category: '事件', + type: { summary: '(event: any) => void' }, + }, + control: false, }, onHide: { description: '隐藏时触发此事件', + type: { required: false, name: 'function' }, + table: { + category: '事件', + type: { summary: '(event: any) => void' }, + }, + control: false, }, }, -} as Meta; +}; + +export default meta; const Template: Story = (args) => ;