1 | import _extends from 'babel-runtime/helpers/extends';
|
2 | import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
|
3 | import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
|
4 | import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
|
5 | import _inherits from 'babel-runtime/helpers/inherits';
|
6 | import React from 'react';
|
7 | import PropTypes from 'prop-types';
|
8 | import { findDOMNode } from 'react-dom';
|
9 | import classnames from 'classnames';
|
10 | import { dom } from '../util';
|
11 | import HeaderComponent from './fixed/header';
|
12 | import BodyComponent from './fixed/body';
|
13 | import WrapperComponent from './fixed/wrapper';
|
14 | import { statics } from './util';
|
15 |
|
16 | export default function fixed(BaseComponent, stickyLock) {
|
17 | var _class, _temp2;
|
18 |
|
19 |
|
20 | var FixedTable = (_temp2 = _class = function (_React$Component) {
|
21 | _inherits(FixedTable, _React$Component);
|
22 |
|
23 | function FixedTable() {
|
24 | var _temp, _this, _ret;
|
25 |
|
26 | _classCallCheck(this, FixedTable);
|
27 |
|
28 | for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
|
29 | args[_key] = arguments[_key];
|
30 | }
|
31 |
|
32 | return _ret = (_temp = (_this = _possibleConstructorReturn(this, _React$Component.call.apply(_React$Component, [this].concat(args))), _this), _this.state = {}, _this.getNode = function (type, node, lockType) {
|
33 | lockType = lockType ? lockType.charAt(0).toUpperCase() + lockType.substr(1) : '';
|
34 | _this['' + type + lockType + 'Node'] = node;
|
35 | }, _this.getTableInstance = function (type, instance) {
|
36 | type = '';
|
37 | _this['table' + type + 'Inc'] = instance;
|
38 | }, _this.onFixedScrollSync = function () {
|
39 | var current = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : { currentTarget: {} };
|
40 |
|
41 | var currentTarget = current.currentTarget || {},
|
42 | headerNode = _this.headerNode,
|
43 | bodyNode = _this.bodyNode;
|
44 |
|
45 | var scrollLeft = currentTarget.scrollLeft,
|
46 | scrollWidth = currentTarget.scrollWidth,
|
47 | clientWidth = currentTarget.clientWidth;
|
48 |
|
49 | var scrollToRightEnd = !(scrollLeft < scrollWidth - clientWidth);
|
50 | var _this$props = _this.props,
|
51 | prefix = _this$props.prefix,
|
52 | loading = _this$props.loading;
|
53 |
|
54 |
|
55 | if (!loading && scrollToRightEnd !== _this.scrollToRightEnd) {
|
56 | _this.scrollToRightEnd = scrollToRightEnd;
|
57 | var table = _this.getTableNode();
|
58 |
|
59 | var leftFunc = scrollToRightEnd ? 'removeClass' : 'addClass';
|
60 | dom[leftFunc](table, prefix + 'table-scrolling-to-right');
|
61 | }
|
62 | if (current.currentTarget !== current.target) {
|
63 | return;
|
64 | }
|
65 | if (currentTarget === bodyNode) {
|
66 | if (headerNode && scrollLeft !== headerNode.scrollLeft) {
|
67 | headerNode.scrollLeft = scrollLeft;
|
68 | }
|
69 | } else if (currentTarget === headerNode) {
|
70 | if (bodyNode && scrollLeft !== bodyNode.scrollLeft) {
|
71 | bodyNode.scrollLeft = scrollLeft;
|
72 | }
|
73 | }
|
74 | }, _temp), _possibleConstructorReturn(_this, _ret);
|
75 | }
|
76 |
|
77 | FixedTable.prototype.getChildContext = function getChildContext() {
|
78 | return {
|
79 | fixedHeader: this.props.fixedHeader,
|
80 | maxBodyHeight: this.props.maxBodyHeight,
|
81 | getTableInstanceForFixed: this.getTableInstance,
|
82 | onFixedScrollSync: this.onFixedScrollSync,
|
83 | getNode: this.getNode
|
84 | };
|
85 | };
|
86 |
|
87 | FixedTable.prototype.componentDidMount = function componentDidMount() {
|
88 | this.adjustFixedHeaderSize();
|
89 | this.scrollToRightEnd = undefined;
|
90 | this.onFixedScrollSync({ currentTarget: this.bodyNode, target: this.bodyNode });
|
91 | };
|
92 |
|
93 | FixedTable.prototype.componentDidUpdate = function componentDidUpdate() {
|
94 | this.adjustFixedHeaderSize();
|
95 | this.onFixedScrollSync({ currentTarget: this.bodyNode, target: this.bodyNode });
|
96 | };
|
97 |
|
98 | FixedTable.prototype.getTableNode = function getTableNode() {
|
99 | var table = this.tableInc;
|
100 | try {
|
101 |
|
102 |
|
103 |
|
104 | return findDOMNode(table.tableEl);
|
105 | } catch (error) {
|
106 | return null;
|
107 | }
|
108 | };
|
109 |
|
110 |
|
111 |
|
112 |
|
113 | FixedTable.prototype.adjustFixedHeaderSize = function adjustFixedHeaderSize() {
|
114 | var _props = this.props,
|
115 | hasHeader = _props.hasHeader,
|
116 | rtl = _props.rtl,
|
117 | prefix = _props.prefix;
|
118 |
|
119 | var paddingName = rtl ? 'paddingLeft' : 'paddingRight';
|
120 | var marginName = rtl ? 'marginLeft' : 'marginRight';
|
121 | var body = this.bodyNode;
|
122 | var scrollBarSize = +dom.scrollbar().width || 0;
|
123 |
|
124 | if (hasHeader && !this.props.lockType && body) {
|
125 | var hasVerScroll = body.scrollHeight > body.clientHeight,
|
126 | hasHozScroll = body.scrollWidth > body.clientWidth;
|
127 | var style = {};
|
128 | if (!hasVerScroll) {
|
129 | style[paddingName] = 0;
|
130 | style[marginName] = 0;
|
131 | }
|
132 |
|
133 | if (+scrollBarSize) {
|
134 | style.marginBottom = -scrollBarSize;
|
135 | if (hasHozScroll) {
|
136 | style.paddingBottom = scrollBarSize;
|
137 | } else {
|
138 | style.paddingBottom = scrollBarSize;
|
139 | }
|
140 | if (hasVerScroll) {
|
141 | style[marginName] = scrollBarSize;
|
142 | }
|
143 | }
|
144 |
|
145 | dom.setStyle(this.headerNode, style);
|
146 | }
|
147 |
|
148 | if (hasHeader && !this.props.lockType && this.headerNode) {
|
149 | var fixer = this.headerNode.querySelector('.' + prefix + 'table-header-fixer');
|
150 | var height = dom.getStyle(this.headerNode, 'height');
|
151 | var paddingBottom = dom.getStyle(this.headerNode, 'paddingBottom');
|
152 |
|
153 | dom.setStyle(fixer, {
|
154 | width: scrollBarSize,
|
155 | height: height - paddingBottom
|
156 | });
|
157 | }
|
158 | };
|
159 |
|
160 | FixedTable.prototype.render = function render() {
|
161 |
|
162 | var _props2 = this.props,
|
163 | components = _props2.components,
|
164 | className = _props2.className,
|
165 | prefix = _props2.prefix,
|
166 | fixedHeader = _props2.fixedHeader,
|
167 | lockType = _props2.lockType,
|
168 | dataSource = _props2.dataSource,
|
169 | maxBodyHeight = _props2.maxBodyHeight,
|
170 | others = _objectWithoutProperties(_props2, ['components', 'className', 'prefix', 'fixedHeader', 'lockType', 'dataSource', 'maxBodyHeight']);
|
171 |
|
172 | if (fixedHeader) {
|
173 | var _classnames;
|
174 |
|
175 | components = _extends({}, components);
|
176 | if (!components.Header) {
|
177 | components.Header = HeaderComponent;
|
178 | }
|
179 | if (!components.Body) {
|
180 | components.Body = BodyComponent;
|
181 | }
|
182 | if (!components.Wrapper) {
|
183 | components.Wrapper = WrapperComponent;
|
184 | }
|
185 | className = classnames((_classnames = {}, _classnames[prefix + 'table-fixed'] = true, _classnames[prefix + 'table-wrap-empty'] = !dataSource.length, _classnames[className] = className, _classnames));
|
186 | }
|
187 |
|
188 | return React.createElement(BaseComponent, _extends({}, others, {
|
189 | dataSource: dataSource,
|
190 | lockType: lockType,
|
191 | components: components,
|
192 | className: className,
|
193 | prefix: prefix
|
194 | }));
|
195 | };
|
196 |
|
197 | return FixedTable;
|
198 | }(React.Component), _class.FixedHeader = HeaderComponent, _class.FixedBody = BodyComponent, _class.FixedWrapper = WrapperComponent, _class.propTypes = _extends({
|
199 | |
200 |
|
201 |
|
202 | hasHeader: PropTypes.bool,
|
203 | |
204 |
|
205 |
|
206 | fixedHeader: PropTypes.bool,
|
207 | |
208 |
|
209 |
|
210 | maxBodyHeight: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
|
211 | }, BaseComponent.propTypes), _class.defaultProps = _extends({}, BaseComponent.defaultProps, {
|
212 | hasHeader: true,
|
213 | fixedHeader: false,
|
214 | maxBodyHeight: 200,
|
215 | components: {},
|
216 | refs: {},
|
217 | prefix: 'next-'
|
218 | }), _class.childContextTypes = {
|
219 | fixedHeader: PropTypes.bool,
|
220 | getNode: PropTypes.func,
|
221 | onFixedScrollSync: PropTypes.func,
|
222 | getTableInstanceForFixed: PropTypes.func,
|
223 | maxBodyHeight: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
|
224 | }, _temp2);
|
225 | FixedTable.displayName = 'FixedTable';
|
226 |
|
227 | statics(FixedTable, BaseComponent);
|
228 | return FixedTable;
|
229 | } |
\ | No newline at end of file |