@light-sheet/react
Version:
FortuneSheet is a drop-in javascript spreadsheet library that provides rich features like Excel and Google Sheets
310 lines • 13.7 kB
JavaScript
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
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, { useContext, useState, useMemo, useCallback, useRef, useLayoutEffect } from "react";
import { locale, saveHyperlink, removeHyperlink, replaceHtml, getRangetxt, goToLink, isLinkValid, normalizeSelection, onRangeSelectionModalMoveStart } from "@light-sheet/core";
import "./index.css";
import _ from "lodash";
import WorkbookContext from "../../context";
import SVGIcon from "../SVGIcon";
export var LinkEditCard = function LinkEditCard(_ref) {
var r = _ref.r,
c = _ref.c,
rc = _ref.rc,
originText = _ref.originText,
originType = _ref.originType,
originAddress = _ref.originAddress,
isEditing = _ref.isEditing,
position = _ref.position,
selectingCellRange = _ref.selectingCellRange;
var _useContext = useContext(WorkbookContext),
context = _useContext.context,
setContext = _useContext.setContext,
refs = _useContext.refs;
var _useState = useState(originText),
_useState2 = _slicedToArray(_useState, 2),
linkText = _useState2[0],
setLinkText = _useState2[1];
var _useState3 = useState(originAddress),
_useState4 = _slicedToArray(_useState3, 2),
linkAddress = _useState4[0],
setLinkAddress = _useState4[1];
var _useState5 = useState(originType),
_useState6 = _slicedToArray(_useState5, 2),
linkType = _useState6[0],
setLinkType = _useState6[1];
var _locale = locale(context),
insertLink = _locale.insertLink,
linkTypeList = _locale.linkTypeList,
button = _locale.button;
var lastCell = useRef(normalizeSelection(context, [{
row: [r, r],
column: [c, c]
}]));
var skipCellRangeSet = useRef(true);
var isLinkAddressValid = isLinkValid(context, linkType, linkAddress);
var tooltip = /*#__PURE__*/React.createElement("div", {
className: "validation-input-tip"
}, isLinkAddressValid.tooltip);
var hideLinkCard = useCallback(function () {
_.set(refs.globalCache, "linkCard.mouseEnter", false);
setContext(function (draftCtx) {
draftCtx.linkCard = undefined;
});
}, [refs.globalCache, setContext]);
var setRangeModalVisible = useCallback(function (visible) {
return setContext(function (draftCtx) {
draftCtx.luckysheet_select_save = lastCell.current;
if (draftCtx.linkCard != null) draftCtx.linkCard.selectingCellRange = visible;
});
}, [setContext]);
var containerEvent = useMemo(function () {
return {
onMouseEnter: function onMouseEnter() {
return _.set(refs.globalCache, "linkCard.mouseEnter", true);
},
onMouseLeave: function onMouseLeave() {
return _.set(refs.globalCache, "linkCard.mouseEnter", false);
},
onMouseDown: function onMouseDown(e) {
return e.stopPropagation();
},
onMouseMove: function onMouseMove(e) {
return e.stopPropagation();
},
onMouseUp: function onMouseUp(e) {
return e.stopPropagation();
},
onKeyDown: function onKeyDown(e) {
return e.stopPropagation();
},
onDoubleClick: function onDoubleClick(e) {
return e.stopPropagation();
}
};
}, [refs.globalCache]);
var renderBottomButton = useCallback(function (onOk, onCancel) {
return /*#__PURE__*/React.createElement("div", {
className: "button-group"
}, /*#__PURE__*/React.createElement("div", {
className: "button-basic button-default",
onClick: onCancel,
tabIndex: 0
}, button.cancel), /*#__PURE__*/React.createElement("div", {
className: "button-basic button-primary",
onClick: onOk,
tabIndex: 0
}, button.confirm));
}, [button]);
var renderToolbarButton = useCallback(function (iconId, onClick) {
return /*#__PURE__*/React.createElement("div", {
className: "fortune-toolbar-button",
onClick: onClick,
tabIndex: 0
}, /*#__PURE__*/React.createElement(SVGIcon, {
name: iconId,
style: {
width: 18,
height: 18
}
}));
}, []);
useLayoutEffect(function () {
setLinkAddress(originAddress);
setLinkText(originText);
setLinkType(originType);
}, [rc, originAddress, originText, originType]);
useLayoutEffect(function () {
if (selectingCellRange) {
skipCellRangeSet.current = true;
}
}, [selectingCellRange]);
useLayoutEffect(function () {
if (skipCellRangeSet.current) {
skipCellRangeSet.current = false;
return;
}
if (selectingCellRange) {
var len = _.size(context.luckysheet_select_save);
if (len > 0) {
setLinkAddress(getRangetxt(context, context.currentSheetId, context.luckysheet_select_save[len - 1], ""));
}
}
}, [context, selectingCellRange]);
if (!isEditing) {
return /*#__PURE__*/React.createElement("div", _extends({}, containerEvent, {
onKeyDown: function onKeyDown(e) {
e.stopPropagation();
},
className: "fortune-link-modify-modal link-toolbar",
style: {
left: position.cellLeft + 20,
top: position.cellBottom
}
}), /*#__PURE__*/React.createElement("div", {
className: "link-content",
onClick: function onClick() {
setContext(function (draftCtx) {
return goToLink(draftCtx, r, c, linkType, linkAddress, refs.scrollbarX.current, refs.scrollbarY.current);
});
},
tabIndex: 0
}, linkType === "webpage" ? insertLink.openLink : replaceHtml(insertLink.goTo, {
linkAddress: linkAddress
})), context.allowEdit === true && /*#__PURE__*/React.createElement("div", {
className: "divider"
}), context.allowEdit === true && linkType === "webpage" && renderToolbarButton("copy", function () {
navigator.clipboard.writeText(originAddress);
hideLinkCard();
}), context.allowEdit === true && renderToolbarButton("pencil", function () {
return setContext(function (draftCtx) {
if (draftCtx.linkCard != null && draftCtx.allowEdit) {
draftCtx.linkCard.isEditing = true;
}
});
}), context.allowEdit === true && /*#__PURE__*/React.createElement("div", {
className: "divider"
}), context.allowEdit === true && renderToolbarButton("unlink", function () {
return setContext(function (draftCtx) {
_.set(refs.globalCache, "linkCard.mouseEnter", false);
removeHyperlink(draftCtx, r, c);
});
}));
}
return selectingCellRange ? /*#__PURE__*/React.createElement("div", _extends({
className: "fortune-link-modify-modal range-selection-modal",
style: {
left: position.cellLeft,
top: position.cellBottom + 5
}
}, _.omit(containerEvent, ["onMouseDown", "onMouseMove", "onMouseUp"]), {
onMouseDown: function onMouseDown(e) {
var nativeEvent = e.nativeEvent;
onRangeSelectionModalMoveStart(context, refs.globalCache, nativeEvent);
e.stopPropagation();
}
}), /*#__PURE__*/React.createElement("div", {
className: "modal-icon-close",
onClick: function onClick() {
return setRangeModalVisible(false);
},
tabIndex: 0
}, /*#__PURE__*/React.createElement(SVGIcon, {
name: "close"
})), /*#__PURE__*/React.createElement("div", {
className: "modal-title"
}, insertLink.selectCellRange), /*#__PURE__*/React.createElement("input", _extends({}, containerEvent, {
className: "range-selection-input ".concat(!linkAddress || isLinkAddressValid.isValid ? "" : "error-input"),
placeholder: insertLink.cellRangePlaceholder,
onChange: function onChange(e) {
return setLinkAddress(e.target.value);
},
value: linkAddress
})), tooltip, /*#__PURE__*/React.createElement("div", {
className: "modal-footer"
}, renderBottomButton(function () {
if (isLinkAddressValid.isValid) setRangeModalVisible(false);
}, function () {
setLinkAddress(originAddress);
setRangeModalVisible(false);
}))) : /*#__PURE__*/React.createElement("div", _extends({
className: "fortune-link-modify-modal",
style: {
left: position.cellLeft + 20,
top: position.cellBottom
}
}, containerEvent), /*#__PURE__*/React.createElement("div", {
className: "fortune-link-modify-line"
}, /*#__PURE__*/React.createElement("div", {
className: "fortune-link-modify-title"
}, insertLink.linkText), /*#__PURE__*/React.createElement("input", {
className: "fortune-link-modify-input",
spellCheck: "false"
// eslint-disable-next-line jsx-a11y/no-autofocus
,
autoFocus: true,
value: linkText,
onChange: function onChange(e) {
return setLinkText(e.target.value);
}
})), /*#__PURE__*/React.createElement("div", {
className: "fortune-link-modify-line"
}, /*#__PURE__*/React.createElement("div", {
className: "fortune-link-modify-title"
}, insertLink.linkType), /*#__PURE__*/React.createElement("select", {
className: "fortune-link-modify-select",
value: linkType,
onChange: function onChange(e) {
if (e.target.value === "sheet") {
if (!linkText) {
setLinkText(context.luckysheetfile[0].name);
}
setLinkAddress(context.luckysheetfile[0].name);
} else {
setLinkAddress("");
}
if (e.target.value === "cellrange") setRangeModalVisible(true);
setLinkType(e.target.value);
}
}, linkTypeList.map(function (type) {
return /*#__PURE__*/React.createElement("option", {
key: type.value,
value: type.value
}, type.text);
}))), /*#__PURE__*/React.createElement("div", {
className: "fortune-link-modify-line"
}, linkType === "webpage" && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
className: "fortune-link-modify-title"
}, insertLink.linkAddress), /*#__PURE__*/React.createElement("input", {
className: "fortune-link-modify-input ".concat(!linkAddress || isLinkAddressValid.isValid ? "" : "error-input"),
spellCheck: "false",
value: linkAddress,
onChange: function onChange(e) {
return setLinkAddress(e.target.value);
}
}), tooltip), linkType === "cellrange" && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
className: "fortune-link-modify-title"
}, insertLink.linkCell), /*#__PURE__*/React.createElement("input", {
className: "fortune-link-modify-input ".concat(!linkAddress || isLinkAddressValid.isValid ? "" : "error-input"),
spellCheck: "false",
value: linkAddress,
onChange: function onChange(e) {
return setLinkAddress(e.target.value);
}
}), /*#__PURE__*/React.createElement("div", {
className: "fortune-link-modify-cell-selector",
onClick: function onClick() {
return setRangeModalVisible(true);
},
tabIndex: 0
}, /*#__PURE__*/React.createElement(SVGIcon, {
name: "border-all"
})), tooltip), linkType === "sheet" && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
className: "fortune-link-modify-title"
}, insertLink.linkSheet), /*#__PURE__*/React.createElement("select", {
className: "fortune-link-modify-select",
onChange: function onChange(e) {
if (!linkText) setLinkText(e.target.value);
setLinkAddress(e.target.value);
},
value: linkAddress
}, context.luckysheetfile.map(function (sheet) {
return /*#__PURE__*/React.createElement("option", {
key: sheet.id,
value: sheet.name
}, sheet.name);
})), tooltip)), /*#__PURE__*/React.createElement("div", {
className: "modal-footer"
}, renderBottomButton(function () {
if (!isLinkAddressValid.isValid) return;
_.set(refs.globalCache, "linkCard.mouseEnter", false);
setContext(function (draftCtx) {
return saveHyperlink(draftCtx, r, c, linkText, linkType, linkAddress);
});
}, hideLinkCard)));
};
export default LinkEditCard;