@fileverse-dev/fortune-react 1.1.0 → 1.1.1

package/lib/components/LinkEidtCard/index.js

@@ -0,0 +1,247 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.LinkEditCard = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _fortuneCore = require("@fileverse-dev/fortune-core");
+var _ui = require("@fileverse/ui");
+require("./index.css");
+var _lodash = _interopRequireDefault(require("lodash"));
+var _context = _interopRequireDefault(require("../../context"));
+var _SVGIcon = _interopRequireDefault(require("../SVGIcon"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+var __assign = void 0 && (void 0).__assign || function () {
+  __assign = Object.assign || function (t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+    }
+    return t;
+  };
+  return __assign.apply(this, arguments);
+};
+var LinkEditCard = exports.LinkEditCard = function LinkEditCard(_a) {
+  var r = _a.r,
+    c = _a.c,
+    rc = _a.rc,
+    originText = _a.originText,
+    originType = _a.originType,
+    originAddress = _a.originAddress,
+    isEditing = _a.isEditing,
+    position = _a.position;
+  var _b = (0, _react.useContext)(_context.default),
+    context = _b.context,
+    setContext = _b.setContext,
+    refs = _b.refs;
+  var _c = (0, _react.useState)(originText),
+    linkText = _c[0],
+    setLinkText = _c[1];
+  var _d = (0, _react.useState)(originAddress),
+    linkAddress = _d[0],
+    setLinkAddress = _d[1];
+  var _e = (0, _react.useState)(originType),
+    linkType = _e[0],
+    setLinkType = _e[1];
+  var _f = (0, _fortuneCore.locale)(context),
+    insertLink = _f.insertLink,
+    linkTypeList = _f.linkTypeList;
+  var isLinkAddressValid = (0, _fortuneCore.isLinkValid)(context, linkType, linkAddress);
+  var isButtonDisabled = (0, _react.useMemo)(function () {
+    if (!linkText.trim()) return true;
+    if (linkType === "webpage") {
+      return !linkAddress.trim() || !isLinkAddressValid.isValid;
+    }
+    if (linkType === "sheet") {
+      return !linkAddress.trim();
+    }
+    return false;
+  }, [linkText, linkAddress, linkType, isLinkAddressValid.isValid]);
+  var hideLinkCard = (0, _react.useCallback)(function () {
+    _lodash.default.set(refs.globalCache, "linkCard.mouseEnter", false);
+    setContext(function (draftCtx) {
+      draftCtx.linkCard = undefined;
+    });
+  }, [refs.globalCache, setContext]);
+  var containerEvent = (0, _react.useMemo)(function () {
+    return {
+      onMouseEnter: function onMouseEnter() {
+        return _lodash.default.set(refs.globalCache, "linkCard.mouseEnter", true);
+      },
+      onMouseLeave: function onMouseLeave() {
+        return _lodash.default.set(refs.globalCache, "linkCard.mouseEnter", false);
+      },
+      onMouseDown: function onMouseDown(e) {
+        return e.stopPropagation();
+      },
+      onMouseMove: function onMouseMove(e) {
+        return e.stopPropagation();
+      },
+      onMouseUp: function onMouseUp(e) {
+        return e.stopPropagation();
+      },
+      onKeyDown: function onKeyDown(e) {
+        return e.stopPropagation();
+      },
+      onDoubleClick: function onDoubleClick(e) {
+        return e.stopPropagation();
+      }
+    };
+  }, [refs.globalCache]);
+  var renderToolbarButton = (0, _react.useCallback)(function (iconId, onClick) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "fortune-toolbar-button",
+      onClick: onClick,
+      tabIndex: 0
+    }, /*#__PURE__*/_react.default.createElement(_SVGIcon.default, {
+      name: iconId,
+      style: {
+        width: 16,
+        height: 16
+      }
+    }));
+  }, []);
+  (0, _react.useLayoutEffect)(function () {
+    setLinkAddress(originAddress);
+    setLinkText(originText);
+    setLinkType(originType);
+  }, [rc, originAddress, originText, originType]);
+  if (!isEditing) {
+    return /*#__PURE__*/_react.default.createElement("div", __assign({}, containerEvent, {
+      onKeyDown: function onKeyDown(e) {
+        e.stopPropagation();
+      },
+      className: "fortune-link-modify-modal link-toolbar",
+      style: {
+        left: position.cellLeft + 20,
+        top: position.cellBottom - 5
+      }
+    }), /*#__PURE__*/_react.default.createElement("div", {
+      className: "link-content",
+      onClick: function onClick() {
+        setContext(function (draftCtx) {
+          return (0, _fortuneCore.goToLink)(draftCtx, r, c, linkType, linkAddress, refs.scrollbarX.current, refs.scrollbarY.current);
+        });
+      },
+      tabIndex: 0
+    }, linkType === "webpage" ? insertLink.openLink : (0, _fortuneCore.replaceHtml)(insertLink.goTo, {
+      linkAddress: linkAddress
+    })), context.allowEdit === true && /*#__PURE__*/_react.default.createElement("div", {
+      className: "divider"
+    }), context.allowEdit === true && linkType === "webpage" && renderToolbarButton("copy", function () {
+      navigator.clipboard.writeText(originAddress);
+      hideLinkCard();
+    }), context.allowEdit === true && renderToolbarButton("pencil", function () {
+      return setContext(function (draftCtx) {
+        if (draftCtx.linkCard != null && draftCtx.allowEdit) {
+          draftCtx.linkCard.isEditing = true;
+        }
+      });
+    }), context.allowEdit === true && /*#__PURE__*/_react.default.createElement("div", {
+      className: "divider"
+    }), context.allowEdit === true && renderToolbarButton("unlink", function () {
+      return setContext(function (draftCtx) {
+        _lodash.default.set(refs.globalCache, "linkCard.mouseEnter", false);
+        (0, _fortuneCore.removeHyperlink)(draftCtx, r, c);
+      });
+    }));
+  }
+  return /*#__PURE__*/_react.default.createElement("div", __assign({
+    className: "fortune-link-card",
+    style: {
+      left: position.cellLeft + 20,
+      top: position.cellBottom
+    }
+  }, containerEvent), /*#__PURE__*/_react.default.createElement(_ui.Select, {
+    value: linkType,
+    onValueChange: function onValueChange(value) {
+      if (value === "sheet") {
+        if (!linkText) {
+          setLinkText(context.luckysheetfile[0].name);
+        }
+        setLinkAddress(context.luckysheetfile[0].name);
+      } else {
+        setLinkAddress("");
+      }
+      setLinkType(value);
+    }
+  }, /*#__PURE__*/_react.default.createElement(_ui.SelectTrigger, {
+    className: "fortune-link-type-select"
+  }, /*#__PURE__*/_react.default.createElement(_ui.SelectValue, null)), /*#__PURE__*/_react.default.createElement(_ui.SelectContent, {
+    className: "fortune-link-type-dropdown"
+  }, linkTypeList.filter(function (type) {
+    return type.value !== "cellrange";
+  }).map(function (type) {
+    return /*#__PURE__*/_react.default.createElement(_ui.SelectItem, {
+      key: type.value,
+      value: type.value
+    }, type.text);
+  }))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "fortune-input-with-icon"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "input-icon"
+  }, /*#__PURE__*/_react.default.createElement(_ui.LucideIcon, {
+    name: "ALargeSmall"
+  })), /*#__PURE__*/_react.default.createElement(_ui.TextField, {
+    placeholder: "Display text",
+    value: linkText,
+    onChange: function onChange(e) {
+      return setLinkText(e.target.value);
+    },
+    className: "fortune-link-input"
+  })), linkType === "webpage" && (/*#__PURE__*/_react.default.createElement("div", {
+    className: "fortune-input-with-icon"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "input-icon"
+  }, /*#__PURE__*/_react.default.createElement(_SVGIcon.default, {
+    name: "link",
+    width: 16,
+    height: 16
+  })), /*#__PURE__*/_react.default.createElement(_ui.TextField, {
+    placeholder: "Paste URL",
+    value: linkAddress,
+    onChange: function onChange(e) {
+      return setLinkAddress(e.target.value);
+    },
+    className: "fortune-link-input ".concat(!linkAddress || isLinkAddressValid.isValid ? "" : "error-input")
+  }))), linkType === "sheet" && (/*#__PURE__*/_react.default.createElement("div", {
+    className: "fortune-input-with-icon"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "input-icon"
+  }, /*#__PURE__*/_react.default.createElement(_SVGIcon.default, {
+    name: "link",
+    width: 16,
+    height: 16
+  })), /*#__PURE__*/_react.default.createElement(_ui.Select, {
+    onValueChange: function onValueChange(value) {
+      if (!linkText) setLinkText(value);
+      setLinkAddress(value);
+    },
+    value: linkAddress
+  }, /*#__PURE__*/_react.default.createElement(_ui.SelectTrigger, {
+    className: "fortune-sheet-select"
+  }, /*#__PURE__*/_react.default.createElement(_ui.SelectValue, {
+    placeholder: "[Sheet name]"
+  })), /*#__PURE__*/_react.default.createElement(_ui.SelectContent, {
+    className: "fortune-sheet-dropdown"
+  }, context.luckysheetfile.map(function (sheet) {
+    return /*#__PURE__*/_react.default.createElement(_ui.SelectItem, {
+      key: sheet.id,
+      value: sheet.name
+    }, sheet.name);
+  }))))), /*#__PURE__*/_react.default.createElement(_ui.Button, {
+    className: "fortune-insert-button",
+    disabled: isButtonDisabled,
+    onClick: function onClick() {
+      if (isButtonDisabled) return;
+      _lodash.default.set(refs.globalCache, "linkCard.mouseEnter", false);
+      setContext(function (draftCtx) {
+        return (0, _fortuneCore.saveHyperlink)(draftCtx, r, c, linkText, linkType, linkAddress);
+      });
+    }
+  }, "Insert link"));
+};
+var _default = exports.default = LinkEditCard;

package/lib/components/LocationCondition/index.css

@@ -0,0 +1,74 @@
+label {
+  cursor: default;
+}
+#fortune-location-condition {
+  min-width: 500px;
+}
+#fortune-location-condition .title {
+  background-color: #fff;
+  color: #000;
+  cursor: default;
+  font-size: 16px;
+  font-weight: normal;
+  line-height: 48px;
+}
+#fortune-location-condition .listbox {
+  border: 1px solid #dfdfdf;
+  padding: 10px;
+  font-size: 14px;
+  color: #000;
+}
+#fortune-location-condition .listbox .listItem {
+  padding: 5px 0;
+}
+#fortune-location-condition .listbox .listItem input[type="radio"] {
+  float: left;
+  margin-top: 5px;
+}
+#fortune-location-condition .listItem {
+  padding: 5px 0;
+}
+#fortune-location-condition .listItem .subItem {
+  height: 30px;
+  padding: 0 10px;
+  display: block;
+}
+#fortune-location-condition input[type="radio"] {
+  float: left;
+  margin-top: 3px;
+}
+#fortune-location-condition .listbox .listItem .subbox {
+  height: 30px;
+  padding: 0 10px;
+}
+#fortune-location-condition .listbox .listItem .subbox .subItem {
+  float: left;
+  margin-right: 5px;
+}
+#fortune-location-condition .button-basic {
+  display: inline-block;
+  margin-bottom: 0;
+  font-weight: 400;
+  text-align: center;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  white-space: nowrap;
+  padding: 4px 8px;
+  font-size: 14px;
+  line-height: 1.42857143;
+  border-radius: 2px;
+  user-select: none;
+  margin-top: 10px;
+}
+#fortune-location-condition .button-primary {
+  background: #0188fb;
+  border: 1px solid #0188fb;
+  color: #fff;
+  margin-right: 10px;
+}
+#fortune-location-condition .button-close {
+  color: #333;
+  background-color: #fff;
+  border: 1px solid #ccc;
+}

package/lib/components/LocationCondition/index.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import "./index.css";
+export declare const LocationCondition: React.FC<{}>;

package/lib/components/LocationCondition/index.js

@@ -0,0 +1,204 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LocationCondition = void 0;
+var _fortuneCore = require("@fileverse-dev/fortune-core");
+var _immer = _interopRequireDefault(require("immer"));
+var _lodash = _interopRequireDefault(require("lodash"));
+var _react = _interopRequireWildcard(require("react"));
+var _context = _interopRequireDefault(require("../../context"));
+var _useDialog = require("../../hooks/useDialog");
+require("./index.css");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var LocationCondition = exports.LocationCondition = function LocationCondition() {
+  var _a = (0, _react.useContext)(_context.default),
+    context = _a.context,
+    setContext = _a.setContext;
+  var _b = (0, _useDialog.useDialog)(),
+    showDialog = _b.showDialog,
+    hideDialog = _b.hideDialog;
+  var _c = (0, _fortuneCore.locale)(context),
+    findAndReplace = _c.findAndReplace,
+    button = _c.button;
+  var _d = (0, _react.useState)("locationConstant"),
+    conditionType = _d[0],
+    setConditionType = _d[1];
+  var _e = (0, _react.useState)({
+      locationDate: true,
+      locationDigital: true,
+      locationString: true,
+      locationBool: true,
+      locationError: true
+    }),
+    constants = _e[0],
+    setConstants = _e[1];
+  var _f = (0, _react.useState)({
+      locationDate: true,
+      locationDigital: true,
+      locationString: true,
+      locationBool: true,
+      locationError: true
+    }),
+    formulas = _f[0],
+    setFormulas = _f[1];
+  var onConfirm = (0, _react.useCallback)(function () {
+    var _a, _b, _c, _d, _e, _f;
+    if (conditionType === "locationConstant") {
+      var value_1 = (0, _fortuneCore.getOptionValue)(constants);
+      var selectRange_1 = (0, _fortuneCore.getSelectRange)(context);
+      setContext(function (ctx) {
+        var rangeArr = (0, _fortuneCore.applyLocation)(selectRange_1, conditionType, value_1, ctx);
+        if (rangeArr.length === 0) showDialog(findAndReplace.locationTipNotFindCell, "ok");
+      });
+    } else if (conditionType === "locationFormula") {
+      var value_2 = (0, _fortuneCore.getOptionValue)(formulas);
+      var selectRange_2 = (0, _fortuneCore.getSelectRange)(context);
+      setContext(function (ctx) {
+        var rangeArr = (0, _fortuneCore.applyLocation)(selectRange_2, conditionType, value_2, ctx);
+        if (rangeArr.length === 0) showDialog(findAndReplace.locationTipNotFindCell, "ok");
+      });
+    } else if (conditionType === "locationRowSpan") {
+      if (((_a = context.luckysheet_select_save) === null || _a === void 0 ? void 0 : _a.length) === 0 || ((_b = context.luckysheet_select_save) === null || _b === void 0 ? void 0 : _b.length) === 1 && context.luckysheet_select_save[0].row[0] === context.luckysheet_select_save[0].row[1]) {
+        showDialog(findAndReplace.locationTiplessTwoRow, "ok");
+        return;
+      }
+      var selectRange_3 = _lodash.default.assignIn([], context.luckysheet_select_save);
+      setContext(function (ctx) {
+        var rangeArr = (0, _fortuneCore.applyLocation)(selectRange_3, conditionType, undefined, ctx);
+        if (rangeArr.length === 0) showDialog(findAndReplace.locationTipNotFindCell, "ok");
+      });
+    } else if (conditionType === "locationColumnSpan") {
+      if (((_c = context.luckysheet_select_save) === null || _c === void 0 ? void 0 : _c.length) === 0 || ((_d = context.luckysheet_select_save) === null || _d === void 0 ? void 0 : _d.length) === 1 && context.luckysheet_select_save[0].column[0] === context.luckysheet_select_save[0].column[1]) {
+        showDialog(findAndReplace.locationTiplessTwoColumn, "ok");
+        return;
+      }
+      var selectRange_4 = _lodash.default.assignIn([], context.luckysheet_select_save);
+      setContext(function (ctx) {
+        var rangeArr = (0, _fortuneCore.applyLocation)(selectRange_4, conditionType, undefined, ctx);
+        if (rangeArr.length === 0) showDialog(findAndReplace.locationTipNotFindCell, "ok");
+      });
+    } else {
+      var selectRange_5;
+      if (((_e = context.luckysheet_select_save) === null || _e === void 0 ? void 0 : _e.length) === 0 || ((_f = context.luckysheet_select_save) === null || _f === void 0 ? void 0 : _f.length) === 1 && context.luckysheet_select_save[0].row[0] === context.luckysheet_select_save[0].row[1] && context.luckysheet_select_save[0].column[0] === context.luckysheet_select_save[0].column[1]) {
+        var flowdata = (0, _fortuneCore.getFlowdata)(context, context.currentSheetId);
+        selectRange_5 = [{
+          row: [0, flowdata.length - 1],
+          column: [0, flowdata[0].length - 1]
+        }];
+      } else {
+        selectRange_5 = _lodash.default.assignIn([], context.luckysheet_select_save);
+      }
+      setContext(function (ctx) {
+        var rangeArr = (0, _fortuneCore.applyLocation)(selectRange_5, conditionType, undefined, ctx);
+        if (rangeArr.length === 0) showDialog(findAndReplace.locationTipNotFindCell, "ok");
+      });
+    }
+  }, [conditionType, constants, context, findAndReplace.locationTipNotFindCell, findAndReplace.locationTiplessTwoColumn, findAndReplace.locationTiplessTwoRow, formulas, setContext, showDialog]);
+  var isSelect = (0, _react.useCallback)(function (currentType) {
+    return conditionType === currentType;
+  }, [conditionType]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    id: "fortune-location-condition"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "title"
+  }, findAndReplace.location), /*#__PURE__*/_react.default.createElement("div", {
+    className: "listbox"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "listItem"
+  }, /*#__PURE__*/_react.default.createElement("input", {
+    type: "radio",
+    name: "locationType",
+    id: "locationConstant",
+    checked: isSelect("locationConstant"),
+    onChange: function onChange() {
+      setConditionType("locationConstant");
+    }
+  }), /*#__PURE__*/_react.default.createElement("label", {
+    htmlFor: "locationConstant"
+  }, findAndReplace.locationConstant), /*#__PURE__*/_react.default.createElement("div", {
+    className: "subbox"
+  }, ["locationDate", "locationDigital", "locationString", "locationBool", "locationError"].map(function (v) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "subItem",
+      key: v
+    }, /*#__PURE__*/_react.default.createElement("input", {
+      type: "checkbox",
+      disabled: !isSelect("locationConstant"),
+      checked: constants[v],
+      onChange: function onChange() {
+        setConstants((0, _immer.default)(function (draft) {
+          _lodash.default.set(draft, v, !draft[v]);
+        }));
+      }
+    }), /*#__PURE__*/_react.default.createElement("label", {
+      htmlFor: v,
+      style: {
+        color: isSelect("locationConstant") ? "#000" : "#666"
+      }
+    }, findAndReplace[v]));
+  }))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "listItem"
+  }, /*#__PURE__*/_react.default.createElement("input", {
+    type: "radio",
+    name: "locationType",
+    id: "locationFormula",
+    checked: isSelect("locationFormula"),
+    onChange: function onChange() {
+      setConditionType("locationFormula");
+    }
+  }), /*#__PURE__*/_react.default.createElement("label", {
+    htmlFor: "locationFormula"
+  }, findAndReplace.locationFormula), /*#__PURE__*/_react.default.createElement("div", {
+    className: "subbox"
+  }, ["locationDate", "locationDigital", "locationString", "locationBool", "locationError"].map(function (v) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "subItem",
+      key: v
+    }, /*#__PURE__*/_react.default.createElement("input", {
+      type: "checkbox",
+      disabled: !isSelect("locationFormula"),
+      checked: formulas[v],
+      onChange: function onChange() {
+        setFormulas((0, _immer.default)(function (draft) {
+          _lodash.default.set(draft, v, !draft[v]);
+        }));
+      }
+    }), /*#__PURE__*/_react.default.createElement("label", {
+      htmlFor: v,
+      style: {
+        color: isSelect("locationFormula") ? "#000" : "#666"
+      }
+    }, findAndReplace[v]));
+  }))), ["locationNull", "locationRowSpan", "locationColumnSpan"].map(function (v) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "listItem",
+      key: v
+    }, /*#__PURE__*/_react.default.createElement("input", {
+      type: "radio",
+      name: v,
+      checked: isSelect(v),
+      onChange: function onChange() {
+        setConditionType(v);
+      }
+    }), /*#__PURE__*/_react.default.createElement("label", {
+      htmlFor: v
+    }, findAndReplace[v]));
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: "button-basic button-primary",
+    onClick: function onClick() {
+      hideDialog();
+      onConfirm();
+    },
+    tabIndex: 0
+  }, button.confirm), /*#__PURE__*/_react.default.createElement("div", {
+    className: "button-basic button-close",
+    onClick: function onClick() {
+      hideDialog();
+    },
+    tabIndex: 0
+  }, button.cancel));
+};

package/lib/components/MessageBox/index.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+type Props = {
+    type: "ok" | "yesno";
+    onOk?: () => void;
+    onCancel?: () => void;
+    children?: React.ReactNode;
+};
+declare const MessageBox: React.FC<Props>;
+export default MessageBox;

package/lib/components/MessageBox/index.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Dialog = _interopRequireDefault(require("../Dialog"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var MessageBox = function MessageBox(_a) {
+  var _b = _a.type,
+    type = _b === void 0 ? "yesno" : _b,
+    onOk = _a.onOk,
+    onCancel = _a.onCancel,
+    children = _a.children;
+  return /*#__PURE__*/_react.default.createElement(_Dialog.default, {
+    type: type,
+    onOk: onOk,
+    onCancel: onCancel,
+    title: type === "yesno" ? "Confirmation" : undefined
+  }, children);
+};
+var _default = exports.default = MessageBox;

package/lib/components/NotationBoxes/index.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+declare const NotationBoxes: React.FC;
+export default NotationBoxes;

package/lib/components/NotationBoxes/index.js

@@ -0,0 +1,114 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _fortuneCore = require("@fileverse-dev/fortune-core");
+var _lodash = _interopRequireDefault(require("lodash"));
+var _context = _interopRequireDefault(require("../../context"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+var NotationBoxes = function NotationBoxes() {
+  var _a;
+  var _b = (0, _react.useContext)(_context.default),
+    context = _b.context,
+    setContext = _b.setContext,
+    refs = _b.refs,
+    settings = _b.settings;
+  var flowdata = (0, _fortuneCore.getFlowdata)(context);
+  (0, _react.useEffect)(function () {
+    var _a;
+    if (flowdata) {
+      var psShownCells_1 = [];
+      for (var i = 0; i < flowdata.length; i += 1) {
+        for (var j = 0; j < flowdata[i].length; j += 1) {
+          var cell = flowdata[i][j];
+          if (!cell) continue;
+          if ((_a = cell.ps) === null || _a === void 0 ? void 0 : _a.isShow) {
+            psShownCells_1.push({
+              r: i,
+              c: j
+            });
+          }
+        }
+      }
+      setContext(function (ctx) {
+        return (0, _fortuneCore.showComments)(ctx, psShownCells_1);
+      });
+    }
+  }, [flowdata, setContext]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    id: "luckysheet-postil-showBoxs"
+  }, _lodash.default.concat((_a = context.commentBoxes) === null || _a === void 0 ? void 0 : _a.filter(function (v) {
+    var _a;
+    return (v === null || v === void 0 ? void 0 : v.rc) !== ((_a = context.editingCommentBox) === null || _a === void 0 ? void 0 : _a.rc);
+  }), [context.editingCommentBox, context.hoveredCommentBox]).map(function (commentBox, index) {
+    var _a, _b;
+    if (!commentBox) return null;
+    var r = commentBox.r,
+      c = commentBox.c,
+      rc = commentBox.rc,
+      left = commentBox.left,
+      top = commentBox.top,
+      width = commentBox.width,
+      height = commentBox.height,
+      size = commentBox.size;
+    var isEditing = ((_a = context.editingCommentBox) === null || _a === void 0 ? void 0 : _a.rc) === rc;
+    var commentId = "comment-box-".concat(rc);
+    return /*#__PURE__*/_react.default.createElement("div", {
+      key: rc + index
+    }, /*#__PURE__*/_react.default.createElement("canvas", {
+      id: "arrowCanvas-".concat(rc),
+      className: "arrowCanvas",
+      width: size.width,
+      height: size.height,
+      style: {
+        position: "absolute",
+        left: size.left,
+        top: size.top,
+        zIndex: 100,
+        pointerEvents: "none"
+      }
+    }), /*#__PURE__*/_react.default.createElement("div", {
+      id: commentId,
+      className: "luckysheet-postil-show-main",
+      style: {
+        width: width,
+        height: height,
+        color: "#000",
+        padding: 5,
+        border: "1px solid #000",
+        backgroundColor: "rgb(255,255,225)",
+        position: "absolute",
+        left: left,
+        top: top,
+        boxSizing: "border-box",
+        zIndex: isEditing ? 200 : 100
+      },
+      onMouseDown: function onMouseDown(e) {
+        var nativeEvent = e.nativeEvent;
+        setContext(function (draftContext) {
+          if (flowdata) {
+            (0, _fortuneCore.setEditingComment)(draftContext, flowdata, r, c);
+          }
+        });
+        (0, _fortuneCore.onCommentBoxMoveStart)(context, refs.globalCache, nativeEvent, {
+          r: r,
+          c: c,
+          rc: rc
+        }, commentId);
+        e.stopPropagation();
+      }
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        width: "100%",
+        height: "100%",
+        overflow: "hidden"
+      }
+    }, (_b = settings.getCommentCellUI) === null || _b === void 0 ? void 0 : _b.call(settings, r, c))));
+  }));
+};
+var _default = exports.default = NotationBoxes;