aling
Version:
奇怪的组件库
45 lines (44 loc) • 2.69 kB
JavaScript
import { alpha, Box } from "@mui/material";
import React, { useEffect, useState } from "react";
const TablePicker = ({ maxRow = 10, maxColumn = 10, onChange, value, clearOnLoseFocus, footer, header, onLoseFoucs }) => {
var _a, _b;
const cellitems = Array.from({ length: maxColumn * maxRow });
const [activedCell, setActivedCell] = useState();
useEffect(() => {
setActivedCell(value);
}, [value, setActivedCell]);
return (React.createElement(Box, { className: "table-picker-root", onMouseLeave: () => {
clearOnLoseFocus && setActivedCell(undefined);
onLoseFoucs && (onLoseFoucs === null || onLoseFoucs === void 0 ? void 0 : onLoseFoucs(activedCell));
}, sx: { p: 2, backgroundColor: "white", borderRadius: 2 } },
header !== undefined ? header : React.createElement(Box, { sx: { fontWeight: 600, pb: 1, fontSize: "0.9em" } }, !activedCell ? "插入表格" : `${(_a = activedCell === null || activedCell === void 0 ? void 0 : activedCell[0]) !== null && _a !== void 0 ? _a : 0}x${(_b = activedCell === null || activedCell === void 0 ? void 0 : activedCell[1]) !== null && _b !== void 0 ? _b : 0} 表格`),
React.createElement(Box, { sx: {
aspectRatio: 1 / 1,
display: "grid",
gridTemplateColumns: "repeat(10,1fr)",
gridTemplateRows: "repeat(10,1fr)",
gap: "4px",
alignItems: "center",
} }, cellitems === null || cellitems === void 0 ? void 0 : cellitems.map((item, index) => {
++index;
const [x, y] = [Math.ceil(index / maxColumn), index % maxColumn || 10];
const inRange = x <= ((activedCell === null || activedCell === void 0 ? void 0 : activedCell[0]) || 0) && y <= ((activedCell === null || activedCell === void 0 ? void 0 : activedCell[1]) || 0);
return (React.createElement(Box, { key: index, onMouseEnter: () => {
setActivedCell([x, y]);
}, onClick: () => {
onChange && onChange([x, y]);
}, sx: {
p: 0.5,
cursor: "pointer",
borderRadius: 0.5,
height: "100%",
boxSizing: "border-box",
border: "1px solid white",
borderColor: inRange ? (theme) => theme.palette.primary.main : "#e2e6ed",
backgroundColor: inRange ? (theme) => alpha(theme.palette.primary.main, 0.3) : undefined,
color: inRange ? "red" : undefined,
} }));
})),
footer));
};
export default TablePicker;