@regenbio/regenbio-components-react 1.2.16 → 1.2.18

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

@@ -1,144 +0,0 @@
-import ProField from '@ant-design/pro-field';
-import type { ProSchema } from '@ant-design/pro-utils';
-import {
-  isDeepEqualReact,
-  runFunction,
-  useRefFunction,
-} from '@ant-design/pro-utils';
-import React, { memo, useContext, useMemo } from 'react';
-import { EditOrReadOnlyContext } from '../../BaseForm/EditOrReadOnlyContext';
-import { createField } from '../../BaseForm/createField';
-import type { ProFormFieldItemProps } from '../../typing';
-
-export type ProFormFieldProps<
-  T = any,
-  FiledProps = Record<string, any>,
-> = ProSchema<
-  T,
-  ProFormFieldItemProps<FiledProps> & {
-    mode?: 'edit' | 'read' | 'update';
-    // 用来判断是不是被嵌套渲染的 dom
-    isDefaultDom?: boolean;
-    ref?: any;
-    plain?: boolean;
-    text?: any;
-    getFieldProps?: () => Record<string, any>;
-    getFormItemProps?: () => Record<string, any>;
-    /**
-     * dependencies value
-     */
-    dependenciesValues?: Record<string, any>;
-    originDependencies?: Record<string, any>;
-  },
-  any,
-  any
->;
-
-const BaseProFormField: React.FC<
-  ProFormFieldProps & {
-    onChange?: (...args: any) => any;
-    autoFocus?: boolean;
-  }
-> = (props) => {
-  const {
-    fieldProps,
-    children,
-    labelCol,
-    label,
-    autoFocus,
-    isDefaultDom,
-    render,
-    proFieldProps,
-    renderFormItem,
-    valueType,
-    initialValue,
-    onChange,
-    valueEnum,
-    params,
-    name,
-    dependenciesValues,
-    cacheForSwr = false,
-    valuePropName = 'value',
-    ...restProps
-  } = props;
-
-  const modeContext = useContext(EditOrReadOnlyContext);
-
-  const propsParams = useMemo(() => {
-    // 使用dependencies时 dependenciesValues是有值的
-    // 此时如果存在request，注入dependenciesValues
-    return dependenciesValues && restProps.request
-      ? {
-          ...params,
-          ...(dependenciesValues || {}),
-        }
-      : params;
-  }, [dependenciesValues, params, restProps.request]);
-
-  const memoUnChange = useRefFunction((...restParams: any) => {
-    if (fieldProps?.onChange) {
-      (fieldProps?.onChange as any)?.(...restParams);
-      return;
-    }
-  });
-
-  const memoFieldProps = useMemo(
-    () => ({
-      autoFocus,
-      ...fieldProps,
-      onChange: memoUnChange,
-    }),
-    [autoFocus, fieldProps, memoUnChange],
-  );
-
-  const childrenRender = useMemo(() => {
-    // 防止 formItem 的值被吃掉
-    if (children) {
-      if (React.isValidElement(children)) {
-        return React.cloneElement(children, {
-          ...restProps,
-          onChange: (...restParams: any) => {
-            if (fieldProps?.onChange) {
-              (fieldProps?.onChange as any)?.(...restParams);
-              return;
-            }
-            onChange?.(...restParams);
-          },
-          ...((children?.props as any) || {}),
-        });
-      }
-      return <>{children}</>;
-    }
-    return;
-  }, [children, fieldProps?.onChange, onChange, restProps]);
-
-  if (childrenRender) {
-    return childrenRender;
-  }
-
-  return (
-    <ProField
-      text={fieldProps?.[valuePropName]}
-      render={render as any}
-      renderFormItem={renderFormItem as any}
-      valueType={(valueType as 'text') || 'text'}
-      cacheForSwr={cacheForSwr}
-      fieldProps={memoFieldProps}
-      valueEnum={runFunction(valueEnum)}
-      {...proFieldProps}
-      {...restProps}
-      mode={proFieldProps?.mode || modeContext.mode || 'edit'}
-      params={propsParams}
-    />
-  );
-};
-
-const ProFormField = createField<ProFormFieldProps>(
-  memo(BaseProFormField, (prevProps, nextProps) => {
-    return isDeepEqualReact(nextProps, prevProps, ['onChange', 'onBlur']);
-  }),
-) as <FiledProps, DataType = Record<string, any>>(
-  props: ProFormFieldProps<DataType, FiledProps>,
-) => React.ReactElement;
-
-export default ProFormField;

package/packages/form/src/components/FieldSet/demos/captCha.tsx

@@ -1,67 +0,0 @@
-import { ProForm, ProFormCaptcha } from '@ant-design/pro-components';
-import { Button, message } from 'antd';
-import { useRef } from 'react';
-
-const waitTime = (time: number = 100) => {
-  return new Promise((resolve) => {
-    setTimeout(() => {
-      resolve(true);
-    }, time);
-  });
-};
-
-export default () => {
-  const captchaRef = useRef();
-  const inputRef = useRef();
-
-  return (
-    <ProForm
-      title="新建表单"
-      submitter={{
-        render: (props, doms) => {
-          return [
-            ...doms,
-            <Button
-              htmlType="button"
-              onClick={() => {
-                // @ts-ignore
-                captchaRef.current?.startTiming();
-              }}
-              key="edit"
-            >
-              手动开始计数
-            </Button>,
-            <Button
-              htmlType="button"
-              onClick={() => {
-                // @ts-ignore
-                captchaRef.current?.endTiming();
-              }}
-              key="edit2"
-            >
-              手动结束计数
-            </Button>,
-          ];
-        },
-      }}
-      onFinish={async (values) => {
-        await waitTime(2000);
-        console.log(values);
-        message.success('提交成功');
-        return true;
-      }}
-    >
-      <ProFormCaptcha
-        onGetCaptcha={() => {
-          // dosomething()
-          return new Promise((resolve, reject) => {
-            reject();
-          });
-        }}
-        fieldRef={captchaRef}
-        fieldProps={{ ref: inputRef }}
-        name="code"
-      />
-    </ProForm>
-  );
-};

package/packages/form/src/components/FieldSet/demos/components-other-readonly.tsx

@@ -1,465 +0,0 @@
-import {
-  ProForm,
-  ProFormCheckbox,
-  ProFormDatePicker,
-  ProFormDateRangePicker,
-  ProFormDateTimePicker,
-  ProFormDateTimeRangePicker,
-  ProFormDependency,
-  ProFormDigit,
-  ProFormFieldSet,
-  ProFormList,
-  ProFormRadio,
-  ProFormRate,
-  ProFormSelect,
-  ProFormSlider,
-  ProFormSwitch,
-  ProFormText,
-  ProFormTimePicker,
-  ProFormUploadButton,
-  ProFormUploadDragger,
-} from '@ant-design/pro-components';
-
-const options = [
-  {
-    id: 1,
-    label: '测试测试1',
-    value: 1,
-  },
-  {
-    id: 2,
-    label: '测试测试2',
-    value: 2,
-  },
-  {
-    id: 3,
-    label: '测试测试3',
-    value: 3,
-  },
-  {
-    id: 4,
-    label: '测试测试4',
-    value: 4,
-  },
-  {
-    id: 5,
-    label: '测试测试5',
-    value: 5,
-  },
-  {
-    id: 6,
-    label: '测试测试6',
-    value: 6,
-  },
-  {
-    id: 7,
-    label: '测试测试7',
-    value: 7,
-  },
-  {
-    id: 8,
-    label: '测试测试8',
-    value: 8,
-  },
-  {
-    id: 9,
-    label: '测试测试9',
-    value: 9,
-  },
-  {
-    id: 10,
-    label: '测试测试10',
-    value: 10,
-  },
-  {
-    id: 11,
-    label: '测试测试11',
-    value: 11,
-  },
-  {
-    id: 12,
-    label: '测试测试12',
-    value: 12,
-  },
-];
-
-const Demo = () => (
-  <div
-    style={{
-      padding: 24,
-    }}
-  >
-    <ProForm
-      readonly
-      name="validate_other"
-      initialValues={{
-        'select-multiple': ['red', 'green'],
-        'select-multiple2': [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
-        useMode: 'all',
-        switch: true,
-        'input-number': 3,
-        'checkbox-group': ['A', 'B'],
-        rate: 3.5,
-        name: '蚂蚁金服有限公司',
-        radio: 'a',
-        list: ['1', '2', '3'],
-        list2: ['1', '2', '5', '5'],
-        select: 'china',
-        'radio-button': 'a',
-        dragger: [
-          {
-            uid: '1',
-            name: 'xxx.png',
-            status: 'done',
-            response: 'Server Error 500', // custom error message to show
-            url: 'https://gw.alipayobjects.com/zos/antfincdn/7%24YOiS6YIm/huaban.png',
-          },
-          {
-            uid: '2',
-            name: 'yyy.png',
-            status: 'done',
-            url: 'https://gw.alipayobjects.com/zos/antfincdn/7%24YOiS6YIm/huaban.png',
-          },
-          {
-            uid: '3',
-            name: 'zzz.png',
-            status: 'error',
-            response: 'Server Error 500', // custom error message to show
-            url: 'https://gw.alipayobjects.com/zos/antfincdn/7%24YOiS6YIm/huaban.png',
-          },
-        ],
-        upload: [
-          {
-            uid: '1',
-            name: 'xxx.png',
-            status: 'done',
-            response: 'Server Error 500', // custom error message to show
-            url: 'https://gw.alipayobjects.com/zos/antfincdn/7%24YOiS6YIm/huaban.png',
-          },
-          {
-            uid: '2',
-            name: 'yyy.png',
-            status: 'done',
-            url: 'https://gw.alipayobjects.com/zos/antfincdn/7%24YOiS6YIm/huaban.png',
-          },
-          {
-            uid: '3',
-            name: 'zzz.png',
-            status: 'error',
-            response: 'Server Error 500', // custom error message to show
-            url: 'https://gw.alipayobjects.com/zos/antfincdn/7%24YOiS6YIm/huaban.png',
-          },
-        ],
-        date: Date.now(),
-        dateWeek: Date.now(),
-        dateMonth: Date.now(),
-        dateQuarter: Date.now(),
-        dateYear: Date.now(),
-        dateTime: Date.now(),
-        time: '00:01:05',
-        timeRange: ['05:00:00', '11:00:00'],
-        dateTimeRange: [Date.now(), Date.now() - 1000 * 60 * 60 * 24],
-        dateRange: [Date.now(), Date.now() - 1000 * 60 * 60 * 24],
-      }}
-      onValuesChange={(_, values) => {
-        console.log(values);
-      }}
-      onFinish={async (value) => console.log(value)}
-    >
-      <ProForm.Group title="基础数据">
-        <ProFormText
-          width="md"
-          name="name"
-          label="name"
-          fieldProps={{
-            prefix: 'prefix',
-            suffix: 'suffix',
-          }}
-        />
-        <ProFormSelect
-          name="select"
-          label="Select"
-          valueEnum={{
-            china: 'China',
-            usa: 'U.S.A',
-          }}
-          placeholder="Please select a country"
-          rules={[{ required: true, message: 'Please select your country!' }]}
-        />
-        <ProFormSelect
-          width="md"
-          request={async () => [
-            { label: '全部', value: 'all' },
-            { label: '未解决', value: 'open' },
-            { label: '已解决', value: 'closed' },
-            { label: '解决中', value: 'processing' },
-          ]}
-          name="useMode"
-          label="合同约定生效方式"
-        />
-        <ProFormSelect
-          name="select-multiple"
-          label="Select[multiple]"
-          valueEnum={{
-            red: 'Red',
-            green: 'Green',
-            blue: 'Blue',
-          }}
-          fieldProps={{
-            mode: 'multiple',
-          }}
-          placeholder="Please select favorite colors"
-          rules={[
-            {
-              required: true,
-              message: 'Please select your favorite colors!',
-              type: 'array',
-            },
-          ]}
-        />
-        <ProFormSelect
-          name="select-multiple2"
-          label="Select[multiple]"
-          options={options}
-          fieldProps={{
-            mode: 'multiple',
-          }}
-          placeholder="Please select favorite colors"
-          rules={[
-            {
-              required: true,
-              message: 'Please select your favorite colors!',
-              type: 'array',
-            },
-          ]}
-        />
-        <ProFormDigit
-          label="InputNumber"
-          name="input-number"
-          min={1}
-          max={10}
-        />
-        <ProFormSwitch
-          name="switch"
-          label="Switch"
-          unCheckedChildren="不同意"
-          checkedChildren="同意"
-        />
-        <ProFormSlider
-          name="slider"
-          label="Slider"
-          marks={{
-            0: 'A',
-            20: 'B',
-            40: 'C',
-            60: 'D',
-            80: 'E',
-            100: 'F',
-          }}
-        />
-      </ProForm.Group>
-      <ProFormRadio.Group
-        name="radio"
-        label="Radio.Group"
-        options={[
-          {
-            label: 'item 1',
-            value: 'a',
-          },
-          {
-            label: 'item 2',
-            value: 'b',
-          },
-          {
-            label: 'item 3',
-            value: 'c',
-          },
-        ]}
-      />
-      <ProForm.Group>
-        <ProFormText hidden label="text1" />
-        <ProFormText label="text2" />
-      </ProForm.Group>
-      <ProFormRadio.Group
-        name="radio-button"
-        label="Radio.Button"
-        radioType="button"
-        options={[
-          {
-            label: 'item 1',
-            value: 'a',
-          },
-          {
-            label: 'item 2',
-            value: 'b',
-          },
-          {
-            label: 'item 3',
-            value: 'c',
-          },
-        ]}
-      />
-      <ProFormCheckbox.Group
-        name="checkbox-group"
-        label="Checkbox.Group"
-        options={['A', 'B', 'C', 'D', 'E', 'F']}
-      />
-      <ProFormRate name="rate" label="Rate" />
-      <ProFormUploadButton
-        name="upload"
-        label="Upload"
-        max={2}
-        action="/upload.do"
-        extra="longgggggggggggggggggggggggggggggggggg"
-      />
-      <ProFormList
-        name="textList"
-        label="地址列表"
-        initialValue={[
-          {
-            name: '张三',
-            addr: '地址1',
-          },
-          {
-            name: '李四',
-            addr: '地址2',
-          },
-        ]}
-      >
-        <ProFormText name="name" label="姓名" />
-        <ProFormText name="addr" label="地址" />
-      </ProFormList>
-      <ProFormFieldSet
-        name="list"
-        label="组件列表"
-        transform={(value: any) => ({ startTime: value[0], endTime: value[1] })}
-      >
-        <ProFormText width="md" />
-        -
-        <ProFormText width="md" />
-        -
-        <ProFormText width="md" />
-      </ProFormFieldSet>
-
-      <ProFormFieldSet
-        name="list2"
-        label="组件列表自动增加"
-        transform={(value: any) => ({ startTime: value[0], endTime: value[1] })}
-      >
-        {(value) => {
-          return value?.map((e, index) => {
-            return (
-              <ProFormText
-                key={index}
-                width="md"
-                fieldProps={{
-                  value: e,
-                }}
-              />
-            );
-          });
-        }}
-      </ProFormFieldSet>
-      <ProFormUploadDragger max={4} label="Dragger" name="dragger" />
-
-      <ProForm.Group title="日期相关分组">
-        <ProFormDatePicker name="date" label="日期" />
-        <ProFormDatePicker
-          name="date"
-          fieldProps={{
-            format: 'YY-MM',
-          }}
-          label="年月"
-        />
-        <ProFormTimePicker name="time" label="时间" />
-        <ProFormTimePicker.RangePicker name="timeRange" label="时间区间" />
-        <ProFormDatePicker.Week name="dateWeek" label="周" />
-        <ProFormDatePicker.Month name="dateMonth" label="月" />
-        <ProFormDatePicker.Quarter name="dateQuarter" label="季度" />
-        <ProFormDatePicker.Year name="dateYear" label="年" />
-        <ProFormDateTimePicker
-          name="dateTime"
-          label="日期时间"
-          fieldProps={{
-            format: (value) => value.format('YYYY-MM-DD'),
-          }}
-        />
-        <ProFormDateRangePicker name="dateRange" label="日期区间" />
-        <ProFormDateTimeRangePicker name="dateTimeRange" label="日期时间区间" />
-      </ProForm.Group>
-      <ProForm.Group title="其他相关分组">
-        <ProForm.Item label="互相依赖的表单">
-          <ProFormDependency name={['list']}>
-            {({ list }) => {
-              return <div>{JSON.stringify(list, null, 2)}</div>;
-            }}
-          </ProFormDependency>
-        </ProForm.Item>
-        <ProFormFieldSet name="list" label="组件列表">
-          <ProFormText width="md" />
-          <ProFormSelect
-            width="md"
-            request={async () => [
-              { label: '全部', value: 'all' },
-              { label: '未解决', value: 'open' },
-              { label: '已解决', value: 'closed' },
-              { label: '解决中', value: 'processing' },
-            ]}
-            name="useMode"
-            label="合同约定生效方式"
-          />
-          <ProFormText width="md" />
-        </ProFormFieldSet>
-
-        <ProFormFieldSet
-          name="list"
-          label="组件列表- Input.Group"
-          type="group"
-          rules={[
-            {
-              validator: (_, value) => {
-                const [name, name1, name2] = value || [];
-                if (!name) {
-                  throw new Error('第一个值不能为空');
-                }
-                if (!name1) {
-                  throw new Error('第二个值不能为空');
-                }
-                if (!name2) {
-                  throw new Error('第三个值不能为空');
-                }
-              },
-            },
-          ]}
-          transform={(value: any) => ({
-            list: value,
-            startTime: value[0],
-            endTime: value[1],
-          })}
-        >
-          <ProFormText width="md" />
-          <ProFormText width="md" />
-          <ProFormText width="md" />
-        </ProFormFieldSet>
-
-        <ProFormFieldSet
-          name="list"
-          label="组件列表"
-          transform={(value: any) => ({
-            list: value,
-            startTime: value[0],
-            endTime: value[1],
-          })}
-        >
-          <ProFormText width="md" />
-          -
-          <ProFormText width="md" />
-          -
-          <ProFormText width="md" />
-        </ProFormFieldSet>
-      </ProForm.Group>
-    </ProForm>
-  </div>
-);
-
-export default Demo;