@etsoo/materialui
Version:
TypeScript Material-UI Implementation
117 lines (116 loc) • 5.21 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.ScrollerListExItemDefaultStyles = void 0;
exports.ScrollerListEx = ScrollerListEx;
const jsx_runtime_1 = require("react/jsx-runtime");
const css_1 = require("@emotion/css");
const react_1 = require("@etsoo/react");
const shared_1 = require("@etsoo/shared");
const react_2 = __importDefault(require("react"));
const GridUtils_1 = require("./GridUtils");
const useListCacheInitLoad_1 = require("./uses/useListCacheInitLoad");
const Box_1 = __importDefault(require("@mui/material/Box"));
// Scroll bar size
const scrollbarSize = 16;
// Selected class name
const selectedClassName = "ScrollerListEx-Selected";
const createGridStyle = (alternatingColors, selectedColor) => {
return (0, css_1.css)({
"& .ScrollerListEx-Selected": {
backgroundColor: selectedColor
},
"& .ScrollerListEx-Row0:not(.ScrollerListEx-Selected)": {
backgroundColor: alternatingColors[0]
},
"& .ScrollerListEx-Row1:not(.ScrollerListEx-Selected)": {
backgroundColor: alternatingColors[1]
},
"@media (min-width: 800px)": {
"::-webkit-scrollbar": {
width: scrollbarSize,
height: scrollbarSize,
backgroundColor: "#f6f6f6"
},
"::-webkit-scrollbar-thumb": {
backgroundColor: "rgba(0,0,0,0.4)",
borderRadius: "2px"
},
"::-webkit-scrollbar-track-piece:start": {
background: "transparent"
},
"::-webkit-scrollbar-track-piece:end": {
background: "transparent"
}
}
});
};
/**
* Default styles for item renderer
*/
exports.ScrollerListExItemDefaultStyles = {
height: `calc(100% - 16px)`,
/**
* default rowHeight is 150px when 16px margin top/bottom
*/
marginTop: "8px",
marginBottom: "8px",
overflow: "auto"
};
/**
* Extended ScrollerList
* @param props Props
* @returns Component
*/
function ScrollerListEx(props) {
// Selected item ref
const selectedItem = react_2.default.useRef(null);
const onMouseDown = (div, data) => {
// Destruct
const [selectedDiv, selectedData] = selectedItem.current ?? [];
if (selectedData != null && selectedData[idField] === data[idField])
return;
selectedDiv?.classList.remove(selectedClassName);
div.classList.add(selectedClassName);
selectedItem.current = [div, data];
if (onSelectChange)
onSelectChange([data]);
};
const isSelected = (data) => {
const [_, selectedData] = selectedItem.current ?? [];
const selected = selectedData && data && selectedData[idField] === data[idField]
? true
: false;
return selected;
};
// Destruct
const { alternatingColors = [undefined, undefined], className, cacheKey, cacheMinutes = 15, idField = "id", itemRenderer = ({ data }) => ((0, jsx_runtime_1.jsx)(Box_1.default, { component: "pre", sx: exports.ScrollerListExItemDefaultStyles, children: JSON.stringify(data) })), onClick, onDoubleClick, onUpdateRows, onSelectChange, rowHeight = 150, selectedColor = "#edf4fb", ...rest } = props;
// Init handler
const initHandler = (0, useListCacheInitLoad_1.useListCacheInitLoad)(cacheKey, cacheMinutes);
const onUpdateRowsHandler = react_2.default.useCallback((rows, state, reset) => {
GridUtils_1.GridUtils.getUpdateRowsHandler(cacheKey)?.(rows, state);
onUpdateRows?.(rows, state, reset);
if (cacheKey && reset) {
sessionStorage.removeItem((0, useListCacheInitLoad_1.listCacheKeyGenerator)(cacheKey));
}
}, [onUpdateRows, cacheKey]);
// Layout
return ((0, jsx_runtime_1.jsx)(react_1.ScrollerList, { className: shared_1.Utils.mergeClasses("ScrollerListEx-Body", className, createGridStyle(alternatingColors, selectedColor)), idField: idField, onRowsRendered: cacheKey
? (visibleRows) => sessionStorage.setItem((0, useListCacheInitLoad_1.listCacheKeyGenerator)(cacheKey), JSON.stringify(visibleRows))
: undefined, onInitLoad: initHandler, onUpdateRows: onUpdateRowsHandler, rowComponent: (cellProps) => {
const { index, style, items } = cellProps;
const data = items[index];
const selected = isSelected(data);
const rowClass = `ScrollerListEx-Row${index % 2}${selected ? ` ${selectedClassName}` : ""}`;
// Child
const child = itemRenderer({
index,
data,
style,
selected
});
return ((0, jsx_runtime_1.jsx)("div", { className: rowClass, style: style, onMouseDown: (event) => onMouseDown(event.currentTarget, data), onClick: (event) => onClick && onClick(event, data), onDoubleClick: (event) => onDoubleClick && onDoubleClick(event, data), children: child }));
}, rowHeight: rowHeight, ...rest }));
}