🐛 fix: fix creatorButtonProps and add demos

ant-design · Dec 19, 2023 · 4f37d45 · 4f37d45
1 parent 02b4762
commit 4f37d45
Show file tree

Hide file tree

Showing 13 changed files with 169 additions and 53 deletions.
diff --git a/src/ColumnList/ColumnItem.tsx b/src/ColumnList/ColumnItem.tsx
@@ -1,5 +1,6 @@
 import {
   ColumnItemList,
+  CreatorButtonProps,
   DeleteAction,
   HandleAction,
   useSortableList,
@@ -77,10 +78,21 @@ interface ItemRenderProps<T = any> {
   listeners: any;
   actions?: React.ReactNode[];
   hideRemove?: boolean;
+  creatorButtonProps: CreatorButtonProps | false;
 }
 
 const ColumnItem = memo<ItemRenderProps>(
-  ({ item, index, prefixCls, columns, listeners, actions, hideRemove, dragging }) => {
+  ({
+    item,
+    index,
+    prefixCls,
+    columns,
+    listeners,
+    actions,
+    hideRemove,
+    dragging,
+    creatorButtonProps,
+  }) => {
     const { styles } = useStyle(prefixCls);
     const instance = useSortableList();
     return (
@@ -105,6 +117,7 @@ const ColumnItem = memo<ItemRenderProps>(
               prefixCls,
               style,
               placeholder: col.placeholder,
+              creatorButtonProps,
             };
             switch (col.type) {
               default:

diff --git a/src/ColumnList/ColumnList.tsx b/src/ColumnList/ColumnList.tsx
@@ -1,4 +1,5 @@
 import {
+  CreatorButtonProps,
   SortableList,
   SortableListProps,
   SortableListRef,
@@ -17,35 +18,61 @@ export interface ColumnListProps<T = any> extends SortableListProps<T> {
 const ColumnList: <T>(props: ColumnListProps<T>) => ReturnType<FC> = forwardRef<
   SortableListRef,
   ColumnListProps
->(({ prefixCls: customPrefixCls, className, columns, actions, hideRemove, ...props }, ref) => {
-  const prefixCls = getPrefixCls('column-list', customPrefixCls);
-  const { cx } = useStyle(prefixCls);
+>(
+  (
+    {
+      prefixCls: customPrefixCls,
+      className,
+      columns,
+      actions,
+      hideRemove,
+      creatorButtonProps,
+      ...props
+    },
+    ref,
+  ) => {
+    const prefixCls = getPrefixCls('column-list', customPrefixCls);
+    const { cx } = useStyle(prefixCls);
 
-  const renderItem = useCallback(
-    (item, { index, listeners, dragging }) => (
-      <ColumnItem
-        columns={columns}
-        item={item}
-        dragging={dragging}
-        listeners={listeners}
-        index={index}
-        prefixCls={prefixCls}
-        actions={typeof actions === 'function' ? actions(item, index) : actions}
-        hideRemove={hideRemove}
-      />
-    ),
-    [prefixCls, columns],
-  );
+    // ColumnList 默认有添加一行按钮
+    const customCreatorButtonProps: CreatorButtonProps | false =
+      creatorButtonProps === false
+        ? false
+        : {
+            position: 'bottom' as const,
+            // 默认生成空数据
+            record: () => ({}),
+            ...creatorButtonProps,
+          };
+
+    const renderItem = useCallback(
+      (item, { index, listeners, dragging }) => (
+        <ColumnItem
+          columns={columns}
+          item={item}
+          dragging={dragging}
+          listeners={listeners}
+          index={index}
+          prefixCls={prefixCls}
+          actions={typeof actions === 'function' ? actions(item, index) : actions}
+          creatorButtonProps={customCreatorButtonProps}
+          hideRemove={hideRemove}
+        />
+      ),
+      [prefixCls, columns],
+    );
 
-  return (
-    <SortableList
-      ref={ref}
-      renderItem={renderItem}
-      renderHeader={() => <Header prefixCls={prefixCls} columns={columns} />}
-      className={cx(prefixCls, className)}
-      {...props}
-    />
-  );
-});
+    return (
+      <SortableList
+        ref={ref}
+        renderItem={renderItem}
+        renderHeader={() => <Header prefixCls={prefixCls} columns={columns} />}
+        className={cx(prefixCls, className)}
+        creatorButtonProps={customCreatorButtonProps}
+        {...props}
+      />
+    );
+  },
+);
 
 export default ColumnList;
diff --git a/src/ColumnList/demos/actions.tsx b/src/ColumnList/demos/actions.tsx
@@ -56,6 +56,7 @@ export default () => (
       <ActionIcon
         icon={<EditFilled />}
         key={'edit'}
+        style={{ height: 22 }}
         tabIndex={-1}
         onClick={() => message.info(field.dataIndex)}
       />,

diff --git a/src/ColumnList/demos/creatorButtonProps.tsx b/src/ColumnList/demos/creatorButtonProps.tsx
@@ -1,6 +1,6 @@
 /**
  * title: 自定义初始化
- * description: 可通过 `creatorButtonProps` 来自定义初始化逻辑，id 的生成逻辑是必须的。
+ * description: 可通过 `creatorButtonProps` 来自定义初始化逻辑
  */
 import type { ColumnItemList } from '@ant-design/pro-editor';
 import { ColumnList } from '@ant-design/pro-editor';

diff --git a/src/ColumnList/demos/creatorButtonPropsFalse.tsx b/src/ColumnList/demos/creatorButtonPropsFalse.tsx
@@ -0,0 +1,68 @@
+/**
+ * title: 不可添加
+ * description: 可通过 `creatorButtonProps={false}` 来关闭添加功能，包括添加一行按钮，回车添加以及空状态添加
+ */
+import type { ColumnItemList } from '@ant-design/pro-editor';
+import { ColumnList } from '@ant-design/pro-editor';
+import { tableColumnValueOptions } from './mock_data/options';
+
+type SchemaItem = {
+  title: string;
+  valueType?: string;
+  dataIndex: string;
+};
+
+const INIT_VALUES = [
+  {
+    dataIndex: 'productName',
+    valueType: 'text',
+    title: '产品名称',
+    color: undefined,
+  },
+  {
+    dataIndex: 'productComment',
+    valueType: 'text',
+    title: '产品介绍',
+    color: undefined,
+  },
+  {
+    dataIndex: 'orderStatus',
+    valueType: 'text',
+    title: '订单状态',
+  },
+];
+
+/**
+ * 创建一个随机的索引标记符，请勿在生产环境使用
+ */
+export const randomIndex = () => Math.random() * 10000;
+
+const columns: ColumnItemList<SchemaItem> = [
+  {
+    title: '列标题',
+    dataIndex: 'title',
+    type: 'input',
+  },
+  {
+    title: '值类型',
+    dataIndex: 'valueType',
+    type: 'select',
+    options: tableColumnValueOptions,
+  },
+  {
+    title: '字段',
+    dataIndex: 'dataIndex',
+    type: 'select',
+  },
+];
+
+export default () => (
+  <ColumnList<SchemaItem>
+    columns={columns}
+    initialValues={INIT_VALUES}
+    onChange={(values) => {
+      console.log('onChange', values);
+    }}
+    creatorButtonProps={false}
+  />
+);
diff --git a/src/ColumnList/demos/normal.tsx b/src/ColumnList/demos/normal.tsx
@@ -11,13 +11,12 @@ type SchemaItem = {
 };
 
 const initialValues = [
-  { title: '序号', valueType: 'indexBorder', dataIndex: 'index' },
+  { title: '序号', dataIndex: 'index' },
   {
     title: '授权企业名称',
-    valueType: 'text',
     dataIndex: 'name',
   },
-  { title: '被授权企业', valueType: 'text', dataIndex: 'authCompany' },
+  { title: '被授权企业', dataIndex: 'authCompany' },
 ];
 
 const columns: ColumnItemList<SchemaItem> = [
@@ -45,11 +44,5 @@ export default () => (
     onChange={(values) => {
       console.log('onChange', values);
     }}
-    creatorButtonProps={{
-      record: () => ({
-        valueType: 'text',
-        title: '示例标题',
-      }),
-    }}
   />
 );
diff --git a/src/ColumnList/index.zh-CN.md b/src/ColumnList/index.zh-CN.md
@@ -16,6 +16,7 @@ demo:
 ## 代码演示
 
 <code src="./demos/normal.tsx" ></code>
+<code src="./demos/creatorButtonPropsFalse.tsx"></code>
 <code src="./demos/column.tsx" ></code>
 <code src="./demos/controlled.tsx" ></code>
 <code src="./demos/actions.tsx" ></code>

diff --git a/src/ColumnList/renderItem/Input.tsx b/src/ColumnList/renderItem/Input.tsx
@@ -1,4 +1,4 @@
-import { useSortableList } from '@ant-design/pro-editor';
+import { CreatorButtonProps, useSortableList } from '@ant-design/pro-editor';
 import { Input, InputRef } from 'antd';
 import { createStyles } from 'antd-style';
 import { CSSProperties, memo, useEffect, useRef, useState } from 'react';
@@ -23,10 +23,11 @@ interface ItemRenderProps {
   prefixCls: string;
   style: CSSProperties;
   placeholder?: string;
+  creatorButtonProps: CreatorButtonProps | false;
 }
 
 const ControlInput = memo<ItemRenderProps>(
-  ({ dataIndex, placeholder, value, index, prefixCls, style, dragging }) => {
+  ({ dataIndex, placeholder, value, index, prefixCls, style, dragging, creatorButtonProps }) => {
     const instance = useSortableList();
     const inputRef = useRef<InputRef>(null);
     const [innerValue, setInnerValue] = useState(value);
@@ -53,8 +54,9 @@ const ControlInput = memo<ItemRenderProps>(
     const handleNextFocus = () => {
       const value = instance.getValue() || [];
       // 如果是最后一个节点，按下回车后，会自动添加一个新的节点
-      if (index + 1 === value.length) {
-        instance.addItem({ [dataIndex]: '' });
+      if (index + 1 === value.length && creatorButtonProps !== false) {
+        const { record } = creatorButtonProps;
+        instance.addItem(record(value.length));
       }
 
       setTimeout(() => {

diff --git a/src/SortableList/demos/creatorButtonProps.tsx b/src/SortableList/demos/creatorButtonProps.tsx
@@ -1,6 +1,6 @@
 /**
  * title: 创建按钮
- * description: 通过 `creatorButtonProps` 可以自定义创建按钮，record 为创建的数据，必须包含 id 字段
+ * description: 通过 `creatorButtonProps` 可以自定义创建按钮，record 为创建的数据
  * compact: true
  */
 import { SortableList } from '@ant-design/pro-editor';

diff --git a/src/SortableList/features/SortList.tsx b/src/SortableList/features/SortList.tsx
@@ -8,7 +8,7 @@ import type { Store } from '../store';
 import { useStore } from '../store';
 
 import { PlusOutlined } from '@ant-design/icons';
-import { Button } from 'antd';
+import { Button } from '../../antd';
 
 import { useStyle } from '../style';
 
@@ -43,13 +43,19 @@ const SortableList: FC<SortableListProps> = ({ prefixCls }) => {
 
   const { styles } = useStyle(prefixCls);
   const items = useStore((s) => s.value, isEqual);
-  const { record, creatorButtonText = '添加一列', position = 'bottom' } = creatorButtonProps || {};
+  const {
+    record,
+    creatorButtonText = '添加一列',
+    position = 'bottom',
+    style,
+  } = creatorButtonProps || {};
 
   const CreateButton = ({ empty = false }) => {
     return (
       <Button
         block={empty ? false : true}
         size={'small'}
+        style={style}
         className={styles.btnAdd}
         onClick={() => {
           dispatchListData({

diff --git a/src/SortableList/index.ts b/src/SortableList/index.ts
@@ -3,4 +3,4 @@ export * from './container';
 // hooks 和相关类型定义
 export { useSortableList } from './hooks/useSortableList';
 export type { SortableListInstance } from './hooks/useSortableList';
-export type { SortableListDispatchPayload, SortableListRef } from './type';
+export type { CreatorButtonProps, SortableListDispatchPayload, SortableListRef } from './type';
diff --git a/src/SortableList/index.zh-CN.md b/src/SortableList/index.zh-CN.md
@@ -12,7 +12,7 @@ demo:
 
 ## 何时使用
 
-针对可排序列表场景提供基础底层封装，可在其上进行进一步自定义，参考 `ColumnList`。
+针对可排序列表场景提供基础底层封装，可在其上进行进一步自定义，我们还封装了 `ColumnList` 组件通过 `schema` 自动生成简单的排序列表。
 
 ## 使用方式
 
@@ -48,11 +48,12 @@ demo:
 
 ### CreatorButtonProps 创建按钮属性
 
-| 属性名            | 类型                   | 描述                 |
-| ----------------- | ---------------------- | -------------------- |
-| position          | `'bottom'\|'top'`      | 按钮位置，默认在下方 |
-| record            | `(index: number) => T` | 生成初始值逻辑       |
-| creatorButtonText | `string`               | 新增一行按钮文案     |
+| 属性名            | 类型                   | 描述                                                                 |
+| ----------------- | ---------------------- | -------------------------------------------------------------------- |
+| position          | `'bottom'\|'top'`      | 按钮位置，默认在下方                                                 |
+| record            | `(index: number) => T` | 生成初始值逻辑                                                       |
+| creatorButtonText | `string`               | 新增一行按钮文案                                                     |
+| style             | CSSProperties          | 按钮的样式设置，可以设置按钮是否显示，如 `style: { display: 'none'}` |
 
 ### GetItemStylesArgs
 

diff --git a/src/SortableList/type/component.ts b/src/SortableList/type/component.ts
@@ -62,6 +62,10 @@ export interface CreatorButtonProps {
    * 新增一行按钮文案
    */
   creatorButtonText?: string;
+  /**
+   * 按钮的样式设置，可以设置按钮是否显示，比如 style: {display: 'none'}
+   */
+  style?: CSSProperties;
 }
 
 export type RenderItem<T = any> = (