@fileverse-dev/fortune-react 1.0.5 → 1.0.7

package/lib/components/SplitColumn/index.css

@@ -0,0 +1,121 @@
+#fortune-split-column {
+  /* position: absolute;
+    padding: 30px 42px;
+    z-index: 1002; */
+  /* min-width: 500px; */
+  width: 464px;
+
+  input[type="checkbox"] {
+    accent-color: black;
+    appearance: none;
+    -webkit-appearance: none;
+    width: 16px;
+    height: 16px;
+    border: 1.5px solid black;
+    border-radius: 3px;
+    position: relative;
+    cursor: pointer;
+  }
+  
+  input[type="checkbox"]:checked {
+    background-color: black;
+    border-color: black;
+  }
+  
+  /* Smaller tick mark */
+  input[type="checkbox"]:checked::before {
+    content: '';
+    position: absolute;
+    top: 2px;
+    left: 4px;
+    width: 4px;      /* Reduced from default */
+    height: 7px;     /* Reduced from default */
+    border: solid white;
+    border-width: 0 1px 1px 0;
+    transform: rotate(45deg);
+  }
+}
+#fortune-split-column label {
+  user-select: none;
+}
+#fortune-split-column .title {
+  font-size: 16px;
+}
+#fortune-split-column .splitDelimiters {
+  margin-top: 20px;
+}
+.splitSymbols {
+  width: 464px
+}
+#fortune-split-column .splitSymbols {
+  position: relative;
+  /* border: 1px solid #dfdfdf; */
+  padding: 5px 5px 5px 0;
+  margin: 5px 0px;
+}
+#fortune-split-column .splitSymbol {
+  font-size: 14px;
+}
+#fortune-split-column .splitSimple {
+  position: absolute;
+  top: 114px;
+  left: 0px;
+}
+#fortune-split-column #otherValue {
+  margin-left: 5px;
+  width: 50px;
+  padding: 0 5px;
+}
+#fortune-split-column .splitDataPreview {
+  font-size: 14px;
+  /* margin-top: 26px; */
+  margin-bottom: 12px;
+}
+#fortune-split-column .splitColumnData {
+  border: 1px solid #dfdfdf;
+  border-radius: 4px;
+  background-color: #F8F9FA;
+  padding: 5px;
+  margin: 5px 0px;
+  height: 100px;
+  overflow-y: scroll;
+}
+#fortune-split-column .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;
+}
+#fortune-split-column .button-primary {
+  background: #0188fb;
+  border: 1px solid #0188fb;
+  color: #fff;
+  margin-right: 10px;
+}
+#fortune-split-column .button-close {
+  color: #333;
+  background-color: #fff;
+  border: 1px solid #ccc;
+}
+#fortune-split-column table {
+  border-collapse: collapse;
+}
+#fortune-split-column tr {
+  display: table-row;
+  vertical-align: inherit;
+  border-color: inherit;
+}
+#fortune-split-column td {
+  border: 1px solid #333;
+  display: table-cell;
+  vertical-align: inherit;
+}

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

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

package/lib/components/SplitColumn/index.js

@@ -0,0 +1,176 @@
+"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.SplitColumn = void 0;
+var _fortuneCore = require("@fileverse-dev/fortune-core");
+var _ui = require("@fileverse/ui");
+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 SplitColumn = exports.SplitColumn = function SplitColumn() {
+  var _a = (0, _react.useContext)(_context.default),
+    context = _a.context,
+    setContext = _a.setContext;
+  var _b = (0, _fortuneCore.locale)(context),
+    splitText = _b.splitText,
+    button = _b.button;
+  var _c = (0, _react.useState)(""),
+    splitOperate = _c[0],
+    setSplitOperate = _c[1];
+  var _d = (0, _react.useState)(false),
+    otherFlag = _d[0],
+    setOtherFlag = _d[1];
+  var _e = (0, _react.useState)([]),
+    tableData = _e[0],
+    setTableData = _e[1];
+  var splitSymbols = (0, _react.useRef)(null);
+  var _f = (0, _useDialog.useDialog)(),
+    showDialog = _f.showDialog,
+    hideDialog = _f.hideDialog;
+  var certainBtn = (0, _react.useCallback)(function () {
+    hideDialog();
+    var dataArr = (0, _fortuneCore.getDataArr)(splitOperate, context);
+    var r = context.luckysheet_select_save[0].row[0];
+    var c = context.luckysheet_select_save[0].column[0];
+    if (dataArr[0].length === 1) {
+      return;
+    }
+    var dataCover = false;
+    var data = (0, _fortuneCore.getFlowdata)(context);
+    for (var i = 0; i < dataArr.length; i += 1) {
+      for (var j = 1; j < dataArr[0].length; j += 1) {
+        var cell = data[r + i][c + j];
+        if (!_lodash.default.isNull(cell) && !_lodash.default.isNull(cell.v)) {
+          dataCover = true;
+          break;
+        }
+      }
+    }
+    if (dataCover) {
+      showDialog(splitText.splitConfirmToExe, "yesno", undefined, undefined, undefined, function () {
+        hideDialog();
+        setContext(function (ctx) {
+          (0, _fortuneCore.updateMoreCell)(r, c, dataArr, ctx);
+        });
+      });
+    } else {
+      setContext(function (ctx) {
+        (0, _fortuneCore.updateMoreCell)(r, c, dataArr, ctx);
+      });
+    }
+  }, [context, hideDialog, setContext, showDialog, splitOperate, splitText.splitConfirmToExe]);
+  (0, _react.useEffect)(function () {
+    setTableData(function (table) {
+      table = (0, _fortuneCore.getDataArr)(splitOperate, context);
+      return table;
+    });
+  }, [context, splitOperate]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    id: "fortune-split-column"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "splitDataPreview text-heading-xsm"
+  }, splitText.splitDataPreview), /*#__PURE__*/_react.default.createElement("div", {
+    className: "splitColumnData"
+  }, /*#__PURE__*/_react.default.createElement("table", null, /*#__PURE__*/_react.default.createElement("tbody", null, tableData.map(function (o, index) {
+    if (o.length >= 1) {
+      return /*#__PURE__*/_react.default.createElement("tr", {
+        key: index
+      }, o.map(function (o1) {
+        return /*#__PURE__*/_react.default.createElement("td", {
+          key: o + o1
+        }, o1);
+      }));
+    }
+    return /*#__PURE__*/_react.default.createElement("tr", null, /*#__PURE__*/_react.default.createElement("td", null));
+  })))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "splitDelimiters text-heading-xsm !mt-4"
+  }, "Separator"), /*#__PURE__*/_react.default.createElement("div", {
+    className: "splitSymbols flex gap-3 flex-wrap",
+    ref: splitSymbols
+  }, splitText.splitSymbols.map(function (o) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      key: o.value,
+      className: "splitSymbol flex gap-2 items-center"
+    }, /*#__PURE__*/_react.default.createElement("input", {
+      id: o.value,
+      name: o.value,
+      type: "checkbox",
+      onClick: function onClick() {
+        setSplitOperate(function (regStr) {
+          var _a;
+          return (0, _fortuneCore.getRegStr)(regStr, (_a = splitSymbols.current) === null || _a === void 0 ? void 0 : _a.childNodes);
+        });
+      },
+      tabIndex: 0
+    }), /*#__PURE__*/_react.default.createElement("label", {
+      htmlFor: o.value,
+      className: "text-body-sm"
+    }, o.name));
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: "splitSymbol flex gap-2 items-center pb-4 mb-4  border-b"
+  }, /*#__PURE__*/_react.default.createElement("input", {
+    id: "other",
+    name: "other",
+    type: "checkbox",
+    onClick: function onClick() {
+      setOtherFlag(!otherFlag);
+      setSplitOperate(function (regStr) {
+        var _a;
+        return (0, _fortuneCore.getRegStr)(regStr, (_a = splitSymbols.current) === null || _a === void 0 ? void 0 : _a.childNodes);
+      });
+    },
+    tabIndex: 0
+  }), /*#__PURE__*/_react.default.createElement("label", {
+    htmlFor: "other"
+  }, "Custom"), /*#__PURE__*/_react.default.createElement(_ui.TextField, {
+    placeholder: "Custom separator",
+    id: "otherValue",
+    name: "otherValue",
+    type: "text",
+    onBlur: function onBlur() {
+      if (otherFlag) {
+        setSplitOperate(function (regStr) {
+          var _a;
+          return (0, _fortuneCore.getRegStr)(regStr, (_a = splitSymbols.current) === null || _a === void 0 ? void 0 : _a.childNodes);
+        });
+      }
+    }
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: "splitSymbol flex gap-2 mb-4 items-center"
+  }, /*#__PURE__*/_react.default.createElement("input", {
+    id: "splitsimple",
+    name: "splitsimple",
+    type: "checkbox",
+    onClick: function onClick() {
+      setSplitOperate(function (regStr) {
+        var _a;
+        return (0, _fortuneCore.getRegStr)(regStr, (_a = splitSymbols.current) === null || _a === void 0 ? void 0 : _a.childNodes);
+      });
+    },
+    tabIndex: 0
+  }), /*#__PURE__*/_react.default.createElement("label", {
+    htmlFor: "splitsimple"
+  }, splitText.splitContinueSymbol)), /*#__PURE__*/_react.default.createElement("div", {
+    className: "flex justify-end gap-2"
+  }, /*#__PURE__*/_react.default.createElement(_ui.Button, {
+    className: "",
+    variant: "secondary",
+    onClick: function onClick() {
+      hideDialog();
+    },
+    tabIndex: 0
+  }, button.cancel), /*#__PURE__*/_react.default.createElement(_ui.Button, {
+    className: "",
+    onClick: function onClick() {
+      certainBtn();
+    },
+    tabIndex: 0
+  }, "Split")));
+};

package/lib/components/Toolbar/Button.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+type Props = {
+    tooltip: string;
+    iconId: string;
+    onClick?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    disabled?: boolean;
+    selected?: boolean;
+    children?: React.ReactNode;
+    style?: React.CSSProperties;
+};
+declare const Button: React.FC<Props>;
+export default Button;

package/lib/components/Toolbar/Button.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _ui = require("@fileverse/ui");
+var _ = require(".");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var Button = function Button(_a) {
+  var tooltip = _a.tooltip,
+    onClick = _a.onClick,
+    iconId = _a.iconId,
+    disabled = _a.disabled,
+    selected = _a.selected,
+    children = _a.children,
+    style = _a.style;
+  return /*#__PURE__*/_react.default.createElement(_ui.Tooltip, {
+    text: tooltip,
+    placement: "bottom"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "fortune-toolbar-button fortune-toolbar-item",
+    onClick: onClick,
+    tabIndex: 0,
+    role: "button",
+    style: selected ? {
+      backgroundColor: "#FFDF0A"
+    } : style
+  }, /*#__PURE__*/_react.default.createElement(_ui.LucideIcon, {
+    name: (0, _.getLucideIcon)(iconId),
+    width: 16,
+    height: 16,
+    style: disabled ? {
+      opacity: 0.3
+    } : {}
+  }), children));
+};
+var _default = exports.default = Button;

package/lib/components/Toolbar/ColorPicker.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+type Props = {
+    onPick: (color: string) => void;
+};
+declare const ColorPicker: React.FC<Props>;
+export default ColorPicker;

package/lib/components/Toolbar/ColorPicker.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var palette = [["#000000", "#444444", "#666666", "#999999", "#B7B7B7", "#cccccc", "#D9D9D9", "#EFEFEF", "#f3f3f3", "#ffffff"], ["#970007", "#FE0012", "#FE9728", "#FFFD40", "#27FD3C", "#21FFFF", "#4A89E4", "#0027F9", "#9726FA", "#FD23FA"], ["#E6B8B0", "#f4cccc", "#FCE5CF", "#FFF1CF", "#DAEAD4", "#D0E0E3", "#C9DBF7", "#CFE3F2", "#D9D3E8", "#EAD1DC"], ["#DC7D6D", "#E9999A", "#F9CAA0", "#FFE49F", "#B7D6AB", "#A3C4C9", "#A4C3F2", "#A0C6E6", "#B4A8D4", "#D5A7BC"], ["#CB402B", "#DF6668", "#F6B171", "#FFD871", "#95C382", "#77A6AF", "#6DA0E8", "#70AADA", "#8E7EC0", "#C17C9F"], ["#A51A0A", "#CB000C", "#E59043", "#F1C046", "#6CA756", "#46828D", "#3C7BD4", "#3E87C3", "#6651A4", "#A54E78"], ["#841F11", "#980007", "#B35E19", "#BF8F22", "#3A7527", "#15505B", "#0E5AC8", "#0B5592", "#0B5592", "#731C46"], ["#5B0E03", "#660003", "#783E0E", "#7F5F13", "#284E19", "#0D343D", "#1C4785", "#073961", "#1F154B", "#4C112F"]];
+var ColorPicker = function ColorPicker(_a) {
+  var onPick = _a.onPick;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "fortune-toolbar-color-picker"
+  }, palette.map(function (rows, i) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      key: i,
+      className: "fortune-toolbar-color-picker-row"
+    }, rows.map(function (c) {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        key: c,
+        className: "fortune-toolbar-color-picker-item",
+        onClick: function onClick() {
+          return onPick(c);
+        },
+        tabIndex: 0,
+        style: {
+          backgroundColor: c,
+          border: c === "#ffffff" ? "1px solid #E8EBEC" : "none"
+        }
+      });
+    }));
+  }));
+};
+var _default = exports.default = ColorPicker;

package/lib/components/Toolbar/Combo.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+type Props = {
+    tooltip: string;
+    iconId?: string;
+    text?: string;
+    showArrow?: boolean;
+    onClick?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    children: (setOpen: React.Dispatch<React.SetStateAction<boolean>>) => React.ReactNode;
+    fillColor?: string;
+};
+declare const Combo: React.FC<Props>;
+export default Combo;

package/lib/components/Toolbar/Combo.js

@@ -0,0 +1,111 @@
+"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 _ui = require("@fileverse/ui");
+var _SVGIcon = _interopRequireDefault(require("../SVGIcon"));
+var _ = require(".");
+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 Combo = function Combo(_a) {
+  var tooltip = _a.tooltip,
+    _onClick = _a.onClick,
+    text = _a.text,
+    iconId = _a.iconId,
+    _b = _a.showArrow,
+    showArrow = _b === void 0 ? true : _b,
+    children = _a.children,
+    fillColor = _a.fillColor;
+  var style = {
+    userSelect: "none"
+  };
+  var _c = (0, _react.useState)(false),
+    open = _c[0],
+    setOpen = _c[1];
+  var buttonRef = (0, _react.useRef)(null);
+  var isLucideIcon = (0, _react.useMemo)(function () {
+    return (iconId === null || iconId === void 0 ? void 0 : iconId.startsWith("align-")) || ["text-overflow", "text-wrap", "text-clip", "font-color", "background", "border-all", "merge-all", "format", "conditionFormat", "filter", "comment", "image", "formula-sum", "dune", "template", "font-color", "background"].includes(iconId);
+  }, [iconId]);
+  var trigger = !isLucideIcon ? (/*#__PURE__*/_react.default.createElement(_ui.Tooltip, {
+    text: tooltip,
+    placement: "bottom"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "fortune-toolbar-combo-button",
+    onClick: function onClick(e) {
+      if (_onClick) {
+        _onClick(e);
+        if (!showArrow) setOpen(!open);
+      }
+    },
+    tabIndex: 0,
+    role: "button",
+    style: style
+  }, iconId ? (/*#__PURE__*/_react.default.createElement(_SVGIcon.default, {
+    name: iconId,
+    width: 16,
+    height: 16
+  })) : (/*#__PURE__*/_react.default.createElement("span", {
+    className: "fortune-toolbar-combo-text"
+  }, text !== undefined ? text : ""))))) : (/*#__PURE__*/_react.default.createElement("span", null, iconId === "font-color" ? (/*#__PURE__*/_react.default.createElement(_ui.Tooltip, {
+    text: tooltip,
+    placement: "bottom"
+  }, /*#__PURE__*/_react.default.createElement(_ui.Button, {
+    variant: "ghost",
+    onClick: function onClick() {
+      return setOpen(!open);
+    },
+    className: (0, _ui.cn)("fortune-toolbar-combo-button !min-w-fit !px-0", {}),
+    style: {
+      width: 30,
+      height: 30
+    }
+  }, /*#__PURE__*/_react.default.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "16",
+    height: "16",
+    viewBox: "0 0 24 24",
+    fill: fillColor
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M11.9997 3C12.3784 3 12.7248 3.21402 12.8942 3.55273L20.8942 19.5527L20.9352 19.6465C21.115 20.1204 20.9101 20.663 20.447 20.8945C19.9839 21.1259 19.4272 20.9642 19.1559 20.5361L19.1052 20.4473L16.8815 16H7.11786L4.89422 20.4473C4.64719 20.9412 4.04636 21.1415 3.55243 20.8945C3.05867 20.6475 2.85831 20.0466 3.10516 19.5527L11.1052 3.55273L11.1764 3.43164C11.3613 3.16376 11.6684 3.0001 11.9997 3ZM8.11786 14H15.8815L11.9997 6.23633L8.11786 14Z",
+    fill: fillColor
+  }))))) : (/*#__PURE__*/_react.default.createElement(_ui.Tooltip, {
+    text: tooltip,
+    placement: "bottom"
+  }, /*#__PURE__*/_react.default.createElement(_ui.IconButton, {
+    icon: (0, _.getLucideIcon)(iconId),
+    variant: "ghost",
+    onClick: function onClick() {
+      return setOpen(!open);
+    },
+    className: (0, _ui.cn)("fortune-toolbar-combo-button", {
+      "custom-color-button": iconId === "font-color" && fillColor
+    }),
+    style: {
+      color: iconId === "font-color" ? fillColor : undefined
+    }
+  })))));
+  return /*#__PURE__*/_react.default.createElement("div", {
+    ref: buttonRef,
+    className: "fortune-toolbar-item"
+  }, /*#__PURE__*/_react.default.createElement(_ui.Popover, {
+    open: open,
+    onOpenChange: setOpen
+  }, /*#__PURE__*/_react.default.createElement(_ui.PopoverTrigger, {
+    asChild: true
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "flex items-center"
+  }, trigger)), /*#__PURE__*/_react.default.createElement(_ui.PopoverContent, {
+    align: "start",
+    side: "bottom",
+    sideOffset: 4,
+    alignOffset: -16,
+    className: "fortune-toolbar-combo-popup border-none"
+  }, children === null || children === void 0 ? void 0 : children(setOpen))));
+};
+var _default = exports.default = Combo;

package/lib/components/Toolbar/CustomBorder.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import "./index.css";
+type Props = {
+    onPick: (changeColor?: string, changeStyle?: string) => void;
+};
+declare const CustomBorder: React.FC<Props>;
+export default CustomBorder;