@makeen.io/material-ui-kit
Version:
Makeen UI components kit. Based on material-ui.
425 lines (324 loc) • 18.7 kB
JavaScript
import _regeneratorRuntime from "@babel/runtime/regenerator";import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";import _defineProperty from "@babel/runtime/helpers/defineProperty";import _slicedToArray from "@babel/runtime/helpers/slicedToArray";import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";import _extends from "@babel/runtime/helpers/extends";import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";function _templateObject4() {var data = _taggedTemplateLiteral(["\n ", "\n "]);_templateObject4 = function _templateObject4() {return data;};return data;}function _templateObject3() {var data = _taggedTemplateLiteral(["\n height: 100%;\n .ReactVirtualized__Grid.ReactVirtualized__Table__Grid {\n outline: none;\n }\n\n .virtualized-table__row {\n display: flex;\n align-items: center;\n box-sizing: border-box;\n outline: none;\n padding-right: 0 !important;\n\n .virtualized-table__inner-column_expanded {\n display: none;\n\n & > .MuiTableCell-root.MuiTableCell-body {\n padding: 0 !important;\n }\n }\n\n &_inner {\n background: #f7f9fc;\n\n .ReactVirtualized__Table__row {\n height: 100%;\n border-bottom: 1px solid #f2f3f8;\n }\n\n .MuiTableCell-root {\n border: none;\n }\n\n .virtualized-table__column {\n display: none;\n height: 100%;\n }\n\n .virtualized-table__inner-column_expanded {\n display: block;\n flex: 0 0 100% !important;\n height: 100%;\n\n .MuiTableCell-root {\n width: 100%;\n height: 100% !important;\n\n .explorer-table {\n max-height: 100%;\n }\n }\n }\n }\n\n & .ReactVirtualized__Table__headerColumn {\n outline: none;\n }\n\n &.disabled {\n .virtualized-table__column {\n opacity: 0.25;\n\n &_action {\n opacity: 1;\n }\n }\n }\n }\n\n .virtualized-table__inner-column_expanded {\n .virtualized-table__column {\n display: block;\n }\n }\n\n ", "\n"]);_templateObject3 = function _templateObject3() {return data;};return data;}function _templateObject2() {var data = _taggedTemplateLiteral(["\n padding: 16px 0;\n display: flex;\n justify-content: center;\n align-items: center;\n color: ", ";\n cursor: move;\n & .MuiSvgIcon-root {\n width: 30px;\n height: 30px;\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;}import React, { useEffect, useState } from "react";
import IconButton from "@material-ui/core/IconButton";
import DragHandleIcon from "@material-ui/icons/DragHandle";
import MoreVertIcon from "@material-ui/icons/MoreVert";
import { Checkbox, FabButton, Menu } from "../../../atoms";
import _ from "lodash";
import includes from "lodash/includes";
import map from "lodash/map";
import ReactDOM from "react-dom";
import { SortableContainer, SortableElement } from "react-sortable-hoc";
import { AutoSizer, Column, InfiniteLoader, Table, defaultTableRowRenderer } from "react-virtualized";
import styled, { css } from "styled-components";
import TableCell from "./Cell";
import EmptyTable from "./EmptyTable";
import TableHeader from "./Header";
import { Loader } from "../../../atoms";
import InPlaceModal from "../../InPlaceModal";
var VTLoaderContainer = styled.div(_templateObject());
var defaultProps = {
headerHeight: 48,
height: 700,
rowHeight: 72,
width: 800
};
var Reorder = styled.div(_templateObject2(),
function (props) {return props.theme.palette.tertiary.border;});
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 Component = function Component(_ref2) {var data = _ref2.data,className = _ref2.className,checkedRows = _ref2.checkedRows,hideHeader = _ref2.hideHeader,props = _objectWithoutProperties(_ref2, ["data", "className", "checkedRows", "hideHeader"]);
// const { data, className, checkedRows, hideHeader } = props;
var defaultHeight = defaultProps.height,defaultWidth = defaultProps.width;
var width = props.width || defaultWidth;
var height = props.height || defaultHeight;
var rowHeight = props.rowHeight || defaultProps.rowHeight;
var headerHeight = props.headerHeight || defaultProps.headerHeight;
var columns = _toConsumableArray(props.columns);
var columnCount = props.columns.length;
if (props.columns.find(function (x) {return x.dataKey === "__expanded__";})) {
columnCount -= 1;
}
var columnWidth = width / columnCount;var _useState =
useState([]),_useState2 = _slicedToArray(_useState, 2),checkableData = _useState2[0],setCheckableData = _useState2[1];var _useState3 =
useState([]),_useState4 = _slicedToArray(_useState3, 2),expandableData = _useState4[0],setExpandableData = _useState4[1];var _useState5 =
useState({
by: props.sortBy,
direction: props.sortDirection
}),_useState6 = _slicedToArray(_useState5, 2),sortState = _useState6[0],setSortState = _useState6[1];
var SortableTable = SortableContainer(Table, {
withRef: true
});
var SortableRow = SortableElement(function (p) {return /*#__PURE__*/React.createElement(React.Fragment, null, defaultTableRowRenderer(p));});
useEffect(function () {
if (typeof props.isRowCheckable === "function") {
var checkableDataArr = [];
data.forEach(function (currentData, index) {
if (props.isRowCheckable(currentData)) {
checkableDataArr.push(index);
}
});
setCheckableData(checkableDataArr);
} else
{
if (props.expandable) {
setCheckableData(data.map(function (val, index) {return index;}));
} else
{
setCheckableData(data.map(function (val, index) {return index;}));
}
}
if (typeof props.isRowExpandable === "function") {
var expandableDataArr = [];
data.forEach(function (currentData, index) {
if (props.isRowExpandable(currentData)) {
expandableDataArr.push(index);
}
});
setExpandableData(expandableDataArr);
} else
{
if (props.expandable) {
setExpandableData(data.map(function (val, index) {return index;}));
} else
{
setExpandableData(data.map(function (val, index) {return index;}));
}
}
}, [data]);
var isRowCheckable = function isRowCheckable(rowIndex) {
return checkableData.includes(rowIndex);
};
var isRowExpandable = function isRowExpandable(rowIndex) {
return expandableData.includes(rowIndex);
};
var setAllRowsSelected = function setAllRowsSelected(_ref3) {var checked = _ref3.target.checked;
var result = [];
if (checked) {
data.forEach(function (d, index) {
if (isRowCheckable(index)) {
result.push(index);
}
});
}
if (props.onCheckAll) {
props.onCheckAll(result);
}
};
var loadMoreRows = function loadMoreRows() {
/**/};
var setRowSelectedById = function setRowSelectedById(_ref4, index) {var checked = _ref4.target.checked;
var result = _toConsumableArray(checkedRows);
if (isRowCheckable(index)) {
if (checked) {
result.push(index);
} else
{
result.splice(result.indexOf(index), 1);
}
if (props.onCheckItem) {
props.onCheckItem(index, result);
}
}
};
if (props.reorderable) {var _columns$unshift;
var w = 80;
var header = typeof props.reorderHeader === "string" ? "label" : "Header";
columns.unshift((_columns$unshift = {
Cell: function Cell() {return /*#__PURE__*/React.createElement(Reorder, null, /*#__PURE__*/
React.createElement(DragHandleIcon, null));},
alignment: "center",
dataKey: "__reorder__",
disableSort: true }, _defineProperty(_columns$unshift,
header, props.reorderHeader), _defineProperty(_columns$unshift, "width",
w), _columns$unshift));
}
var toggleCollapsible = function toggleCollapsible(event, index, rowData) {
if (!rowData._expandData) {
props.onToggleCollapsible(index, rowData);
}
};
var isRowChecked = function isRowChecked(index) {
return isRowCheckable(index) && includes(checkedRows, index);
};
_.forEach(columns, function (_ref5) {var w = _ref5.width;
if (_.isNumber(width)) {
var adjustmentWidth = columnWidth - w;
if (adjustmentWidth) {
columnCount -= 1;
}
columnWidth = columnWidth + adjustmentWidth / columnCount;
}
});
if (props.checkable) {
var _w = props.checkableColumnWidth || 52;
columns.unshift({
Cell: function Cell(item) {
var itemStyle = { padding: "16px 0" };
var correctIndex = item.rowIndex;
if (props.hideNonCheckables) {
if (props.expandable) {
correctIndex = data.indexOf(item.rowData);
}
if (!isRowCheckable(correctIndex)) {
itemStyle.display = "none";
}
}
return /*#__PURE__*/React.createElement(Checkbox, { checked: isRowChecked(correctIndex), onChange: function onChange(e) {return setRowSelectedById(e, correctIndex);}, style: itemStyle });
},
Header: function Header() {
var itemStyle = { padding: "16px 0" };
if (props.hideNonCheckables) {
if (checkableData.length === 0) {
itemStyle.display = "none";
}
}
return /*#__PURE__*/React.createElement(Checkbox, { checked: checkedRows.length === checkableData.length &&
checkedRows.length > 0, onChange: setAllRowsSelected, style: itemStyle });
},
alignment: "left",
className: "virtualized-table__column_action",
dataKey: "__checkbox__",
disableSort: true,
width: _w
});
columnWidth = columnWidth - _w / columnCount;
}
if (props.expandable) {
var _w2 = props.expandableColumnWidth || 90;
columns.push({
Cell: function Cell(item) {
var itemStyle = {};
if (item.rowData._expandData) {
itemStyle.display = "none";
}
var correctIndex = item.rowIndex;
if (props.hideNonExpandable) {
if (props.expandable) {
correctIndex = data.indexOf(item.rowData);
}
if (!isRowExpandable(correctIndex)) {
itemStyle.display = "none";
}
}
return /*#__PURE__*/React.createElement(FabButton, { size: "small", style: itemStyle, palette: "fabArrowDark", expanded: item.rowData._expanded, handleClick: function handleClick(e) {return toggleCollapsible(e, item.rowIndex, item.rowData);} });
},
Header: function Header() {return null;},
alignment: "left",
className: "virtualized-table__column_action",
dataKey: "__expand__",
width: _w2
});
columnWidth = columnWidth - _w2 / columnCount;
}
if (props.itemActions && props.itemActions.length ||
props.customItemActions) {
var _w3 = props.customizableColumnWidth || 80;
columns.push({
Cell: function Cell(cell) {return /*#__PURE__*/React.createElement(Actions, _extends({ customItemActions: props.customItemActions, itemActions: props.itemActions }, cell));},
alignment: "left",
className: "virtualized-table__column_action",
dataKey: "__actions__",
disableSort: true,
label: "",
style: { padding: "16 0" },
width: _w3
});
columnWidth = columnWidth - _w3 / columnCount;
}
var _visibleItems = function _visibleItems() {
return data.filter(function (item) {
if (!item._expandData) {
return true;
}
var index = data.findIndex(function (x) {return x === item;});
if (index > 0) {
return data[index - 1]._expanded;
}
return false;
});
};
var _customClassForRow = function _customClassForRow(index) {
var cName = "virtualized-table__row ";
if ((data[index] || {}).disabled) {
cName += "disabled ";
}
if (props.expandable) {
var visibleData = _visibleItems();
if (visibleData[index] && visibleData[index]._expandData) {
cName += "virtualized-table__row_inner ";
}
}
return cName;
};
var isRowSortable = function isRowSortable(index) {
return index >= 0; // Header row should not be draggable
};
var rowRenderer = function rowRenderer(p) {var
index = p.index;
return isRowSortable(index) ? /*#__PURE__*/React.createElement(SortableRow, _extends({}, p)) : defaultTableRowRenderer(p);
};
var reorderRow = function reorderRow(_ref6) {var newIndex = _ref6.newIndex,oldIndex = _ref6.oldIndex,collection = _ref6.collection,isKeySorting = _ref6.isKeySorting;
if (newIndex === oldIndex) {
return;
}
if (props.onReorder) {
props.onReorder(newIndex, oldIndex);
}
};
var getRowHeight = function getRowHeight(index) {
if (_visibleItems()[index] && _visibleItems()[index]._expandData) {
return _visibleItems()[index]._expandData.rowHeight ?
_visibleItems()[index]._expandData.rowHeight :
300;
}
return rowHeight;
};
return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/
React.createElement(InfiniteLoader, { isRowLoaded: function isRowLoaded(_ref7) {var index = _ref7.index;return !!data[index];}, loadMoreRows: loadMoreRows, rowCount: 10000 }, function (_ref8) {var onRowsRendered = _ref8.onRowsRendered,registerChild = _ref8.registerChild;return /*#__PURE__*/React.createElement(AutoSizer, { disableHeight: true, disableWidth: true }, function () {return /*#__PURE__*/React.createElement(SortableTable, { getContainer: function getContainer(wrappedInstance) {return ReactDOM.findDOMNode(wrappedInstance.Grid);}, rowHeight: function rowHeight(_ref9) {var index = _ref9.index;
return getRowHeight(index);
}, headerHeight: hideHeader ? 0 : headerHeight, width: width, noRowsRenderer: function noRowsRenderer() {return /*#__PURE__*/React.createElement(EmptyTable, null);}, height: height, className: className, rowCount: props.expandable ? _visibleItems().length : data.length, ref: registerChild, rowGetter: function rowGetter(_ref10) {var index = _ref10.index;return props.expandable ? _visibleItems()[index] : data[index];}, rowRenderer: rowRenderer, onRowsRendered: onRowsRendered, onSortEnd: reorderRow, useDragHandle: true, helperClass: "table-reorder-helper", rowClassName: function rowClassName(_ref11) {var index = _ref11.index;return _customClassForRow(index);}, onRowClick: function onRowClick() {
/* */}, overscanRowCount: 2, sort: function () {var _sort = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(_ref12) {var defaultSortDirection, event, sortBy, sortDirection;return _regeneratorRuntime.wrap(function _callee$(_context) {while (1) {switch (_context.prev = _context.next) {case 0:defaultSortDirection = _ref12.defaultSortDirection, event = _ref12.event, sortBy = _ref12.sortBy, sortDirection = _ref12.sortDirection;if (!
props.sort) {_context.next = 5;break;}_context.next = 4;return (
props.sort({
defaultSortDirection: defaultSortDirection,
event: event,
sortBy: sortBy,
sortDirection: sortDirection
}));case 4:
setSortState({ by: sortBy, direction: sortDirection });case 5:case "end":return _context.stop();}}}, _callee);}));function sort(_x) {return _sort.apply(this, arguments);}return sort;}(),
sortBy: sortState.by, sortDirection: sortState.direction }, columns.map(function (columnProps, index) {return /*#__PURE__*/React.createElement(Column, _extends({}, columnProps, { width: !isNaN(columnProps.width) ?
columnProps.width :
columnWidth, key: columnProps.dataKey, dataKey: columnProps.dataKey, className: "virtualized-table__column ".concat(columnProps.className ? columnProps.className : ""), headerRenderer: function headerRenderer(headerProps) {var
Header = columnProps.Header,otherColProps = _objectWithoutProperties(columnProps, ["Header"]);
var customStyle = "";
if (otherColProps.dataKey &&
otherColProps.dataKey === "__expanded__") {
customStyle = "\n display: none;\n .MuiTableCell-head {\n padding: 0 !important;\n }\n ";
}
return /*#__PURE__*/React.createElement(TableHeader, _extends({ Header: Header, height: headerHeight, customStyle: customStyle, sortable: props.sort && !otherColProps.disableSort }, headerProps, otherColProps));
}, cellRenderer: function cellRenderer(cellProps) {var
Cell = columnProps.Cell,otherColProps = _objectWithoutProperties(columnProps, ["Cell"]);
return /*#__PURE__*/React.createElement(TableCell, _extends({ Cell: Cell, height: rowHeight }, cellProps, otherColProps));
} }));}));});}), /*#__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" }))));
};
var VirtualizedTable = styled(Component)(_templateObject3(),
function (props) {
var customStyle = props.customStyle || "";
return css(_templateObject4(),
customStyle);
});
export default VirtualizedTable;
//# sourceMappingURL=VirtualizedTable.js.map