@fileverse-dev/fortune-react 1.0.26 → 1.1.0

package/lib/components/Toolbar/CustomBorder.js

@@ -1,220 +0,0 @@
-"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"));
-require("./index.css");
-var _fortuneCore = require("@fileverse-dev/fortune-core");
-var _lodash = _interopRequireDefault(require("lodash"));
-var _context = _interopRequireDefault(require("../../context"));
-var _SVGIcon = _interopRequireDefault(require("../SVGIcon"));
-var _CustomColor = require("./CustomColor");
-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 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 = (0, _react.useContext)(_context.default),
-    context = _b.context,
-    refs = _b.refs;
-  var border = (0, _fortuneCore.locale)(context).border;
-  var _c = (0, _react.useState)("#000000"),
-    changeColor = _c[0],
-    setchangeColor = _c[1];
-  var _d = (0, _react.useState)("1"),
-    changeStyle = _d[0],
-    setchangeStyle = _d[1];
-  var colorRef = (0, _react.useRef)(null);
-  var styleRef = (0, _react.useRef)(null);
-  var colorPreviewRef = (0, _react.useRef)(null);
-  var _e = (0, _react.useState)(""),
-    previewWith = _e[0],
-    setPreviewWith = _e[1];
-  var _f = (0, _react.useState)(""),
-    previewdasharry = _f[0],
-    setPreviewdasharray = _f[1];
-  var showBorderSubMenu = (0, _react.useCallback)(function (e) {
-    var target = e.target;
-    var menuItemRect = target.getBoundingClientRect();
-    var subMenuItem = target.querySelector(".fortune-border-select-menu");
-    if (_lodash.default.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 = (0, _react.useCallback)(function () {
-    styleRef.current.style.display = "none";
-    colorRef.current.style.display = "none";
-  }, []);
-  var changePreviewStyle = (0, _react.useCallback)(function (width, dasharray) {
-    setPreviewWith(width);
-    setPreviewdasharray(dasharray);
-  }, []);
-  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
-    className: "fortune-border-select-option",
-    key: "borderColor",
-    onMouseEnter: function onMouseEnter(e) {
-      showBorderSubMenu(e);
-    },
-    onMouseLeave: function onMouseLeave() {
-      hideBorderSubMenu();
-    }
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "fortune-toolbar-menu-line"
-  }, border.borderColor, /*#__PURE__*/_react.default.createElement(_SVGIcon.default, {
-    name: "rightArrow",
-    style: {
-      width: "14px"
-    }
-  })), /*#__PURE__*/_react.default.createElement("div", {
-    ref: colorPreviewRef,
-    className: "fortune-border-color-preview",
-    style: {
-      backgroundColor: changeColor
-    }
-  }), /*#__PURE__*/_react.default.createElement("div", {
-    ref: colorRef,
-    className: "fortune-border-select-menu",
-    style: {
-      display: "none",
-      width: "166px"
-    }
-  }, /*#__PURE__*/_react.default.createElement(_CustomColor.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.default.createElement("div", {
-    className: "fortune-border-select-option",
-    key: "borderStyle",
-    onMouseEnter: function onMouseEnter(e) {
-      showBorderSubMenu(e);
-    },
-    onMouseLeave: function onMouseLeave() {
-      hideBorderSubMenu();
-    }
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "fortune-toolbar-menu-line"
-  }, border.borderStyle, /*#__PURE__*/_react.default.createElement(_SVGIcon.default, {
-    name: "rightArrow",
-    style: {
-      width: "14px"
-    }
-  })), /*#__PURE__*/_react.default.createElement("div", {
-    className: "fortune-border-style-preview"
-  }, /*#__PURE__*/_react.default.createElement("svg", {
-    width: "90"
-  }, /*#__PURE__*/_react.default.createElement("g", {
-    fill: "none",
-    stroke: "black",
-    strokeWidth: previewWith
-  }, /*#__PURE__*/_react.default.createElement("path", {
-    strokeDasharray: previewdasharry,
-    d: "M0 0 l90 0"
-  })))), /*#__PURE__*/_react.default.createElement("div", {
-    ref: styleRef,
-    className: "fortune-border-select-menu fortune-toolbar-select",
-    style: {
-      display: "none",
-      width: "110px"
-    }
-  }, /*#__PURE__*/_react.default.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.default.createElement("div", {
-    className: "fortune-boder-style-picker"
-  }, size.map(function (items, i) {
-    return /*#__PURE__*/_react.default.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.default.createElement("svg", {
-      height: "10",
-      width: "90"
-    }, /*#__PURE__*/_react.default.createElement("g", {
-      fill: "none",
-      stroke: "black",
-      strokeWidth: items.strokeWidth
-    }, /*#__PURE__*/_react.default.createElement("path", {
-      strokeDasharray: items.strokeDasharray,
-      d: "M0 5 l85 0"
-    }))));
-  })))));
-};
-var _default = exports.default = CustomBorder;

package/lib/components/Toolbar/CustomButton.js

@@ -1,36 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _ui = require("@fileverse/ui");
-var _CustomIcon = _interopRequireDefault(require("./CustomIcon"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-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.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"
-    } : {}
-  }, /*#__PURE__*/_react.default.createElement(_CustomIcon.default, {
-    width: 16,
-    height: 16,
-    iconName: iconName,
-    content: icon
-  }), children));
-};
-var _default = exports.default = CustomButton;

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

@@ -1,8 +0,0 @@
-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/lib/components/Toolbar/CustomColor.js

@@ -1,32 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.CustomColor = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _ColorPicker = _interopRequireDefault(require("../Toolbar/ColorPicker"));
-require("./index.css");
-var _SVGIcon = _interopRequireDefault(require("../SVGIcon"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-var CustomColor = exports.CustomColor = function CustomColor(_a) {
-  var onCustomPick = _a.onCustomPick,
-    onColorPick = _a.onColorPick;
-  return /*#__PURE__*/_react.default.createElement("div", {
-    id: "fortune-custom-color"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "color-reset",
-    onClick: function onClick() {
-      return onCustomPick(undefined);
-    },
-    tabIndex: 0
-  }, /*#__PURE__*/_react.default.createElement(_SVGIcon.default, {
-    name: "reset-color",
-    width: 16,
-    height: 16
-  }), "Reset"), /*#__PURE__*/_react.default.createElement(_ColorPicker.default, {
-    onPick: function onPick(color) {
-      onColorPick(color);
-    }
-  }));
-};

package/lib/components/Toolbar/CustomIcon.js

@@ -1,46 +0,0 @@
-"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"));
-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 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 = (0, _react.useMemo)(function () {
-    if (iconName) {
-      return /*#__PURE__*/_react.default.createElement("svg", {
-        width: width,
-        height: height
-      }, /*#__PURE__*/_react.default.createElement("use", {
-        xlinkHref: "#".concat(iconName)
-      }));
-    }
-    if (content) {
-      return content;
-    }
-    return /*#__PURE__*/_react.default.createElement("svg", {
-      width: width,
-      height: width
-    }, /*#__PURE__*/_react.default.createElement("use", {
-      xlinkHref: "#default"
-    }));
-  }, [content, height, iconName, width]);
-  return /*#__PURE__*/_react.default.createElement("div", {
-    style: {
-      width: width,
-      height: height,
-      display: "flex",
-      justifyContent: "center",
-      alignItems: "center"
-    }
-  }, innrContent);
-};
-var _default = exports.default = CustomIcon;

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

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

package/lib/components/Toolbar/Divider.js

@@ -1,19 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.MenuDivider = void 0;
-var _react = _interopRequireDefault(require("react"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-var Divider = function Divider() {
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: "fortune-toolbar-divider fortune-toolbar-item"
-  });
-};
-var MenuDivider = exports.MenuDivider = function MenuDivider() {
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: "fortune-toolbar-menu-divider"
-  });
-};
-var _default = exports.default = Divider;

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

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

package/lib/components/Toolbar/MoreItemsContainer.js

@@ -1,25 +0,0 @@
-"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 _useOutsideClick = require("../../hooks/useOutsideClick");
-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 MoreItemsContaier = function MoreItemsContaier(_a) {
-  var onClose = _a.onClose,
-    children = _a.children;
-  var containerRef = (0, _react.useRef)(null);
-  (0, _useOutsideClick.useOutsideClick)(containerRef, function () {
-    setTimeout(function () {
-      onClose === null || onClose === void 0 ? void 0 : onClose();
-    }, 100);
-  }, [containerRef, onClose]);
-  return /*#__PURE__*/_react.default.createElement("div", {
-    ref: containerRef,
-    className: "fortune-toolbar-more-container"
-  }, children);
-};
-var _default = exports.default = MoreItemsContaier;

package/lib/components/Toolbar/Select.js

@@ -1,40 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.Option = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _SVGIcon = _interopRequireDefault(require("../SVGIcon"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-var Select = function Select(_a) {
-  var children = _a.children,
-    style = _a.style;
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: "fortune-toolbar-select",
-    style: style
-  }, children);
-};
-var Option = exports.Option = function Option(_a) {
-  var iconId = _a.iconId,
-    onClick = _a.onClick,
-    children = _a.children,
-    _onMouseLeave = _a.onMouseLeave,
-    _onMouseEnter = _a.onMouseEnter;
-  return /*#__PURE__*/_react.default.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.default.createElement(_SVGIcon.default, {
-    name: iconId
-  }), /*#__PURE__*/_react.default.createElement("div", {
-    className: "fortuen-toolbar-text color-text-default text-body-sm"
-  }, children));
-};
-var _default = exports.default = Select;