@fileverse-dev/fortune-react 1.1.0 → 1.1.2

package/es/components/Toolbar/CustomBorder.js

@@ -0,0 +1,211 @@
+import React, { useCallback, useContext, useRef, useState } from "react";
+import "./index.css";
+import { locale } from "@fileverse-dev/fortune-core";
+import _ from "lodash";
+import WorkbookContext from "../../context";
+import SVGIcon from "../SVGIcon";
+import { CustomColor } from "./CustomColor";
+var size = [{
+  Text: "1",
+  value: "Thin",
+  strokeDasharray: "1,0",
+  strokeWidth: "1"
+}, {
+  Text: "2",
+  value: "Hair",
+  strokeDasharray: "1,5",
+  strokeWidth: "1"
+}, {
+  Text: "3",
+  value: "Dotted",
+  strokeDasharray: "2,5",
+  strokeWidth: "2"
+}, {
+  Text: "4",
+  value: "Dashed",
+  strokeDasharray: "5,5",
+  strokeWidth: "2"
+}, {
+  Text: "5",
+  value: "DashDot",
+  strokeDasharray: "20,5,5,10,5,5",
+  strokeWidth: "2"
+}, {
+  Text: "6",
+  value: "DashDotDot",
+  strokeDasharray: "20,5,5,5,5,10,5,5,5,5",
+  strokeWidth: "2"
+}, {
+  Text: "8",
+  value: "Medium",
+  strokeDasharray: "2,0",
+  strokeWidth: "2"
+}, {
+  Text: "9",
+  value: "MediumDashed",
+  strokeDasharray: "3,5",
+  strokeWidth: "3"
+}, {
+  Text: "10",
+  value: "MediumDashDot",
+  strokeDasharray: "20,5,5,10,5,5",
+  strokeWidth: "3"
+}, {
+  Text: "11",
+  value: "MediumDashDotDot",
+  strokeDasharray: "5,5,5,5,20,5,5,5,5,10",
+  strokeWidth: "3"
+}, {
+  Text: "13",
+  value: "Thick",
+  strokeDasharray: "2,0",
+  strokeWidth: "3"
+}];
+var CustomBorder = function CustomBorder(_a) {
+  var onPick = _a.onPick;
+  var _b = useContext(WorkbookContext),
+    context = _b.context,
+    refs = _b.refs;
+  var border = locale(context).border;
+  var _c = useState("#000000"),
+    changeColor = _c[0],
+    setchangeColor = _c[1];
+  var _d = useState("1"),
+    changeStyle = _d[0],
+    setchangeStyle = _d[1];
+  var colorRef = useRef(null);
+  var styleRef = useRef(null);
+  var colorPreviewRef = useRef(null);
+  var _e = useState(""),
+    previewWith = _e[0],
+    setPreviewWith = _e[1];
+  var _f = useState(""),
+    previewdasharry = _f[0],
+    setPreviewdasharray = _f[1];
+  var showBorderSubMenu = useCallback(function (e) {
+    var target = e.target;
+    var menuItemRect = target.getBoundingClientRect();
+    var subMenuItem = target.querySelector(".fortune-border-select-menu");
+    if (_.isNil(subMenuItem)) return;
+    subMenuItem.style.display = "block";
+    var workbookContainerRect = refs.workbookContainer.current.getBoundingClientRect();
+    if (workbookContainerRect.width - menuItemRect.right > parseFloat(subMenuItem.style.width.replace("px", ""))) {
+      subMenuItem.style.left = "".concat(menuItemRect === null || menuItemRect === void 0 ? void 0 : menuItemRect.width, "px");
+    } else {
+      subMenuItem.style.left = "-".concat(subMenuItem.style.width);
+    }
+  }, [refs.workbookContainer]);
+  var hideBorderSubMenu = useCallback(function () {
+    styleRef.current.style.display = "none";
+    colorRef.current.style.display = "none";
+  }, []);
+  var changePreviewStyle = useCallback(function (width, dasharray) {
+    setPreviewWith(width);
+    setPreviewdasharray(dasharray);
+  }, []);
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    className: "fortune-border-select-option",
+    key: "borderColor",
+    onMouseEnter: function onMouseEnter(e) {
+      showBorderSubMenu(e);
+    },
+    onMouseLeave: function onMouseLeave() {
+      hideBorderSubMenu();
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "fortune-toolbar-menu-line"
+  }, border.borderColor, /*#__PURE__*/React.createElement(SVGIcon, {
+    name: "rightArrow",
+    style: {
+      width: "14px"
+    }
+  })), /*#__PURE__*/React.createElement("div", {
+    ref: colorPreviewRef,
+    className: "fortune-border-color-preview",
+    style: {
+      backgroundColor: changeColor
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    ref: colorRef,
+    className: "fortune-border-select-menu",
+    style: {
+      display: "none",
+      width: "166px"
+    }
+  }, /*#__PURE__*/React.createElement(CustomColor, {
+    onCustomPick: function onCustomPick(color) {
+      onPick(color, changeStyle);
+      colorPreviewRef.current.style.backgroundColor = changeColor;
+      setchangeColor(color);
+    },
+    onColorPick: function onColorPick(color) {
+      onPick(color, changeStyle);
+      setchangeColor(color);
+    }
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: "fortune-border-select-option",
+    key: "borderStyle",
+    onMouseEnter: function onMouseEnter(e) {
+      showBorderSubMenu(e);
+    },
+    onMouseLeave: function onMouseLeave() {
+      hideBorderSubMenu();
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "fortune-toolbar-menu-line"
+  }, border.borderStyle, /*#__PURE__*/React.createElement(SVGIcon, {
+    name: "rightArrow",
+    style: {
+      width: "14px"
+    }
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "fortune-border-style-preview"
+  }, /*#__PURE__*/React.createElement("svg", {
+    width: "90"
+  }, /*#__PURE__*/React.createElement("g", {
+    fill: "none",
+    stroke: "black",
+    strokeWidth: previewWith
+  }, /*#__PURE__*/React.createElement("path", {
+    strokeDasharray: previewdasharry,
+    d: "M0 0 l90 0"
+  })))), /*#__PURE__*/React.createElement("div", {
+    ref: styleRef,
+    className: "fortune-border-select-menu fortune-toolbar-select",
+    style: {
+      display: "none",
+      width: "110px"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "fortune-border-style-picker-menu fortune-border-style-reset",
+    onClick: function onClick() {
+      onPick(changeColor, "1");
+      changePreviewStyle("1", "1,0");
+    },
+    tabIndex: 0
+  }, border.borderDefault), /*#__PURE__*/React.createElement("div", {
+    className: "fortune-boder-style-picker"
+  }, size.map(function (items, i) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: i,
+      className: "fortune-border-style-picker-menu",
+      onClick: function onClick() {
+        onPick(changeColor, items.Text);
+        setchangeStyle(items.Text);
+        changePreviewStyle(items.strokeWidth, items.strokeDasharray);
+      },
+      tabIndex: 0
+    }, /*#__PURE__*/React.createElement("svg", {
+      height: "10",
+      width: "90"
+    }, /*#__PURE__*/React.createElement("g", {
+      fill: "none",
+      stroke: "black",
+      strokeWidth: items.strokeWidth
+    }, /*#__PURE__*/React.createElement("path", {
+      strokeDasharray: items.strokeDasharray,
+      d: "M0 5 l85 0"
+    }))));
+  })))));
+};
+export default CustomBorder;

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

@@ -1,11 +1,11 @@
-import React from "react";
-type Props = {
-    tooltip?: string;
-    onClick?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
-    selected?: boolean;
-    children?: React.ReactNode;
-    iconName?: string;
-    icon?: React.ReactNode;
-};
-declare const CustomButton: React.FC<Props>;
-export default CustomButton;
+import React from "react";
+type Props = {
+    tooltip?: string;
+    onClick?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    selected?: boolean;
+    children?: React.ReactNode;
+    iconName?: string;
+    icon?: React.ReactNode;
+};
+declare const CustomButton: React.FC<Props>;
+export default CustomButton;

package/es/components/Toolbar/CustomButton.js

@@ -0,0 +1,29 @@
+import React from "react";
+import { Tooltip } from "@fileverse/ui";
+import CustomIcon from "./CustomIcon";
+var CustomButton = function CustomButton(_a) {
+  var tooltip = _a.tooltip,
+    onClick = _a.onClick,
+    selected = _a.selected,
+    children = _a.children,
+    iconName = _a.iconName,
+    icon = _a.icon;
+  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"
+    } : {}
+  }, /*#__PURE__*/React.createElement(CustomIcon, {
+    width: 16,
+    height: 16,
+    iconName: iconName,
+    content: icon
+  }), children));
+};
+export default CustomButton;

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

@@ -1,8 +1,8 @@
-import React from "react";
-import "./index.css";
-type Props = {
-    onCustomPick: (color: string | undefined) => void;
-    onColorPick: (color: string) => void;
-};
-export declare const CustomColor: React.FC<Props>;
-export {};
+import React from "react";
+import "./index.css";
+type Props = {
+    onCustomPick: (color: string | undefined) => void;
+    onColorPick: (color: string) => void;
+};
+export declare const CustomColor: React.FC<Props>;
+export {};

package/es/components/Toolbar/CustomColor.js

@@ -0,0 +1,25 @@
+import React from "react";
+import ColorPicker from "../Toolbar/ColorPicker";
+import "./index.css";
+import SVGIcon from "../SVGIcon";
+export var CustomColor = function CustomColor(_a) {
+  var onCustomPick = _a.onCustomPick,
+    onColorPick = _a.onColorPick;
+  return /*#__PURE__*/React.createElement("div", {
+    id: "fortune-custom-color"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "color-reset",
+    onClick: function onClick() {
+      return onCustomPick(undefined);
+    },
+    tabIndex: 0
+  }, /*#__PURE__*/React.createElement(SVGIcon, {
+    name: "reset-color",
+    width: 16,
+    height: 16
+  }), "Reset"), /*#__PURE__*/React.createElement(ColorPicker, {
+    onPick: function onPick(color) {
+      onColorPick(color);
+    }
+  }));
+};

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

@@ -1,9 +1,9 @@
-import React from "react";
-type Props = {
-    iconName?: string;
-    width?: number;
-    height?: number;
-    content?: React.ReactNode;
-};
-declare const CustomIcon: React.FC<Props>;
-export default CustomIcon;
+import React from "react";
+type Props = {
+    iconName?: string;
+    width?: number;
+    height?: number;
+    content?: React.ReactNode;
+};
+declare const CustomIcon: React.FC<Props>;
+export default CustomIcon;

package/es/components/Toolbar/CustomIcon.js

@@ -0,0 +1,38 @@
+import React, { useMemo } from "react";
+var CustomIcon = function CustomIcon(_a) {
+  var iconName = _a.iconName,
+    _b = _a.width,
+    width = _b === void 0 ? 24 : _b,
+    _c = _a.height,
+    height = _c === void 0 ? 24 : _c,
+    content = _a.content;
+  var innrContent = useMemo(function () {
+    if (iconName) {
+      return /*#__PURE__*/React.createElement("svg", {
+        width: width,
+        height: height
+      }, /*#__PURE__*/React.createElement("use", {
+        xlinkHref: "#".concat(iconName)
+      }));
+    }
+    if (content) {
+      return content;
+    }
+    return /*#__PURE__*/React.createElement("svg", {
+      width: width,
+      height: width
+    }, /*#__PURE__*/React.createElement("use", {
+      xlinkHref: "#default"
+    }));
+  }, [content, height, iconName, width]);
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: width,
+      height: height,
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center"
+    }
+  }, innrContent);
+};
+export default CustomIcon;

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

@@ -1,4 +1,4 @@
-import React from "react";
-declare const Divider: React.FC;
-export declare const MenuDivider: React.FC;
-export default Divider;
+import React from "react";
+declare const Divider: React.FC;
+export declare const MenuDivider: React.FC;
+export default Divider;

package/es/components/Toolbar/Divider.js

@@ -0,0 +1,12 @@
+import React from "react";
+var Divider = function Divider() {
+  return /*#__PURE__*/React.createElement("div", {
+    className: "fortune-toolbar-divider fortune-toolbar-item"
+  });
+};
+export var MenuDivider = function MenuDivider() {
+  return /*#__PURE__*/React.createElement("div", {
+    className: "fortune-toolbar-menu-divider"
+  });
+};
+export default Divider;

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

@@ -1,6 +1,6 @@
-import React from "react";
-declare const MoreItemsContaier: React.FC<{
-    onClose?: () => void;
-    children?: React.ReactNode;
-}>;
-export default MoreItemsContaier;
+import React from "react";
+declare const MoreItemsContaier: React.FC<{
+    onClose?: () => void;
+    children?: React.ReactNode;
+}>;
+export default MoreItemsContaier;

package/es/components/Toolbar/MoreItemsContainer.js

@@ -0,0 +1,17 @@
+import React, { useRef } from "react";
+import { useOutsideClick } from "../../hooks/useOutsideClick";
+var MoreItemsContaier = function MoreItemsContaier(_a) {
+  var onClose = _a.onClose,
+    children = _a.children;
+  var containerRef = useRef(null);
+  useOutsideClick(containerRef, function () {
+    setTimeout(function () {
+      onClose === null || onClose === void 0 ? void 0 : onClose();
+    }, 100);
+  }, [containerRef, onClose]);
+  return /*#__PURE__*/React.createElement("div", {
+    ref: containerRef,
+    className: "fortune-toolbar-more-container"
+  }, children);
+};
+export default MoreItemsContaier;

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

@@ -1,14 +1,14 @@
-import React, { CSSProperties } from "react";
-declare const Select: React.FC<{
-    children?: React.ReactNode;
-    style?: CSSProperties;
-}>;
-type OptionProps = {
-    onClick?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
-    iconId?: string;
-    onMouseLeave?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
-    onMouseEnter?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
-};
-declare const Option: React.FC<React.PropsWithChildren<OptionProps>>;
-export { Option };
-export default Select;
+import React, { CSSProperties } from "react";
+declare const Select: React.FC<{
+    children?: React.ReactNode;
+    style?: CSSProperties;
+}>;
+type OptionProps = {
+    onClick?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    iconId?: string;
+    onMouseLeave?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    onMouseEnter?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+};
+declare const Option: React.FC<React.PropsWithChildren<OptionProps>>;
+export { Option };
+export default Select;

package/es/components/Toolbar/Select.js

@@ -0,0 +1,34 @@
+import React from "react";
+import SVGIcon from "../SVGIcon";
+var Select = function Select(_a) {
+  var children = _a.children,
+    style = _a.style;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "fortune-toolbar-select",
+    style: style
+  }, children);
+};
+var Option = function Option(_a) {
+  var iconId = _a.iconId,
+    onClick = _a.onClick,
+    children = _a.children,
+    _onMouseLeave = _a.onMouseLeave,
+    _onMouseEnter = _a.onMouseEnter;
+  return /*#__PURE__*/React.createElement("div", {
+    onClick: onClick,
+    tabIndex: 0,
+    className: "fortune-toolbar-select-option",
+    onMouseLeave: function onMouseLeave(e) {
+      return _onMouseLeave === null || _onMouseLeave === void 0 ? void 0 : _onMouseLeave(e);
+    },
+    onMouseEnter: function onMouseEnter(e) {
+      return _onMouseEnter === null || _onMouseEnter === void 0 ? void 0 : _onMouseEnter(e);
+    }
+  }, iconId && /*#__PURE__*/React.createElement(SVGIcon, {
+    name: iconId
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "fortuen-toolbar-text color-text-default text-body-sm"
+  }, children));
+};
+export { Option };
+export default Select;