mk-component/lib/components/datagrid/index1.js

- 1、npm install mk-component --save

'use strict';

Object.defineProperty(exports, "__esModule", {
    value: true
});

var _extends2 = require('babel-runtime/helpers/extends');

var _extends3 = _interopRequireDefault(_extends2);

var _defineProperty2 = require('babel-runtime/helpers/defineProperty');

var _defineProperty3 = _interopRequireDefault(_defineProperty2);

var _getIterator2 = require('babel-runtime/core-js/get-iterator');

var _getIterator3 = _interopRequireDefault(_getIterator2);

var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');

var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);

var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _createClass2 = require('babel-runtime/helpers/createClass');

var _createClass3 = _interopRequireDefault(_createClass2);

var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require('babel-runtime/helpers/inherits');

var _inherits3 = _interopRequireDefault(_inherits2);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _reactDom = require('react-dom');

var _reactDom2 = _interopRequireDefault(_reactDom);

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

var _omit = require('omit.js');

var _omit2 = _interopRequireDefault(_omit);

var _grid = require('./grid');

var _grid2 = _interopRequireDefault(_grid);

var _fixedDataTable = require('fixed-data-table-2');

var _cell = require('./cell');

var _cell2 = _interopRequireDefault(_cell);

var _textCell = require('./textCell');

var _textCell2 = _interopRequireDefault(_textCell);

var _lodash = require('lodash');

var _lodash2 = _interopRequireDefault(_lodash);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var DataGridComponent = function (_React$Component) {
    (0, _inherits3.default)(DataGridComponent, _React$Component);

    function DataGridComponent(props) {
        (0, _classCallCheck3.default)(this, DataGridComponent);

        var _this = (0, _possibleConstructorReturn3.default)(this, (DataGridComponent.__proto__ || (0, _getPrototypeOf2.default)(DataGridComponent)).call(this, props));

        _this.state = {
            height: 0,
            width: 0
        };

        _this.onResize = _this.onResize.bind(_this);
        _this.update = _this.update.bind(_this);
        _this.setStateDebounce = _lodash2.default.debounce(function (_ref) {
            var width = _ref.width,
                height = _ref.height;

            _this.setState({
                height: height,
                width: width,
                columnWidths: {}
            });
        }, 1);
        return _this;
    }

    (0, _createClass3.default)(DataGridComponent, [{
        key: 'componentDidUpdate',
        value: function componentDidUpdate(prevProps, prevState) {
            if (this.props.isFix === true) return;

            var dom = _reactDom2.default.findDOMNode(this),
                height = dom.offsetHeight,
                width = dom.offsetWidth;

            //计算我的最大高度
            var maxHeight = 0;
            if (dom.parentElement) {
                maxHeight = dom.parentElement.offsetHeight;

                var _iteratorNormalCompletion = true;
                var _didIteratorError = false;
                var _iteratorError = undefined;

                try {
                    for (var _iterator = (0, _getIterator3.default)(dom.parentElement.children), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
                        var c = _step.value;

                        if (c != dom) {
                            maxHeight -= c.offsetHeight;
                        }
                    }
                } catch (err) {
                    _didIteratorError = true;
                    _iteratorError = err;
                } finally {
                    try {
                        if (!_iteratorNormalCompletion && _iterator.return) {
                            _iterator.return();
                        }
                    } finally {
                        if (_didIteratorError) {
                            throw _iteratorError;
                        }
                    }
                }
            }

            if (height != this.state.height || width != this.state.width) {

                height = maxHeight > 0 && height > maxHeight ? maxHeight : height;
                this.setStateDebounce({
                    height: height,
                    width: width
                });
            } else if (height > maxHeight && maxHeight > 0) {
                this.setStateDebounce({
                    height: maxHeight,
                    width: width
                });
            }
        }
    }, {
        key: 'componentDidMount',
        value: function componentDidMount() {
            if (this.props.isFix === true) return;
            this.refreshSize();

            var win = window;
            if (win.addEventListener) {
                win.addEventListener('resize', this.onResize, false);
            } else if (win.attachEvent) {
                win.attachEvent('onresize', this.onResize);
            } else {
                win.onresize = this.onResize;
            }
        }
    }, {
        key: 'componentWillUnmount',
        value: function componentWillUnmount() {
            if (this.props.isFix === true) return;
            var win = window;
            if (win.removeEventListener) {
                win.removeEventListener('resize', this.onResize, false);
            } else if (win.detachEvent) {
                win.detachEvent('onresize', this.onResize);
            } else {
                win.onresize = undefined;
            }
        }
    }, {
        key: 'onResize',
        value: function onResize() {
            this.refreshSize();
            if (this.props.onResize) setTimeout(this.props.onResize, 16);
        }
    }, {
        key: 'refreshSize',
        value: function refreshSize() {
            this.setState({
                height: 0,
                width: 0
            });
        }
    }, {
        key: 'update',
        value: function update() {
            var dom = _reactDom2.default.findDOMNode(this),
                height = dom.clientHeight,
                width = dom.clientWidth;
            this.setStateDebounce({
                height: height,
                width: width
            });
        }
    }, {
        key: 'render',
        value: function render() {
            var _this2 = this;

            var className = (0, _classnames2.default)((0, _defineProperty3.default)({
                'mk-datagrid': true,
                'mk-datagrid-editable': this.props.readonly === false
            }, this.props.className, !!this.props.className));

            var width = this.props.isFix ? this.props.width : this.state.width;
            var height = this.props.isFix ? this.props.height : this.state.height;

            var enableResizeColumn = !!this.props.enableResizeColumn;
            var resizeProps = {},
                columns = [];
            if (enableResizeColumn && this.props.onColumnResizeEndCallback) {
                resizeProps = {
                    isColumnResizing: false,
                    onColumnResizeEndCallback: this.props.onColumnResizeEndCallback
                };

                this.props.columns && this.props.columns.forEach(function (c, index) {
                    if (index < _this2.props.columns.length - 1) {
                        var cw = _this2.props.columnWidths && _this2.props.columnWidths[c.props.columnKey];
                        var p = {
                            isResizable: c.props.isResizeable === false ? false : true
                        };
                        if (cw) {
                            p.width = cw;
                            p.flexGrow = 0;
                        }
                        c = _react2.default.cloneElement(c, p);
                    }
                    columns.push(c);
                });
            } else {
                columns = this.props.columns;
            }

            return _react2.default.createElement(
                'div',
                { className: className,
                    onKeyDown: this.props.onKeyDown,
                    onKeyUp: this.props.onKeyUp },
                (0, _grid2.default)((0, _extends3.default)({}, (0, _omit2.default)(this.props, ['className']), {
                    width: width,
                    height: height
                }, resizeProps, {
                    columns: columns
                }))
            );
        }
    }]);
    return DataGridComponent;
}(_react2.default.Component);

DataGridComponent.Cell = _cell2.default;
DataGridComponent.TextCell = _textCell2.default;
DataGridComponent.Column = _fixedDataTable.Column;
DataGridComponent.ColumnGroup = _fixedDataTable.ColumnGroup;

exports.default = DataGridComponent;
module.exports = exports['default'];