ListBox

ListBox组件

安装

npm install --save react-widget-listbox

使用

importReactfrom"react";importTriggerfrom"react-widget-listbox";import"react-widget-listbox/style";exportdefaultfunctionApp(){return(<divclassName="App"style={{padding: 100}}><ListBoxdata={[{value: 'Banana',label: 'Banana'},{value: 'Orange',label: 'Orange'},{value: 'Apple',label: 'Apple'},{value: 'Mango',label: 'Mango'},]}/></div>);}

Interfaces

exportdeclaretypeItemData=Record<string|number,any>;exportdeclaretypeValueType=number|string;exportdeclaretypeItem={value: any;label: React.ReactNode;disabled: boolean;children?: Item[];data: ItemData;ref: React.RefObject<ListItem>;};exportinterfaceListBoxProps{/** 样式前缀 */prefixCls?: string;/** 样式名 */className?: string;/** 样式属性 */style?: React.CSSProperties;/** tabIndex值 */tabIndex?: number;/** 支持多选，开启多选后，defaultValue/value为数组 */multiple?: boolean;/** 默认选中值 */defaultValue?: ValueType|ValueType[];/** 选中值(受控) */value?: ValueType|ValueType[];/** 禁用 */disabled?: boolean;/** 只读 */readOnly?: boolean;/** 自动获取焦点 */autoFocus?: boolean;/** 数据集 */data?: ItemData[];/** 设置data数据的值字段 */valueField?: string;/** 设置data数据的显示字段 */labelField?: string;/** 设置data数据的禁用字段 */disabledField?: string;/** 设置data数据的子节点字段 */childrenField?: string;/** 设置renderHeader后CSS属性 */headerStyle?: React.CSSProperties;/** 设置renderFooter后CSS属性 */footerStyle?: React.CSSProperties;/** 设置列表容器CSS属性 */bodyStyle?: React.CSSProperties;/** 无数据时显示内容 */emptyLabel?: React.ReactNode;/** 获取列表项属性 */getItemProps?: (data: ItemData)=>React.HTMLAttributes<HTMLElement>;/** 获取分组标题项属性 */getGroupTitleProps?: (data: ItemData)=>React.HTMLAttributes<HTMLElement>;/** 自定义渲染分组标题 */renderGroupTitle?: (data: ItemData)=>React.ReactNode;/** 自定义渲染列表项内容 */renderItem?: (data: ItemData,item: Item)=>React.ReactNode;/** 自定义渲染器 */renderer?: (listBody: React.ReactNode)=>React.ReactNode;fixListBodyHeightOnIE?: boolean;onSelect?: (value: string|number,data: ItemData)=>void;onDeselect?: (value: ValueType,data: ItemData)=>void;onChange?: (value: ValueType|ValueType[],data: ItemData[]|ItemData)=>void;onFocus?: (e: React.FocusEvent)=>void;onBlur?: (e: React.FocusEvent)=>void;onKeyDown?: (e: React.KeyboardEvent)=>void;onMouseLeave?: (e: React.MouseEvent)=>void;wrapperComponent: React.ElementType;bodyWrapperComponent: React.ElementType;}

defaultProps

{prefixCls: "rw-listbox",valueField: "value",labelField: "label",disabledField: "disabled",childrenField: "children",tabIndex: 0,emptyLabel: "Not Found",fixListBodyHeightOnIE: true,data: [],wrapperComponent: "div",bodyWrapperComponent: "div",}

基础样式

.rw-listbox {
border-radius:3px;
position: relative;
background:#fff;
display: flex;
flex-direction: column;
border:1px solid #10161a26;
padding:5px;
}
.rw-listbox-body {
flex:1;
overflow: auto;
overflow-x: hidden;
}
.rw-listbox-item-group .rw-listbox-item {
padding-left:23px;
}
.rw-listbox-group-title {
display: flex;
padding:5px7px;
line-height:20px;
user-select: none;
color:rgb(24,32,38);
}
.rw-listbox-item {
display: flex;
border-radius:2px;
padding:5px7px;
line-height:20px;
cursor: pointer;
user-select: none;
color:rgb(24,32,38);
}
.rw-listbox-item-active {
background-color:rgba(167,182,194,0.3);
}
.rw-listbox-item:active {
background-color:rgba(115,134,148,0.3);
}
.rw-listbox-item.rw-listbox-item-selected {
color:#fff;
background-color:#137cbd;
}
.rw-listbox-disabled .rw-listbox-item,
.rw-listbox-item.rw-listbox-item-disabled {
background-color: inherit;
color:rgba(167,182,194,0.6);
cursor: default;
}
.rw-listbox-group-title {
font-weight:400;
}
.rw-listbox-group-list .rw-listbox-item {
padding-left:24px;
}