@regenbio/regenbio-components-react 1.2.14 → 1.2.16

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

@@ -0,0 +1,39 @@
+import { dateArrayFormatter } from '@ant-design/pro-utils';
+import { RangePickerProps } from 'antd/es/date-picker';
+import React, { useContext } from 'react';
+import FieldContext from '../../FieldContext';
+import type { ProFormFieldItemProps } from '../../typing';
+import ProField from '../Field';
+
+const valueType = 'dateTimeRange' as const;
+
+/**
+ * 日期时间区间选择组件
+ *
+ * @param
+ */
+const ProFormDateTimeRangePicker: React.FC<
+  ProFormFieldItemProps<RangePickerProps>
+> = React.forwardRef(({ fieldProps, proFieldProps, ...rest }, ref) => {
+  const context = useContext(FieldContext);
+  return (
+    <ProField
+      ref={ref}
+      fieldProps={{
+        getPopupContainer: context.getPopupContainer,
+        ...fieldProps,
+      }}
+      valueType={valueType}
+      proFieldProps={proFieldProps}
+      filedConfig={{
+        valueType,
+        customLightMode: true,
+        lightFilterLabelFormatter: (value) =>
+          dateArrayFormatter(value, 'YYYY-MM-DD HH:mm:ss'),
+      }}
+      {...rest}
+    />
+  );
+});
+
+export default ProFormDateTimeRangePicker;

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

@@ -0,0 +1,38 @@
+import { dateArrayFormatter } from '@ant-design/pro-utils';
+import type { RangePickerProps } from 'antd/lib/date-picker';
+import React, { useContext } from 'react';
+import FieldContext from '../../FieldContext';
+import type { ProFormFieldItemProps } from '../../typing';
+import ProField from '../Field';
+
+const valueType = 'dateWeekRange' as const;
+
+/**
+ * 周区间选择组件
+ *
+ * @param
+ */
+const DateWeekRangePicker: React.FC<ProFormFieldItemProps<RangePickerProps>> =
+  React.forwardRef(({ fieldProps, proFieldProps, ...rest }, ref) => {
+    const context = useContext(FieldContext);
+    return (
+      <ProField
+        ref={ref}
+        fieldProps={{
+          getPopupContainer: context.getPopupContainer,
+          ...fieldProps,
+        }}
+        valueType={valueType}
+        proFieldProps={proFieldProps}
+        filedConfig={{
+          valueType,
+          customLightMode: true,
+          lightFilterLabelFormatter: (value) =>
+            dateArrayFormatter(value, fieldProps?.format || 'YYYY-MM-DD'),
+        }}
+        {...rest}
+      />
+    );
+  });
+
+export default DateWeekRangePicker;

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

@@ -0,0 +1,38 @@
+import { dateArrayFormatter } from '@ant-design/pro-utils';
+import type { RangePickerProps } from 'antd/lib/date-picker';
+import React, { useContext } from 'react';
+import FieldContext from '../../FieldContext';
+import type { ProFormFieldItemProps } from '../../typing';
+import ProField from '../Field';
+
+const valueType = 'dateYearRange' as const;
+
+/**
+ * 季度份区间选择组件
+ *
+ * @param
+ */
+const DateYearRangePicker: React.FC<ProFormFieldItemProps<RangePickerProps>> =
+  React.forwardRef(({ fieldProps, proFieldProps, ...rest }, ref) => {
+    const context = useContext(FieldContext);
+    return (
+      <ProField
+        ref={ref}
+        fieldProps={{
+          getPopupContainer: context.getPopupContainer,
+          ...fieldProps,
+        }}
+        valueType={valueType}
+        proFieldProps={proFieldProps}
+        filedConfig={{
+          valueType,
+          customLightMode: true,
+          lightFilterLabelFormatter: (value) =>
+            dateArrayFormatter(value, fieldProps?.format || 'YYYY'),
+        }}
+        {...rest}
+      />
+    );
+  });
+
+export default DateYearRangePicker;

package/packages/form/src/components/Dependency/demos/dependency.tsx

@@ -0,0 +1,112 @@
+import {
+  ProForm,
+  ProFormDependency,
+  ProFormList,
+  ProFormSelect,
+  ProFormText,
+} from '@ant-design/pro-components';
+
+const Demo = () => {
+  return (
+    <ProForm>
+      <ProFormSelect
+        options={[
+          {
+            value: 'select',
+            label: '选择框',
+          },
+          {
+            value: 'input',
+            label: '输入框',
+          },
+        ]}
+        width="xs"
+        name="globalUseMode"
+        label="全局生效方式组件的类型"
+      />
+      <ProFormList
+        name={['default', 'users']}
+        label="用户信息"
+        initialValue={[
+          {
+            name: '1111',
+          },
+        ]}
+        alwaysShowItemLabel
+      >
+        <ProForm.Group key="group">
+          <ProFormSelect
+            options={[
+              {
+                value: 'select',
+                label: '选择框',
+              },
+              {
+                value: 'input',
+                label: '输入框',
+              },
+            ]}
+            width="xs"
+            name="useMode"
+            label="生效方式组件的类型"
+          />
+          <ProFormDependency name={['useMode']}>
+            {({ useMode }) => {
+              if (useMode === 'select') {
+                return (
+                  <ProFormSelect
+                    options={[
+                      {
+                        value: 'chapter',
+                        label: '盖章后生效',
+                      },
+                    ]}
+                    width="md"
+                    name="function"
+                    label="生效方式"
+                  />
+                );
+              }
+              return (
+                <ProFormText width="md" name="function" label="生效方式" />
+              );
+            }}
+          </ProFormDependency>
+
+          <ProFormDependency
+            key="globalUseMode"
+            name={['globalUseMode']}
+            ignoreFormListField
+          >
+            {({ globalUseMode }) => {
+              if (globalUseMode === 'select') {
+                return (
+                  <ProFormSelect
+                    options={[
+                      {
+                        value: 'chapter',
+                        label: '盖章后生效',
+                      },
+                    ]}
+                    width="md"
+                    name="gfunction"
+                    label="外层联动生效方式"
+                  />
+                );
+              }
+              return (
+                <ProFormText
+                  width="md"
+                  name="gfunction"
+                  label="外层联动生效方式"
+                />
+              );
+            }}
+          </ProFormDependency>
+        </ProForm.Group>
+      </ProFormList>
+    </ProForm>
+  );
+};
+
+export default Demo;

package/packages/form/src/components/Dependency/demos/dependency2.tsx

@@ -0,0 +1,106 @@
+import {
+  ProForm,
+  ProFormDependency,
+  ProFormGroup,
+  ProFormList,
+  ProFormText,
+} from '@ant-design/pro-components';
+import { Form } from 'antd';
+import type { NamePath } from 'antd/lib/form/interface';
+
+const Demo = () => {
+  const initialValues = {
+    a: 1,
+    b: 2,
+    c: {
+      a: 3,
+      b: 4,
+      c: {
+        a: 5,
+      },
+      d: [{ a: 6, b: 7 }],
+      e: [{ a: 8, b: 9 }],
+    },
+  };
+  const depName1: NamePath[] = [
+    'a',
+    'b',
+    ['c', 'a'],
+    ['c', 'b'],
+    ['c', 'c', 'a'],
+    ['c', 'd'],
+    ['c', 'e'],
+  ];
+  const depName2: NamePath[] = ['a', 'b', ['c', 'a']];
+  const depName3: NamePath[] = ['a', 'b', ['c', 'a']];
+  return (
+    <ProForm initialValues={initialValues}>
+      <ProFormGroup>
+        <ProFormText name="a" label="a" />
+        <ProFormText name="b" label="b" />
+        <ProFormText name={['c', 'a']} label="c.a" />
+        <ProFormText name={['c', 'b']} label="c.b" />
+        <ProFormText name={['c', 'c', 'a']} label="c.c.a" />
+        <ProFormGroup title="c.d">
+          <ProFormList name={['c', 'd']}>
+            <ProFormGroup key="group">
+              <ProFormText name="a" label="a" />
+              <ProFormText name="b" label="b" />
+              <ProFormDependency name={depName3}>
+                {(depValues) => (
+                  <Form.Item
+                    label={`搜集依赖值（情形3） <ProFormDependency name={${JSON.stringify(
+                      depName3,
+                    )}}>`}
+                    extra="a, b, c.a取自局部"
+                  >
+                    <pre>
+                      <code>{JSON.stringify(depValues, null, 2)}</code>
+                    </pre>
+                  </Form.Item>
+                )}
+              </ProFormDependency>
+            </ProFormGroup>
+          </ProFormList>
+        </ProFormGroup>
+        <ProFormGroup title="c.e">
+          <ProFormList name={['c', 'e']}>
+            <ProFormGroup key="group">
+              <ProFormText name="a" label="a" />
+              <ProFormText name="b" label="b" />
+              <ProFormDependency name={depName2} ignoreFormListField>
+                {(depValues) => (
+                  <Form.Item
+                    label={`搜集依赖值（情形2) <ProFormDependency name={${JSON.stringify(
+                      depName2,
+                    )}} ignoreFormListField>`}
+                    extra="a, b, c.a取自全局"
+                  >
+                    <pre>
+                      <code>{JSON.stringify(depValues)}</code>
+                    </pre>
+                  </Form.Item>
+                )}
+              </ProFormDependency>
+            </ProFormGroup>
+          </ProFormList>
+        </ProFormGroup>
+      </ProFormGroup>
+      <ProFormGroup
+        title={`收集依赖值（情形1) <ProFormDependency name={${JSON.stringify(
+          depName1,
+        )}}>`}
+      >
+        <ProFormDependency name={depName1}>
+          {(depValues) => (
+            <pre>
+              <code>{JSON.stringify(depValues)}</code>
+            </pre>
+          )}
+        </ProFormDependency>
+      </ProFormGroup>
+    </ProForm>
+  );
+};
+
+export default Demo;

package/packages/form/src/components/Dependency/index.en-US.md

@@ -0,0 +1,54 @@
+---
+title: ProFormDependency
+order: 1
+atomId: ProFormDependency
+nav:
+  title: component
+---
+
+# ProFormDependency - Data Linkage
+
+Data linkage in Form is very common, so we encapsulate a component for data processing.
+
+## ProFormDependency
+
+ProFormDependency is a simplified version of Form.Item. It has noStyle and shouldUpdate built in by default. We only need to configure the name to determine which data we rely on. ProFormDependency will automatically process the diff and extract the corresponding value from the form.
+
+The name parameter must be an array. If it is a nested structure, it can be configured like `name={['name', ['name2', 'text']]}`. The value of the configured name will be passed in renderProps . `name={['name', ['name2', 'text']]}` The value of the passed in values ​​is `{ name: string,name2: { text:string } }`.
+
+```tsx | pure
+<ProFormDependency name={['name']}>
+  {({ name }) => {
+    return (
+      <ProFormSelect
+        options={[
+          {
+            value: 'chapter',
+            label: 'It will take effect after stamping',
+          },
+        ]}
+        width="md"
+        name="useMode"
+        label={`The contract with "${name}" agreed on the effective method`}
+      />
+    );
+  }}
+</ProFormDependency>
+```
+
+## code example
+
+### Interdependent Forms
+
+<code src="./demos/dependency.tsx" oldtitle="ProForm.List"></code>
+
+### Get form dependency values
+
+The following examples demonstrate the order in which dependencies are evaluated in different situations:
+
+- `<ProFormDependency>`\*\* is not in\*\*`<ProFormList>`: according to the dependency declared by `name`, the value is taken from the global (case 1)
+- `<ProFormDependency>`\*\* in \*\*`<ProFormList>`
+  - `ignoreFormListField` of `<ProFormDependency>` is `true`: according to the dependency declared by `name`, the value is taken from the global (case 2)
+  - `ignoreFormListField` of `<ProFormDependency>` is `false`: according to the dependency declared by `name`, the value is taken locally (case 3)
+
+<code src="./demos/dependency2.tsx" oldtitle="ProForm.List"></code>

package/packages/form/src/components/Dependency/index.md

@@ -0,0 +1,52 @@
+---
+title: ProFormDependency - 数据联动
+order: 1
+atomId: ProFormDependency
+---
+
+# 数据联动
+
+Form 中的数据联动非常常见，所以我们封装了一个组件来进行数据处理。
+
+## ProFormDependency
+
+ProFormDependency 是一个简化版本的 Form.Item，它默认内置了 noStyle 与 shouldUpdate，我们只需要配置 name 来确定我们依赖哪个数据，ProFormDependency 会自动处理 diff 和并且从表单中提取相应的值。
+
+name 参数必须要是一个数组，如果是嵌套的结构可以这样配置 `name={['name', ['name2', 'text']]}`。配置的 name 的值会在 renderProps 中传入。`name={['name', ['name2', 'text']]}` 传入的 values 的值 为 `{ name: string,name2: { text:string } }`。
+
+```tsx | pure
+<ProFormDependency name={['name']}>
+  {({ name }) => {
+    return (
+      <ProFormSelect
+        options={[
+          {
+            value: 'chapter',
+            label: '盖章后生效',
+          },
+        ]}
+        width="md"
+        name="useMode"
+        label={`与《${name}》合同约定生效方式`}
+      />
+    );
+  }}
+</ProFormDependency>
+```
+
+## 代码示例
+
+### 互相依赖表单
+
+<code src="./demos/dependency.tsx" title="互相依赖表单" ></code>
+
+### 获取表单依赖值
+
+下面例子演示了不同情形下的依赖取值顺序：
+
+- `<ProFormDependency>`**不在**`<ProFormList>`中：根据`name`声明的依赖项，从全局取值（情形 1）
+- `<ProFormDependency>`**在**`<ProFormList>`中
+  - `<ProFormDependency>`的`ignoreFormListField`为`true`：根据`name`声明的依赖项，从全局取值（情形 2）
+  - `<ProFormDependency>`的`ignoreFormListField`为`false`：根据`name`声明的依赖项，从局部取值（情形 3）
+
+<code src="./demos/dependency2.tsx" title="获取表单依赖值"></code>

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

@@ -0,0 +1,111 @@
+import { isDeepEqualReact, merge, ProFormContext } from '@ant-design/pro-utils';
+import type { FormItemProps } from 'antd';
+import { Form } from 'antd';
+import type { NamePath } from 'antd/lib/form/interface';
+import get from 'rc-util/lib/utils/get';
+import set from 'rc-util/lib/utils/set';
+import { useContext, useMemo } from 'react';
+import type { ProFormInstance } from '../../BaseForm';
+import { FormListContext } from '../List';
+
+declare type RenderChildren<Values = any> = (
+  values: Record<string, any>,
+  form: ProFormInstance<Values>,
+) => React.ReactNode;
+
+export type ProFormDependencyProps<T = Record<string, any>> = Omit<
+  FormItemProps<any>,
+  'name' | 'noStyle' | 'children' | 'label'
+> & {
+  name: NamePath[];
+  originDependencies?: NamePath[];
+  ignoreFormListField?: boolean;
+  children: RenderChildren<T>;
+};
+
+const ProFormDependency = <T,>({
+  name: nameList,
+  originDependencies = nameList,
+  children,
+  ignoreFormListField,
+  ...rest
+}: ProFormDependencyProps<T>) => {
+  const context = useContext(ProFormContext);
+  // ProFromList 的 field，里面有name和key
+  const formListField = useContext(FormListContext);
+
+  // flatten each name into an (string | number)[]
+  const flattenNames = useMemo(() => {
+    return nameList.map((itemName: NamePath) => {
+      const name = [itemName];
+
+      // ignoreFormListField为 true 或 formListField.name === undefined 时
+      // 应从全局取值，要将 names 中各项的路径前缀(formListField.listName)忽略
+      if (
+        !ignoreFormListField &&
+        formListField.name !== undefined &&
+        formListField.listName?.length
+      ) {
+        name.unshift(formListField.listName);
+      }
+
+      return name.flat(1);
+    });
+  }, [
+    formListField.listName,
+    formListField.name,
+    ignoreFormListField,
+    nameList?.toString(),
+  ]);
+
+  return (
+    <Form.Item
+      {...rest}
+      noStyle
+      shouldUpdate={(prevValues, nextValues, info) => {
+        if (typeof rest.shouldUpdate === 'boolean') {
+          return rest.shouldUpdate;
+        } else if (typeof rest.shouldUpdate === 'function') {
+          return rest.shouldUpdate?.(prevValues, nextValues, info);
+        }
+
+        return flattenNames.some((name) => {
+          return !isDeepEqualReact(
+            get(prevValues, name),
+            get(nextValues, name),
+          );
+        });
+      }}
+    >
+      {(form) => {
+        let values: Record<string, any> = {} as Record<string, any>;
+        for (let i = 0; i < nameList.length; i++) {
+          const itemName = flattenNames[i],
+            itemOriginName = originDependencies[i];
+          const finalName = [itemOriginName].flat(1);
+          let value = context.getFieldFormatValueObject?.(itemName);
+          if (value && Object.keys(value).length) {
+            // transform 会生成多余的value，这里需要注入一下
+            values = merge({}, values, value);
+            if (get(value, itemName)) {
+              values = set(values, finalName, get(value, itemName));
+            }
+          } else {
+            value = form.getFieldValue?.(itemName);
+            if (typeof value !== 'undefined') {
+              values = set(values, finalName, value);
+            }
+          }
+        }
+        return children?.(values, {
+          ...form,
+          ...context,
+        } as ProFormInstance<any>);
+      }}
+    </Form.Item>
+  );
+};
+
+ProFormDependency.displayName = 'ProFormDependency';
+
+export default ProFormDependency;

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

@@ -0,0 +1,43 @@
+import type { InputNumberProps } from 'antd';
+import React from 'react';
+import type { ProFormFieldItemProps } from '../../typing';
+import ProFormField from '../Field';
+
+export type ProFormDigitProps = ProFormFieldItemProps<
+  InputNumberProps<number>
+> & {
+  min?: InputNumberProps['min'];
+  max?: InputNumberProps['max'];
+};
+/**
+ * 数组选择组件
+ *
+ * @param
+ */
+const ProFormDigit: React.ForwardRefRenderFunction<any, ProFormDigitProps> = (
+  { fieldProps, min, proFieldProps, max, ...rest },
+  ref,
+) => {
+  return (
+    <ProFormField
+      valueType="digit"
+      fieldProps={{
+        min,
+        max,
+        ...fieldProps,
+      }}
+      ref={ref}
+      filedConfig={{
+        defaultProps: {
+          width: '100%',
+        },
+      }}
+      proFieldProps={proFieldProps}
+      {...rest}
+    />
+  );
+};
+
+const ForwardRefProFormDigit = React.forwardRef(ProFormDigit);
+
+export default ForwardRefProFormDigit;

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

@@ -0,0 +1,51 @@
+import type { InputNumberProps } from 'antd';
+import React from 'react';
+import type { ProFormFieldItemProps } from '../../typing';
+import ProFormField from '../Field';
+
+export type Value = string | number | undefined;
+
+export type ValuePair = Value[];
+
+export type RangeInputNumberProps = Omit<
+  InputNumberProps<number>,
+  'value' | 'defaultValue' | 'onChange' | 'placeholder'
+> & {
+  value?: ValuePair;
+  defaultValue?: ValuePair;
+  onChange?: (value?: ValuePair) => void;
+};
+
+export type ProFormDigitRangeProps =
+  ProFormFieldItemProps<RangeInputNumberProps> & {
+    separator?: string;
+    separatorWidth?: number;
+  };
+/**
+ * 数字范围选择组件
+ *
+ * @param
+ */
+const ProFormDigit: React.ForwardRefRenderFunction<
+  any,
+  ProFormDigitRangeProps
+> = ({ fieldProps, proFieldProps, ...rest }, ref) => {
+  return (
+    <ProFormField
+      valueType="digitRange"
+      fieldProps={{
+        ...fieldProps,
+      }}
+      ref={ref}
+      filedConfig={{
+        defaultProps: {
+          width: '100%',
+        },
+      }}
+      proFieldProps={proFieldProps}
+      {...rest}
+    />
+  );
+};
+
+export default React.forwardRef(ProFormDigit);