@novin-dev/formalite
Version:
Generate MUI form with few line of code
44 lines (41 loc) • 2.73 kB
JavaScript
import { __rest, __assign } from 'tslib';
import React from 'react';
import { TimePicker } from '@mui/x-date-pickers';
import { Grid, TextField } from '@mui/material';
import { getData, checkIsRequired } from '../../../config/utils.js';
import { baseMemo } from '../../Bases/functions/memo.js';
import DatePickerLocalizationProvider from '../DatePickerLocalizationProvider.js';
import { TextViewSkeleton } from '../../Bases/SkeletonBase.js';
var TimePickerView = function (props) {
var allData = props.allData, name = props.name, formik = props.formik, loading = props.loading, validationSchema = props.validationSchema, translator = props.translator, lang = props.lang;
var _a = allData.inputProps, label = _a.label, helperText = _a.helperText, inputProps = __rest(_a, ["label", "helperText"]);
if (loading) {
return (React.createElement(Grid, __assign({ item: true }, allData.layoutProps),
React.createElement(TextViewSkeleton, { hasHelper: !!helperText })));
}
return (React.createElement(Grid, __assign({ item: true }, allData.layoutProps),
React.createElement(DatePickerLocalizationProvider, { lang: lang },
React.createElement(TimePicker, __assign({ label: label, value: getData({ source: formik.values, key: name }), onChange: function (date) {
formik.setFieldValue(String(name), date);
if (allData.onChange) {
allData.onChange(date);
}
}, clearable: true, renderInput: function (_a) {
var error = _a.error, restParams = __rest(_a, ["error"]);
return (React.createElement(TextField, __assign({ fullWidth: true, name: String(name), required: checkIsRequired({
schema: validationSchema,
formikValues: formik.values,
key: String(name),
}), error: error ||
(getData({ source: formik.touched, key: name }) &&
Boolean(getData({ source: formik.errors, key: name }))), helperText: getData({ source: formik.touched, key: name }) &&
getData({ source: formik.errors, key: name })
? translator(getData({ source: formik.errors, key: name }))
: helperText }, restParams, inputProps)));
} }, allData.timePickerProps)))));
};
var TimePickerView$1 = React.memo(TimePickerView, function (prevProps, nextProps) {
return baseMemo(prevProps, nextProps);
});
export { TimePickerView$1 as default };
//# sourceMappingURL=TimePickerView.js.map