可选择组件

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

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

特性：

• [x] 自定义内容渲染
• [x] 自定义图标
• [x] focus, blur
• [x] pop
• [x] 内容区域可编辑
• [x] 点击图标弹窗
• [x] 点击整个内容区域弹窗
• [x] 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 的属性：

| 属性名 | 属性类型 | 属性说明 | | ---------------- | -------------------------------------------------- | ------------------------- | | width | string 或者 number | 设置宽度。默认为 100%。 | | editable | boolean | 是否可编辑 | | popWhenIconClick | boolean | 是否仅在点击图标时弹窗 | | icon | React.ReactNode | 指定图标 | | baseClassName | string | 基础类 | | contentRender | (props: ContentProps) => React.ReactNode | 定制内容渲染区域 | | popRender | (props: PopContentProps) => React.ReactNode | 定制弹出框渲染 | | id | string | 指定 form 元素 id | | onFocus | (event: React.FocusEvent) => void | 监听获取焦点事件 | | onBlur | (event: React.FocusEvent) => void | 监听失去焦点事件 | | value | string | 值 | | onChange | (event?: React.ChangeEvent, value: string) => void | 监听值变化事件 | | readOnly | boolean | 只读 | | disabled | boolean | 不可用 | | placeholder | string | 提示文字 | | wrapperClassName | string | 包装器类名 | | error | boolean | 错误状态 | | usePop | boolean | 是否启用 pop。默认为 true | | renderModal | (event: PopContentProps) => React.ReactNode | 渲染弹窗内容 |