@novin-dev/formalite
Version:
Generate MUI form with few line of code
91 lines (88 loc) • 4.53 kB
JavaScript
import { __rest, __assign } from 'tslib';
import React, { useState, useMemo, useEffect } from 'react';
import { Grid, InputLabel, FormHelperText } from '@mui/material';
import { handleRandomClassNameOrId, checkIsRequired, getData } from '../../config/utils.js';
import { Global } from '@emotion/react';
import { baseMemo } from '../Bases/functions/memo.js';
import { TextViewSkeleton } from '../Bases/SkeletonBase.js';
import EditorViewRootStyle from './EditorViewStyle.js';
import EditorToolbar, { undoChange, redoChange, formats } from './Editor/EditorToolbar.js';
import { cssText } from './editorCss.js';
var ReactQuill = function () {
var props = [];
for (var _i = 0; _i < arguments.length; _i++) {
props[_i] = arguments[_i];
}
return React.createElement(React.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 = __rest(_a, ["helperText", "label"]);
var _b = useState(false), load = _b[0], setLoad = _b[1];
var id = useMemo(function () { return "minimal-quill-".concat(handleRandomClassNameOrId()); }, []);
var modules = useMemo(function () { return ({
toolbar: {
container: "#".concat(id),
handlers: {
undo: undoChange,
redo: redoChange,
// image: quillImageHandler,
},
},
history: {
delay: 500,
maxStack: 100,
userOnly: true,
},
syntax: false,
clipboard: {
matchVisual: false,
},
}); }, [id]);
useEffect(function () {
// eslint-disable-next-line global-require
ReactQuill = require("react-quill");
if (document) {
setLoad(true);
}
}, []);
if (loading && !load) {
return (React.createElement(Grid, __assign({ item: true }, allData.layoutProps),
React.createElement(TextViewSkeleton, { height: 253, hasHelper: !!helperText })));
}
return (React.createElement(Grid, __assign({ id: String(name), item: true }, allData.layoutProps),
React.createElement(Global, { styles: cssText }),
label && (React.createElement(InputLabel, { required: checkIsRequired({
schema: validationSchema,
formikValues: formik.values,
key: String(name),
}), error: getData({ source: formik.touched, key: name }) &&
Boolean(getData({ source: formik.errors, key: name })) }, label)),
React.createElement(EditorViewRootStyle, { sx: function (theme) { return (__assign({}, (getData({ source: formik.touched, key: name }) &&
Boolean(getData({ source: formik.errors, key: name })) && {
border: "solid 1px ".concat(theme.palette.error.main),
}))); } },
React.createElement(EditorToolbar, { id: id, className: "class-".concat(id), isSimple: allData.editorProps.isToolbarSimple }),
React.createElement(ReactQuill, __assign({ className: "class-".concat(id), value: getData({ source: formik.values, key: name }),
// value={editorValue}
modules: modules, formats: 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.createElement(FormHelperText, { error: getData({ source: formik.touched, key: name }) &&
Boolean(getData({ source: formik.errors, key: name })) }, getData({ source: formik.touched, key: name }) &&
getData({ source: formik.errors, key: name })
? translator(getData({ source: formik.errors, key: name }))
: helperText)));
};
var EditorView$1 = React.memo(EditorView, function (prevProps, nextProps) {
return baseMemo(prevProps, nextProps);
});
export { EditorView$1 as default };
//# sourceMappingURL=EditorView.js.map