@light-sheet/react
Version:
FortuneSheet is a drop-in javascript spreadsheet library that provides rich features like Excel and Google Sheets
232 lines • 8.39 kB
JavaScript
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
import React, { useCallback, useContext, useRef, useState } from "react";
import "./index.css";
import { locale } from "@light-sheet/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: "7",
// value: "Double",
// },
{
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: "12",
// value: "SlantedDashDot",
// },
{
Text: "13",
value: "Thick",
strokeDasharray: "2,0",
strokeWidth: "3"
}];
var CustomBorder = function CustomBorder(_ref) {
var onPick = _ref.onPick;
var _useContext = useContext(WorkbookContext),
context = _useContext.context,
refs = _useContext.refs;
var _locale = locale(context),
border = _locale.border;
var _useState = useState("#000000"),
_useState2 = _slicedToArray(_useState, 2),
changeColor = _useState2[0],
setchangeColor = _useState2[1];
var _useState3 = useState("1"),
_useState4 = _slicedToArray(_useState3, 2),
changeStyle = _useState4[0],
setchangeStyle = _useState4[1];
var colorRef = useRef(null);
var styleRef = useRef(null);
var colorPreviewRef = useRef(null);
var _useState5 = useState(""),
_useState6 = _slicedToArray(_useState5, 2),
previewWith = _useState6[0],
setPreviewWith = _useState6[1];
var _useState7 = useState(""),
_useState8 = _slicedToArray(_useState7, 2),
previewdasharry = _useState8[0],
setPreviewdasharray = _useState8[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;