From adb21c5976e3b351a5407877922f7d2d67ffb3a3 Mon Sep 17 00:00:00 2001 From: jonyshi Date: Mon, 26 Nov 2018 20:42:18 +0800 Subject: [PATCH] publish 1.5.9 --- build/FilterDropDown.js | 186 +++++++++++++++++++++++++++++----------- build/FilterType.js | 58 ++++++++++++- build/Table.css | 21 +++-- build/Table.js | 13 +-- build/TableHeader.js | 42 +++++++-- build/i18n.js | 22 ++++- package.json | 4 +- 7 files changed, 269 insertions(+), 77 deletions(-) diff --git a/build/FilterDropDown.js b/build/FilterDropDown.js index 3ae3de1..a315c17 100644 --- a/build/FilterDropDown.js +++ b/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']; \ No newline at end of file diff --git a/build/FilterType.js b/build/FilterType.js index e672672..539182b 100644 --- a/build/FilterType.js +++ b/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() { diff --git a/build/Table.css b/build/Table.css index d0394ae..f10139b 100644 --- a/build/Table.css +++ b/build/Table.css @@ -326,10 +326,7 @@ .u-table-thead .filter-wrap .filter-btns { min-width: 58px; } .u-table-thead th { - background: #f7f7f7; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; } + background: #f7f7f7; } .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: 2px; + width: 20px; 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 { diff --git a/build/Table.js b/build/Table.js index a1fbfa5..66dbe70 100644 --- a/build/Table.js +++ b/build/Table.js @@ -475,14 +475,15 @@ var Table = function (_Component) { key: column.key, children: "过滤渲染", width: column.width, - filtertype: column.filterType, - dataindex: column.dataIndex, - datasource: _this2.props.data, - format: column.format, - filterdropdown: column.filterDropdown, + filtertype: column.filterType, //下拉的类型 包括['text','dropdown','date','daterange','number'] + dataindex: column.dataIndex, //field + datasource: _this2.props.data, //需要单独拿到数据处理 + format: column.format, //设置日期的格式 + filterdropdown: column.filterDropdown, //是否显示 show hide filterdropdownauto: column.filterDropdownAuto, //是否自定义数据 filterdropdowndata: column.filterDropdownData, //自定义数据格式 - filterdropdownfocus: column.filterDropdownFocus //焦点触发函数回调 + filterdropdownfocus: column.filterDropdownFocus, //焦点触发函数回调 + filterdropdowntype: column.filterDropdownType //下拉的类型分为 String,Number 默认是String }); } }); diff --git a/build/TableHeader.js b/build/TableHeader.js index d205802..43f4505 100644 --- a/build/TableHeader.js +++ b/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) { - return _this2.gap = el; - } }, thLineObj)) + da.fixed ? "" : _react2["default"].createElement( + "div", + _extends({ ref: function ref(el) { + return _this2.gap = el; + } }, thLineObj), + _react2["default"].createElement("div", { id: "th-online", className: "online" }) + ) ); } else { thDefaultObj = _extends({}, da, { diff --git a/build/i18n.js b/build/i18n.js index 3a01273..092b375 100644 --- a/build/i18n.js +++ b/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': '不等於' } }; \ No newline at end of file diff --git a/package.json b/package.json index 97ee006..654bb14 100644 --- a/package.json +++ b/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" } -} +} \ No newline at end of file