@etsoo/materialui
Version:
TypeScript Material-UI Implementation
94 lines (93 loc) • 5.15 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.DataSteps = DataSteps;
const jsx_runtime_1 = require("react/jsx-runtime");
const Close_1 = __importDefault(require("@mui/icons-material/Close"));
const NavigateNext_1 = __importDefault(require("@mui/icons-material/NavigateNext"));
const NavigateBefore_1 = __importDefault(require("@mui/icons-material/NavigateBefore"));
const Check_1 = __importDefault(require("@mui/icons-material/Check"));
const Start_1 = __importDefault(require("@mui/icons-material/Start"));
const react_1 = __importDefault(require("react"));
const FlexBox_1 = require("./FlexBox");
const MUGlobal_1 = require("./MUGlobal");
const ReactApp_1 = require("./app/ReactApp");
const Button_1 = __importDefault(require("@mui/material/Button"));
const TextField_1 = __importDefault(require("@mui/material/TextField"));
const InputAdornment_1 = __importDefault(require("@mui/material/InputAdornment"));
const IconButton_1 = __importDefault(require("@mui/material/IconButton"));
/**
* Data collecting steps component
* @param props Props
* @returns Component
*/
function DataSteps(props) {
// Global app
const app = (0, ReactApp_1.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_1.MUGlobal.searchFieldShrink;
// Current index
const indexRef = react_1.default.useRef(-1);
// Current Json data
const jsonRef = react_1.default.useRef(jsonValue);
// Ignore empty value case
if (jsonValue !== jsonRef.current && valueFormatter(jsonValue))
jsonRef.current = jsonValue;
// Current value
const [localValue, setLocalValue] = react_1.default.useState(value);
// Get step
const showStep = (index) => {
indexRef.current = index;
const [{ callback, ...rest }, more] = steps(index, jsonRef.current);
app.showInputDialog({
...rest,
buttons: (n, callback) => ((0, jsx_runtime_1.jsxs)(FlexBox_1.HBox, { paddingLeft: 2, paddingRight: 2, paddingBottom: 2, gap: 2, justifyContent: "space-between", children: [index === 0 ? ((0, jsx_runtime_1.jsx)(Button_1.default, { variant: "outlined", startIcon: (0, jsx_runtime_1.jsx)(Close_1.default, {}), onClick: () => n.dismiss(), children: labels.close })) : ((0, jsx_runtime_1.jsx)(Button_1.default, { variant: "outlined", startIcon: (0, jsx_runtime_1.jsx)(NavigateBefore_1.default, {}), onClick: () => {
n.dismiss();
showStep(indexRef.current - 1);
}, children: labels.previousStep })), more ? ((0, jsx_runtime_1.jsx)(Button_1.default, { variant: "contained", startIcon: (0, jsx_runtime_1.jsx)(NavigateNext_1.default, {}), onClick: async (event) => {
const result = await callback(event);
if (!result)
return;
showStep(indexRef.current + 1);
}, children: labels.nextStep })) : ((0, jsx_runtime_1.jsx)(Button_1.default, { variant: "contained", startIcon: (0, jsx_runtime_1.jsx)(Check_1.default, {}), 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_1.default.useEffect(() => {
setLocalValue(valueFormatter(jsonRef.current));
}, [valueFormatter]);
return ((0, jsx_runtime_1.jsx)(TextField_1.default, { autoComplete: "off", InputLabelProps: InputLabelProps, inputProps: { style: { cursor: "pointer" } }, InputProps: {
onKeyDown: (event) => {
if (event.key === "Tab")
return;
cancelInput(event);
},
onPaste: cancelInput,
endAdornment: ((0, jsx_runtime_1.jsx)(InputAdornment_1.default, { position: "end", children: (0, jsx_runtime_1.jsx)(IconButton_1.default, { edge: "end", size: "small", children: (0, jsx_runtime_1.jsx)(Start_1.default, {}) }) }))
}, onClick: () => showStep(0), value: localValue, ...rest }));
}