Skip to content

Commit 830ac10

Browse files
bplok20010bplok20010
committed
doc: update
1 parent 79ee4c9 commit 830ac10

12 files changed

+106
-943
lines changed

‎README.md

+35-32
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
11
# react-widget-listbox
22

33
## 安装
4-
`npm install --save react-widget-select`
4+
`npm install --save react-widget-listbox`
55

66
## API
77

88
```html
9-
<ListBox options={[{label:lucy, value: lucy}]}>
9+
<ListBox
10+
items={[{label:lucy, value: lucy}]}
11+
>
1012
</ListBox>
1113
```
1214

@@ -17,40 +19,41 @@
1719
| prefixCls | 组件CSS样式前缀 | string | rw-listbox |
1820
| className | 组件className属性 | string | - |
1921
| style | 组件style属性 | React.CSSProperties | - |
22+
| width | css快捷属性 | number | - |
23+
| height | css快捷属性 | number | - |
2024
| tabIndex | 组件tabIndex属性 | number | - |
21-
| items | 组件数据 | Array\<ItemData | ItemGroupData> | false |
22-
| headerStyle | - | - | - |
23-
| footerStyle | - | - | - |
24-
| bodyStyle | - | - | - |
25+
| multiple | 多选模式, 多选模式下value是数组 | boolean | false |
26+
| defaultValue | 指定默认选中的条目 | string\|number|Array\<string\|number> | - |
27+
| value | 指定默认选中的条目 `受控` | string\|number|Array\<string\|number> | - |
28+
| autoFocus | 默认获取焦点 | boolean | false |
29+
| disabled | 是否禁用 | boolean | false |
2530
| valueField | 设置取值字段 | string | value |
2631
| labelField | 设置显示字段 | string | label |
2732
| childrenField | 设置子节点字段 | string | children |
28-
| headerStyle | - | - | - |
29-
| headerStyle | - | - | - |
30-
| headerStyle | - | - | - |
31-
| emptyLabel | 下拉框无内容时显示 | ReactNode | no data. |
32-
| multiple | - | - | - |
33-
34-
| labelInValue | 是否把每个选项的 label 包装到 value 中，会把 Select 的 value 类型从 `string` 变为 `{key: string, label: ReactNode}` 的格式 | boolean | false |
35-
| autoFocus | 默认获取焦点 | boolean | false |
36-
| defaultValue | 指定默认选中的条目 | string|number | - |
37-
| value | 指定默认选中的条目 `受控` | string|number | - |
38-
| disabled | 是否禁用 | boolean | false |
39-
40-
| renderValue | 自定义渲染被选中的选项 | (menu: ReactNode, option: Option) => ReactNode | - |
41-
| renderMenu | 自定义下拉框内容 | (menu: ReactNode, props) => ReactNode | - |
42-
| renderMenuItem | 自定义下拉选项内容 | (label:React.Node, option:Option) => ReactNode | - |
43-
| renderMenuGroupTitle | 自定义下拉分组标题内容 | (label:React.Node, option:Option) => ReactNode | - |
33+
| headerStyle | 设置header的样式，renderHeader启用时有效 | React.CSSProperties | - |
34+
| footerStyle | 设置footer的样式，renderFooter启用时有效 | React.CSSProperties | - |
35+
| bodyStyle | 设置body的样式 | React.CSSProperties | - |
36+
| items | 组件数据 | Array\<ItemData | ItemGroupData> | [] |
37+
| itemsMap | 组件数据Hash表 | Object\<string, ItemData> | [] |
38+
| emptyLabel | 无内容时显示 | ReactNode | Not Found. |
39+
| labelInValue | 开启后`onChange(ItemData \| Array\<ItemData>)` | boolean | false |
40+
| enableDownUpSelect | 开启可通过上下方向键选择项目 | boolean | true |
41+
| fixListBodyHeightOnIE | IE下会自动设置body的maxHeight，如果CSS中已经确定可以关闭 | boolean | true |
42+
| onItemClick | 列表项点击时触发，注：如果开启`enableDownUpSelect`并回车时也会触发 | function(item: ItemData, e: Event) => ReactNode | - |
43+
| onItemGroupClick | 列表分组項点击时触发 | function(item: ItemGroupData, e: Event) | - |
44+
| onChange | 数据改变时触发 | function(item: number\|string\|ItemData \| Array\<ItemData\|string\|number>) | - |
4445
| onBlur | 失去焦点的时回调 | function | - |
4546
| onFocus | 获得焦点时回调 | function | - |
46-
| onChange | 选中 option 时调用此函数 | function(value, option:Option) | - |
47-
| onItemClick | 搜- | |
48-
| onItemGroupClick | - | - |
49-
| onKeyDown | - | function(open) | - |
50-
| wrapperComponent | - | function | - |
51-
| headerWrapperComponent | - | function | - |
52-
| bodyWrapperComponent | -- | function | - |
53-
| footerWrapperComponent | - | function | - |
47+
| onKeyDown | 键盘按下时触发 | function | - |
48+
| renderMenu | 自定义列表框内容 | (menus: Array\<ReactNode>, props) => ReactNode | - |
49+
| renderMenuItem | 自定义列表项内容 | (label:React.Node, item:ItemData) => ReactNode | - |
50+
| renderMenuGroupTitle | 自定义列表项分组标题内容 | (label:React.Node, item:ItemGroupData) => ReactNode | - |
51+
| renderHeader | 渲染列表项头部 | function(props): ReactNode | null |
52+
| renderFooter | 渲染列表项尾部 | function(props): ReactNode | null |
53+
| wrapperComponent | ListBox最外层容器组件 | ReactNode | div |
54+
| headerWrapperComponent | ListBox头部容器组件 | ReactNode | div |
55+
| bodyWrapperComponent | ListBox列表项容器组件 | ReactNode | div |
56+
| footerWrapperComponent | ListBox尾部容器组件 | ReactNode | div |
5457

5558

5659
### ListBox Methods
@@ -65,8 +68,8 @@
6568
| 参数 | 说明 | 类型 | 默认值 |
6669
| --- | --- | --- | --- |
6770
| disabled | 是否禁用 | boolean | false |
68-
| label | 选中该 Option 后，Select 的 title | ReactNode | - |
69-
| value | 默认根据此属性值进行筛选 | string\|number | - |
71+
| label | 列表项的title | ReactNode | - |
72+
| value | 列表项值 | any | - |
7073

7174
### ItemGroupData props
7275

‎docs/index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,6 @@
2020
<body style="background:#F5F5F5">
2121
<div class="demo" id="demo">
2222
</div>
23-
<script src="static\js\vendors.e71a4462.chunk.js"></script><script src="static\js\index.32677c7a.js"></script></body>
23+
<script src="static\js\vendors.e71a4462.chunk.js"></script><script src="static\js\index.f435093b.js"></script></body>
2424

2525
</html>

‎docs/static/js/index.32677c7a.js.map

-1
This file was deleted.

‎docs/static/js/index.32677c7a.js renamed to ‎docs/static/js/index.f435093b.js

+18-49
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/static/js/index.f435093b.js.map

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎lib/ListBox.js

+16-17
Original file line numberDiff line numberDiff line change
@@ -89,7 +89,7 @@ function (_React$Component) {
8989
(0, _scrollIntoView.default)(e.target, _this.getListViewBody());
9090
}
9191

92-
if (onItemClick) onItemClick(item);
92+
if (onItemClick) onItemClick(item, e);
9393
});
9494
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "onItemGroupClick", function (item, e) {
9595
var onItemGroupClick = _this.props.onItemGroupClick;
@@ -98,7 +98,7 @@ function (_React$Component) {
9898
(0, _scrollIntoView.default)(e.target, _this.getListViewBody());
9999
}
100100

101-
if (onItemGroupClick) onItemGroupClick(item);
101+
if (onItemGroupClick) onItemGroupClick(item, e);
102102
});
103103
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "onItemSelect", function (item, el) {
104104
var valueField = _this.props.valueField;
@@ -109,7 +109,6 @@ function (_React$Component) {
109109
var _this$props = _this.props,
110110
multiple = _this$props.multiple,
111111
onChange = _this$props.onChange,
112-
labelInValue = _this$props.labelInValue,
113112
valueField = _this$props.valueField;
114113
var selectedValue = _this.state.selectedValue;
115114
if (!multiple) return;
@@ -514,11 +513,11 @@ function (_React$Component) {
514513
ref: this.saveListViewHeader,
515514
className: "".concat(prefixCls, "-header"),
516515
style: headerStyle
517-
}, renderHeader()) : null, this.renderMenu(), renderFooter ? _react.default.createElement(FooterWrapperComponent, {
516+
}, renderHeader(this.props)) : null, this.renderMenu(), renderFooter ? _react.default.createElement(FooterWrapperComponent, {
518517
ref: this.saveListViewFooter,
519518
className: "".concat(prefixCls, "-footer"),
520519
style: footerStyle
521-
}, renderFooter()) : null);
520+
}, renderFooter(this.props)) : null);
522521
}
523522
}], [{
524523
key: "getDerivedStateFromProps",
@@ -546,27 +545,27 @@ function (_React$Component) {
546545

547546
exports.default = ListBox;
548547
(0, _defineProperty2.default)(ListBox, "propTypes", {
548+
prefixCls: _propTypes.default.string,
549549
className: _propTypes.default.string,
550550
style: _propTypes.default.object,
551-
headerStyle: _propTypes.default.object,
552-
footerStyle: _propTypes.default.object,
553-
bodyStyle: _propTypes.default.object,
554-
prefixCls: _propTypes.default.string,
551+
width: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
552+
height: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
553+
tabIndex: _propTypes.default.number,
554+
multiple: _propTypes.default.bool,
555+
defaultValue: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number, _propTypes.default.array]),
556+
value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number, _propTypes.default.array]),
557+
disabled: _propTypes.default.bool,
558+
autoFocus: _propTypes.default.bool,
555559
valueField: _propTypes.default.string,
556560
labelField: _propTypes.default.string,
557561
childrenField: _propTypes.default.string,
562+
headerStyle: _propTypes.default.object,
563+
footerStyle: _propTypes.default.object,
564+
bodyStyle: _propTypes.default.object,
558565
items: _propTypes.default.array,
559566
itemsMap: _propTypes.default.object,
560-
defaultValue: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number, _propTypes.default.array]),
561-
value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number, _propTypes.default.array]),
562567
emptyLabel: _propTypes.default.any,
563-
multiple: _propTypes.default.bool,
564-
disabled: _propTypes.default.bool,
565-
autoFocus: _propTypes.default.bool,
566-
width: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
567-
height: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
568568
labelInValue: _propTypes.default.bool,
569-
tabIndex: _propTypes.default.number,
570569
enableDownUpSelect: _propTypes.default.bool,
571570
fixListBodyHeightOnIE: _propTypes.default.bool,
572571
onItemClick: _propTypes.default.func,

‎lib/ListItem.js

+9
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,9 @@ function (_React$Component) {
7070
onDeselect && onDeselect(item, itemDOM);
7171
}
7272
});
73+
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "saveItem", function (dom) {
74+
_this.node = dom;
75+
});
7376
return _this;
7477
}
7578

@@ -78,6 +81,11 @@ function (_React$Component) {
7881
value: function shouldComponentUpdate(nextProps, nextState) {
7982
return !(0, _shallowequal.default)(this.props, nextProps) || !(0, _shallowequal.default)(this.state, nextState);
8083
}
84+
}, {
85+
key: "getItemDOM",
86+
value: function getItemDOM() {
87+
return this.node;
88+
}
8189
}, {
8290
key: "render",
8391
value: function render() {
@@ -92,6 +100,7 @@ function (_React$Component) {
92100
onMouseLeave = _this$props2.onMouseLeave;
93101
var classes = (0, _classnames.default)((_classNames = {}, (0, _defineProperty2.default)(_classNames, "".concat(prefixCls), true), (0, _defineProperty2.default)(_classNames, "".concat(prefixCls, "-selected"), selected), (0, _defineProperty2.default)(_classNames, "".concat(prefixCls, "-disabled"), disabled), _classNames));
94102
return _react.default.createElement("div", {
103+
ref: this.saveItem,
95104
className: classes,
96105
onClick: this.handleItemClick,
97106
onMouseEnter: onMouseEnter,

0 commit comments

Comments
 (0)