@sinoui/selectable v0.1.31

可选择组件

可选择高阶组件是用于方便构建类似选择框的组件，这些组件包括：

• 日期选择框
• 部门选择框
• 可编辑的选择框

特性：

• 自定义内容渲染
• 自定义图标
• focus, blur
• pop
• 内容区域可编辑
• 点击图标弹窗
• 点击整个内容区域弹窗
• modal 弹窗

使用方式

import { Selectable, SelectableContent } from '@sinoui/selectable';
import { SimpleIcon } from 'sinoui-components/Icon';

export interface DatePicker {
  value: string;
  onChange: (event: any, value: string) => void;
  readOnly?: boolean;
  disabled?: boolean;
  dateFormat?: string;
}

export default function DatePicker(props) {
  return (
    <Selectable
      baseClassName="sinoui-date-picker"
      contentRender={({ value }) => (
        <SelectableContent>{value}</SelectableContent>
      )}
      popRender={({ value, onChange, close }) => (
        <Calendar
          value={value}
          onChange={(value) => {
            onChange(null, value);
            close();
          }}
        />
      )}
      icon={<SimpleIcon>date_range</SimpleIcon>}
      {...props}
    />
  );
}

Selectable 的属性：