custom-app
Version:
ITIMS��Ʒ�鿪��ר��React���,�Dz��ý��ּ�dhcc-app���������
400 lines (312 loc) • 12.4 kB
JavaScript
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
var _defineProperty3 = _interopRequireDefault(_defineProperty2);
var _extends4 = require('babel-runtime/helpers/extends');
var _extends5 = _interopRequireDefault(_extends4);
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 _propTypes = require('prop-types');
var _propTypes2 = _interopRequireDefault(_propTypes);
var _miniStore = require('mini-store');
var _reactLifecyclesCompat = require('react-lifecycles-compat');
var _classnames = require('classnames');
var _classnames2 = _interopRequireDefault(_classnames);
var _TableCell = require('./TableCell');
var _TableCell2 = _interopRequireDefault(_TableCell);
var _utils = require('./utils');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
var TableRow = function (_React$Component) {
(0, _inherits3['default'])(TableRow, _React$Component);
function TableRow(props) {
(0, _classCallCheck3['default'])(this, TableRow);
var _this = (0, _possibleConstructorReturn3['default'])(this, (TableRow.__proto__ || Object.getPrototypeOf(TableRow)).call(this, props));
_this.onTriggerEvent = function (rowPropFunc, legacyFunc, additionalFunc) {
var _this$props = _this.props,
record = _this$props.record,
index = _this$props.index;
return function () {
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
// Additional function like trigger `this.onHover` to handle self logic
if (additionalFunc) {
additionalFunc();
}
// [Legacy] Some legacy function like `onRowClick`.
var event = args[0];
if (legacyFunc) {
legacyFunc(record, index, event);
}
// Pass to the function from `onRow`
if (rowPropFunc) {
rowPropFunc.apply(undefined, args);
}
};
};
_this.onMouseEnter = function () {
var _this$props2 = _this.props,
onHover = _this$props2.onHover,
rowKey = _this$props2.rowKey;
onHover(true, rowKey);
};
_this.onMouseLeave = function () {
var _this$props3 = _this.props,
onHover = _this$props3.onHover,
rowKey = _this$props3.rowKey;
onHover(false, rowKey);
};
_this.shouldRender = props.visible;
_this.state = {};
return _this;
}
(0, _createClass3['default'])(TableRow, [{
key: 'componentDidMount',
value: function componentDidMount() {
if (this.state.shouldRender) {
this.saveRowRef();
}
}
}, {
key: 'shouldComponentUpdate',
value: function shouldComponentUpdate(nextProps) {
return !!(this.props.visible || nextProps.visible);
}
}, {
key: 'componentDidUpdate',
value: function componentDidUpdate() {
if (this.state.shouldRender && !this.rowRef) {
this.saveRowRef();
}
}
}, {
key: 'setExpandedRowHeight',
value: function setExpandedRowHeight() {
var _props = this.props,
store = _props.store,
rowKey = _props.rowKey;
var _store$getState = store.getState(),
expandedRowsHeight = _store$getState.expandedRowsHeight;
var height = this.rowRef.getBoundingClientRect().height;
expandedRowsHeight = (0, _extends5['default'])({}, expandedRowsHeight, (0, _defineProperty3['default'])({}, rowKey, height));
store.setState({ expandedRowsHeight: expandedRowsHeight });
}
}, {
key: 'setRowHeight',
value: function setRowHeight() {
var _props2 = this.props,
store = _props2.store,
rowKey = _props2.rowKey;
var _store$getState2 = store.getState(),
fixedColumnsBodyRowsHeight = _store$getState2.fixedColumnsBodyRowsHeight;
var height = this.rowRef.getBoundingClientRect().height;
store.setState({
fixedColumnsBodyRowsHeight: (0, _extends5['default'])({}, fixedColumnsBodyRowsHeight, (0, _defineProperty3['default'])({}, rowKey, height))
});
}
}, {
key: 'getStyle',
value: function getStyle() {
var _props3 = this.props,
height = _props3.height,
visible = _props3.visible;
if (height && height !== this.style.height) {
this.style = (0, _extends5['default'])({}, this.style, { height: height });
}
if (!visible && !this.style.display) {
this.style = (0, _extends5['default'])({}, this.style, { display: 'none' });
}
return this.style;
}
}, {
key: 'saveRowRef',
value: function saveRowRef() {
this.rowRef = _reactDom2['default'].findDOMNode(this);
var _props4 = this.props,
isAnyColumnsFixed = _props4.isAnyColumnsFixed,
fixed = _props4.fixed,
expandedRow = _props4.expandedRow,
ancestorKeys = _props4.ancestorKeys;
if (!isAnyColumnsFixed) {
return;
}
if (!fixed && expandedRow) {
this.setExpandedRowHeight();
}
if (!fixed && ancestorKeys.length >= 0) {
this.setRowHeight();
}
}
}, {
key: 'render',
value: function render() {
if (!this.state.shouldRender) {
return null;
}
var _props5 = this.props,
prefixCls = _props5.prefixCls,
columns = _props5.columns,
record = _props5.record,
rowKey = _props5.rowKey,
index = _props5.index,
onRow = _props5.onRow,
indent = _props5.indent,
indentSize = _props5.indentSize,
hovered = _props5.hovered,
height = _props5.height,
visible = _props5.visible,
components = _props5.components,
hasExpandIcon = _props5.hasExpandIcon,
renderExpandIcon = _props5.renderExpandIcon,
renderExpandIconCell = _props5.renderExpandIconCell,
onRowClick = _props5.onRowClick,
onRowDoubleClick = _props5.onRowDoubleClick,
onRowMouseEnter = _props5.onRowMouseEnter,
onRowMouseLeave = _props5.onRowMouseLeave,
onRowContextMenu = _props5.onRowContextMenu;
var BodyRow = components.body.row;
var BodyCell = components.body.cell;
var className = this.props.className;
if (hovered) {
className += ' ' + prefixCls + '-hover';
}
var cells = [];
renderExpandIconCell(cells);
for (var i = 0; i < columns.length; i++) {
var column = columns[i];
(0, _utils.warningOnce)(column.onCellClick === undefined, 'column[onCellClick] is deprecated, please use column[onCell] instead.');
cells.push(_react2['default'].createElement(_TableCell2['default'], {
prefixCls: prefixCls,
record: record,
indentSize: indentSize,
indent: indent,
index: index,
column: column,
key: column.key || column.dataIndex,
expandIcon: hasExpandIcon(i) && renderExpandIcon(),
component: BodyCell
}));
}
var _ref = onRow(record, index) || {},
customClassName = _ref.className,
customStyle = _ref.style,
rowProps = (0, _objectWithoutProperties3['default'])(_ref, ['className', 'style']);
var style = { height: height };
if (!visible) {
style.display = 'none';
}
style = (0, _extends5['default'])({}, style, customStyle);
var rowClassName = (0, _classnames2['default'])(prefixCls, className, prefixCls + '-level-' + indent, customClassName);
return _react2['default'].createElement(
BodyRow,
(0, _extends5['default'])({}, rowProps, {
onClick: this.onTriggerEvent(rowProps.onClick, onRowClick),
onDoubleClick: this.onTriggerEvent(rowProps.onDoubleClick, onRowDoubleClick),
onMouseEnter: this.onTriggerEvent(rowProps.onMouseEnter, onRowMouseEnter, this.onMouseEnter),
onMouseLeave: this.onTriggerEvent(rowProps.onMouseLeave, onRowMouseLeave, this.onMouseLeave),
onContextMenu: this.onTriggerEvent(rowProps.onContextMenu, onRowContextMenu),
className: rowClassName,
style: style,
'data-row-key': rowKey
}),
cells
);
}
}], [{
key: 'getDerivedStateFromProps',
value: function getDerivedStateFromProps(nextProps, prevState) {
if (prevState.visible || !prevState.visible && nextProps.visible) {
return {
shouldRender: true,
visible: nextProps.visible
};
}
return {
visible: nextProps.visible
};
}
}]);
return TableRow;
}(_react2['default'].Component);
TableRow.propTypes = {
onRow: _propTypes2['default'].func,
onRowClick: _propTypes2['default'].func,
onRowDoubleClick: _propTypes2['default'].func,
onRowContextMenu: _propTypes2['default'].func,
onRowMouseEnter: _propTypes2['default'].func,
onRowMouseLeave: _propTypes2['default'].func,
record: _propTypes2['default'].object,
prefixCls: _propTypes2['default'].string,
onHover: _propTypes2['default'].func,
columns: _propTypes2['default'].array,
height: _propTypes2['default'].oneOfType([_propTypes2['default'].string, _propTypes2['default'].number]),
index: _propTypes2['default'].number,
rowKey: _propTypes2['default'].oneOfType([_propTypes2['default'].string, _propTypes2['default'].number]).isRequired,
className: _propTypes2['default'].string,
indent: _propTypes2['default'].number,
indentSize: _propTypes2['default'].number,
hasExpandIcon: _propTypes2['default'].func,
hovered: _propTypes2['default'].bool.isRequired,
visible: _propTypes2['default'].bool.isRequired,
store: _propTypes2['default'].object.isRequired,
fixed: _propTypes2['default'].oneOfType([_propTypes2['default'].string, _propTypes2['default'].bool]),
renderExpandIcon: _propTypes2['default'].func,
renderExpandIconCell: _propTypes2['default'].func,
components: _propTypes2['default'].any,
expandedRow: _propTypes2['default'].bool,
isAnyColumnsFixed: _propTypes2['default'].bool,
ancestorKeys: _propTypes2['default'].array.isRequired
};
TableRow.defaultProps = {
onRow: function onRow() {},
onHover: function onHover() {},
hasExpandIcon: function hasExpandIcon() {},
renderExpandIcon: function renderExpandIcon() {},
renderExpandIconCell: function renderExpandIconCell() {}
};
function getRowHeight(state, props) {
var expandedRowsHeight = state.expandedRowsHeight,
fixedColumnsBodyRowsHeight = state.fixedColumnsBodyRowsHeight;
var fixed = props.fixed,
rowKey = props.rowKey;
if (!fixed) {
return null;
}
if (expandedRowsHeight[rowKey]) {
return expandedRowsHeight[rowKey];
}
if (fixedColumnsBodyRowsHeight[rowKey]) {
return fixedColumnsBodyRowsHeight[rowKey];
}
return null;
}
(0, _reactLifecyclesCompat.polyfill)(TableRow);
exports['default'] = (0, _miniStore.connect)(function (state, props) {
var currentHoverKey = state.currentHoverKey,
expandedRowKeys = state.expandedRowKeys;
var rowKey = props.rowKey,
ancestorKeys = props.ancestorKeys;
var visible = ancestorKeys.length === 0 || ancestorKeys.every(function (k) {
return ~expandedRowKeys.indexOf(k);
});
return {
visible: visible,
hovered: currentHoverKey === rowKey,
height: getRowHeight(state, props)
};
})(TableRow);
module.exports = exports['default'];