FormPro

长念阅读约 6 分钟1 年前发布

© 转载需要保留原始链接，未经明确许可，禁止商业使用。支持原创 CC BY-NC-SA 4.0

危险

✂️ 当前组件已停止更新维护，如遇问题，需自行修复！

基于 Element React 的 Form 组件封装的表单组件。

特性说明

• 支持自定义多列渲染
• 支持 header 自定义渲染
• 支持展开/折叠禁用属性
• 支持只读模式，需配合 disabled 属性使用
• 理论上支持 Form 组件所有属性

何时使用

• 使用 Form 组件的所有场景

基本用法

import { FormPro, SelectPro } from '@/components/element-pro';

export default () => {
  return (
    <FormPro columns={6} model={model} labelPosition="right" labelWidth={80} inline readOnly>
      <Form.Item
        prop="reportingChannel"
        label={dataSet?.getField('reportingChannel')?.get('label')}
      >
        <SelectPro
          name="reportingChannel"
          dataSet={dataSet}
          value={model.reportingChannel}
          disabled
        />
      </Form.Item>
      <Form.Item prop="batch" label={dataSet?.getField('batch')?.get('label')}>
        <SelectPro name="batch" dataSet={dataSet} value={model.batch} disabled />
      </Form.Item>
    </FormPro>
  );
};

API

除此以下附加属性外，支持 Form 所有属性。

参数	类型	说明	默认值
columns	number	可选 表单分列	3
header	React.ReactNode	可选 表单标题	-
headerProps	HeaderTitleProps	可选 HeaderTitle 的属性配置	-
readOnly	boolean	可选 渲染只读表单，通过样式移除边框、背景、角标等；需要将表单项设定为 disabled	-
collapsible	boolean	可选 是否可展开/收起	false
limit	number	可选 表单折叠时保留的表单项数量	0
defaultExpanded	boolean	可选 是否默认展开	false

源代码

FormPro/index.tsx

import { Button, Form } from 'element-react';
import cls from 'classnames';
import styles from './index.module.less';
import { HeaderTitle } from '@/components/layout';
import { HeaderTitleProps } from '@/components/layout/HeaderTitle';
import { Icon, Collapse } from 'choerodon-ui';

const ExpandIcon = ({ isExpand = true, onToggle }) => {
  return isExpand ? (
    <Button type="text" onClick={() => onToggle('collapse')}>
      收起
      <Icon type="expand_less" style={{ marginLeft: 6 }} />
    </Button>
  ) : (
    <Button type="text" onClick={() => onToggle('expand')}>
      展开
      <Icon type="expand_more" style={{ marginLeft: 6 }} />
    </Button>
  );
};

type FormProps = React.ComponentProps<typeof Form>;
export interface FormProProps extends Omit<FormProps, 'className'> {
  columns?: number;
  className?: string;
  header?: React.ReactNode;
  headerProps?: HeaderTitleProps;
  /**
   * @description 是否只读 - 做样式调整，移除边框及背景色
   * @default false
   */
  readOnly?: boolean;
  /**
   * @description 是否可展开/收起
   * @default false 不展示展开/收起
   */
  collapsible?: boolean;
  /**
   * @description 收起时保留的表单项个数
   * @default 0 不保留，全部收收起
   */
  limit?: number;
  /**
   * @description 是否默认展开
   * @default false 收起
   */
  defaultExpanded?: boolean;
}

const FormPro = React.forwardRef<Form, React.PropsWithChildren<FormProProps>>(
  (
    {
      columns = 3,
      limit = 0,
      collapsible = false,
      defaultExpanded = false,
      readOnly = false,
      className = '',
      header,
      children,
      headerProps,
      labelPosition = 'right',
      ...formProps
    },
    ref
  ) => {
    const childrenList = React.Children.toArray(children);
    const [isExpand, setIsExpand] = React.useState<boolean>(defaultExpanded);

    const handleToggle = React.useCallback((type: 'collapse' | 'expand') => {
      setIsExpand(type === 'expand');
    }, []);

    return (
      <>
        {header && (
          <HeaderTitle
            extra={collapsible ? <ExpandIcon isExpand={isExpand} onToggle={handleToggle} /> : null}
            {...headerProps}
          >
            {header}
          </HeaderTitle>
        )}
        <Form
          ref={ref}
          {...formProps}
          className={cls(className, styles[`form__columns-${columns}`], styles.form__pro, {
            [styles['form__pro-vertical']]: labelPosition === 'top',
            [styles['form__pro--readonly']]: readOnly,
          })}
        >
          {collapsible ? (
            <>
              {childrenList.slice(0, limit)}
              <Collapse
                activeKey={isExpand ? '1' : '0'}
                ghost
                className={styles['collapse__no-header']}
              >
                <Collapse.Panel key="1" header="">
                  {childrenList.slice(limit)}
                </Collapse.Panel>
              </Collapse>
            </>
          ) : (
            childrenList
          )}
        </Form>
      </>
    );
  }
);

export default FormPro;

更新日志

alpha

2024-09-12

• 🎉 新增 readOnly 支持只读模式；
• 🎉 新增 collapsible limit defaultExpanded 支持展开折叠；

2024-09-03

• 🐞 修复 ref 丢失的问题；

2024-08-27

• 🎉 新增 FormPro 组件；