https://github.com/react-widget/listbox
https://react-widget.github.io/listbox/
https://github.com/react-widget/listbox
listbox react react-widget
Last synced: 10 months ago
JSON representation
https://react-widget.github.io/listbox/
- Host: GitHub
- URL: https://github.com/react-widget/listbox
- Owner: react-widget
- License: mit
- Created: 2018-11-18T13:59:13.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2020-08-10T03:40:49.000Z (over 5 years ago)
- Last Synced: 2025-02-14T06:38:16.726Z (11 months ago)
- Topics: listbox, react, react-widget
- Language: TypeScript
- Homepage:
- Size: 1.81 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# ListBox
ListBox组件
## 安装
`npm install --save react-widget-listbox`
## 使用
[](https://codesandbox.io/s/nice-moser-kqj7y?fontsize=14&hidenavigation=1&theme=dark)
```js
import React from "react";
import Trigger from "react-widget-listbox";
import "react-widget-listbox/style";
export default function App() {
return (
);
}
```
### Interfaces
```ts
export declare type ItemData = Record;
export declare type ValueType = number | string;
export declare type Item = {
value: any;
label: React.ReactNode;
disabled: boolean;
children?: Item[];
data: ItemData;
ref: React.RefObject;
};
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;
/** 获取分组标题项属性 */
getGroupTitleProps?: (data: ItemData) => React.HTMLAttributes;
/** 自定义渲染分组标题 */
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
```js
{
prefixCls: "rw-listbox",
valueField: "value",
labelField: "label",
disabledField: "disabled",
childrenField: "children",
tabIndex: 0,
emptyLabel: "Not Found",
fixListBodyHeightOnIE: true,
data: [],
wrapperComponent: "div",
bodyWrapperComponent: "div",
}
```
### 基础样式
```css
.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;
}
```