@regenbio/regenbio-components-react 1.2.16 → 1.2.17

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

@@ -1,219 +0,0 @@
-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

@@ -1,93 +0,0 @@
-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

@@ -1,57 +0,0 @@
-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

@@ -1,294 +0,0 @@
-/* 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;