From 6c8af4fcabd8bb6a38427c6c2e592a0c9e3650d6 Mon Sep 17 00:00:00 2001 From: yangchch6 Date: Fri, 1 Mar 2019 11:08:23 +0800 Subject: [PATCH] publish 2.0.0 --- CHANGELOG.md | 6 +- build/ColumnManager.js | 313 ++++++++ build/ExpandIcon.js | 83 ++ build/FilterDropDown.js | 317 ++++++++ build/FilterType.js | 420 ++++++++++ build/Table.css | 42 +- build/Table.js | 1338 ++++++++++++++++++++++++++++++++ build/TableCell.js | 139 ++++ build/TableHeader.js | 751 ++++++++++++++++++ build/TableRow.js | 324 ++++++++ build/createStore.js | 40 + build/index.js | 10 + build/lib/bigData.js | 512 ++++++++++++ build/lib/dragColumn.js | 172 ++++ build/lib/filterColumn.js | 274 +++++++ build/lib/i18n.js | 48 ++ build/lib/multiSelect.js | 247 ++++++ build/lib/newMultiSelect.js | 195 +++++ build/lib/sort.js | 367 +++++++++ build/lib/sum.js | 126 +++ build/lib/util.js | 79 ++ build/render/CheckboxRender.js | 101 +++ build/render/DateRender.js | 154 ++++ build/render/InputRender.js | 194 +++++ build/render/RadioRender.js | 1 + build/render/SelectRender.js | 170 ++++ build/utils.js | 313 ++++++++ package.json | 2 +- 28 files changed, 6724 insertions(+), 14 deletions(-) create mode 100644 build/ColumnManager.js create mode 100644 build/ExpandIcon.js create mode 100644 build/FilterDropDown.js create mode 100644 build/FilterType.js create mode 100644 build/Table.js create mode 100644 build/TableCell.js create mode 100644 build/TableHeader.js create mode 100644 build/TableRow.js create mode 100644 build/createStore.js create mode 100644 build/index.js create mode 100644 build/lib/bigData.js create mode 100644 build/lib/dragColumn.js create mode 100644 build/lib/filterColumn.js create mode 100644 build/lib/i18n.js create mode 100644 build/lib/multiSelect.js create mode 100644 build/lib/newMultiSelect.js create mode 100644 build/lib/sort.js create mode 100644 build/lib/sum.js create mode 100644 build/lib/util.js create mode 100644 build/render/CheckboxRender.js create mode 100644 build/render/DateRender.js create mode 100644 build/render/InputRender.js create mode 100644 build/render/RadioRender.js create mode 100644 build/render/SelectRender.js create mode 100644 build/utils.js diff --git a/CHANGELOG.md b/CHANGELOG.md index f4ba025..e947822 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,5 @@ - -## [1.6.44](https://github.com/tinper-bee/bee-table/compare/v1.6.43...v1.6.44) (2019-02-26) + +# [2.0.0](https://github.com/tinper-bee/bee-table/compare/v1.6.43...v2.0.0) (2019-03-01) @@ -294,7 +294,7 @@ -## [1.5.1](https://github.com/tinper-bee/bee-table/compare/v1.5.0...v1.5.1) (2018-11-19) +## [1.5.1](https://github.com/tinper-bee/bee-table/compare/v1.5.0...v1.5.1) (2018-11-18) diff --git a/build/ColumnManager.js b/build/ColumnManager.js new file mode 100644 index 0000000..be93f87 --- /dev/null +++ b/build/ColumnManager.js @@ -0,0 +1,313 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + 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; }; + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _Column = require('./Column'); + +var _Column2 = _interopRequireDefault(_Column); + +var _ColumnGroup = require('./ColumnGroup'); + +var _ColumnGroup2 = _interopRequireDefault(_ColumnGroup); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; } + +function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } } + +function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + +//行控制管理 + +var ColumnManager = function () { + function ColumnManager(columns, elements, originWidth) { + _classCallCheck(this, ColumnManager); + + this._cached = {}; + + this.columns = columns || this.normalize(elements); + this.originWidth = originWidth; + } + + ColumnManager.prototype.isAnyColumnsFixed = function isAnyColumnsFixed() { + var _this = this; + + return this._cache('isAnyColumnsFixed', function () { + return _this.columns.some(function (column) { + return !!column.fixed; + }); + }); + }; + + ColumnManager.prototype.isAnyColumnsLeftFixed = function isAnyColumnsLeftFixed() { + var _this2 = this; + + return this._cache('isAnyColumnsLeftFixed', function () { + return _this2.columns.some(function (column) { + return column.fixed === 'left' || column.fixed === true; + }); + }); + }; + + ColumnManager.prototype.isAnyColumnsRightFixed = function isAnyColumnsRightFixed() { + var _this3 = this; + + return this._cache('isAnyColumnsRightFixed', function () { + return _this3.columns.some(function (column) { + return column.fixed === 'right'; + }); + }); + }; + + ColumnManager.prototype.leftColumns = function leftColumns() { + var _this4 = this; + + return this._cache('leftColumns', function () { + return _this4.groupedColumns().filter(function (column) { + return column.fixed === 'left' || column.fixed === true; + }); + }); + }; + + ColumnManager.prototype.rightColumns = function rightColumns() { + var _this5 = this; + + return this._cache('rightColumns', function () { + return _this5.groupedColumns().filter(function (column) { + return column.fixed === 'right'; + }); + }); + }; + + ColumnManager.prototype.centerColumns = function centerColumns() { + var _this6 = this; + + return this._cache('centerColumns', function () { + return _this6.groupedColumns().filter(function (column) { + return !column.fixed; + }); + }); + }; + + ColumnManager.prototype.leafColumns = function leafColumns() { + var _this7 = this; + + return this._cache('leafColumns', function () { + return _this7._leafColumns(_this7.columns); + }); + }; + + ColumnManager.prototype.leftLeafColumns = function leftLeafColumns() { + var _this8 = this; + + return this._cache('leftLeafColumns', function () { + return _this8._leafColumns(_this8.leftColumns()); + }); + }; + + ColumnManager.prototype.rightLeafColumns = function rightLeafColumns() { + var _this9 = this; + + return this._cache('rightLeafColumns', function () { + return _this9._leafColumns(_this9.rightColumns()); + }); + }; + + ColumnManager.prototype.centerLeafColumns = function centerLeafColumns() { + var _this10 = this; + + return this._cache('centerLeafColumns', function () { + return _this10._leafColumns(_this10.centerColumns()); + }); + }; + + // add appropriate rowspan and colspan to column + + + ColumnManager.prototype.groupedColumns = function groupedColumns(type) { + var _this11 = this; + + return this._cache('groupedColumns', function () { + var _groupColumns = function _groupColumns(columns) { + var currentRow = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0; + var parentColumn = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {}; + var rows = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : []; + + // track how many rows we got + rows[currentRow] = rows[currentRow] || []; + var grouped = []; + var setRowSpan = function setRowSpan(column) { + var rowSpan = rows.length - currentRow; + if (column && !column.children && // parent columns are supposed to be one row + rowSpan > 1 && (!column.rowSpan || column.rowSpan < rowSpan)) { + column.rowSpan = rowSpan; + } + }; + columns.forEach(function (column, index) { + var defaultOpt = { + ifshow: true + }; + if (!_this11.originWidth) { + defaultOpt.width = 200; + } + //获取非固定列 + if (type == 'nofixed' && column.fixed) { + return false; + } + var newColumn = _extends({}, defaultOpt, column); + rows[currentRow].push(newColumn); + parentColumn.colSpan = parentColumn.colSpan || 0; + if (newColumn.children && newColumn.children.length > 0) { + newColumn.children = _groupColumns(newColumn.children, currentRow + 1, newColumn, rows); + parentColumn.colSpan = parentColumn.colSpan + newColumn.colSpan; + } else { + parentColumn.colSpan++; + } + // update rowspan to all same row columns + for (var i = 0; i < rows[currentRow].length - 1; ++i) { + setRowSpan(rows[currentRow][i]); + } + // last column, update rowspan immediately + if (index + 1 === columns.length) { + setRowSpan(newColumn); + } + grouped.push(newColumn); + }); + return grouped; + }; + return _groupColumns(_this11.columns); + }); + }; + + ColumnManager.prototype.normalize = function normalize(elements) { + var _this12 = this; + + var columns = []; + _react2["default"].Children.forEach(elements, function (element) { + if (!_this12.isColumnElement(element)) return; + var column = _extends({}, element.props); + if (element.key) { + column.key = element.key; + } + if (element.type === _ColumnGroup2["default"]) { + column.children = _this12.normalize(column.children); + } + columns.push(column); + }); + return columns; + }; + + ColumnManager.prototype.isColumnElement = function isColumnElement(element) { + return element && (element.type === _Column2["default"] || element.type === _ColumnGroup2["default"]); + }; + + ColumnManager.prototype.reset = function reset(columns, elements) { + this.columns = columns || this.normalize(elements); + this._cached = {}; + }; + + ColumnManager.prototype.getColumnWidth = function getColumnWidth(contentWidth) { + var columns = this.leafColumns(); + var res = { computeWidth: 0, lastShowIndex: -1 }; + columns.forEach(function (col, index) { + //如果列显示 + if (col.ifshow) { + var width = col.width; + if (typeof width == 'string' && width.includes('%')) { + width = contentWidth * parseInt(col.width) / 100; + } + res.computeWidth += parseInt(width); + if (!col.fixed) { + res.lastShowIndex = index; + } + } + }); + return res; + }; + + ColumnManager.prototype.getLeftColumnsWidth = function getLeftColumnsWidth() { + var _this13 = this; + + var contentWidth = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1; + + return this._cache('leftColumnsWidth', function () { + var leftColumnsWidth = 0; + _this13.groupedColumns().forEach(function (column) { + if (column.fixed === 'left' || column.fixed === true) { + var width = column.width; + if (typeof width == 'string' && width.includes('%')) { + width = contentWidth * parseInt(col.width) / 100; + } + leftColumnsWidth += parseInt(width); + } + }); + return leftColumnsWidth; + }); + }; + + ColumnManager.prototype.getRightColumnsWidth = function getRightColumnsWidth() { + var _this14 = this; + + var contentWidth = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1; + + return this._cache('rightColumnsWidth', function () { + var rightColumnsWidth = 0; + _this14.groupedColumns().forEach(function (column) { + if (column.fixed === 'right') { + var width = column.width; + if (typeof width == 'string' && width.includes('%')) { + width = contentWidth * parseInt(col.width) / 100; + } + rightColumnsWidth += parseInt(width); + } + }); + return rightColumnsWidth; + }); + }; + + ColumnManager.prototype._cache = function _cache(name, fn) { + if (name in this._cached) { + return this._cached[name]; + } + this._cached[name] = fn(); + return this._cached[name]; + }; + + //todo 含有children的宽度计算 + + + ColumnManager.prototype._leafColumns = function _leafColumns(columns) { + var _this15 = this; + + var leafColumns = []; + + columns.forEach(function (column) { + if (!column.children) { + + var defaultOpt = { + ifshow: true + }; + if (!_this15.originWidth) { + defaultOpt.width = 200; + } + var newColumn = _extends({}, defaultOpt, column); + leafColumns.push(newColumn); + } else { + leafColumns.push.apply(leafColumns, _toConsumableArray(_this15._leafColumns(column.children))); + } + }); + return leafColumns; + }; + + return ColumnManager; +}(); + +exports["default"] = ColumnManager; +module.exports = exports['default']; \ No newline at end of file diff --git a/build/ExpandIcon.js b/build/ExpandIcon.js new file mode 100644 index 0000000..99c58a9 --- /dev/null +++ b/build/ExpandIcon.js @@ -0,0 +1,83 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _propTypes = require('prop-types'); + +var _propTypes2 = _interopRequireDefault(_propTypes); + +var _shallowequal = require('shallowequal'); + +var _shallowequal2 = _interopRequireDefault(_shallowequal); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; } + +function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; } + +function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + +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); } + +var propTypes = { + record: _propTypes2["default"].object, + clsPrefix: _propTypes2["default"].string, + expandable: _propTypes2["default"].any, + expanded: _propTypes2["default"].bool, + needIndentSpaced: _propTypes2["default"].bool, + onExpand: _propTypes2["default"].func +}; + +var ExpandIcon = function (_Component) { + _inherits(ExpandIcon, _Component); + + function ExpandIcon(props) { + _classCallCheck(this, ExpandIcon); + + return _possibleConstructorReturn(this, _Component.call(this, props)); + } + + ExpandIcon.prototype.shouldComponentUpdate = function shouldComponentUpdate(nextProps) { + return !(0, _shallowequal2["default"])(nextProps, this.props); + }; + + ExpandIcon.prototype.render = function render() { + var _props = this.props, + expandable = _props.expandable, + clsPrefix = _props.clsPrefix, + onExpand = _props.onExpand, + needIndentSpaced = _props.needIndentSpaced, + expanded = _props.expanded, + record = _props.record, + isHiddenExpandIcon = _props.isHiddenExpandIcon; + + if (expandable && !isHiddenExpandIcon) { + var expandClassName = expanded ? 'expanded' : 'collapsed'; + return _react2["default"].createElement('span', { + className: clsPrefix + '-expand-icon ' + clsPrefix + '-' + expandClassName, + onClick: function onClick(e) { + return onExpand(!expanded, record, e); + } + }); + } else if (needIndentSpaced || isHiddenExpandIcon) { + return _react2["default"].createElement('span', { className: clsPrefix + '-expand-icon ' + clsPrefix + '-spaced' }); + } + return null; + }; + + return ExpandIcon; +}(_react.Component); + +; + +ExpandIcon.propTypes = propTypes; + +exports["default"] = ExpandIcon; +module.exports = exports['default']; \ No newline at end of file diff --git a/build/FilterDropDown.js b/build/FilterDropDown.js new file mode 100644 index 0000000..629e142 --- /dev/null +++ b/build/FilterDropDown.js @@ -0,0 +1,317 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +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); + +var _beeMenus = require('bee-menus'); + +var _beeMenus2 = _interopRequireDefault(_beeMenus); + +var _beeButton = require('bee-button'); + +var _beeButton2 = _interopRequireDefault(_beeButton); + +var _beeIcon = require('bee-icon'); + +var _beeIcon2 = _interopRequireDefault(_beeIcon); + +var _i18n = require('./lib/i18n'); + +var _i18n2 = _interopRequireDefault(_i18n); + +var _tool = require('bee-locale/build/tool'); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; } + +function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; } + +function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + +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); } /** + * 过滤行功能内的下拉条件 + */ + +var Item = _beeMenus2["default"].Item; + +var FilterDropDown = function (_Component) { + _inherits(FilterDropDown, _Component); + + function FilterDropDown() { + _classCallCheck(this, FilterDropDown); + + var _this = _possibleConstructorReturn(this, _Component.call(this)); + + _this.onSelectDropdown = function (item) { + var _this$props = _this.props, + onSelectDropdown = _this$props.onSelectDropdown, + filterDropdownType = _this$props.filterDropdownType; + + if (onSelectDropdown) { + if (filterDropdownType == 'string') { + _this.setState({ + selectValue: [item.key] + }, function () { + onSelectDropdown(item); + }); + } + if (filterDropdownType == 'number') { + _this.setState({ + selectNumberValue: [item.key] + }, function () { + onSelectDropdown(item); + }); + } + } + }; + + _this.onClickClear = function () { + var onClickClear = _this.props.onClickClear; + + if (onClickClear) { + _this.setState({ + // selectValue: [], + // selectNumberValue: [] + }, function () { + onClickClear(); + }); + } + }; + + _this.getMenu = function () { + var _this$state = _this.state, + selectValue = _this$state.selectValue, + selectNumberValue = _this$state.selectNumberValue; + var _this$props2 = _this.props, + filterDropdownType = _this$props2.filterDropdownType, + filterDropdownIncludeKeys = _this$props2.filterDropdownIncludeKeys; + + var locale = (0, _tool.getComponentLocale)(_this.props, _this.context, 'Table', function () { + return _i18n2["default"]; + }); + var stringEnum = { + LIKE: 'include', + ULIKE: 'exclusive', + EQ: 'equal', + UEQ: 'unequal', + START: 'begin', + END: 'end' + }; + var numberEnum = { + GT: 'greater_than', + GTEQ: 'great_than_equal_to', + LT: 'less_than', + LTEQ: 'less_than_equal_to', + EQ: 'be_equal_to', + UEQ: 'not_equal_to' + }; + if (filterDropdownIncludeKeys != undefined) { + switch (filterDropdownType) { + case 'string': + return _react2["default"].createElement( + _beeMenus2["default"], + { + onSelect: _this.onSelectDropdown, + selectedKeys: selectValue + }, + filterDropdownIncludeKeys.map(function (item) { + return _react2["default"].createElement( + Item, + { key: item }, + locale[stringEnum[item]] + ); + }) + ); + case 'number': + return _react2["default"].createElement( + _beeMenus2["default"], + { + onSelect: _this.onSelectDropdown, + selectedKeys: selectNumberValue + }, + filterDropdownIncludeKeys.map(function (item) { + return _react2["default"].createElement( + Item, + { key: item }, + locale[numberEnum[item]] + ); + }) + ); + default: + return _react2["default"].createElement('div', null); + } + } else { + switch (filterDropdownType) { + case 'string': + return _react2["default"].createElement( + _beeMenus2["default"], + { + onSelect: _this.onSelectDropdown, + selectedKeys: selectValue + }, + _react2["default"].createElement( + Item, + { key: 'LIKE' }, + locale['include'] + ), + _react2["default"].createElement( + Item, + { key: 'ULIKE' }, + locale['exclusive'] + ), + _react2["default"].createElement( + Item, + { key: 'EQ' }, + locale['equal'] + ), + _react2["default"].createElement( + Item, + { key: 'UEQ' }, + locale['unequal'] + ), + _react2["default"].createElement( + Item, + { key: 'RLIKE' }, + locale['begin'] + ), + _react2["default"].createElement( + Item, + { key: 'LLIKE' }, + locale['end'] + ) + ); + case 'number': + return _react2["default"].createElement( + _beeMenus2["default"], + { + onSelect: _this.onSelectDropdown, + selectedKeys: selectNumberValue + }, + _react2["default"].createElement( + Item, + { key: 'GT' }, + locale['greater_than'] + ), + _react2["default"].createElement( + Item, + { key: 'GTEQ' }, + locale['great_than_equal_to'] + ), + _react2["default"].createElement( + Item, + { key: 'LT' }, + locale['less_than'] + ), + _react2["default"].createElement( + Item, + { key: 'LTEQ' }, + locale['less_than_equal_to'] + ), + _react2["default"].createElement( + Item, + { key: 'EQ' }, + locale['be_equal_to'] + ), + _react2["default"].createElement( + Item, + { key: 'UEQ' }, + locale['not_equal_to'] + ) + ); + default: + return _react2["default"].createElement('div', null); + } + } + }; + + _this.state = { + selectValue: ['LIKE'], + selectNumberValue: ['EQ'] + }; + return _this; + } + /** + * 点击下拉菜单 + * + * @param {*} s 选中的selectRecord + */ + + + /** + * 清除事件 + * + */ + + + /** + * 根据props来获得指定的Menu,分为String和Number + * + * @returns JSX Menu + */ + + + FilterDropDown.prototype.render = function render() { + var isShowCondition = this.props.isShowCondition; + + + return _react2["default"].createElement( + 'div', + { className: 'filter-btns' }, + isShowCondition == 'show' && _react2["default"].createElement( + _beeDropdown2["default"], + { + overlayClassName: 'u-filter-dropdown-menu-wrap', + trigger: ['click'], + 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, 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, color: '#585858', "visibility": this.props.isShowClear || this.state.selectValue.length > 0 ? "visible" : "hidden" }, type: 'uf-filterno' }) + ) + ); + }; + + 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 new file mode 100644 index 0000000..dbb10b7 --- /dev/null +++ b/build/FilterType.js @@ -0,0 +1,420 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + 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; }; + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _propTypes = require('prop-types'); + +var _propTypes2 = _interopRequireDefault(_propTypes); + +var _zh_CN = require('rc-calendar/lib/locale/zh_CN'); + +var _zh_CN2 = _interopRequireDefault(_zh_CN); + +var _beeFormControl = require('bee-form-control'); + +var _beeFormControl2 = _interopRequireDefault(_beeFormControl); + +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); + +var _FilterDropDown = require('./FilterDropDown'); + +var _FilterDropDown2 = _interopRequireDefault(_FilterDropDown); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; } + +function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; } + +function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + +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); } + +var RangePicker = _beeDatepicker2["default"].RangePicker; + + +var propTypes = { + filterDropdown: _propTypes2["default"].string +}; + +var FilterType = function (_Component) { + _inherits(FilterType, _Component); + + function FilterType(props) { + _classCallCheck(this, FilterType); + + var _this = _possibleConstructorReturn(this, _Component.call(this, props)); + + _this.clearFilter = function () { + var _this$props = _this.props, + onFilterClear = _this$props.onFilterClear, + dataIndex = _this$props.dataIndex; + + if (_this.state.value !== "") { + _this.setState({ + value: "", //清空值 + condition: _this.props.filterDropdownType == 'string' ? 'LIKE' : 'EQ' //切回默认查询条件 + }, function () { + //调用清除方法参数为当前字段的field + onFilterClear && onFilterClear(dataIndex); + }); + } + }; + + _this.changeText = function (val) { + _this.setState({ + value: val + }); + }; + + _this.changeTextCall = function (e) { + var _this$props2 = _this.props, + onFilterChange = _this$props2.onFilterChange, + dataIndex = _this$props2.dataIndex; + + if (e.keyCode == 13) { + e.target.value !== "" && onFilterChange(dataIndex, e.target.value, _this.state.condition); + } + }; + + _this.changeValue = function () { + _this.setState({ + value: "" + }); + }; + + _this.onSelectDropdown = function (item) { + var _this$props3 = _this.props, + onFilterChange = _this$props3.onFilterChange, + dataIndex = _this$props3.dataIndex; + + _this.setState({ + condition: item.key + }, function () { + _this.state.value !== "" && onFilterChange && onFilterChange(dataIndex, _this.state.value, _this.state.condition); + }); + }; + + _this.changeNumber = function (value) { + var _this$props4 = _this.props, + onFilterChange = _this$props4.onFilterChange, + dataIndex = _this$props4.dataIndex; + + _this.setState({ + value: value + }, function () { + onFilterChange(dataIndex, value, _this.state.condition); + }); + }; + + _this.clearNumber = function () { + var onChange = _this.props.onChange; + + onChange && onChange(""); + _this.setState({ + value: "" + }); + }; + + _this.changeTextCallBlur = function (val) { + var onChange = _this.props.onChange; + + onChange && onChange(val); + }; + + _this.changeSelect = function (value) { + var _this$props5 = _this.props, + onFilterChange = _this$props5.onFilterChange, + dataIndex = _this$props5.dataIndex; + + if (onFilterChange) { + onFilterChange(dataIndex, value, _this.state.condition); + _this.setState({ + value: value + }); + } + }; + + _this.clearSelectValue = function () { + _this.setState({ + selectValue: "" + }, function () { + _this.changeSelect(""); + }); + }; + + _this.clearDateValue = function () { + _this.setState({ + dateValue: "" + }, function () { + _this.changeDate(""); + }); + }; + + _this.changeDate = function (value) { + var _this$props6 = _this.props, + onFilterChange = _this$props6.onFilterChange, + dataIndex = _this$props6.dataIndex; + + if (onFilterChange) { + onFilterChange(dataIndex, value, _this.state.condition); + _this.setState({ + value: value, + open: false + }); + } + }; + + _this.renderControl = function (rendertype) { + var _this$props7 = _this.props, + filterInputNumberOptions = _this$props7.filterInputNumberOptions, + filterDropdownIncludeKeys = _this$props7.filterDropdownIncludeKeys, + dataIndex = _this$props7.dataIndex, + filterDropdown = _this$props7.filterDropdown, + filterDropdownType = _this$props7.filterDropdownType, + format = _this$props7.format, + className = _this$props7.className, + onChange = _this$props7.onChange, + onSelectDropdown = _this$props7.onSelectDropdown, + clsPrefix = _this$props7.clsPrefix, + locale = _this$props7.locale; + + switch (rendertype) { + case 'text': + return _react2["default"].createElement( + 'div', + { className: clsPrefix + ' filter-wrap' }, + _react2["default"].createElement(_beeFormControl2["default"], { + value: _this.state.value, + className: className, + onChange: _this.changeText, + onKeyDown: _this.changeTextCall + //onBlur={this.changeTextCallBlur} + }), + _react2["default"].createElement(_FilterDropDown2["default"], { + locale: locale, + dataIndex: dataIndex, + dataText: _this.state.value, + onSelectDropdown: _this.onSelectDropdown, + onClickClear: _this.clearFilter, + isShowClear: _this.state.value, + isShowCondition: filterDropdown, + filterDropdownType: filterDropdownType, + filterDropdownIncludeKeys: filterDropdownIncludeKeys + }) + ); + case 'number': + return _react2["default"].createElement( + 'div', + { className: clsPrefix + ' filter-wrap' }, + _react2["default"].createElement(_beeInputNumber2["default"], _extends({}, filterInputNumberOptions, { + className: className, + value: _this.state.value, + onChange: _this.changeNumber, + iconStyle: 'one' + })), + _react2["default"].createElement(_FilterDropDown2["default"], { + locale: locale, + dataIndex: dataIndex, + dataText: _this.state.value, + onSelectDropdown: _this.onSelectDropdown, + onClickClear: _this.clearFilter, + isShowClear: _this.state.value != 0, + isShowCondition: filterDropdown, + filterDropdownType: filterDropdownType, + filterDropdownIncludeKeys: filterDropdownIncludeKeys + }) + ); + case 'dropdown': + return _react2["default"].createElement( + 'div', + { className: clsPrefix + ' filter-wrap' }, + _react2["default"].createElement(_beeSelect2["default"], _extends({}, _this.props, { + value: _this.state.value, + onChange: _this.changeSelect + })), + _react2["default"].createElement(_FilterDropDown2["default"], { + locale: locale, + dataIndex: dataIndex, + dataText: _this.state.value, + onSelectDropdown: _this.onSelectDropdown, + onClickClear: _this.clearFilter, + isShowCondition: filterDropdown, + isShowClear: _this.state.value, + filterDropdownType: filterDropdownType, + filterDropdownIncludeKeys: filterDropdownIncludeKeys + }) + ); + case 'date': + return _react2["default"].createElement( + 'div', + { className: clsPrefix + ' filter-wrap' }, + _react2["default"].createElement(_beeDatepicker2["default"], _extends({}, _this.props, { + value: _this.state.value, + onChange: _this.changeDate, + open: _this.state.open, + format: format, + locale: _zh_CN2["default"] + })), + _react2["default"].createElement(_FilterDropDown2["default"], { + locale: locale, + dataIndex: dataIndex, + dataText: _this.state.value, + onSelectDropdown: _this.onSelectDropdown, + onClickClear: _this.clearFilter, + isShowCondition: filterDropdown, + isShowClear: _this.state.value, + filterDropdownType: filterDropdownType, + filterDropdownIncludeKeys: filterDropdownIncludeKeys + }) + ); + case 'daterange': + return _react2["default"].createElement( + 'div', + { className: clsPrefix + ' filter-wrap' }, + _react2["default"].createElement(RangePicker, _extends({}, _this.props, { + value: _this.state.value, + onChange: _this.changeDate, + open: _this.state.open, + format: format, + showTime: true, + locale: _zh_CN2["default"], + placeholder: '开始 ~ 结束', + dateInputPlaceholder: ['开始', '结束'], + showClear: true + })), + _react2["default"].createElement(_FilterDropDown2["default"], { + locale: locale, + dataIndex: dataIndex, + dataText: _this.state.value, + onSelectDropdown: _this.onSelectDropdown, + onClickClear: _this.clearFilter, + isShowCondition: filterDropdown, + isShowClear: _this.state.value, + filterDropdownIncludeKeys: filterDropdownIncludeKeys + }) + ); + case 'bool': + return _react2["default"].createElement( + 'div', + { className: clsPrefix + ' filter-wrap' }, + _react2["default"].createElement(Switch, { + className: className, + onChange: onChange + }), + _react2["default"].createElement(_FilterDropDown2["default"], { locale: locale, + onSelectDropdown: onSelectDropdown, + filterDropdownIncludeKeys: filterDropdownIncludeKeys + }) + ); + default: + return _react2["default"].createElement('div', null); + } + }; + + _this.state = { + value: "", + text: "", + selectValue: "", + dateValue: "", + open: false, + condition: props.filterDropdownType == 'string' ? 'LIKE' : 'EQ', + number: 0 + }; + return _this; + } + + /** + * 清除过滤条件 + * + */ + + + /** + * 设置输入文本的值 + * + */ + + + /** + * 输入框回车执行回调 + * + */ + + /** + * 更改修改值 + * + */ + + /** + * 下拉条件的回调 + * + * @param {*} key 字段 + * @param {*} value 值1,2,3...6 + */ + + + /** + * 修改数值型的值 + * + */ + + //清除数值 + + + //失去焦点后执行函数 + + //设置下拉值 + + //清除下拉值 + + //清除日期值 + + //设置日期值 + + //组件渲染 + /** + * 根据不同的类型生成对应的组件类型包含一些参数的适应 + * + * @param {*} rendertype 参数类型，包括['text','dropdown','date','daterange','number'] + * @returns + */ + + + FilterType.prototype.render = function render() { + var rendertype = this.props.rendertype; + + return _react2["default"].createElement( + 'div', + { 'data-filter-type': 'filterContext' }, + this.renderControl(rendertype) + ); + }; + + return FilterType; +}(_react.Component); + +FilterType.propTypes = propTypes; +FilterType.defaultProps = { + filterDropdown: 'show' +}; +exports["default"] = FilterType; +module.exports = exports['default']; \ No newline at end of file diff --git a/build/Table.css b/build/Table.css index 7c57191..0d77d71 100644 --- a/build/Table.css +++ b/build/Table.css @@ -180,21 +180,21 @@ .u-table td { border-bottom: 1px solid rgb(233,233,233); } .u-table td a { - color: rgb(30,136,229); } + color: rgb(245, 60, 50); } .u-table td a:hover { - color: rgb(66,165,245); } + color: rgb(230, 0, 18); } .u-table td a:active { - color: rgb(21,101,192); } + color: rgb(230, 0, 18); } .u-table tr:hover td .uf-eye { visibility: visible !important; } .u-table tr tr a { - color: rgb(30,136,229); } + color: rgb(245, 60, 50); } .u-table tr tr a:hover { - color: rgb(66,165,245); } + color: rgb(230, 0, 18); } .u-table tr tr a:active { - color: rgb(21,101,192); } + color: rgb(230, 0, 18); } .u-table tr.tr-row-hover { - background: rgb(227,242,253); } + background: rgb(235, 236, 240); } .u-table th, .u-table td { padding: 12px 8px; @@ -205,7 +205,7 @@ .u-table tr.filterable th .filterContext { height: 35px; } .u-table-row-hover { - background: rgb(227,242,253); } + background: rgb(235, 236, 240); } .u-table-scroll { overflow: auto; } .u-table-bordered table { @@ -285,7 +285,7 @@ .u-table-row-collapsed:after, .u-table-expanded-row-collapsed:after { content: "+"; } .u-table-row.selected { - background: rgb(227,242,253); } + background: rgb(235, 236, 240); } .u-table tr.u-table-expanded-row { background: #f7f7f7; } .u-table tr.u-table-expanded-row:hover { @@ -401,7 +401,7 @@ .u-table-thead .th-drag { cursor: move; } .u-table-thead .th-drag:hover { - background: rgb(227,242,253); } + background: rgb(235, 236, 240); } .u-table-thead .th-drag-hover { background: #ccc; } .u-table-thead-th { @@ -665,3 +665,25 @@ .u-row-hover2 { position: absolute; left: 100; } + +::-webkit-scrollbar { + width: 8px; + height: 8px; } + +::-webkit-scrollbar-button { + display: none; } + +::-webkit-scrollbar-thumb { + background: #d5d5d5 !important; + border-radius: 5px; } + +::-webkit-scrollbar-thumb { + border-radius: 4px; + background-color: #d5d5d5; + position: absolute; } + +::-webkit-scrollbar-track { + display: none; } + +::-webkit-scrollbar-track-piece { + display: none; } diff --git a/build/Table.js b/build/Table.js new file mode 100644 index 0000000..05c6c93 --- /dev/null +++ b/build/Table.js @@ -0,0 +1,1338 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + 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; }; + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _propTypes = require('prop-types'); + +var _propTypes2 = _interopRequireDefault(_propTypes); + +var _componentClasses = require('component-classes'); + +var _componentClasses2 = _interopRequireDefault(_componentClasses); + +var _TableRow = require('./TableRow'); + +var _TableRow2 = _interopRequireDefault(_TableRow); + +var _TableHeader = require('./TableHeader'); + +var _TableHeader2 = _interopRequireDefault(_TableHeader); + +var _utils = require('./utils'); + +var _shallowequal = require('shallowequal'); + +var _shallowequal2 = _interopRequireDefault(_shallowequal); + +var _addEventListener = require('tinper-bee-core/lib/addEventListener'); + +var _addEventListener2 = _interopRequireDefault(_addEventListener); + +var _ColumnManager = require('./ColumnManager'); + +var _ColumnManager2 = _interopRequireDefault(_ColumnManager); + +var _createStore = require('./createStore'); + +var _createStore2 = _interopRequireDefault(_createStore); + +var _beeLoading = require('bee-loading'); + +var _beeLoading2 = _interopRequireDefault(_beeLoading); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; } + +function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; } + +function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } } + +function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + +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); } + +var propTypes = { + data: _propTypes2["default"].array, + expandIconAsCell: _propTypes2["default"].bool, + defaultExpandAllRows: _propTypes2["default"].bool, + expandedRowKeys: _propTypes2["default"].array, + defaultExpandedRowKeys: _propTypes2["default"].array, + useFixedHeader: _propTypes2["default"].bool, + columns: _propTypes2["default"].array, + clsPrefix: _propTypes2["default"].string, + bodyStyle: _propTypes2["default"].object, + style: _propTypes2["default"].object, + //特殊的渲染规则的key值 + rowKey: _propTypes2["default"].oneOfType([_propTypes2["default"].string, _propTypes2["default"].func]), + rowClassName: _propTypes2["default"].func, + expandedRowClassName: _propTypes2["default"].func, + childrenColumnName: _propTypes2["default"].string, + onExpand: _propTypes2["default"].func, + onRowHover: _propTypes2["default"].func, + onExpandedRowsChange: _propTypes2["default"].func, + indentSize: _propTypes2["default"].number, + onRowClick: _propTypes2["default"].func, + onRowDoubleClick: _propTypes2["default"].func, + expandIconColumnIndex: _propTypes2["default"].number, + //是否显示表头 + showHeader: _propTypes2["default"].bool, + title: _propTypes2["default"].func, + footer: _propTypes2["default"].func, + emptyText: _propTypes2["default"].func, + scroll: _propTypes2["default"].object, + rowRef: _propTypes2["default"].func, + getBodyWrapper: _propTypes2["default"].func, + children: _propTypes2["default"].node, + draggable: _propTypes2["default"].bool, + minColumnWidth: _propTypes2["default"].number, + filterable: _propTypes2["default"].bool, + filterDelay: _propTypes2["default"].number, + onFilterChange: _propTypes2["default"].func, + onFilterClear: _propTypes2["default"].func, + syncHover: _propTypes2["default"].bool, + tabIndex: _propTypes2["default"].string, + hoverContent: _propTypes2["default"].func +}; + +var defaultProps = { + data: [], + useFixedHeader: false, + expandIconAsCell: false, + defaultExpandAllRows: false, + defaultExpandedRowKeys: [], + rowKey: 'key', + rowClassName: function rowClassName() { + return ''; + }, + expandedRowClassName: function expandedRowClassName() { + return ''; + }, + onExpand: function onExpand() {}, + onExpandedRowsChange: function onExpandedRowsChange() {}, + onRowClick: function onRowClick() {}, + onRowDoubleClick: function onRowDoubleClick() {}, + + clsPrefix: 'u-table', + bodyStyle: {}, + style: {}, + childrenColumnName: 'children', + indentSize: 15, + expandIconColumnIndex: 0, + showHeader: true, + scroll: {}, + rowRef: function rowRef() { + return null; + }, + getBodyWrapper: function getBodyWrapper(body) { + return body; + }, + emptyText: function emptyText() { + return 'No Data'; + }, + columns: [], + minColumnWidth: 80, + locale: {}, + syncHover: true, + setRowHeight: function setRowHeight() {}, + setRowParentIndex: function setRowParentIndex() {}, + tabIndex: '0' +}; + +var Table = function (_Component) { + _inherits(Table, _Component); + + function Table(props) { + _classCallCheck(this, Table); + + var _this = _possibleConstructorReturn(this, _Component.call(this, props)); + + _this.renderDragHideTable = function () { + var _this$props = _this.props, + columns = _this$props.columns, + dragborder = _this$props.dragborder, + dragborderKey = _this$props.dragborderKey; + + if (!dragborder) return null; + var sum = 0; + return _react2["default"].createElement( + 'div', + { id: 'u-table-drag-hide-table-' + dragborderKey, className: _this.props.clsPrefix + '-hiden-drag' }, + columns.map(function (da, i) { + sum += da.width ? da.width : 0; + return _react2["default"].createElement('div', { className: _this.props.clsPrefix + '-hiden-drag-li', key: da + "_hiden_" + i, style: { left: sum + "px" } }); + }) + ); + }; + + _this.onRowHoverMouseEnter = function () { + + _this.store.setState({ + currentHoverKey: _this.currentHoverKey + }); + _this.hoverDom.style.display = 'block'; + }; + + _this.onRowHoverMouseLeave = function () {}; + + _this.onFocus = function (e) { + _this.props.onKeyTab && _this.props.onKeyTab(); + }; + + _this.onKeyDown = function (e) { + var event = _utils.Event.getEvent(e); + // event.preventDefault?event.preventDefault():event.returnValue = false; + if (event.keyCode === 38) { + //up + event.preventDefault && event.preventDefault(); + _this.props.onKeyUp && _this.props.onKeyUp(); + } else if (event.keyCode === 40) { + //down + event.preventDefault && event.preventDefault(); + _this.props.onKeyDown && _this.props.onKeyDown(); + } + _this.props.onTableKeyDown && _this.props.onTableKeyDown(); + }; + + var expandedRowKeys = []; + var rows = [].concat(_toConsumableArray(props.data)); + _this.columnManager = new _ColumnManager2["default"](props.columns, props.children, props.originWidth); + _this.store = (0, _createStore2["default"])({ currentHoverKey: null }); + + if (props.defaultExpandAllRows) { + for (var i = 0; i < rows.length; i++) { + var row = rows[i]; + expandedRowKeys.push(_this.getRowKey(row, i)); + rows = rows.concat(row[props.childrenColumnName] || []); + } + } else { + expandedRowKeys = props.expandedRowKeys || props.defaultExpandedRowKeys; + } + _this.state = { + expandedRowKeys: expandedRowKeys, + data: props.data, + currentHoverKey: null, + scrollPosition: 'left', + fixedColumnsHeadRowsHeight: [], + fixedColumnsBodyRowsHeight: [] + }; + + _this.onExpandedRowsChange = _this.onExpandedRowsChange.bind(_this); + _this.onExpanded = _this.onExpanded.bind(_this); + _this.onRowDestroy = _this.onRowDestroy.bind(_this); + _this.getRowKey = _this.getRowKey.bind(_this); + _this.getExpandedRows = _this.getExpandedRows.bind(_this); + _this.getHeader = _this.getHeader.bind(_this); + _this.getHeaderRows = _this.getHeaderRows.bind(_this); + _this.getExpandedRow = _this.getExpandedRow.bind(_this); + _this.getRowsByData = _this.getRowsByData.bind(_this); + _this.getRows = _this.getRows.bind(_this); + _this.getColGroup = _this.getColGroup.bind(_this); + _this.getLeftFixedTable = _this.getLeftFixedTable.bind(_this); + _this.getRightFixedTable = _this.getRightFixedTable.bind(_this); + _this.getTable = _this.getTable.bind(_this); + _this.getTitle = _this.getTitle.bind(_this); + _this.getFooter = _this.getFooter.bind(_this); + _this.getEmptyText = _this.getEmptyText.bind(_this); + _this.getHeaderRowStyle = _this.getHeaderRowStyle.bind(_this); + _this.syncFixedTableRowHeight = _this.syncFixedTableRowHeight.bind(_this); + _this.resetScrollY = _this.resetScrollY.bind(_this); + _this.findExpandedRow = _this.findExpandedRow.bind(_this); + _this.isRowExpanded = _this.isRowExpanded.bind(_this); + _this.detectScrollTarget = _this.detectScrollTarget.bind(_this); + _this.handleBodyScroll = _this.handleBodyScroll.bind(_this); + _this.handleRowHover = _this.handleRowHover.bind(_this); + _this.computeTableWidth = _this.computeTableWidth.bind(_this); + _this.onBodyMouseLeave = _this.onBodyMouseLeave.bind(_this); + return _this; + } + + Table.prototype.componentDidMount = function componentDidMount() { + _utils.EventUtil.addHandler(this.contentTable, 'keydown', this.onKeyDown); + _utils.EventUtil.addHandler(this.contentTable, 'focus', this.onFocus); + setTimeout(this.resetScrollY, 300); + //含有纵向滚动条 + if (this.props.scroll.y) { + this.scrollbarWidth = (0, _utils.measureScrollbar)(); + } + //后续也放在recevice里面 + if (!this.props.originWidth) { + this.computeTableWidth(); + } + if (this.columnManager.isAnyColumnsFixed()) { + this.syncFixedTableRowHeight(); + this.resizeEvent = (0, _addEventListener2["default"])(window, 'resize', (0, _utils.debounce)(this.syncFixedTableRowHeight, 150)); + } + }; + + Table.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) { + if ('data' in nextProps) { + this.setState({ + data: nextProps.data + }); + if (!nextProps.data || nextProps.data.length === 0) { + this.resetScrollY(); + } + } + if ('expandedRowKeys' in nextProps) { + this.setState({ + expandedRowKeys: nextProps.expandedRowKeys + }); + } + if (nextProps.columns && nextProps.columns !== this.props.columns) { + this.columnManager.reset(nextProps.columns); + if (nextProps.columns.length !== this.props.columns.length && this.refs && this.refs.bodyTable) { + this.scrollTop = this.refs.bodyTable.scrollTop; + } + } else if (nextProps.children !== this.props.children) { + this.columnManager.reset(null, nextProps.children); + } + //适配lazyload + if (nextProps.scrollTop > -1) { + // this.refs.bodyTable.scrollTop = nextProps.scrollTop; + this.scrollTop = nextProps.scrollTop; + } + if (!nextProps.originWidth) { + this.computeTableWidth(); + this.firstDid = true; //避免重复update + } + if (nextProps.resetScroll) { + this.resetScrollY(); + } + + // console.log('this.scrollTop**********',this.scrollTop); + }; + + Table.prototype.componentDidUpdate = function componentDidUpdate() { + + if (this.columnManager.isAnyColumnsFixed()) { + this.syncFixedTableRowHeight(); + } + //适应模态框中表格、以及父容器宽度变化的情况 + if (typeof this.props.scroll.x !== 'number' && this.contentTable.getBoundingClientRect().width !== this.contentDomWidth && this.firstDid) { + this.computeTableWidth(); + this.firstDid = false; //避免重复update + } + if (this.scrollTop > -1) { + this.refs.fixedColumnsBodyLeft && (this.refs.fixedColumnsBodyLeft.scrollTop = this.scrollTop); + this.refs.fixedColumnsBodyRight && (this.refs.fixedColumnsBodyRight.scrollTop = this.scrollTop); + this.refs.bodyTable.scrollTop = this.scrollTop; + this.scrollTop = -1; + } + }; + + Table.prototype.componentWillUnmount = function componentWillUnmount() { + _utils.EventUtil.removeHandler(this.contentTable, 'keydown', this.onKeyDown); + _utils.EventUtil.removeHandler(this.contentTable, 'focus', this.onFocus); + if (this.resizeEvent) { + this.resizeEvent.remove(); + } + }; + + Table.prototype.computeTableWidth = function computeTableWidth() { + + //如果用户传了scroll.x按用户传的为主 + var setWidthParam = this.props.scroll.x; + + if (typeof setWidthParam == 'number') { + var numSetWidthParam = parseInt(setWidthParam); + this.contentWidth = numSetWidthParam; + } else { + // this.preContentDomWidth = this.contentDomWidth; + //计算总表格宽度、根据表格宽度和各列的宽度和比较，重置最后一列 + this.contentDomWidth = this.contentTable.getBoundingClientRect().width; //表格容器宽度 + + this.contentWidth = this.contentDomWidth; //默认与容器宽度一样 + } + var computeObj = this.columnManager.getColumnWidth(this.contentWidth); + var lastShowIndex = computeObj.lastShowIndex; + this.computeWidth = computeObj.computeWidth; + + this.domWidthDiff = this.contentDomWidth - this.computeWidth; + if (typeof setWidthParam == 'string' && setWidthParam.indexOf('%')) { + this.contentWidth = this.contentWidth * parseInt(setWidthParam) / 100; + this.domWidthDiff = this.contentDomWidth - this.contentWidth; + } + + if (this.computeWidth < this.contentWidth) { + var contentWidthDiff = this.scrollbarWidth ? this.contentWidth - this.computeWidth - this.scrollbarWidth : this.contentWidth - this.computeWidth; + //bordered的表格需要减去边框的差值1 + if (this.props.bordered) { + contentWidthDiff = contentWidthDiff - 1; + } + this.setState({ contentWidthDiff: contentWidthDiff, lastShowIndex: lastShowIndex }); + } else { + this.contentWidth = this.computeWidth; + this.setState({ contentWidthDiff: 0, lastShowIndex: lastShowIndex }); //重新渲染，为了显示滚动条 + } + }; + + Table.prototype.onExpandedRowsChange = function onExpandedRowsChange(expandedRowKeys) { + if (!this.props.expandedRowKeys) { + this.setState({ expandedRowKeys: expandedRowKeys }); + } + this.props.onExpandedRowsChange(expandedRowKeys); + }; + + Table.prototype.onExpanded = function onExpanded(expanded, record, index, e) { + if (e) { + e.preventDefault(); + e.stopPropagation(); + } + var info = this.findExpandedRow(record); + if (typeof info !== 'undefined' && !expanded) { + this.onRowDestroy(record, index); + } else if (!info && expanded) { + var expandedRows = this.getExpandedRows().concat(); + expandedRows.push(this.getRowKey(record, index)); + this.onExpandedRowsChange(expandedRows); + } + this.props.onExpand(expanded, record, index); + }; + + Table.prototype.onRowDestroy = function onRowDestroy(record, rowIndex) { + var expandedRows = this.getExpandedRows().concat(); + var rowKey = this.getRowKey(record, rowIndex); + var index = -1; + expandedRows.forEach(function (r, i) { + if (r === rowKey) { + index = i; + } + }); + if (index !== -1) { + expandedRows.splice(index, 1); + } + this.onExpandedRowsChange(expandedRows); + }; + + Table.prototype.getRowKey = function getRowKey(record, index) { + var rowKey = this.props.rowKey; + var key = typeof rowKey === 'function' ? rowKey(record, index) : record[rowKey]; + (0, _utils.warningOnce)(key !== undefined, 'Each record in table should have a unique `key` prop,' + 'or set `rowKey` to an unique primary key.'); + return key; + }; + + Table.prototype.getExpandedRows = function getExpandedRows() { + return this.props.expandedRowKeys || this.state.expandedRowKeys; + }; + + Table.prototype.getHeader = function getHeader(columns, fixed) { + var _props = this.props, + filterDelay = _props.filterDelay, + onFilterChange = _props.onFilterChange, + onFilterClear = _props.onFilterClear, + filterable = _props.filterable, + showHeader = _props.showHeader, + expandIconAsCell = _props.expandIconAsCell, + clsPrefix = _props.clsPrefix, + onDragStart = _props.onDragStart, + onDragEnter = _props.onDragEnter, + onDragOver = _props.onDragOver, + onDrop = _props.onDrop, + draggable = _props.draggable, + onMouseDown = _props.onMouseDown, + onMouseMove = _props.onMouseMove, + onMouseUp = _props.onMouseUp, + dragborder = _props.dragborder, + onThMouseMove = _props.onThMouseMove, + dragborderKey = _props.dragborderKey, + minColumnWidth = _props.minColumnWidth, + headerHeight = _props.headerHeight, + afterDragColWidth = _props.afterDragColWidth, + headerScroll = _props.headerScroll, + bordered = _props.bordered, + onDropBorder = _props.onDropBorder; + + var rows = this.getHeaderRows(columns); + if (expandIconAsCell && fixed !== 'right') { + rows[0].unshift({ + key: 'u-table-expandIconAsCell', + className: clsPrefix + '-expand-icon-th', + title: '', + rowSpan: rows.length + }); + } + + var trStyle = headerHeight && !fixed ? { height: headerHeight } : fixed ? this.getHeaderRowStyle(columns, rows) : null; + var drop = draggable ? { onDragStart: onDragStart, onDragOver: onDragOver, onDrop: onDrop, onDragEnter: onDragEnter, draggable: draggable } : {}; + var dragBorder = dragborder ? { onMouseDown: onMouseDown, onMouseMove: onMouseMove, onMouseUp: onMouseUp, dragborder: dragborder, onThMouseMove: onThMouseMove, dragborderKey: dragborderKey, onDropBorder: onDropBorder } : {}; + var contentWidthDiff = 0; + //非固定表格,宽度不够时自动扩充 + if (!fixed) { + contentWidthDiff = this.state.contentWidthDiff; + } + return showHeader ? _react2["default"].createElement(_TableHeader2["default"], _extends({}, drop, dragBorder, { + locale: this.props.locale, + minColumnWidth: minColumnWidth, + contentWidthDiff: contentWidthDiff, + contentWidth: this.contentWidth, + lastShowIndex: this.state.lastShowIndex, + clsPrefix: clsPrefix, + rows: rows, + contentTable: this.contentTable, + rowStyle: trStyle, + fixed: fixed, + filterable: filterable, + onFilterChange: onFilterChange, + onFilterClear: onFilterClear, + filterDelay: filterDelay, + afterDragColWidth: afterDragColWidth, + contentDomWidth: this.contentDomWidth, + scrollbarWidth: this.scrollbarWidth, + headerScroll: headerScroll, + bordered: bordered + })) : null; + }; + + Table.prototype.getHeaderRows = function getHeaderRows(columns) { + var _this2 = this; + + var currentRow = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0; + var rows = arguments[2]; + var _state = this.state, + _state$contentWidthDi = _state.contentWidthDiff, + contentWidthDiff = _state$contentWidthDi === undefined ? 0 : _state$contentWidthDi, + _state$lastShowIndex = _state.lastShowIndex, + lastShowIndex = _state$lastShowIndex === undefined ? -1 : _state$lastShowIndex; + + var filterCol = []; + rows = rows || []; + rows[currentRow] = rows[currentRow] || []; + + columns.forEach(function (column, i) { + if (column.rowSpan && rows.length < column.rowSpan) { + while (rows.length < column.rowSpan) { + rows.push([]); + } + } + var width = column.width; + if (typeof width == 'string' && width.indexOf('%') > -1 && _this2.contentWidth) { + width = parseInt(_this2.contentWidth * parseInt(width) / 100); + } else if (width) { + width = parseInt(width); + } + if (lastShowIndex == i && width) { + width = width + contentWidthDiff; + } + var cell = { + key: column.key, + className: column.className || '', + children: column.title, + drgHover: column.drgHover, + fixed: column.fixed, + width: width, + dataindex: column.dataIndex, + textAlign: column.textAlign + }; + if (column.onHeadCellClick) { + cell.onClick = column.onHeadCellClick; + } + if (column.children) { + _this2.getHeaderRows(column.children, currentRow + 1, rows); + } + if ('colSpan' in column) { + cell.colSpan = column.colSpan; + } + if ('rowSpan' in column) { + cell.rowSpan = column.rowSpan; + } + if (cell.colSpan !== 0) { + rows[currentRow].push(cell); + } + //判断是否启用过滤 + if (_this2.props.filterable) { + //组装Filter需要的Col + filterCol.push({ + key: column.key, + children: "过滤渲染", + width: column.width, + 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, //焦点触发函数回调 + filterdropdowntype: column.filterDropdownType, //下拉的类型分为 String,Number 默认是String + filterdropdownincludekeys: column.filterDropdownIncludeKeys, //下拉条件按照指定的keys去显示 + filterinputnumberoptions: column.filterInputNumberOptions //设置数值框内的详细属性 + }); + } + }); + if (this.props.filterable) { + rows.push(filterCol); + } + return rows.filter(function (row) { + return row.length > 0; + }); + }; + + Table.prototype.getExpandedRow = function getExpandedRow(key, content, visible, className, fixed) { + var _props2 = this.props, + clsPrefix = _props2.clsPrefix, + expandIconAsCell = _props2.expandIconAsCell; + + var colCount = void 0; + if (fixed === 'left') { + colCount = this.columnManager.leftLeafColumns().length; + } else if (fixed === 'right') { + colCount = this.columnManager.rightLeafColumns().length; + } else { + colCount = this.columnManager.leafColumns().length; + } + + function contentContainer() { + if (content && content.props && content.props.style) { + return _react2["default"].createElement('div', { style: { height: content.props.style.height } }); + } else { + return ' '; + } + } + + var columns = [{ + key: 'extra-row', + render: function render() { + return { + props: { + colSpan: colCount + }, + children: !fixed ? content : contentContainer() + }; + } + }]; + if (expandIconAsCell && fixed !== 'right') { + columns.unshift({ + key: 'expand-icon-placeholder', + render: function render() { + return null; + } + }); + } + return _react2["default"].createElement(_TableRow2["default"], { + columns: columns, + visible: visible, + className: className, + key: key + '-extra-row', + clsPrefix: clsPrefix + '-expanded-row', + indent: 1, + expandable: false, + store: this.store, + dragborderKey: this.props.dragborderKey + }); + }; + /** + * + * + * @param {*} data + * @param {*} visible + * @param {*} indent 层级 + * @param {*} columns + * @param {*} fixed + * @param {number} [rootIndex=-1] 祖级节点 + * @returns + * @memberof Table + */ + + + Table.prototype.getRowsByData = function getRowsByData(data, visible, indent, columns, fixed) { + var rootIndex = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : -1; + + var props = this.props; + var childrenColumnName = props.childrenColumnName; + var expandedRowRender = props.expandedRowRender; + var expandRowByClick = props.expandRowByClick; + var fixedColumnsBodyRowsHeight = this.state.fixedColumnsBodyRowsHeight; + + var rst = []; + + var height = void 0; + var rowClassName = props.rowClassName; + var rowRef = props.rowRef; + var expandedRowClassName = props.expandedRowClassName; + var needIndentSpaced = props.data.some(function (record) { + return record[childrenColumnName]; + }); + var onRowClick = props.onRowClick; + var onRowDoubleClick = props.onRowDoubleClick; + + var expandIconAsCell = fixed !== 'right' ? props.expandIconAsCell : false; + var expandIconColumnIndex = fixed !== 'right' ? props.expandIconColumnIndex : -1; + if (props.lazyLoad && props.lazyLoad.preHeight && indent == 0) { + rst.push(_react2["default"].createElement(_TableRow2["default"], { height: props.lazyLoad.preHeight, columns: [], className: '', store: this.store, visible: true })); + } + var lazyCurrentIndex = props.lazyLoad && props.lazyLoad.startIndex ? props.lazyLoad.startIndex : 0; + var lazyParentIndex = props.lazyLoad && props.lazyLoad.startParentIndex ? props.lazyLoad.startParentIndex : 0; + for (var i = 0; i < data.length; i++) { + var isHiddenExpandIcon = void 0; + var record = data[i]; + var key = this.getRowKey(record, i); + var childrenColumn = record[childrenColumnName]; + var isRowExpanded = this.isRowExpanded(record, i); + var expandedRowContent = void 0; + var expandedContentHeight = 0; + //fixedIndex一般是跟index是一个值的，只有是树结构时，会讲子节点的值也累计上 + var fixedIndex = i; + //判断是否是tree结构 + if (this.treeType) { + fixedIndex = this.treeRowIndex; + } + if (expandedRowRender && isRowExpanded) { + expandedRowContent = expandedRowRender(record, fixedIndex + lazyCurrentIndex, indent); + expandedContentHeight = parseInt(expandedRowContent.props && expandedRowContent.props.style && expandedRowContent.props.style.height ? expandedRowContent.props.style.height : 0); + } + //只有当使用expandedRowRender参数的时候才去识别isHiddenExpandIcon（隐藏行展开的icon） + if (expandedRowRender && typeof props.haveExpandIcon == 'function') { + isHiddenExpandIcon = props.haveExpandIcon(record, i); + } + + var onHoverProps = {}; + + onHoverProps.onHover = this.handleRowHover; + + if (props.height) { + height = props.height; + } else if (fixed) { + height = fixedColumnsBodyRowsHeight[fixedIndex]; + } + + var leafColumns = void 0; + if (fixed === 'left') { + leafColumns = this.columnManager.leftLeafColumns(); + } else if (fixed === 'right') { + leafColumns = this.columnManager.rightLeafColumns(); + } else { + leafColumns = this.columnManager.leafColumns(); + } + var className = rowClassName(record, fixedIndex + lazyCurrentIndex, indent); + + //合计代码如果是最后一行并且有合计功能时，最后一行为合计列 + if (i == data.length - 1 && props.showSum) { + className = className + ' sumrow'; + } + + var paramRootIndex = rootIndex; + //小于0说明为第一层节点，她的子孙节点要保存自己的根节点 + if (paramRootIndex < 0) { + paramRootIndex = i + lazyParentIndex; + } + var index = i; + if (rootIndex == -1) { + index = i + lazyParentIndex; + } + rst.push(_react2["default"].createElement(_TableRow2["default"], _extends({ + indent: indent, + indentSize: props.indentSize, + needIndentSpaced: needIndentSpaced, + className: className, + record: record, + expandIconAsCell: expandIconAsCell, + onDestroy: this.onRowDestroy, + index: index, + visible: visible, + expandRowByClick: expandRowByClick, + onExpand: this.onExpanded, + expandable: childrenColumn || expandedRowRender, + expanded: isRowExpanded, + clsPrefix: props.clsPrefix + '-row', + childrenColumnName: childrenColumnName, + columns: leafColumns, + expandIconColumnIndex: expandIconColumnIndex, + onRowClick: onRowClick, + onRowDoubleClick: onRowDoubleClick, + height: height, + isHiddenExpandIcon: isHiddenExpandIcon + }, onHoverProps, { + key: key, + hoverKey: key, + ref: rowRef, + store: this.store, + fixed: fixed, + expandedContentHeight: expandedContentHeight, + setRowHeight: props.setRowHeight, + setRowParentIndex: props.setRowParentIndex, + treeType: childrenColumn || this.treeType ? true : false, + fixedIndex: fixedIndex + lazyCurrentIndex, + rootIndex: rootIndex, + syncHover: props.syncHover + }))); + this.treeRowIndex++; + var subVisible = visible && isRowExpanded; + + if (expandedRowContent && isRowExpanded) { + rst.push(this.getExpandedRow(key, expandedRowContent, subVisible, expandedRowClassName(record, i, indent), fixed)); + } + if (childrenColumn) { + this.treeType = true; //证明是tree表形式visible = {true} + rst = rst.concat(this.getRowsByData(childrenColumn, subVisible, indent + 1, columns, fixed, paramRootIndex)); + } + } + + if (props.lazyLoad && props.lazyLoad.sufHeight && indent == 0) { + rst.push(_react2["default"].createElement(_TableRow2["default"], { height: props.lazyLoad.sufHeight, columns: [], className: '', store: this.store, visible: true })); + } + return rst; + }; + + Table.prototype.getRows = function getRows(columns, fixed) { + //统计index，只有含有鼠表结构才有用，因为数表结构时，固定列的索引取值有问题 + this.treeRowIndex = 0; + return this.getRowsByData(this.state.data, true, 0, columns, fixed); + }; + + Table.prototype.getColGroup = function getColGroup(columns, fixed) { + var _this3 = this; + + var cols = []; + var self = this; + + var _state2 = this.state, + _state2$contentWidthD = _state2.contentWidthDiff, + contentWidthDiff = _state2$contentWidthD === undefined ? 0 : _state2$contentWidthD, + _state2$lastShowIndex = _state2.lastShowIndex, + lastShowIndex = _state2$lastShowIndex === undefined ? 0 : _state2$lastShowIndex; + + if (this.props.expandIconAsCell && fixed !== 'right') { + cols.push(_react2["default"].createElement('col', { + className: this.props.clsPrefix + '-expand-icon-col', + key: 'u-table-expand-icon-col' + })); + } + var leafColumns = void 0; + if (fixed === 'left') { + contentWidthDiff = 0; + leafColumns = this.columnManager.leftLeafColumns(); + } else if (fixed === 'right') { + contentWidthDiff = 0; + leafColumns = this.columnManager.rightLeafColumns(); + } else { + leafColumns = this.columnManager.leafColumns(); + } + cols = cols.concat(leafColumns.map(function (c, i, arr) { + var fixedClass = ''; + var width = c.width; + if (typeof width == 'string' && width.indexOf('%') > -1 && self.contentWidth) { + width = parseInt(self.contentWidth * parseInt(width) / 100); + } else if (width) { + width = parseInt(width); + } + if (lastShowIndex == i && width) { + width = width + contentWidthDiff; + } + if (!fixed && c.fixed) { + fixedClass = ' ' + _this3.props.clsPrefix + '-row-fixed-columns-in-body'; + } + return _react2["default"].createElement('col', { key: c.key, style: { width: width, minWidth: c.width }, className: fixedClass }); + })); + return _react2["default"].createElement( + 'colgroup', + { id: 'bee-table-colgroup' }, + cols + ); + }; + + Table.prototype.getLeftFixedTable = function getLeftFixedTable() { + return this.getTable({ + columns: this.columnManager.leftColumns(), + fixed: 'left' + }); + }; + + Table.prototype.getRightFixedTable = function getRightFixedTable() { + return this.getTable({ + columns: this.columnManager.rightColumns(), + fixed: 'right' + }); + }; + + Table.prototype.getTable = function getTable() { + var _this4 = this; + + var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}; + var columns = options.columns, + fixed = options.fixed; + var _props3 = this.props, + clsPrefix = _props3.clsPrefix, + _props3$scroll = _props3.scroll, + scroll = _props3$scroll === undefined ? {} : _props3$scroll, + getBodyWrapper = _props3.getBodyWrapper, + footerScroll = _props3.footerScroll, + headerScroll = _props3.headerScroll; + var useFixedHeader = this.props.useFixedHeader; + + var bodyStyle = _extends({}, this.props.bodyStyle); + var headStyle = {}; + var innerBodyStyle = {}; + + var tableClassName = ''; + //表格元素的宽度大于容器的宽度也显示滚动条 + if (scroll.x || fixed || this.contentDomWidth < this.contentWidth) { + tableClassName = clsPrefix + '-fixed'; + //没有数据并且含有顶部菜单时 + if (this.props.data.length == 0 && this.props.headerScroll) { + bodyStyle.overflowX = 'hidden'; + } + if (!footerScroll) { + bodyStyle.overflowX = bodyStyle.overflowX || 'auto'; + } + } + + if (scroll.y) { + // maxHeight will make fixed-Table scrolling not working + // so we only set maxHeight to body-Table here + if (fixed) { + // bodyStyle.height = bodyStyle.height || scroll.y; + innerBodyStyle.maxHeight = bodyStyle.maxHeight || scroll.y; + innerBodyStyle.overflowY = bodyStyle.overflowY || 'scroll'; + } else { + bodyStyle.maxHeight = bodyStyle.maxHeight || scroll.y; + } + bodyStyle.overflowY = bodyStyle.overflowY || 'scroll'; + useFixedHeader = true; + + // Add negative margin bottom for scroll bar overflow bug + var scrollbarWidth = this.scrollbarWidth; + if (scrollbarWidth >= 0) { + (fixed ? bodyStyle : headStyle).paddingBottom = '0px'; + //显示表头滚动条 + if (headerScroll) { + if (fixed) { + + if (this.domWidthDiff <= 0) { + headStyle.marginBottom = scrollbarWidth + 'px'; + bodyStyle.marginBottom = '-' + scrollbarWidth + 'px'; + } else { + innerBodyStyle.overflowX = 'auto'; + } + } else { + //内容少，不用显示滚动条 + if (this.domWidthDiff > 0) { + headStyle.overflowX = 'hidden'; + } + headStyle.marginBottom = '0px'; + } + } else { + if (fixed) { + if (this.domWidthDiff > 0) { + headStyle.overflow = 'hidden'; + innerBodyStyle.overflowX = 'auto'; //兼容expand场景、子表格含有固定列的场景 + } else { + bodyStyle.marginBottom = '-' + scrollbarWidth + 'px'; + } + } else { + headStyle.marginBottom = '-' + scrollbarWidth + 'px'; + } + } + } + } + + var renderTable = function renderTable() { + var hasHead = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true; + var hasBody = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true; + + var tableStyle = {}; + if (!fixed && scroll.x) { + // not set width, then use content fixed width + if (scroll.x === true) { + tableStyle.tableLayout = 'fixed'; + } else { + tableStyle.width = _this4.contentWidth - _this4.columnManager.getLeftColumnsWidth(_this4.contentWidth) - _this4.columnManager.getRightColumnsWidth(_this4.contentWidth); + } + } + // 自动出现滚动条 + if (!fixed && _this4.contentDomWidth < _this4.contentWidth) { + tableStyle.width = _this4.contentWidth - _this4.columnManager.getLeftColumnsWidth(_this4.contentWidth) - _this4.columnManager.getRightColumnsWidth(_this4.contentWidth); + } + var tableBody = hasBody ? getBodyWrapper(_react2["default"].createElement( + 'tbody', + { className: clsPrefix + '-tbody', onMouseLeave: _this4.onBodyMouseLeave }, + _this4.getRows(columns, fixed) + )) : null; + var _drag_class = _this4.props.dragborder ? "table-drag-bordered" : ""; + return _react2["default"].createElement( + 'table', + { id: 'bee-table-uid', className: ' ' + tableClassName + ' table-bordered ' + _drag_class + ' ', style: tableStyle }, + _this4.getColGroup(columns, fixed), + hasHead ? _this4.getHeader(columns, fixed) : null, + tableBody + ); + }; + + var headTable = void 0; + + if (useFixedHeader) { + headTable = _react2["default"].createElement( + 'div', + { + className: clsPrefix + '-header', + ref: fixed ? null : 'headTable', + style: headStyle, + onMouseOver: this.detectScrollTarget, + onTouchStart: this.detectScrollTarget, + onScroll: this.handleBodyScroll + }, + renderTable(true, false) + ); + } + var BodyTable = _react2["default"].createElement( + 'div', + { + className: clsPrefix + '-body', + style: bodyStyle, + ref: 'bodyTable', + onMouseOver: this.detectScrollTarget, + onTouchStart: this.detectScrollTarget, + onScroll: this.handleBodyScroll, + onMouseLeave: this.onBodyMouseLeave + }, + this.renderDragHideTable(), + renderTable(!useFixedHeader) + ); + + if (fixed && columns.length) { + var refName = void 0; + if (columns[0].fixed === 'left' || columns[0].fixed === true) { + refName = 'fixedColumnsBodyLeft'; + } else if (columns[0].fixed === 'right') { + refName = 'fixedColumnsBodyRight'; + } + delete bodyStyle.overflowX; + delete bodyStyle.overflowY; + BodyTable = _react2["default"].createElement( + 'div', + { + className: clsPrefix + '-body-outer', + style: _extends({}, bodyStyle) + }, + _react2["default"].createElement( + 'div', + { + style: _extends({}, innerBodyStyle), + className: clsPrefix + '-body-inner', + ref: refName, + onMouseOver: this.detectScrollTarget, + onTouchStart: this.detectScrollTarget, + onScroll: this.handleBodyScroll + }, + renderTable(!useFixedHeader) + ) + ); + } + var leftFixedWidth = this.columnManager.getLeftColumnsWidth(this.contentWidth); + var rightFixedWidth = this.columnManager.getRightColumnsWidth(this.contentWidth); + var parStyle = {}; + if (!fixed) { + parStyle = { 'marginLeft': leftFixedWidth, 'marginRight': rightFixedWidth }; + } + return _react2["default"].createElement( + 'div', + { style: parStyle }, + headTable, + BodyTable + ); + }; + + Table.prototype.getTitle = function getTitle() { + var _props4 = this.props, + title = _props4.title, + clsPrefix = _props4.clsPrefix; + + return title ? _react2["default"].createElement( + 'div', + { className: clsPrefix + '-title' }, + title(this.state.data) + ) : null; + }; + + Table.prototype.getFooter = function getFooter() { + var _props5 = this.props, + footer = _props5.footer, + clsPrefix = _props5.clsPrefix; + + return footer ? _react2["default"].createElement( + 'div', + { className: clsPrefix + '-footer' }, + footer(this.state.data) + ) : null; + }; + + Table.prototype.getEmptyText = function getEmptyText() { + var _props6 = this.props, + emptyText = _props6.emptyText, + clsPrefix = _props6.clsPrefix, + data = _props6.data; + + return !data.length ? _react2["default"].createElement( + 'div', + { className: clsPrefix + '-placeholder' }, + emptyText() + ) : null; + }; + + Table.prototype.getHeaderRowStyle = function getHeaderRowStyle(columns, rows) { + var fixedColumnsHeadRowsHeight = this.state.fixedColumnsHeadRowsHeight; + + var headerHeight = fixedColumnsHeadRowsHeight[0]; + + if (headerHeight && columns) { + if (headerHeight === 'auto') { + return { height: 'auto' }; + } + return { height: headerHeight / rows.length }; + } + return null; + }; + + Table.prototype.syncFixedTableRowHeight = function syncFixedTableRowHeight() { + //this.props.height、headerHeight分别为用户传入的行高和表头高度，如果有值，所有行的高度都是固定的，主要为了避免在千行数据中有固定列时获取行高度有问题 + var _props7 = this.props, + clsPrefix = _props7.clsPrefix, + height = _props7.height, + headerHeight = _props7.headerHeight, + columns = _props7.columns; + + var headRows = this.refs.headTable ? this.refs.headTable.querySelectorAll('thead') : this.refs.bodyTable.querySelectorAll('thead'); + var bodyRows = this.refs.bodyTable.querySelectorAll('.' + clsPrefix + '-row') || []; + var fixedColumnsHeadRowsHeight = [].map.call(headRows, function (row) { + var height = headerHeight; + if (headerHeight) { + height = ((0, _utils.getMaxColChildrenLength)(columns) + 1) * headerHeight; + } + return headerHeight ? height : row.getBoundingClientRect().height || 'auto'; + }); + var fixedColumnsBodyRowsHeight = [].map.call(bodyRows, function (row) { + return height ? height : row.getBoundingClientRect().height || 'auto'; + }); + if ((0, _shallowequal2["default"])(this.state.fixedColumnsHeadRowsHeight, fixedColumnsHeadRowsHeight) && (0, _shallowequal2["default"])(this.state.fixedColumnsBodyRowsHeight, fixedColumnsBodyRowsHeight)) { + return; + } + this.setState({ + fixedColumnsHeadRowsHeight: fixedColumnsHeadRowsHeight, + fixedColumnsBodyRowsHeight: fixedColumnsBodyRowsHeight + }); + }; + + Table.prototype.resetScrollY = function resetScrollY() { + if (this.refs.headTable) { + this.refs.headTable.scrollLeft = 0; + } + if (this.refs.bodyTable) { + this.refs.bodyTable.scrollLeft = 0; + } + }; + + Table.prototype.findExpandedRow = function findExpandedRow(record, index) { + var _this5 = this; + + var rows = this.getExpandedRows().filter(function (i) { + return i === _this5.getRowKey(record, index); + }); + return rows[0]; + }; + + Table.prototype.isRowExpanded = function isRowExpanded(record, index) { + return typeof this.findExpandedRow(record, index) !== 'undefined'; + }; + + Table.prototype.onBodyMouseLeave = function onBodyMouseLeave(e) { + this.hideHoverDom(e); + }; + + Table.prototype.detectScrollTarget = function detectScrollTarget(e) { + if (this.scrollTarget !== e.currentTarget) { + this.scrollTarget = e.currentTarget; + } + }; + + Table.prototype.hideHoverDom = function hideHoverDom(e) { + if (this.hoverDom) { + this.hoverDom.style.display = 'none'; + } + }; + + Table.prototype.handleBodyScroll = function handleBodyScroll(e) { + var _props8 = this.props, + _props8$scroll = _props8.scroll, + scroll = _props8$scroll === undefined ? {} : _props8$scroll, + clsPrefix = _props8.clsPrefix, + handleScrollY = _props8.handleScrollY, + handleScrollX = _props8.handleScrollX; + var _refs = this.refs, + headTable = _refs.headTable, + bodyTable = _refs.bodyTable, + fixedColumnsBodyLeft = _refs.fixedColumnsBodyLeft, + fixedColumnsBodyRight = _refs.fixedColumnsBodyRight; + // Prevent scrollTop setter trigger onScroll event + // http://stackoverflow.com/q/1386696 + + if (e.currentTarget !== e.target) { + return; + } + if (e.target.scrollLeft !== this.lastScrollLeft) { + var position = ''; + if (e.target === bodyTable && headTable) { + headTable.scrollLeft = e.target.scrollLeft; + } else if (e.target === headTable && bodyTable) { + bodyTable.scrollLeft = e.target.scrollLeft; + } + if (e.target.scrollLeft === 0) { + position = 'left'; + } else if (e.target.scrollLeft + 1 >= e.target.children[0].getBoundingClientRect().width - e.target.getBoundingClientRect().width) { + position = 'right'; + } else if (this.state.scrollPosition !== 'middle') { + position = 'middle'; + } + if (position) { + (0, _componentClasses2["default"])(this.contentTable).remove(new RegExp('^' + clsPrefix + '-scroll-position-.+$')).add(clsPrefix + '-scroll-position-' + position); + } + if (handleScrollX) { + (0, _utils.debounce)(handleScrollX(e.target.scrollLeft, this.treeType), 300); + } + } + // console.log('lastScrollTop--'+this.lastScrollTop+'--eventScrollTop--'+ e.target.scrollTop); + if (scroll.y && this.lastScrollTop != e.target.scrollTop && e.target !== headTable) { + if (fixedColumnsBodyLeft && e.target !== fixedColumnsBodyLeft) { + fixedColumnsBodyLeft.scrollTop = e.target.scrollTop; + } + if (fixedColumnsBodyRight && e.target !== fixedColumnsBodyRight) { + fixedColumnsBodyRight.scrollTop = e.target.scrollTop; + } + if (bodyTable && e.target !== bodyTable) { + bodyTable.scrollTop = e.target.scrollTop; + } + if (this.hoverDom) { + this.hoverDom.style.display = 'none'; + } + this.lastScrollTop = e.target.scrollTop; + if (handleScrollY) { + (0, _utils.debounce)(handleScrollY(this.lastScrollTop, this.treeType), 300); + } + } + + // Remember last scrollLeft for scroll direction detecting. + this.lastScrollLeft = e.target.scrollLeft; + }; + + Table.prototype.handleRowHover = function handleRowHover(isHover, key, event, currentIndex) { + //增加新的API，设置是否同步Hover状态，提高性能，避免无关的渲染 + var _props9 = this.props, + syncHover = _props9.syncHover, + onRowHover = _props9.onRowHover, + data = _props9.data; + + var record = data[currentIndex]; + // 固定列、或者含有hoverdom时情况下同步hover状态 + if (this.columnManager.isAnyColumnsFixed() && syncHover) { + this.hoverKey = key; + this.store.setState({ + currentHoverKey: isHover ? key : null + }); + } + if (this.hoverDom && isHover) { + this.currentHoverKey = key; + var td = (0, _utils.closest)(event.target, 'td'); + if (td) { + var scrollTop = this.lastScrollTop ? this.lastScrollTop : 0; + var top = td.offsetTop - scrollTop; + if (this.refs.headTable) { + top = top + this.refs.headTable.clientHeight; + } + this.hoverDom.style.top = top + 'px'; + this.hoverDom.style.height = td.offsetHeight + 'px'; + this.hoverDom.style.lineHeight = td.offsetHeight + 'px'; + this.hoverDom.style.display = 'block'; + } + } + + onRowHover && onRowHover(currentIndex, record); + }; + + Table.prototype.render = function render() { + var _this6 = this; + + var props = this.props; + var clsPrefix = props.clsPrefix; + + var className = props.clsPrefix; + if (props.className) { + className += ' ' + props.className; + } + if (props.useFixedHeader || props.scroll && props.scroll.y) { + className += ' ' + clsPrefix + '-fixed-header'; + } + if (props.bordered) { + className += ' ' + clsPrefix + '-bordered'; + } + className += ' ' + clsPrefix + '-scroll-position-' + this.state.scrollPosition; + //如果传入height说明是固定高度 + if (props.height) { + className += ' fixed-height'; + } + var isTableScroll = this.columnManager.isAnyColumnsFixed() || props.scroll.x || props.scroll.y; + var loading = props.loading; + if (typeof loading === 'boolean') { + loading = { + show: loading + }; + } + + return _react2["default"].createElement( + 'div', + { className: className, style: props.style, ref: function ref(el) { + return _this6.contentTable = el; + }, + tabIndex: props.focusable && (props.tabIndex ? props.tabIndex : '0') }, + this.getTitle(), + _react2["default"].createElement( + 'div', + { className: clsPrefix + '-content' }, + _react2["default"].createElement( + 'div', + { className: isTableScroll ? clsPrefix + '-scroll' : '' }, + this.getTable({ columns: this.columnManager.groupedColumns() }), + this.getEmptyText(), + this.getFooter() + ), + this.columnManager.isAnyColumnsLeftFixed() && _react2["default"].createElement( + 'div', + { className: clsPrefix + '-fixed-left' }, + this.getLeftFixedTable() + ), + this.columnManager.isAnyColumnsRightFixed() && _react2["default"].createElement( + 'div', + { className: clsPrefix + '-fixed-right' }, + this.getRightFixedTable() + ) + ), + _react2["default"].createElement(_beeLoading2["default"], _extends({ + container: this + }, loading)), + props.hoverContent && _react2["default"].createElement( + 'div', + { className: 'u-row-hover', + onMouseEnter: this.onRowHoverMouseEnter, onMouseLeave: this.onRowHoverMouseLeave, ref: function ref(el) { + return _this6.hoverDom = el; + } }, + props.hoverContent() + ) + ); + }; + + return Table; +}(_react.Component); + +; + +Table.propTypes = propTypes; +Table.defaultProps = defaultProps; + +exports["default"] = Table; +module.exports = exports['default']; \ No newline at end of file diff --git a/build/TableCell.js b/build/TableCell.js new file mode 100644 index 0000000..88628fe --- /dev/null +++ b/build/TableCell.js @@ -0,0 +1,139 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _propTypes = require('prop-types'); + +var _propTypes2 = _interopRequireDefault(_propTypes); + +var _objectPath = require('object-path'); + +var _objectPath2 = _interopRequireDefault(_objectPath); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; } + +function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; } + +function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + +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); } + +var propTypes = { + record: _propTypes2["default"].object, + clsPrefix: _propTypes2["default"].string, + index: _propTypes2["default"].number, + indent: _propTypes2["default"].number, + indentSize: _propTypes2["default"].number, + column: _propTypes2["default"].object, + expandIcon: _propTypes2["default"].node +}; + +var TableCell = function (_Component) { + _inherits(TableCell, _Component); + + function TableCell(props) { + _classCallCheck(this, TableCell); + + var _this = _possibleConstructorReturn(this, _Component.call(this, props)); + + _this.isInvalidRenderCellText = _this.isInvalidRenderCellText.bind(_this); + _this.handleClick = _this.handleClick.bind(_this); + return _this; + } + + TableCell.prototype.isInvalidRenderCellText = function isInvalidRenderCellText(text) { + return text && !_react2["default"].isValidElement(text) && Object.prototype.toString.call(text) === '[object Object]'; + }; + + TableCell.prototype.handleClick = function handleClick(e) { + var _props = this.props, + record = _props.record, + onCellClick = _props.column.onCellClick; + + if (onCellClick) { + onCellClick(record, e); + } + }; + + TableCell.prototype.render = function render() { + var _props2 = this.props, + record = _props2.record, + indentSize = _props2.indentSize, + clsPrefix = _props2.clsPrefix, + indent = _props2.indent, + index = _props2.index, + expandIcon = _props2.expandIcon, + column = _props2.column, + fixed = _props2.fixed, + showSum = _props2.showSum; + var dataIndex = column.dataIndex, + render = column.render; + var _column$className = column.className, + className = _column$className === undefined ? '' : _column$className; + + + var text = _objectPath2["default"].get(record, dataIndex); + var tdProps = void 0; + var colSpan = void 0; + var rowSpan = void 0; + + if (render && !showSum) { + text = render(text, record, index); + if (this.isInvalidRenderCellText(text)) { + tdProps = text.props || {}; + rowSpan = tdProps.rowSpan; + colSpan = tdProps.colSpan; + text = text.children; + } + } + + if (this.isInvalidRenderCellText(text)) { + text = null; + } + + var indentText = expandIcon ? _react2["default"].createElement('span', { + style: { paddingLeft: indentSize * indent + 'px' }, + className: clsPrefix + '-indent indent-level-' + indent + }) : null; + + if (rowSpan === 0 || colSpan === 0) { + return null; + } + //不是固定表格并且当前列是固定，则隐藏当前列 + if (column.fixed && !fixed) { + className = className + (' ' + clsPrefix + '-fixed-columns-in-body'); + } + if (column.textAlign) { + className = className + (' text-' + column.textAlign); + } + return _react2["default"].createElement( + 'td', + { + colSpan: colSpan, + rowSpan: rowSpan, + className: className, + onClick: this.handleClick + }, + indentText, + expandIcon, + text + ); + }; + + return TableCell; +}(_react.Component); + +; + +TableCell.propTypes = propTypes; + +exports["default"] = TableCell; +module.exports = exports['default']; \ No newline at end of file diff --git a/build/TableHeader.js b/build/TableHeader.js new file mode 100644 index 0000000..e66d843 --- /dev/null +++ b/build/TableHeader.js @@ -0,0 +1,751 @@ +"use strict"; + +Object.defineProperty(exports, "__esModule", { + 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; }; + +var _react = require("react"); + +var _react2 = _interopRequireDefault(_react); + +var _reactDom = require("react-dom"); + +var _reactDom2 = _interopRequireDefault(_reactDom); + +var _propTypes = require("prop-types"); + +var _propTypes2 = _interopRequireDefault(_propTypes); + +var _throttleDebounce = require("throttle-debounce"); + +var _utils = require("./utils"); + +var _FilterType = require("./FilterType"); + +var _FilterType2 = _interopRequireDefault(_FilterType); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; } + +function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; } + +function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + +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); } + +var propTypes = { + clsPrefix: _propTypes2["default"].string, + rowStyle: _propTypes2["default"].object, + rows: _propTypes2["default"].array +}; + +var TableHeader = function (_Component) { + _inherits(TableHeader, _Component); + + function TableHeader(props) { + _classCallCheck(this, TableHeader); + + var _this = _possibleConstructorReturn(this, _Component.call(this, props)); + + _this.optTableMargin = function (table, scrollbarWidth) { + if (table) { + table.style.marginBottom = scrollbarWidth + "px"; + } + }; + + _this.optTableScroll = function (table) { + var overflow = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; + + if (table) { + var innerTable = table.querySelector('.u-table-body-inner'); + if (innerTable) { + overflow.x && (innerTable.style.overflowX = overflow.x); + overflow.y && (innerTable.style.overflowY = overflow.y); + } + } + }; + + _this.onLineMouseMove = function (e) { + var _this$props = _this.props, + clsPrefix = _this$props.clsPrefix, + dragborder = _this$props.dragborder, + contentDomWidth = _this$props.contentDomWidth, + scrollbarWidth = _this$props.scrollbarWidth, + contentTable = _this$props.contentTable, + headerScroll = _this$props.headerScroll; + + _utils.Event.stopPropagation(e); + var event = _utils.Event.getEvent(e); + if (!_this.props.dragborder) return; + if (_this.drag.option != "border") { + return false; + } + //移动改变宽度 + var currentCols = _this.table.cols[_this.drag.currIndex]; + var diff = event.x - _this.drag.oldLeft; + var newWidth = _this.drag.oldWidth + diff; + _this.drag.newWidth = newWidth; + // if(newWidth > this.drag.minWidth){ + if (newWidth > _this.minWidth) { + currentCols.style.width = newWidth + 'px'; + //hao 支持固定表头拖拽 修改表体的width + if (_this.fixedTable.cols) { + _this.fixedTable.cols[_this.drag.currIndex].style.width = newWidth + "px"; + } + var oldTableWidth = parseInt(_this.table.table.style.width ? _this.table.table.style.width : _this.table.table.scrollWidth); + var newTableWidth = oldTableWidth + diff; + _this.table.table.style.width = newTableWidth; //改变table的width + + var showScroll = contentDomWidth - newTableWidth - scrollbarWidth; + var fixedLeftHeaderTable = contentTable.querySelector('.u-table-fixed-left .u-table-header'); + var fixedRighHeadertTable = contentTable.querySelector('.u-table-fixed-right .u-table-header'); + var contentTableHeader = contentTable.querySelector('.u-table-scroll .u-table-header'); + var fixedLeftBodyTable = contentTable.querySelector('.u-table-fixed-left .u-table-body-outer'); + var fixedRightBodyTable = contentTable.querySelector('.u-table-fixed-right .u-table-body-outer'); + + //表头滚动条处理 + if (headerScroll) { + if (showScroll < 0) { + //找到固定列表格，设置表头的marginBottom值为scrollbarWidth; + contentTableHeader.style.overflowX = 'scroll'; + _this.optTableMargin(fixedLeftHeaderTable, scrollbarWidth); + _this.optTableMargin(fixedRighHeadertTable, scrollbarWidth); + // fixedLeftHeaderTable && (fixedLeftHeaderTable.style.marginBottom = scrollbarWidth + "px"); + // fixedRighHeadertTable && (fixedRighHeadertTable.style.marginBottom = scrollbarWidth + "px"); + //todo inner scroll-x去掉；outer marginbottom 设置成-15px】 + } else { + contentTableHeader.style.overflowX = 'hidden'; + _this.optTableMargin(fixedLeftHeaderTable, 0); + _this.optTableMargin(fixedRighHeadertTable, 0); + } + } else { + if (showScroll < 0) { + _this.optTableMargin(fixedLeftBodyTable, '-' + scrollbarWidth); + _this.optTableMargin(fixedRightBodyTable, '-' + scrollbarWidth); + _this.optTableScroll(fixedLeftBodyTable, { x: 'scroll' }); + _this.optTableScroll(fixedRightBodyTable, { x: 'scroll' }); + } else { + _this.optTableMargin(fixedLeftBodyTable, 0); + _this.optTableMargin(fixedRightBodyTable, 0); + _this.optTableScroll(fixedLeftBodyTable, { x: 'auto' }); + _this.optTableScroll(fixedRightBodyTable, { x: 'auto' }); + } + } + } + }; + + _this.onLineMouseDown = function (e) { + _utils.Event.stopPropagation(e); + var event = _utils.Event.getEvent(e); + var _this$props2 = _this.props, + clsPrefix = _this$props2.clsPrefix, + contentTable = _this$props2.contentTable; + + if (!_this.props.dragborder) return; + var currentIndex = parseInt(_utils.Event.getTarget(event).getAttribute("data-line-index")); + var defaultWidth = _utils.Event.getTarget(event).getAttribute("data-th-width"); + var currentObj = _this.table.cols[currentIndex]; + _this.drag.option = "border"; //拖拽操作 + _this.drag.currIndex = currentIndex; + _this.drag.oldLeft = event.x; + _this.drag.oldWidth = parseInt(currentObj.style.width); + _this.drag.minWidth = currentObj.style.minWidth != "" ? parseInt(currentObj.style.minWidth) : defaultWidth; + }; + + _this.onLineMouseUp = function (event) { + var width = _this.drag.newWidth; + _this.clearDragBorder(event); + _this.props.onDropBorder(event, width); + }; + + _this.bodyonLineMouseMove = function (event) { + _this.clearDragBorder(event); + }; + + _this.dragAbleMouseDown = function (e) { + // Event.stopPropagation(e); + var event = _utils.Event.getEvent(e); + if (!_this.props.draggable) return; + var th = _this.getThDome(event.target); + if (!th) return; + event.target.setAttribute('draggable', true); //添加交换列效果 + _this.drag.option = 'dragAble'; + _this.currentDome = event.target; + + _this.thEventListen([{ key: 'mouseup', fun: _this.dragAbleMouseUp }], '', true); //th + _this.removeDragBorderEvent(); //清理掉拖拽列宽的事件 + _this.addDragAbleEvent(); //添加拖拽交换列的事件 + }; + + _this.dragAbleMouseUp = function (e) { + _this.currentDome.setAttribute('draggable', false); //添加交换列效果 + _this.removeDragAbleEvent(); + _this.thEventListen([{ key: 'mouseup', fun: _this.dragAbleMouseUp }], 'remove', true); //th + //拖拽交换列事件 + _this.thEventListen([{ key: 'mousedown', fun: _this.dragAbleMouseDown }], 'remove', true); //表示把事件添加到th元素上 + _this.initEvent(); + }; + + _this.onDragStart = function (e) { + var event = _utils.Event.getEvent(e); + if (!_this.props.draggable) return; + if (_this.drag.option === 'border') { + return; + } + var th = _this.getThDome(event.target); + if (!th) return; + var currentIndex = parseInt(th.getAttribute("data-line-index")); + + var currentKey = event.target.getAttribute('data-line-key'); + event.dataTransfer.effectAllowed = "move"; + event.dataTransfer.setData("Text", currentKey); + _this.currentObj = _this.props.rows[0][currentIndex]; + // event.dataTransfer.setDragImage(event.target, 0, 0); + }; + + _this.onDragOver = function (e) { + event.preventDefault(); + }; + + _this.onDrop = function (e) { + if (!_this.props.draggable) return; + if (_this.drag.option === 'border') { + return; + } + _this.currentDome.setAttribute('draggable', false); //添加交换列效果 + var data = _this.getCurrentEventData(e); + if (!data) return; + if (!_this.currentObj || _this.currentObj.key == data.key) return; + if (!_this.props.onDrop) return; + _this.props.onDrop(event, { dragSource: _this.currentObj, dragTarg: data }); + }; + + _this.handlerFilterChange = function (key, value, condition) { + var onFilterChange = _this.props.onFilterChange; + + if (onFilterChange) { + onFilterChange(key, value, condition); + } + }; + + _this.handlerFilterClear = function (field) { + var onFilterClear = _this.props.onFilterClear; + + if (onFilterClear) { + onFilterClear(field); + } + }; + + _this.filterRenderType = function (type, dataIndex, index) { + var _this$props3 = _this.props, + clsPrefix = _this$props3.clsPrefix, + rows = _this$props3.rows, + filterDelay = _this$props3.filterDelay, + locale = _this$props3.locale; + + switch (type) { + //文本输入 + case "text": + return _react2["default"].createElement(_FilterType2["default"], { + locale: locale //多语 + , rendertype: type //渲染类型 + , clsPrefix: clsPrefix //css前缀 + , className: clsPrefix + " filter-text", + dataIndex: dataIndex //字段 + , onFilterChange: _this.handlerFilterChange //输入框回调 + , onFilterClear: _this.handlerFilterClear //清除回调 + , filterDropdown: rows[1][index]["filterdropdown"] //是否显示下拉条件 + , filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number + , filterDropdownIncludeKeys: rows[1][index]["filterdropdownincludekeys"] //下拉条件按照指定的keys去显示 + }); + //数值输入 + case "number": + return _react2["default"].createElement(_FilterType2["default"], { + locale: locale, + rendertype: type, + clsPrefix: clsPrefix, + className: clsPrefix + " filter-text", + dataIndex: dataIndex //字段 + , onFilterChange: (0, _throttleDebounce.debounce)(filterDelay || 300, _this.handlerFilterChange) //输入框回调并且函数防抖动 + , onFilterClear: _this.handlerFilterClear //清除回调 + , filterDropdown: rows[1][index]["filterdropdown"], + filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number + , filterDropdownIncludeKeys: rows[1][index]["filterdropdownincludekeys"] //下拉条件按照指定的keys去显示 + , filterInputNumberOptions: rows[1][index]["filterinputnumberoptions"] //设置数值框内的详细属性 + }); + //下拉框选择 + case "dropdown": + var selectDataSource = []; + //处理没有输入数据源的时候，系统自动查找自带的数据筛选后注入 + if (rows.length > 0 && (rows[1][index]["filterdropdownauto"] || "auto") == "auto") { + var hash = {}; + //处理下拉重复对象组装dropdown + selectDataSource = Array.from(rows[1][0].datasource, function (x) { + return { + key: x[dataIndex], + value: x[dataIndex] + }; + }); + selectDataSource = selectDataSource.reduceRight(function (item, next) { + hash[next.key] ? "" : hash[next.key] = true && item.push(next); + return item; + }, []); + } else { + //从外部数据源加载系统数据 + selectDataSource = rows[1][index]["filterdropdowndata"]; + } + return _react2["default"].createElement(_FilterType2["default"], { + locale: locale, + rendertype: type, + className: clsPrefix + " filter-dropdown", + data: selectDataSource, + notFoundContent: "Loading" //没有数据显示的默认字 + , dataIndex: dataIndex //字段 + , onFilterChange: _this.handlerFilterChange //输入框回调 + , onFilterClear: _this.handlerFilterClear //清除回调 + , filterDropdown: rows[1][index]["filterdropdown"], + onFocus: rows[1][index]["filterdropdownfocus"], + filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number + , filterDropdownIncludeKeys: rows[1][index]["filterdropdownincludekeys"] //下拉条件按照指定的keys去显示 + }); + //日期 + case "date": + return _react2["default"].createElement(_FilterType2["default"], { + locale: locale, + rendertype: type, + className: "filter-date", + onClick: function onClick() {}, + format: rows[1][index]["format"] || "YYYY-MM-DD", + dataIndex: dataIndex //字段 + , onFilterChange: _this.handlerFilterChange //输入框回调 + , onFilterClear: _this.handlerFilterClear //清除回调 + , filterDropdown: rows[1][index]["filterdropdown"], + filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number + , filterDropdownIncludeKeys: rows[1][index]["filterdropdownincludekeys"] //下拉条件按照指定的keys去显示 + }); + //日期范围 + case "daterange": + return _react2["default"].createElement(_FilterType2["default"], { + locale: locale, + rendertype: type, + className: "filter-date", + onClick: function onClick() {}, + format: rows[1][index]["format"] || "YYYY-MM-DD", + dataIndex: dataIndex //字段 + , onFilterChange: _this.handlerFilterChange //输入框回调 + , onFilterClear: _this.handlerFilterClear //清除回调 + , filterDropdown: rows[1][index]["filterdropdown"], + filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number + , filterDropdownIncludeKeys: rows[1][index]["filterdropdownincludekeys"] //下拉条件按照指定的keys去显示 + }); + default: + //不匹配类型默认文本输入 + return _react2["default"].createElement("div", null); + } + }; + + _this.currentObj = null; + _this.theadKey = new Date().getTime(); + _this.drag = { + option: '' + }; + _this.minWidth = 80; //确定最小宽度就是80 + _this.table = null; + _this._thead = null; //当前对象 + return _this; + } + + /** + * + * 动态绑定th line 事件方法 + * @param {*} events + * @param {*} type type 为false 为增加事件 + * @param {*} eventSource 为false 给 th 内部的div增加事件 + * @memberof TableHeader + */ + TableHeader.prototype.thEventListen = function thEventListen(events, type, eventSource) { + var _table = this.table, + ths = _table.ths, + cols = _table.cols; + + for (var index = 0; index < ths.length; index++) { + var element = ths[index]; //.getAttribute('data-type'); + if (!element.getAttribute('data-th-fixed')) { + var colLine = null; + if (element.children.length === 0) { + colLine = element; + } else if (element.children.length > 0) { + colLine = element.lastElementChild; + } else if (element.children.length === 1) { + colLine = element.children[0]; + } + // const colLine = element.children.length > 1?element.lastElementChild:element.children[0]; + for (var i = 0; i < events.length; i++) { + var _event = events[i]; + var _dataSource = eventSource ? element : colLine; + if (type === "remove") { + _utils.EventUtil.removeHandler(_dataSource, _event.key, _event.fun); + } else { + _utils.EventUtil.addHandler(_dataSource, _event.key, _event.fun); + } + } + } + } + }; + + /** + * 当前对象上绑定全局事件，用于拖拽区域以外时的事件处理 + * @param {*} events + * @param {*} type + * @memberof TableHeader + */ + + + TableHeader.prototype.bodyEventListen = function bodyEventListen(events, type) { + for (var i = 0; i < events.length; i++) { + var _event = events[i]; + if (type == "remove") { + _utils.EventUtil.removeHandler(document.body, _event.key, _event.fun); + } else { + _utils.EventUtil.addHandler(document.body, _event.key, _event.fun); + } + } + }; + + TableHeader.prototype.componentDidUpdate = function componentDidUpdate() { + this.initTable(); + this.initEvent(); + }; + + // componentDidMount(){ + // this.initTable(); + // this.initEvent(); + // } + + /** + * 初始化拖拽列宽的事件处理 + * @returns + * @memberof TableHeader + */ + + + TableHeader.prototype.initEvent = function initEvent() { + var events = [{ key: 'mouseup', fun: this.onLineMouseUp }, { key: 'mousemove', fun: this.onLineMouseMove }]; + + if (this.props.dragborder) { + this.thEventListen(events, '', true); //表示把事件添加到th元素上 + this.thEventListen([{ key: 'mousedown', fun: this.onLineMouseDown }]); //表示把事件添加到竖线 + this.bodyEventListen([{ key: 'mouseup', fun: this.bodyonLineMouseMove }]); + } + if (!this.props.draggable) return; + //拖拽交换列事件 + this.thEventListen([{ key: 'mousedown', fun: this.dragAbleMouseDown }], '', true); //表示把事件添加到th元素上 + }; + + /** + * 移除当前全局事件对象 + * @memberof TableHeader + */ + + + TableHeader.prototype.removeDragBorderEvent = function removeDragBorderEvent() { + var events = [{ key: 'mouseup', fun: this.onLineMouseUp }, { key: 'mousemove', fun: this.onLineMouseMove }]; + this.thEventListen(events, 'remove', true); //表示把事件添加到th元素上 + this.thEventListen([{ key: 'mousedown', fun: this.onLineMouseDown }], 'remove'); //表示把事件添加到竖线 + this.bodyEventListen([{ key: 'mouseup', fun: this.bodyonLineMouseMove }], 'remove'); + }; + + /** + * 获取table的属性存放在this.table 中。(公用方法) + * @returns + * @memberof TableHeader + */ + + + TableHeader.prototype.initTable = function initTable() { + if (!this.props.dragborder && !this.props.draggable) return; + // let el = ReactDOM.findDOMNode(this); + var tableDome = this._thead.parentNode; + var table = {}; + if (tableDome && tableDome.nodeName && tableDome.nodeName.toUpperCase() == "TABLE") { + table.table = tableDome; + table.cols = tableDome.getElementsByTagName("col"); + table.ths = tableDome.getElementsByTagName("th"); + } + this.table = table; + + if (!this.props.dragborder) return; + if (document.getElementById("u-table-drag-thead-" + this.theadKey)) { + //hao 固定列table + this.fixedTable = {}; + var _fixedParentContext = document.getElementById("u-table-drag-thead-" + this.theadKey).parentNode; + var siblingDom = _fixedParentContext.parentNode.nextElementSibling; + if (siblingDom) { + var fixedTable = siblingDom.querySelector("table"); + this.fixedTable.table = fixedTable; + this.fixedTable.cols = fixedTable.getElementsByTagName("col"); + // this.fixedTable.ths = fixedTable.tableDome.getElementsByTagName("th"); + } + } + }; + /** + *相关滚动条联动操作 + * + * @memberof TableHeader + */ + + + /** + * 调整列宽的move事件 + * @memberof TableHeader + */ + + + /** + * 调整列宽的down事件 + * @memberof TableHeader + */ + + + /** + * 调整列宽的up事件 + * @memberof TableHeader + */ + + + /** + * 调整列宽到区域以外的up事件 + */ + + + TableHeader.prototype.clearDragBorder = function clearDragBorder() { + if (!this.drag || !this.drag.option) return; + var rows = this.props.rows; + + var data = { rows: rows[0], cols: this.table.cols, currIndex: this.drag.currIndex }; + this.props.afterDragColWidth && this.props.afterDragColWidth(data); + this.drag = { + option: "" + }; + if (this.props.draggable) { + this.removeDragAbleEvent(); + } + }; + + //---拖拽列宽代码逻辑----start----- + + /** + * 调整交换列down事件 + * @memberof TableHeader + */ + + /** + * 调整交换列up事件 + * @memberof TableHeader + */ + + + /** + * 添加换列的事件监听 + */ + TableHeader.prototype.addDragAbleEvent = function addDragAbleEvent() { + var events = [{ key: 'dragstart', fun: this.onDragStart }, //用户开始拖动元素时触发 + { key: 'dragover', fun: this.onDragOver }, //当某被拖动的对象在另一对象容器范围内拖动时触发此事件 + { key: 'drop', fun: this.onDrop }]; + this.thEventListen(events, '', true); + }; + + /** + * 删除换列的事件监听 + */ + + + TableHeader.prototype.removeDragAbleEvent = function removeDragAbleEvent() { + var events = [{ key: 'dragstart', fun: this.onDragStart }, { key: 'dragover', fun: this.onDragOver }, { key: 'drop', fun: this.onDrop }, { key: 'dragenter', fun: this.onDragEnter }]; + this.thEventListen(events, 'remove', true); + }; + + /** + * 开始调整交换列的事件 + */ + + + /** + * 在一个拖动过程中，释放鼠标键时触发此事件。【目标事件】 + * @memberof TableHeader + */ + + + /** + * 获取当前th上的对象数据 + * @param {*} e + * @returns + * @memberof TableHeader + */ + TableHeader.prototype.getCurrentEventData = function getCurrentEventData(e) { + var event = _utils.Event.getEvent(e); + var th = this.getThDome(event.target); + if (!th) { + console.log(" event target is not th ! "); + return null; + } + var key = th.getAttribute('data-line-key'); + var data = this.props.rows[0].find(function (da) { + return da.key == key; + }); + if (data) { + return data; + } else { + console.log(" getCurrentEventData data is null "); + return null; + } + }; + + /** + * 根据当前鼠标点击的节点，进行递归遍历，最终找到th + * @param {*} element + * @returns 对象 + * @memberof TableHeader + */ + + + TableHeader.prototype.getThDome = function getThDome(element) { + var _tagName = element.tagName.toLowerCase(); + if (element.getAttribute('data-filter-type') === 'filterContext') return null; + if (_tagName === 'i') return null; + if (_tagName != 'th') { + return this.getThDome(element.parentElement); + } else { + return element; + } + }; + + //---拖拽列交换----end----- + + /** + * 过滤输入后或下拉条件的回调函数 + */ + + + /** + * 过滤行清除回调 + */ + + + /** + * 过滤渲染的组件类型 + */ + + + TableHeader.prototype.render = function render() { + var _this2 = this; + + var _props = this.props, + clsPrefix = _props.clsPrefix, + rowStyle = _props.rowStyle, + draggable = _props.draggable, + dragborder = _props.dragborder, + rows = _props.rows, + filterable = _props.filterable, + fixed = _props.fixed, + lastShowIndex = _props.lastShowIndex; + + + var attr = dragborder ? { id: "u-table-drag-thead-" + this.theadKey } : {}; + return _react2["default"].createElement( + "thead", + _extends({ className: clsPrefix + "-thead" }, attr, { "data-theader-fixed": "scroll", ref: function ref(_thead) { + return _this2._thead = _thead; + } }), + rows.map(function (row, index) { + return _react2["default"].createElement( + "tr", + { key: index, style: rowStyle, className: filterable && index == rows.length - 1 ? 'filterable' : '' }, + row.map(function (da, columIndex, arr) { + var thHover = da.drgHover ? " " + clsPrefix + "-thead th-drag-hover" : ""; + delete da.drgHover; + var fixedStyle = ""; + var canDotDrag = ""; + //主表格下、固定列或者是过滤行中含有固定列时添加该属性 + if (!fixed && (da.fixed || filterable && index == rows.length - 1 && rows[0][columIndex].fixed)) { + fixedStyle = " " + clsPrefix + "-row-fixed-columns-in-body"; + } + + if (lastShowIndex == columIndex) { + canDotDrag = "th-can-not-drag"; + } + var thClassName = "" + da.className ? "" + da.className : ''; + if (da.textAlign) { + thClassName += " text-" + da.textAlign + " "; + } + delete da.textAlign; + var keyTemp = {}; + //避免key为undefined + // if(da.dataindex && da.key ===undefined ){ + keyTemp.key = da.key || da.dataindex || index + '-' + columIndex; + + // } + if (filterable && index == rows.length - 1) { + da.children = _this2.filterRenderType(da["filtertype"], da.dataindex, columIndex); + if (da.key === undefined) { + keyTemp.key = keyTemp.key + '-filterable'; + } + delete da.filterdropdownfocus; + } + + var thDefaultObj = {}; + + if (draggable) { + thClassName += " " + clsPrefix + "-thead th-drag " + thHover + " "; + } + if (dragborder) { + thClassName += " " + clsPrefix + "-thead-th " + canDotDrag; + } + thClassName += " " + fixedStyle; + + if (!da.fixed) { + + return _react2["default"].createElement( + "th", + _extends({}, da, keyTemp, { className: thClassName, "data-th-fixed": da.fixed, + "data-line-key": da.key, "data-line-index": columIndex, "data-th-width": da.width }), + da.children, + dragborder ? _react2["default"].createElement( + "div", + { ref: function ref(el) { + return _this2.gap = el; + }, "data-line-key": da.key, + "data-line-index": columIndex, "data-th-width": da.width, + "data-type": "online", className: clsPrefix + "-thead-th-drag-gap" }, + _react2["default"].createElement("div", { id: "th-online", className: "online", "data-line-key": da.key, "data-line-index": columIndex, "data-th-width": da.width }) + ) : "" + ); + } else { + thDefaultObj = _extends({}, da, { + className: thClassName + " " + fixedStyle + }); + da.onClick ? thDefaultObj.onClick = function (e) { + da.onClick(da, e); + } : ""; + return _react2["default"].createElement("th", _extends({}, thDefaultObj, keyTemp, { "data-th-fixed": da.fixed })); + } + }) + ); + }) + ); + }; + + return TableHeader; +}(_react.Component); + +TableHeader.defaultProps = { + contentWidthDiff: 0 +}; + + +TableHeader.propTypes = propTypes; +exports["default"] = TableHeader; +module.exports = exports["default"]; \ No newline at end of file diff --git a/build/TableRow.js b/build/TableRow.js new file mode 100644 index 0000000..b119c48 --- /dev/null +++ b/build/TableRow.js @@ -0,0 +1,324 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _propTypes = require('prop-types'); + +var _propTypes2 = _interopRequireDefault(_propTypes); + +var _TableCell = require('./TableCell'); + +var _TableCell2 = _interopRequireDefault(_TableCell); + +var _ExpandIcon = require('./ExpandIcon'); + +var _ExpandIcon2 = _interopRequireDefault(_ExpandIcon); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; } + +function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; } + +function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + +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); } + +var propTypes = { + onDestroy: _propTypes2["default"].func, + onRowClick: _propTypes2["default"].func, + onRowDoubleClick: _propTypes2["default"].func, + record: _propTypes2["default"].object, + clsPrefix: _propTypes2["default"].string, + expandIconColumnIndex: _propTypes2["default"].number, + onHover: _propTypes2["default"].func, + columns: _propTypes2["default"].array, + height: _propTypes2["default"].oneOfType([_propTypes2["default"].string, _propTypes2["default"].number]), + visible: _propTypes2["default"].bool, + index: _propTypes2["default"].number, + hoverKey: _propTypes2["default"].any, + expanded: _propTypes2["default"].bool, + expandable: _propTypes2["default"].any, + onExpand: _propTypes2["default"].func, + needIndentSpaced: _propTypes2["default"].bool, + className: _propTypes2["default"].string, + indent: _propTypes2["default"].number, + indentSize: _propTypes2["default"].number, + expandIconAsCell: _propTypes2["default"].bool, + expandRowByClick: _propTypes2["default"].bool, + store: _propTypes2["default"].object.isRequired +}; + +var defaultProps = { + onRowClick: function onRowClick() {}, + onRowDoubleClick: function onRowDoubleClick() {}, + onDestroy: function onDestroy() {}, + + expandIconColumnIndex: 0, + expandRowByClick: false, + onHover: function onHover() {}, + + className: '', + setRowParentIndex: function setRowParentIndex() {} +}; + +var TableRow = function (_Component) { + _inherits(TableRow, _Component); + + function TableRow(props) { + _classCallCheck(this, TableRow); + + var _this = _possibleConstructorReturn(this, _Component.call(this, props)); + + _this.set = function (fn) { + _this.clear(); + _this._timeout = window.setTimeout(fn, 300); + }; + + _this.clear = function (event) { + if (_this._timeout) { + window.clearTimeout(_this._timeout); + } + }; + + _this.bindElement = function (el) { + _this.element = el; + }; + + _this._timeout = null; + _this.state = { + hovered: false + }; + _this.onRowClick = _this.onRowClick.bind(_this); + _this.onRowDoubleClick = _this.onRowDoubleClick.bind(_this); + _this.onMouseEnter = _this.onMouseEnter.bind(_this); + _this.onMouseLeave = _this.onMouseLeave.bind(_this); + _this.expandHeight = 0; + return _this; + } + + TableRow.prototype.componentDidMount = function componentDidMount() { + var _this2 = this; + + var _props = this.props, + store = _props.store, + hoverKey = _props.hoverKey, + treeType = _props.treeType; + + this.unsubscribe = store.subscribe(function () { + if (store.getState().currentHoverKey === hoverKey) { + _this2.setState({ hovered: true }); + } else if (_this2.state.hovered === true) { + _this2.setState({ hovered: false }); + } + }); + + this.setRowHeight(); + if (treeType) { + this.setRowParentIndex(); + } + }; + + TableRow.prototype.componentDidUpdate = function componentDidUpdate(prevProps) { + if (this.props.treeType) { + this.setRowParentIndex(); + } + this.setRowHeight(); + }; + + TableRow.prototype.componentWillUnmount = function componentWillUnmount() { + var _props2 = this.props, + record = _props2.record, + onDestroy = _props2.onDestroy, + index = _props2.index; + + onDestroy(record, index); + if (this.unsubscribe) { + this.unsubscribe(); + } + }; + + TableRow.prototype.setRowHeight = function setRowHeight() { + var _props3 = this.props, + setRowHeight = _props3.setRowHeight, + _props3$expandedConte = _props3.expandedContentHeight, + expandedContentHeight = _props3$expandedConte === undefined ? 0 : _props3$expandedConte, + fixed = _props3.fixed, + fixedIndex = _props3.fixedIndex; + + if (!setRowHeight || !this.element || fixed) return; + setRowHeight(this.element.clientHeight + expandedContentHeight, fixedIndex); + }; + + TableRow.prototype.setRowParentIndex = function setRowParentIndex() { + var _props4 = this.props, + index = _props4.index, + setRowParentIndex = _props4.setRowParentIndex, + fixedIndex = _props4.fixedIndex, + rootIndex = _props4.rootIndex; + // console.log('rootIndex',rootIndex<0?index:rootIndex,'index',fixedIndex); + + setRowParentIndex(rootIndex < 0 ? index : rootIndex, fixedIndex); + }; + + TableRow.prototype.onRowClick = function onRowClick(event) { + var _props5 = this.props, + record = _props5.record, + index = _props5.index, + onRowClick = _props5.onRowClick, + expandable = _props5.expandable, + expandRowByClick = _props5.expandRowByClick, + expanded = _props5.expanded, + onExpand = _props5.onExpand, + fixedIndex = _props5.fixedIndex; + + if (expandable && expandRowByClick) { + onExpand(!expanded, record, fixedIndex, event); + } + this.set(function (e) { + onRowClick(record, fixedIndex, event); + }); + }; + + TableRow.prototype.onRowDoubleClick = function onRowDoubleClick(event) { + var _props6 = this.props, + record = _props6.record, + index = _props6.index, + onRowDoubleClick = _props6.onRowDoubleClick, + fixedIndex = _props6.fixedIndex; + + this.clear(); + onRowDoubleClick(record, fixedIndex, event); + }; + + TableRow.prototype.onMouseEnter = function onMouseEnter(e) { + var _props7 = this.props, + onHover = _props7.onHover, + hoverKey = _props7.hoverKey, + fixedIndex = _props7.fixedIndex, + syncHover = _props7.syncHover; + + if (syncHover) { + this.setState({ hovered: true }); + } + onHover(true, hoverKey, e, fixedIndex); + }; + + TableRow.prototype.onMouseLeave = function onMouseLeave(e) { + var _props8 = this.props, + onHover = _props8.onHover, + hoverKey = _props8.hoverKey, + fixedIndex = _props8.fixedIndex, + syncHover = _props8.syncHover; + + if (syncHover) { + this.setState({ hovered: false }); + } + onHover(false, hoverKey, e, fixedIndex); + }; + + TableRow.prototype.render = function render() { + var _props9 = this.props, + clsPrefix = _props9.clsPrefix, + columns = _props9.columns, + record = _props9.record, + height = _props9.height, + visible = _props9.visible, + index = _props9.index, + expandIconColumnIndex = _props9.expandIconColumnIndex, + expandIconAsCell = _props9.expandIconAsCell, + expanded = _props9.expanded, + expandRowByClick = _props9.expandRowByClick, + expandable = _props9.expandable, + onExpand = _props9.onExpand, + needIndentSpaced = _props9.needIndentSpaced, + indent = _props9.indent, + indentSize = _props9.indentSize, + isHiddenExpandIcon = _props9.isHiddenExpandIcon, + fixed = _props9.fixed; + + var showSum = false; + var className = this.props.className; + + + if (this.state.hovered) { + className += ' ' + clsPrefix + '-hover'; + } + // console.log('className--'+className,index); + //判断是否为合计行 + if (className.indexOf('sumrow') > -1) { + showSum = true; + } + var cells = []; + + var expandIcon = _react2["default"].createElement(_ExpandIcon2["default"], { + expandable: expandable, + clsPrefix: clsPrefix, + onExpand: onExpand, + needIndentSpaced: needIndentSpaced, + expanded: expanded, + record: record, + isHiddenExpandIcon: isHiddenExpandIcon + }); + + for (var i = 0; i < columns.length; i++) { + if (expandIconAsCell && i === 0 && !showSum) { + cells.push(_react2["default"].createElement( + 'td', + { + className: clsPrefix + '-expand-icon-cell', + key: 'rc-table-expand-icon-cell' + }, + expandIcon + )); + } + var isColumnHaveExpandIcon = expandIconAsCell || expandRowByClick || showSum ? false : i === expandIconColumnIndex; + cells.push(_react2["default"].createElement(_TableCell2["default"], { + clsPrefix: clsPrefix, + record: record, + indentSize: indentSize, + indent: indent, + index: index, + column: columns[i], + key: columns[i].key || columns[i].dataIndex || i, + fixed: fixed, + showSum: showSum, + expandIcon: isColumnHaveExpandIcon ? expandIcon : null + })); + } + var style = { height: height }; + if (!visible) { + style.display = 'none'; + } + return _react2["default"].createElement( + 'tr', + { + onClick: this.onRowClick, + onDoubleClick: this.onRowDoubleClick, + onMouseEnter: this.onMouseEnter, + onMouseLeave: this.onMouseLeave, + className: clsPrefix + ' ' + className + ' ' + clsPrefix + '-level-' + indent, + style: style + // key={hoverKey} + , ref: this.bindElement + }, + cells.length > 0 ? cells : _react2["default"].createElement('td', null) + ); + }; + + return TableRow; +}(_react.Component); + +; + +TableRow.propTypes = propTypes; +TableRow.defaultProps = defaultProps; + +exports["default"] = TableRow; +module.exports = exports['default']; \ No newline at end of file diff --git a/build/createStore.js b/build/createStore.js new file mode 100644 index 0000000..82bd623 --- /dev/null +++ b/build/createStore.js @@ -0,0 +1,40 @@ +"use strict"; + +Object.defineProperty(exports, "__esModule", { + 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; }; + +exports["default"] = createStore; +function createStore(initialState) { + var state = initialState; + var listeners = []; + + function setState(partial) { + state = _extends({}, state, partial); + for (var i = 0; i < listeners.length; i++) { + listeners[i](); + } + } + + function getState() { + return state; + } + + function subscribe(listener) { + listeners.push(listener); + + return function unsubscribe() { + var index = listeners.indexOf(listener); + listeners.splice(index, 1); + }; + } + + return { + setState: setState, + getState: getState, + subscribe: subscribe + }; +} +module.exports = exports["default"]; \ No newline at end of file diff --git a/build/index.js b/build/index.js new file mode 100644 index 0000000..3b67c4f --- /dev/null +++ b/build/index.js @@ -0,0 +1,10 @@ +'use strict'; + +var Table = require('./Table'); +var Column = require('./Column'); +var ColumnGroup = require('./ColumnGroup'); + +Table.Column = Column; +Table.ColumnGroup = ColumnGroup; + +module.exports = Table; \ No newline at end of file diff --git a/build/lib/bigData.js b/build/lib/bigData.js new file mode 100644 index 0000000..1c6e038 --- /dev/null +++ b/build/lib/bigData.js @@ -0,0 +1,512 @@ +"use strict"; + +Object.defineProperty(exports, "__esModule", { + 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; }; + +exports["default"] = bigData; + +var _react = require("react"); + +var _react2 = _interopRequireDefault(_react); + +var _propTypes = require("prop-types"); + +var _propTypes2 = _interopRequireDefault(_propTypes); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; } + +function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; } + +function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + +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); } + +var defaultHeight = 30; +var rowDiff = 3; //行差值 +var treeTypeIndex = 0; +function bigData(Table) { + var _class, _temp, _initialiseProps; + + return _temp = _class = function (_Component) { + _inherits(BigData, _Component); + + function BigData(props) { + _classCallCheck(this, BigData); + + var _this2 = _possibleConstructorReturn(this, _Component.call(this, props)); + + _initialiseProps.call(_this2); + + _this2.state = { + scrollLeft: 0, + scrollTop: 0 + }; + var rowHeight = _this2.props.height ? _this2.props.height : defaultHeight; + //默认显示25条，rowsInView根据定高算的。在非固定高下，这个只是一个大概的值。 + var scrollY = _this2.props.scroll.y ? parseInt(_this2.props.scroll.y) : 0; + _this2.rowsInView = scrollY ? Math.floor(scrollY / rowHeight) : 20; + _this2.currentIndex = 0; + _this2.loadCount = props.loadBuffer ? _this2.rowsInView + props.loadBuffer * 2 : 26; //一次加载多少数据 + _this2.cachedRowHeight = []; //缓存每行的高度 + _this2.cachedRowParentIndex = []; + _this2.expandChildRowKeys = []; + _this2.firstLevelKey = []; + _this2.keys = []; + _this2.lastScrollTop = 0; + _this2.currentScrollTop = 0; + _this2.startIndex = _this2.currentIndex; //数据开始位置 + _this2.endIndex = _this2.currentIndex + _this2.loadCount; //数据结束位置 + _this2.setRowHeight = _this2.setRowHeight.bind(_this2); + _this2.setRowParentIndex = _this2.setRowParentIndex.bind(_this2); + _this2.expandedRowKeys = []; + return _this2; + } + + BigData.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) { + var props = this.props; + var currentIndex = nextProps.currentIndex, + data = nextProps.data; + + var _this = this, + dataLen = data.length; + if (nextProps.scroll.y !== props.scroll.y) { + var rowHeight = nextProps.height ? nextProps.height : defaultHeight; + var scrollY = nextProps.scroll.y ? parseInt(nextProps.scroll.y) : 0; + _this.rowsInView = scrollY ? Math.floor(scrollY / rowHeight) : 20; + _this.loadCount = props.loadBuffer ? _this.rowsInView + props.loadBuffer * 2 : 26; //一次加载多少数据 + _this.currentIndex = 0; + _this.startIndex = _this.currentIndex; //数据开始位置 + _this.endIndex = _this.currentIndex + _this.loadCount; //数据结束位置 + } + if (nextProps.data !== props.data) { + _this.computeCachedRowParentIndex(nextProps.data); + if (nextProps.data.length > 0) { + _this.endIndex = _this.currentIndex - nextProps.loadBuffer + _this.loadCount; //数据结束位置 + } + } + //如果传currentIndex，会判断该条数据是否在可视区域，如果没有的话，则重新计算startIndex和endIndex + if (currentIndex !== -1 && currentIndex !== this.currentIndex) { + _this.setStartAndEndIndex(currentIndex, dataLen); + } + }; + + BigData.prototype.componentDidMount = function componentDidMount() { + var data = this.props.data; + + this.computeCachedRowParentIndex(data); + }; + + /** + *设置data中每个元素的parentIndex + * + */ + + + BigData.prototype.setStartAndEndIndex = function setStartAndEndIndex(currentIndex, dataLen) { + var _this = this; + if (currentIndex > _this.currentIndex + _this.rowsInView) { + _this.currentIndex = currentIndex; + _this.endIndex = _this.currentIndex; //数据开始位置 + _this.startIndex = _this.currentIndex - _this.loadCount; //数据结束位置 + if (_this.endIndex > dataLen) { + _this.endIndex = dataLen; + } + if (_this.startIndex < 0) { + _this.startIndex = 0; + } + //重新设定scrollTop值 + _this.scrollTop = _this.getSumHeight(0, _this.endIndex - _this.rowsInView + 2); + } else if (currentIndex < _this.currentIndex) { + _this.currentIndex = currentIndex; + _this.startIndex = currentIndex; + _this.endIndex = currentIndex + _this.loadCount; + if (_this.endIndex > dataLen) { + _this.endIndex = dataLen; + } + if (_this.startIndex < 0) { + _this.startIndex = 0; + } + //重新设定scrollTop值 + _this.scrollTop = _this.getSumHeight(0, _this.startIndex); + } + }; + + BigData.prototype.getRowKey = function getRowKey(record, index) { + var rowKey = this.props.rowKey; + var key = typeof rowKey === "function" ? rowKey(record, index) : record[rowKey]; + + return key; + }; + /** + *判断是否是树形结构 + * + */ + + + BigData.prototype.checkIsTreeType = function checkIsTreeType() { + var data = this.props.data; + + var rs = false; + var len = data.length > 30 ? 30 : data.length; + //取前三十个看看是否有children属性，有则为树形结构 + for (var i = 0; i < len; i++) { + if (data[i].children) { + rs = true; + break; + } + } + return rs; + }; + + BigData.prototype.getData = function getData(data, parentIndex) { + var _this3 = this; + + data.forEach(function (subItem, subIndex) { + _this3.cachedRowParentIndex[treeTypeIndex] = parentIndex; + _this3.keys[treeTypeIndex] = _this3.getRowKey(subItem, subIndex); + treeTypeIndex++; + if (subItem.children) { + _this3.getData(subItem.children, parentIndex); + } + }); + }; + + BigData.prototype.componentWillUnmount = function componentWillUnmount() { + this.cachedRowHeight = []; + this.cachedRowParentIndex = []; + }; + /** + *获取数据区高度 + * + * + **/ + + + BigData.prototype.getContentHeight = function getContentHeight() { + if (!this.props.data) return 0; + return this.getSumHeight(0, this.props.data.length); + }; + + BigData.prototype.getSumHeight = function getSumHeight(start, end) { + var height = this.props.height; + + var rowHeight = height ? height : defaultHeight; + var sumHeight = 0, + currentKey = void 0, + currentRowHeight = rowHeight; + + for (var i = start; i < end; i++) { + if (this.cachedRowHeight[i] == undefined) { + if (this.treeType) { + currentKey = this.keys[i]; + currentRowHeight = 0; + if (this.firstLevelKey.indexOf(currentKey) >= 0 || this.expandChildRowKeys.indexOf(currentKey) >= 0) { + currentRowHeight = rowHeight; + } + } + sumHeight += currentRowHeight; + } else { + sumHeight += this.cachedRowHeight[i]; + } + } + return sumHeight; + }; + + /** + *@description 根据返回的scrollTop计算当前的索引。此处做了两次缓存一个是根据上一次的currentIndex计算当前currentIndex。另一个是根据当前内容区的数据是否在缓存中如果在则不重新render页面 + *@param 最新一次滚动的scrollTop + *@param treeType是否是树状表 + */ + + + BigData.prototype.setRowHeight = function setRowHeight(height, index) { + this.cachedRowHeight[index] = height; + }; + + BigData.prototype.setRowParentIndex = function setRowParentIndex(parentIndex, index) {} + // this.cachedRowParentIndex[index] = parentIndex; + + /** + * + *根据当前行号获取该行的父节点行号 + * @param {*} currentIndex 当前行号 + */ + ; + + BigData.prototype.getParentIndex = function getParentIndex(targetIndex) { + var data = this.props.data; + + var parentIndex = -1; + parentIndex = this.getIndex(data, -1, targetIndex); + if (parentIndex < 0) { + //小于0说明没有展开的子节点 + parentIndex = targetIndex; + } + return parentIndex; + }; + + BigData.prototype.getIndex = function getIndex(data, index, targetIndex) { + var parentIndex = index; + for (var i = 0; i < data.length; i++) { + index++; + if (targetIndex <= index) { + break; + } + if (data[i].children) { + this.getIndex(data[i].children, index, targetIndex); + } + } + return parentIndex; + }; + + BigData.prototype.render = function render() { + var data = this.props.data; + var scrollTop = this.scrollTop; + var endIndex = this.endIndex, + startIndex = this.startIndex; + + var expandedRowKeys = this.props.expandedRowKeys ? this.props.expandedRowKeys : this.expandedRowKeys; + if (startIndex < 0) { + startIndex = 0; + } + if (endIndex < 0) { + endIndex = 0; + } + if (endIndex > data.length) { + endIndex = data.length; + } + var lazyLoad = { + startIndex: startIndex, + startParentIndex: startIndex //为树状节点做准备 + }; + if (this.treeType) { + var preSubCounts = this.cachedRowParentIndex.findIndex(function (item) { + return item == startIndex; + }); + var sufSubCounts = this.cachedRowParentIndex.findIndex(function (item) { + return item == endIndex; + }); + lazyLoad.preHeight = this.getSumHeight(0, preSubCounts > -1 ? preSubCounts : 0); + lazyLoad.sufHeight = this.getSumHeight(sufSubCounts + 1 > 0 ? sufSubCounts + 1 : this.cachedRowParentIndex.length, this.cachedRowParentIndex.length); + + if (preSubCounts > 0) { + lazyLoad.startIndex = preSubCounts; + } + } else { + lazyLoad.preHeight = this.getSumHeight(0, startIndex); + lazyLoad.sufHeight = this.getSumHeight(endIndex, data.length); + } + // console.log('*******expandedRowKeys*****'+expandedRowKeys); + return _react2["default"].createElement(Table, _extends({}, this.props, { + data: data.slice(startIndex, endIndex), + lazyLoad: lazyLoad, + handleScrollY: this.handleScrollY, + scrollTop: scrollTop, + setRowHeight: this.setRowHeight, + setRowParentIndex: this.setRowParentIndex, + onExpand: this.onExpand, + onExpandedRowsChange: this.onExpandedRowsChange, + expandedRowKeys: expandedRowKeys + // className={'lazy-table'} + })); + }; + + return BigData; + }(_react.Component), _class.defaultProps = { + data: [], + loadBuffer: 5, + rowKey: "key", + onExpand: function onExpand() {}, + + scroll: {}, + currentIndex: -1, + isTree: false + }, _class.propTypes = { + loadBuffer: _propTypes2["default"].number + }, _initialiseProps = function _initialiseProps() { + var _this4 = this; + + this.computeCachedRowParentIndex = function (data) { + var isTree = _this4.props.isTree; + + var isTreeType = isTree ? true : _this4.checkIsTreeType(); + if (isTreeType) { + data.forEach(function (item, index) { + _this4.firstLevelKey[index] = _this4.getRowKey(item, index); + _this4.cachedRowParentIndex[treeTypeIndex] = index; + //保存所有的keys跟小标对应起来 + _this4.keys[treeTypeIndex] = _this4.getRowKey(item, index); + treeTypeIndex++; + if (item.children) { + _this4.getData(item.children, index); + } + }); + } + }; + + this.handleScrollY = function (nextScrollTop, treeType) { + //树表逻辑 + // 关键点是动态的获取startIndex和endIndex + // 法子一：子节点也看成普通tr，最开始需要设置一共有多少行，哪行显示哪行不显示如何确定 + // 动态取start = current+buffer对应的父节点、end = start+loadCount+row的height为0的行数 展开节点的下一个节点作为end值， + var _this = _this4; + var _this$props = _this.props, + data = _this$props.data, + height = _this$props.height, + _this$props$scroll = _this$props.scroll, + scroll = _this$props$scroll === undefined ? {} : _this$props$scroll, + loadBuffer = _this$props.loadBuffer; + + var rowHeight = height ? height : defaultHeight; + var _this$currentIndex = _this.currentIndex, + currentIndex = _this$currentIndex === undefined ? 0 : _this$currentIndex, + loadCount = _this.loadCount, + scrollTop = _this.scrollTop, + currentScrollTop = _this.currentScrollTop; + var endIndex = _this.endIndex, + startIndex = _this.startIndex; + var needRender = _this.state.needRender; + + _this.scrollTop = nextScrollTop; + var viewHeight = parseInt(scroll.y); + _this.treeType = treeType; + var index = 0; + var temp = nextScrollTop; + var currentKey = void 0; + while (temp > 0) { + var currentRowHeight = _this4.cachedRowHeight[index]; + if (currentRowHeight === undefined) { + if (_this4.treeType) { + currentKey = _this4.keys[index]; + currentRowHeight = 0; + if (_this4.firstLevelKey.indexOf(currentKey) >= 0 || _this4.expandChildRowKeys.indexOf(currentKey) >= 0) { + currentRowHeight = rowHeight; + } + } else { + currentRowHeight = rowHeight; + } + } + temp -= currentRowHeight; + if (temp > 0) { + index += 1; + } + } + // console.log('currentIndex****',index); + var isOrder = index - currentIndex > 0 ? true : false; + if (index < 0) index = 0; + //如果之前的索引和下一次的不一样则重置索引和滚动的位置 + if (currentIndex !== index) { + _this.currentIndex = index; + var rowsInView = 0; //可视区域显示多少行 + var rowsHeight = 0; //可视区域内容高度 + var tempIndex = index; + //如果可视区域中需要展示的数据已经在缓存中则不重现render。 + if (viewHeight) { + //有时滚动过快时this.cachedRowHeight[rowsInView + index]为undifined + + while (rowsHeight < viewHeight && tempIndex < _this4.cachedRowHeight.length) { + if (_this4.cachedRowHeight[tempIndex]) { + rowsHeight += _this4.cachedRowHeight[tempIndex]; + if (treeType && _this.cachedRowParentIndex[tempIndex] !== tempIndex || !treeType) { + rowsInView++; + } + } + tempIndex++; + } + if (treeType) { + var treeIndex = index; + index = _this.cachedRowParentIndex[treeIndex]; + if (index === undefined) { + // console.log('index is undefined********'+treeIndex); + index = _this4.getParentIndex(treeIndex); + // console.log("getParentIndex****"+index); + } + } + // console.log('parentIndex*********',index); + // 如果rowsInView 小于 缓存的数据则重新render + // 向下滚动 下临界值超出缓存的endIndex则重新渲染 + if (rowsInView + index > endIndex - rowDiff && isOrder) { + startIndex = index - loadBuffer > 0 ? index - loadBuffer : 0; + endIndex = startIndex + loadCount; + if (endIndex > data.length) { + endIndex = data.length; + } + if (endIndex !== _this4.endIndex) { + _this4.startIndex = startIndex; + _this4.endIndex = endIndex; + _this4.setState({ needRender: !needRender }); + } + } + // 向上滚动，当前的index是否已经加载（currentIndex），若干上临界值小于startIndex则重新渲染 + if (!isOrder && index < startIndex + rowDiff) { + startIndex = index - loadBuffer; + if (startIndex < 0) { + startIndex = 0; + } + if (startIndex !== _this4.startIndex) { + _this4.startIndex = startIndex; + _this4.endIndex = _this4.startIndex + loadCount; + _this4.setState({ needRender: !needRender }); + } + // console.log( + // "**index**" + index, + // "**startIndex**" + this.startIndex, + // "**endIndex**" + this.endIndex + // ); + } + } + } + }; + + this.onExpand = function (expandState, record, index) { + var _this = _this4; + var _this$expandedRowKeys = _this.expandedRowKeys, + expandedRowKeys = _this$expandedRowKeys === undefined ? [] : _this$expandedRowKeys; + var needRender = _this.state.needRender; + + var rowKey = _this.getRowKey(record, index); + // 记录展开子表行的key + // 展开 + if (record.children) { + if (expandState) { + record.children.forEach(function (item, index) { + _this.expandChildRowKeys.push(rowKey); + }); + } else { + // 收起 + record.children.forEach(function (item, index) { + _this.expandChildRowKeys.splice(_this.expandChildRowKeys.findIndex(function (fitem) { + return fitem.key === item.key; + }), 1); + }); + } + } + //滚动加载expandedRowKeys自己维护，否则有展开不全的问题 + if (!_this.props.expandedRowKeys) { + if (expandState) { + expandedRowKeys.push(rowKey); + } else { + var _index = -1; + expandedRowKeys.forEach(function (r, i) { + if (r === rowKey) { + _index = i; + } + }); + if (_index !== -1) { + expandedRowKeys.splice(_index, 1); + _this4.setState({ needRender: !needRender }); + } + } + } + + // expandState为true时，记录下 + _this.props.onExpand(expandState, record); + }; + }, _temp; +} +module.exports = exports["default"]; \ No newline at end of file diff --git a/build/lib/dragColumn.js b/build/lib/dragColumn.js new file mode 100644 index 0000000..74ae9b6 --- /dev/null +++ b/build/lib/dragColumn.js @@ -0,0 +1,172 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + 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; }; + +var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; + +exports["default"] = dragColumn; + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _util = require('./util'); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; } + +function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; } + +function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; } + +function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + +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); } + +var cloneDeep = require('lodash.clonedeep'); +/** + * 参数: 列拖拽 + * @param {*} Table + */ + +function dragColumn(Table) { + + return function (_Component) { + _inherits(DragColumn, _Component); + + function DragColumn(props) { + _classCallCheck(this, DragColumn); + + 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; + }); + + 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/filterColumn.js b/build/lib/filterColumn.js new file mode 100644 index 0000000..ba08caf --- /dev/null +++ b/build/lib/filterColumn.js @@ -0,0 +1,274 @@ +"use strict"; + +Object.defineProperty(exports, "__esModule", { + 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; }; + +exports["default"] = filterColumn; + +var _react = require("react"); + +var _react2 = _interopRequireDefault(_react); + +var _beeCheckbox = require("bee-checkbox"); + +var _beeCheckbox2 = _interopRequireDefault(_beeCheckbox); + +var _beeIcon = require("bee-icon"); + +var _beeIcon2 = _interopRequireDefault(_beeIcon); + +var _util = require("./util"); + +var _i18n = require("./i18n"); + +var _i18n2 = _interopRequireDefault(_i18n); + +var _tool = require("bee-locale/build/tool"); + +var _propTypes = require("prop-types"); + +var _propTypes2 = _interopRequireDefault(_propTypes); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; } + +function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; } + +function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + +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 noop() {} +/** + * 参数: 过滤表头 + * @param {*} Table + * @param {*} Popover + * @param {*} Icon + */ + +function filterColumn(Table, Popover) { + var _class, _temp, _initialiseProps; + + return _temp = _class = function (_Component) { + _inherits(FilterColumn, _Component); + + function FilterColumn(props) { + _classCallCheck(this, FilterColumn); + + var _this = _possibleConstructorReturn(this, _Component.call(this, props)); + + _initialiseProps.call(_this); + + var columns = props.columns; + + _this.state = { + columns: _this.setColumOrderByIndex((0, _util.ObjectAssign)(columns)), + showModal: false, + screenY: 0 + }; + return _this; + } + + FilterColumn.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) { + if (nextProps.columns != this.props.columns) { + this.setState({ + columns: this.setColumOrderByIndex((0, _util.ObjectAssign)(nextProps.columns)) + }); + } + this.setState({ + showModal: nextProps.showFilterPopover ? true : false + }); + }; + + FilterColumn.prototype.render = function render() { + var _props = this.props, + data = _props.data, + prefixCls = _props.prefixCls, + scrollPro = _props.scroll; + var _state = this.state, + columns = _state.columns, + showModal = _state.showModal; + + + var locale = (0, _tool.getComponentLocale)(this.props, this.context, 'Table', function () { + return _i18n2["default"]; + }); + + var _columns = [], + widthState = 0, + scroll = scrollPro; + columns.forEach(function (da) { + if (da.ifshow) { + _columns.push(da); + if (da.width) { + widthState++; + } + } + }); + // if(_columns.length == widthState){ + // scroll.x = this.getCloumnsScroll(columns); + // } + + var content = _react2["default"].createElement( + "div", + { className: prefixCls + "-pop-cont" }, + _react2["default"].createElement( + "span", + { className: prefixCls + "-clear-setting", onClick: this.clear }, + locale["resetSettings"] + ), + _react2["default"].createElement( + "div", + null, + this.getCloumItem() + ) + ); + + return _react2["default"].createElement( + "div", + { className: prefixCls + "-cont" }, + _react2["default"].createElement(Table, _extends({}, this.props, { + columns: _columns, + data: data + // scroll={scroll} + // scroll={{x:this.getCloumnsScroll(columns)}} + })), + this.props.columnFilterAble == false ? "" : _react2["default"].createElement( + "div", + { className: prefixCls + "-filter-icon" }, + _react2["default"].createElement( + Popover, + { + id: "filter_column_popover", + placement: "left", + content: content, + show: showModal + }, + _react2["default"].createElement( + "div", + { className: prefixCls + "-pop-column-filter-cont" }, + _react2["default"].createElement(_beeIcon2["default"], { type: "uf-grid", onClick: this.openCloumList }) + ) + ) + ) + ); + }; + + return FilterColumn; + }(_react.Component), _class.defaultProps = { + prefixCls: "u-table-filter-column", + afterFilter: noop, + columnFilterAble: true, + scroll: {} + }, _class.contextTypes = { + beeLocale: _propTypes2["default"].object + }, _initialiseProps = function _initialiseProps() { + var _this2 = this; + + this.setColumOrderByIndex = function (_column) { + _column.forEach(function (da) { + //默认所有的列都显示，如果传递ifshow属性，根据ifshow属性值来判断是否显示某列 + if (da.hasOwnProperty("ifshow")) { + da.checked = da.ifshow ? true : false; + da.ifshow = da.checked; + } else { + da.checked = true; + da.ifshow = true; + } + }); + return _column; + }; + + this.checkedColumItemClick = function (da) { + var _props2 = _this2.props, + checkMinSize = _props2.checkMinSize, + afterFilter = _props2.afterFilter; + // if(checkMinSize) + + var sum = 0, + leng = 0; + _this2.state.columns.forEach(function (da) { + da.fixed ? "" : leng++; + !da.fixed && da.checked ? sum++ : ""; + }); + if (sum < checkMinSize && da.checked) { + return; + } else { + if (sum <= 1 && da.checked) return; + } + da.checked = da.checked ? false : true; + da.ifshow = da.checked ? true : false; + + _this2.setState(_extends({}, _this2.state)); + afterFilter(da, _this2.state.columns); + }; + + this.openCloumList = function () { + _this2.setState({ + showModal: true + }); + }; + + this.getCloumItem = function () { + var prefixCls = _this2.props.prefixCls; + var columns = _this2.state.columns; + + return columns.map(function (da, i) { + var paramObj = { + id: da.key, + checked: da.checked + }; + if (da.fixed) { + paramObj.disabled = true; + } else { + paramObj.onClick = function () { + _this2.checkedColumItemClick(da); + }; + } + + return _react2["default"].createElement( + "div", + { + key: da.key + "_" + i, + className: prefixCls + "-pop-cont-item" + }, + _react2["default"].createElement(_beeCheckbox2["default"], paramObj), + _react2["default"].createElement( + "span", + null, + da.title + ) + ); + }); + }; + + this.clear = function () { + var columns = _this2.state.columns; + + columns.forEach(function (da) { + da.checked = true; + da.ifshow = true; + }); + _this2.setState({ + columns: columns + }); + _this2.props.afterFilter(_this2.state.columns, _this2.state.columns); + }; + + this.getCloumnsScroll = function (columns) { + var sum = 0; + columns.forEach(function (da) { + if (da.checked) { + sum += da.width; + } + }); + // console.log("sum",sum); + return sum; + }; + }, _temp; +} +module.exports = exports["default"]; \ No newline at end of file diff --git a/build/lib/i18n.js b/build/lib/i18n.js new file mode 100644 index 0000000..092b375 --- /dev/null +++ b/build/lib/i18n.js @@ -0,0 +1,48 @@ +'use strict'; + +module.exports = { + 'lang': 'zh-cn', + 'resetSettings': '还原设置', + 'include': '包含', + 'exclusive': '不包含', + 'equal': '等于', + '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', + 'exclusive': 'exclusive', + 'equal': 'equal', + 'unequal': 'unequal', + 'begin': 'begin', + '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': '還原設置', + 'include': '包含', + 'exclusive': '不包含', + 'equal': '等於', + 'unequal': '不等於', + 'begin': '以開始', + '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/build/lib/multiSelect.js b/build/lib/multiSelect.js new file mode 100644 index 0000000..78de72e --- /dev/null +++ b/build/lib/multiSelect.js @@ -0,0 +1,247 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + 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; }; + +exports["default"] = multiSelect; + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _beeCheckbox = require('bee-checkbox'); + +var _beeCheckbox2 = _interopRequireDefault(_beeCheckbox); + +var _util = require('./util'); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; } + +function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; } + +function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + +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); } + +/** + * 参数: 过滤表头 + * @param {*} Table + * @param {*} Checkbox + * @param {*} Popover + * @param {*} Icon + */ + +function multiSelect(Table, Checkbox) { + var _class, _temp, _initialiseProps; + + return _temp = _class = function (_Component) { + _inherits(NewMultiSelect, _Component); + + function NewMultiSelect(props) { + _classCallCheck(this, NewMultiSelect); + + var _this = _possibleConstructorReturn(this, _Component.call(this, props)); + + _initialiseProps.call(_this); + + var obj = _this.getCheckedOrIndeter(props.data); + _this.state = _extends({}, obj, { + data: (0, _util.ObjectAssign)(props.data) + }); + return _this; + } + + NewMultiSelect.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) { + if (this.props.data != nextProps.data) { + var obj = this.getCheckedOrIndeter(nextProps.data); + this.setState(_extends({}, obj, { + data: (0, _util.ObjectAssign)(nextProps.data) + })); + } + }; + + /** + * @param {*} data + */ + + + NewMultiSelect.prototype.getCheckedOrIndeter = function getCheckedOrIndeter(data) { + var obj = {}; + var checkStatus = this.setChecked(data); + if (!checkStatus) { + obj.checkedAll = false; + obj.indeterminate = false; + return obj; + } + if (checkStatus == 'indeter') { + obj.indeterminate = true; + obj.checkedAll = false; + } else if (checkStatus == 'all') { + obj.checkedAll = true; + obj.indeterminate = false; + } + return obj; + }; + + /** + * 判断数据是否全部选中 + * @param {*} data + * reutnr string all(全选)、indeter(半选) + */ + + + NewMultiSelect.prototype.setChecked = function setChecked(data) { + if (!this.isArray(data)) return false; + if (data.length == 0) return false; + var count = 0; + var disabledCount = 0; + data.forEach(function (da) { + if (da._checked) { + count++; + } + if (da._disabled) { + disabledCount++; + } + }); + + if (data.length == count + disabledCount) { + return "all"; + } + return count == 0 ? false : "indeter"; + }; + + /** + * 判断是否是数组 + * @param {*} o + */ + + + NewMultiSelect.prototype.isArray = function isArray(o) { + return Object.prototype.toString.call(o) == '[object Array]'; + }; + + NewMultiSelect.prototype.render = function render() { + var columns = this.props.columns; + var data = this.state.data; + + return _react2["default"].createElement(Table, _extends({}, this.props, { columns: this.getDefaultColumns(columns), data: data })); + }; + + return NewMultiSelect; + }(_react.Component), _class.defaultProps = { + prefixCls: "u-table-mult-select" + }, _initialiseProps = function _initialiseProps() { + var _this2 = this; + + this.onAllCheckChange = function () { + var _state = _this2.state, + data = _state.data, + checkedAll = _state.checkedAll, + indeterminate = _state.indeterminate; + + var check = false; + if (checkedAll) { + check = false; + } else { + // if(indeterminate){ + // check = true; + // }else{ + // check = true; + // } + check = true; + } + var selectList = []; + + data.forEach(function (item) { + if (!item._disabled) { + item._checked = check; + } + + if (item._checked) { + selectList.push(item); + } + }); + if (selectList.length > 0) { + indeterminate = true; + } else { + indeterminate = false; + } + _this2.setState({ + indeterminate: indeterminate, + checkedAll: check + }); + _this2.props.getSelectedDataFunc(selectList); + }; + + this.handleClick = function () {}; + + this.onCheckboxChange = function (text, record, index) { + return function () { + var data = _this2.state.data; + + var selectList = []; + record._checked = record._checked ? false : true; + var obj = _this2.getCheckedOrIndeter(data); + _this2.setState(_extends({ + data: data + }, obj)); + data.forEach(function (da) { + if (da._checked) { + selectList.push(da); + } + }); + _this2.props.getSelectedDataFunc(selectList, record, index); + }; + }; + + this.getDefaultColumns = function (columns) { + var _state2 = _this2.state, + checkedAll = _state2.checkedAll, + indeterminate = _state2.indeterminate; + + var checkAttr = { checked: checkedAll ? true : false }; + var data = _this2.props.data; + var dataLength = data.length; + var disabledCount = 0; + indeterminate ? checkAttr.indeterminate = true : ""; + //设置表头Checkbox是否可以点击 + data.forEach(function (item, index, arr) { + if (item._disabled) { + disabledCount++; + } + }); + + var _defaultColumns = [{ + title: _react2["default"].createElement(Checkbox, _extends({ + className: 'table-checkbox' + }, checkAttr, { + disabled: disabledCount == dataLength ? true : false, + onChange: _this2.onAllCheckChange + })), + key: "checkbox", + dataIndex: "checkbox", + fixed: "left", + width: 50, + render: function render(text, record, index) { + var attr = {}; + record._disabled ? attr.disabled = record._disabled : ""; + return _react2["default"].createElement(Checkbox, _extends({ + key: index, + className: 'table-checkbox' + }, attr, { + checked: record._checked, + onClick: _this2.handleClick, + onChange: _this2.onCheckboxChange(text, record, index) + })); + } + }]; + return _defaultColumns.concat(columns); + }; + }, _temp; +} +module.exports = exports['default']; \ No newline at end of file diff --git a/build/lib/newMultiSelect.js b/build/lib/newMultiSelect.js new file mode 100644 index 0000000..c794ec0 --- /dev/null +++ b/build/lib/newMultiSelect.js @@ -0,0 +1,195 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + 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; }; + +exports["default"] = newMultiSelect; + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _beeCheckbox = require('bee-checkbox'); + +var _beeCheckbox2 = _interopRequireDefault(_beeCheckbox); + +var _util = require('./util'); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; } + +function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; } + +function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + +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); } + +/** + * 参数: 过滤表头 + * @param {*} Table + * @param {*} Checkbox + * @param {*} Popover + * @param {*} Icon + */ + +function newMultiSelect(Table, Checkbox) { + var _class, _temp, _initialiseProps; + + return _temp = _class = function (_Component) { + _inherits(NewMultiSelect, _Component); + + function NewMultiSelect(props) { + _classCallCheck(this, NewMultiSelect); + + var _this = _possibleConstructorReturn(this, _Component.call(this, props)); + + _initialiseProps.call(_this); + + var checkedAll = _this.setChecked(props.data); + _this.state = { + checkedAll: checkedAll, + data: (0, _util.ObjectAssign)(props.data) + }; + return _this; + } + + NewMultiSelect.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) { + if (this.props.data != nextProps.data) { + this.setState({ + data: (0, _util.ObjectAssign)(nextProps.data), + checkedAll: this.setChecked(nextProps.data) + }); + } + }; + + NewMultiSelect.prototype.setChecked = function setChecked(data) { + var allCheck = true; + if (data) { + var _iteratorNormalCompletion = true; + var _didIteratorError = false; + var _iteratorError = undefined; + + try { + for (var _iterator = data[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) { + var da = _step.value; + + if (!da._checked) { + allCheck = false; + break; + } + } + } catch (err) { + _didIteratorError = true; + _iteratorError = err; + } finally { + try { + if (!_iteratorNormalCompletion && _iterator["return"]) { + _iterator["return"](); + } + } finally { + if (_didIteratorError) { + throw _iteratorError; + } + } + } + } + return allCheck; + }; + + NewMultiSelect.prototype.render = function render() { + var columns = this.props.columns; + var data = this.state.data; + + return _react2["default"].createElement(Table, _extends({}, this.props, { columns: this.getDefaultColumns(columns), data: data })); + }; + + return NewMultiSelect; + }(_react.Component), _class.defaultProps = { + prefixCls: "u-table-mult-select" + }, _initialiseProps = function _initialiseProps() { + var _this2 = this; + + this.onAllCheckChange = function () { + var _state = _this2.state, + data = _state.data, + checkedAll = _state.checkedAll; + + var selectList = []; + var check = checkedAll ? false : true; + data.forEach(function (item) { + item._checked = check; + if (item._checked) { + selectList.push(item); + } + }); + _this2.setState({ + checkedAll: check + }); + _this2.props.getSelectedDataFunc(selectList); + }; + + this.handleClick = function () {}; + + this.onCheckboxChange = function (text, record, index) { + return function () { + var data = _this2.state.data; + + var selectList = []; + record._checked = record._checked ? false : true; + var checkedAll = true; + for (var i = 0; i < data.length; i++) { + var item = data[i]; + if (!item._checked || item._checked == false) { + checkedAll = false; + break; + } + } + _this2.setState(_extends({}, _this2.state, { + checkedAll: checkedAll + })); + data.forEach(function (da) { + if (da._checked) { + selectList.push(da); + } + }); + _this2.props.getSelectedDataFunc(selectList, record, index); + }; + }; + + this.getDefaultColumns = function (columns) { + // let checkedAll = init?false:this.state.checkedAll; + var checkedAll = _this2.state.checkedAll; + + var _defaultColumns = [{ + title: _react2["default"].createElement(Checkbox, { + className: 'table-checkbox', + checked: checkedAll + // indeterminate={indeterminate_bool && !this.state.checkedAll} + , onChange: _this2.onAllCheckChange + }), + key: "checkbox", + dataIndex: "checkbox", + fixed: "left", + width: 50, + render: function render(text, record, index) { + var attr = {}; + record._disabled ? attr.disabled = record._disabled : ""; + return _react2["default"].createElement(Checkbox, _extends({ + key: index, + className: 'table-checkbox' + }, attr, { + checked: record._checked, + onClick: _this2.handleClick, + onChange: _this2.onCheckboxChange(text, record, index) + })); + } + }]; + return _defaultColumns.concat(columns); + }; + }, _temp; +} +module.exports = exports['default']; \ No newline at end of file diff --git a/build/lib/sort.js b/build/lib/sort.js new file mode 100644 index 0000000..d4d1154 --- /dev/null +++ b/build/lib/sort.js @@ -0,0 +1,367 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + 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; }; + +exports["default"] = sort; + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; } + +function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; } + +function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + +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); } + +/** + * 参数：prefixCls，默认bee-table,用于设置图标的样式 + * @param {*} Table + * @param {*} Icon + */ +function sort(Table, Icon) { + var _class, _temp, _initialiseProps; + + var IconType = [{ + 'type': 'flat', + 'icon': 'uf-symlist', + 'order': 'flatscend' + }, { + 'type': 'up', + 'icon': 'uf-sortup', + 'order': 'ascend' + }, { + 'type': 'down', + 'icon': 'uf-sortdown', + 'order': 'descend' + }]; + + return _temp = _class = function (_Component) { + _inherits(SortTable, _Component); + + function SortTable(props) { + _classCallCheck(this, SortTable); + + var _this2 = _possibleConstructorReturn(this, _Component.call(this, props)); + + _initialiseProps.call(_this2); + + var flatColumns = []; + _this2._toFlatColumn(props.columns, -1, flatColumns); + _this2.state = { data: _this2.props.data, columns: props.columns, flatColumns: flatColumns }; + + return _this2; + } + + //默认是前端排序，值为true为后端排序 + SortTable.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) { + + if (nextProps.data !== this.props.data) { + this.setState({ + data: nextProps.data, + oldData: nextProps.data.concat() + }); + } + if (nextProps.columns !== this.props.columns) { + var flatColumns = []; + this._toFlatColumn(nextProps.columns, -1, flatColumns); + this.setState({ columns: nextProps.columns, flatColumns: flatColumns }); + } + }; + /** + *column扁平化处理，适应多表头避免递归操作 + * + */ + + + SortTable.prototype._toFlatColumn = function _toFlatColumn(columns) { + var parentIndex = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : -1; + var flatColumns = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : []; + + var _this = this; + var children = []; + // const flatColumns = _this.state; + columns.forEach(function (item, index) { + item.parentIndex = parentIndex; + children = item.children; + flatColumns.push(item); + if (children) { + item.children = []; + _this._toFlatColumn(children, flatColumns.length - 1, flatColumns); + } + }); + }; + + /** + * column 当前的排序的列 + * 当有的列不排序时，将该列的orderNum置为‘’，并动态的修改其他列的orderNum。 + */ + + /** + * 获取排序字段 + */ + + + /** + * pre：前一条数据 + * after:后一条数据 + * orderType:升序、降序 + */ + + /** + * 多列排序 先排order为1的，其他的基于已排序的数据排 + */ + + //每个column上添加orderNum属性，不排序时为“”。 + //点击时orderNum有值则不重新赋值，如果没有值，则取当前column下的有oderNum的length值。并排序 + //点击置为“”时，动态的设置相关column的orderNum值。并排序 + + + SortTable.prototype._flatToColumn = function _flatToColumn(flatColumns) { + var colLen = flatColumns.length; + var parentIndex = void 0, + rsColumns = []; + //每次渲染需要将父类的children置空，避免重复 + flatColumns.forEach(function (item) { + if (item.children) { + item.children = []; + } + }); + for (var i = colLen - 1; i >= 0; i--) { + parentIndex = flatColumns[i].parentIndex; + if (parentIndex >= 0) { + flatColumns[parentIndex].children.unshift(flatColumns[i]); + } + } + rsColumns = flatColumns.filter(function (item) { + return item.parentIndex == -1; + }); + return rsColumns; + }; + + SortTable.prototype.render = function render() { + var columns = this.renderColumnsDropdown(this.state.flatColumns.concat()); + return _react2["default"].createElement(Table, _extends({}, this.props, { columns: columns, data: this.state.data })); + }; + + return SortTable; + }(_react.Component), _class.defaultProps = { sort: { mode: "single", backSource: false } }, _initialiseProps = function _initialiseProps() { + var _this3 = this; + + this.getOrderNum = function () { + var orderNum = 0; + //todo 1 + _this3.state.flatColumns.forEach(function (item, index) { + if (item.order == "ascend" || item.order == "descend") { + orderNum++; + } + }); + return orderNum ? orderNum : 1; + }; + + this.changeOrderNum = function (column) { + var flatColumns = _this3.state.flatColumns; + //todo 2 + + flatColumns.forEach(function (col) { + if (col.orderNum > column.orderNum) { + col.orderNum--; + } + if (column.key == col.key) { + col.orderNum = ""; + } + }); + _this3.setState({ flatColumns: flatColumns }); + }; + + this.getOrderCols = function (columns) { + var orderCols = []; + //todo 3 + columns.forEach(function (item) { + if (item.order == "ascend" || item.order == "descend") { + orderCols.push({ + order: item.order, + field: item.dataIndex, + orderNum: item.orderNum + }); + } + }); + return orderCols; + }; + + this._sortBy = function (pre, after, orderCols, orderColslen, currentIndex) { + var preKey = pre[orderCols[currentIndex].key]; + var afterKey = after[orderCols[currentIndex].key]; + if (preKey == afterKey && currentIndex + 1 <= orderColslen) { + return _this3._sortBy(pre, after, orderCols, orderColslen, currentIndex + 1); + } + if (orderCols[currentIndex].order == "ascend") { + return preKey - afterKey; + } else { + return afterKey - preKey; + } + }; + + this.multiSort = function (columns) { + var _state = _this3.state, + data = _state.data, + oldData = _state.oldData; + + var self = _this3; + var orderCols = {}, + orderColslen = 0; + //todo 4 + columns.forEach(function (item) { + if (item.orderNum) { + orderColslen++; + orderCols[item.orderNum] = item; + } + }); + if (orderColslen > 0) { + data = data.sort(function (a, b) { + return self._sortBy(a, b, orderCols, orderColslen, 1); + }); + } else { + data = oldData.concat(); + } + return data; + }; + + this.toggleSortOrder = function (order, column) { + var _state2 = _this3.state, + data = _state2.data, + oldData = _state2.oldData, + flatColumns = _state2.flatColumns; + var sort = _this3.props.sort; + + var seleObj = void 0; + if (!oldData) { + oldData = data.concat(); + } + var sortCol = void 0; + //单列排序，清空其他列的排序 + if (sort.mode == "single") { + //todo 5 + flatColumns.forEach(function (da) { + if (da.key == column.key) { + seleObj = da; + } else { + if (da.order) { + da.order = "flatscend"; + } + } + }); + seleObj.order = order; + sortCol = [{ order: order, field: seleObj.dataIndex }]; + //通过后端请求 + if (sort.backSource && typeof sort.sortFun === "function") { + //获取排序的字段和方式 + sort.sortFun(sortCol); + } else { + if (order === "ascend") { + data = data.sort(function (a, b) { + return column.sorter(a, b); + }); + } else if (order === "descend") { + data = data.sort(function (a, b) { + return column.sorter(b, a); + }); + } else { + data = oldData.concat(); + } + typeof sort.sortFun === "function" && sort.sortFun(sortCol, data); + } + } else { + seleObj = flatColumns.find(function (da) { + return da.key == column.key; + }); + seleObj.order = order; + if (order === "flatscend") { + _this3.changeOrderNum(column); + } + if (!seleObj.orderNum && (order == "ascend" || order == "descend")) { + seleObj.orderNum = _this3.getOrderNum(); + } + sortCol = _this3.getOrderCols(flatColumns); + if (sort.backSource && typeof sort.sortFun === "function") { + sort.sortFun(sortCol); + } else { + data = _this3.multiSort(flatColumns); + typeof sort.sortFun === "function" && sort.sortFun(sortCol, data); + } + } + _this3.setState({ data: data, oldData: oldData, flatColumns: flatColumns }); + }; + + this.renderColumnsDropdown = function (columns) { + var tempColumns = [], + rsColumns = []; + tempColumns = columns.map(function (originColumn) { + var column = _extends({}, originColumn); + return _this3.sortColumn(column); + }); + rsColumns = _this3._flatToColumn(tempColumns); + return rsColumns; + }; + + this.sortColumn = function (column) { + var mode = _this3.props.sort.mode; + + var prefixCls = "bee-table"; + var iconTypeIndex = 0; + var sorterClass = "flat"; + + if (column.order === "ascend") { + iconTypeIndex = 1; + sorterClass = "up"; + } else if (column.order === "descend") { + iconTypeIndex = 2; + sorterClass = "down"; + } + + var sortButton = void 0; + if (column.sorter) { + //大于0说明不是升序就是降序，判断orderNum有没有值，没有值赋值 + if (iconTypeIndex > 0 && !column.orderNum && mode == "multiple") { + column.orderNum = _this3.getOrderNum(); + } + sortButton = _react2["default"].createElement( + 'div', + { className: prefixCls + '-column-sorter' }, + _react2["default"].createElement( + 'span', + { className: prefixCls + '-column-sorter-' + sorterClass, onClick: function onClick() { + _this3.toggleSortOrder(IconType[iconTypeIndex == 2 ? 0 : iconTypeIndex + 1].order, column); + + if (column.sorterClick) { + column.sorterClick(column, IconType[iconTypeIndex].type); + } + } }, + _react2["default"].createElement('i', { className: 'uf ' + IconType[iconTypeIndex].icon }), + _react2["default"].createElement( + 'span', + null, + column.orderNum + ) + ) + ); + } + column.title = _react2["default"].createElement( + 'span', + null, + column.title, + sortButton + ); + return column; + }; + }, _temp; +} +module.exports = exports['default']; \ No newline at end of file diff --git a/build/lib/sum.js b/build/lib/sum.js new file mode 100644 index 0000000..5987695 --- /dev/null +++ b/build/lib/sum.js @@ -0,0 +1,126 @@ +"use strict"; + +Object.defineProperty(exports, "__esModule", { + 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; }; + +exports["default"] = sum; + +var _react = require("react"); + +var _react2 = _interopRequireDefault(_react); + +var _utils = require("../utils"); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; } + +function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; } + +function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + +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 sum(Table) { + return function (_React$Component) { + _inherits(SumTable, _React$Component); + + //无状态 + function SumTable(props) { + _classCallCheck(this, SumTable); + + //array , tree + var _this = _possibleConstructorReturn(this, _React$Component.call(this, props)); + + _this.getNodeItem = function (array, newArray) { + array.forEach(function (da, i) { + if (da.children) { + _this.getNodeItem(da.children, newArray); + } else { + newArray.push(da); + } + }); + }; + + _this.getTableType = function () { + var columns = _this.props.columns; + + var type = "array"; + columns.find(function (da, i) { + if (da.children) { + type = "tree"; + return type; + } + }); + return type; + }; + + _this.addSumData = function () { + var _this$props = _this.props, + _this$props$data = _this$props.data, + data = _this$props$data === undefined ? [] : _this$props$data, + _this$props$columns = _this$props.columns, + columns = _this$props$columns === undefined ? [] : _this$props$columns; + + var sumdata = {}, + newColumns = [], + newData = []; + if (!Array.isArray(columns)) { + console.log("columns type is error !");return; + } + var type = _this.getTableType(); + if (type == 'tree') { + _this.getNodeItem(columns, newColumns); + } else { + newColumns = columns; + } + //返回一个新的数据 + newData = data.slice(); + newColumns.forEach(function (column, index) { + sumdata[column.dataIndex] = ""; + if (column.sumCol) { + var count = 0; + data.forEach(function (da, i) { + + var _num = parseFloat(da[column.key]); + //排查字段值为NAN情况 + if (_num == _num) { + count += _num; + } + }); + sumdata[column.dataIndex] = (0, _utils.DicimalFormater)(count, 2); + } + if (index == 0) { + sumdata[column.dataIndex] = "合计 " + sumdata[column.dataIndex]; + } + }); + + newData.push(sumdata); + return newData; + }; + + _this.tableType = "array"; + return _this; + } + + /** + * 获取当前的表格类型。 + * + */ + + + SumTable.prototype.render = function render() { + return _react2["default"].createElement(Table, _extends({}, this.props, { + columns: this.props.columns, + showSum: true, + data: this.addSumData() + })); + }; + + return SumTable; + }(_react2["default"].Component); +} +module.exports = exports["default"]; \ No newline at end of file diff --git a/build/lib/util.js b/build/lib/util.js new file mode 100644 index 0000000..237dba1 --- /dev/null +++ b/build/lib/util.js @@ -0,0 +1,79 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + 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; }; + +exports.sortBy = sortBy; +exports.compare = compare; +exports.ObjectAssign = ObjectAssign; +/* +* 快速排序，按某个属性，或按“获取排序依据的函数”，来排序. +* @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; + } + } else if (typeof prop == 'function') { + for (; i < len; i++) { + var _oI = arr[i]; + (props[i] = new String(_oI && prop(_oI) || ''))._obj = _oI; + } + } else { + throw '参数类型错误'; + } + props.sort(); + for (i = 0; i < len; i++) { + ret[i] = props[i]._obj; + } + if (desc) ret.reverse(); + return ret; +}; + +/** + * 数组对象排序 + * 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; + }; +} + +/** + * 简单数组数据对象拷贝 + * @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; +} \ No newline at end of file diff --git a/build/render/CheckboxRender.js b/build/render/CheckboxRender.js new file mode 100644 index 0000000..8473356 --- /dev/null +++ b/build/render/CheckboxRender.js @@ -0,0 +1,101 @@ +"use strict"; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports["default"] = renderCheckbox; + +var _react = require("react"); + +var _react2 = _interopRequireDefault(_react); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; } + +function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; } + +function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + +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); } + +/** + * 渲染checkbox + * @param Checkbox + * @param Icon + * @returns {CheckboxRender} + */ +function renderCheckbox(Checkbox, Icon) { + return function (_Component) { + _inherits(CheckboxRender, _Component); + + function CheckboxRender() { + var _temp, _this, _ret; + + _classCallCheck(this, CheckboxRender); + + for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { + args[_key] = arguments[_key]; + } + + return _ret = (_temp = (_this = _possibleConstructorReturn(this, _Component.call.apply(_Component, [this].concat(args))), _this), _this.state = { + value: _this.props.value, + editable: false + }, _this.handleChange = function (e) { + var value = e.target.value; + _this.setState({ value: value }); + }, _this.check = function () { + _this.setState({ editable: false }); + if (_this.props.onChange) { + _this.props.onChange(_this.state.value); + } + }, _this.edit = function () { + _this.setState({ editable: true }); + }, _this.handleKeydown = function (event) { + if (event.keyCode == 13) { + _this.check(); + } + }, _temp), _possibleConstructorReturn(_this, _ret); + } + + CheckboxRender.prototype.render = function render() { + var _state = this.state, + value = _state.value, + editable = _state.editable; + + var cellContent = ""; + if (editable) { + cellContent = _react2["default"].createElement( + "div", + { className: "editable-cell-input-wrapper" }, + _react2["default"].createElement(Checkbox, { + onChange: this.handleChange, + onKeyDown: this.handleKeydown, + onBlur: this.check, + autoFocus: true, + value: value + }) + ); + } else { + cellContent = _react2["default"].createElement( + "div", + { className: "editable-cell-text-wrapper" }, + value || " ", + _react2["default"].createElement(Icon, { + type: "uf-pencil", + className: "editable-cell-icon", + onClick: this.edit + }) + ); + } + return _react2["default"].createElement( + "div", + { className: "editable-cell" }, + cellContent + ); + }; + + return CheckboxRender; + }(_react.Component); +} +module.exports = exports["default"]; \ No newline at end of file diff --git a/build/render/DateRender.js b/build/render/DateRender.js new file mode 100644 index 0000000..752ef11 --- /dev/null +++ b/build/render/DateRender.js @@ -0,0 +1,154 @@ +"use strict"; + +Object.defineProperty(exports, "__esModule", { + 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; }; + +exports["default"] = renderDate; + +var _react = require("react"); + +var _react2 = _interopRequireDefault(_react); + +var _moment = require("moment"); + +var _moment2 = _interopRequireDefault(_moment); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; } + +function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; } + +function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + +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 renderDate(DatePicker, Icon) { + var _class, _temp2; + + var MonthPicker = DatePicker.MonthPicker, + RangePicker = DatePicker.RangePicker, + WeekPicker = DatePicker.WeekPicker; + + return _temp2 = _class = function (_Component) { + _inherits(DateRender, _Component); + + function DateRender() { + var _temp, _this, _ret; + + _classCallCheck(this, DateRender); + + for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { + args[_key] = arguments[_key]; + } + + return _ret = (_temp = (_this = _possibleConstructorReturn(this, _Component.call.apply(_Component, [this].concat(args))), _this), _this.state = { + value: _this.props.value, + editable: false + }, _this.handleChange = function (e) { + var _ref = _this.props || "YYYY-MM-DD", + format = _ref.format; + + var value = e ? e.format(format) : ""; + _this.setState({ value: value, editable: false }); + if (_this.props.onChange) { + _this.props.onChange(value); + } + }, _this.check = function () { + _this.setState({ editable: false }); + if (_this.props.onChange) { + _this.props.onChange(_this.state.value); + } + }, _this.edit = function () { + _this.setState({ editable: true }); + }, _this.handleKeydown = function (event) { + if (event.keyCode == 13) { + _this.check(); + } + }, _temp), _possibleConstructorReturn(_this, _ret); + } + + DateRender.prototype.render = function render() { + var _state = this.state, + value = _state.value, + editable = _state.editable; + var _props = this.props, + isclickTrigger = _props.isclickTrigger, + type = _props.type; + + var cellContent = ""; + var TComponent = void 0; + switch (type.toLowerCase()) { + case "monthpicker": + TComponent = MonthPicker; + break; + // case "rangepicker": + // TComponent = RangePicker; + // break; + case "weekpicker": + TComponent = WeekPicker; + break; + default: + TComponent = DatePicker; + break; + } + + var date_value = value ? (0, _moment2["default"])(value) : value; + if (editable) { + cellContent = isclickTrigger ? _react2["default"].createElement( + "div", + { className: "editable-cell-input-wrapper" }, + _react2["default"].createElement(TComponent, _extends({}, this.props, { + value: date_value, + onChange: this.handleChange + })), + _react2["default"].createElement(Icon, { + type: "uf-correct", + className: "editable-cell-icon-check", + onClick: this.check + }) + ) : _react2["default"].createElement( + "div", + { className: "editable-cell-input-wrapper" }, + _react2["default"].createElement(TComponent, _extends({}, this.props, { + value: date_value, + onChange: this.handleChange + })), + _react2["default"].createElement(Icon, { + type: "uf-correct", + className: "editable-cell-icon-check", + onClick: this.check + }) + ); + } else { + cellContent = isclickTrigger ? _react2["default"].createElement( + "div", + { className: "editable-cell-text-wrapper", onClick: this.edit }, + value || " " + ) : _react2["default"].createElement( + "div", + { className: "editable-cell-text-wrapper" }, + value || " ", + _react2["default"].createElement(Icon, { + type: "uf-pencil", + className: "editable-cell-icon", + onClick: this.edit + }) + ); + } + return _react2["default"].createElement( + "div", + { className: "editable-cell" }, + cellContent + ); + }; + + return DateRender; + }(_react.Component), _class.defaultProps = { + type: "DatePicker" + }, _temp2; +} +module.exports = exports["default"]; \ No newline at end of file diff --git a/build/render/InputRender.js b/build/render/InputRender.js new file mode 100644 index 0000000..04c7002 --- /dev/null +++ b/build/render/InputRender.js @@ -0,0 +1,194 @@ +"use strict"; + +Object.defineProperty(exports, "__esModule", { + 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; }; + +exports["default"] = renderInput; + +var _react = require("react"); + +var _react2 = _interopRequireDefault(_react); + +var _propTypes = require("prop-types"); + +var _propTypes2 = _interopRequireDefault(_propTypes); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; } + +function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; } + +function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; } + +function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + +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); } + +/** + * 渲染输入框 + * @param Form + * @param Input + * @param Icon + * @returns {InputRender} + */ +function renderInput(Form, Input, Icon) { + var _class, _temp2; + + return _temp2 = _class = function (_Component) { + _inherits(InputRender, _Component); + + function InputRender() { + var _temp, _this, _ret; + + _classCallCheck(this, InputRender); + + for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { + args[_key] = arguments[_key]; + } + + return _ret = (_temp = (_this = _possibleConstructorReturn(this, _Component.call.apply(_Component, [this].concat(args))), _this), _this.state = { + value: _this.props.value, + editable: false + }, _this.handleChange = function (e) { + var value = e; + _this.setState({ value: value }); + }, _this.check = function () { + if (typeof _this.flag === "undefined" || _this.flag) { + _this.props.check(_this.flag, _this.obj); + _this.setState({ editable: false }); + if (_this.props.onChange) { + _this.props.onChange(_this.state.value); + } + _this.flag = undefined; + } + }, _this.checkValidate = function (flag, obj) { + _this.flag = flag; + _this.obj = obj; + }, _this.edit = function () { + _this.setState({ editable: true }); + }, _this.handleKeydown = function (event) { + if (event.keyCode == 13) { + _this.check(); + } else if (event.keyCode == 9) {} + }, _this.formatCurrency = function (money) { + if (money && money != null && !!Number(money)) { + money = String(money); + var left = money.split(".")[0], + right = money.split(".")[1]; + right = right ? right.length >= 2 ? "." + right.substr(0, 2) : "." + right + "0" : ".00"; + var temp = left.split("").reverse().join("").match(/(\d{1,3})/g); + return (Number(money) < 0 ? "-" : "") + temp.join(",").split("").reverse().join("") + right; + } else if (money === 0) { + //注意===在这里的使用，如果传入的money为0,if中会将其判定为boolean类型，故而要另外做===判断 + return "0.00"; + } else { + return ""; + } + }, _temp), _possibleConstructorReturn(_this, _ret); + } + //货币的格式化方法 + + + InputRender.prototype.render = function render() { + var _state = this.state, + value = _state.value, + editable = _state.editable; + + var _props = this.props, + name = _props.name, + placeholder = _props.placeholder, + isclickTrigger = _props.isclickTrigger, + format = _props.format, + formItemClassName = _props.formItemClassName, + mesClassName = _props.mesClassName, + check = _props.check, + other = _objectWithoutProperties(_props, ["name", "placeholder", "isclickTrigger", "format", "formItemClassName", "mesClassName", "check"]); + + var cellContent = ""; + if (editable) { + cellContent = isclickTrigger ? _react2["default"].createElement( + "div", + { className: "editable-cell-input-wrapper" }, + _react2["default"].createElement( + Form.FormItem, + _extends({ + className: "formItem-style " + formItemClassName, + mesClassName: "errMessage-style " + mesClassName, + change: this.handleChange, + blur: this.check, + check: this.checkValidate + }, other), + _react2["default"].createElement(Input, { + name: name, + placeholder: placeholder, + onKeyDown: this.handleKeydown, + autoFocus: true, + value: value + }) + ) + ) : _react2["default"].createElement( + "div", + { className: "editable-cell-input-wrapper" }, + _react2["default"].createElement( + Form.FormItem, + _extends({ + className: "formItem-style " + formItemClassName, + mesClassName: "errMessage-style " + mesClassName, + change: this.handleChange, + blur: this.check, + check: this.checkValidate + }, other), + _react2["default"].createElement(Input, { + name: name, + placeholder: placeholder, + onKeyDown: this.handleKeydown, + autoFocus: true, + value: value + }) + ), + _react2["default"].createElement(Icon, { + type: "uf-correct", + className: "editable-cell-icon-check", + onClick: this.check + }) + ); + } else { + if (format && format === "Currency") { + value = this.formatCurrency(value); + } + cellContent = isclickTrigger ? _react2["default"].createElement( + "div", + { className: "editable-cell-text-wrapper", onClick: this.edit }, + value || " " + ) : _react2["default"].createElement( + "div", + { className: "editable-cell-text-wrapper" }, + value || " ", + _react2["default"].createElement(Icon, { + type: "uf-pencil", + className: "editable-cell-icon", + onClick: this.edit + }) + ); + } + return _react2["default"].createElement( + "div", + { className: "editable-cell" }, + cellContent + ); + }; + + return InputRender; + }(_react.Component), _class.propTypes = { + check: _propTypes2["default"].func + }, _class.defaultProps = { + check: function check() { + return ""; + } + }, _temp2; +} +module.exports = exports["default"]; \ No newline at end of file diff --git a/build/render/RadioRender.js b/build/render/RadioRender.js new file mode 100644 index 0000000..9a390c3 --- /dev/null +++ b/build/render/RadioRender.js @@ -0,0 +1 @@ +"use strict"; \ No newline at end of file diff --git a/build/render/SelectRender.js b/build/render/SelectRender.js new file mode 100644 index 0000000..a1d55db --- /dev/null +++ b/build/render/SelectRender.js @@ -0,0 +1,170 @@ +"use strict"; + +Object.defineProperty(exports, "__esModule", { + 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; }; + +exports["default"] = renderSelect; + +var _react = require("react"); + +var _react2 = _interopRequireDefault(_react); + +var _propTypes = require("prop-types"); + +var _propTypes2 = _interopRequireDefault(_propTypes); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; } + +function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; } + +function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + +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); } + +/** + * 渲染下拉框 + * @param Select + * @param Icon + * @returns {SelectRender} + */ +function renderSelect(Select, Icon) { + var _class, _temp2; + + return _temp2 = _class = function (_Component) { + _inherits(SelectRender, _Component); + + function SelectRender() { + var _temp, _this, _ret; + + _classCallCheck(this, SelectRender); + + for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { + args[_key] = arguments[_key]; + } + + return _ret = (_temp = (_this = _possibleConstructorReturn(this, _Component.call.apply(_Component, [this].concat(args))), _this), _this.state = { + value: _this.props.value, + editable: false + }, _this.handleChange = function (e) { + var value = e; + if (_this.props.onChange) { + _this.props.onChange(value); + } + _this.setState({ value: value }); + setTimeout(function () { + _this.setState({ editable: false }); + }, 0); + }, _this.check = function () { + _this.setState({ editable: false }); + if (_this.props.onChange) { + _this.props.onChange(_this.state.value); + } + }, _this.edit = function () { + _this.setState({ editable: true }); + }, _temp), _possibleConstructorReturn(_this, _ret); + } + + SelectRender.prototype.render = function render() { + var _this2 = this; + + var _state = this.state, + value = _state.value, + editable = _state.editable; + var _props = this.props, + isclickTrigger = _props.isclickTrigger, + dataSource = _props.dataSource; + + var cellContent = ""; + if (editable) { + cellContent = isclickTrigger ? _react2["default"].createElement( + "div", + { className: "editable-cell-input-wrapper" }, + _react2["default"].createElement( + Select, + _extends({}, this.props, { + value: this.state.value, + onBlur: function onBlur(value) { + console.log(value); + // this.props.onBlur(); + }, + + onFocus: function onFocus(value) { + console.log(value); + // this.props.onBlur(); + }, + + onChange: this.handleChange + }), + this.props.children + ), + _react2["default"].createElement(Icon, { + type: "uf-correct", + className: "editable-cell-icon-check", + onClick: this.check + }) + ) : _react2["default"].createElement( + "div", + { className: "editable-cell-input-wrapper" }, + _react2["default"].createElement( + Select, + _extends({}, this.props, { + value: this.state.value, + onBlur: function onBlur() { + _this2.setState({ + editable: true + }); + _this2.props.onBlur(); + }, + onChange: this.handleChange + }), + this.props.children + ), + _react2["default"].createElement(Icon, { + type: "uf-correct", + className: "editable-cell-icon-check", + onClick: this.check + }) + ); + } else { + if (dataSource && dataSource.length > 0) { + for (var index = 0; index < dataSource.length; index++) { + var element = dataSource[index]; + if (element.value === value) { + value = element.key; + break; + } + } + } + cellContent = isclickTrigger ? _react2["default"].createElement( + "div", + { className: "editable-cell-text-wrapper", onClick: this.edit }, + value || " " + ) : _react2["default"].createElement( + "div", + { className: "editable-cell-text-wrapper" }, + value || " ", + _react2["default"].createElement(Icon, { + type: "uf-pencil", + className: "editable-cell-icon", + onClick: this.edit + }) + ); + } + return _react2["default"].createElement( + "div", + { className: "editable-cell" }, + cellContent + ); + }; + + return SelectRender; + }(_react.Component), _class.propTypes = { + dataSource: _propTypes2["default"].array + }, _temp2; +} +module.exports = exports["default"]; \ No newline at end of file diff --git a/build/utils.js b/build/utils.js new file mode 100644 index 0000000..63645f6 --- /dev/null +++ b/build/utils.js @@ -0,0 +1,313 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.Event = exports.EventUtil = exports.tryParseInt = undefined; + +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; }; + +exports.measureScrollbar = measureScrollbar; +exports.debounce = debounce; +exports.warningOnce = warningOnce; +exports.getOffset = getOffset; +exports.addClass = addClass; +exports.removeClass = removeClass; +exports.ObjectAssign = ObjectAssign; +exports.closest = closest; +exports.getMaxColChildrenLength = getMaxColChildrenLength; +exports.getColChildrenLength = getColChildrenLength; +exports.DicimalFormater = DicimalFormater; +exports.checkDicimalInvalid = checkDicimalInvalid; + +var _warning = require('warning'); + +var _warning2 = _interopRequireDefault(_warning); + +var _parseInt = require('lodash/parseInt'); + +var _parseInt2 = _interopRequireDefault(_parseInt); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; } + +var scrollbarSize = void 0; + +// Measure scrollbar width for padding body during modal show/hide +var scrollbarMeasure = { + position: 'absolute', + top: '-9999px', + width: '50px', + height: '50px', + overflow: 'scroll' +}; + +function measureScrollbar() { + var direction = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'vertical'; + + if (typeof document === 'undefined' || typeof window === 'undefined') { + return 0; + } + if (scrollbarSize) { + return scrollbarSize; + } + var scrollDiv = document.createElement('div'); + Object.keys(scrollbarMeasure).forEach(function (scrollProp) { + scrollDiv.style[scrollProp] = scrollbarMeasure[scrollProp]; + }); + document.body.appendChild(scrollDiv); + var size = 0; + if (direction === 'vertical') { + size = scrollDiv.offsetWidth - scrollDiv.clientWidth; + } else if (direction === 'horizontal') { + size = scrollDiv.offsetHeight - scrollDiv.clientHeight; + } + + document.body.removeChild(scrollDiv); + scrollbarSize = size; + return scrollbarSize; +} + +function debounce(func, wait, immediate) { + var timeout = void 0; + return function debounceFunc() { + var context = this; + var args = arguments; + // https://fb.me/react-event-pooling + if (args[0] && args[0].persist) { + args[0].persist(); + } + var later = function later() { + timeout = null; + if (!immediate) { + func.apply(context, args); + } + }; + var callNow = immediate && !timeout; + clearTimeout(timeout); + timeout = setTimeout(later, wait); + if (callNow) { + func.apply(context, args); + } + }; +} + +var warned = {}; +function warningOnce(condition, format, args) { + if (!warned[format]) { + (0, _warning2["default"])(condition, format, args); + warned[format] = true; + } +} +function getOffset(Node, offset) { + if (!offset) { + offset = {}; + offset.top = 0; + offset.left = 0; + } + if (Node == document.body) { + return offset; + } + offset.top += Node.offsetTop; + offset.left += Node.offsetLeft; + if (Node.offsetParent) return getOffset(Node.offsetParent, offset);else return offset; +}; + +var tryParseInt = exports.tryParseInt = function tryParseInt(value) { + var defaultValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0; + + var resultValue = (0, _parseInt2["default"])(value); + + if (isNaN(resultValue)) { + return defaultValue; + } + return resultValue; +}; + +function addClass(elm, className) { + if (!className) return; + + var els = Array.isArray(elm) ? elm : [elm]; + + els.forEach(function (el) { + if (el.classList) { + el.classList.add(className.split(' ')); + } else { + el.className += ' ' + className; + } + }); +} + +function removeClass(elm, className) { + if (!className) return; + + var els = Array.isArray(elm) ? elm : [elm]; + + els.forEach(function (el) { + if (el.classList) { + el.classList.remove(className.split(' ')); + } else { + el.className = el.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' '); + } + }); +} + +/** + * 简单数组数据对象拷贝 + * @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; +} +/** + * 获取某个父元素 + * */ + +function closest(ele, selector) { + var matches = ele.matches || ele.webkitMatchesSelector || ele.mozMatchesSelector || ele.msMatchesSelector; + if (matches) { + while (ele) { + if (matches.call(ele, selector)) { + return ele; + } else { + ele = ele.parentElement; + } + } + } + return null; +} + +function getMaxColChildrenLength(columns) { + var arr = []; + arr = columns.map(function (item, index) { + var chilrenLen = 0; + if (item.children) { + chilrenLen = getColChildrenLength(item.children, chilrenLen + 1); + } + return chilrenLen; + }); + var max = Math.max.apply(null, arr); + return max; +} + +function getColChildrenLength(columns, chilrenLen) { + columns.forEach(function (item, index) { + if (item.children) { + chilrenLen = getColChildrenLength(item.children, chilrenLen + 1); + } + }); + return chilrenLen; +} + +function addHandler(element, type, handler) { + var event = null; + if (element.addEventListener) { + //检测是否为DOM2级方法 + event = element.addEventListener(type, handler, false); + } else if (element.attachEvent) { + //检测是否为IE级方法 + event = element.attachEvent("on" + type, handler); + } else { + //检测是否为DOM0级方法 + event = element["on" + type] = handler; + } + return event; +} + +function removeHandler(element, type, handler) { + if (element.removeEventListener) { + element.removeEventListener(type, handler, false); + } else if (element.detachEvent) { + element.detachEvent("on" + type, handler); + } else { + element["on" + type] = null; + } +} + +//获取事件对象的兼容性写法 +function getEvent(event) { + return event ? event : window.event; +} + +//获取事件对象目标的兼容性写法 +function getTarget(event) { + return event.target || event.srcElement; +} + +function preventDefault(event) { + if (event.preventDefault) { + event.preventDefault(); + } else { + event.returnValue = false; + } +} + +function stopPropagation(event) { + if (event.stopPropagation) { + event.stopPropagation(); + } else { + event.cancelBubble = true; + } +} + +//用事件冒泡方式，如果想兼容事件捕获只需要添加个bool参数 +var EventUtil = exports.EventUtil = { + addHandler: function addHandler(element, type, handler) { + if (element.addEventListener) { + element.addEventListener(type, handler, false); + } else if (element.attachEvent) { + element.attachEvent('on' + type, handler); + } else { + element['on' + type] = handler; + } + }, + + removeHandler: function removeHandler(element, type, handler) { + if (element.removeEventListener) { + element.removeEventListener(type, handler, false); + } else if (element.detachEvent) { + element.detachEvent('on' + type, handler); + } else { + element['on' + type] = null; + } + } + + /* + * 处理精度 + */ +};function DicimalFormater(value, precision) { + var value = value + '', + precision = precision ? precision : 0; + for (var i = 0; i < value.length; i++) { + if ("-0123456789.".indexOf(value.charAt(i)) == -1) return ""; + } + return checkDicimalInvalid(value, precision); +}; +function checkDicimalInvalid(value, precision) { + if (value == null || isNaN(value)) return ""; + // 浮点数总位数不能超过10位 + var digit = parseFloat(value); + var result = (digit * Math.pow(10, precision) / Math.pow(10, precision)).toFixed(precision); + if (result == "NaN") return ""; + return result; +}; + +var Event = exports.Event = { + addHandler: addHandler, + removeHandler: removeHandler, + getEvent: getEvent, + getTarget: getTarget, + preventDefault: preventDefault, + stopPropagation: stopPropagation +}; \ No newline at end of file diff --git a/package.json b/package.json index 1653858..36f7413 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "bee-table", - "version": "1.6.44", + "version": "2.0.0", "description": "Table ui component for react", "keywords": [ "react",