diff --git a/build/Table.css b/build/Table.css index 76a4ebf..5a1b347 100644 --- a/build/Table.css +++ b/build/Table.css @@ -310,7 +310,7 @@ .u-table-filter-column-pop-cont { margin: 0px; max-height: 300px; - overflow-y: scroll; + overflow-y: auto; color: #212121; } .u-table-filter-column-clear-setting { cursor: pointer; @@ -384,6 +384,11 @@ display: none; } .u-table ::-webkit-scrollbar-track-piece { display: none; } + .u-table .row-dragg-able { + cursor: move; } + .u-table .u-table-drag-hidden-cont { + width: 100px; + height: 40px; } .u-table:focus { outline: none; @@ -617,3 +622,21 @@ .u-table-drag-hidden-cont { position: absolute; top: -1000px; } + +.u-editable-table .u-table .u-table-row-hover .editable-cell-text-wrapper { + padding-left: 4px; + border: 1px solid #c1c7d0; } + +.u-editable-table .u-table .editable-cell-text-wrapper:hover { + padding-left: 4px; + border: 1px solid #a5adba; } + +.u-editable-table .u-table .editable-cell-input-wrapper:focus { + outline: none; } + +.u-editable-table-tp .tooltip-arrow { + top: 1px !important; + border-bottom-color: #F44336 !important; } + +.u-editable-table-tp .tooltip-inner { + border-color: #F44336 !important; } diff --git a/build/Table.js b/build/Table.js index a6e0a95..417f629 100644 --- a/build/Table.js +++ b/build/Table.js @@ -173,14 +173,33 @@ var Table = function (_Component) { }); }; - _this.onDragRow = function (currentIndex, targetIndex) { - var data = _this.state.data, - currentObj = data[currentIndex], - targetObj = data[targetIndex]; + _this.getTableUID = function () { + var uid = "_table_uid_" + new Date().getTime(); + _this.tableUid = uid; + var div = document.createElement("div"); + // div.className = "u-table-drag-hidden-cont"; + div.className = "u-table-drag-hidden-cont"; + div.id = uid; + _this.contentTable.appendChild(div); + }; - console.log(currentIndex + " ----------onRowDragEnd-------- " + targetIndex); - data.splice(targetIndex, 0, data.splice(currentIndex, 1).shift()); - console.log(" _data---- ", data); + _this.onDragRow = function (currentKey, targetKey) { + var data = _this.state.data, + currentIndex = void 0, + targetIndex = void 0; + data.forEach(function (da, i) { + if (da.key == currentKey) { + currentIndex = i; + } + if (da.key == targetKey) { + targetIndex = i; + } + }); + if (currentIndex < targetIndex) { + data.splice(targetIndex, 0, data.splice(currentIndex, 1).shift()); + } else { + data.splice(targetIndex + 1, 0, data.splice(currentIndex, 1).shift()); + } _this.setState({ data: data }); @@ -283,10 +302,12 @@ var Table = function (_Component) { _this.handleRowHover = _this.handleRowHover.bind(_this); _this.computeTableWidth = _this.computeTableWidth.bind(_this); _this.onBodyMouseLeave = _this.onBodyMouseLeave.bind(_this); + _this.tableUid = null; return _this; } Table.prototype.componentDidMount = function componentDidMount() { + this.getTableUID(); _utils.EventUtil.addHandler(this.contentTable, 'keydown', this.onKeyDown); _utils.EventUtil.addHandler(this.contentTable, 'focus', this.onFocus); setTimeout(this.resetScrollX, 300); @@ -786,7 +807,7 @@ var Table = function (_Component) { indent: indent, indentSize: props.indentSize, needIndentSpaced: needIndentSpaced, - className: className, + className: className + ' ' + (this.props.rowDraggAble ? ' row-dragg-able ' : ''), record: record, expandIconAsCell: expandIconAsCell, onDestroy: this.onRowDestroy, @@ -820,7 +841,8 @@ var Table = function (_Component) { bodyDisplayInRow: props.bodyDisplayInRow, rowDraggAble: this.props.rowDraggAble, onDragRow: this.onDragRow, - contentTable: this.contentTable + contentTable: this.contentTable, + tableUid: this.tableUid }))); this.treeRowIndex++; var subVisible = visible && isRowExpanded; diff --git a/build/TableRow.js b/build/TableRow.js index cb79a73..ccca082 100644 --- a/build/TableRow.js +++ b/build/TableRow.js @@ -102,6 +102,11 @@ var TableRow = function (_Component) { target = _utils.Event.getTarget(event); _this.currentIndex = target.getAttribute("data-row-key"); _this._dragCurrent = target; + + //TODO 自定义图像后续需要增加。 + // let crt = this.synchronizeTableTrShadow(); + // document.getElementById(this.props.tableUid).appendChild(crt); + // event.dataTransfer.setDragImage(crt, 0, 0); event.dataTransfer.effectAllowed = "move"; event.dataTransfer.setData("Text", _this.currentIndex); }; @@ -119,15 +124,37 @@ var TableRow = function (_Component) { var event = _utils.Event.getEvent(e), _target = _utils.Event.getTarget(event), target = _target.parentNode; - var currentIndex = target.getAttribute("data-row-key"); - if (!currentIndex || currentIndex === _this.currentIndex) return; + + var currentKey = event.dataTransfer.getData("text"); + var targetKey = target.getAttribute("data-row-key"); + + if (!targetKey || targetKey === currentKey) return; if (target.nodeName.toUpperCase() === "TR") { - _this.synchronizeTableTr(_this.currentIndex, null); + _this.synchronizeTableTr(currentKey, null); + _this.synchronizeTableTr(targetKey, null); // target.setAttribute("style",""); // this.synchronizeTrStyle(this.currentIndex,false); } - var _currentIndex = event.dataTransfer.getData("text"); - onDragRow && onDragRow(parseInt(_this.currentIndex--), parseInt(currentIndex--)); + onDragRow && onDragRow(currentKey, targetKey); + }; + + _this.synchronizeTableTrShadow = function () { + var _this$props2 = _this.props, + contentTable = _this$props2.contentTable, + index = _this$props2.index; + + + var _table_cont = contentTable.querySelector('.u-table-scroll table tbody').getElementsByTagName("tr")[index], + _table_trs = _table_cont.getBoundingClientRect(), + _table_fixed_left_trs = contentTable.querySelector('.u-table-fixed-left table tbody').getElementsByTagName("tr")[index].getBoundingClientRect(), + _table_fixed_right_trs = contentTable.querySelector('.u-table-fixed-right table tbody').getElementsByTagName("tr")[index].getBoundingClientRect(); + + var div = document.createElement("div"); + var style = "wdith:" + (_table_trs.width + _table_fixed_left_trs.width + _table_fixed_right_trs.width) + "px"; + style += "height:" + _table_trs.height + "px"; + style += "classname:" + _table_cont.className; + div.setAttribute("style", style); + return div; }; _this.synchronizeTableTr = function (currentIndex, type) { @@ -274,6 +301,12 @@ var TableRow = function (_Component) { */ + /** + *同步当前拖拽到阴影 + * @memberof TableRow + */ + + /** * 同步自己,也需要同步当前行的行显示 */ diff --git a/build/lib/sum.js b/build/lib/sum.js index d4c452f..5987695 100644 --- a/build/lib/sum.js +++ b/build/lib/sum.js @@ -106,9 +106,9 @@ function sum(Table) { return _this; } - /** - * 获取当前的表格类型。 - * + /** + * 获取当前的表格类型。 + * */ diff --git a/build/lib/util.js b/build/lib/util.js index 8d6a331..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; }; @@ -9,71 +9,71 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < argument exports.sortBy = sortBy; exports.compare = compare; exports.ObjectAssign = ObjectAssign; -/* -* 快速排序,按某个属性,或按“获取排序依据的函数”,来排序. -* @method soryBy -* @static -* @param {array} arr 待处理数组 -* @param {string|function} prop 排序依据属性,获取 -* @param {boolean} desc 降序 -* @return {array} 返回排序后的新数组 +/* +* 快速排序,按某个属性,或按“获取排序依据的函数”,来排序. +* @method soryBy +* @static +* @param {array} arr 待处理数组 +* @param {string|function} prop 排序依据属性,获取 +* @param {boolean} desc 降序 +* @return {array} 返回排序后的新数组 */ 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; }; -/** - * 数组对象排序 - * console.log(arr.sort(compare('age'))) - * @param {} property +/** + * 数组对象排序 + * console.log(arr.sort(compare('age'))) + * @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; + }; } -/** - * 简单数组数据对象拷贝 - * @param {*} obj 要拷贝的对象 +/** + * 简单数组数据对象拷贝 + * @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/build/render/CheckboxRender.js b/build/render/CheckboxRender.js index 1e4ba25..8473356 100644 --- a/build/render/CheckboxRender.js +++ b/build/render/CheckboxRender.js @@ -19,11 +19,11 @@ function _possibleConstructorReturn(self, call) { if (!self) { throw new Referen 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); } -/** - * 渲染checkbox - * @param Checkbox - * @param Icon - * @returns {CheckboxRender} +/** + * 渲染checkbox + * @param Checkbox + * @param Icon + * @returns {CheckboxRender} */ function renderCheckbox(Checkbox, Icon) { return function (_Component) { diff --git a/build/render/InputRender.js b/build/render/InputRender.js index 68f898d..04c7002 100644 --- a/build/render/InputRender.js +++ b/build/render/InputRender.js @@ -28,12 +28,12 @@ function _possibleConstructorReturn(self, call) { if (!self) { throw new Referen 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); } -/** - * 渲染输入框 - * @param Form - * @param Input - * @param Icon - * @returns {InputRender} +/** + * 渲染输入框 + * @param Form + * @param Input + * @param Icon + * @returns {InputRender} */ function renderInput(Form, Input, Icon) { var _class, _temp2; diff --git a/build/render/SelectRender.js b/build/render/SelectRender.js index d72159b..a1d55db 100644 --- a/build/render/SelectRender.js +++ b/build/render/SelectRender.js @@ -26,11 +26,11 @@ function _possibleConstructorReturn(self, call) { if (!self) { throw new Referen 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); } -/** - * 渲染下拉框 - * @param Select - * @param Icon - * @returns {SelectRender} +/** + * 渲染下拉框 + * @param Select + * @param Icon + * @returns {SelectRender} */ function renderSelect(Select, Icon) { var _class, _temp2; diff --git a/package.json b/package.json index 03ee31e..4bc77e5 100644 --- a/package.json +++ b/package.json @@ -1,97 +1,97 @@ { - "name": "bee-table", - "version": "2.0.15", - "description": "Table ui component for react", - "keywords": [ - "react", - "react-component", - "bee-table", - "iuap-design", - "tinper-bee", - "Table" + "name": "bee-table", + "version": "2.0.16", + "description": "Table ui component for react", + "keywords": [ + "react", + "react-component", + "bee-table", + "iuap-design", + "tinper-bee", + "Table" + ], + "engines": { + "node": ">=6.0.0" + }, + "jest": { + "moduleFileExtensions": [ + "js", + "jsx" ], - "engines": { - "node": ">=6.0.0" - }, - "jest": { - "moduleFileExtensions": [ - "js", - "jsx" - ], - "transform": { - "^.+\\.js$": "babel-jest" - } - }, - "homepage": "https://github.com/tinper-bee/bee-table.git", - "author": "Yonyou FED", - "repository": "http://github.com/tinper-bee/bee-table", - "bugs": "https://github.com/tinper-bee/bee-table.git/issues", - "license": "MIT", - "main": "./build/index.js", - "config": { - "port": 3000, - "commitizen": { - "path": "./node_modules/cz-conventional-changelog" - } - }, - "scripts": { - "dev": "bee-tools run start", - "build": "bee-tools run build", - "lint": "bee-tools run lint", - "test": "jest", - "chrome": "bee-tools run chrome", - "coveralls": "jest", - "browsers": "bee-tools run browsers", - "pub": "bee-tools run pub", - "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0" - }, - "dependencies": { - "bee-button": "latest", - "bee-checkbox": "latest", - "bee-datepicker": "^2.0.28", - "bee-dropdown": "^2.0.4", - "bee-form-control": "latest", - "bee-icon": "latest", - "bee-input-number": "^2.0.7", - "bee-loading": "^1.0.9", - "bee-locale": "0.0.13", - "bee-menus": "^2.0.6", - "bee-radio": "^2.0.8", - "bee-select": "^2.0.11", - "classnames": "^2.2.5", - "component-classes": "^1.2.6", - "lodash.clonedeep": "^4.5.0", - "object-path": "^0.11.3", - "ref-tree": "^2.0.1-beta.1", - "shallowequal": "^1.0.2", - "throttle-debounce": "^2.0.1", - "tinper-bee-core": "latest", - "warning": "^3.0.0" - }, - "peerDependencies": { - "react": "^15.3.0 || ^16.0", - "react-dom": "^15.3.0 || ^16.0", - "prop-types": "^15.6.0" - }, - "devDependencies": { - "babel-jest": "^22.0.4", - "bee-clipboard": "^2.0.0", - "bee-drawer": "0.0.2", - "bee-layout": "latest", - "bee-pagination": "^2.0.5", - "bee-panel": "latest", - "bee-popover": "^2.0.0", - "chai": "^3.5.0", - "console-polyfill": "~0.2.1", - "cz-conventional-changelog": "^2.1.0", - "enzyme": "^2.9.1", - "es5-shim": "~4.1.10", - "jest": "^22.0.4", - "react": "^16.6.3", - "react-addons-test-utils": "^15.5.0", - "react-dom": "^16.6.3", - "ref-tree": "^2.0.1-beta.1", - "reqwest": "^2.0.5", - "tinper-bee": "latest" + "transform": { + "^.+\\.js$": "babel-jest" } -} + }, + "homepage": "https://github.com/tinper-bee/bee-table.git", + "author": "Yonyou FED", + "repository": "http://github.com/tinper-bee/bee-table", + "bugs": "https://github.com/tinper-bee/bee-table.git/issues", + "license": "MIT", + "main": "./build/index.js", + "config": { + "port": 3000, + "commitizen": { + "path": "./node_modules/cz-conventional-changelog" + } + }, + "scripts": { + "dev": "bee-tools run start", + "build": "bee-tools run build", + "lint": "bee-tools run lint", + "test": "jest", + "chrome": "bee-tools run chrome", + "coveralls": "jest", + "browsers": "bee-tools run browsers", + "pub": "bee-tools run pub", + "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0" + }, + "dependencies": { + "bee-button": "latest", + "bee-checkbox": "latest", + "bee-datepicker": "^2.0.28", + "bee-dropdown": "^2.0.4", + "bee-form-control": "latest", + "bee-icon": "latest", + "bee-input-number": "^2.0.7", + "bee-loading": "^1.0.9", + "bee-locale": "0.0.13", + "bee-menus": "^2.0.6", + "bee-radio": "^2.0.8", + "bee-select": "^2.0.11", + "classnames": "^2.2.5", + "component-classes": "^1.2.6", + "lodash.clonedeep": "^4.5.0", + "object-path": "^0.11.3", + "ref-tree": "^2.0.1-beta.1", + "shallowequal": "^1.0.2", + "throttle-debounce": "^2.0.1", + "tinper-bee-core": "latest", + "warning": "^3.0.0" + }, + "peerDependencies": { + "react": "^15.3.0 || ^16.0", + "react-dom": "^15.3.0 || ^16.0", + "prop-types": "^15.6.0" + }, + "devDependencies": { + "babel-jest": "^22.0.4", + "bee-clipboard": "^2.0.0", + "bee-drawer": "0.0.2", + "bee-layout": "latest", + "bee-pagination": "^2.0.5", + "bee-panel": "latest", + "bee-popover": "^2.0.0", + "chai": "^3.5.0", + "console-polyfill": "~0.2.1", + "cz-conventional-changelog": "^2.1.0", + "enzyme": "^2.9.1", + "es5-shim": "~4.1.10", + "jest": "^22.0.4", + "react": "^16.6.3", + "react-addons-test-utils": "^15.5.0", + "react-dom": "^16.6.3", + "ref-tree": "^2.0.1-beta.1", + "reqwest": "^2.0.5", + "tinper-bee": "latest" + } +} \ No newline at end of file