doc: update

react-widget · Mar 10, 2019 · 830ac10 · 830ac10
1 parent 79ee4c9
commit 830ac10
Show file tree

Hide file tree

Showing 12 changed files with 106 additions and 943 deletions.
diff --git a/README.md b/README.md
@@ -1,12 +1,14 @@
 # react-widget-listbox
 
 ## 安装
-`npm install --save react-widget-select`
+`npm install --save react-widget-listbox`
 
 ## API
 
 ```html
-<ListBox options={[{label:lucy, value: lucy}]}>
+<ListBox 
+items={[{label:lucy, value: lucy}]}
+>
 </ListBox>
 ```
 
@@ -17,40 +19,41 @@
 | prefixCls | 组件CSS样式前缀 | string | rw-listbox |
 | className | 组件className属性 | string | - |
 | style | 组件style属性 | React.CSSProperties | - |
+| width | css快捷属性 | number | - |
+| height | css快捷属性 | number | - |
 | tabIndex | 组件tabIndex属性 | number | - |
-| items | 组件数据 | Array\<ItemData | ItemGroupData> | false |
-| headerStyle | - | - | - |
-| footerStyle | - | - | - |
-| bodyStyle | - | - | - |
+| multiple | 多选模式, 多选模式下value是数组 | boolean | false |
+| defaultValue | 指定默认选中的条目 | string\|number|Array\<string\|number> | - |
+| value | 指定默认选中的条目 `受控` | string\|number|Array\<string\|number> | - |
+| autoFocus | 默认获取焦点 | boolean | false |
+| disabled | 是否禁用 | boolean | false |
 | valueField | 设置取值字段 | string | value |
 | labelField | 设置显示字段 | string | label |
 | childrenField | 设置子节点字段 | string | children |
-| headerStyle | - | - | - |
-| headerStyle | - | - | - |
-| headerStyle | - | - | - |
-| emptyLabel | 下拉框无内容时显示 | ReactNode | no data. |
-| multiple | - | - | - |
-
-| labelInValue | 是否把每个选项的 label 包装到 value 中，会把 Select 的 value 类型从 `string` 变为 `{key: string, label: ReactNode}` 的格式 | boolean | false |
-| autoFocus | 默认获取焦点 | boolean | false |
-| defaultValue | 指定默认选中的条目 | string|number | - |
-| value | 指定默认选中的条目 `受控` | string|number | - |
-| disabled | 是否禁用 | boolean | false |
-
-| renderValue | 自定义渲染被选中的选项 | (menu: ReactNode, option: Option) => ReactNode | - |
-| renderMenu | 自定义下拉框内容 | (menu: ReactNode, props) => ReactNode | - |
-| renderMenuItem | 自定义下拉选项内容 | (label:React.Node, option:Option) => ReactNode | - |
-| renderMenuGroupTitle | 自定义下拉分组标题内容 | (label:React.Node, option:Option) => ReactNode | - |
+| headerStyle | 设置header的样式，renderHeader启用时有效 | React.CSSProperties | - |
+| footerStyle | 设置footer的样式，renderFooter启用时有效 | React.CSSProperties | - |
+| bodyStyle | 设置body的样式 | React.CSSProperties | - |
+| items | 组件数据 | Array\<ItemData | ItemGroupData> | [] |
+| itemsMap | 组件数据Hash表 | Object\<string, ItemData> | [] |
+| emptyLabel | 无内容时显示 | ReactNode | Not Found. |
+| labelInValue | 开启后`onChange(ItemData \| Array\<ItemData>)` | boolean | false |
+| enableDownUpSelect | 开启可通过上下方向键选择项目 | boolean | true |
+| fixListBodyHeightOnIE | IE下会自动设置body的maxHeight，如果CSS中已经确定可以关闭 | boolean | true |
+| onItemClick | 列表项点击时触发，注：如果开启`enableDownUpSelect`并回车时也会触发 | function(item: ItemData, e: Event) => ReactNode | - |
+| onItemGroupClick | 列表分组項点击时触发 | function(item: ItemGroupData, e: Event) | - |
+| onChange | 数据改变时触发 | function(item: number\|string\|ItemData \| Array\<ItemData\|string\|number>) | - |
 | onBlur | 失去焦点的时回调 | function | - |
 | onFocus | 获得焦点时回调 | function | - |
-| onChange | 选中 option 时调用此函数 | function(value, option:Option) | - |
-| onItemClick | 搜- |  |
-| onItemGroupClick | - | - |
-| onKeyDown | - | function(open) | - |
-| wrapperComponent | - | function | - |
-| headerWrapperComponent | - | function | - |
-| bodyWrapperComponent | -- | function | - |
-| footerWrapperComponent | - | function | - |
+| onKeyDown | 键盘按下时触发 | function | - |
+| renderMenu | 自定义列表框内容 | (menus: Array\<ReactNode>, props) => ReactNode | - |
+| renderMenuItem | 自定义列表项内容 | (label:React.Node, item:ItemData) => ReactNode | - |
+| renderMenuGroupTitle | 自定义列表项分组标题内容 | (label:React.Node, item:ItemGroupData) => ReactNode | - |
+| renderHeader | 渲染列表项头部 | function(props): ReactNode | null |
+| renderFooter | 渲染列表项尾部 | function(props): ReactNode | null |
+| wrapperComponent | ListBox最外层容器组件 | ReactNode | div |
+| headerWrapperComponent | ListBox头部容器组件 | ReactNode | div |
+| bodyWrapperComponent | ListBox列表项容器组件 | ReactNode | div |
+| footerWrapperComponent | ListBox尾部容器组件 | ReactNode | div |
 
 
 ### ListBox Methods
@@ -65,8 +68,8 @@
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
 | disabled | 是否禁用 | boolean | false |
-| label | 选中该 Option 后，Select 的 title | ReactNode | - |
-| value | 默认根据此属性值进行筛选 | string\|number | - |
+| label | 列表项的title | ReactNode | - |
+| value | 列表项值 | any | - |
 
 ### ItemGroupData props
 

diff --git a/docs/index.html b/docs/index.html
@@ -20,6 +20,6 @@
 <body style="background:#F5F5F5">
     <div class="demo" id="demo">
     </div>
-<script src="static\js\vendors.e71a4462.chunk.js"></script><script src="static\js\index.32677c7a.js"></script></body>
+<script src="static\js\vendors.e71a4462.chunk.js"></script><script src="static\js\index.f435093b.js"></script></body>
 
 </html>
diff --git a/docs/static/js/index.32677c7a.js.map b/docs/static/js/index.32677c7a.js.map
diff --git a/docs/static/js/index.32677c7a.js → docs/static/js/index.f435093b.js b/docs/static/js/index.32677c7a.js → docs/static/js/index.f435093b.js
diff --git a/docs/static/js/index.f435093b.js.map b/docs/static/js/index.f435093b.js.map
diff --git a/lib/ListBox.js b/lib/ListBox.js
@@ -89,7 +89,7 @@ function (_React$Component) {
         (0, _scrollIntoView.default)(e.target, _this.getListViewBody());
       }
 
-      if (onItemClick) onItemClick(item);
+      if (onItemClick) onItemClick(item, e);
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "onItemGroupClick", function (item, e) {
       var onItemGroupClick = _this.props.onItemGroupClick;
@@ -98,7 +98,7 @@ function (_React$Component) {
         (0, _scrollIntoView.default)(e.target, _this.getListViewBody());
       }
 
-      if (onItemGroupClick) onItemGroupClick(item);
+      if (onItemGroupClick) onItemGroupClick(item, e);
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "onItemSelect", function (item, el) {
       var valueField = _this.props.valueField;
@@ -109,7 +109,6 @@ function (_React$Component) {
       var _this$props = _this.props,
           multiple = _this$props.multiple,
           onChange = _this$props.onChange,
-          labelInValue = _this$props.labelInValue,
           valueField = _this$props.valueField;
       var selectedValue = _this.state.selectedValue;
       if (!multiple) return;
@@ -514,11 +513,11 @@ function (_React$Component) {
         ref: this.saveListViewHeader,
         className: "".concat(prefixCls, "-header"),
         style: headerStyle
-      }, renderHeader()) : null, this.renderMenu(), renderFooter ? _react.default.createElement(FooterWrapperComponent, {
+      }, renderHeader(this.props)) : null, this.renderMenu(), renderFooter ? _react.default.createElement(FooterWrapperComponent, {
         ref: this.saveListViewFooter,
         className: "".concat(prefixCls, "-footer"),
         style: footerStyle
-      }, renderFooter()) : null);
+      }, renderFooter(this.props)) : null);
     }
   }], [{
     key: "getDerivedStateFromProps",
@@ -546,27 +545,27 @@ function (_React$Component) {
 
 exports.default = ListBox;
 (0, _defineProperty2.default)(ListBox, "propTypes", {
+  prefixCls: _propTypes.default.string,
   className: _propTypes.default.string,
   style: _propTypes.default.object,
-  headerStyle: _propTypes.default.object,
-  footerStyle: _propTypes.default.object,
-  bodyStyle: _propTypes.default.object,
-  prefixCls: _propTypes.default.string,
+  width: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+  height: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+  tabIndex: _propTypes.default.number,
+  multiple: _propTypes.default.bool,
+  defaultValue: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number, _propTypes.default.array]),
+  value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number, _propTypes.default.array]),
+  disabled: _propTypes.default.bool,
+  autoFocus: _propTypes.default.bool,
   valueField: _propTypes.default.string,
   labelField: _propTypes.default.string,
   childrenField: _propTypes.default.string,
+  headerStyle: _propTypes.default.object,
+  footerStyle: _propTypes.default.object,
+  bodyStyle: _propTypes.default.object,
   items: _propTypes.default.array,
   itemsMap: _propTypes.default.object,
-  defaultValue: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number, _propTypes.default.array]),
-  value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number, _propTypes.default.array]),
   emptyLabel: _propTypes.default.any,
-  multiple: _propTypes.default.bool,
-  disabled: _propTypes.default.bool,
-  autoFocus: _propTypes.default.bool,
-  width: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
-  height: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
   labelInValue: _propTypes.default.bool,
-  tabIndex: _propTypes.default.number,
   enableDownUpSelect: _propTypes.default.bool,
   fixListBodyHeightOnIE: _propTypes.default.bool,
   onItemClick: _propTypes.default.func,

diff --git a/lib/ListItem.js b/lib/ListItem.js
@@ -70,6 +70,9 @@ function (_React$Component) {
         onDeselect && onDeselect(item, itemDOM);
       }
     });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "saveItem", function (dom) {
+      _this.node = dom;
+    });
     return _this;
   }
 
@@ -78,6 +81,11 @@ function (_React$Component) {
     value: function shouldComponentUpdate(nextProps, nextState) {
       return !(0, _shallowequal.default)(this.props, nextProps) || !(0, _shallowequal.default)(this.state, nextState);
     }
+  }, {
+    key: "getItemDOM",
+    value: function getItemDOM() {
+      return this.node;
+    }
   }, {
     key: "render",
     value: function render() {
@@ -92,6 +100,7 @@ function (_React$Component) {
           onMouseLeave = _this$props2.onMouseLeave;
       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));
       return _react.default.createElement("div", {
+        ref: this.saveItem,
         className: classes,
         onClick: this.handleItemClick,
         onMouseEnter: onMouseEnter,