@6thquake/react-material
Version:
React components that implement Google's Material Design.
318 lines (268 loc) • 9.16 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _2 = _interopRequireDefault(require(".."));
var _TableBody = _interopRequireDefault(require("../../TableBody"));
var _Cell = _interopRequireDefault(require("./Cell"));
var _TableRow = _interopRequireDefault(require("../../TableRow"));
var _styles = require("../../styles");
var _ExSwitch = _interopRequireDefault(require("./ExSwitch"));
var _lodash = _interopRequireDefault(require("lodash"));
var styles = function styles(theme) {
return {
root: {
overflowY: 'auto',
overflowX: 'hidden',
width: 'fit-content' // width:100%
},
layoutFixed: {
tableLayout: 'fixed'
},
cell: {
display: 'flex',
alignItems: 'center'
},
exIcon: {
// margin: 5,
fontSize: '0.8125rem'
},
exIconBox: {
border: "1px solid ".concat(theme.palette.divider),
width: 13,
height: 13,
display: 'flex',
// marginLeft: theme.spacing(1) ,
marginRight: theme.spacing(1),
justifyContent: 'center',
alignItems: 'center',
cursor: 'pointer'
}
};
};
var colStyle = {
// width: 150,
minWidth: 100
};
/**
* @ignore - internal component.
*/
var Body =
/*#__PURE__*/
function (_React$Component) {
(0, _inherits2.default)(Body, _React$Component);
function Body(props) {
var _this;
(0, _classCallCheck2.default)(this, Body);
_this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(Body).call(this, props));
_this.cachedProps = {};
_this.handleRowClick = function (entry, index) {
return function (e) {
var onRowClick = _this.props.onRowClick;
onRowClick && onRowClick(entry, index);
};
};
_this.rowsState = [];
_this.rowStyle = {};
_this.handleExIconChange = function (res) {
var close = res.close,
entry = res.data;
var rows = _this.state.rows;
var syncTableRowHeight = _this.props.syncTableRowHeight;
var key = entry.key;
rows.map(function (item, index) {
if (item.parent && item.parent.key === key) {
item.show = !close;
}
});
var length = _this.state.rows.filter(function (item) {
return item.show;
}).length;
_this.setState({
rows: rows
}, function () {
syncTableRowHeight && syncTableRowHeight(false, length);
});
};
_this.renderRows = function (tree, parent) {
if (tree && tree.length > 0) {
for (var index = 0; index < tree.length; index++) {
var node = tree[index];
if (parent === undefined) {
node.show = true;
}
node.key = node.key || Date.now();
node.parent = parent;
node.index = index;
node.isLeaf = !node.children || node.children.length <= 0;
node.deep = parent ? parent.deep + 1 : 0; // this.rows.push(this.renderOneRow(node, index))
_this.rowsState.push(node);
_this.renderRows(node.children, node);
}
} // return this.rows
};
_this.renderOneRow = function (entry, index) {
var _this$props = _this.props,
classes = _this$props.classes,
columns = _this$props.columns,
TableCellProps = _this$props.TableCellProps,
TableRowProps = _this$props.TableRowProps,
type = _this$props.type,
bodyRowHeight = _this$props.bodyRowHeight;
var rowStyle = {
height: bodyRowHeight
};
var indent = (entry.deep || 0) * 50;
if (!entry.show) {
return null;
}
var show = entry.show;
var node = entry;
while (node.parent) {
node = node.parent;
show = show && node.show;
}
if (!show) {
return;
}
var row = _react.default.createElement(_TableRow.default, (0, _extends2.default)({
onClick: _this.handleRowClick(entry, index),
style: rowStyle,
key: entry.key
}, TableRowProps), columns.map(function (column, index) {
var hasIcon = type !== 'right' && entry.children && entry.children.length > 0 && index === 0;
var indentStyle = type !== 'right' && index === 0 ? {
paddingLeft: indent
} : {};
return _react.default.createElement(_Cell.default, {
numeric: column.numeric,
TableCellProps: TableCellProps,
key: column.key || Date.now()
}, _react.default.createElement("div", {
className: classes.cell
}, _react.default.createElement("span", {
style: indentStyle
}), hasIcon && _react.default.createElement(_ExSwitch.default, {
onChange: _this.handleExIconChange,
data: entry
}), _react.default.createElement("span", null, column.render ? column.render(entry) : entry[column.dataIndex])));
}));
return row;
};
_this.state = {
rows: []
};
return _this;
}
(0, _createClass2.default)(Body, [{
key: "componentDidMount",
value: function componentDidMount() {
var data = this.props.data;
this.renderRows(data);
this.setState({
rows: this.rowsState
});
}
}, {
key: "componentDidUpdate",
value: function componentDidUpdate(prevProps, prevState) {
if (!_lodash.default.isEqual(this.cachedProps.data, this.props.data)) {
this.cachedProps.data = _lodash.default.cloneDeep(this.props.data);
var data = this.props.data;
this.rowsState = [];
this.renderRows(data);
this.setState({
rows: this.rowsState
});
}
}
}, {
key: "render",
value: function render() {
var _this2 = this;
var _this$props2 = this.props,
classes = _this$props2.classes,
data = _this$props2.data,
columns = _this$props2.columns,
type = _this$props2.type,
scroll = _this$props2.scroll,
tableRef = _this$props2.tableRef,
bodyRef = _this$props2.bodyRef,
bodyHeight = _this$props2.bodyHeight,
height = _this$props2.height,
noData = _this$props2.noData,
TableCellProps = _this$props2.TableCellProps,
TableRowProps = _this$props2.TableRowProps;
var rows = this.state.rows;
var mainAndNoData = data.length === 0 && type === 'main'; // this.rowsState = []
var tableStyle = mainAndNoData ? {
height: '100%'
} : {};
var bodyRowHeight = 0;
if (rows.length > 0) {
bodyRowHeight = bodyHeight / rows.filter(function (item) {
return item.show;
}).length;
}
this.rowStyle = {
height: bodyRowHeight
};
var Rows = rows.map(function (item, index) {
return _this2.renderOneRow(item, index);
});
return _react.default.createElement("div", {
ref: tableRef,
onScroll: function onScroll(e) {
scroll(e, type);
},
style: {
height: height
},
className: classes.root
}, _react.default.createElement(_2.default, {
innerRef: bodyRef,
classes: {
root: classes.layoutFixed
},
className: classes.table,
style: tableStyle
}, _react.default.createElement("colgroup", null, columns.map(function (item) {
return _react.default.createElement("col", {
key: item.title,
style: colStyle,
width: item.width
});
})), _react.default.createElement(_TableBody.default, null, mainAndNoData ? _react.default.createElement(_TableRow.default, (0, _extends2.default)({
style: {
height: '100%'
}
}, TableRowProps), _react.default.createElement(_Cell.default, {
TableCellProps: TableCellProps,
colSpan: columns.length,
style: {
height: '100%'
}
}, noData)) : Rows)));
}
}]);
return Body;
}(_react.default.Component);
Body.propTypes = {
classes: _propTypes.default.object.isRequired,
height: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number])
};
Body.defaultProps = {
height: 'auto'
};
var _default = (0, _styles.withStyles)(styles)(Body);
exports.default = _default;