@aloudata/aloudata-design 0.1.0-beta1

package/src/Select/interface.ts

@@ -0,0 +1,231 @@
+import _ from 'lodash';
+import React from 'react';
+
+type TSize = 'small' | 'default' | 'large';
+
+export type TMaybeArray<T> = T | T[];
+
+export type modeType = 'string' | 'tags' | undefined;
+export type searchType = 'normal' | 'inner' | 'no-search';
+export interface IOption {
+  /**
+   列表单项主要文字
+   */
+  label: string | React.ReactNode;
+  /**
+      作为列表的 `key` 来使用
+   */
+  value: string | number;
+  /**
+      列表次要文字
+   */
+  description?: string;
+  /**
+      是否禁用
+   */
+  disabled?: boolean;
+  /**
+   * 选中该 Option 后，Select 的 title
+   */
+  title?: string;
+  /**
+      `tooltip` 描述
+   */
+  tooltip?: string;
+  /**
+   分组的 `key` ，与 `groupLabel` 一起使用
+   */
+  groupValue?: string;
+  /**
+      分组的标题
+   */
+  groupLabel?: string;
+
+  options?: Map<string | number, IOption>;
+  isSelectOptGroup?: boolean;
+}
+
+export interface IOptGroupProps {
+  children?: React.ReactNode;
+  label: string | React.ReactNode;
+  value: string | number;
+}
+
+export interface IOptionProps {
+  children?: React.ReactNode;
+  value: string | number;
+  disabled?: boolean;
+  title?: string;
+}
+
+export interface ISelectProps {
+  /**
+    * @description 输入框尺寸
+   * @default default
+   * @type 'small' | 'default' | 'large';
+   */
+  size?: TSize;
+  customizePrefixCls?: string;
+  /**
+   * @description 多选模式
+   * @default false
+   */
+  multiple?: boolean;
+  /**
+   * @description 选择框默认文本
+   */
+  placeholder?: string;
+  /**
+   * @description 是否禁用
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * @description 是否默认展开下拉菜单
+   * @default false
+   */
+  defaultOpen?: boolean;
+  className?: string;
+  /**
+   * @description 下拉菜单的 className 属性
+   */
+  dropDownClassName?: string;
+  style?: React.CSSProperties;
+  groupStyle?: React.CSSProperties;
+  optionStyle?: React.CSSProperties;
+  /**
+   * @description 下拉菜单的 style 属性
+   */
+  dropDownStyle?: React.CSSProperties;
+  /**
+   * @description 指定默认选中的条目
+   */
+  defaultValue?: TMaybeArray<string | number> | null;
+  /**
+   * @description 指定当前选中的条目，多选时为一个数组。
+   */
+  value?: TMaybeArray<string | number> | null;
+  /**
+   * @description 数据化配置选项内容，相比 jsx 定义会获得更好的渲染性能
+   */
+  options?: IOption[];
+
+  /**
+   * @description 设置弹窗滚动高度
+   * @default 256
+   */
+  listHeight?: number;
+  listRowHeight?: number;
+  labelRenderer?: (input: string) => (option: IOption, isGroup: boolean) => React.ReactNode;
+  searchPredicate?: (input: string) => _.ListIterateeCustom<IOption, boolean>;
+  matchPredicate?: (input: string) => _.ListIterateeCustom<IOption, boolean>;
+  optionLabelRenderer?: (value: string | number, option?: IOption) => React.ReactNode;
+  /**
+   * @description 选中值改变时的回调
+   */
+  onChange?: (value: TMaybeArray<string | number> | null, options?: TMaybeArray<IOption> | null) => void;
+  /**
+   * @description 被选中时调用，参数为选中项的 value
+   */
+  onSelect?: (value: string | number, option: IOption) => void;
+  /**
+   * @description 开启清除功能
+   */
+  allowClear?: boolean;
+  /**
+   * @description 清除的回调
+   */
+  onClear?: () => void;
+  /**
+   * 浮层渲染父节点，默认渲染到 body 上
+   */
+  getContainer?: (node: HTMLElement) => HTMLElement;
+  /**
+   * @description 是否展开下拉菜单
+   */
+  open?: boolean;
+  /**
+   * dropdown visible 值改变时的回调
+   */
+  onDropDownVisibleChange?: (visible: boolean) => void;
+  /** *
+   * @description 下拉菜单和选择器同宽
+   * @default true
+   */
+  dropdownMatchSelectWidth?: boolean
+  /**
+   * @description 下拉菜单内置标签
+   */
+  label?: React.ReactNode;
+  children?: React.ReactNode[] | React.ReactNode;
+}
+
+export interface ISelectorProps {
+  input: string;
+  disabled: boolean;
+  prefix: string;
+  size: 'small' | 'default' | 'large';
+  multiple: boolean;
+  bordered: boolean;
+  isFocused: boolean;
+  className?: string | undefined;
+  visible: boolean;
+  style?: React.CSSProperties | undefined;
+  allowClear: boolean;
+  mode?: modeType;
+  label?: React.ReactNode;
+  value?: TMaybeArray<string | number> | undefined | null;
+  filteredOptions: IOption[];
+  searchType: searchType;
+  placeholder?: string;
+  optionLabelRenderer: (value: string | number, option?: IOption) => React.ReactNode;
+  getOptionByValue: (optValue: string | number) => IOption;
+  onInputChange: (value: string) => void;
+  onAllowClear: () => void;
+  deleteValue: (value: React.ReactText[], v: string | number) => void;
+  arrowComponent?: React.ReactElement | undefined;
+  closeComponent?: React.ReactElement | undefined;
+}
+
+export interface IVirtualListProps {
+  itemHeight?: number;
+  height?: number;
+  prefixCls?: string;
+  children: React.ReactNode;
+  data: IOption[];
+  virtual?: boolean;
+  itemKey: string | number | ((item: never) => React.ReactText);
+}
+
+export interface IOptionsListProps {
+  style?: React.CSSProperties;
+  input: string;
+  prefixCls: string;
+  groupStyle?: React.CSSProperties;
+  optionStyle?: React.CSSProperties;
+  selected?: TMaybeArray<React.ReactText> | null;
+  multiple: boolean;
+  isMode?: boolean;
+  optionChecked?: TMaybeArray<React.ReactText>;
+  visible?: boolean;
+  isUseAll?: boolean;
+  data: IOption[];
+  hasGroup: boolean;
+  searchType: searchType;
+  placeholder?: string;
+  notFoundContent?: React.ReactElement;
+  onTempValueChange: (tempValue: React.ReactText[]) => void;
+  setTempValue: (values: React.ReactText[]) => void;
+  value?: TMaybeArray<React.ReactText> | null;
+  tempValue: React.ReactText[];
+  isFooter?: boolean;
+  labelRenderer: (option: IOption, isGruop: false) => React.ReactNode;
+  onOptionClick: (selectedValue: string | number) => void;
+  getContainer?: (node: HTMLElement) => HTMLElement;
+  onValueChange?: (optionValues: TMaybeArray<string | number> | null) => void;
+  onInputChange: (value: string) => void;
+  height?: number | undefined;
+  itemHeight?: number | undefined;
+  activeIndex: number;
+  setActiveIndex: React.Dispatch<React.SetStateAction<number>>;
+}