@fileverse-dev/fortune-react 1.1.0 → 1.1.1

package/es/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/{dist/packages/react/src → es}/components/SplitColumn/index.d.ts

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

package/es/components/SplitColumn/index.js

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

package/{dist/packages/react/src → es}/components/Toolbar/Button.d.ts

@@ -1,12 +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;
+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/es/components/Toolbar/Button.js

@@ -0,0 +1,32 @@
+import React from "react";
+import { LucideIcon, Tooltip } from "@fileverse/ui";
+import { getLucideIcon } from ".";
+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.createElement(Tooltip, {
+    text: tooltip,
+    placement: "bottom"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "fortune-toolbar-button fortune-toolbar-item",
+    onClick: onClick,
+    tabIndex: 0,
+    role: "button",
+    style: selected ? {
+      backgroundColor: "#FFDF0A"
+    } : style
+  }, /*#__PURE__*/React.createElement(LucideIcon, {
+    name: getLucideIcon(iconId),
+    width: 16,
+    height: 16,
+    style: disabled ? {
+      opacity: 0.3
+    } : {}
+  }), children));
+};
+export default Button;

package/{dist/packages/react/src → es}/components/Toolbar/ColorPicker.d.ts

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

package/es/components/Toolbar/ColorPicker.js

@@ -0,0 +1,27 @@
+import React from "react";
+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.createElement("div", {
+    className: "fortune-toolbar-color-picker"
+  }, palette.map(function (rows, i) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: i,
+      className: "fortune-toolbar-color-picker-row"
+    }, rows.map(function (c) {
+      return /*#__PURE__*/React.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"
+        }
+      });
+    }));
+  }));
+};
+export default ColorPicker;

package/{dist/packages/react/src → es}/components/Toolbar/Combo.d.ts

@@ -1,12 +1,13 @@
-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;
+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;
+    triggerRef?: React.RefObject<HTMLButtonElement | null>;
+};
+declare const Combo: React.FC<Props>;
+export default Combo;

package/es/components/Toolbar/Combo.js

@@ -0,0 +1,123 @@
+import React, { useMemo, useRef, useState } from "react";
+import { IconButton, Tooltip, Popover, PopoverContent, PopoverTrigger, cn, Button } from "@fileverse/ui";
+import SVGIcon from "../SVGIcon";
+import { getLucideIcon } from ".";
+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,
+    triggerRef = _a.triggerRef;
+  var style = {
+    userSelect: "none"
+  };
+  var _c = useState(false),
+    open = _c[0],
+    setOpen = _c[1];
+  var buttonRef = useRef(null);
+  var ref = useRef(null);
+  if (!triggerRef) {
+    triggerRef = ref;
+  }
+  var handleOpenChange = function handleOpenChange(newOpen) {
+    setOpen(newOpen);
+  };
+  var isLucideIcon = 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", "currency"].includes(iconId);
+  }, [iconId]);
+  var trigger = !isLucideIcon ? (/*#__PURE__*/React.createElement(Tooltip, {
+    text: tooltip,
+    placement: "bottom"
+  }, /*#__PURE__*/React.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.createElement(SVGIcon, {
+    name: iconId,
+    width: 16,
+    height: 16
+  })) : (/*#__PURE__*/React.createElement("span", {
+    className: "fortune-toolbar-combo-text"
+  }, text !== undefined ? text : ""))))) : (/*#__PURE__*/React.createElement("span", null, iconId === "font-color" ? (/*#__PURE__*/React.createElement(Tooltip, {
+    text: tooltip,
+    placement: "bottom"
+  }, /*#__PURE__*/React.createElement(Button, {
+    variant: "ghost",
+    onClick: function onClick() {
+      return setOpen(!open);
+    },
+    className: cn("fortune-toolbar-combo-button !min-w-fit !px-0", {}),
+    style: {
+      width: 30,
+      height: 30
+    }
+  }, /*#__PURE__*/React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "16",
+    height: "16",
+    viewBox: "0 0 24 24"
+  }, /*#__PURE__*/React.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"
+  }))))) : (/*#__PURE__*/React.createElement(Tooltip, {
+    text: tooltip,
+    placement: "bottom"
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    icon: getLucideIcon(iconId),
+    variant: "ghost",
+    onClick: function onClick() {
+      setOpen(!open);
+    },
+    className: cn("fortune-toolbar-combo-button", {
+      "custom-color-button": iconId === "font-color" && fillColor,
+      "min-w-fit rounded-l-none": iconId === "currency"
+    }),
+    style: {
+      color: iconId === "font-color" ? fillColor : undefined
+    }
+  })))));
+  return /*#__PURE__*/React.createElement("div", {
+    ref: buttonRef,
+    className: "fortune-toolbar-item",
+    onKeyDown: function onKeyDown(e) {
+      e.stopPropagation();
+    }
+  }, /*#__PURE__*/React.createElement(Popover, {
+    open: open,
+    onOpenChange: handleOpenChange,
+    modal: true
+  }, /*#__PURE__*/React.createElement(PopoverTrigger, {
+    ref: triggerRef,
+    asChild: true
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "flex items-center"
+  }, trigger)), /*#__PURE__*/React.createElement(PopoverContent, {
+    align: "start",
+    side: "bottom",
+    sideOffset: 4,
+    alignOffset: -16,
+    className: "fortune-toolbar-combo-popup border-none",
+    onMouseDown: function onMouseDown(e) {
+      return e.stopPropagation();
+    },
+    onMouseUp: function onMouseUp(e) {
+      return e.stopPropagation();
+    },
+    onClick: function onClick(e) {
+      return e.stopPropagation();
+    }
+  }, children === null || children === void 0 ? void 0 : children(setOpen))));
+};
+export default Combo;

package/{dist/packages/react/src → es}/components/Toolbar/CustomBorder.d.ts

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