list-input 组件

安装方法

npm install @hbtv/list-input --save

更新日志

查看更新日志

使用方法

const columns: ListColumnType[] = [
    { title: '文本类型', dataIndex: 'text' },
    {
      title: '可选输入',
      dataIndex: 'select',
      componentType: 'select',
      config:{
        select:{
          mode:'multiple',
          valueEnum: [
            { label: '选项1', value: '1' },
            { label: '选项2', value: '2' },
          ],
        } 
      },
    },
    {
      title: '上传图片',
      dataIndex: 'image',
      componentType: 'upload',
      displayRule: 'image(64)',
      width: 300,
      config:{
        upload:{
          fileType:['image'],
        } 
      },
    },
];

<ListInput name="options" columns={columns} dnd />

API

export interface ListInputProps<RecordType = any> {
  name?: string;
  columns: ListColumnType<RecordType>[];
  value?: RecordType[];
  onChange?: (value: RecordType[]) => void;
  dnd?: boolean;
  loading?: boolean;
  uploadServices?: ServicesType;
  actions?: React.ReactNode[];
  confirmOnRemoveRecord?: boolean;  // 1.2.8 加入
  valueEnum?: {
    [k: string]: ValueEnumType[] | TreeDataType[];
  };
}

export type ListDataType<RecordType = { [k: string]: any }> = RecordType & {
  isNew?: boolean;
  onEdit?: boolean;
  index?: number;
};

columns 说明

// columns 的定义
export interface ListColumnType<RecordType = any> {
  title: string;
  dataIndex?: string;
  componentType?: ListComponentType;
  defaultValue?: any;
  rules?: RuleObject[];
  displayRule?: string;
  splitBy?: string;
  extra?: string;
  placeholder?: string;
  config?: {
    select?: SelectConfigType;
    upload?: MediaUploadProps;
    list?: ListInputProps;
    dateTime?: DateTimeConfigType;  // 1.2.2 加入
  };
  fields?: ListColumnType[];
  width?: number;
  allowEdit?: boolean;
  render?: (value: any, row: RecordType, index: number) => React.ReactNode;
}

// 组件类型的定义
export type ListComponentType =
  | 'text' // 1.2.8 后可以进行配置, 详细配置 TextConfigType
  | 'select'
  | 'arrayInput' // 新增
  | 'switch'
  | 'upload'|
  | 'dateTime'; // 1.2.2 开始直接这个了，详细配置在 config中


export interface TextConfigType {
  component?: 'text' | 'textArea' | 'inputNumber' | 'password'
  minRows?: number;  // 仅对  textArea
  step?: number | string; // 仅对 inputNumber
}

export interface DateTimeConfigType {
  component?: 'year' | 'month' | 'date' | 'time' | 'dateTime';
  mode?: 'picker' | 'range';
}


export interface SelectConfigType {
  component?: 'select' | 'checkbox' | 'radio' | 'cascader' | 'tree';
  mode?: 'single' | 'tags' | 'multiple';
  valueEnum?: ValueEnumType[] | string;
  changeOnSelect?: boolean;
}

// 枚举值的定义
export interface ValueEnumType {
  label: string;
  value: string;
}


export interface ListTreeType {
  value: string;
  title: string;
  children?: ListTreeType[];
}

uploadServices 说明

详见@hbtv/media-upload 组件说明文档