@sinoui/selectable

可选择组件

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

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

特性：

• [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	渲染弹窗内容