@csr632/next/es/table/fixed.js

A configurable component library for web built on React.

import _extends from 'babel-runtime/helpers/extends';
import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
import _inherits from 'babel-runtime/helpers/inherits';
import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { dom } from '../util';
import HeaderComponent from './fixed/header';
import BodyComponent from './fixed/body';
import WrapperComponent from './fixed/wrapper';
import { statics } from './util';

export default function fixed(BaseComponent) {
    var _class, _temp2;

    /** Table */
    var FixedTable = (_temp2 = _class = function (_React$Component) {
        _inherits(FixedTable, _React$Component);

        function FixedTable() {
            var _temp, _this, _ret;

            _classCallCheck(this, FixedTable);

            for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
                args[_key] = arguments[_key];
            }

            return _ret = (_temp = (_this = _possibleConstructorReturn(this, _React$Component.call.apply(_React$Component, [this].concat(args))), _this), _this.state = {}, _this.getNode = function (type, node, lockType) {
                lockType = lockType ? lockType.charAt(0).toUpperCase() + lockType.substr(1) : '';
                _this['' + type + lockType + 'Node'] = node;
            }, _this.onFixedScrollSync = function () {
                var current = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};

                if (current.currentTarget !== current.target) {
                    return;
                }
                var target = current.target,
                    headerNode = _this.headerNode,
                    bodyNode = _this.bodyNode;

                var scrollLeft = target.scrollLeft;

                if (target === bodyNode) {
                    if (headerNode && scrollLeft !== headerNode.scrollLeft) {
                        headerNode.scrollLeft = scrollLeft;
                    }
                } else if (target === headerNode) {
                    if (bodyNode && scrollLeft !== bodyNode.scrollLeft) {
                        bodyNode.scrollLeft = scrollLeft;
                    }
                }
            }, _temp), _possibleConstructorReturn(_this, _ret);
        }

        FixedTable.prototype.getChildContext = function getChildContext() {
            return {
                fixedHeader: this.props.fixedHeader,
                maxBodyHeight: this.props.maxBodyHeight,
                onFixedScrollSync: this.onFixedScrollSync,
                getNode: this.getNode
            };
        };

        FixedTable.prototype.componentDidMount = function componentDidMount() {
            this.adjustFixedHeaderSize();
        };

        FixedTable.prototype.componentDidUpdate = function componentDidUpdate() {
            this.adjustFixedHeaderSize();
        };

        // for fixed header scroll left


        FixedTable.prototype.adjustFixedHeaderSize = function adjustFixedHeaderSize() {
            var _props = this.props,
                hasHeader = _props.hasHeader,
                rtl = _props.rtl;

            var paddingName = rtl ? 'paddingLeft' : 'paddingRight';
            var marginName = rtl ? 'marginLeft' : 'marginRight';
            var body = this.bodyNode;

            if (hasHeader && !this.props.lockType && body) {
                var _style;

                var scrollBarSize = +dom.scrollbar().width || 0;
                var hasVerScroll = body.scrollHeight > body.clientHeight,
                    hasHozScroll = body.scrollWidth > body.clientWidth;
                var style = (_style = {}, _style[paddingName] = scrollBarSize, _style[marginName] = scrollBarSize, _style);

                if (!hasVerScroll) {
                    style[paddingName] = 0;
                    style[marginName] = 0;
                }

                if (+scrollBarSize) {
                    style.marginBottom = -scrollBarSize;
                    if (hasHozScroll) {
                        style.paddingBottom = scrollBarSize;
                    } else {
                        style.paddingBottom = scrollBarSize;
                        style[marginName] = 0;
                    }
                }

                dom.setStyle(this.headerNode, style);
            }
        };

        FixedTable.prototype.render = function render() {
            /* eslint-disable no-unused-vars, prefer-const */
            var _props2 = this.props,
                components = _props2.components,
                className = _props2.className,
                prefix = _props2.prefix,
                fixedHeader = _props2.fixedHeader,
                lockType = _props2.lockType,
                dataSource = _props2.dataSource,
                maxBodyHeight = _props2.maxBodyHeight,
                others = _objectWithoutProperties(_props2, ['components', 'className', 'prefix', 'fixedHeader', 'lockType', 'dataSource', 'maxBodyHeight']);

            if (fixedHeader) {
                var _classnames;

                components = _extends({}, components);
                if (!components.Header) {
                    components.Header = HeaderComponent;
                }
                if (!components.Body) {
                    components.Body = BodyComponent;
                }
                if (!components.Wrapper) {
                    components.Wrapper = WrapperComponent;
                }
                className = classnames((_classnames = {}, _classnames[prefix + 'table-fixed'] = true, _classnames[prefix + 'table-wrap-empty'] = !dataSource.length, _classnames[className] = className, _classnames));
            }

            return React.createElement(BaseComponent, _extends({}, others, {
                dataSource: dataSource,
                lockType: lockType,
                components: components,
                className: className,
                prefix: prefix
            }));
        };

        return FixedTable;
    }(React.Component), _class.FixedHeader = HeaderComponent, _class.FixedBody = BodyComponent, _class.FixedWrapper = WrapperComponent, _class.propTypes = _extends({
        /**
         * 是否具有表头
         */
        hasHeader: PropTypes.bool,
        /**
         * 表头是否固定，该属性配合maxBodyHeight使用，当内容区域的高度超过maxBodyHeight的时候，在内容区域会出现滚动条
         */
        fixedHeader: PropTypes.bool,
        /**
         * 最大内容区域的高度,在`fixedHeader`为`true`的时候,超过这个高度会出现滚动条
         */
        maxBodyHeight: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
    }, BaseComponent.propTypes), _class.defaultProps = _extends({}, BaseComponent.defaultProps, {
        hasHeader: true,
        fixedHeader: false,
        maxBodyHeight: 200,
        components: {},
        refs: {},
        prefix: 'next-'
    }), _class.childContextTypes = {
        fixedHeader: PropTypes.bool,
        getNode: PropTypes.func,
        onFixedScrollSync: PropTypes.func,
        maxBodyHeight: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
    }, _temp2);
    FixedTable.displayName = 'FixedTable';

    statics(FixedTable, BaseComponent);
    return FixedTable;
}