@leankylin-sheet/react 7.0.10 → 7.0.11

package/dist/components/CustomFormat/index.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import "./index.css";
+export declare const CustomFormat: React.FC<{
+    onCancel: () => void;
+}>;

package/dist/index.css

@@ -3176,28 +3176,68 @@ label {
     background-color: #fff;
     border: 1px solid #ccc;
 }
-.listBox {
+#leankylin-custom-format {
+  width: 360px;
+}
+
+.custom-format-input-row {
   display: flex;
-  justify-content: space-between;
+  align-items: center;
 }
 
-.inpbox {
-  margin-bottom: 10px;
+.custom-format-label {
+  flex-shrink: 0;
 }
 
-.decimal-places-input {
-  width: 70px;
+.custom-format-input {
+  flex: 1;
+  height: 28px;
+  padding: 0 8px;
+  border: 1px solid #d4d4d4;
+  border-radius: 2px;
+  outline: none;
 }
 
+.custom-format-input:focus {
+  border-color: #1a73e8;
+}
 
-.format-list {
-  width: 300px;
-  height: 170px;
+.custom-format-list {
+  margin-top: 12px;
   border: 1px solid #d4d4d4;
-  overflow-y: scroll;
+  border-radius: 2px;
+  font-size: 12px;
+}
+
+.custom-format-list-header {
+  background: #f5f6f7;
+  font-weight: 600;
+  cursor: default;
+}
+
+.custom-format-list-body {
+  height: 180px;
+  overflow-y: auto;
+}
+
+.custom-format-list-row {
+  display: flex;
+  justify-content: space-between;
+  padding: 4px 10px;
+  cursor: pointer;
 }
 
+.custom-format-list-row > div:last-child {
+  color: #888;
+}
+
+.custom-format-list-row:hover {
+  background: #f0f4ff;
+}
 
+.custom-format-list-row.on {
+  background: #e3edfd;
+}
 
 .leankylin-fx-editor {
   display: flex;

package/dist/index.esm.css

@@ -3176,28 +3176,68 @@ label {
     background-color: #fff;
     border: 1px solid #ccc;
 }
-.listBox {
+#leankylin-custom-format {
+  width: 360px;
+}
+
+.custom-format-input-row {
   display: flex;
-  justify-content: space-between;
+  align-items: center;
 }
 
-.inpbox {
-  margin-bottom: 10px;
+.custom-format-label {
+  flex-shrink: 0;
 }
 
-.decimal-places-input {
-  width: 70px;
+.custom-format-input {
+  flex: 1;
+  height: 28px;
+  padding: 0 8px;
+  border: 1px solid #d4d4d4;
+  border-radius: 2px;
+  outline: none;
 }
 
+.custom-format-input:focus {
+  border-color: #1a73e8;
+}
 
-.format-list {
-  width: 300px;
-  height: 170px;
+.custom-format-list {
+  margin-top: 12px;
   border: 1px solid #d4d4d4;
-  overflow-y: scroll;
+  border-radius: 2px;
+  font-size: 12px;
+}
+
+.custom-format-list-header {
+  background: #f5f6f7;
+  font-weight: 600;
+  cursor: default;
+}
+
+.custom-format-list-body {
+  height: 180px;
+  overflow-y: auto;
+}
+
+.custom-format-list-row {
+  display: flex;
+  justify-content: space-between;
+  padding: 4px 10px;
+  cursor: pointer;
 }
 
+.custom-format-list-row > div:last-child {
+  color: #888;
+}
+
+.custom-format-list-row:hover {
+  background: #f0f4ff;
+}
 
+.custom-format-list-row.on {
+  background: #e3edfd;
+}
 
 .leankylin-fx-editor {
   display: flex;

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, update, 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, 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';
@@ -6493,64 +6493,51 @@ var CustomBorder = function CustomBorder(_ref) {
   })))));
 };
 
-var FormatSearch = function FormatSearch(_ref) {
-  var type = _ref.type,
-    _onCancel = _ref.onCancel;
+var CustomFormat = function CustomFormat(_ref) {
+  var _onCancel = _ref.onCancel;
   var _useContext = useContext(WorkbookContext),
     context = _useContext.context,
     setContext = _useContext.setContext,
     cellInput = _useContext.refs.cellInput;
-  var _useState = useState(2),
+  var _useState = useState(function () {
+      var _context$luckysheet_s, _flowdata$row;
+      var flowdata = getFlowdata(context);
+      var firstSelection = (_context$luckysheet_s = context.luckysheet_select_save) === null || _context$luckysheet_s === void 0 ? void 0 : _context$luckysheet_s[0];
+      var row = firstSelection === null || firstSelection === void 0 ? void 0 : firstSelection.row_focus;
+      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";
+    }),
     _useState2 = _slicedToArray(_useState, 2),
-    decimalPlace = _useState2[0],
-    setDecimalPlace = _useState2[1];
-  var _useState3 = useState(0),
-    _useState4 = _slicedToArray(_useState3, 2),
-    selectedFormatIndex = _useState4[0],
-    setSelectedFormatIndex = _useState4[1];
+    formatStr = _useState2[0],
+    setFormatStr = _useState2[1];
   var _locale = locale(context),
     button = _locale.button,
     format = _locale.format,
-    currencyDetail = _locale.currencyDetail,
-    dateFmtList = _locale.dateFmtList;
+    defaultFmt = _locale.defaultFmt;
   var _useDialog = useDialog(),
     showDialog = _useDialog.showDialog;
-  var toolbarFormatAll = useMemo(function () {
-    return {
-      currency: currencyDetail,
-      date: dateFmtList,
-      number: []
-    };
-  }, [currencyDetail, dateFmtList]);
-  var toolbarFormat = useMemo(function () {
-    return toolbarFormatAll[type];
-  }, [toolbarFormatAll, type]);
-  var tips = _.get(format, type);
+  var presetFmtList = useMemo(function () {
+    return defaultFmt.filter(function (v) {
+      return v.value !== "split" && v.value !== "fmtOtherSelf";
+    });
+  }, [defaultFmt]);
   var onConfirm = useCallback(function () {
-    if (decimalPlace < 0 || decimalPlace > 9) {
+    var fmt = formatStr.trim();
+    if (fmt === "" || fmt === "fmtOtherSelf") {
       _onCancel();
-      showDialog(format.tipDecimalPlaces, "ok");
+      showDialog(format.tipCustomFormat, "ok");
       return;
     }
     setContext(function (ctx) {
-      var index = getSheetIndex(ctx, ctx.currentSheetId);
-      if (_.isNil(index)) return;
-      var selectedFormat = toolbarFormat[selectedFormatIndex].value;
-      _.forEach(ctx.luckysheet_select_save, function (selection) {
-        for (var r = selection.row[0]; r <= selection.row[1]; r += 1) {
-          for (var c = selection.column[0]; c <= selection.column[1]; c += 1) {
-            var _ctx$luckysheetfile$i, _ctx$luckysheetfile$i2, _ctx$luckysheetfile$i3, _ctx$luckysheetfile$i4;
-            if (((_ctx$luckysheetfile$i = ctx.luckysheetfile[index].data) === null || _ctx$luckysheetfile$i === void 0 ? void 0 : _ctx$luckysheetfile$i[r][c]) && ((_ctx$luckysheetfile$i2 = ctx.luckysheetfile[index].data) === null || _ctx$luckysheetfile$i2 === void 0 ? void 0 : (_ctx$luckysheetfile$i3 = _ctx$luckysheetfile$i2[r][c]) === null || _ctx$luckysheetfile$i3 === void 0 ? void 0 : (_ctx$luckysheetfile$i4 = _ctx$luckysheetfile$i3.ct) === null || _ctx$luckysheetfile$i4 === void 0 ? void 0 : _ctx$luckysheetfile$i4.t) === "n") {
-              var zero = 0;
-              ctx.luckysheetfile[index].data[r][c].ct.fa = "".concat(selectedFormat).concat(zero.toFixed(decimalPlace));
-              ctx.luckysheetfile[index].data[r][c].m = update("".concat(selectedFormat).concat(zero.toFixed(decimalPlace)), ctx.luckysheetfile[index].data[r][c].v);
-            }
-          }
-        }
-      });
+      var d = getFlowdata(ctx);
+      if (d == null) return;
+      updateFormat(ctx, cellInput.current, d, "ct", fmt);
+      cancelNormalSelected(ctx);
       _onCancel();
     });
-  }, [_onCancel, decimalPlace, format.tipDecimalPlaces, selectedFormatIndex, setContext, showDialog, toolbarFormat]);
+  }, [_onCancel, cellInput, format.tipCustomFormat, formatStr, setContext, showDialog]);
   var onCancel = useCallback(function () {
     setContext(function (ctx) {
       cancelNormalSelected(ctx);
@@ -6560,50 +6547,45 @@ var FormatSearch = function FormatSearch(_ref) {
     });
     _onCancel();
   }, [_onCancel, cellInput, setContext]);
-  return /*#__PURE__*/React.createElement("div", {
-    id: "luckysheet-search-format"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "listbox",
-    style: {
-      height: 200
+  var onKeyDown = useCallback(function (e) {
+    if (e.key === "Enter") {
+      onConfirm();
     }
+  }, [onConfirm]);
+  return /*#__PURE__*/React.createElement("div", {
+    id: "leankylin-custom-format"
   }, /*#__PURE__*/React.createElement("div", {
-    style: {
-      marginBottom: 16
-    }
-  }, tips, format.format, "\uFF1A"), /*#__PURE__*/React.createElement("div", {
-    className: "inpbox",
-    style: type === "currency" ? {
-      display: "block"
-    } : {
-      display: "none"
-    }
-  }, format.decimalPlaces, "\uFF1A", /*#__PURE__*/React.createElement("input", {
-    className: "decimal-places-input",
-    id: "decimal-places-input",
-    min: 0,
-    max: 9,
-    defaultValue: 2,
-    type: "number",
+    className: "custom-format-input-row"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "custom-format-label"
+  }, format.customFormat, "\uFF1A"), /*#__PURE__*/React.createElement("input", {
+    className: "custom-format-input",
+    autoFocus: true,
+    placeholder: format.customFormatExample,
+    value: formatStr,
     onChange: function onChange(e) {
-      setDecimalPlace(parseInt(e.target.value, 10));
-    }
+      return setFormatStr(e.target.value);
+    },
+    onKeyDown: onKeyDown
   })), /*#__PURE__*/React.createElement("div", {
-    className: "format-list"
-  }, toolbarFormat.map(function (v, index) {
+    className: "custom-format-list"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "custom-format-list-row custom-format-list-header"
+  }, /*#__PURE__*/React.createElement("div", null, format.customFormatName), /*#__PURE__*/React.createElement("div", null, format.format)), /*#__PURE__*/React.createElement("div", {
+    className: "custom-format-list-body"
+  }, presetFmtList.map(function (v) {
     return /*#__PURE__*/React.createElement("div", {
-      className: "listBox".concat(index === selectedFormatIndex ? " on" : ""),
-      key: v.name,
+      className: "custom-format-list-row".concat(v.value === formatStr ? " on" : ""),
+      key: v.value,
+      title: v.example,
       onClick: function onClick() {
-        setSelectedFormatIndex(index);
+        return setFormatStr(v.value);
       }
-    }, /*#__PURE__*/React.createElement("div", null, v.name), /*#__PURE__*/React.createElement("div", null, v.value));
+    }, /*#__PURE__*/React.createElement("div", null, v.text), /*#__PURE__*/React.createElement("div", null, v.value));
   }))), /*#__PURE__*/React.createElement("div", {
     className: "leankylin-dialog-box-button-container",
-    style: type === "currency" ? {
-      marginTop: 40
-    } : {
-      marginTop: 30
+    style: {
+      marginTop: 20
     }
   }, /*#__PURE__*/React.createElement("div", {
     className: "leankylin-message-box-button button-primary",
@@ -6661,7 +6643,6 @@ var Toolbar = function Toolbar(_ref) {
     findAndReplace = _locale.findAndReplace,
     comment = _locale.comment,
     fontarray = _locale.fontarray;
-  var toolbarFormat = locale(context).format;
   var sheetWidth = context.luckysheetTableContentHW[0];
   var _useState5 = useState("#000000"),
     _useState6 = _slicedToArray(_useState5, 2),
@@ -6818,44 +6799,13 @@ var Toolbar = function Toolbar(_ref) {
           if (value === "fmtOtherSelf") {
             return /*#__PURE__*/React.createElement(Option, {
               key: value,
-              onMouseEnter: function onMouseEnter(e) {
-                return showSubMenu(e, "more-format");
-              },
-              onMouseLeave: function onMouseLeave(e) {
-                return hideSubMenu(e, "more-format");
-              }
-            }, /*#__PURE__*/React.createElement("div", {
-              className: "leankylin-toolbar-menu-line"
-            }, /*#__PURE__*/React.createElement("div", null, text), /*#__PURE__*/React.createElement(SVGIcon, {
-              name: "rightArrow",
-              width: 14
-            })), /*#__PURE__*/React.createElement("div", {
-              className: "more-format toolbar-item-sub-menu leankylin-toolbar-select",
-              style: {
-                display: "none",
-                width: 150,
-                bottom: 10,
-                top: undefined
-              }
-            }, [{
-              text: toolbarFormat.moreCurrency,
-              onclick: function onclick() {
-                showDialog( /*#__PURE__*/React.createElement(FormatSearch, {
-                  onCancel: hideDialog,
-                  type: "currency"
+              onClick: function onClick() {
+                showDialog( /*#__PURE__*/React.createElement(CustomFormat, {
+                  onCancel: hideDialog
                 }));
                 setOpen(false);
               }
-            }].map(function (v) {
-              return /*#__PURE__*/React.createElement("div", {
-                className: "set-background-item leankylin-toolbar-select-option",
-                key: v.text,
-                onClick: function onClick() {
-                  v.onclick();
-                  setOpen(false);
-                }
-              }, v.text);
-            })));
+            }, text);
           }
           return /*#__PURE__*/React.createElement(Option, {
             key: value,
@@ -7720,7 +7670,7 @@ var Toolbar = function Toolbar(_ref) {
         });
       }
     });
-  }, [toolbar, cell, setContext, refs.cellInput, refs.fxInput, refs.globalCache, defaultFmt, align, handleUndo, handleRedo, flowdata, formula, showDialog, hideDialog, merge, border, freezen, screenshot, sort, textWrap, rotation, filter, splitText, findAndReplace, context.luckysheet_select_save, context.defaultFontSize, context.allowEdit, context.luckysheetPaintModelOn, comment, fontarray, hideSubMenu, showSubMenu, refs.canvas, customColor, customStyle, toolbarFormat.moreCurrency]);
+  }, [toolbar, cell, setContext, refs.cellInput, refs.fxInput, refs.globalCache, defaultFmt, align, handleUndo, handleRedo, flowdata, formula, showDialog, hideDialog, merge, border, freezen, screenshot, sort, textWrap, rotation, filter, splitText, findAndReplace, context.luckysheet_select_save, context.defaultFontSize, context.allowEdit, context.luckysheetPaintModelOn, comment, fontarray, hideSubMenu, showSubMenu, refs.canvas, customColor, customStyle]);
   return /*#__PURE__*/React.createElement("div", {
     ref: containerRef,
     className: "leankylin-toolbar"

package/dist/index.js

@@ -6503,64 +6503,51 @@ var CustomBorder = function CustomBorder(_ref) {
   })))));
 };
 
-var FormatSearch = function FormatSearch(_ref) {
-  var type = _ref.type,
-    _onCancel = _ref.onCancel;
+var CustomFormat = function CustomFormat(_ref) {
+  var _onCancel = _ref.onCancel;
   var _useContext = React.useContext(WorkbookContext),
     context = _useContext.context,
     setContext = _useContext.setContext,
     cellInput = _useContext.refs.cellInput;
-  var _useState = React.useState(2),
+  var _useState = React.useState(function () {
+      var _context$luckysheet_s, _flowdata$row;
+      var flowdata = core.getFlowdata(context);
+      var firstSelection = (_context$luckysheet_s = context.luckysheet_select_save) === null || _context$luckysheet_s === void 0 ? void 0 : _context$luckysheet_s[0];
+      var row = firstSelection === null || firstSelection === void 0 ? void 0 : firstSelection.row_focus;
+      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";
+    }),
     _useState2 = _slicedToArray(_useState, 2),
-    decimalPlace = _useState2[0],
-    setDecimalPlace = _useState2[1];
-  var _useState3 = React.useState(0),
-    _useState4 = _slicedToArray(_useState3, 2),
-    selectedFormatIndex = _useState4[0],
-    setSelectedFormatIndex = _useState4[1];
+    formatStr = _useState2[0],
+    setFormatStr = _useState2[1];
   var _locale = core.locale(context),
     button = _locale.button,
     format = _locale.format,
-    currencyDetail = _locale.currencyDetail,
-    dateFmtList = _locale.dateFmtList;
+    defaultFmt = _locale.defaultFmt;
   var _useDialog = useDialog(),
     showDialog = _useDialog.showDialog;
-  var toolbarFormatAll = React.useMemo(function () {
-    return {
-      currency: currencyDetail,
-      date: dateFmtList,
-      number: []
-    };
-  }, [currencyDetail, dateFmtList]);
-  var toolbarFormat = React.useMemo(function () {
-    return toolbarFormatAll[type];
-  }, [toolbarFormatAll, type]);
-  var tips = ___default['default'].get(format, type);
+  var presetFmtList = React.useMemo(function () {
+    return defaultFmt.filter(function (v) {
+      return v.value !== "split" && v.value !== "fmtOtherSelf";
+    });
+  }, [defaultFmt]);
   var onConfirm = React.useCallback(function () {
-    if (decimalPlace < 0 || decimalPlace > 9) {
+    var fmt = formatStr.trim();
+    if (fmt === "" || fmt === "fmtOtherSelf") {
       _onCancel();
-      showDialog(format.tipDecimalPlaces, "ok");
+      showDialog(format.tipCustomFormat, "ok");
       return;
     }
     setContext(function (ctx) {
-      var index = core.getSheetIndex(ctx, ctx.currentSheetId);
-      if (___default['default'].isNil(index)) return;
-      var selectedFormat = toolbarFormat[selectedFormatIndex].value;
-      ___default['default'].forEach(ctx.luckysheet_select_save, function (selection) {
-        for (var r = selection.row[0]; r <= selection.row[1]; r += 1) {
-          for (var c = selection.column[0]; c <= selection.column[1]; c += 1) {
-            var _ctx$luckysheetfile$i, _ctx$luckysheetfile$i2, _ctx$luckysheetfile$i3, _ctx$luckysheetfile$i4;
-            if (((_ctx$luckysheetfile$i = ctx.luckysheetfile[index].data) === null || _ctx$luckysheetfile$i === void 0 ? void 0 : _ctx$luckysheetfile$i[r][c]) && ((_ctx$luckysheetfile$i2 = ctx.luckysheetfile[index].data) === null || _ctx$luckysheetfile$i2 === void 0 ? void 0 : (_ctx$luckysheetfile$i3 = _ctx$luckysheetfile$i2[r][c]) === null || _ctx$luckysheetfile$i3 === void 0 ? void 0 : (_ctx$luckysheetfile$i4 = _ctx$luckysheetfile$i3.ct) === null || _ctx$luckysheetfile$i4 === void 0 ? void 0 : _ctx$luckysheetfile$i4.t) === "n") {
-              var zero = 0;
-              ctx.luckysheetfile[index].data[r][c].ct.fa = "".concat(selectedFormat).concat(zero.toFixed(decimalPlace));
-              ctx.luckysheetfile[index].data[r][c].m = core.update("".concat(selectedFormat).concat(zero.toFixed(decimalPlace)), ctx.luckysheetfile[index].data[r][c].v);
-            }
-          }
-        }
-      });
+      var d = core.getFlowdata(ctx);
+      if (d == null) return;
+      core.updateFormat(ctx, cellInput.current, d, "ct", fmt);
+      core.cancelNormalSelected(ctx);
       _onCancel();
     });
-  }, [_onCancel, decimalPlace, format.tipDecimalPlaces, selectedFormatIndex, setContext, showDialog, toolbarFormat]);
+  }, [_onCancel, cellInput, format.tipCustomFormat, formatStr, setContext, showDialog]);
   var onCancel = React.useCallback(function () {
     setContext(function (ctx) {
       core.cancelNormalSelected(ctx);
@@ -6570,50 +6557,45 @@ var FormatSearch = function FormatSearch(_ref) {
     });
     _onCancel();
   }, [_onCancel, cellInput, setContext]);
-  return /*#__PURE__*/React__default['default'].createElement("div", {
-    id: "luckysheet-search-format"
-  }, /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "listbox",
-    style: {
-      height: 200
+  var onKeyDown = React.useCallback(function (e) {
+    if (e.key === "Enter") {
+      onConfirm();
     }
+  }, [onConfirm]);
+  return /*#__PURE__*/React__default['default'].createElement("div", {
+    id: "leankylin-custom-format"
   }, /*#__PURE__*/React__default['default'].createElement("div", {
-    style: {
-      marginBottom: 16
-    }
-  }, tips, format.format, "\uFF1A"), /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "inpbox",
-    style: type === "currency" ? {
-      display: "block"
-    } : {
-      display: "none"
-    }
-  }, format.decimalPlaces, "\uFF1A", /*#__PURE__*/React__default['default'].createElement("input", {
-    className: "decimal-places-input",
-    id: "decimal-places-input",
-    min: 0,
-    max: 9,
-    defaultValue: 2,
-    type: "number",
+    className: "custom-format-input-row"
+  }, /*#__PURE__*/React__default['default'].createElement("span", {
+    className: "custom-format-label"
+  }, format.customFormat, "\uFF1A"), /*#__PURE__*/React__default['default'].createElement("input", {
+    className: "custom-format-input",
+    autoFocus: true,
+    placeholder: format.customFormatExample,
+    value: formatStr,
     onChange: function onChange(e) {
-      setDecimalPlace(parseInt(e.target.value, 10));
-    }
+      return setFormatStr(e.target.value);
+    },
+    onKeyDown: onKeyDown
   })), /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "format-list"
-  }, toolbarFormat.map(function (v, index) {
+    className: "custom-format-list"
+  }, /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "custom-format-list-row custom-format-list-header"
+  }, /*#__PURE__*/React__default['default'].createElement("div", null, format.customFormatName), /*#__PURE__*/React__default['default'].createElement("div", null, format.format)), /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "custom-format-list-body"
+  }, presetFmtList.map(function (v) {
     return /*#__PURE__*/React__default['default'].createElement("div", {
-      className: "listBox".concat(index === selectedFormatIndex ? " on" : ""),
-      key: v.name,
+      className: "custom-format-list-row".concat(v.value === formatStr ? " on" : ""),
+      key: v.value,
+      title: v.example,
       onClick: function onClick() {
-        setSelectedFormatIndex(index);
+        return setFormatStr(v.value);
       }
-    }, /*#__PURE__*/React__default['default'].createElement("div", null, v.name), /*#__PURE__*/React__default['default'].createElement("div", null, v.value));
+    }, /*#__PURE__*/React__default['default'].createElement("div", null, v.text), /*#__PURE__*/React__default['default'].createElement("div", null, v.value));
   }))), /*#__PURE__*/React__default['default'].createElement("div", {
     className: "leankylin-dialog-box-button-container",
-    style: type === "currency" ? {
-      marginTop: 40
-    } : {
-      marginTop: 30
+    style: {
+      marginTop: 20
     }
   }, /*#__PURE__*/React__default['default'].createElement("div", {
     className: "leankylin-message-box-button button-primary",
@@ -6671,7 +6653,6 @@ var Toolbar = function Toolbar(_ref) {
     findAndReplace = _locale.findAndReplace,
     comment = _locale.comment,
     fontarray = _locale.fontarray;
-  var toolbarFormat = core.locale(context).format;
   var sheetWidth = context.luckysheetTableContentHW[0];
   var _useState5 = React.useState("#000000"),
     _useState6 = _slicedToArray(_useState5, 2),
@@ -6828,44 +6809,13 @@ var Toolbar = function Toolbar(_ref) {
           if (value === "fmtOtherSelf") {
             return /*#__PURE__*/React__default['default'].createElement(Option, {
               key: value,
-              onMouseEnter: function onMouseEnter(e) {
-                return showSubMenu(e, "more-format");
-              },
-              onMouseLeave: function onMouseLeave(e) {
-                return hideSubMenu(e, "more-format");
-              }
-            }, /*#__PURE__*/React__default['default'].createElement("div", {
-              className: "leankylin-toolbar-menu-line"
-            }, /*#__PURE__*/React__default['default'].createElement("div", null, text), /*#__PURE__*/React__default['default'].createElement(SVGIcon, {
-              name: "rightArrow",
-              width: 14
-            })), /*#__PURE__*/React__default['default'].createElement("div", {
-              className: "more-format toolbar-item-sub-menu leankylin-toolbar-select",
-              style: {
-                display: "none",
-                width: 150,
-                bottom: 10,
-                top: undefined
-              }
-            }, [{
-              text: toolbarFormat.moreCurrency,
-              onclick: function onclick() {
-                showDialog( /*#__PURE__*/React__default['default'].createElement(FormatSearch, {
-                  onCancel: hideDialog,
-                  type: "currency"
+              onClick: function onClick() {
+                showDialog( /*#__PURE__*/React__default['default'].createElement(CustomFormat, {
+                  onCancel: hideDialog
                 }));
                 setOpen(false);
               }
-            }].map(function (v) {
-              return /*#__PURE__*/React__default['default'].createElement("div", {
-                className: "set-background-item leankylin-toolbar-select-option",
-                key: v.text,
-                onClick: function onClick() {
-                  v.onclick();
-                  setOpen(false);
-                }
-              }, v.text);
-            })));
+            }, text);
           }
           return /*#__PURE__*/React__default['default'].createElement(Option, {
             key: value,
@@ -7730,7 +7680,7 @@ var Toolbar = function Toolbar(_ref) {
         });
       }
     });
-  }, [toolbar, cell, setContext, refs.cellInput, refs.fxInput, refs.globalCache, defaultFmt, align, handleUndo, handleRedo, flowdata, formula, showDialog, hideDialog, merge, border, freezen, screenshot, sort, textWrap, rotation, filter, splitText, findAndReplace, context.luckysheet_select_save, context.defaultFontSize, context.allowEdit, context.luckysheetPaintModelOn, comment, fontarray, hideSubMenu, showSubMenu, refs.canvas, customColor, customStyle, toolbarFormat.moreCurrency]);
+  }, [toolbar, cell, setContext, refs.cellInput, refs.fxInput, refs.globalCache, defaultFmt, align, handleUndo, handleRedo, flowdata, formula, showDialog, hideDialog, merge, border, freezen, screenshot, sort, textWrap, rotation, filter, splitText, findAndReplace, context.luckysheet_select_save, context.defaultFontSize, context.allowEdit, context.luckysheetPaintModelOn, comment, fontarray, hideSubMenu, showSubMenu, refs.canvas, customColor, customStyle]);
   return /*#__PURE__*/React__default['default'].createElement("div", {
     ref: containerRef,
     className: "leankylin-toolbar"