@regenbio/regenbio-components-react 1.2.14 → 1.2.16

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

@@ -0,0 +1,50 @@
+---
+title: StepsForm
+order: 1
+atomId: StepsForm
+nav:
+  title: Components
+---
+
+# StepsForm
+
+StepsForm manages the data of sub forms through a Provider, each word form is a complete set of data that is combined in StepsForm to form the final data. It also comes with a progress bar and a related API to manage the progress bar.
+
+> StepsForm inherits from Form.Provider, see the documentation [here](https://ant.design/components/form/#Form.Provider), the value of the transformed moment is a function provided by ProForm, so `onFormFinish` and `onFormChange` where the values are untransformed.
+
+## Step-by-Step Forms
+
+<code src="./demos/steps-from.tsx" ></code>
+
+## Step-by-Step Forms - Multi-Card
+
+<code src="./demos/multi-card-step-form.tsx"  background="var(--main-bg-color)" ></code>
+
+## Step-by-Step Forms - Works with Modal
+
+<code src="./demos/modal-step-form.tsx"  background="var(--main-bg-color)" ></code>
+
+## StepForm in edit scene
+
+<code src="./demos/add-or-edit-step-form.tsx" oldtitle="自定义分步表单按钮"></code>
+
+## StepsForm
+
+| Parameters | Description | Type | Default |
+| --- | --- | --- | --- |
+| current | The number of steps in the current form, starting from `0` | `number` | 0 |
+| onCurrentChange | current The event that changed | `(current:number)=>void` | - |
+| onFinish | Triggered when the last step of the form was submitted successfully | `(values:T)=>void` | - |
+| stepsProps | StepsForm's own props for Steps, used in the same way as [antd](https://ant.design/components/steps/), but without the current and onChange | [ props](https://ant.design/components/steps/#API) | - |
+| stepFormRender | Customize the currently displayed form, return dom inside the form | `(form) => ReactNode` | - |
+| stepsFormRender | Customize the entire form area, returning the dom on the outside of the form | `(form,submitter) => ReactNode` | - |
+| stepsRender | Customize the stepsizer | `(steps,dom)=> ReactNode` | - |
+| formRef | A reference to the StepForm action for custom triggering | `MutableRefObject<FormInstance>` | - |
+
+### StepForm
+
+Exactly the same as [ProForm](/components/form), except that onFinish supports Promise, so if it returns `false`, it won't jump to the next step.
+
+| Parameters | Description | Type | Default |
+| --- | --- | --- | --- |
+| onFinish | form submit success trigger | `(values:T)=>Promise<false>` | - |

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

@@ -0,0 +1,56 @@
+---
+title: StepsForm - 分步表单
+atomId: StepsForm
+order: 1
+---
+
+# StepsForm - 分步表单
+
+StepsForm 通过 Provider 来管理子表单的数据，每个子表单都是完整的数据，在 StepsForm 组合成最后的数据。同时自带了一个进度条和管理进度条的相关 API.
+
+> StepsForm 继承了 Form.Provider ，相关文档可以看[这里](https://ant.design/components/form-cn/#Form.Provider)，转化 moment 的值是 ProForm 提供的功能，所以 `onFormFinish` 和 `onFormChange` 其中的值都是未经转化的。
+
+## 分步表单
+
+<code src="./demos/steps-from.tsx" title="分步表单"></code>
+
+## 分步表单垂直模式
+
+<code src="./demos/steps-form-vertical.tsx" title="分步表单垂直模式"></code>
+
+## 自定义分步表单按钮
+
+<code src="./demos/customize-steps-from.tsx" title="自定义分步表单按钮"></code>
+
+## 分步表单 - 多卡片
+
+<code src="./demos/multi-card-step-form.tsx"  background="var(--main-bg-color)" title="分步表单-多卡片"></code>
+
+## 分步表单 - 与 Modal 配合使用
+
+<code src="./demos/modal-step-form.tsx"  background="var(--main-bg-color)" title="分步表单-与 Modal 配合使用"></code>
+
+## 编辑场景下的分步表单
+
+<code src="./demos/add-or-edit-step-form.tsx" title="自定义分步表单按钮"></code>
+
+## StepsForm
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| current | 当前表单的步骤数，从 `0` 开始 | `number` | 0 |
+| onCurrentChange | current 发生改变的事件 | `(current:number)=>void` | - |
+| onFinish | 表单最后一步提交成功触发，如果返回`true`就会自动重置表单（包括`StepForm`变回第一步） | `(values:T)=>void \| boolean` | - |
+| stepsProps | StepsForm 自带的 Steps 的 props，使用方式与 [antd](https://ant.design/components/steps-cn/) 相同，但是去掉了 current 和 onChange | [props](https://ant.design/components/steps-cn/#API) | - |
+| stepFormRender | 自定义当前展示的表单，返回 dom 在表单内部 | `(form) => ReactNode` | - |
+| stepsFormRender | 自定义整个表单区域，返回的 dom 在表单的外部 | `(form,submitter) => ReactNode` | - |
+| stepsRender | 自定义步骤器 | `(steps,dom)=>ReactNode` | - |
+| formRef | StepForm action 的引用，便于自定义触发 | `MutableRefObject<FormInstance>` | - |
+
+### StepForm
+
+与 [ProForm](/components/form) 完全相同，只是 onFinish 支持了 Promise，如果返回 `false`, 就不会跳转下一步。
+
+| 参数     | 说明             | 类型                         | 默认值 |
+| -------- | ---------------- | ---------------------------- | ------ |
+| onFinish | 表单提交成功触发 | `(values:T)=>Promise<false>` | -      |

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

@@ -0,0 +1,144 @@
+import { proTheme, useIntl } from '@ant-design/pro-provider';
+import type { ButtonProps } from 'antd';
+import { Button, Form } from 'antd';
+import omit from 'omit.js';
+import React from 'react';
+
+/** @name 用于配置操作栏 */
+export type SearchConfig = {
+  /** @name 重置按钮的文本 */
+  resetText?: React.ReactNode;
+  /** @name 提交按钮的文本 */
+  submitText?: React.ReactNode;
+};
+
+export type SubmitterProps<T = Record<string, any>> = {
+  /** @name 提交方法 */
+  onSubmit?: (value?: T) => void;
+  /** @name 重置方法 */
+  onReset?: (value?: T) => void;
+  /** @name 搜索的配置，一般用来配置文本 */
+  searchConfig?: SearchConfig;
+  /** @name 提交按钮的 props */
+  submitButtonProps?: false | (ButtonProps & { preventDefault?: boolean });
+  /** @name 重置按钮的 props */
+  resetButtonProps?: false | (ButtonProps & { preventDefault?: boolean });
+  /** @name 自定义操作的渲染 */
+  render?:
+    | ((
+        props: SubmitterProps &
+          T & {
+            submit: () => void;
+            reset: () => void;
+          },
+        dom: JSX.Element[],
+      ) => React.ReactNode[] | React.ReactNode | false)
+    | false;
+};
+
+/**
+ * FormFooter 的组件，可以自动进行一些配置
+ *
+ * @param props
+ */
+
+const Submitter: React.FC<SubmitterProps> = (props) => {
+  const intl = useIntl();
+  const form = Form.useFormInstance();
+  if (props.render === false) {
+    return null;
+  }
+
+  const {
+    onSubmit,
+    render,
+    onReset,
+    searchConfig = {},
+    submitButtonProps,
+    resetButtonProps,
+  } = props;
+
+  const { token } = proTheme.useToken();
+
+  const submit = () => {
+    form.submit();
+    onSubmit?.();
+  };
+
+  const reset = () => {
+    form.resetFields();
+    onReset?.();
+  };
+
+  const {
+    submitText = intl.getMessage('tableForm.submit', '提交'),
+    resetText = intl.getMessage('tableForm.reset', '重置'),
+  } = searchConfig;
+  /** 默认的操作的逻辑 */
+  const dom = [];
+
+  if (resetButtonProps !== false) {
+    dom.push(
+      <Button
+        {...omit(resetButtonProps, ['preventDefault'] as any)}
+        key="rest"
+        onClick={(e) => {
+          if (!resetButtonProps?.preventDefault) reset();
+          resetButtonProps?.onClick?.(
+            e as React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          );
+        }}
+      >
+        {resetText}
+      </Button>,
+    );
+  }
+
+  if (submitButtonProps !== false) {
+    dom.push(
+      <Button
+        type="primary"
+        {...omit(submitButtonProps || {}, ['preventDefault'])}
+        key="submit"
+        onClick={(e) => {
+          if (!submitButtonProps?.preventDefault) submit();
+          submitButtonProps?.onClick?.(
+            e as React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          );
+        }}
+      >
+        {submitText}
+      </Button>,
+    );
+  }
+
+  const renderDom = render
+    ? render({ ...props, form, submit, reset }, dom)
+    : dom;
+  if (!renderDom) {
+    return null;
+  }
+
+  if (Array.isArray(renderDom)) {
+    if (renderDom?.length < 1) {
+      return null;
+    }
+    if (renderDom?.length === 1) {
+      return renderDom[0] as JSX.Element;
+    }
+    return (
+      <div
+        style={{
+          display: 'flex',
+          gap: token.marginXS,
+          alignItems: 'center',
+        }}
+      >
+        {renderDom}
+      </div>
+    );
+  }
+  return renderDom as JSX.Element;
+};
+
+export default Submitter;

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

@@ -0,0 +1,45 @@
+import type { SwitchProps } from 'antd';
+import React from 'react';
+import type { ProFormFieldItemProps } from '../../typing';
+import ProField from '../Field';
+
+export type ProFormSwitchProps = Omit<
+  ProFormFieldItemProps<SwitchProps, HTMLElement>,
+  'emptyText'
+> & {
+  checkedChildren?: SwitchProps['checkedChildren'];
+  unCheckedChildren?: SwitchProps['unCheckedChildren'];
+};
+
+/**
+ * @zh-cn 单选 Switch
+ * @en-us Single Choice Switch
+ */
+const ProFormSwitch: React.FC<ProFormSwitchProps> = React.forwardRef(
+  (
+    { fieldProps, unCheckedChildren, checkedChildren, proFieldProps, ...rest },
+    ref: any,
+  ) => {
+    return (
+      <ProField
+        valueType="switch"
+        fieldProps={{
+          unCheckedChildren,
+          checkedChildren,
+          ...fieldProps,
+        }}
+        ref={ref}
+        valuePropName="checked"
+        proFieldProps={proFieldProps}
+        filedConfig={{
+          valuePropName: 'checked',
+          ignoreWidth: true,
+          customLightMode: true,
+        }}
+        {...rest}
+      />
+    );
+  },
+);
+
+export default ProFormSwitch;

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

@@ -0,0 +1,176 @@
+import { useMountMergeState } from '@ant-design/pro-utils';
+import { Form, Popover, PopoverProps, type InputProps } from 'antd';
+import type { InputRef, PasswordProps } from 'antd/lib/input';
+import omit from 'omit.js';
+import React, { useState } from 'react';
+import type { ProFormFieldItemProps } from '../../typing';
+import ProField from '../Field';
+
+const valueType = 'text' as const;
+/**
+ * 文本组件
+ *
+ * @param
+ */
+const ProFormText: React.FC<ProFormFieldItemProps<InputProps, InputRef>> = ({
+  fieldProps,
+  proFieldProps,
+  ...rest
+}: ProFormFieldItemProps<InputProps, InputRef>) => {
+  return (
+    <ProField
+      valueType={valueType}
+      fieldProps={fieldProps}
+      filedConfig={
+        {
+          valueType,
+        } as const
+      }
+      proFieldProps={proFieldProps}
+      {...rest}
+    />
+  );
+};
+
+export type PasswordStatus = 'ok' | 'pass' | 'poor' | undefined;
+
+export type PassWordStrengthProps = {
+  statusRender?: (value?: string) => React.ReactNode;
+  popoverProps?: PopoverProps;
+  strengthText?: React.ReactNode;
+};
+
+const PassWordStrength: React.FC<
+  PassWordStrengthProps & {
+    name?: string[];
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    children: React.ReactNode;
+  }
+> = (props) => {
+  const [open, setOpen] = useMountMergeState<boolean>(props.open || false, {
+    value: props.open,
+    onChange: props.onOpenChange,
+  });
+  return (
+    <Form.Item shouldUpdate noStyle>
+      {(form) => {
+        const value = form.getFieldValue(props.name || []) as string;
+        return (
+          <Popover
+            getPopupContainer={(node) => {
+              if (node && node.parentNode) {
+                return node.parentNode as HTMLElement;
+              }
+              return node;
+            }}
+            onOpenChange={(e) => setOpen(e)}
+            content={
+              <div
+                style={{
+                  padding: '4px 0',
+                }}
+              >
+                {props.statusRender?.(value)}
+                {props.strengthText ? (
+                  <div
+                    style={{
+                      marginTop: 10,
+                    }}
+                  >
+                    <span>{props.strengthText}</span>
+                  </div>
+                ) : null}
+              </div>
+            }
+            overlayStyle={{
+              width: 240,
+            }}
+            placement="rightTop"
+            {...props.popoverProps}
+            open={open}
+          >
+            {props.children}
+          </Popover>
+        );
+      }}
+    </Form.Item>
+  );
+};
+
+const Password: React.FC<
+  ProFormFieldItemProps<PasswordProps & PassWordStrengthProps, InputRef>
+> = ({
+  fieldProps,
+  proFieldProps,
+  ...rest
+}: ProFormFieldItemProps<PasswordProps & PassWordStrengthProps, InputRef>) => {
+  const [open, setOpen] = useState<boolean>(false);
+
+  if (fieldProps?.statusRender && rest.name) {
+    return (
+      <PassWordStrength
+        name={rest.name}
+        statusRender={fieldProps?.statusRender}
+        popoverProps={fieldProps?.popoverProps}
+        strengthText={fieldProps?.strengthText}
+        open={open}
+        onOpenChange={setOpen}
+      >
+        <div>
+          <ProField
+            valueType="password"
+            fieldProps={{
+              ...omit(fieldProps, [
+                'statusRender',
+                'popoverProps',
+                'strengthText',
+              ]),
+              onBlur: (e: any) => {
+                fieldProps?.onBlur?.(e);
+                setOpen(false);
+              },
+              onClick: (e: any) => {
+                fieldProps?.onClick?.(e);
+                setOpen(true);
+              },
+            }}
+            proFieldProps={proFieldProps}
+            filedConfig={
+              {
+                valueType,
+              } as const
+            }
+            {...rest}
+          />
+        </div>
+      </PassWordStrength>
+    );
+  }
+
+  return (
+    <ProField
+      valueType="password"
+      fieldProps={fieldProps}
+      proFieldProps={proFieldProps}
+      filedConfig={
+        {
+          valueType,
+        } as const
+      }
+      {...rest}
+    />
+  );
+};
+
+const WrappedProFormText: typeof ProFormText & {
+  Password: typeof Password;
+} = ProFormText as any;
+
+WrappedProFormText.Password = Password;
+
+// @ts-ignore
+// eslint-disable-next-line no-param-reassign
+WrappedProFormText.displayName = 'ProFormComponent';
+
+export default WrappedProFormText;

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

@@ -0,0 +1,27 @@
+import type { TextAreaProps } from 'antd/lib/input';
+import type { TextAreaRef } from 'antd/lib/input/TextArea';
+import React from 'react';
+import type { ProFormFieldItemProps } from '../../typing';
+import ProField from '../Field';
+
+/**
+ * 文本选择组件
+ *
+ * @param
+ */
+const ProFormTextArea: React.ForwardRefRenderFunction<
+  any,
+  ProFormFieldItemProps<TextAreaProps, TextAreaRef>
+> = ({ fieldProps, proFieldProps, ...rest }, ref) => {
+  return (
+    <ProField
+      ref={ref}
+      valueType="textarea"
+      fieldProps={fieldProps}
+      proFieldProps={proFieldProps}
+      {...rest}
+    />
+  );
+};
+
+export default React.forwardRef(ProFormTextArea);

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

@@ -0,0 +1,72 @@
+import { dateArrayFormatter } from '@ant-design/pro-utils';
+import type { DatePickerProps, 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 = 'time' as const;
+
+/** 时间区间选择器 */
+const TimeRangePicker: React.FC<ProFormFieldItemProps<RangePickerProps>> =
+  React.forwardRef(({ fieldProps, proFieldProps, ...rest }, ref: any) => {
+    const context = useContext(FieldContext);
+    return (
+      <ProField
+        ref={ref}
+        fieldProps={{
+          getPopupContainer: context.getPopupContainer,
+          ...fieldProps,
+        }}
+        valueType="timeRange"
+        proFieldProps={proFieldProps}
+        filedConfig={
+          {
+            valueType: 'timeRange',
+            customLightMode: true,
+            lightFilterLabelFormatter: (value) =>
+              dateArrayFormatter(value, 'HH:mm:ss'),
+          } as const
+        }
+        {...rest}
+      />
+    );
+  });
+
+/**
+ * 时间选择组件
+ *
+ * @param
+ */
+const ProFormTimePicker: React.FC<ProFormFieldItemProps<DatePickerProps>> = ({
+  fieldProps,
+  proFieldProps,
+  ...rest
+}) => {
+  const context = useContext(FieldContext);
+  return (
+    <ProField
+      fieldProps={{
+        getPopupContainer: context.getPopupContainer,
+        ...fieldProps,
+      }}
+      valueType={valueType}
+      proFieldProps={proFieldProps}
+      filedConfig={
+        {
+          customLightMode: true,
+          valueType,
+        } as const
+      }
+      {...rest}
+    />
+  );
+};
+
+const WrappedProFormTimePicker: typeof ProFormTimePicker & {
+  RangePicker: typeof TimeRangePicker;
+} = ProFormTimePicker as any;
+
+WrappedProFormTimePicker.RangePicker = TimeRangePicker;
+
+export default WrappedProFormTimePicker;

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

@@ -0,0 +1,49 @@
+import type { TreeSelectProps } from 'antd';
+import type { RefSelectProps } from 'antd/lib/select';
+import React from 'react';
+import type {
+  ProFormFieldItemProps,
+  ProFormFieldRemoteProps,
+} from '../../typing';
+import ProFormField from '../Field';
+
+export type ProFormTreeSelectProps<T = any> = ProFormFieldItemProps<
+  TreeSelectProps<T> & {
+    /**
+     * 当搜索关键词发生变化时是否请求远程数据
+     *
+     * @default true
+     */
+    fetchDataOnSearch?: boolean;
+  },
+  RefSelectProps
+> &
+  ProFormFieldRemoteProps;
+
+/**
+ * 级联选择框
+ *
+ * @param
+ */
+const ProFormTreeSelect: React.ForwardRefRenderFunction<
+  any,
+  ProFormTreeSelectProps<any>
+> = ({ fieldProps, request, params, proFieldProps, ...rest }, ref) => {
+  return (
+    <ProFormField
+      valueType="treeSelect"
+      fieldProps={fieldProps}
+      ref={ref}
+      request={request}
+      params={params}
+      filedConfig={{ customLightMode: true }}
+      proFieldProps={proFieldProps}
+      {...rest}
+    />
+  );
+};
+
+const WarpProFormTreeSelect: React.FC<ProFormTreeSelectProps> =
+  React.forwardRef(ProFormTreeSelect);
+
+export default WarpProFormTreeSelect;