@leankylin-sheet/react 7.0.10 → 7.0.12

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.
Files changed (10) hide show
  1. package/dist/components/CustomFormat/index.d.ts +5 -0
  2. package/dist/index.css +57 -10
  3. package/dist/index.esm.css +57 -10
  4. package/dist/index.esm.js +77 -116
  5. package/dist/index.js +76 -115
  6. package/dist/index.umd.css +57 -10
  7. package/dist/index.umd.js +76 -115
  8. package/dist/index.umd.min.css +1 -1
  9. package/dist/index.umd.min.js +1 -1
  10. package/package.json +3 -3
package/dist/index.js CHANGED
@@ -6503,64 +6503,59 @@ var CustomBorder = function CustomBorder(_ref) {
6503
6503
  })))));
6504
6504
  };
6505
6505
 
6506
- var FormatSearch = function FormatSearch(_ref) {
6507
- var type = _ref.type,
6508
- _onCancel = _ref.onCancel;
6506
+ var CustomFormat = function CustomFormat(_ref) {
6507
+ var _onCancel = _ref.onCancel;
6509
6508
  var _useContext = React.useContext(WorkbookContext),
6510
6509
  context = _useContext.context,
6511
6510
  setContext = _useContext.setContext,
6512
6511
  cellInput = _useContext.refs.cellInput;
6513
- var _useState = React.useState(2),
6512
+ var _useState = React.useState(function () {
6513
+ var _context$luckysheet_s, _flowdata$row;
6514
+ var flowdata = core.getFlowdata(context);
6515
+ var firstSelection = (_context$luckysheet_s = context.luckysheet_select_save) === null || _context$luckysheet_s === void 0 ? void 0 : _context$luckysheet_s[0];
6516
+ var row = firstSelection === null || firstSelection === void 0 ? void 0 : firstSelection.row_focus;
6517
+ var col = firstSelection === null || firstSelection === void 0 ? void 0 : firstSelection.column_focus;
6518
+ var cell = flowdata != null && row != null && col != null ? (_flowdata$row = flowdata[row]) === null || _flowdata$row === void 0 ? void 0 : _flowdata$row[col] : undefined;
6519
+ var ct = cell == null ? undefined : core.normalizedCellAttr(cell, "ct");
6520
+ return (ct === null || ct === void 0 ? void 0 : ct.fa) != null && ct.fa !== "fmtOtherSelf" ? ct.fa : "#0.00";
6521
+ }),
6514
6522
  _useState2 = _slicedToArray(_useState, 2),
6515
- decimalPlace = _useState2[0],
6516
- setDecimalPlace = _useState2[1];
6517
- var _useState3 = React.useState(0),
6518
- _useState4 = _slicedToArray(_useState3, 2),
6519
- selectedFormatIndex = _useState4[0],
6520
- setSelectedFormatIndex = _useState4[1];
6523
+ formatStr = _useState2[0],
6524
+ setFormatStr = _useState2[1];
6521
6525
  var _locale = core.locale(context),
6522
6526
  button = _locale.button,
6523
6527
  format = _locale.format,
6524
- currencyDetail = _locale.currencyDetail,
6525
- dateFmtList = _locale.dateFmtList;
6528
+ defaultFmt = _locale.defaultFmt;
6526
6529
  var _useDialog = useDialog(),
6527
6530
  showDialog = _useDialog.showDialog;
6528
- var toolbarFormatAll = React.useMemo(function () {
6529
- return {
6530
- currency: currencyDetail,
6531
- date: dateFmtList,
6532
- number: []
6533
- };
6534
- }, [currencyDetail, dateFmtList]);
6535
- var toolbarFormat = React.useMemo(function () {
6536
- return toolbarFormatAll[type];
6537
- }, [toolbarFormatAll, type]);
6538
- var tips = ___default['default'].get(format, type);
6531
+ var _useState3 = React.useState(""),
6532
+ _useState4 = _slicedToArray(_useState3, 2),
6533
+ errorMsg = _useState4[0],
6534
+ setErrorMsg = _useState4[1];
6535
+ var presetFmtList = React.useMemo(function () {
6536
+ return defaultFmt.filter(function (v) {
6537
+ return v.value !== "split" && v.value !== "fmtOtherSelf";
6538
+ });
6539
+ }, [defaultFmt]);
6539
6540
  var onConfirm = React.useCallback(function () {
6540
- if (decimalPlace < 0 || decimalPlace > 9) {
6541
+ var fmt = formatStr.trim();
6542
+ if (fmt === "" || fmt === "fmtOtherSelf") {
6541
6543
  _onCancel();
6542
- showDialog(format.tipDecimalPlaces, "ok");
6544
+ showDialog(format.tipCustomFormat, "ok");
6543
6545
  return;
6544
6546
  }
6545
- setContext(function (ctx) {
6546
- var index = core.getSheetIndex(ctx, ctx.currentSheetId);
6547
- if (___default['default'].isNil(index)) return;
6548
- var selectedFormat = toolbarFormat[selectedFormatIndex].value;
6549
- ___default['default'].forEach(ctx.luckysheet_select_save, function (selection) {
6550
- for (var r = selection.row[0]; r <= selection.row[1]; r += 1) {
6551
- for (var c = selection.column[0]; c <= selection.column[1]; c += 1) {
6552
- var _ctx$luckysheetfile$i, _ctx$luckysheetfile$i2, _ctx$luckysheetfile$i3, _ctx$luckysheetfile$i4;
6553
- 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") {
6554
- var zero = 0;
6555
- ctx.luckysheetfile[index].data[r][c].ct.fa = "".concat(selectedFormat).concat(zero.toFixed(decimalPlace));
6556
- ctx.luckysheetfile[index].data[r][c].m = core.update("".concat(selectedFormat).concat(zero.toFixed(decimalPlace)), ctx.luckysheetfile[index].data[r][c].v);
6557
- }
6558
- }
6559
- }
6547
+ try {
6548
+ setContext(function (ctx) {
6549
+ var d = core.getFlowdata(ctx);
6550
+ if (d == null) return;
6551
+ core.updateFormat(ctx, cellInput.current, d, "ct", fmt);
6552
+ core.cancelNormalSelected(ctx);
6560
6553
  });
6561
6554
  _onCancel();
6562
- });
6563
- }, [_onCancel, decimalPlace, format.tipDecimalPlaces, selectedFormatIndex, setContext, showDialog, toolbarFormat]);
6555
+ } catch (error) {
6556
+ setErrorMsg(format.tipUnsupportedFormat);
6557
+ }
6558
+ }, [_onCancel, cellInput, format.tipCustomFormat, format.tipUnsupportedFormat, formatStr, setContext, showDialog]);
6564
6559
  var onCancel = React.useCallback(function () {
6565
6560
  setContext(function (ctx) {
6566
6561
  core.cancelNormalSelected(ctx);
@@ -6570,50 +6565,48 @@ var FormatSearch = function FormatSearch(_ref) {
6570
6565
  });
6571
6566
  _onCancel();
6572
6567
  }, [_onCancel, cellInput, setContext]);
6573
- return /*#__PURE__*/React__default['default'].createElement("div", {
6574
- id: "luckysheet-search-format"
6575
- }, /*#__PURE__*/React__default['default'].createElement("div", {
6576
- className: "listbox",
6577
- style: {
6578
- height: 200
6568
+ var onKeyDown = React.useCallback(function (e) {
6569
+ if (e.key === "Enter") {
6570
+ onConfirm();
6579
6571
  }
6572
+ }, [onConfirm]);
6573
+ return /*#__PURE__*/React__default['default'].createElement("div", {
6574
+ id: "leankylin-custom-format"
6580
6575
  }, /*#__PURE__*/React__default['default'].createElement("div", {
6581
- style: {
6582
- marginBottom: 16
6583
- }
6584
- }, tips, format.format, "\uFF1A"), /*#__PURE__*/React__default['default'].createElement("div", {
6585
- className: "inpbox",
6586
- style: type === "currency" ? {
6587
- display: "block"
6588
- } : {
6589
- display: "none"
6590
- }
6591
- }, format.decimalPlaces, "\uFF1A", /*#__PURE__*/React__default['default'].createElement("input", {
6592
- className: "decimal-places-input",
6593
- id: "decimal-places-input",
6594
- min: 0,
6595
- max: 9,
6596
- defaultValue: 2,
6597
- type: "number",
6576
+ className: "custom-format-input-row"
6577
+ }, /*#__PURE__*/React__default['default'].createElement("span", {
6578
+ className: "custom-format-label"
6579
+ }, format.customFormat, "\uFF1A"), /*#__PURE__*/React__default['default'].createElement("input", {
6580
+ className: "custom-format-input",
6581
+ autoFocus: true,
6582
+ placeholder: format.customFormatExample,
6583
+ value: formatStr,
6598
6584
  onChange: function onChange(e) {
6599
- setDecimalPlace(parseInt(e.target.value, 10));
6600
- }
6601
- })), /*#__PURE__*/React__default['default'].createElement("div", {
6602
- className: "format-list"
6603
- }, toolbarFormat.map(function (v, index) {
6585
+ setFormatStr(e.target.value);
6586
+ setErrorMsg("");
6587
+ },
6588
+ onKeyDown: onKeyDown
6589
+ })), errorMsg !== "" && ( /*#__PURE__*/React__default['default'].createElement("div", {
6590
+ className: "custom-format-error"
6591
+ }, errorMsg)), /*#__PURE__*/React__default['default'].createElement("div", {
6592
+ className: "custom-format-list"
6593
+ }, /*#__PURE__*/React__default['default'].createElement("div", {
6594
+ className: "custom-format-list-row custom-format-list-header"
6595
+ }, /*#__PURE__*/React__default['default'].createElement("div", null, format.customFormatName), /*#__PURE__*/React__default['default'].createElement("div", null, format.format)), /*#__PURE__*/React__default['default'].createElement("div", {
6596
+ className: "custom-format-list-body"
6597
+ }, presetFmtList.map(function (v) {
6604
6598
  return /*#__PURE__*/React__default['default'].createElement("div", {
6605
- className: "listBox".concat(index === selectedFormatIndex ? " on" : ""),
6606
- key: v.name,
6599
+ className: "custom-format-list-row".concat(v.value === formatStr ? " on" : ""),
6600
+ key: v.value,
6601
+ title: v.example,
6607
6602
  onClick: function onClick() {
6608
- setSelectedFormatIndex(index);
6603
+ return setFormatStr(v.value);
6609
6604
  }
6610
- }, /*#__PURE__*/React__default['default'].createElement("div", null, v.name), /*#__PURE__*/React__default['default'].createElement("div", null, v.value));
6605
+ }, /*#__PURE__*/React__default['default'].createElement("div", null, v.text), /*#__PURE__*/React__default['default'].createElement("div", null, v.value));
6611
6606
  }))), /*#__PURE__*/React__default['default'].createElement("div", {
6612
6607
  className: "leankylin-dialog-box-button-container",
6613
- style: type === "currency" ? {
6614
- marginTop: 40
6615
- } : {
6616
- marginTop: 30
6608
+ style: {
6609
+ marginTop: 20
6617
6610
  }
6618
6611
  }, /*#__PURE__*/React__default['default'].createElement("div", {
6619
6612
  className: "leankylin-message-box-button button-primary",
@@ -6671,7 +6664,6 @@ var Toolbar = function Toolbar(_ref) {
6671
6664
  findAndReplace = _locale.findAndReplace,
6672
6665
  comment = _locale.comment,
6673
6666
  fontarray = _locale.fontarray;
6674
- var toolbarFormat = core.locale(context).format;
6675
6667
  var sheetWidth = context.luckysheetTableContentHW[0];
6676
6668
  var _useState5 = React.useState("#000000"),
6677
6669
  _useState6 = _slicedToArray(_useState5, 2),
@@ -6828,44 +6820,13 @@ var Toolbar = function Toolbar(_ref) {
6828
6820
  if (value === "fmtOtherSelf") {
6829
6821
  return /*#__PURE__*/React__default['default'].createElement(Option, {
6830
6822
  key: value,
6831
- onMouseEnter: function onMouseEnter(e) {
6832
- return showSubMenu(e, "more-format");
6833
- },
6834
- onMouseLeave: function onMouseLeave(e) {
6835
- return hideSubMenu(e, "more-format");
6836
- }
6837
- }, /*#__PURE__*/React__default['default'].createElement("div", {
6838
- className: "leankylin-toolbar-menu-line"
6839
- }, /*#__PURE__*/React__default['default'].createElement("div", null, text), /*#__PURE__*/React__default['default'].createElement(SVGIcon, {
6840
- name: "rightArrow",
6841
- width: 14
6842
- })), /*#__PURE__*/React__default['default'].createElement("div", {
6843
- className: "more-format toolbar-item-sub-menu leankylin-toolbar-select",
6844
- style: {
6845
- display: "none",
6846
- width: 150,
6847
- bottom: 10,
6848
- top: undefined
6849
- }
6850
- }, [{
6851
- text: toolbarFormat.moreCurrency,
6852
- onclick: function onclick() {
6853
- showDialog( /*#__PURE__*/React__default['default'].createElement(FormatSearch, {
6854
- onCancel: hideDialog,
6855
- type: "currency"
6823
+ onClick: function onClick() {
6824
+ showDialog( /*#__PURE__*/React__default['default'].createElement(CustomFormat, {
6825
+ onCancel: hideDialog
6856
6826
  }));
6857
6827
  setOpen(false);
6858
6828
  }
6859
- }].map(function (v) {
6860
- return /*#__PURE__*/React__default['default'].createElement("div", {
6861
- className: "set-background-item leankylin-toolbar-select-option",
6862
- key: v.text,
6863
- onClick: function onClick() {
6864
- v.onclick();
6865
- setOpen(false);
6866
- }
6867
- }, v.text);
6868
- })));
6829
+ }, text);
6869
6830
  }
6870
6831
  return /*#__PURE__*/React__default['default'].createElement(Option, {
6871
6832
  key: value,
@@ -7730,7 +7691,7 @@ var Toolbar = function Toolbar(_ref) {
7730
7691
  });
7731
7692
  }
7732
7693
  });
7733
- }, [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]);
7694
+ }, [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]);
7734
7695
  return /*#__PURE__*/React__default['default'].createElement("div", {
7735
7696
  ref: containerRef,
7736
7697
  className: "leankylin-toolbar"
package/dist/index.umd.css CHANGED
@@ -3176,28 +3176,75 @@ label {
3176
3176
  background-color: #fff;
3177
3177
  border: 1px solid #ccc;
3178
3178
  }
3179
- .listBox {
3179
+ #leankylin-custom-format {
3180
+ width: 360px;
3181
+ }
3182
+
3183
+ .custom-format-input-row {
3180
3184
  display: flex;
3181
- justify-content: space-between;
3185
+ align-items: center;
3182
3186
  }
3183
3187
 
3184
- .inpbox {
3185
- margin-bottom: 10px;
3188
+ .custom-format-label {
3189
+ flex-shrink: 0;
3186
3190
  }
3187
3191
 
3188
- .decimal-places-input {
3189
- width: 70px;
3192
+ .custom-format-input {
3193
+ flex: 1;
3194
+ height: 28px;
3195
+ padding: 0 8px;
3196
+ border: 1px solid #d4d4d4;
3197
+ border-radius: 2px;
3198
+ outline: none;
3190
3199
  }
3191
3200
 
3201
+ .custom-format-input:focus {
3202
+ border-color: #1a73e8;
3203
+ }
3192
3204
 
3193
- .format-list {
3194
- width: 300px;
3195
- height: 170px;
3205
+ .custom-format-error {
3206
+ margin-top: 6px;
3207
+ color: #d93025;
3208
+ font-size: 12px;
3209
+ line-height: 16px;
3210
+ }
3211
+
3212
+ .custom-format-list {
3213
+ margin-top: 10px;
3196
3214
  border: 1px solid #d4d4d4;
3197
- overflow-y: scroll;
3215
+ border-radius: 2px;
3216
+ font-size: 12px;
3198
3217
  }
3199
3218
 
3219
+ .custom-format-list-header {
3220
+ background: #f5f6f7;
3221
+ font-weight: 600;
3222
+ cursor: default;
3223
+ }
3200
3224
 
3225
+ .custom-format-list-body {
3226
+ height: 180px;
3227
+ overflow-y: auto;
3228
+ }
3229
+
3230
+ .custom-format-list-row {
3231
+ display: flex;
3232
+ justify-content: space-between;
3233
+ padding: 4px 10px;
3234
+ cursor: pointer;
3235
+ }
3236
+
3237
+ .custom-format-list-row > div:last-child {
3238
+ color: #888;
3239
+ }
3240
+
3241
+ .custom-format-list-row:hover {
3242
+ background: #f0f4ff;
3243
+ }
3244
+
3245
+ .custom-format-list-row.on {
3246
+ background: #e3edfd;
3247
+ }
3201
3248
 
3202
3249
  .leankylin-fx-editor {
3203
3250
  display: flex;
package/dist/index.umd.js CHANGED
@@ -25577,64 +25577,59 @@
25577
25577
  })))));
25578
25578
  };
25579
25579
 
25580
- var FormatSearch = function FormatSearch(_ref) {
25581
- var type = _ref.type,
25582
- _onCancel = _ref.onCancel;
25580
+ var CustomFormat = function CustomFormat(_ref) {
25581
+ var _onCancel = _ref.onCancel;
25583
25582
  var _useContext = React.useContext(WorkbookContext),
25584
25583
  context = _useContext.context,
25585
25584
  setContext = _useContext.setContext,
25586
25585
  cellInput = _useContext.refs.cellInput;
25587
- var _useState = React.useState(2),
25586
+ var _useState = React.useState(function () {
25587
+ var _context$luckysheet_s, _flowdata$row;
25588
+ var flowdata = core.getFlowdata(context);
25589
+ var firstSelection = (_context$luckysheet_s = context.luckysheet_select_save) === null || _context$luckysheet_s === void 0 ? void 0 : _context$luckysheet_s[0];
25590
+ var row = firstSelection === null || firstSelection === void 0 ? void 0 : firstSelection.row_focus;
25591
+ var col = firstSelection === null || firstSelection === void 0 ? void 0 : firstSelection.column_focus;
25592
+ var cell = flowdata != null && row != null && col != null ? (_flowdata$row = flowdata[row]) === null || _flowdata$row === void 0 ? void 0 : _flowdata$row[col] : undefined;
25593
+ var ct = cell == null ? undefined : core.normalizedCellAttr(cell, "ct");
25594
+ return (ct === null || ct === void 0 ? void 0 : ct.fa) != null && ct.fa !== "fmtOtherSelf" ? ct.fa : "#0.00";
25595
+ }),
25588
25596
  _useState2 = _slicedToArray(_useState, 2),
25589
- decimalPlace = _useState2[0],
25590
- setDecimalPlace = _useState2[1];
25591
- var _useState3 = React.useState(0),
25592
- _useState4 = _slicedToArray(_useState3, 2),
25593
- selectedFormatIndex = _useState4[0],
25594
- setSelectedFormatIndex = _useState4[1];
25597
+ formatStr = _useState2[0],
25598
+ setFormatStr = _useState2[1];
25595
25599
  var _locale = core.locale(context),
25596
25600
  button = _locale.button,
25597
25601
  format = _locale.format,
25598
- currencyDetail = _locale.currencyDetail,
25599
- dateFmtList = _locale.dateFmtList;
25602
+ defaultFmt = _locale.defaultFmt;
25600
25603
  var _useDialog = useDialog(),
25601
25604
  showDialog = _useDialog.showDialog;
25602
- var toolbarFormatAll = React.useMemo(function () {
25603
- return {
25604
- currency: currencyDetail,
25605
- date: dateFmtList,
25606
- number: []
25607
- };
25608
- }, [currencyDetail, dateFmtList]);
25609
- var toolbarFormat = React.useMemo(function () {
25610
- return toolbarFormatAll[type];
25611
- }, [toolbarFormatAll, type]);
25612
- var tips = lodash.get(format, type);
25605
+ var _useState3 = React.useState(""),
25606
+ _useState4 = _slicedToArray(_useState3, 2),
25607
+ errorMsg = _useState4[0],
25608
+ setErrorMsg = _useState4[1];
25609
+ var presetFmtList = React.useMemo(function () {
25610
+ return defaultFmt.filter(function (v) {
25611
+ return v.value !== "split" && v.value !== "fmtOtherSelf";
25612
+ });
25613
+ }, [defaultFmt]);
25613
25614
  var onConfirm = React.useCallback(function () {
25614
- if (decimalPlace < 0 || decimalPlace > 9) {
25615
+ var fmt = formatStr.trim();
25616
+ if (fmt === "" || fmt === "fmtOtherSelf") {
25615
25617
  _onCancel();
25616
- showDialog(format.tipDecimalPlaces, "ok");
25618
+ showDialog(format.tipCustomFormat, "ok");
25617
25619
  return;
25618
25620
  }
25619
- setContext(function (ctx) {
25620
- var index = core.getSheetIndex(ctx, ctx.currentSheetId);
25621
- if (lodash.isNil(index)) return;
25622
- var selectedFormat = toolbarFormat[selectedFormatIndex].value;
25623
- lodash.forEach(ctx.luckysheet_select_save, function (selection) {
25624
- for (var r = selection.row[0]; r <= selection.row[1]; r += 1) {
25625
- for (var c = selection.column[0]; c <= selection.column[1]; c += 1) {
25626
- var _ctx$luckysheetfile$i, _ctx$luckysheetfile$i2, _ctx$luckysheetfile$i3, _ctx$luckysheetfile$i4;
25627
- 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") {
25628
- var zero = 0;
25629
- ctx.luckysheetfile[index].data[r][c].ct.fa = "".concat(selectedFormat).concat(zero.toFixed(decimalPlace));
25630
- ctx.luckysheetfile[index].data[r][c].m = core.update("".concat(selectedFormat).concat(zero.toFixed(decimalPlace)), ctx.luckysheetfile[index].data[r][c].v);
25631
- }
25632
- }
25633
- }
25621
+ try {
25622
+ setContext(function (ctx) {
25623
+ var d = core.getFlowdata(ctx);
25624
+ if (d == null) return;
25625
+ core.updateFormat(ctx, cellInput.current, d, "ct", fmt);
25626
+ core.cancelNormalSelected(ctx);
25634
25627
  });
25635
25628
  _onCancel();
25636
- });
25637
- }, [_onCancel, decimalPlace, format.tipDecimalPlaces, selectedFormatIndex, setContext, showDialog, toolbarFormat]);
25629
+ } catch (error) {
25630
+ setErrorMsg(format.tipUnsupportedFormat);
25631
+ }
25632
+ }, [_onCancel, cellInput, format.tipCustomFormat, format.tipUnsupportedFormat, formatStr, setContext, showDialog]);
25638
25633
  var onCancel = React.useCallback(function () {
25639
25634
  setContext(function (ctx) {
25640
25635
  core.cancelNormalSelected(ctx);
@@ -25644,50 +25639,48 @@
25644
25639
  });
25645
25640
  _onCancel();
25646
25641
  }, [_onCancel, cellInput, setContext]);
25647
- return /*#__PURE__*/React__default['default'].createElement("div", {
25648
- id: "luckysheet-search-format"
25649
- }, /*#__PURE__*/React__default['default'].createElement("div", {
25650
- className: "listbox",
25651
- style: {
25652
- height: 200
25642
+ var onKeyDown = React.useCallback(function (e) {
25643
+ if (e.key === "Enter") {
25644
+ onConfirm();
25653
25645
  }
25646
+ }, [onConfirm]);
25647
+ return /*#__PURE__*/React__default['default'].createElement("div", {
25648
+ id: "leankylin-custom-format"
25654
25649
  }, /*#__PURE__*/React__default['default'].createElement("div", {
25655
- style: {
25656
- marginBottom: 16
25657
- }
25658
- }, tips, format.format, "\uFF1A"), /*#__PURE__*/React__default['default'].createElement("div", {
25659
- className: "inpbox",
25660
- style: type === "currency" ? {
25661
- display: "block"
25662
- } : {
25663
- display: "none"
25664
- }
25665
- }, format.decimalPlaces, "\uFF1A", /*#__PURE__*/React__default['default'].createElement("input", {
25666
- className: "decimal-places-input",
25667
- id: "decimal-places-input",
25668
- min: 0,
25669
- max: 9,
25670
- defaultValue: 2,
25671
- type: "number",
25650
+ className: "custom-format-input-row"
25651
+ }, /*#__PURE__*/React__default['default'].createElement("span", {
25652
+ className: "custom-format-label"
25653
+ }, format.customFormat, "\uFF1A"), /*#__PURE__*/React__default['default'].createElement("input", {
25654
+ className: "custom-format-input",
25655
+ autoFocus: true,
25656
+ placeholder: format.customFormatExample,
25657
+ value: formatStr,
25672
25658
  onChange: function onChange(e) {
25673
- setDecimalPlace(parseInt(e.target.value, 10));
25674
- }
25675
- })), /*#__PURE__*/React__default['default'].createElement("div", {
25676
- className: "format-list"
25677
- }, toolbarFormat.map(function (v, index) {
25659
+ setFormatStr(e.target.value);
25660
+ setErrorMsg("");
25661
+ },
25662
+ onKeyDown: onKeyDown
25663
+ })), errorMsg !== "" && ( /*#__PURE__*/React__default['default'].createElement("div", {
25664
+ className: "custom-format-error"
25665
+ }, errorMsg)), /*#__PURE__*/React__default['default'].createElement("div", {
25666
+ className: "custom-format-list"
25667
+ }, /*#__PURE__*/React__default['default'].createElement("div", {
25668
+ className: "custom-format-list-row custom-format-list-header"
25669
+ }, /*#__PURE__*/React__default['default'].createElement("div", null, format.customFormatName), /*#__PURE__*/React__default['default'].createElement("div", null, format.format)), /*#__PURE__*/React__default['default'].createElement("div", {
25670
+ className: "custom-format-list-body"
25671
+ }, presetFmtList.map(function (v) {
25678
25672
  return /*#__PURE__*/React__default['default'].createElement("div", {
25679
- className: "listBox".concat(index === selectedFormatIndex ? " on" : ""),
25680
- key: v.name,
25673
+ className: "custom-format-list-row".concat(v.value === formatStr ? " on" : ""),
25674
+ key: v.value,
25675
+ title: v.example,
25681
25676
  onClick: function onClick() {
25682
- setSelectedFormatIndex(index);
25677
+ return setFormatStr(v.value);
25683
25678
  }
25684
- }, /*#__PURE__*/React__default['default'].createElement("div", null, v.name), /*#__PURE__*/React__default['default'].createElement("div", null, v.value));
25679
+ }, /*#__PURE__*/React__default['default'].createElement("div", null, v.text), /*#__PURE__*/React__default['default'].createElement("div", null, v.value));
25685
25680
  }))), /*#__PURE__*/React__default['default'].createElement("div", {
25686
25681
  className: "leankylin-dialog-box-button-container",
25687
- style: type === "currency" ? {
25688
- marginTop: 40
25689
- } : {
25690
- marginTop: 30
25682
+ style: {
25683
+ marginTop: 20
25691
25684
  }
25692
25685
  }, /*#__PURE__*/React__default['default'].createElement("div", {
25693
25686
  className: "leankylin-message-box-button button-primary",
@@ -25745,7 +25738,6 @@
25745
25738
  findAndReplace = _locale.findAndReplace,
25746
25739
  comment = _locale.comment,
25747
25740
  fontarray = _locale.fontarray;
25748
- var toolbarFormat = core.locale(context).format;
25749
25741
  var sheetWidth = context.luckysheetTableContentHW[0];
25750
25742
  var _useState5 = React.useState("#000000"),
25751
25743
  _useState6 = _slicedToArray(_useState5, 2),
@@ -25902,44 +25894,13 @@
25902
25894
  if (value === "fmtOtherSelf") {
25903
25895
  return /*#__PURE__*/React__default['default'].createElement(Option, {
25904
25896
  key: value,
25905
- onMouseEnter: function onMouseEnter(e) {
25906
- return showSubMenu(e, "more-format");
25907
- },
25908
- onMouseLeave: function onMouseLeave(e) {
25909
- return hideSubMenu(e, "more-format");
25910
- }
25911
- }, /*#__PURE__*/React__default['default'].createElement("div", {
25912
- className: "leankylin-toolbar-menu-line"
25913
- }, /*#__PURE__*/React__default['default'].createElement("div", null, text), /*#__PURE__*/React__default['default'].createElement(SVGIcon, {
25914
- name: "rightArrow",
25915
- width: 14
25916
- })), /*#__PURE__*/React__default['default'].createElement("div", {
25917
- className: "more-format toolbar-item-sub-menu leankylin-toolbar-select",
25918
- style: {
25919
- display: "none",
25920
- width: 150,
25921
- bottom: 10,
25922
- top: undefined
25923
- }
25924
- }, [{
25925
- text: toolbarFormat.moreCurrency,
25926
- onclick: function onclick() {
25927
- showDialog( /*#__PURE__*/React__default['default'].createElement(FormatSearch, {
25928
- onCancel: hideDialog,
25929
- type: "currency"
25897
+ onClick: function onClick() {
25898
+ showDialog( /*#__PURE__*/React__default['default'].createElement(CustomFormat, {
25899
+ onCancel: hideDialog
25930
25900
  }));
25931
25901
  setOpen(false);
25932
25902
  }
25933
- }].map(function (v) {
25934
- return /*#__PURE__*/React__default['default'].createElement("div", {
25935
- className: "set-background-item leankylin-toolbar-select-option",
25936
- key: v.text,
25937
- onClick: function onClick() {
25938
- v.onclick();
25939
- setOpen(false);
25940
- }
25941
- }, v.text);
25942
- })));
25903
+ }, text);
25943
25904
  }
25944
25905
  return /*#__PURE__*/React__default['default'].createElement(Option, {
25945
25906
  key: value,
@@ -26804,7 +26765,7 @@
26804
26765
  });
26805
26766
  }
26806
26767
  });
26807
- }, [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]);
26768
+ }, [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]);
26808
26769
  return /*#__PURE__*/React__default['default'].createElement("div", {
26809
26770
  ref: containerRef,
26810
26771
  className: "leankylin-toolbar"