@pdg/react-form 1.0.67 → 1.0.69
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.js
CHANGED
|
@@ -7491,6 +7491,8 @@ var Editor = /** @class */ (function (_super) {
|
|
|
7491
7491
|
styleInject(css_248z$c);var FormTextEditor = React.forwardRef(function (_a, ref) {
|
|
7492
7492
|
// ID --------------------------------------------------------------------------------------------------------------
|
|
7493
7493
|
var initVariant = _a.variant, initSize = _a.size, initColor = _a.color, initFocused = _a.focused,
|
|
7494
|
+
// ---------------------------------------------------------------------------------------------------------------
|
|
7495
|
+
apiKey = _a.apiKey, toolbar = _a.toolbar,
|
|
7494
7496
|
//----------------------------------------------------------------------------------------------------------------
|
|
7495
7497
|
menubar = _a.menubar, height = _a.height, hidden = _a.hidden, onImageUpload = _a.onImageUpload,
|
|
7496
7498
|
//----------------------------------------------------------------------------------------------------------------
|
|
@@ -7507,7 +7509,7 @@ styleInject(css_248z$c);var FormTextEditor = React.forwardRef(function (_a, ref)
|
|
|
7507
7509
|
// State - FormState -----------------------------------------------------------------------------------------------
|
|
7508
7510
|
var _c = useAutoUpdateState$1(initFocused == null ? formFocused : initFocused), focused = _c[0], setFocused = _c[1];
|
|
7509
7511
|
// Ref -------------------------------------------------------------------------------------------------------------
|
|
7510
|
-
var editorRef = React.useRef(
|
|
7512
|
+
var editorRef = React.useRef();
|
|
7511
7513
|
var keyDownTime = React.useRef(0);
|
|
7512
7514
|
// State - value ---------------------------------------------------------------------------------------------------
|
|
7513
7515
|
var _d = useAutoUpdateState$1(initValue || ''), value = _d[0], setValue = _d[1];
|
|
@@ -7526,13 +7528,8 @@ styleInject(css_248z$c);var FormTextEditor = React.forwardRef(function (_a, ref)
|
|
|
7526
7528
|
var _j = useAutoUpdateState$1(initData), data = _j[0], setData = _j[1];
|
|
7527
7529
|
// Function - focus ------------------------------------------------------------------------------------------------
|
|
7528
7530
|
var focus = React.useCallback(function () {
|
|
7529
|
-
var _a
|
|
7530
|
-
|
|
7531
|
-
if (textarea) {
|
|
7532
|
-
textarea.style.display = 'block';
|
|
7533
|
-
textarea.focus();
|
|
7534
|
-
textarea.style.display = 'none';
|
|
7535
|
-
}
|
|
7531
|
+
var _a;
|
|
7532
|
+
(_a = editorRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
7536
7533
|
}, [editorRef]);
|
|
7537
7534
|
// Function - setErrorErrorHelperText -----------------------------------------------------------------------------------
|
|
7538
7535
|
var setErrorErrorHelperText = React.useCallback(function (error, errorHelperText) {
|
|
@@ -7541,14 +7538,8 @@ styleInject(css_248z$c);var FormTextEditor = React.forwardRef(function (_a, ref)
|
|
|
7541
7538
|
}, [setError]);
|
|
7542
7539
|
// Function - validate ---------------------------------------------------------------------------------------------
|
|
7543
7540
|
var validate = React.useCallback(function (value) {
|
|
7544
|
-
var
|
|
7545
|
-
if (
|
|
7546
|
-
var d = document.createElement('div');
|
|
7547
|
-
d.innerHTML = value;
|
|
7548
|
-
var text = d.textContent || d.innerText;
|
|
7549
|
-
isEmptyValue = empty(text.trim());
|
|
7550
|
-
}
|
|
7551
|
-
if (required && (isEmptyValue || empty(value))) {
|
|
7541
|
+
var _a;
|
|
7542
|
+
if (required && empty((_a = editorRef.current) === null || _a === void 0 ? void 0 : _a.getContent())) {
|
|
7552
7543
|
setErrorErrorHelperText(true, '필수 입력 항목입니다.');
|
|
7553
7544
|
return false;
|
|
7554
7545
|
}
|
|
@@ -7664,7 +7655,7 @@ styleInject(css_248z$c);var FormTextEditor = React.forwardRef(function (_a, ref)
|
|
|
7664
7655
|
// Render ----------------------------------------------------------------------------------------------------------
|
|
7665
7656
|
return (React.createElement(FormItemBase, { variant: variant, size: size, color: color, focused: focused, className: classNames$1(className, 'FormValueItem', 'FormTextEditor', !initialized && 'initializing'), labelIcon: labelIcon, label: label, error: error, required: required, fullWidth: true, helperText: error ? errorHelperText : helperText, helperTextProps: { style: { marginLeft: 5 } }, style: { width: '100%' }, hidden: hidden, controlHeight: height, control: React.createElement(React.Fragment, null,
|
|
7666
7657
|
!initialized ? React.createElement(material.Skeleton, { variant: 'rectangular', width: '100%', height: height }) : null,
|
|
7667
|
-
React.createElement(Editor, {
|
|
7658
|
+
React.createElement(Editor, { apiKey: apiKey, value: value, disabled: readOnly || disabled, init: {
|
|
7668
7659
|
height: height,
|
|
7669
7660
|
menubar: menubar,
|
|
7670
7661
|
readonly: true,
|
|
@@ -7672,18 +7663,30 @@ styleInject(css_248z$c);var FormTextEditor = React.forwardRef(function (_a, ref)
|
|
|
7672
7663
|
contextmenu: false,
|
|
7673
7664
|
content_style: 'body {font-size: 0.875rem; font-weight: 400; line-height: 1.5; color: hsl(0,0%,20%);} p {padding:0; margin:0}',
|
|
7674
7665
|
plugins: [
|
|
7666
|
+
'lists',
|
|
7675
7667
|
'advlist',
|
|
7676
|
-
'
|
|
7677
|
-
'
|
|
7678
|
-
'
|
|
7679
|
-
'
|
|
7668
|
+
'image',
|
|
7669
|
+
'autolink',
|
|
7670
|
+
'link',
|
|
7671
|
+
'charmap',
|
|
7672
|
+
'preview',
|
|
7673
|
+
'anchor',
|
|
7674
|
+
'searchreplace',
|
|
7675
|
+
'visualblocks',
|
|
7676
|
+
'code',
|
|
7677
|
+
'insertdatetime',
|
|
7678
|
+
'media',
|
|
7679
|
+
'table',
|
|
7680
|
+
'wordcount',
|
|
7680
7681
|
],
|
|
7681
|
-
toolbar:
|
|
7682
|
+
toolbar: toolbar ||
|
|
7683
|
+
'undo redo | \
|
|
7682
7684
|
formatselect bullist numlist outdent indent | \
|
|
7683
7685
|
bold italic | align | forecolor backcolor | \
|
|
7684
7686
|
link image media | advtable | code',
|
|
7685
7687
|
images_upload_handler: handleImageUpload,
|
|
7686
|
-
}, onInit: function () {
|
|
7688
|
+
}, onInit: function (evt, editor) {
|
|
7689
|
+
editorRef.current = editor;
|
|
7687
7690
|
setTimeout(function () { return setInitialized(true); }, 10);
|
|
7688
7691
|
}, onEditorChange: handleEditorChange, onKeyDown: handleKeyDown, onFocus: function () { return setFocused(initFocused || true); }, onBlur: function () { return setFocused(initFocused || false); } })) }));
|
|
7689
7692
|
});
|