ListBox

安装

使用

import React from "react";
import Trigger from "react-widget-listbox";
import "react-widget-listbox/style";
export default function App() {
 return (
 <div
 className="App"
 style={{
 padding: 100
 }}
 >
 <ListBox
 data={[
 {
 value: 'Banana',
 label: 'Banana'
 }, {
 value: 'Orange',
 label: 'Orange'
 }, {
 value: 'Apple',
 label: 'Apple'
 }, {
 value: 'Mango',
 label: 'Mango'
 }, 
 ]} 
 />
 </div>
 );
}

Interfaces

export declare type ItemData = Record<string | number, any>;
export declare type ValueType = number | string;
export declare type Item = {
 value: any;
 label: React.ReactNode;
 disabled: boolean;
 children?: Item[];
 data: ItemData;
 ref: React.RefObject<ListItem>;
};
export interface ListBoxProps {
 /** 样式前缀 */
 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: 5px 7px;
	line-height: 20px;
	user-select: none;
	color: rgb(24, 32, 38);
}
.rw-listbox-item {
	display: flex;
	border-radius: 2px;
	padding: 5px 7px;
	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;
}