@regenbio/regenbio-components-react 1.2.16 → 1.2.18

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

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

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

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

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

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

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

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

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