UNPKG

@novin-dev/formalite

Version:

Generate MUI form with few line of code

97 lines (90 loc) 4.81 kB
'use strict'; Object.defineProperty(exports, '__esModule', { value: true }); var tslib = require('tslib'); var React = require('react'); var material = require('@mui/material'); var compare = require('react-fast-compare'); var RadioGroupView_type = require('./RadioGroupView.type.js'); var memo = require('../Bases/functions/memo.js'); var SkeletonBase = require('../Bases/SkeletonBase.js'); var RadioGroupViewAllViews = require('./RadioGroupViewAllViews.js'); var model = require('../../../base/model.js'); function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; } var React__default = /*#__PURE__*/_interopDefaultLegacy(React); var compare__default = /*#__PURE__*/_interopDefaultLegacy(compare); var formatOptions = function (options, formatOptionFn) { var newOptions = {}; Object.keys(options).forEach(function (key) { newOptions[key] = formatOptionFn(options[key]); }); return newOptions; }; var defaultFormatOption = function (option) { return option; }; var RadioGroupView = function (props) { var allData = props.allData, name = props.name, formik = props.formik, loading = props.loading, validationSchema = props.validationSchema, translator = props.translator, _a = props.formatOptionFn, formatOptionFn = _a === void 0 ? defaultFormatOption : _a; var _b = allData.inputProps, helperText = _b.helperText, inputProps = tslib.__rest(_b, ["helperText"]); var _c = React.useState({ status: RadioGroupView_type.RadioGroupStateEnum.PENDING, data: {}, }), dataStatus = _c[0], setDataStatus = _c[1]; var loadFunction = React.useCallback(function () { if (allData.dataFetching.type === model.FetchingDataEnum.AUTOMATIC) { setDataStatus({ status: RadioGroupView_type.RadioGroupStateEnum.PENDING, data: {} }); var funcResult = allData.dataFetching.options(); funcResult .then(function (res) { setDataStatus({ status: RadioGroupView_type.RadioGroupStateEnum.READY, data: formatOptions(res, formatOptionFn), }); }) .catch(function (e) { setDataStatus({ status: RadioGroupView_type.RadioGroupStateEnum.REJECTED, data: {}, error: e, }); }); } }, [allData.dataFetching, formatOptionFn]); React.useEffect(function () { if (allData.dataFetching.type === model.FetchingDataEnum.AUTOMATIC) { loadFunction(); } else if (allData.dataFetching.error || (!allData.dataFetching.loading && !allData.dataFetching.data)) { setDataStatus({ status: RadioGroupView_type.RadioGroupStateEnum.REJECTED, data: {}, }); } else if (allData.dataFetching.loading) { setDataStatus({ status: RadioGroupView_type.RadioGroupStateEnum.PENDING, data: {}, }); } else if (allData.dataFetching.data) { setDataStatus({ status: RadioGroupView_type.RadioGroupStateEnum.READY, data: formatOptions(allData.dataFetching.data, formatOptionFn), }); } }, [allData.dataFetching]); if (loading) { return (React__default["default"].createElement(material.Grid, tslib.__assign({ item: true }, allData.layoutProps), React__default["default"].createElement(SkeletonBase.GroupViewSkeleton, { hasHelper: !!helperText }))); } return (React__default["default"].createElement(material.Grid, tslib.__assign({ item: true }, allData.layoutProps, { display: "flex", container: true, direction: "column" }), React__default["default"].createElement(RadioGroupViewAllViews["default"], tslib.__assign({ formik: formik, validationSchema: validationSchema, translator: translator, name: String(name), dataStatus: dataStatus, allInputProps: allData.inputProps, labelProps: allData.labelProps, loadFunction: allData.dataFetching.type === model.FetchingDataEnum.AUTOMATIC ? loadFunction : allData.dataFetching.onRetry }, inputProps)))); }; var RadioGroupView$1 = React__default["default"].memo(RadioGroupView, function (prevProps, nextProps) { var prevDataFetching = prevProps.allData.dataFetching; var nextDataFetching = nextProps.allData.dataFetching; return (memo.baseMemo(prevProps, nextProps) && compare__default["default"](prevDataFetching, nextDataFetching)); }); exports["default"] = RadioGroupView$1; //# sourceMappingURL=RadioGroupView.js.map