@regenbio/regenbio-components-react 1.2.15 → 1.2.16

package/packages/form/src/components/FormItemRender/index.tsx

@@ -0,0 +1,219 @@
+import { Form } from 'antd';
+import React from 'react';
+import ProFormItem from '../FormItem';
+
+interface ControlPropsType {
+  id: string;
+  value: any;
+  onChange: (value: any, ...args: any[]) => void;
+}
+
+export type WithControlPropsType<T = object> = T & Partial<ControlPropsType>;
+
+interface ControlModelType {
+  value: any;
+  onChange: (value: any) => void;
+}
+interface FormControlProps {
+  valuePropName?: string;
+  trigger?: string;
+}
+interface FormControlMultiProps extends FormControlProps {
+  name: string;
+}
+type GetArrayFieldType<T extends readonly { name: string }[]> =
+  T[number]['name'];
+
+function getControlConfigProps(props = {} as any): {
+  valuePropName: string;
+  trigger: string;
+  name: string;
+} {
+  const valuePropName = props.valuePropName || 'value';
+  const trigger = props.trigger || 'onChange';
+  const name = props.name;
+  return {
+    valuePropName,
+    trigger,
+    name,
+  };
+}
+
+export function useControlModel<T extends FormControlProps>(
+  { value, onChange, id }: WithControlPropsType,
+  model?: T,
+): ControlModelType;
+export function useControlModel<const T extends readonly string[]>(
+  { value, onChange, id }: WithControlPropsType,
+  model?: T,
+): { [P in T[number]]: ControlModelType };
+export function useControlModel<
+  const T extends readonly FormControlMultiProps[],
+>(
+  { value, onChange, id }: WithControlPropsType,
+  model?: T,
+): { [P in GetArrayFieldType<T>]: ControlModelType };
+export function useControlModel<
+  T extends
+    | FormControlProps
+    | (string | FormControlMultiProps)[] = FormControlProps,
+>({ value, onChange }: WithControlPropsType, model?: T): unknown {
+  if (!Array.isArray(model)) {
+    const p = getControlConfigProps(model);
+    return {
+      [p.valuePropName]: value,
+      [p.trigger]: (e: any) => {
+        onChange?.(e?.target ? e.target[p.valuePropName] : e);
+      },
+    };
+  }
+
+  return model.reduce((acc, k) => {
+    const p = getControlConfigProps(k);
+    const name = p.name || (k as string);
+    acc[name] = {
+      [p.valuePropName]: value?.[name],
+      [p.trigger]: (v: any) => {
+        onChange?.({
+          ...value,
+          [name]: v?.target ? v.target[p.valuePropName] : v,
+        });
+      },
+    };
+    return acc;
+  }, {} as Record<string, unknown>) as unknown;
+}
+
+export type FormControlFC<P> = (
+  props: WithControlPropsType<P>,
+) => React.ReactNode;
+
+type FormControlInjectProps = ReturnType<typeof Form.Item.useStatus> & {
+  id: string;
+  value: any;
+  onChange: (value: any) => void;
+  [x: string]: any;
+};
+
+/**
+ * 用在 ProForm.Item 或 Form.Item 于 表单项之间的，用于劫持渲染的函数
+ * ``` tsx
+ * <Form.Item name='name' label='名称'>
+ *   <FormControlRender>
+ *   {
+ *     formItemProps => (
+ *       <div>
+ *         <span>prefix</span>
+ *         <Input {...formItemProps} />
+ *       </div>
+ *     )
+ *   }
+ *   </FormControlRender>
+ * </Form.Item>
+ * ```
+ */
+export function FormControlRender(
+  props: WithControlPropsType<{
+    children: (props: FormControlInjectProps) => React.ReactElement;
+  }>,
+) {
+  const { children, ...restProps } = props;
+  const { status, errors, warnings } = Form.Item.useStatus();
+  return children({
+    status,
+    errors,
+    warnings,
+    ...(restProps as ControlPropsType),
+  });
+}
+
+/**
+ * 提取props中的 value 和 onChange 属性
+ */
+export function pickControlProps(props: FormControlInjectProps) {
+  return {
+    value: props.value,
+    onChange: (value: any) =>
+      props.onChange(value?.target ? value.target.value : value),
+  };
+}
+
+/**
+ * 提取props中的 value、onChange 和 id 属性
+ */
+export function pickControlPropsWithId(props: FormControlInjectProps) {
+  return {
+    ...pickControlProps(props),
+    id: props.id,
+  };
+}
+
+/**
+ * 用于包裹ProForm.Item Form.Item，使其可以使用render props的形式
+ * @description 用法
+ * const FormItem = withFormItemRender(用于包裹ProForm.Item)
+ * ``` tsx
+ * <FormItem name='name' label='名称'>
+ *   {
+ *     formItemProps => (
+ *       <div>
+ *         <span>prefix</span>
+ *         <Input {...formItemProps} />
+ *       </div>
+ *     )
+ *   }
+ * </FormItem>
+ * ```
+ */
+export function withFormItemRender<T extends React.FC<any>>(
+  Comp: T,
+): React.FC<
+  Omit<React.ComponentProps<T>, 'children'> & {
+    children: (formItemProps: FormControlInjectProps) => React.ReactNode;
+  }
+> {
+  return function (props: React.PropsWithChildren<any>) {
+    const { children, ...restProps } = props;
+
+    return (
+      <Comp {...restProps}>
+        <FormControlRender>{children}</FormControlRender>
+      </Comp>
+    );
+  };
+}
+
+/**
+ * 用 withFormItemRender 加工Form.Item，使其拥有render props能力，同时暴露出 status 属性方便自定义组件校验使用
+ *
+ * ``` tsx
+ *   <FormItemRender name='name' label='名称'>
+ *   {
+ *     formItemProps => (
+ *       <div>
+ *         <h3>prefix</h3>
+ *         <textarea {...formItemProps} style={{ borderColor: formItemProps.status === 'error' ? 'red' : undefined }} />
+ *       </div>
+ *     )
+ *   }
+ *   </FormItemRender>
+ * ```
+ */
+export const FormItemRender = withFormItemRender(Form.Item);
+
+/**
+ * 用 withFormItemRender 加工 ProForm.Item，使其拥有render props能力，同时暴露出 status 属性方便自定义组件校验使用
+ * ``` tsx
+ *   <ProFormItemRender name='name' label='名称'>
+ *   {
+ *     formItemProps => (
+ *       <div>
+ *         <h3>prefix</h3>
+ *         <textarea {...formItemProps} style={{ borderColor: formItemProps.status === 'error' ? 'red' : undefined }} />
+ *       </div>
+ *     )
+ *   }
+ *   </ProFormItemRender>
+ * ```
+ */
+export const ProFormItemRender = withFormItemRender(ProFormItem);

package/packages/form/src/components/Group/demos/base-use.tsx

@@ -0,0 +1,93 @@
+import {
+  ProForm,
+  ProFormDependency,
+  ProFormList,
+  ProFormText,
+} from '@ant-design/pro-components';
+import { Button } from 'antd';
+
+const Demo = () => {
+  return (
+    <ProForm>
+      <ProFormList
+        name={['default', 'users']}
+        label="用户信息"
+        initialValue={[
+          {
+            name: '1111',
+          },
+        ]}
+        itemContainerRender={(doms) => {
+          return <ProForm.Group>{doms}</ProForm.Group>;
+        }}
+        alwaysShowItemLabel
+      >
+        {(f, index, action) => {
+          console.log(f, index, action);
+          return (
+            <>
+              <ProFormText
+                initialValue={index}
+                name="rowKey"
+                label={`第 ${index} 配置`}
+              />
+              <ProFormText name="name" key="name" label="姓名" />
+              <ProFormDependency key="remark" name={['name']}>
+                {({ name }) => {
+                  if (!name) {
+                    return (
+                      <span
+                        style={{
+                          lineHeight: '92px',
+                        }}
+                      >
+                        输入姓名展示
+                      </span>
+                    );
+                  }
+                  return <ProFormText name="remark" label="昵称详情" />;
+                }}
+              </ProFormDependency>
+              <div
+                style={{
+                  display: 'flex',
+                  alignItems: 'flex-end',
+                  gap: '8px',
+                  height: 60,
+                }}
+              >
+                <Button
+                  type="primary"
+                  key="SET"
+                  onClick={() => {
+                    action.setCurrentRowData({
+                      name: 'New Name' + index,
+                      remark: 'New Remark' + index,
+                    });
+                  }}
+                >
+                  设置此项
+                </Button>
+
+                <Button
+                  type="dashed"
+                  key="clear"
+                  onClick={() => {
+                    action.setCurrentRowData({
+                      name: undefined,
+                      remark: undefined,
+                    });
+                  }}
+                >
+                  清空此项
+                </Button>
+              </div>
+            </>
+          );
+        }}
+      </ProFormList>
+    </ProForm>
+  );
+};
+
+export default Demo;

package/packages/form/src/components/Group/demos/countLimit.tsx

@@ -0,0 +1,57 @@
+import { CloseOutlined, SnippetsOutlined } from '@ant-design/icons';
+import type { FormListActionType } from '@ant-design/pro-components';
+import { ProForm, ProFormList, ProFormText } from '@ant-design/pro-components';
+import { useRef } from 'react';
+
+export default () => {
+  const actionRef = useRef<
+    FormListActionType<{
+      name: string;
+    }>
+  >();
+  return (
+    <>
+      <ProForm>
+        <ProFormList
+          copyIconProps={{
+            Icon: SnippetsOutlined,
+          }}
+          deleteIconProps={{
+            Icon: CloseOutlined,
+          }}
+          min={1}
+          max={4}
+          actionRef={actionRef}
+          actionGuard={{
+            beforeAddRow: async (defaultValue, insertIndex, count) => {
+              return new Promise((resolve) => {
+                console.log(defaultValue?.name, insertIndex, count);
+                setTimeout(() => resolve(true), 1000);
+              });
+            },
+            beforeRemoveRow: async (index, count) => {
+              const row = actionRef.current?.get(index as number);
+              console.log('--->', index, count, row);
+              return new Promise((resolve) => {
+                if (index === 0) {
+                  resolve(false);
+                  return;
+                }
+                setTimeout(() => resolve(true), 1000);
+              });
+            },
+          }}
+          name="users"
+          label="用户信息"
+          initialValue={[
+            {
+              name: '1111',
+            },
+          ]}
+        >
+          <ProFormText key="useMode" name="name" label="姓名" />
+        </ProFormList>
+      </ProForm>
+    </>
+  );
+};

package/packages/form/src/components/Group/demos/customize.tsx

@@ -0,0 +1,294 @@
+/* eslint-disable no-param-reassign */
+import {
+  CopyOutlined,
+  DeleteOutlined,
+  HeartOutlined,
+  HomeOutlined,
+  PlusOutlined,
+  SettingFilled,
+  SmileOutlined,
+  SyncOutlined,
+} from '@ant-design/icons';
+import {
+  ProCard,
+  ProForm,
+  ProFormDependency,
+  ProFormField,
+  ProFormList,
+  ProFormSelect,
+  ProFormSwitch,
+  ProFormText,
+} from '@ant-design/pro-components';
+import { useState } from 'react';
+
+const IconMap = {
+  PlusOutlined,
+  HeartOutlined,
+  DeleteOutlined,
+  CopyOutlined,
+  HomeOutlined,
+  SettingFilled,
+  SmileOutlined,
+  SyncOutlined,
+};
+const initialValue = {
+  copyIconProps: {
+    show: true,
+    Icon: 'CopyOutlined',
+    tooltipText: '复制此项',
+  },
+  deleteIconProps: {
+    show: true,
+    Icon: 'DeleteOutlined',
+    tooltipText: '删除此项',
+  },
+  creatorButtonProps: {
+    show: true,
+    creatorButtonText: '新建一行',
+    position: 'button',
+    type: 'dashed',
+    icon: 'PlusOutlined',
+  },
+};
+const Demo = () => {
+  const [stateValue, setStateValue] = useState({});
+  const [json, setJson] = useState(() => JSON.stringify(initialValue));
+  return (
+    <ProCard bordered split="vertical" headerBordered>
+      <ProCard colSpan="calc(100% - 400px)">
+        <ProForm>
+          <ProFormList
+            name="users"
+            label="用户信息"
+            initialValue={[
+              {
+                name: '1111',
+              },
+            ]}
+            creatorButtonProps={{
+              position: 'bottom',
+            }}
+            {...stateValue}
+          >
+            <ProForm.Group key="group" size={8}>
+              <ProFormText name="name" label="姓名" />
+              <ProFormText name="nickName" label="姓名" />
+            </ProForm.Group>
+          </ProFormList>
+        </ProForm>
+      </ProCard>
+      <ProCard colSpan="400px" title="配置菜单">
+        <ProForm
+          submitter={false}
+          initialValues={initialValue}
+          onValuesChange={(_, values) => {
+            if (values?.creatorButtonProps?.show === false) {
+              values.creatorButtonProps = false;
+            }
+
+            if (values?.copyIconProps?.show === false) {
+              values.copyIconProps = false;
+            }
+            if (values?.deleteIconProps?.show === false) {
+              values.deleteIconProps = false;
+            }
+
+            delete values.creatorButtonProps.show;
+            delete values.deleteIconProps.show;
+            delete values.creatorButtonProps.show;
+
+            setJson(JSON.stringify(values));
+
+            if (values?.copyIconProps?.Icon) {
+              values.copyIconProps.Icon =
+                IconMap[values?.copyIconProps?.Icon as 'PlusOutlined'];
+            }
+
+            if (values?.deleteIconProps?.Icon) {
+              values.deleteIconProps.Icon =
+                IconMap[values?.deleteIconProps?.Icon as 'PlusOutlined'];
+            }
+            if (values?.creatorButtonProps?.icon) {
+              const Icon =
+                IconMap[values?.creatorButtonProps?.icon as 'PlusOutlined'];
+              values.creatorButtonProps.icon = <Icon />;
+            }
+            setStateValue(values);
+          }}
+        >
+          <ProForm.Group
+            title="新建按钮配置"
+            extra={
+              <ProFormSwitch
+                fieldProps={{
+                  size: 'small',
+                }}
+                noStyle
+                name={['creatorButtonProps', 'show']}
+              />
+            }
+          >
+            <ProFormDependency name={['creatorButtonProps']}>
+              {({ creatorButtonProps }) => {
+                if (!creatorButtonProps.show) {
+                  return null;
+                }
+                return (
+                  <ProForm.Group size={8}>
+                    <ProFormText
+                      width="sm"
+                      name={['creatorButtonProps', 'creatorButtonText']}
+                      label="按钮文字"
+                    />
+                    <ProFormSelect
+                      width="xs"
+                      name={['creatorButtonProps', 'icon']}
+                      label="图标"
+                      request={async () => {
+                        return Object.keys(IconMap).map((value) => {
+                          const Icon = IconMap[value as 'PlusOutlined'];
+                          return {
+                            label: <Icon />,
+                            value,
+                          };
+                        });
+                      }}
+                    />
+                    <ProFormSelect
+                      width="xs"
+                      name={['creatorButtonProps', 'position']}
+                      label="按钮位置"
+                      request={async () => {
+                        return ['bottom', 'top'].map((value) => {
+                          return {
+                            label: value,
+                            value,
+                          };
+                        });
+                      }}
+                    />
+                    <ProFormSelect
+                      width="xs"
+                      name={['creatorButtonProps', 'type']}
+                      label="按钮类型"
+                      request={async () => {
+                        return [
+                          'default',
+                          'primary',
+                          'ghost',
+                          'dashed',
+                          'link',
+                          'text',
+                        ].map((value) => {
+                          return {
+                            label: value,
+                            value,
+                          };
+                        });
+                      }}
+                    />
+                  </ProForm.Group>
+                );
+              }}
+            </ProFormDependency>
+          </ProForm.Group>
+
+          <ProForm.Group
+            title="复制按钮配置"
+            extra={
+              <ProFormSwitch
+                fieldProps={{
+                  size: 'small',
+                }}
+                noStyle
+                name={['copyIconProps', 'show']}
+              />
+            }
+          >
+            <ProFormDependency name={['copyIconProps']}>
+              {({ copyIconProps }) => {
+                if (!copyIconProps.show) {
+                  return null;
+                }
+                return (
+                  <ProForm.Group size={8}>
+                    <ProFormText
+                      width="sm"
+                      name={['copyIconProps', 'tooltipText']}
+                      label=" tooltip 提示文字"
+                    />
+                    <ProFormSelect
+                      width="xs"
+                      name={['copyIconProps', 'Icon']}
+                      label="图标"
+                      request={async () => {
+                        return Object.keys(IconMap).map((value) => {
+                          const Icon = IconMap[value as 'PlusOutlined'];
+                          return {
+                            label: <Icon />,
+                            value,
+                          };
+                        });
+                      }}
+                    />
+                  </ProForm.Group>
+                );
+              }}
+            </ProFormDependency>
+          </ProForm.Group>
+          <ProForm.Group
+            title="删除按钮配置"
+            extra={
+              <ProFormSwitch
+                fieldProps={{
+                  size: 'small',
+                }}
+                noStyle
+                name={['deleteIconProps', 'show']}
+              />
+            }
+          >
+            <ProFormDependency name={['deleteIconProps']}>
+              {({ deleteIconProps }) => {
+                if (!deleteIconProps.show) {
+                  return null;
+                }
+                return (
+                  <ProForm.Group size={8}>
+                    <ProFormText
+                      width="sm"
+                      name={['deleteIconProps', 'tooltipText']}
+                      label=" tooltip 提示文字"
+                    />
+                    <ProFormSelect
+                      width="xs"
+                      name={['deleteIconProps', 'Icon']}
+                      label="图标"
+                      request={async () => {
+                        return Object.keys(IconMap).map((value) => {
+                          const Icon = IconMap[value as 'PlusOutlined'];
+                          return {
+                            label: <Icon />,
+                            value,
+                          };
+                        });
+                      }}
+                    />
+                  </ProForm.Group>
+                );
+              }}
+            </ProFormDependency>
+          </ProForm.Group>
+          <ProFormField
+            ignoreFormItem
+            valueType="jsonCode"
+            text={json}
+            mode="read"
+          />
+        </ProForm>
+      </ProCard>
+    </ProCard>
+  );
+};
+
+export default Demo;