@novin-dev/formalite/dist/esm/components/Formalite/elements/RadioGroupView/RadioGroupView.js

Generate MUI form with few line of code

import { __rest, __assign } from 'tslib';
import React, { useState, useCallback, useEffect } from 'react';
import { Grid } from '@mui/material';
import compare from 'react-fast-compare';
import { RadioGroupStateEnum } from './RadioGroupView.type.js';
import { baseMemo } from '../Bases/functions/memo.js';
import { GroupViewSkeleton } from '../Bases/SkeletonBase.js';
import RadioGroupViewAllViews from './RadioGroupViewAllViews.js';
import { FetchingDataEnum } from '../../../base/model.js';

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 = __rest(_b, ["helperText"]);
    var _c = useState({
        status: RadioGroupStateEnum.PENDING,
        data: {},
    }), dataStatus = _c[0], setDataStatus = _c[1];
    var loadFunction = useCallback(function () {
        if (allData.dataFetching.type === FetchingDataEnum.AUTOMATIC) {
            setDataStatus({ status: RadioGroupStateEnum.PENDING, data: {} });
            var funcResult = allData.dataFetching.options();
            funcResult
                .then(function (res) {
                setDataStatus({
                    status: RadioGroupStateEnum.READY,
                    data: formatOptions(res, formatOptionFn),
                });
            })
                .catch(function (e) {
                setDataStatus({
                    status: RadioGroupStateEnum.REJECTED,
                    data: {},
                    error: e,
                });
            });
        }
    }, [allData.dataFetching, formatOptionFn]);
    useEffect(function () {
        if (allData.dataFetching.type === FetchingDataEnum.AUTOMATIC) {
            loadFunction();
        }
        else if (allData.dataFetching.error ||
            (!allData.dataFetching.loading && !allData.dataFetching.data)) {
            setDataStatus({
                status: RadioGroupStateEnum.REJECTED,
                data: {},
            });
        }
        else if (allData.dataFetching.loading) {
            setDataStatus({
                status: RadioGroupStateEnum.PENDING,
                data: {},
            });
        }
        else if (allData.dataFetching.data) {
            setDataStatus({
                status: RadioGroupStateEnum.READY,
                data: formatOptions(allData.dataFetching.data, formatOptionFn),
            });
        }
    }, [allData.dataFetching]);
    if (loading) {
        return (React.createElement(Grid, __assign({ item: true }, allData.layoutProps),
            React.createElement(GroupViewSkeleton, { hasHelper: !!helperText })));
    }
    return (React.createElement(Grid, __assign({ item: true }, allData.layoutProps, { display: "flex", container: true, direction: "column" }),
        React.createElement(RadioGroupViewAllViews, __assign({ formik: formik, validationSchema: validationSchema, translator: translator, name: String(name), dataStatus: dataStatus, allInputProps: allData.inputProps, labelProps: allData.labelProps, loadFunction: allData.dataFetching.type === FetchingDataEnum.AUTOMATIC
                ? loadFunction
                : allData.dataFetching.onRetry }, inputProps))));
};
var RadioGroupView$1 = React.memo(RadioGroupView, function (prevProps, nextProps) {
    var prevDataFetching = prevProps.allData.dataFetching;
    var nextDataFetching = nextProps.allData.dataFetching;
    return (baseMemo(prevProps, nextProps) &&
        compare(prevDataFetching, nextDataFetching));
});

export { RadioGroupView$1 as default };
//# sourceMappingURL=RadioGroupView.js.map