publish 1.5.9

build/FilterDropDown.js

@@ -8,6 +8,10 @@ var _react = require('react');
 
 var _react2 = _interopRequireDefault(_react);
 
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
 var _beeDropdown = require('bee-dropdown');
 
 var _beeDropdown2 = _interopRequireDefault(_beeDropdown);
@@ -38,7 +42,9 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
 
 function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
 
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); }
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); } /**
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                * 过滤行功能内的下拉条件
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                */
 
 var Item = _beeMenus2["default"].Item;
 
@@ -74,57 +80,124 @@ var FilterDropDown = function (_Component) {
             }
         };
 
+        _this.getMenu = function () {
+            var selectValue = _this.state.selectValue;
+            var filterDropdownType = _this.props.filterDropdownType;
+
+            var locale = (0, _tool.getComponentLocale)(_this.props, _this.context, 'Table', function () {
+                return _i18n2["default"];
+            });
+            switch (filterDropdownType) {
+                case 'string':
+                    return _react2["default"].createElement(
+                        _beeMenus2["default"],
+                        {
+                            onSelect: _this.onSelectDropdown,
+                            selectedKeys: selectValue
+                        },
+                        _react2["default"].createElement(
+                            Item,
+                            { key: '2' },
+                            locale['include']
+                        ),
+                        _react2["default"].createElement(
+                            Item,
+                            { key: '6' },
+                            locale['exclusive']
+                        ),
+                        _react2["default"].createElement(
+                            Item,
+                            { key: '1' },
+                            locale['equal']
+                        ),
+                        _react2["default"].createElement(
+                            Item,
+                            { key: '5' },
+                            locale['unequal']
+                        ),
+                        _react2["default"].createElement(
+                            Item,
+                            { key: '7' },
+                            locale['begin']
+                        ),
+                        _react2["default"].createElement(
+                            Item,
+                            { key: '3' },
+                            locale['end']
+                        )
+                    );
+                case 'number':
+                    return _react2["default"].createElement(
+                        _beeMenus2["default"],
+                        {
+                            onSelect: _this.onSelectDropdown,
+                            selectedKeys: selectValue
+                        },
+                        _react2["default"].createElement(
+                            Item,
+                            { key: '1' },
+                            locale['greater_than']
+                        ),
+                        _react2["default"].createElement(
+                            Item,
+                            { key: '2' },
+                            locale['great_than_equal_to']
+                        ),
+                        _react2["default"].createElement(
+                            Item,
+                            { key: '3' },
+                            locale['less_than']
+                        ),
+                        _react2["default"].createElement(
+                            Item,
+                            { key: '4' },
+                            locale['less_than_equal_to']
+                        ),
+                        _react2["default"].createElement(
+                            Item,
+                            { key: '5' },
+                            locale['be_equal_to']
+                        ),
+                        _react2["default"].createElement(
+                            Item,
+                            { key: '6' },
+                            locale['not_equal_to']
+                        )
+                    );
+                default:
+                    return _react2["default"].createElement('div', null);
+            }
+        };
+
         _this.state = {
-            selectValue: []
+            selectValue: [] //选择的条件的值
         };
         return _this;
     }
+    /**
+     * 点击下拉菜单
+     *
+     * @param {*} s 选中的selectRecord
+     */
+
+
+    /**
+     * 清除事件
+     *
+     */
+
+
+    /**
+     * 根据props来获得指定的Menu,分为String和Number
+     *
+     * @returns JSX Menu
+     */
+
 
     FilterDropDown.prototype.render = function render() {
         var isShowCondition = this.props.isShowCondition;
 
 
-        var locale = (0, _tool.getComponentLocale)(this.props, this.context, 'Table', function () {
-            return _i18n2["default"];
-        });
-
-        var dropmenu = _react2["default"].createElement(
-            _beeMenus2["default"],
-            {
-                onSelect: this.onSelectDropdown,
-                selectedKeys: this.state.selectValue
-            },
-            _react2["default"].createElement(
-                Item,
-                { key: '2' },
-                locale['include']
-            ),
-            _react2["default"].createElement(
-                Item,
-                { key: '6' },
-                locale['exclusive']
-            ),
-            _react2["default"].createElement(
-                Item,
-                { key: '1' },
-                locale['equal']
-            ),
-            _react2["default"].createElement(
-                Item,
-                { key: '5' },
-                locale['unequal']
-            ),
-            _react2["default"].createElement(
-                Item,
-                { key: '7' },
-                locale['begin']
-            ),
-            _react2["default"].createElement(
-                Item,
-                { key: '3' },
-                locale['end']
-            )
-        );
         return _react2["default"].createElement(
             'div',
             { className: 'filter-btns' },
@@ -132,19 +205,26 @@ var FilterDropDown = function (_Component) {
                 _beeDropdown2["default"],
                 {
                     trigger: ['click'],
-                    overlay: dropmenu,
+                    overlay: this.getMenu(),
                     animation: 'slide-up'
                 },
                 _react2["default"].createElement(
                     _beeButton2["default"],
-                    { shape: 'border', style: { marginLeft: "3px", minWidth: "0px", width: "24px", padding: 0 } },
+                    {
-                    _react2["default"].createElement(_beeIcon2["default"], { style: { padding: 0 }, type: 'uf-filter' })
+                        shape: 'border',
+                        style: { marginLeft: "3px", minWidth: "0px", width: "24px", padding: 0 }
+                    },
+                    _react2["default"].createElement(_beeIcon2["default"], { style: { padding: 0, color: '#585858' }, type: 'uf-filter' })
                 )
             ),
             _react2["default"].createElement(
                 _beeButton2["default"],
-                { onClick: this.onClickClear, shape: 'border', style: { marginLeft: "1px", minWidth: "0px", width: "24px", padding: 0, "visibility": this.props.isShowClear || this.state.selectValue.length > 0 ? "visible" : "hidden" } },
+                {
-                _react2["default"].createElement(_beeIcon2["default"], { style: { padding: 0, "visibility": this.props.isShowClear || this.state.selectValue.length > 0 ? "visible" : "hidden" }, type: 'uf-filterno' })
+                    onClick: this.onClickClear,
+                    shape: 'border',
+                    style: { marginLeft: "1px", minWidth: "0px", width: "24px", padding: 0, "visibility": this.props.isShowClear || this.state.selectValue.length > 0 ? "visible" : "hidden" }
+                },
+                _react2["default"].createElement(_beeIcon2["default"], { style: { padding: 0, color: '#585858', "visibility": this.props.isShowClear || this.state.selectValue.length > 0 ? "visible" : "hidden" }, type: 'uf-filterno' })
             )
         );
     };
@@ -152,5 +232,15 @@ var FilterDropDown = function (_Component) {
     return FilterDropDown;
 }(_react.Component);
 
+FilterDropDown.propTypes = {
+    isShowCondition: _propTypes2["default"].string,
+    filterDropdownType: _propTypes2["default"].oneOf(['string', 'number'])
+};
+
+FilterDropDown.defaultProps = {
+    isShowCondition: 'show',
+    filterDropdownType: 'string'
+};
+
 exports["default"] = FilterDropDown;
 module.exports = exports['default'];

build/FilterType.js

@@ -22,6 +22,10 @@ var _beeSelect = require('bee-select');
 
 var _beeSelect2 = _interopRequireDefault(_beeSelect);
 
+var _beeInputNumber = require('bee-input-number');
+
+var _beeInputNumber2 = _interopRequireDefault(_beeInputNumber);
+
 var _beeDatepicker = require('bee-datepicker');
 
 var _beeDatepicker2 = _interopRequireDefault(_beeDatepicker);
@@ -61,6 +65,24 @@ var FilterType = function (_Component) {
             onChange && onChange("");
         };
 
+        _this.changeNumber = function (number) {
+            var onChange = _this.props.onChange;
+
+            onChange && onChange(number);
+            _this.setState({
+                number: number
+            });
+        };
+
+        _this.clearNumber = function () {
+            var onChange = _this.props.onChange;
+
+            onChange && onChange("");
+            _this.setState({
+                number: ""
+            });
+        };
+
         _this.changeText = function (eve) {
             _this.setState({
                 text: eve
@@ -123,6 +145,7 @@ var FilterType = function (_Component) {
         _this.renderControl = function (rendertype) {
             var _this$props = _this.props,
                 filterDropdown = _this$props.filterDropdown,
+                filterDropdownType = _this$props.filterDropdownType,
                 className = _this$props.className,
                 onChange = _this$props.onChange,
                 onSelectDropdown = _this$props.onSelectDropdown,
@@ -149,7 +172,26 @@ var FilterType = function (_Component) {
                             onSelectDropdown: onSelectDropdown,
                             onClickClear: _this.clearText,
                             isShowClear: _this.state.text,
-                            isShowCondition: filterDropdown
+                            isShowCondition: filterDropdown,
+                            filterDropdownType: filterDropdownType
+                        })
+                    );
+                case 'number':
+                    return _react2["default"].createElement(
+                        'div',
+                        { className: clsPrefix + ' filter-wrap' },
+                        _react2["default"].createElement(_beeInputNumber2["default"], {
+                            className: className,
+                            value: _this.state.number,
+                            onChange: _this.changeNumber
+                        }),
+                        _react2["default"].createElement(_FilterDropDown2["default"], {
+                            locale: locale,
+                            onSelectDropdown: onSelectDropdown,
+                            onClickClear: _this.clearNumber,
+                            isShowClear: _this.state.number,
+                            isShowCondition: filterDropdown,
+                            filterDropdownType: filterDropdownType
                         })
                     );
                 case 'dropdown':
@@ -198,7 +240,7 @@ var FilterType = function (_Component) {
                         })
                     );
                 default:
-                    break;
+                    return _react2["default"].createElement('div', null);
             }
         };
 
@@ -206,12 +248,16 @@ var FilterType = function (_Component) {
             text: "",
             selectValue: "",
             dateValue: "",
-            open: false
+            open: false,
+            number: 0
         };
         return _this;
     }
     //清除文本
 
+    //设置数值
+
+    //清除数值
 
     //设置文本
 
@@ -228,6 +274,12 @@ var FilterType = function (_Component) {
     //设置日期值
 
     //组件渲染
+    /**
+     * 根据不同的类型生成对应的组件类型包含一些参数的适应
+     *
+     * @param {*} rendertype 参数类型，包括['text','dropdown','date','daterange','number']
+     * @returns
+     */
 
 
     FilterType.prototype.render = function render() {

build/Table.css

@@ -326,10 +326,7 @@
     .u-table-thead .filter-wrap .filter-btns {
       min-width: 58px; }
   .u-table-thead th {
-    background: #f7f7f7;
+    background: #f7f7f7; }
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis; }
     .u-table-thead th .bee-table-column-sorter {
       position: relative;
       margin-left: 4px;
@@ -383,16 +380,26 @@
     .u-table-thead-th-drag-gap {
       height: 100%;
       position: absolute;
-      right: 0px;
+      right: -10px;
       top: 0;
-      background: #ccc;
+      width: 20px;
-      width: 2px;
       box-sizing: border-box;
       z-index: 1; }
+      .u-table-thead-th-drag-gap .online {
+        height: 100%;
+        width: 1px;
+        background: transparent;
+        margin: 0 auto; }
+      .u-table-thead-th-drag-gap .online-hover {
+        background: #000000; }
     .u-table-thead-th .th-drag-gap {
       background: transparent; }
     .u-table-thead-th .th-drag-gap-hover {
       cursor: col-resize; }
+    .u-table-thead-th .th-drag-gap > div {
+      background: transparent; }
+    .u-table-thead-th .th-drag-gap-hover > div {
+      background: #000000; }
   .u-table-thead-th:last-child-drag-gap {
     border: none; }
   .u-table-filter-column-pop-cont {

build/Table.js

@@ -475,14 +475,15 @@ var Table = function (_Component) {
           key: column.key,
           children: "过滤渲染",
           width: column.width,
-          filtertype: column.filterType,
+          filtertype: column.filterType, //下拉的类型 包括['text','dropdown','date','daterange','number']
-          dataindex: column.dataIndex,
+          dataindex: column.dataIndex, //field
-          datasource: _this2.props.data,
+          datasource: _this2.props.data, //需要单独拿到数据处理
-          format: column.format,
+          format: column.format, //设置日期的格式
-          filterdropdown: column.filterDropdown,
+          filterdropdown: column.filterDropdown, //是否显示 show hide
           filterdropdownauto: column.filterDropdownAuto, //是否自定义数据
           filterdropdowndata: column.filterDropdownData, //自定义数据格式
-          filterdropdownfocus: column.filterDropdownFocus //焦点触发函数回调
+          filterdropdownfocus: column.filterDropdownFocus, //焦点触发函数回调
+          filterdropdowntype: column.filterDropdownType //下拉的类型分为 String,Number 默认是String
         });
       }
     });

build/TableHeader.js

@@ -86,7 +86,9 @@ var TableHeader = function (_Component) {
       if (_this.border || data.fixed) return;
       var clsPrefix = _this.props.clsPrefix;
 
-      event.target.className = clsPrefix + "-thead-th-drag-gap th-drag-gap-hover";
+      if (event.target.id != 'th-online') {
+        event.target.className = clsPrefix + "-thead-th-drag-gap th-drag-gap-hover";
+      }
     };
 
     _this.ableOnMouseMove = function (event, data) {
@@ -118,7 +120,9 @@ var TableHeader = function (_Component) {
       if (_this.border) return;
       var clsPrefix = _this.props.clsPrefix;
 
-      event.target.className = clsPrefix + "-thead-th-drag-gap th-drag-gap";
+      if (event.target.id != 'th-online') {
+        event.target.className = clsPrefix + "-thead-th-drag-gap th-drag-gap";
+      }
     };
 
     _this.onMouseDown = function (event, data) {
@@ -322,7 +326,20 @@ var TableHeader = function (_Component) {
             onChange: (0, _throttleDebounce.debounce)(filterDelay || 300, _this.handlerFilterTextChange.bind(_this, dataIndex))
             // onChange={this.handlerFilterTextChange.bind(this, dataIndex)}
             , onSelectDropdown: _this.handlerFilterDropChange.bind(_this, dataIndex),
-            filterDropdown: rows[1][index]["filterdropdown"]
+            filterDropdown: rows[1][index]["filterdropdown"],
+            filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number
+          });
+        //数值输入
+        case "number":
+          return _react2["default"].createElement(_FilterType2["default"], {
+            locale: locale,
+            rendertype: type,
+            clsPrefix: clsPrefix,
+            className: clsPrefix + " filter-text",
+            onChange: (0, _throttleDebounce.debounce)(filterDelay || 300, _this.handlerFilterTextChange.bind(_this, dataIndex)),
+            onSelectDropdown: _this.handlerFilterDropChange.bind(_this, dataIndex),
+            filterDropdown: rows[1][index]["filterdropdown"],
+            filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number
           });
         //下拉框选择
         case "dropdown":
@@ -351,7 +368,8 @@ var TableHeader = function (_Component) {
             onChange: _this.handlerFilterTextChange.bind(_this, dataIndex),
             onSelectDropdown: _this.handlerFilterDropChange.bind(_this, dataIndex),
             filterDropdown: rows[1][index]["filterdropdown"],
-            onFocus: rows[1][index]["filterdropdownfocus"]
+            onFocus: rows[1][index]["filterdropdownfocus"],
+            filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number
           });
         //日期
         case "date":
@@ -363,7 +381,8 @@ var TableHeader = function (_Component) {
             format: rows[1][index]["format"] || "YYYY-MM-DD",
             onChange: _this.handlerFilterTextChange.bind(_this, dataIndex),
             onSelectDropdown: _this.handlerFilterDropChange.bind(_this, dataIndex),
-            filterDropdown: rows[1][index]["filterdropdown"]
+            filterDropdown: rows[1][index]["filterdropdown"],
+            filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number
           });
         default:
           //不匹配类型默认文本输入
@@ -564,6 +583,7 @@ var TableHeader = function (_Component) {
               thClassName += "" + fixedStyle;
               if (!da.fixed) {
                 thLineObj = {
+                  //----------------
                   onMouseMove: function onMouseMove(e) {
                     e.stopPropagation();_this2.onMouseMove(e, da);
                   },
@@ -579,16 +599,20 @@ var TableHeader = function (_Component) {
                   onMouseOver: function onMouseOver(e) {
                     _this2.onMouseOver(e, da);
                   },
-                  className: clsPrefix + "-thead-th-drag-gap "
+                  className: clsPrefix + "-thead-th-drag-gap th-drag-gap"
                 };
               }
               return _react2["default"].createElement(
                 "th",
                 _extends({ key: Math.random() }, thAbleObj, thBorObj, { className: thClassName }),
                 da.children,
-                da.fixed ? "" : _react2["default"].createElement("div", _extends({ ref: function ref(el) {
+                da.fixed ? "" : _react2["default"].createElement(
-                    return _this2.gap = el;
+                  "div",
-                  } }, thLineObj))
+                  _extends({ ref: function ref(el) {
+                      return _this2.gap = el;
+                    } }, thLineObj),
+                  _react2["default"].createElement("div", { id: "th-online", className: "online" })
+                )
               );
             } else {
               thDefaultObj = _extends({}, da, {

build/i18n.js

@@ -9,6 +9,12 @@ module.exports = {
     'unequal': '不等于',
     'begin': '以开始',
     'end': '以结尾',
+    'greater_than': '大于',
+    'great_than_equal_to': '大于等于',
+    'less_than': '小于',
+    'less_than_equal_to': '小于等于',
+    'be_equal_to': '等于',
+    'not_equal_to': '不等于',
     'en-us': {
         'resetSettings': 'reset settings',
         'include': 'include',
@@ -16,7 +22,13 @@ module.exports = {
         'equal': 'equal',
         'unequal': 'unequal',
         'begin': 'begin',
-        'end': 'end'
+        'end': 'end',
+        'greater_than': 'greater than',
+        'great_than_equal_to': 'great than equal to',
+        'less_than': 'less than',
+        'less_than_equal_to': 'less than equal to',
+        'be_equal_to': 'be equal to',
+        'not_equal_to': 'not equal to'
     },
     'zh-tw': {
         'resetSettings': '還原設置',
@@ -25,6 +37,12 @@ module.exports = {
         'equal': '等於',
         'unequal': '不等於',
         'begin': '以開始',
-        'end': '以結尾'
+        'end': '以結尾',
+        'greater_than': '大於',
+        'great_than_equal_to': '大於等於',
+        'less_than': '小於',
+        'less_than_equal to': '小於等於',
+        'be_equal_to': '等於',
+        'not_equal_to': '不等於'
     }
 };

package.json

@@ -1,6 +1,6 @@
 {
  "name": "bee-table",
- "version": "1.5.8",
+ "version": "1.5.9",
  "description": "Table ui component for react",
  "keywords": [
   "react",
@@ -93,4 +93,4 @@
   "react-addons-test-utils": "^15.5.0",
   "react-dom": "^15.5.0"
  }
-}
+}