@makeen.io/material-ui-kit
Version:
Makeen UI components kit. Based on material-ui.
422 lines (395 loc) • 19.5 kB
JavaScript
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";import _slicedToArray from "@babel/runtime/helpers/slicedToArray";import _extends from "@babel/runtime/helpers/extends";import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";function _templateObject3() {var data = _taggedTemplateLiteral(["\n .ReactVirtualized__Grid {\n ", "\n }\n "]);_templateObject3 = function _templateObject3() {return data;};return data;}function _templateObject2() {var data = _taggedTemplateLiteral(["\n height: 100%;\n .ReactVirtualized__Grid.ReactVirtualized__Table__Grid {\n outline: none;\n }\n .FixedGridCell {\n &_empty {\n display: none !important;\n }\n &_inner-row {\n > .MuiTableCell-root {\n padding: 0;\n height: inherit;\n }\n }\n .explorer-table.table-cell {\n width: 100%;\n }\n }\n ", "\n"]);_templateObject2 = function _templateObject2() {return data;};return data;}function _templateObject() {var data = _taggedTemplateLiteral(["\n display: flex;\n justify-content: center;\n align-items: center;\n"]);_templateObject = function _templateObject() {return data;};return data;} /* eslint-disable @typescript-eslint/tslint/config */
import React from "react";
import IconButton from "@material-ui/core/IconButton";
import MoreVertIcon from "@material-ui/icons/MoreVert";
// import {SortableContainer, SortableElement} from "react-sortable-hoc";
import { Checkbox, FabButton, Loader, Menu } from "../../../atoms";
import { isEqual } from "lodash";
import map from "lodash/map";
import { InPlaceModal } from "../..";
import { AutoSizer, InfiniteLoader, MultiGrid } from "react-virtualized";
import styled, { css } from "styled-components";
import TableCell from "./Cell";
import EmptyTable from "./EmptyTable";
import TableHeader from "./Header";
var VTLoaderContainer = styled.div(_templateObject());
var GridWrapper = styled(AutoSizer)(_templateObject2(),
function (props) {
var customStyle = props.customStyle || "";
return css(_templateObject3(),
customStyle);
});
var Actions = function Actions(_ref) {var itemActions = _ref.itemActions,customItemActions = _ref.customItemActions,props = _objectWithoutProperties(_ref, ["itemActions", "customItemActions"]);
var options = map(itemActions, function (action) {return _extends({},
action, {
onClick: function onClick(e) {return action.onClick(props, e);} });});
if (customItemActions) {
return customItemActions(props);
}
return /*#__PURE__*/React.createElement(Menu, { options: options, transformOrigin: {
horizontal: "right",
vertical: "top"
} }, /*#__PURE__*/
React.createElement(IconButton, { "aria-label": "more", "aria-controls": "long-menu", "aria-haspopup": "true" }, /*#__PURE__*/
React.createElement(MoreVertIcon, null)));
};
var defaultProps = {
headerHeight: 48,
autoHeight: false,
height: 700,
rowHeight: 72,
width: 800
};
var Component = function Component(props) {
var _multiGrid = React.useRef(null);
var _autoSizer = null;var
data = props.data,checkedRows = props.checkedRows,hideHeader = props.hideHeader,columns = props.columns,onLastRowScrolled = props.onLastRowScrolled,_props$autoHeight = props.autoHeight,autoHeight = _props$autoHeight === void 0 ? defaultProps.autoHeight : _props$autoHeight;var
defaultHeight = defaultProps.height;
// const width = props.width || defaultWidth;
var height = props.height || defaultHeight;
var headerHeight = props.headerHeight || defaultProps.headerHeight;
var rowHeight = props.rowHeight || defaultProps.rowHeight;var _React$useState =
React.useState([]),_React$useState2 = _slicedToArray(_React$useState, 2),columnList = _React$useState2[0],setColumnList = _React$useState2[1];var _React$useState3 =
React.useState(0),_React$useState4 = _slicedToArray(_React$useState3, 2),autoColumnWidth = _React$useState4[0],setAutoColumnWidth = _React$useState4[1];var _React$useState5 =
React.useState([]),_React$useState6 = _slicedToArray(_React$useState5, 2),checkableIndexes = _React$useState6[0],setCheckableIndexes = _React$useState6[1];var _React$useState7 =
React.useState([]),_React$useState8 = _slicedToArray(_React$useState7, 2),checkedIndexes = _React$useState8[0],setCheckedIndexes = _React$useState8[1];var _React$useState9 =
React.useState([]),_React$useState10 = _slicedToArray(_React$useState9, 2),expandedIndexes = _React$useState10[0],setExpandedIndexes = _React$useState10[1];
var onLastRowScrolledHandler = React.useCallback(function () {
if (onLastRowScrolled) {
onLastRowScrolled.apply(void 0, arguments);
}
}, [onLastRowScrolled]);
React.useEffect(function () {
var indexes = [];
if (typeof props.isRowCheckable === "function") {
data.forEach(function (currentData, index) {
if (props.isRowCheckable(currentData)) {
indexes.push(index);
}
});
setCheckableIndexes(indexes);
} else
{
indexes = data.
map(function (val, index) {
return !val._expandData ? index : null;
}).
filter(function (x) {return x !== null;});
setCheckableIndexes(_toConsumableArray(indexes));
}
var expandableIndexes = [];
if (typeof props.isRowExpandable === "function") {
data.forEach(function (currentData, i) {
if (props.isRowExpandable(currentData)) {
expandableIndexes.push(i);
}
});
} else
{
expandableIndexes = data.
map(function (val, index, originalArray) {
return index + 1 < originalArray.length &&
originalArray[index + 1]._expandData ?
index :
null;
}).
filter(function (x) {return x !== null;});
}
var newColumnList = _toConsumableArray(columns);
if (props.checkable) {
var width = props.checkableColumnWidth || 40;
newColumnList[props.checkableColumnPosition === "left" ? "unshift" : "push"]({
width: width,
alignment: "left",
disableSort: true,
label: "",
Cell: function Cell(item) {
var itemStyle = { padding: "16px 0" };
var correctIndex = item.rowIndex;
if (props.hideNonCheckables) {
if (!checkableIndexes.includes(correctIndex)) {
itemStyle.display = "none";
}
}
return /*#__PURE__*/React.createElement(Checkbox, { checked: isRowChecked(correctIndex), onChange: function onChange(e) {return setRowSelectedById(correctIndex);}, style: itemStyle });
},
Header: function Header() {
var itemStyle = { padding: "16px 0" };
if (props.hideNonCheckables) {
if (checkableIndexes.length === 0) {
itemStyle.display = "none";
}
}
var visibleCount = data.filter(function (x, index) {return !x._expandData && isRowCheckable(index);}).length;
return /*#__PURE__*/React.createElement(Checkbox, { checked: checkedIndexes.length > 0 &&
checkedIndexes.length === visibleCount, onChange: setAllRowsSelected, style: itemStyle });
},
dataKey: "__checkbox__"
});
}
if (props.expandable) {
newColumnList.push({
width: 60,
alignment: "center",
disableSort: true,
Cell: function Cell(item) {
var itemStyle = {};
if (item.rowData._expandData ||
!expandableIndexes.includes(item.rowIndex)) {
itemStyle.display = "none";
}
return /*#__PURE__*/React.createElement(FabButton, { size: "small", style: itemStyle, palette: "fabArrowDark", expanded: isRowExpanded(item.rowIndex), onClick: function onClick(e) {return toggleCollapsible(e, item.rowIndex, item.rowData);} });
},
dataKey: "__expand__"
});
}
if (props.itemActions && props.itemActions.length ||
props.customItemActions) {
newColumnList.push({
width: 70,
alignment: "center",
disableSort: true,
Cell: function Cell(item) {
var itemStyle = {};
if (item.rowData._expandData) {
itemStyle.display = "none";
}
return /*#__PURE__*/React.createElement(Actions, _extends({ customItemActions: props.customItemActions, itemActions: props.itemActions }, item));
},
label: "",
style: { padding: "16 0" },
dataKey: "__actions__"
});
}
setColumnList(_toConsumableArray(newColumnList));
}, [columns, data, props, checkedIndexes]);
React.useEffect(function () {
if (!isEqual(checkedIndexes, checkedRows)) {
setCheckedIndexes(_toConsumableArray(checkedRows));
}
}, [checkedRows]);
React.useEffect(function () {
_multiGrid.current.forceUpdate();
}, [checkedIndexes]);
React.useEffect(function () {
_multiGrid.current.recomputeGridSize();
}, [expandedIndexes]);
React.useEffect(function () {
rebuildTable();
}, [columnList]);
var isRowCheckable = function isRowCheckable(index) {
return checkableIndexes.includes(index);
};
var isRowChecked = function isRowChecked(index) {
return checkedIndexes.includes(index);
};
var isRowExpanded = function isRowExpanded(index) {
return expandedIndexes.includes(index);
};
// const isRowSortable = index => {
// return index >= 0; // Header row should not be draggable
// };
var setRowSelectedById = function setRowSelectedById(index) {
var pos = checkedIndexes.findIndex(function (x) {return x === index;});
if (pos > -1) {
checkedIndexes.splice(pos, 1);
} else
{
checkedIndexes.push(index);
}
if (props.onCheckItem) {
props.onCheckItem(index, checkedIndexes);
}
setCheckedIndexes(_toConsumableArray(checkedIndexes));
};
var setAllRowsSelected = function setAllRowsSelected(_ref2) {var checked = _ref2.target.checked;
if (checked) {
data.forEach(function (data, index) {
if (isRowCheckable(index)) {
var pos = checkedIndexes.findIndex(function (x) {return x === index;});
if (pos === -1) {
checkedIndexes.push(index);
}
}
});
} else
{
checkedIndexes.splice(0, checkedIndexes.length);
}
setCheckedIndexes(_toConsumableArray(checkedIndexes));
if (props.onCheckAll) {
props.onCheckAll(_toConsumableArray(checkedIndexes));
}
};
var toggleCollapsible = function toggleCollapsible(event, index, rowData) {
var pos = expandedIndexes.findIndex(function (x) {return x === index;});
if (pos > -1) {
expandedIndexes.splice(pos, 1);
} else
{
expandedIndexes.push(index);
}
setExpandedIndexes(_toConsumableArray(expandedIndexes));
// if (!rowData._expandData) {
// props.onToggleCollapsible(index, rowData);
// setCheckableData([...checkableData]);
// }
};
// const SortableTable = SortableContainer(Table, {
// withRef: true
// });
// const SortableRow = SortableElement(props => (
// <Fragment>{defaultTableRowRenderer(props)}</Fragment>
// ));
// const rowRenderer = props => {
// const { index } = props;
// return isRowSortable(index) ? (
// <SortableRow {...props} />
// ) : (
// defaultTableRowRenderer(props)
// );
// };
// const reorderRow = ({ newIndex, oldIndex, collection, isKeySorting }) => {
// if (newIndex === oldIndex) {
// return;
// }
// if (props.onReorder) props.onReorder(newIndex, oldIndex);
// };
var _cellRenderer = function _cellRenderer(_ref3) {var columnIndex = _ref3.columnIndex,key = _ref3.key,rowIndex = _ref3.rowIndex,style = _ref3.style;
if (rowIndex === 0) {
if (!hideHeader) {
return _cellRendererHeaders({ columnIndex: columnIndex, key: key, rowIndex: rowIndex, style: style });
}
return null;
} else
{
if (rowIndex > 1 &&
data[rowIndex - 1]._expandData &&
!isRowExpanded(rowIndex - 2)) {
return null;
}
return _cellRendererBody({ columnIndex: columnIndex, key: key, rowIndex: rowIndex, style: style });
}
};
var _cellRendererHeaders = function _cellRendererHeaders(_ref4) {var columnIndex = _ref4.columnIndex,key = _ref4.key,rowIndex = _ref4.rowIndex,style = _ref4.style;
var columnProps = columnList[columnIndex];var
Header = columnProps.Header,otherColProps = _objectWithoutProperties(columnProps, ["Header"]);
return /*#__PURE__*/React.createElement("div", { className: "FixedGridCell", key: key, style: style }, /*#__PURE__*/
React.createElement(TableHeader, _extends({ Header: Header, height: headerHeight }, otherColProps)));
};
var _cellRendererBody = function _cellRendererBody(_ref5) {var columnIndex = _ref5.columnIndex,key = _ref5.key,rowIndex = _ref5.rowIndex,style = _ref5.style,rest = _objectWithoutProperties(_ref5, ["columnIndex", "key", "rowIndex", "style"]);
var dataIndex = rowIndex - 1;
var columnProps = columnList[columnIndex];var
Cell = columnProps.Cell,otherColProps = _objectWithoutProperties(columnProps, ["Cell"]);
var cellProps = {
rowData: data[dataIndex],
columnIndex: columnIndex,
rowIndex: dataIndex
};
if (data[dataIndex]._expandData) {
var expandedColumnIndex = columnList.findIndex(function (x) {return x.dataKey && x.dataKey === "__expanded__";});
if (isRowExpanded(dataIndex - 1) && expandedColumnIndex === columnIndex) {
return /*#__PURE__*/React.createElement("div", { className: "FixedGridCell FixedGridCell_inner-row", key: key, style: _extends({}, style, { width: "100%", left: 0 }) }, /*#__PURE__*/
React.createElement(TableCell, _extends({ Cell: Cell }, cellProps, otherColProps, { alignment: "left" })));
}
return null;
}
return /*#__PURE__*/React.createElement("div", { className: "FixedGridCell", key: key, style: style }, /*#__PURE__*/
React.createElement(TableCell, _extends({ Cell: Cell, height: rowHeight }, cellProps, otherColProps)));
};
var _columnWidth = function _columnWidth(_ref6) {var index = _ref6.index;
var width = autoColumnWidth;
if (columnList[index] && !isNaN(columnList[index].width)) {
width = columnList[index].width;
}
var minWidth = _columnMinWidth({ index: index });
var maxWidth = _columnMaxWidth({ index: index });
if (minWidth && width < minWidth) {
width = minWidth;
}
if (maxWidth && width > maxWidth) {
width = maxWidth;
}
return width;
};
var _columnMinWidth = function _columnMinWidth(_ref7) {var index = _ref7.index;
if (columnList[index] && !isNaN(columnList[index].minWidth)) {
return columnList[index].minWidth;
}
return undefined;
};
var _columnMaxWidth = function _columnMaxWidth(_ref8) {var index = _ref8.index;
if (columnList[index] && !isNaN(columnList[index].maxWidth)) {
return columnList[index].maxWidth;
}
return undefined;
};
var _rowHeight = React.useMemo(function () {return function (_ref9) {var index = _ref9.index;
if (index === 0) {
return hideHeader ? 0 : headerHeight;
}
index = index - 1;
if (index < data.length) {
if (data[index]._expandData && !isRowExpanded(index - 1)) {
return 0;
}
if (data[index]._expandData && isRowExpanded(index - 1)) {var _data$index$_expandDa =
data[index]._expandData,_data$index$_expandDa2 = _data$index$_expandDa.oneRowHeight,oneRowHeight = _data$index$_expandDa2 === void 0 ? 72 : _data$index$_expandDa2,_data$index$_expandDa3 = _data$index$_expandDa.rowHeight,innerRowHeight = _data$index$_expandDa3 === void 0 ? 72 : _data$index$_expandDa3,_data$index$_expandDa4 = _data$index$_expandDa.data,innerTableData = _data$index$_expandDa4 === void 0 ? [] : _data$index$_expandDa4;
if (innerRowHeight) {
return innerRowHeight;
}
if (oneRowHeight && innerTableData.length) {
return oneRowHeight * innerTableData.length;
}
}
return rowHeight;
}
return 0;
};}, [expandedIndexes, data]);
var rebuildTable = function rebuildTable() {var _autoSizer2;var d = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};var
width = d.width;
if (!width && _autoSizer && (_autoSizer2 = _autoSizer) !== null && _autoSizer2 !== void 0 && _autoSizer2.state) {
width = _autoSizer.state.width;
}
if (columnList.length) {
var busySpace = 0;
var columnCount = 0;
columnList.forEach(function (column) {
if (column !== null && column !== void 0 && column.width || column !== null && column !== void 0 && column.maxWidth) {
busySpace += (column === null || column === void 0 ? void 0 : column.maxWidth) || (column === null || column === void 0 ? void 0 : column.width);
columnCount += 1;
}
});
var correctColumnCount = columnList.length - columnCount - (props.expandable ? 1 : 0);
var columnWidth = correctColumnCount ?
(width - busySpace) / correctColumnCount :
0;
if (columnWidth && columnWidth !== autoColumnWidth) {
setAutoColumnWidth(columnWidth < 80 ? 80 : columnWidth);
}
}
if (_multiGrid) {
_multiGrid.current.recomputeGridSize();
_multiGrid.current.forceUpdate();
}
};
var _onSectionRendered = function _onSectionRendered(_ref10) {var rowStopIndex = _ref10.rowStopIndex;
if (data && data.length && rowStopIndex >= data.length - 1) {
onLastRowScrolledHandler(data.length);
}
};
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/
React.createElement(InfiniteLoader, { isRowLoaded: function isRowLoaded(_ref11) {var index = _ref11.index;
if (data && data.length && index >= data.length) {
onLastRowScrolledHandler(data.length);
}
return !!data[index];
}, loadMoreRows: function loadMoreRows() {}, rowCount: 10000, style: { height: "100%" } }, function (_ref12) {var onRowsRendered = _ref12.onRowsRendered,registerChild = _ref12.registerChild;return /*#__PURE__*/React.createElement(GridWrapper, { disableHeight: !autoHeight, onResize: rebuildTable, ref: function ref(_ref13) {return _autoSizer = _ref13;}, customStyle: props.customStyle }, function (_ref14) {var width = _ref14.width,autosizeHeight = _ref14.height;return /*#__PURE__*/React.createElement(MultiGrid, { width: width, height: autoHeight ? autosizeHeight : height, noContentRenderer: function noContentRenderer() {return /*#__PURE__*/React.createElement(EmptyTable, null);}, cellRenderer: _cellRenderer, columnWidth: _columnWidth, columnCount: columnList.length, fixedRowCount: hideHeader ? 0 : 1, fixedColumnCount: 0, overscanRowCount: 10,
// ref={ref => {_multiGrid = ref}}
ref: _multiGrid, rowHeight: _rowHeight, rowCount: data.length + 1, onSectionRendered: _onSectionRendered });});}), /*#__PURE__*/
React.createElement(InPlaceModal, { open: props.showLoader, onClose: function onClose(val) {}, modalHeight: height > 500 ? 500 : height }, /*#__PURE__*/
React.createElement(VTLoaderContainer, null, /*#__PURE__*/
React.createElement(Loader, { show: true, color: "primary" }))));
};
export default Component;
//# sourceMappingURL=Spreadsheet.js.map