@novin-dev/formalite
Version:
Generate MUI form with few line of code
97 lines (90 loc) • 4.81 kB
JavaScript
'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