diff --git a/build/Table.css b/build/Table.css index eeaa362..f8cd1f4 100644 --- a/build/Table.css +++ b/build/Table.css @@ -4,7 +4,7 @@ font-size: 12px; color: #212121; position: relative; - line-height: 1.5; + line-height: 1.33; overflow: hidden; } .u-table-body { position: relative; } @@ -47,13 +47,15 @@ background: rgb(235, 236, 240); } .u-table th, .u-table td { - padding: 12px 8px; + padding: 12px 16px; word-break: break-all; } .u-table tr.filterable th { padding-top: 5px !important; padding-bottom: 5px !important; } .u-table tr.filterable th .filterContext { height: 35px; } + .u-table tr.filterable th .u-select-selection--single { + height: 26px; } .u-table-row-hover { background: rgb(235, 236, 240); } .u-table-scroll { @@ -80,7 +82,7 @@ background: rgb(241, 242, 245); color: rgb(33, 33, 33); } .u-table.fixed-height td { - padding: 0px 8px; } + padding: 0px 16px; } .u-table-fixed-header .u-table-body { background: #fff; position: relative; } @@ -98,17 +100,17 @@ overflow-y: scroll; box-sizing: border-box; } .u-table-title { - padding: 12px 8px; + padding: 12px 16px; border-top: 1px solid rgb(193, 199, 208); } .u-table-content { position: relative; } .u-table-footer { - padding: 12px 8px; + padding: 12px 16px; border-bottom: 1px solid rgb(193, 199, 208); } .u-table-footer .u-table-scroll { overflow-x: hidden; } .u-table-footer .u-table { - margin: -12px -8px; } + margin: -12px -16px; } .u-table-placeholder { padding: 12px 8px; background: #fff; @@ -219,13 +221,18 @@ .u-table-thead th .bee-table-column-sorter { position: relative; margin-left: 4px; - height: 1em; + height: 16px; vertical-align: middle; text-align: center; - display: inline-block; } + display: inline-block; + margin-top: -3px; } + .u-table-thead th .bee-table-column-sorter i { + padding: 0px; + font-weight: 600; + color: #505F79; } .u-table-thead th .bee-table-column-sorter > .bee-table-column-sorter-down, .u-table-thead th .bee-table-column-sorter > .bee-table-column-sorter-up, .u-table-thead th .bee-table-column-sorter > .bee-table-column-sorter-flat { - line-height: 6px; + line-height: 16px; display: block; width: 34px; cursor: pointer; } @@ -296,17 +303,18 @@ position: relative; } .u-table-filter-column-filter-icon { position: absolute; - top: 8px; - right: 18px; - width: 22px; - height: 25px; - line-height: 25px; + width: 30px; + height: 38px; + line-height: 38px; + right: 12px; + top: 1px; z-index: 2; background: rgb(241, 242, 245); text-align: center; cursor: pointer; } .u-table-filter-column-filter-icon i.uf { - padding: 0px; } + padding: 0px; + color: #505F79; } .u-table-filter-column-pop-cont-item { margin-top: 8px; cursor: pointer; } @@ -329,9 +337,14 @@ display: none; pointer-events: none; } .u-table .u-checkbox { - height: 16px; - line-height: 16px; + height: 14px; + line-height: 14px; margin: 0px; } + .u-table .u-checkbox .u-checkbox-label { + line-height: 14px; } + .u-table .u-checkbox .u-checkbox-label:before, .u-table .u-checkbox .u-checkbox-label:after { + width: 14px; + height: 14px; } .u-table:focus { outline: none; @@ -521,16 +534,16 @@ .u-filter-dropdown-menu-wrap { z-index: 1800; } .u-filter-dropdown-menu-wrap .u-dropdown-menu li.u-dropdown-menu-item { - line-height: 28px; - height: 28px; + line-height: 26px; + height: 26px; padding: 0px 16px 0 16px; cursor: pointer; } .filter-wrap .u-form-control { - height: 28px; } + height: 26px; } .filter-wrap .u-input-number.u-input-group.simple .u-input-group-btn .icon-group { - height: 28px; } + height: 26px; } .u-row-hover { position: absolute; diff --git a/build/lib/bigData.js b/build/lib/bigData.js index 1c6e038..e285b10 100644 --- a/build/lib/bigData.js +++ b/build/lib/bigData.js @@ -490,6 +490,7 @@ function bigData(Table) { if (!_this.props.expandedRowKeys) { if (expandState) { expandedRowKeys.push(rowKey); + _this4.setState({ needRender: !needRender }); } else { var _index = -1; expandedRowKeys.forEach(function (r, i) { diff --git a/build/lib/dragColumn.js b/build/lib/dragColumn.js index 74ae9b6..c4d1c4d 100644 --- a/build/lib/dragColumn.js +++ b/build/lib/dragColumn.js @@ -1,7 +1,7 @@ 'use strict'; Object.defineProperty(exports, "__esModule", { - value: true + value: true }); var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; @@ -36,137 +36,137 @@ var cloneDeep = require('lodash.clonedeep'); function dragColumn(Table) { - return function (_Component) { - _inherits(DragColumn, _Component); + return function (_Component) { + _inherits(DragColumn, _Component); - function DragColumn(props) { - _classCallCheck(this, DragColumn); + function DragColumn(props) { + _classCallCheck(this, DragColumn); - var _this = _possibleConstructorReturn(this, _Component.call(this, props)); + var _this = _possibleConstructorReturn(this, _Component.call(this, props)); - _this.setColumOrderByIndex = function (_column) { - _column.forEach(function (da, i) { - da.dragIndex = i; - da.drgHover = false; - }); - return _column; - }; - - _this.onDrop = function (event, data) { - var dragSource = data.dragSource, - dragTarg = data.dragTarg; - var columns = _this.state.columns; - - var sourceIndex = -1, - targetIndex = -1; - - sourceIndex = columns.findIndex(function (da, i) { - return da.key == dragSource.key; - }); - targetIndex = columns.findIndex(function (da, i) { - return da.key == dragTarg.key; - }); - // for (let index = 0; index < columns.length; index++) { - // const da = columns[index]; - // if(da.key === dragSource.key){ - // columns[index] = dragTargColum; - // } - // if(da.key === dragTarg.key){ - // columns[index] = dragSourceColum; - // } - // } - // 向前移动 - if (targetIndex < sourceIndex) { - targetIndex = targetIndex + 1; - } - columns.splice(targetIndex, 0, columns.splice(sourceIndex, 1)[0]); - _this.setState({ - columns: cloneDeep(columns) - }); - if (_this.props.onDrop) { - _this.props.onDrop(event, data, columns); - } - }; - - _this.getTarget = function (evt) { - return evt.target || evt.srcElement; - }; - - _this.state = { - columns: _this.setColumOrderByIndex(props.columns) - }; - return _this; - } - - DragColumn.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) { - if (nextProps.columns != this.props.columns) { - this.setState({ - columns: this.setColumOrderByIndex(nextProps.columns) - }); - } - }; - - DragColumn.prototype.cloneDeep = function cloneDeep(obj) { - if ((typeof obj === 'undefined' ? 'undefined' : _typeof(obj)) !== 'object' || Object.keys(obj).length === 0) { - return obj; - } - var resultData = {}; - return this.recursion(obj, resultData); - }; - - DragColumn.prototype.recursion = function (_recursion) { - function recursion(_x) { - return _recursion.apply(this, arguments); - } - - recursion.toString = function () { - return _recursion.toString(); - }; - - return recursion; - }(function (obj) { - var data = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; - - for (key in obj) { - if (_typeof(obj[key]) == 'object' && Object.keys(obj[key].length > 0)) { - data[key] = recursion(obj[key]); - } else { - data[key] = obj[key]; - } - } - return data; + _this.setColumOrderByIndex = function (_column) { + _column.forEach(function (da, i) { + da.dragIndex = i; + da.drgHover = false; }); + return _column; + }; - DragColumn.prototype.render = function render() { - var _props = this.props, - data = _props.data, - dragborder = _props.dragborder, - draggable = _props.draggable, - className = _props.className, - columns = _props.columns, - onDragStart = _props.onDragStart, - onDragEnter = _props.onDragEnter, - onDragOver = _props.onDragOver, - onDrop = _props.onDrop, - others = _objectWithoutProperties(_props, ['data', 'dragborder', 'draggable', 'className', 'columns', 'onDragStart', 'onDragEnter', 'onDragOver', 'onDrop']); + _this.onDrop = function (event, data) { + var dragSource = data.dragSource, + dragTarg = data.dragTarg; + var columns = _this.state.columns; - var key = new Date().getTime(); - return _react2["default"].createElement(Table, _extends({}, others, { - columns: this.state.columns, - data: data, - className: className + ' u-table-drag-border', - onDragStart: this.onDragStart, - onDragOver: this.onDragOver, - onDrop: this.onDrop, - onDragEnter: this.onDragEnter, - draggable: draggable, - dragborder: dragborder - // dragborder={false} - , dragborderKey: key - })); - }; + var sourceIndex = -1, + targetIndex = -1; - return DragColumn; - }(_react.Component); + sourceIndex = columns.findIndex(function (da, i) { + return da.key == dragSource.key; + }); + targetIndex = columns.findIndex(function (da, i) { + return da.key == dragTarg.key; + }); + // for (let index = 0; index < columns.length; index++) { + // const da = columns[index]; + // if(da.key === dragSource.key){ + // columns[index] = dragTargColum; + // } + // if(da.key === dragTarg.key){ + // columns[index] = dragSourceColum; + // } + // } + // 向前移动 + if (targetIndex < sourceIndex) { + targetIndex = targetIndex + 1; + } + columns.splice(targetIndex, 0, columns.splice(sourceIndex, 1)[0]); + _this.setState({ + columns: cloneDeep(columns) + }); + if (_this.props.onDrop) { + _this.props.onDrop(event, data, columns); + } + }; + + _this.getTarget = function (evt) { + return evt.target || evt.srcElement; + }; + + _this.state = { + columns: _this.setColumOrderByIndex(props.columns) + }; + return _this; + } + + DragColumn.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) { + if (nextProps.columns != this.props.columns) { + this.setState({ + columns: this.setColumOrderByIndex(nextProps.columns) + }); + } + }; + + DragColumn.prototype.cloneDeep = function cloneDeep(obj) { + if ((typeof obj === 'undefined' ? 'undefined' : _typeof(obj)) !== 'object' || Object.keys(obj).length === 0) { + return obj; + } + var resultData = {}; + return this.recursion(obj, resultData); + }; + + DragColumn.prototype.recursion = function (_recursion) { + function recursion(_x) { + return _recursion.apply(this, arguments); + } + + recursion.toString = function () { + return _recursion.toString(); + }; + + return recursion; + }(function (obj) { + var data = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; + + for (key in obj) { + if (_typeof(obj[key]) == 'object' && Object.keys(obj[key].length > 0)) { + data[key] = recursion(obj[key]); + } else { + data[key] = obj[key]; + } + } + return data; + }); + + DragColumn.prototype.render = function render() { + var _props = this.props, + data = _props.data, + dragborder = _props.dragborder, + draggable = _props.draggable, + className = _props.className, + columns = _props.columns, + onDragStart = _props.onDragStart, + onDragEnter = _props.onDragEnter, + onDragOver = _props.onDragOver, + onDrop = _props.onDrop, + others = _objectWithoutProperties(_props, ['data', 'dragborder', 'draggable', 'className', 'columns', 'onDragStart', 'onDragEnter', 'onDragOver', 'onDrop']); + + var key = new Date().getTime(); + return _react2["default"].createElement(Table, _extends({}, others, { + columns: this.state.columns, + data: data, + className: className + ' u-table-drag-border', + onDragStart: this.onDragStart, + onDragOver: this.onDragOver, + onDrop: this.onDrop, + onDragEnter: this.onDragEnter, + draggable: draggable, + dragborder: dragborder + // dragborder={false} + , dragborderKey: key + })); + }; + + return DragColumn; + }(_react.Component); } module.exports = exports['default']; \ No newline at end of file diff --git a/build/lib/util.js b/build/lib/util.js index 237dba1..9ea2e19 100644 --- a/build/lib/util.js +++ b/build/lib/util.js @@ -1,7 +1,7 @@ 'use strict'; Object.defineProperty(exports, "__esModule", { - value: true + value: true }); var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; @@ -20,29 +20,29 @@ exports.ObjectAssign = ObjectAssign; */ function sortBy(arr, prop, desc) { - var props = [], - ret = [], - i = 0, - len = arr.length; - if (typeof prop == 'string') { - for (; i < len; i++) { - var oI = arr[i]; - (props[i] = new String(oI && oI[prop] || ''))._obj = oI; + var props = [], + ret = [], + i = 0, + len = arr.length; + if (typeof prop == 'string') { + for (; i < len; i++) { + var oI = arr[i]; + (props[i] = new String(oI && oI[prop] || ''))._obj = oI; + } + } else if (typeof prop == 'function') { + for (; i < len; i++) { + var _oI = arr[i]; + (props[i] = new String(_oI && prop(_oI) || ''))._obj = _oI; + } + } else { + throw '参数类型错误'; } - } else if (typeof prop == 'function') { - for (; i < len; i++) { - var _oI = arr[i]; - (props[i] = new String(_oI && prop(_oI) || ''))._obj = _oI; + props.sort(); + for (i = 0; i < len; i++) { + ret[i] = props[i]._obj; } - } else { - throw '参数类型错误'; - } - props.sort(); - for (i = 0; i < len; i++) { - ret[i] = props[i]._obj; - } - if (desc) ret.reverse(); - return ret; + if (desc) ret.reverse(); + return ret; }; /** @@ -51,11 +51,11 @@ function sortBy(arr, prop, desc) { * @param {} property */ function compare(property) { - return function (a, b) { - var value1 = a[property]; - var value2 = b[property]; - return value1 - value2; - }; + return function (a, b) { + var value1 = a[property]; + var value2 = b[property]; + return value1 - value2; + }; } /** @@ -63,17 +63,17 @@ function compare(property) { * @param {*} obj 要拷贝的对象 */ function ObjectAssign(obj) { - var b = obj instanceof Array; - var tagObj = b ? [] : {}; - if (b) { - //数组 - obj.forEach(function (da) { - var _da = {}; - _extends(_da, da); - tagObj.push(_da); - }); - } else { - _extends(tagObj, obj); - } - return tagObj; + var b = obj instanceof Array; + var tagObj = b ? [] : {}; + if (b) { + //数组 + obj.forEach(function (da) { + var _da = {}; + _extends(_da, da); + tagObj.push(_da); + }); + } else { + _extends(tagObj, obj); + } + return tagObj; } \ No newline at end of file diff --git a/demo/TableDemo.scss b/demo/TableDemo.scss index bec23e4..4cfa6d2 100644 --- a/demo/TableDemo.scss +++ b/demo/TableDemo.scss @@ -1,20 +1,20 @@ -@import "../node_modules/tinper-bee-core/scss/index.scss"; -@import "../node_modules/bee-panel/src/Panel.scss"; -@import "../node_modules/bee-layout/src/Layout.scss"; -@import "../node_modules/bee-button/src/Button.scss"; -@import "../node_modules/bee-transition/src/Transition.scss"; -@import "../node_modules/bee-popconfirm/src/Popconfirm.scss"; -@import "../node_modules/bee-form-control/src/FormControl.scss"; -@import "../node_modules/bee-pagination/src/Pagination.scss"; -@import "../node_modules/bee-checkbox/src/Checkbox.scss"; -@import "../node_modules/bee-select/src/Select.scss"; +// @import "../node_modules/tinper-bee-core/scss/index.scss"; +// @import "../node_modules/bee-panel/src/Panel.scss"; +// @import "../node_modules/bee-layout/src/Layout.scss"; +// @import "../node_modules/bee-button/src/Button.scss"; +// @import "../node_modules/bee-transition/src/Transition.scss"; +// @import "../node_modules/bee-popconfirm/src/Popconfirm.scss"; +// @import "../node_modules/bee-form-control/src/FormControl.scss"; +// @import "../node_modules/bee-pagination/src/Pagination.scss"; +// @import "../node_modules/bee-checkbox/src/Checkbox.scss"; +// @import "../node_modules/bee-select/src/Select.scss"; // @import "../node_modules/bee-form/src/Form.scss"; -@import "../node_modules/bee-popover/src/Popover.scss"; -@import "../node_modules/bee-tooltip/src/Tooltip.scss"; -@import "../node_modules/bee-message/build/Message.css"; -@import "../node_modules/bee-dropdown/build/Dropdown.css"; -@import "../node_modules/bee-input-number/build/InputNumber.css"; -@import "../node_modules/bee-modal/build/Modal.css"; +// @import "../node_modules/bee-popover/src/Popover.scss"; +// @import "../node_modules/bee-tooltip/src/Tooltip.scss"; +// @import "../node_modules/bee-message/build/Message.css"; +// @import "../node_modules/bee-dropdown/build/Dropdown.css"; +// @import "../node_modules/bee-input-number/build/InputNumber.css"; +// @import "../node_modules/bee-modal/build/Modal.css"; @import "../src/Table.scss"; diff --git a/index.html b/index.html index 365dab2..80095b7 100644 --- a/index.html +++ b/index.html @@ -5,7 +5,7 @@