From bfc2f6dc850b3c587c9f8411e7fca76d6a4a0d9b Mon Sep 17 00:00:00 2001 From: rdmclin2 Date: Wed, 6 Sep 2023 17:08:02 +0800 Subject: [PATCH 01/27] =?UTF-8?q?:bug:=20fix:=20=E9=BB=98=E8=AE=A4?= =?UTF-8?q?=E4=B8=8D=E6=8F=90=E4=BE=9B=20creatorButtonProps?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/ColumnList/ColumnList.tsx | 82 ++++++++++----------------- src/ColumnList/demos/actions.tsx | 12 ++++ src/ColumnList/demos/normal.tsx | 12 ++++ src/SortableList/demos/controlled.tsx | 6 +- 4 files changed, 57 insertions(+), 55 deletions(-) diff --git a/src/ColumnList/ColumnList.tsx b/src/ColumnList/ColumnList.tsx index 7889daac..1a02447c 100644 --- a/src/ColumnList/ColumnList.tsx +++ b/src/ColumnList/ColumnList.tsx @@ -3,7 +3,6 @@ import { SortableList, SortableListProps, SortableListRef, - genUniqueId, getPrefixCls, } from '@ant-design/pro-editor'; import { ReactNode, forwardRef, useCallback } from 'react'; @@ -20,59 +19,36 @@ export interface ColumnListProps const ColumnList: (props: ColumnListProps) => ReactNode = forwardRef< SortableListRef, ColumnListProps ->( - ( - { - prefixCls: customPrefixCls, - className, - columns, - actions, - hideRemove, - creatorButtonProps, - ...props - }, - ref, - ) => { - const prefixCls = getPrefixCls('column-list', customPrefixCls); - const { cx } = useStyle(prefixCls); +>(({ prefixCls: customPrefixCls, className, columns, actions, hideRemove, ...props }, ref) => { + const prefixCls = getPrefixCls('column-list', customPrefixCls); + const { cx } = useStyle(prefixCls); - const renderItem = useCallback( - (item, { index, listeners }) => ( - - ), - [prefixCls, columns], - ); + const renderItem = useCallback( + (item, { index, listeners }) => ( + + ), + [prefixCls, columns], + ); - return ( - <> -
- ({ - id: genUniqueId('column-list'), - }), - ...creatorButtonProps, - } - } - {...props} - /> - - ); - }, -); + return ( + <> +
+ + + ); +}); export default ColumnList; diff --git a/src/ColumnList/demos/actions.tsx b/src/ColumnList/demos/actions.tsx index 27cb810d..7f2ded8f 100644 --- a/src/ColumnList/demos/actions.tsx +++ b/src/ColumnList/demos/actions.tsx @@ -44,6 +44,11 @@ const columns: ColumnItemList = [ }, ]; +/** + * 创建一个随机的索引标记符，请勿在生产环境使用 + */ +export const randomIndex = () => Math.random() * 10000; + export default () => ( columns={columns} @@ -56,6 +61,13 @@ export default () => ( onClick={() => message.info(field.dataIndex)} />, ]} + creatorButtonProps={{ + record: () => ({ + id: randomIndex(), + valueType: 'text', + title: '示例标题', + }), + }} onChange={(values) => { console.log('onChange', values); }} diff --git a/src/ColumnList/demos/normal.tsx b/src/ColumnList/demos/normal.tsx index 37892f15..de4ebe70 100644 --- a/src/ColumnList/demos/normal.tsx +++ b/src/ColumnList/demos/normal.tsx @@ -34,6 +34,11 @@ const columns: ColumnItemList = [ }, ]; +/** + * 创建一个随机的索引标记符，请勿在生产环境使用 + */ +export const randomIndex = () => Math.random() * 10000; + export default () => ( columns={columns} @@ -41,5 +46,12 @@ export default () => ( onChange={(values) => { console.log('onChange', values); }} + creatorButtonProps={{ + record: () => ({ + id: randomIndex(), + valueType: 'text', + title: '示例标题', + }), + }} /> ); diff --git a/src/SortableList/demos/controlled.tsx b/src/SortableList/demos/controlled.tsx index 4809a2a7..b62f90ae 100644 --- a/src/SortableList/demos/controlled.tsx +++ b/src/SortableList/demos/controlled.tsx @@ -10,7 +10,7 @@ import { useState } from 'react'; import { Flexbox } from 'react-layout-kit'; const Demo = () => { - const [list, setList] = useState([]); + const [list, setList] = useState([{ id: 'hello' }, { id: 'world' }]); const token = useTheme(); return ( @@ -23,9 +23,11 @@ const Demo = () => { }} /> From 8f175e23827c9ce88d9e2bb4a68ac82d1e56b08b Mon Sep 17 00:00:00 2001 From: rdmclin2 Date: Wed, 6 Sep 2023 17:26:50 +0800 Subject: [PATCH 02/27] :tada: chore: add custom create demo --- src/ColumnList/demos/customCreate.tsx | 93 +++++++++++++++++++++++++++ src/ColumnList/index.md | 1 + src/SortableList/demos/ref.tsx | 1 - 3 files changed, 94 insertions(+), 1 deletion(-) create mode 100644 src/ColumnList/demos/customCreate.tsx diff --git a/src/ColumnList/demos/customCreate.tsx b/src/ColumnList/demos/customCreate.tsx new file mode 100644 index 00000000..921ae4c5 --- /dev/null +++ b/src/ColumnList/demos/customCreate.tsx @@ -0,0 +1,93 @@ +/** + * title: 自定义创建逻辑 + * description: 你可以设置 `creatorButtonProps={false}` 来关闭默认的创建效果，然后自定义创建逻辑 + */ +import { PlusCircleTwoTone } from '@ant-design/icons'; +import type { ColumnItemList, SortableItem, SortableListRef } from '@ant-design/pro-editor'; +import { ActionIcon, ColumnList } from '@ant-design/pro-editor'; +import { useRef } from 'react'; +import { Flexbox } from 'react-layout-kit'; + +import { tableColumnValueOptions } from './mock_data/options'; + +type SchemaItem = { + title: string; + valueType?: string; + dataIndex: string; +} & SortableItem; + +const INIT_VALUES = [ + { id: 'orderId', dataIndex: 'orderId', valueType: 'text', title: '订单id', color: undefined }, + { + id: 'orderNumber', + dataIndex: 'orderNumber', + valueType: 'text', + title: '订单号', + color: undefined, + }, + { + id: 'orderMoney', + dataIndex: 'orderMoney', + valueType: 'text', + title: '订单金额', + color: undefined, + }, +]; + +/** + * 创建一个随机的索引标记符，请勿在生产环境使用 + */ +export const randomIndex = () => Math.random() * 10000; + +const columns: ColumnItemList = [ + { + title: '列标题', + dataIndex: 'title', + type: 'input', + }, + { + title: '值类型', + dataIndex: 'valueType', + type: 'select', + options: tableColumnValueOptions, + }, + { + title: '字段', + dataIndex: 'dataIndex', + type: 'select', + }, +]; + +export default () => { + const ref = useRef>(null); + return ( + <> + +
列配置项
+ } + key={'edit'} + tabIndex={-1} + onClick={() => { + const id = `id-${randomIndex()}}`; + ref.current.addItem({ id, title: `new-${id}`, dataIndex: 'text' }); + }} + /> + + + ref={ref} + columns={columns} + initialValues={INIT_VALUES} + onChange={(values) => { + console.log('onChange', values); + }} + creatorButtonProps={false} + /> + + ); +}; diff --git a/src/ColumnList/index.md b/src/ColumnList/index.md index 61a28c25..f9e46fdc 100644 --- a/src/ColumnList/index.md +++ b/src/ColumnList/index.md @@ -20,6 +20,7 @@ demo: + ## API diff --git a/src/SortableList/demos/ref.tsx b/src/SortableList/demos/ref.tsx index 47af51cb..ccdfb865 100644 --- a/src/SortableList/demos/ref.tsx +++ b/src/SortableList/demos/ref.tsx @@ -32,7 +32,6 @@ export default () => { onClick={() => { const id = `id-${listData.length}-${randomIndex()}`; ref.current.addItem({ id, title: `new-${id}` }); - ref.current.addItem({ id: 'xxx', title: '111' }); }} /> From d0629c6fca5a2bf00a798e6ef32fb99909b2cee3 Mon Sep 17 00:00:00 2001 From: rdmclin2 Date: Wed, 6 Sep 2023 17:38:03 +0800 Subject: [PATCH 03/27] :sparkles: feat: support renderEmpty and add sotrablelist custom create demo --- src/ColumnList/demos/customCreate.tsx | 18 ++++++++++++++---- src/SortableList/container/StoreUpdater.tsx | 2 ++ src/SortableList/features/SortList.tsx | 16 +++++++++++----- src/SortableList/type/component.ts | 2 ++ src/SortableList/type/store.ts | 9 +++++++++ 5 files changed, 38 insertions(+), 9 deletions(-) diff --git a/src/ColumnList/demos/customCreate.tsx b/src/ColumnList/demos/customCreate.tsx index 921ae4c5..82ee01e2 100644 --- a/src/ColumnList/demos/customCreate.tsx +++ b/src/ColumnList/demos/customCreate.tsx @@ -5,6 +5,7 @@ import { PlusCircleTwoTone } from '@ant-design/icons'; import type { ColumnItemList, SortableItem, SortableListRef } from '@ant-design/pro-editor'; import { ActionIcon, ColumnList } from '@ant-design/pro-editor'; +import { Button, Empty } from 'antd'; import { useRef } from 'react'; import { Flexbox } from 'react-layout-kit'; @@ -60,6 +61,11 @@ const columns: ColumnItemList = [ export default () => { const ref = useRef>(null); + + const handleCreate = () => { + const id = `id-${randomIndex()}}`; + ref.current.addItem({ id, title: `new-${id}`, dataIndex: 'text' }); + }; return ( <> { icon={} key={'edit'} tabIndex={-1} - onClick={() => { - const id = `id-${randomIndex()}}`; - ref.current.addItem({ id, title: `new-${id}`, dataIndex: 'text' }); - }} + onClick={handleCreate} /> ref={ref} columns={columns} + renderEmpty={() => ( + + + + )} initialValues={INIT_VALUES} onChange={(values) => { console.log('onChange', values); diff --git a/src/SortableList/container/StoreUpdater.tsx b/src/SortableList/container/StoreUpdater.tsx index 62ed5595..d1e060d0 100644 --- a/src/SortableList/container/StoreUpdater.tsx +++ b/src/SortableList/container/StoreUpdater.tsx @@ -13,6 +13,7 @@ const StoreUpdater = forwardRef( onChange, renderItem, renderContent, + renderEmpty, getItemStyles, getId, creatorButtonProps, @@ -30,6 +31,7 @@ const StoreUpdater = forwardRef( useStoreUpdater('onChange', onChange); useStoreUpdater('renderItem', renderItem); useStoreUpdater('renderContent', renderContent); + useStoreUpdater('renderEmpty', renderEmpty); useStoreUpdater('getItemStyles', getItemStyles); useStoreUpdater('creatorButtonProps', creatorButtonProps); useStoreUpdater('hideRemove', hideRemove); diff --git a/src/SortableList/features/SortList.tsx b/src/SortableList/features/SortList.tsx index 3c3088c5..60a839ec 100644 --- a/src/SortableList/features/SortList.tsx +++ b/src/SortableList/features/SortList.tsx @@ -15,6 +15,7 @@ import { useStyle } from '../style'; const selector = (s: Store) => ({ renderItem: s.renderItem, renderContent: s.renderContent, + renderEmpty: s.renderEmpty, getItemStyles: s.getItemStyles, getId: s.getId, actions: s.actions, @@ -32,6 +33,7 @@ const SortableList: FC = ({ prefixCls }) => { dispatchListData, renderItem, renderContent, + renderEmpty, creatorButtonProps = false, hideRemove, getItemStyles, @@ -63,11 +65,15 @@ const SortableList: FC = ({ prefixCls }) => { }; return Array.isArray(items) && items.length === 0 ? ( - <> - - {creatorButtonProps !== false ? : null} - - + renderEmpty ? ( + renderEmpty() + ) : ( + <> + + {creatorButtonProps !== false ? : null} + + + ) ) : ( <> {creatorButtonProps !== false && position === 'top' ? : null} diff --git a/src/SortableList/type/component.ts b/src/SortableList/type/component.ts index 0f2a2c16..209c6fca 100644 --- a/src/SortableList/type/component.ts +++ b/src/SortableList/type/component.ts @@ -53,6 +53,8 @@ export interface SortableItemProps export type RenderContent = (item: T, index: number) => React.ReactNode; +export type RenderEmpty = () => React.ReactNode; + export interface CreatorButtonProps { /** * 添加创建按钮的位置 diff --git a/src/SortableList/type/store.ts b/src/SortableList/type/store.ts index c5f38a37..65c664e9 100644 --- a/src/SortableList/type/store.ts +++ b/src/SortableList/type/store.ts @@ -4,6 +4,7 @@ import type { GetItemStyles, RenderActionProps, RenderContent, + RenderEmpty, RenderItem, SortableItem, SortableItemList, @@ -45,6 +46,10 @@ export interface SortableListState { * 渲染可排序项 */ renderItem?: RenderItem; + /** + * 渲染空状态 + */ + renderEmpty?: RenderEmpty; /** * 渲染可排序项内容 */ @@ -97,6 +102,10 @@ export interface StoreUpdaterProps { * 渲染内容区域 */ renderContent?: RenderContent; + /** + * 渲染空状态 + */ + renderEmpty?: RenderEmpty; /** * 新建对象相关属性 */ From bfb678c31ba1dd9e7dbb3c33ae417d3b69b88fc0 Mon Sep 17 00:00:00 2001 From: rdmclin2 Date: Wed, 6 Sep 2023 17:41:36 +0800 Subject: [PATCH 04/27] :camera_flash: chore: update snapshot --- src/TipGuide/style.ts | 2 - tests/__snapshots__/demo.test.tsx.snap | 29649 +++++------------------ 2 files changed, 5784 insertions(+), 23867 deletions(-) diff --git a/src/TipGuide/style.ts b/src/TipGuide/style.ts index 170fca72..0870290e 100644 --- a/src/TipGuide/style.ts +++ b/src/TipGuide/style.ts @@ -1,8 +1,6 @@ import { createStyles } from '../theme'; export const useStyle = createStyles(({ css, cx }, prefixCls: string) => { - console.log('prefixCls', prefixCls); - return { container: cx( prefixCls, diff --git a/tests/__snapshots__/demo.test.tsx.snap b/tests/__snapshots__/demo.test.tsx.snap index 175242fc..b0b30eec 100644 --- a/tests/__snapshots__/demo.test.tsx.snap +++ b/tests/__snapshots__/demo.test.tsx.snap @@ -2643,7 +2643,7 @@ exports[` > renders actions.tsx correctly 1`] = ` style="--index: 0;" >
> renders actions.tsx correctly 1`] = ` style="--index: 1;" >
> renders actions.tsx correctly 1`] = ` style="--index: 2;" >
> renders actions.tsx correctly 1`] = `