@regenbio/regenbio-components-react 1.2.16 → 1.2.17

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

@@ -1,323 +0,0 @@
-import { CopyOutlined, DeleteOutlined } from '@ant-design/icons';
-import { useIntl } from '@ant-design/pro-provider';
-import { ProFormContext } from '@ant-design/pro-utils';
-import type { ColProps } from 'antd';
-import { ConfigProvider, Form } from 'antd';
-import type { LabelTooltipType } from 'antd/lib/form/FormItemLabel';
-import type {
-  FormListFieldData,
-  FormListOperation,
-  FormListProps,
-} from 'antd/lib/form/FormList';
-import type { NamePath } from 'antd/lib/form/interface';
-import classNames from 'classnames';
-
-import { noteOnce } from 'rc-util/lib/warning';
-import type { ReactNode } from 'react';
-import React, {
-  useContext,
-  useEffect,
-  useImperativeHandle,
-  useMemo,
-  useRef,
-} from 'react';
-import FieldContext from '../../FieldContext';
-import { useGridHelpers } from '../../helpers';
-import type { ProFormGridConfig } from '../../typing';
-import { ProFormListContainer } from './ListContainer';
-import type {
-  ChildrenItemFunction,
-  FormListActionGuard,
-  ProFromListCommonProps,
-} from './ListItem';
-import { useStyle } from './style';
-
-const FormListContext = React.createContext<
-  | (FormListFieldData & {
-      listName: NamePath;
-    })
-  | Record<string, any>
->({});
-
-export type FormListActionType<T = any> = FormListOperation & {
-  get: (index: number) => T | undefined;
-  getList: () => T[] | undefined;
-};
-
-export type ProFormListProps<T> = Omit<FormListProps, 'children' | 'rules'> &
-  ProFromListCommonProps & {
-    /**
-     * @name 列表的标签
-     */
-    label?: ReactNode;
-    /**
-     * @name 标题旁边的？号提示展示的信息
-     *
-     * @example 自定义提示信息
-     * <ProForm.Group title="标题"  tooltip="自定义提示信息">
-     *  @example 自定义Icon
-     * <ProForm.Group title="标题"  tooltip={{icon:<Info/>,title:自定义提示信息}}>
-     */
-    tooltip?: LabelTooltipType;
-    /**
-     * @name 行操作的钩子配置
-     *
-     * @example 阻止删除 actionGuard={{beforeAddRow:()=> return false}}
-     * @example 阻止新增 actionGuard={{beforeAddRow:()=> return false}}
-     */
-    actionGuard?: FormListActionGuard;
-    children?: ReactNode | ChildrenItemFunction;
-
-    /**
-     * @name 在最后增加一个 dom
-     *
-     * @example 自定义新增按钮
-     * fieldExtraRender={(fieldAction) => {<a onClick={()=>fieldAction.add({id:"xx"})}>新增</a>}}
-     */
-    fieldExtraRender?: (
-      fieldAction: FormListOperation,
-      meta: {
-        errors?: React.ReactNode[];
-        warnings?: React.ReactNode[];
-      },
-    ) => React.ReactNode;
-    /**
-     * @name 获取到 list 操作实例
-     * @description 可用删除，新增，移动等操作
-     *
-     * @example  actionRef?.current.add?.({},1);
-     * @example  actionRef?.current.remove?.(1);
-     * @example  actionRef?.current.move?.(1,2);
-     * @example  actionRef?.current.get?.(1);
-     * @example  actionRef?.current.getList?.();
-     */
-    actionRef?: React.MutableRefObject<FormListActionType<T> | undefined>;
-    /** 放在div上面的属性 */
-    style?: React.CSSProperties;
-    /**
-     * 数据新增成功回调
-     */
-    onAfterAdd?: (
-      ...params: [...Parameters<FormListOperation['add']>, number]
-    ) => void;
-    /**
-     * 数据移除成功回调
-     */
-    onAfterRemove?: (
-      ...params: [...Parameters<FormListOperation['remove']>, number]
-    ) => void;
-    /** 是否同时校验列表是否为空 */
-    isValidateList?: boolean;
-    /** 当 isValidateList 为 true 时执行为空提示 */
-    emptyListMessage?: string;
-    rules?: (Required<FormListProps>['rules'][number] & {
-      required?: boolean;
-    })[];
-    required?: boolean;
-    wrapperCol?: ColProps;
-    className?: string;
-    readonly?: boolean;
-  } & Pick<ProFormGridConfig, 'colProps' | 'rowProps'>;
-
-function ProFormList<T>(props: ProFormListProps<T>) {
-  const actionRefs = useRef<FormListOperation>();
-  const context = useContext(ConfigProvider.ConfigContext);
-  const listContext = useContext(FormListContext);
-  const baseClassName = context.getPrefixCls('pro-form-list');
-  // Internationalization
-  const intl = useIntl();
-  /** 从 context 中拿到的值 */
-  const { setFieldValueType } = React.useContext(FieldContext);
-
-  const {
-    transform,
-    actionRender,
-    creatorButtonProps,
-    label,
-    alwaysShowItemLabel,
-    tooltip,
-    creatorRecord,
-    itemRender,
-    rules,
-    itemContainerRender,
-    fieldExtraRender,
-    copyIconProps = {
-      Icon: CopyOutlined,
-      tooltipText: intl.getMessage('copyThisLine', '复制此项'),
-    },
-    children,
-    deleteIconProps = {
-      Icon: DeleteOutlined,
-      tooltipText: intl.getMessage('deleteThisLine', '删除此项'),
-    },
-    actionRef,
-    style,
-    prefixCls,
-    actionGuard,
-    min,
-    max,
-    colProps,
-    wrapperCol,
-    rowProps,
-    onAfterAdd,
-    onAfterRemove,
-    isValidateList = false,
-    emptyListMessage = '列表不能为空',
-    className,
-    containerClassName,
-    containerStyle,
-    readonly,
-    ...rest
-  } = props;
-
-  const { ColWrapper, RowWrapper } = useGridHelpers({ colProps, rowProps });
-
-  const proFormContext = useContext(ProFormContext);
-
-  // 处理 list 的嵌套
-  const name = useMemo(() => {
-    if (listContext.name === undefined) {
-      return [rest.name].flat(1);
-    }
-    return [listContext.name, rest.name].flat(1);
-  }, [listContext.name, rest.name]);
-
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  useImperativeHandle(
-    actionRef,
-    () =>
-      ({
-        ...actionRefs.current,
-        get: (index: number) => {
-          return proFormContext.formRef!.current!.getFieldValue([
-            ...name,
-            index,
-          ]);
-        },
-        getList: () =>
-          proFormContext.formRef!.current!.getFieldValue([...name]),
-      } as any),
-    [name, proFormContext.formRef],
-  );
-
-  useEffect(() => {
-    noteOnce(
-      !!proFormContext.formRef,
-      `ProFormList 必须要放到 ProForm 中,否则会造成行为异常。`,
-    );
-    noteOnce(
-      !!proFormContext.formRef,
-      `Proformlist must be placed in ProForm, otherwise it will cause abnormal behavior.`,
-    );
-  }, [proFormContext.formRef]);
-
-  useEffect(() => {
-    // 如果 setFieldValueType 和 props.name 不存在不存入
-    if (!setFieldValueType || !props.name) {
-      return;
-    }
-
-    // Field.type === 'ProField' 时 props 里面是有 valueType 的，所以要设置一下
-    // 写一个 ts 比较麻烦，用 any 顶一下
-    setFieldValueType(
-      [props.name].flat(1).filter((itemName) => itemName !== undefined),
-      {
-        valueType: 'formList',
-        transform,
-      },
-    );
-  }, [props.name, setFieldValueType, transform]);
-
-  const { wrapSSR, hashId } = useStyle(baseClassName);
-
-  if (!proFormContext.formRef) return null;
-  return wrapSSR(
-    <ColWrapper>
-      <div className={classNames(baseClassName, hashId)} style={style}>
-        <Form.Item
-          label={label}
-          prefixCls={prefixCls}
-          tooltip={tooltip}
-          style={style}
-          required={rules?.some((rule) => rule.required)}
-          wrapperCol={wrapperCol}
-          className={className}
-          {...rest}
-          name={isValidateList ? name : undefined}
-          rules={
-            isValidateList
-              ? [
-                  {
-                    validator: (rule, value) => {
-                      if (!value || value.length === 0) {
-                        return Promise.reject(new Error(emptyListMessage));
-                      }
-                      return Promise.resolve();
-                    },
-                    required: true,
-                  },
-                ]
-              : undefined
-          }
-        >
-          <Form.List rules={rules} {...rest} name={name}>
-            {(fields, action, meta) => {
-              // 将 action 暴露给外部
-              actionRefs.current = action;
-              return (
-                <RowWrapper>
-                  <ProFormListContainer
-                    name={name}
-                    readonly={!!readonly}
-                    originName={rest.name}
-                    copyIconProps={copyIconProps}
-                    deleteIconProps={deleteIconProps}
-                    formInstance={proFormContext.formRef!.current!}
-                    prefixCls={baseClassName}
-                    meta={meta}
-                    fields={fields}
-                    itemContainerRender={itemContainerRender}
-                    itemRender={itemRender}
-                    fieldExtraRender={fieldExtraRender}
-                    creatorButtonProps={creatorButtonProps}
-                    creatorRecord={creatorRecord}
-                    actionRender={actionRender}
-                    action={action}
-                    actionGuard={actionGuard}
-                    alwaysShowItemLabel={alwaysShowItemLabel}
-                    min={min}
-                    max={max}
-                    count={fields.length}
-                    onAfterAdd={(defaultValue, insertIndex, count) => {
-                      if (isValidateList) {
-                        proFormContext.formRef!.current!.validateFields([name]);
-                      }
-                      onAfterAdd?.(defaultValue, insertIndex, count);
-                    }}
-                    onAfterRemove={(index, count) => {
-                      if (isValidateList) {
-                        if (count === 0) {
-                          proFormContext.formRef!.current!.validateFields([
-                            name,
-                          ]);
-                        }
-                      }
-                      onAfterRemove?.(index, count);
-                    }}
-                    containerClassName={containerClassName}
-                    containerStyle={containerStyle}
-                  >
-                    {children}
-                  </ProFormListContainer>
-                  <Form.ErrorList errors={meta.errors} />
-                </RowWrapper>
-              );
-            }}
-          </Form.List>
-        </Form.Item>
-      </div>
-    </ColWrapper>,
-  );
-}
-
-export { FormListContext, ProFormList };

package/packages/form/src/components/List/style.ts

@@ -1,89 +0,0 @@
-import type { GenerateStyle, ProAliasToken } from '@ant-design/pro-provider';
-import { useStyle as useAntdStyle } from '@ant-design/pro-provider';
-
-export interface ProToken extends ProAliasToken {
-  componentCls: string;
-}
-
-const genProStyle: GenerateStyle<ProToken> = (token) => {
-  return {
-    [`${token.antCls}-pro`]: {
-      [`${token.antCls}-form:not(${token.antCls}-form-horizontal)`]: {
-        [token.componentCls]: {
-          [`&-item:not(${token.componentCls}-item-show-label)`]: {
-            [`${token.antCls}-form-item-label`]: {
-              display: 'none',
-            },
-          },
-        },
-      },
-    },
-    [token.componentCls]: {
-      maxWidth: '100%',
-      '&-item': {
-        '&&-show-label': {
-          [`${token.antCls}-form-item-label`]: {
-            display: 'inline-block',
-          },
-        },
-        '&&-default:first-child': {
-          'div:first-of-type': {
-            [`${token.antCls}-form-item`]: {
-              [`${token.antCls}-form-item-label`]: {
-                display: 'inline-block',
-              },
-            },
-          },
-        },
-        '&&-default:not(:first-child)': {
-          'div:first-of-type': {
-            [`${token.antCls}-form-item`]: {
-              [`${token.antCls}-form-item-label`]: {
-                display: 'none',
-              },
-            },
-          },
-        },
-      },
-      '&-action': {
-        display: 'flex',
-        height: token.controlHeight,
-        marginBlockEnd: token.marginLG,
-        lineHeight: token.controlHeight + 'px',
-        '&-small': {
-          height: token.controlHeightSM,
-          lineHeight: token.controlHeightSM,
-        },
-      },
-      '&-action-icon': {
-        marginInlineStart: 8,
-        cursor: 'pointer',
-        transition: 'color 0.3s ease-in-out',
-        '&:hover': {
-          color: token.colorPrimaryTextHover,
-        },
-      },
-      [`${token.proComponentsCls}-card ${token.proComponentsCls}-card-extra`]: {
-        [token.componentCls]: {
-          '&-action': {
-            marginBlockEnd: 0,
-          },
-        },
-      },
-      '&-creator-button-top': {
-        marginBlockEnd: 24,
-      },
-    },
-  };
-};
-
-export function useStyle(prefixCls: string) {
-  return useAntdStyle('ProFormList', (token) => {
-    const proToken: ProToken = {
-      ...token,
-      componentCls: `.${prefixCls}`,
-    };
-
-    return [genProStyle(proToken)];
-  });
-}

package/packages/form/src/components/LoginForm/demos/login-form-page.tsx

@@ -1,283 +0,0 @@
-import {
-  AlipayOutlined,
-  LockOutlined,
-  MobileOutlined,
-  TaobaoOutlined,
-  UserOutlined,
-  WeiboOutlined,
-} from '@ant-design/icons';
-import {
-  LoginFormPage,
-  ProConfigProvider,
-  ProFormCaptcha,
-  ProFormCheckbox,
-  ProFormText,
-} from '@ant-design/pro-components';
-import { Button, Divider, Space, Tabs, message, theme } from 'antd';
-import type { CSSProperties } from 'react';
-import { useState } from 'react';
-
-type LoginType = 'phone' | 'account';
-
-const iconStyles: CSSProperties = {
-  color: 'rgba(0, 0, 0, 0.2)',
-  fontSize: '18px',
-  verticalAlign: 'middle',
-  cursor: 'pointer',
-};
-
-const Page = () => {
-  const [loginType, setLoginType] = useState<LoginType>('phone');
-  const { token } = theme.useToken();
-  return (
-    <div
-      style={{
-        backgroundColor: 'white',
-        height: '100vh',
-      }}
-    >
-      <LoginFormPage
-        backgroundImageUrl="https://mdn.alipayobjects.com/huamei_gcee1x/afts/img/A*y0ZTS6WLwvgAAAAAAAAAAAAADml6AQ/fmt.webp"
-        logo="https://github.githubassets.com/favicons/favicon.png"
-        backgroundVideoUrl="https://gw.alipayobjects.com/v/huamei_gcee1x/afts/video/jXRBRK_VAwoAAAAAAAAAAAAAK4eUAQBr"
-        title="Github"
-        containerStyle={{
-          backgroundColor: 'rgba(0, 0, 0,0.65)',
-          backdropFilter: 'blur(4px)',
-        }}
-        subTitle="全球最大的代码托管平台"
-        activityConfig={{
-          style: {
-            boxShadow: '0px 0px 8px rgba(0, 0, 0, 0.2)',
-            color: token.colorTextHeading,
-            borderRadius: 8,
-            backgroundColor: 'rgba(255,255,255,0.25)',
-            backdropFilter: 'blur(4px)',
-          },
-          title: '活动标题，可配置图片',
-          subTitle: '活动介绍说明文字',
-          action: (
-            <Button
-              size="large"
-              style={{
-                borderRadius: 20,
-                background: token.colorBgElevated,
-                color: token.colorPrimary,
-                width: 120,
-              }}
-            >
-              去看看
-            </Button>
-          ),
-        }}
-        actions={
-          <div
-            style={{
-              display: 'flex',
-              justifyContent: 'center',
-              alignItems: 'center',
-              flexDirection: 'column',
-            }}
-          >
-            <Divider plain>
-              <span
-                style={{
-                  color: token.colorTextPlaceholder,
-                  fontWeight: 'normal',
-                  fontSize: 14,
-                }}
-              >
-                其他登录方式
-              </span>
-            </Divider>
-            <Space align="center" size={24}>
-              <div
-                style={{
-                  display: 'flex',
-                  justifyContent: 'center',
-                  alignItems: 'center',
-                  flexDirection: 'column',
-                  height: 40,
-                  width: 40,
-                  border: '1px solid ' + token.colorPrimaryBorder,
-                  borderRadius: '50%',
-                }}
-              >
-                <AlipayOutlined style={{ ...iconStyles, color: '#1677FF' }} />
-              </div>
-              <div
-                style={{
-                  display: 'flex',
-                  justifyContent: 'center',
-                  alignItems: 'center',
-                  flexDirection: 'column',
-                  height: 40,
-                  width: 40,
-                  border: '1px solid ' + token.colorPrimaryBorder,
-                  borderRadius: '50%',
-                }}
-              >
-                <TaobaoOutlined style={{ ...iconStyles, color: '#FF6A10' }} />
-              </div>
-              <div
-                style={{
-                  display: 'flex',
-                  justifyContent: 'center',
-                  alignItems: 'center',
-                  flexDirection: 'column',
-                  height: 40,
-                  width: 40,
-                  border: '1px solid ' + token.colorPrimaryBorder,
-                  borderRadius: '50%',
-                }}
-              >
-                <WeiboOutlined style={{ ...iconStyles, color: '#1890ff' }} />
-              </div>
-            </Space>
-          </div>
-        }
-      >
-        <Tabs
-          centered
-          activeKey={loginType}
-          onChange={(activeKey) => setLoginType(activeKey as LoginType)}
-        >
-          <Tabs.TabPane key={'account'} tab={'账号密码登录'} />
-          <Tabs.TabPane key={'phone'} tab={'手机号登录'} />
-        </Tabs>
-        {loginType === 'account' && (
-          <>
-            <ProFormText
-              name="username"
-              fieldProps={{
-                size: 'large',
-                prefix: (
-                  <UserOutlined
-                    style={{
-                      color: token.colorText,
-                    }}
-                    className={'prefixIcon'}
-                  />
-                ),
-              }}
-              placeholder={'用户名: admin or user'}
-              rules={[
-                {
-                  required: true,
-                  message: '请输入用户名!',
-                },
-              ]}
-            />
-            <ProFormText.Password
-              name="password"
-              fieldProps={{
-                size: 'large',
-                prefix: (
-                  <LockOutlined
-                    style={{
-                      color: token.colorText,
-                    }}
-                    className={'prefixIcon'}
-                  />
-                ),
-              }}
-              placeholder={'密码: ant.design'}
-              rules={[
-                {
-                  required: true,
-                  message: '请输入密码！',
-                },
-              ]}
-            />
-          </>
-        )}
-        {loginType === 'phone' && (
-          <>
-            <ProFormText
-              fieldProps={{
-                size: 'large',
-                prefix: (
-                  <MobileOutlined
-                    style={{
-                      color: token.colorText,
-                    }}
-                    className={'prefixIcon'}
-                  />
-                ),
-              }}
-              name="mobile"
-              placeholder={'手机号'}
-              rules={[
-                {
-                  required: true,
-                  message: '请输入手机号！',
-                },
-                {
-                  pattern: /^1\d{10}$/,
-                  message: '手机号格式错误！',
-                },
-              ]}
-            />
-            <ProFormCaptcha
-              fieldProps={{
-                size: 'large',
-                prefix: (
-                  <LockOutlined
-                    style={{
-                      color: token.colorText,
-                    }}
-                    className={'prefixIcon'}
-                  />
-                ),
-              }}
-              captchaProps={{
-                size: 'large',
-              }}
-              placeholder={'请输入验证码'}
-              captchaTextRender={(timing, count) => {
-                if (timing) {
-                  return `${count} ${'获取验证码'}`;
-                }
-                return '获取验证码';
-              }}
-              name="captcha"
-              rules={[
-                {
-                  required: true,
-                  message: '请输入验证码！',
-                },
-              ]}
-              onGetCaptcha={async () => {
-                message.success('获取验证码成功！验证码为：1234');
-              }}
-            />
-          </>
-        )}
-        <div
-          style={{
-            marginBlockEnd: 24,
-          }}
-        >
-          <ProFormCheckbox noStyle name="autoLogin">
-            自动登录
-          </ProFormCheckbox>
-          <a
-            style={{
-              float: 'right',
-            }}
-          >
-            忘记密码
-          </a>
-        </div>
-      </LoginFormPage>
-    </div>
-  );
-};
-
-export default () => {
-  return (
-    <ProConfigProvider dark>
-      <Page />
-    </ProConfigProvider>
-  );
-};