@etsoo/materialui
Version:
TypeScript Material-UI Implementation
88 lines (87 loc) • 4.29 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import CloseIcon from "@mui/icons-material/Close";
import NavigateNextIcon from "@mui/icons-material/NavigateNext";
import NavigateBeforeIcon from "@mui/icons-material/NavigateBefore";
import CheckIcon from "@mui/icons-material/Check";
import StartIcon from "@mui/icons-material/Start";
import React from "react";
import { HBox } from "./FlexBox";
import { MUGlobal } from "./MUGlobal";
import { useRequiredAppContext } from "./app/ReactApp";
import Button from "@mui/material/Button";
import TextField from "@mui/material/TextField";
import InputAdornment from "@mui/material/InputAdornment";
import IconButton from "@mui/material/IconButton";
/**
* Data collecting steps component
* @param props Props
* @returns Component
*/
export function DataSteps(props) {
// Global app
const app = useRequiredAppContext();
// Labels
const labels = app.getLabels("close", "nextStep", "previousStep", "submit");
// Destruct
const { InputLabelProps = {}, jsonValue, valueFormatter = (_data) => "...", onValueChange, steps, value = "", ...rest } = props;
// Shrink
InputLabelProps.shrink ??= MUGlobal.searchFieldShrink;
// Current index
const indexRef = React.useRef(-1);
// Current Json data
const jsonRef = React.useRef(jsonValue);
// Ignore empty value case
if (jsonValue !== jsonRef.current && valueFormatter(jsonValue))
jsonRef.current = jsonValue;
// Current value
const [localValue, setLocalValue] = React.useState(value);
// Get step
const showStep = (index) => {
indexRef.current = index;
const [{ callback, ...rest }, more] = steps(index, jsonRef.current);
app.showInputDialog({
...rest,
buttons: (n, callback) => (_jsxs(HBox, { paddingLeft: 2, paddingRight: 2, paddingBottom: 2, gap: 2, justifyContent: "space-between", children: [index === 0 ? (_jsx(Button, { variant: "outlined", startIcon: _jsx(CloseIcon, {}), onClick: () => n.dismiss(), children: labels.close })) : (_jsx(Button, { variant: "outlined", startIcon: _jsx(NavigateBeforeIcon, {}), onClick: () => {
n.dismiss();
showStep(indexRef.current - 1);
}, children: labels.previousStep })), more ? (_jsx(Button, { variant: "contained", startIcon: _jsx(NavigateNextIcon, {}), onClick: async (event) => {
const result = await callback(event);
if (!result)
return;
showStep(indexRef.current + 1);
}, children: labels.nextStep })) : (_jsx(Button, { variant: "contained", startIcon: _jsx(CheckIcon, {}), onClick: async (event) => {
const result = await callback(event);
if (!result)
return;
const value = jsonRef.current;
setLocalValue(valueFormatter(value));
if (onValueChange)
onValueChange(value);
}, children: labels.submit }))] })),
callback: (form) => {
if (form == null)
return;
const result = callback(form);
if (result !== true) {
return false;
}
}
});
};
const cancelInput = (event) => {
event.stopPropagation();
event.preventDefault();
};
React.useEffect(() => {
setLocalValue(valueFormatter(jsonRef.current));
}, [valueFormatter]);
return (_jsx(TextField, { autoComplete: "off", InputLabelProps: InputLabelProps, inputProps: { style: { cursor: "pointer" } }, InputProps: {
onKeyDown: (event) => {
if (event.key === "Tab")
return;
cancelInput(event);
},
onPaste: cancelInput,
endAdornment: (_jsx(InputAdornment, { position: "end", children: _jsx(IconButton, { edge: "end", size: "small", children: _jsx(StartIcon, {}) }) }))
}, onClick: () => showStep(0), value: localValue, ...rest }));
}