182 lines
7.3 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

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.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;
}