@leankylin-sheet/react 7.0.11 → 7.0.13

package/dist/index.css

@@ -3202,8 +3202,15 @@ label {
   border-color: #1a73e8;
 }
 
+.custom-format-error {
+  margin-top: 6px;
+  color: #d93025;
+  font-size: 12px;
+  line-height: 16px;
+}
+
 .custom-format-list {
-  margin-top: 12px;
+  margin-top: 10px;
   border: 1px solid #d4d4d4;
   border-radius: 2px;
   font-size: 12px;
@@ -3239,6 +3246,42 @@ label {
   background: #e3edfd;
 }
 
+.custom-format-preview {
+  display: flex;
+  align-items: center;
+  margin-top: 10px;
+  padding: 6px 10px;
+  background: #f5f6f7;
+  border-radius: 2px;
+  font-size: 12px;
+}
+
+.custom-format-preview-title {
+  color: #666;
+  flex-shrink: 0;
+}
+
+.custom-format-preview-origin {
+  margin-left: 4px;
+  color: #333;
+}
+
+.custom-format-preview-arrow {
+  margin: 0 8px;
+  color: #999;
+}
+
+.custom-format-preview-result {
+  color: #1a73e8;
+  font-weight: 600;
+  word-break: break-all;
+}
+
+.custom-format-preview-result.invalid {
+  color: #d93025;
+  font-weight: 400;
+}
+
 .leankylin-fx-editor {
   display: flex;
   flex-direction: row;

package/dist/index.esm.css

@@ -3202,8 +3202,15 @@ label {
   border-color: #1a73e8;
 }
 
+.custom-format-error {
+  margin-top: 6px;
+  color: #d93025;
+  font-size: 12px;
+  line-height: 16px;
+}
+
 .custom-format-list {
-  margin-top: 12px;
+  margin-top: 10px;
   border: 1px solid #d4d4d4;
   border-radius: 2px;
   font-size: 12px;
@@ -3239,6 +3246,42 @@ label {
   background: #e3edfd;
 }
 
+.custom-format-preview {
+  display: flex;
+  align-items: center;
+  margin-top: 10px;
+  padding: 6px 10px;
+  background: #f5f6f7;
+  border-radius: 2px;
+  font-size: 12px;
+}
+
+.custom-format-preview-title {
+  color: #666;
+  flex-shrink: 0;
+}
+
+.custom-format-preview-origin {
+  margin-left: 4px;
+  color: #333;
+}
+
+.custom-format-preview-arrow {
+  margin: 0 8px;
+  color: #999;
+}
+
+.custom-format-preview-result {
+  color: #1a73e8;
+  font-weight: 600;
+  word-break: break-all;
+}
+
+.custom-format-preview-result.invalid {
+  color: #d93025;
+  font-weight: 400;
+}
+
 .leankylin-fx-editor {
   display: flex;
   flex-direction: row;

package/dist/index.esm.js

@@ -1,4 +1,4 @@
-import { defaultContext, defaultSettings, getSheetIndex, colLocationByIndex, fixPositionOnFrozenCells, colLocation, getFlowdata, isAllowEdit, handleColumnHeaderMouseDown, handleColSizeHandleMouseDown, handleColFreezeHandleMouseDown, handleContextMenu, selectTitlesMap, selectTitlesRange, fixColumnStyleOverflowInFreeze, rowLocationByIndex, rowLocation, handleRowHeaderMouseDown, handleRowSizeHandleMouseDown, handleRowFreezeHandleMouseDown, fixRowStyleOverflowInFreeze, functionHTMLGenerate, locale, getCellValue, createRangeHightlight, isInlineStringCell, getInlineStringHTML, valueShowEs, escapeHTMLTag, escapeScriptTag, isShowHidenCR, cancelNormalSelected, moveHighlightCell, updateCell, israngeseleciton, handleFormulaInput, onSearchDialogMoveStart, replaceAll, replace, searchAll, searchNext, changeSheet, normalizeSelection, scrollToHighlightCell, chatatABC, getCellHyperlink, isLinkValid, getRangetxt, goToLink, replaceHtml, removeHyperlink, onRangeSelectionModalMoveStart, saveHyperlink, createFilterOptions, onImageMoveStart, onImageResizeStart, showComments, setEditingComment, onCommentBoxMoveStart, onCommentBoxResizeStart, confirmMessage, getRangeByTxt, getDropdownList, setCellValue, setConditionRules, mergeBorder, setDropcownValue, handleCellAreaMouseDown, handleCellAreaMouseMove, handleCellAreaDragOver, handleCellDrop, handleCellAreaDoubleClick, selectAll, showLinkCard, getCellRowColumn, handleOverlayMouseMove, handleOverlayMouseUp, handleKeydownForZoom, handleOverlayTouchStart, handleOverlayTouchMove, handleOverlayTouchEnd, PAINT_MODEL_CURSOR, onCellsMoveStart, createDropCellRange, handleDropCellDoubleClick, updateContextWithSheetData, updateContextWithCanvas, initFreeze, Canvas, handleGlobalWheel, setCaretPosition, getDataArr, updateMoreCell, getRegStr, getOptionValue, getSelectRange, applyLocation, updateItem, normalizedCellAttr, updateFormat, handleTextSize, handleHorizontalAlign, handleVerticalAlign, handleScreenShot, showImgChooser, insertImage, editComment, deleteComment, showHideComment, showHideAllComments, newComment, handleSum, autoSelectionFormula, handleMerge, handleBorder, handleFreeze, handleSort, createFilter, clearFilter, toolbarItemSelectedFunc, toolbarItemClickHandler, handleTextColor, handleTextBackground, getDataBySelectionNoCopy, getInlineStringNoStyle, rangeHightlightselected, editSheetName, setNextSheet, MAX_ZOOM_RATIO, MIN_ZOOM_RATIO, addSheet, indexToColumnChar, sortSelection, handleCopy, insertRowCol, deleteRowCol, hideSelected, showSelected, api, removeActiveImage, deleteSelectedCellText, jfrefreshgrid, handleLink, deleteSheet, opToPatch, orderbydatafiler, getFilterColumnValues, getFilterColumnColors, saveFilter, cancelActiveImgItem, patchToOp, filterPatch, inverseRowColOptions, ensureSheetIndex, initSheetIndex, handleGlobalKeyDown, handlePasteByLeanklin, groupValuesRefresh } from '@leankylin-sheet/core';
+import { defaultContext, defaultSettings, getSheetIndex, colLocationByIndex, fixPositionOnFrozenCells, colLocation, getFlowdata, isAllowEdit, handleColumnHeaderMouseDown, handleColSizeHandleMouseDown, handleColFreezeHandleMouseDown, handleContextMenu, selectTitlesMap, selectTitlesRange, fixColumnStyleOverflowInFreeze, rowLocationByIndex, rowLocation, handleRowHeaderMouseDown, handleRowSizeHandleMouseDown, handleRowFreezeHandleMouseDown, fixRowStyleOverflowInFreeze, functionHTMLGenerate, locale, getCellValue, createRangeHightlight, isInlineStringCell, getInlineStringHTML, valueShowEs, escapeHTMLTag, escapeScriptTag, isShowHidenCR, cancelNormalSelected, moveHighlightCell, updateCell, israngeseleciton, handleFormulaInput, onSearchDialogMoveStart, replaceAll, replace, searchAll, searchNext, changeSheet, normalizeSelection, scrollToHighlightCell, chatatABC, getCellHyperlink, isLinkValid, getRangetxt, goToLink, replaceHtml, removeHyperlink, onRangeSelectionModalMoveStart, saveHyperlink, createFilterOptions, onImageMoveStart, onImageResizeStart, showComments, setEditingComment, onCommentBoxMoveStart, onCommentBoxResizeStart, confirmMessage, getRangeByTxt, getDropdownList, setCellValue, setConditionRules, mergeBorder, setDropcownValue, handleCellAreaMouseDown, handleCellAreaMouseMove, handleCellAreaDragOver, handleCellDrop, handleCellAreaDoubleClick, selectAll, showLinkCard, getCellRowColumn, handleOverlayMouseMove, handleOverlayMouseUp, handleKeydownForZoom, handleOverlayTouchStart, handleOverlayTouchMove, handleOverlayTouchEnd, PAINT_MODEL_CURSOR, onCellsMoveStart, createDropCellRange, handleDropCellDoubleClick, updateContextWithSheetData, updateContextWithCanvas, initFreeze, Canvas, handleGlobalWheel, setCaretPosition, getDataArr, updateMoreCell, getRegStr, getOptionValue, getSelectRange, applyLocation, updateItem, normalizedCellAttr, update, updateFormat, handleTextSize, handleHorizontalAlign, handleVerticalAlign, handleScreenShot, showImgChooser, insertImage, editComment, deleteComment, showHideComment, showHideAllComments, newComment, handleSum, autoSelectionFormula, handleMerge, handleBorder, handleFreeze, handleSort, createFilter, clearFilter, toolbarItemSelectedFunc, toolbarItemClickHandler, handleTextColor, handleTextBackground, getDataBySelectionNoCopy, getInlineStringNoStyle, rangeHightlightselected, editSheetName, setNextSheet, MAX_ZOOM_RATIO, MIN_ZOOM_RATIO, addSheet, indexToColumnChar, sortSelection, handleCopy, insertRowCol, deleteRowCol, hideSelected, showSelected, api, removeActiveImage, deleteSelectedCellText, jfrefreshgrid, handleLink, deleteSheet, opToPatch, orderbydatafiler, getFilterColumnValues, getFilterColumnColors, saveFilter, cancelActiveImgItem, patchToOp, filterPatch, inverseRowColOptions, ensureSheetIndex, initSheetIndex, handleGlobalKeyDown, handlePasteByLeanklin, groupValuesRefresh } from '@leankylin-sheet/core';
 import { useInViewport, useMemoizedFn, useThrottleFn } from 'ahooks';
 import React, { useContext, useRef, useState, useMemo, useCallback, useEffect, useLayoutEffect, useImperativeHandle } from 'react';
 import produce, { applyPatches, enablePatches, produceWithPatches } from 'immer';
@@ -6507,22 +6507,44 @@ var CustomFormat = function CustomFormat(_ref) {
       var col = firstSelection === null || firstSelection === void 0 ? void 0 : firstSelection.column_focus;
       var cell = flowdata != null && row != null && col != null ? (_flowdata$row = flowdata[row]) === null || _flowdata$row === void 0 ? void 0 : _flowdata$row[col] : undefined;
       var ct = cell == null ? undefined : normalizedCellAttr(cell, "ct");
-      return (ct === null || ct === void 0 ? void 0 : ct.fa) != null && ct.fa !== "fmtOtherSelf" ? ct.fa : "#0.00";
+      return {
+        fa: (ct === null || ct === void 0 ? void 0 : ct.fa) != null && ct.fa !== "fmtOtherSelf" ? ct.fa : "#0.00",
+        v: cell === null || cell === void 0 ? void 0 : cell.v
+      };
     }),
-    _useState2 = _slicedToArray(_useState, 2),
-    formatStr = _useState2[0],
-    setFormatStr = _useState2[1];
+    _useState2 = _slicedToArray(_useState, 1),
+    initialState = _useState2[0];
+  var _useState3 = useState(initialState.fa),
+    _useState4 = _slicedToArray(_useState3, 2),
+    formatStr = _useState4[0],
+    setFormatStr = _useState4[1];
   var _locale = locale(context),
     button = _locale.button,
     format = _locale.format,
     defaultFmt = _locale.defaultFmt;
   var _useDialog = useDialog(),
     showDialog = _useDialog.showDialog;
+  var _useState5 = useState(""),
+    _useState6 = _slicedToArray(_useState5, 2),
+    errorMsg = _useState6[0],
+    setErrorMsg = _useState6[1];
   var presetFmtList = useMemo(function () {
     return defaultFmt.filter(function (v) {
       return v.value !== "split" && v.value !== "fmtOtherSelf";
     });
   }, [defaultFmt]);
+  var previewValue = useMemo(function () {
+    var fmt = formatStr.trim();
+    var v = initialState.v;
+    if (fmt === "" || fmt === "fmtOtherSelf" || v == null || v === "") {
+      return "";
+    }
+    try {
+      return update(fmt, v);
+    } catch (error) {
+      return "";
+    }
+  }, [formatStr, initialState]);
   var onConfirm = useCallback(function () {
     var fmt = formatStr.trim();
     if (fmt === "" || fmt === "fmtOtherSelf") {
@@ -6530,14 +6552,18 @@ var CustomFormat = function CustomFormat(_ref) {
       showDialog(format.tipCustomFormat, "ok");
       return;
     }
-    setContext(function (ctx) {
-      var d = getFlowdata(ctx);
-      if (d == null) return;
-      updateFormat(ctx, cellInput.current, d, "ct", fmt);
-      cancelNormalSelected(ctx);
+    try {
+      setContext(function (ctx) {
+        var d = getFlowdata(ctx);
+        if (d == null) return;
+        updateFormat(ctx, cellInput.current, d, "ct", fmt);
+        cancelNormalSelected(ctx);
+      });
       _onCancel();
-    });
-  }, [_onCancel, cellInput, format.tipCustomFormat, formatStr, setContext, showDialog]);
+    } catch (error) {
+      setErrorMsg(format.tipUnsupportedFormat);
+    }
+  }, [_onCancel, cellInput, format.tipCustomFormat, format.tipUnsupportedFormat, formatStr, setContext, showDialog]);
   var onCancel = useCallback(function () {
     setContext(function (ctx) {
       cancelNormalSelected(ctx);
@@ -6564,10 +6590,23 @@ var CustomFormat = function CustomFormat(_ref) {
     placeholder: format.customFormatExample,
     value: formatStr,
     onChange: function onChange(e) {
-      return setFormatStr(e.target.value);
+      setFormatStr(e.target.value);
+      setErrorMsg("");
     },
     onKeyDown: onKeyDown
-  })), /*#__PURE__*/React.createElement("div", {
+  })), errorMsg !== "" && ( /*#__PURE__*/React.createElement("div", {
+    className: "custom-format-error"
+  }, errorMsg)), initialState.v != null && initialState.v !== "" && ( /*#__PURE__*/React.createElement("div", {
+    className: "custom-format-preview"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "custom-format-preview-title"
+  }, format.customFormatPreview, "\uFF1A"), /*#__PURE__*/React.createElement("span", {
+    className: "custom-format-preview-origin"
+  }, String(initialState.v)), /*#__PURE__*/React.createElement("span", {
+    className: "custom-format-preview-arrow"
+  }, "\u2192"), /*#__PURE__*/React.createElement("span", {
+    className: "custom-format-preview-result".concat(previewValue === "" ? " invalid" : "")
+  }, previewValue === "" ? format.tipUnsupportedFormat : previewValue))), /*#__PURE__*/React.createElement("div", {
     className: "custom-format-list"
   }, /*#__PURE__*/React.createElement("div", {
     className: "custom-format-list-row custom-format-list-header"

package/dist/index.js

@@ -6517,22 +6517,44 @@ var CustomFormat = function CustomFormat(_ref) {
       var col = firstSelection === null || firstSelection === void 0 ? void 0 : firstSelection.column_focus;
       var cell = flowdata != null && row != null && col != null ? (_flowdata$row = flowdata[row]) === null || _flowdata$row === void 0 ? void 0 : _flowdata$row[col] : undefined;
       var ct = cell == null ? undefined : core.normalizedCellAttr(cell, "ct");
-      return (ct === null || ct === void 0 ? void 0 : ct.fa) != null && ct.fa !== "fmtOtherSelf" ? ct.fa : "#0.00";
+      return {
+        fa: (ct === null || ct === void 0 ? void 0 : ct.fa) != null && ct.fa !== "fmtOtherSelf" ? ct.fa : "#0.00",
+        v: cell === null || cell === void 0 ? void 0 : cell.v
+      };
     }),
-    _useState2 = _slicedToArray(_useState, 2),
-    formatStr = _useState2[0],
-    setFormatStr = _useState2[1];
+    _useState2 = _slicedToArray(_useState, 1),
+    initialState = _useState2[0];
+  var _useState3 = React.useState(initialState.fa),
+    _useState4 = _slicedToArray(_useState3, 2),
+    formatStr = _useState4[0],
+    setFormatStr = _useState4[1];
   var _locale = core.locale(context),
     button = _locale.button,
     format = _locale.format,
     defaultFmt = _locale.defaultFmt;
   var _useDialog = useDialog(),
     showDialog = _useDialog.showDialog;
+  var _useState5 = React.useState(""),
+    _useState6 = _slicedToArray(_useState5, 2),
+    errorMsg = _useState6[0],
+    setErrorMsg = _useState6[1];
   var presetFmtList = React.useMemo(function () {
     return defaultFmt.filter(function (v) {
       return v.value !== "split" && v.value !== "fmtOtherSelf";
     });
   }, [defaultFmt]);
+  var previewValue = React.useMemo(function () {
+    var fmt = formatStr.trim();
+    var v = initialState.v;
+    if (fmt === "" || fmt === "fmtOtherSelf" || v == null || v === "") {
+      return "";
+    }
+    try {
+      return core.update(fmt, v);
+    } catch (error) {
+      return "";
+    }
+  }, [formatStr, initialState]);
   var onConfirm = React.useCallback(function () {
     var fmt = formatStr.trim();
     if (fmt === "" || fmt === "fmtOtherSelf") {
@@ -6540,14 +6562,18 @@ var CustomFormat = function CustomFormat(_ref) {
       showDialog(format.tipCustomFormat, "ok");
       return;
     }
-    setContext(function (ctx) {
-      var d = core.getFlowdata(ctx);
-      if (d == null) return;
-      core.updateFormat(ctx, cellInput.current, d, "ct", fmt);
-      core.cancelNormalSelected(ctx);
+    try {
+      setContext(function (ctx) {
+        var d = core.getFlowdata(ctx);
+        if (d == null) return;
+        core.updateFormat(ctx, cellInput.current, d, "ct", fmt);
+        core.cancelNormalSelected(ctx);
+      });
       _onCancel();
-    });
-  }, [_onCancel, cellInput, format.tipCustomFormat, formatStr, setContext, showDialog]);
+    } catch (error) {
+      setErrorMsg(format.tipUnsupportedFormat);
+    }
+  }, [_onCancel, cellInput, format.tipCustomFormat, format.tipUnsupportedFormat, formatStr, setContext, showDialog]);
   var onCancel = React.useCallback(function () {
     setContext(function (ctx) {
       core.cancelNormalSelected(ctx);
@@ -6574,10 +6600,23 @@ var CustomFormat = function CustomFormat(_ref) {
     placeholder: format.customFormatExample,
     value: formatStr,
     onChange: function onChange(e) {
-      return setFormatStr(e.target.value);
+      setFormatStr(e.target.value);
+      setErrorMsg("");
     },
     onKeyDown: onKeyDown
-  })), /*#__PURE__*/React__default['default'].createElement("div", {
+  })), errorMsg !== "" && ( /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "custom-format-error"
+  }, errorMsg)), initialState.v != null && initialState.v !== "" && ( /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "custom-format-preview"
+  }, /*#__PURE__*/React__default['default'].createElement("span", {
+    className: "custom-format-preview-title"
+  }, format.customFormatPreview, "\uFF1A"), /*#__PURE__*/React__default['default'].createElement("span", {
+    className: "custom-format-preview-origin"
+  }, String(initialState.v)), /*#__PURE__*/React__default['default'].createElement("span", {
+    className: "custom-format-preview-arrow"
+  }, "\u2192"), /*#__PURE__*/React__default['default'].createElement("span", {
+    className: "custom-format-preview-result".concat(previewValue === "" ? " invalid" : "")
+  }, previewValue === "" ? format.tipUnsupportedFormat : previewValue))), /*#__PURE__*/React__default['default'].createElement("div", {
     className: "custom-format-list"
   }, /*#__PURE__*/React__default['default'].createElement("div", {
     className: "custom-format-list-row custom-format-list-header"

package/dist/index.umd.css

@@ -3202,8 +3202,15 @@ label {
   border-color: #1a73e8;
 }
 
+.custom-format-error {
+  margin-top: 6px;
+  color: #d93025;
+  font-size: 12px;
+  line-height: 16px;
+}
+
 .custom-format-list {
-  margin-top: 12px;
+  margin-top: 10px;
   border: 1px solid #d4d4d4;
   border-radius: 2px;
   font-size: 12px;
@@ -3239,6 +3246,42 @@ label {
   background: #e3edfd;
 }
 
+.custom-format-preview {
+  display: flex;
+  align-items: center;
+  margin-top: 10px;
+  padding: 6px 10px;
+  background: #f5f6f7;
+  border-radius: 2px;
+  font-size: 12px;
+}
+
+.custom-format-preview-title {
+  color: #666;
+  flex-shrink: 0;
+}
+
+.custom-format-preview-origin {
+  margin-left: 4px;
+  color: #333;
+}
+
+.custom-format-preview-arrow {
+  margin: 0 8px;
+  color: #999;
+}
+
+.custom-format-preview-result {
+  color: #1a73e8;
+  font-weight: 600;
+  word-break: break-all;
+}
+
+.custom-format-preview-result.invalid {
+  color: #d93025;
+  font-weight: 400;
+}
+
 .leankylin-fx-editor {
   display: flex;
   flex-direction: row;

package/dist/index.umd.js

@@ -25591,22 +25591,44 @@
         var col = firstSelection === null || firstSelection === void 0 ? void 0 : firstSelection.column_focus;
         var cell = flowdata != null && row != null && col != null ? (_flowdata$row = flowdata[row]) === null || _flowdata$row === void 0 ? void 0 : _flowdata$row[col] : undefined;
         var ct = cell == null ? undefined : core.normalizedCellAttr(cell, "ct");
-        return (ct === null || ct === void 0 ? void 0 : ct.fa) != null && ct.fa !== "fmtOtherSelf" ? ct.fa : "#0.00";
+        return {
+          fa: (ct === null || ct === void 0 ? void 0 : ct.fa) != null && ct.fa !== "fmtOtherSelf" ? ct.fa : "#0.00",
+          v: cell === null || cell === void 0 ? void 0 : cell.v
+        };
       }),
-      _useState2 = _slicedToArray(_useState, 2),
-      formatStr = _useState2[0],
-      setFormatStr = _useState2[1];
+      _useState2 = _slicedToArray(_useState, 1),
+      initialState = _useState2[0];
+    var _useState3 = React.useState(initialState.fa),
+      _useState4 = _slicedToArray(_useState3, 2),
+      formatStr = _useState4[0],
+      setFormatStr = _useState4[1];
     var _locale = core.locale(context),
       button = _locale.button,
       format = _locale.format,
       defaultFmt = _locale.defaultFmt;
     var _useDialog = useDialog(),
       showDialog = _useDialog.showDialog;
+    var _useState5 = React.useState(""),
+      _useState6 = _slicedToArray(_useState5, 2),
+      errorMsg = _useState6[0],
+      setErrorMsg = _useState6[1];
     var presetFmtList = React.useMemo(function () {
       return defaultFmt.filter(function (v) {
         return v.value !== "split" && v.value !== "fmtOtherSelf";
       });
     }, [defaultFmt]);
+    var previewValue = React.useMemo(function () {
+      var fmt = formatStr.trim();
+      var v = initialState.v;
+      if (fmt === "" || fmt === "fmtOtherSelf" || v == null || v === "") {
+        return "";
+      }
+      try {
+        return core.update(fmt, v);
+      } catch (error) {
+        return "";
+      }
+    }, [formatStr, initialState]);
     var onConfirm = React.useCallback(function () {
       var fmt = formatStr.trim();
       if (fmt === "" || fmt === "fmtOtherSelf") {
@@ -25614,14 +25636,18 @@
         showDialog(format.tipCustomFormat, "ok");
         return;
       }
-      setContext(function (ctx) {
-        var d = core.getFlowdata(ctx);
-        if (d == null) return;
-        core.updateFormat(ctx, cellInput.current, d, "ct", fmt);
-        core.cancelNormalSelected(ctx);
+      try {
+        setContext(function (ctx) {
+          var d = core.getFlowdata(ctx);
+          if (d == null) return;
+          core.updateFormat(ctx, cellInput.current, d, "ct", fmt);
+          core.cancelNormalSelected(ctx);
+        });
         _onCancel();
-      });
-    }, [_onCancel, cellInput, format.tipCustomFormat, formatStr, setContext, showDialog]);
+      } catch (error) {
+        setErrorMsg(format.tipUnsupportedFormat);
+      }
+    }, [_onCancel, cellInput, format.tipCustomFormat, format.tipUnsupportedFormat, formatStr, setContext, showDialog]);
     var onCancel = React.useCallback(function () {
       setContext(function (ctx) {
         core.cancelNormalSelected(ctx);
@@ -25648,10 +25674,23 @@
       placeholder: format.customFormatExample,
       value: formatStr,
       onChange: function onChange(e) {
-        return setFormatStr(e.target.value);
+        setFormatStr(e.target.value);
+        setErrorMsg("");
       },
       onKeyDown: onKeyDown
-    })), /*#__PURE__*/React__default['default'].createElement("div", {
+    })), errorMsg !== "" && ( /*#__PURE__*/React__default['default'].createElement("div", {
+      className: "custom-format-error"
+    }, errorMsg)), initialState.v != null && initialState.v !== "" && ( /*#__PURE__*/React__default['default'].createElement("div", {
+      className: "custom-format-preview"
+    }, /*#__PURE__*/React__default['default'].createElement("span", {
+      className: "custom-format-preview-title"
+    }, format.customFormatPreview, "\uFF1A"), /*#__PURE__*/React__default['default'].createElement("span", {
+      className: "custom-format-preview-origin"
+    }, String(initialState.v)), /*#__PURE__*/React__default['default'].createElement("span", {
+      className: "custom-format-preview-arrow"
+    }, "\u2192"), /*#__PURE__*/React__default['default'].createElement("span", {
+      className: "custom-format-preview-result".concat(previewValue === "" ? " invalid" : "")
+    }, previewValue === "" ? format.tipUnsupportedFormat : previewValue))), /*#__PURE__*/React__default['default'].createElement("div", {
       className: "custom-format-list"
     }, /*#__PURE__*/React__default['default'].createElement("div", {
       className: "custom-format-list-row custom-format-list-header"