@etsoo/materialui
Version:
TypeScript Material-UI Implementation
44 lines (43 loc) • 1.58 kB
JavaScript
import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
import { DateUtils } from "@etsoo/shared";
import React from "react";
import { InputField } from "../InputField";
import Typography from "@mui/material/Typography";
/**
* Date input field creator
* type: date
* @returns Component
*/
export const FieldDateInput = ({ field, mref, onChange, defaultValue }) => {
// Ref
const inputRef = React.useRef();
const getValue = () => inputRef.current == null
? undefined
: DateUtils.parse(inputRef.current.value);
const setValue = (value) => {
if (inputRef.current == null)
return;
const date = value instanceof Date
? value
: typeof value === "string"
? DateUtils.parse(value)
: undefined;
inputRef.current.value =
DateUtils.formatForInput(date, inputRef.current.type === "date" ? undefined : false) ?? "";
};
React.useImperativeHandle(mref, () => ({
getValue,
setValue
}));
React.useEffect(() => {
if (defaultValue == null)
return;
setValue(defaultValue);
}, [defaultValue]);
// Name
const name = field.name;
if (!name) {
return (_jsxs(Typography, { children: ["No name for FieldDateInput ", JSON.stringify(field)] }));
}
return (_jsx(InputField, { label: field.label ?? "", helperText: field.helperText, inputRef: inputRef, type: "date", name: name, fullWidth: true, onChange: () => onChange(name, getValue()), ...field.mainSlotProps }));
};