@novin-dev/formalite/dist/cjs/components/Formalite/elements/EditorView/EditorView.js

Generate MUI form with few line of code

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var tslib = require('tslib');
var React = require('react');
var material = require('@mui/material');
var utils = require('../../config/utils.js');
var react = require('@emotion/react');
var memo = require('../Bases/functions/memo.js');
var SkeletonBase = require('../Bases/SkeletonBase.js');
var EditorViewStyle = require('./EditorViewStyle.js');
var EditorToolbar = require('./Editor/EditorToolbar.js');
var editorCss = require('./editorCss.js');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var React__default = /*#__PURE__*/_interopDefaultLegacy(React);

var ReactQuill = function () {
    var props = [];
    for (var _i = 0; _i < arguments.length; _i++) {
        props[_i] = arguments[_i];
    }
    return React__default["default"].createElement(React__default["default"].Fragment, null, "a");
};
var EditorView = function (props) {
    var allData = props.allData, name = props.name, formik = props.formik, loading = props.loading, validationSchema = props.validationSchema, translator = props.translator;
    var _a = allData.editorProps, helperText = _a.helperText, label = _a.label, editorProps = tslib.__rest(_a, ["helperText", "label"]);
    var _b = React.useState(false), load = _b[0], setLoad = _b[1];
    var id = React.useMemo(function () { return "minimal-quill-".concat(utils.handleRandomClassNameOrId()); }, []);
    var modules = React.useMemo(function () { return ({
        toolbar: {
            container: "#".concat(id),
            handlers: {
                undo: EditorToolbar.undoChange,
                redo: EditorToolbar.redoChange,
                // image: quillImageHandler,
            },
        },
        history: {
            delay: 500,
            maxStack: 100,
            userOnly: true,
        },
        syntax: false,
        clipboard: {
            matchVisual: false,
        },
    }); }, [id]);
    React.useEffect(function () {
        // eslint-disable-next-line global-require
        ReactQuill = require("react-quill");
        if (document) {
            setLoad(true);
        }
    }, []);
    if (loading && !load) {
        return (React__default["default"].createElement(material.Grid, tslib.__assign({ item: true }, allData.layoutProps),
            React__default["default"].createElement(SkeletonBase.TextViewSkeleton, { height: 253, hasHelper: !!helperText })));
    }
    return (React__default["default"].createElement(material.Grid, tslib.__assign({ id: String(name), item: true }, allData.layoutProps),
        React__default["default"].createElement(react.Global, { styles: editorCss.cssText }),
        label && (React__default["default"].createElement(material.InputLabel, { required: utils.checkIsRequired({
                schema: validationSchema,
                formikValues: formik.values,
                key: String(name),
            }), error: utils.getData({ source: formik.touched, key: name }) &&
                Boolean(utils.getData({ source: formik.errors, key: name })) }, label)),
        React__default["default"].createElement(EditorViewStyle["default"], { sx: function (theme) { return (tslib.__assign({}, (utils.getData({ source: formik.touched, key: name }) &&
                Boolean(utils.getData({ source: formik.errors, key: name })) && {
                border: "solid 1px ".concat(theme.palette.error.main),
            }))); } },
            React__default["default"].createElement(EditorToolbar["default"], { id: id, className: "class-".concat(id), isSimple: allData.editorProps.isToolbarSimple }),
            React__default["default"].createElement(ReactQuill, tslib.__assign({ className: "class-".concat(id), value: utils.getData({ source: formik.values, key: name }), 
                // value={editorValue}
                modules: modules, formats: EditorToolbar.formats, 
                /* onChange={(value: string, _delta: any, _source: any, editor: any) => {
                  formik.setFieldValue(
                    String(name),
                    editor.getLength() > 1 ? value : formik.initialValues[name]
                  );
                }} */
                onChange: function (value) {
                    return formik.setFieldValue(String(name), value);
                } }, editorProps))),
        React__default["default"].createElement(material.FormHelperText, { error: utils.getData({ source: formik.touched, key: name }) &&
                Boolean(utils.getData({ source: formik.errors, key: name })) }, utils.getData({ source: formik.touched, key: name }) &&
            utils.getData({ source: formik.errors, key: name })
            ? translator(utils.getData({ source: formik.errors, key: name }))
            : helperText)));
};
var EditorView$1 = React__default["default"].memo(EditorView, function (prevProps, nextProps) {
    return memo.baseMemo(prevProps, nextProps);
});

exports["default"] = EditorView$1;
//# sourceMappingURL=EditorView.js.map