@light-sheet/react
Version:
FortuneSheet is a drop-in javascript spreadsheet library that provides rich features like Excel and Google Sheets
261 lines • 11.3 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 { locale, searchAll, searchNext, normalizeSelection, onSearchDialogMoveStart, replace, replaceAll, scrollToHighlightCell } from "@light-sheet/core";
import produce from "immer";
import React, { useContext, useState, useCallback } from "react";
import _ from "lodash";
import WorkbookContext from "../../context";
import SVGIcon from "../SVGIcon";
import { useAlert } from "../../hooks/useAlert";
import "./index.css";
var SearchReplace = function SearchReplace(_ref) {
var getContainer = _ref.getContainer;
var _useContext = useContext(WorkbookContext),
context = _useContext.context,
setContext = _useContext.setContext,
refs = _useContext.refs;
var _locale = locale(context),
findAndReplace = _locale.findAndReplace,
button = _locale.button;
var _useState = useState(""),
_useState2 = _slicedToArray(_useState, 2),
searchText = _useState2[0],
setSearchText = _useState2[1];
var _useState3 = useState(""),
_useState4 = _slicedToArray(_useState3, 2),
replaceText = _useState4[0],
setReplaceText = _useState4[1];
var _useState5 = useState(context.showReplace),
_useState6 = _slicedToArray(_useState5, 2),
showReplace = _useState6[0],
setShowReplace = _useState6[1];
var _useState7 = useState([]),
_useState8 = _slicedToArray(_useState7, 2),
searchResult = _useState8[0],
setSearchResult = _useState8[1];
var _useState9 = useState(),
_useState10 = _slicedToArray(_useState9, 2),
selectedCell = _useState10[0],
setSelectedCell = _useState10[1];
var _useAlert = useAlert(),
showAlert = _useAlert.showAlert;
var _useState11 = useState({
regCheck: false,
wordCheck: false,
caseCheck: false
}),
_useState12 = _slicedToArray(_useState11, 2),
checkMode = _useState12[0],
checkModeReplace = _useState12[1];
var closeDialog = useCallback(function () {
_.set(refs.globalCache, "searchDialog.mouseEnter", false);
setContext(function (draftCtx) {
draftCtx.showSearch = false;
draftCtx.showReplace = false;
});
}, [refs.globalCache, setContext]);
var setCheckMode = useCallback(function (mode, value) {
return checkModeReplace(produce(function (draft) {
_.set(draft, mode, value);
}));
}, []);
var getInitialPosition = useCallback(function (container) {
var rect = container.getBoundingClientRect();
return {
left: (rect.width - 500) / 2,
top: (rect.height - 200) / 3
};
}, []);
return /*#__PURE__*/React.createElement("div", {
id: "fortune-search-replace",
className: "fortune-search-replace fortune-dialog",
style: getInitialPosition(getContainer()),
onMouseEnter: function onMouseEnter() {
_.set(refs.globalCache, "searchDialog.mouseEnter", true);
},
onMouseLeave: function onMouseLeave() {
_.set(refs.globalCache, "searchDialog.mouseEnter", false);
},
onMouseDown: function onMouseDown(e) {
var nativeEvent = e.nativeEvent;
onSearchDialogMoveStart(refs.globalCache, nativeEvent, getContainer());
e.stopPropagation();
}
}, /*#__PURE__*/React.createElement("div", {
className: "container",
onMouseDown: function onMouseDown(e) {
return e.stopPropagation();
}
}, /*#__PURE__*/React.createElement("div", {
className: "icon-close fortune-modal-dialog-icon-close",
onClick: closeDialog,
tabIndex: 0
}, /*#__PURE__*/React.createElement(SVGIcon, {
name: "close",
style: {
padding: 7,
cursor: "pointer"
}
})), /*#__PURE__*/React.createElement("div", {
className: "tabBox"
}, /*#__PURE__*/React.createElement("span", {
id: "searchTab",
className: showReplace ? "" : "on",
onClick: function onClick() {
return setShowReplace(false);
},
tabIndex: 0
}, findAndReplace.find), /*#__PURE__*/React.createElement("span", {
id: "replaceTab",
className: showReplace ? "on" : "",
onClick: function onClick() {
return setShowReplace(true);
},
tabIndex: 0
}, findAndReplace.replace)), /*#__PURE__*/React.createElement("div", {
className: "ctBox"
}, /*#__PURE__*/React.createElement("div", {
className: "row"
}, /*#__PURE__*/React.createElement("div", {
className: "inputBox"
}, /*#__PURE__*/React.createElement("div", {
className: "textboxs",
id: "searchInput"
}, findAndReplace.findTextbox, "\uFF1A", /*#__PURE__*/React.createElement("input", {
className: "formulaInputFocus"
// eslint-disable-next-line jsx-a11y/no-autofocus
,
autoFocus: true,
spellCheck: "false",
onKeyDown: function onKeyDown(e) {
return e.stopPropagation();
},
value: searchText,
onChange: function onChange(e) {
return setSearchText(e.target.value);
}
})), showReplace && /*#__PURE__*/React.createElement("div", {
className: "textboxs",
id: "replaceInput"
}, findAndReplace.replaceTextbox, "\uFF1A", /*#__PURE__*/React.createElement("input", {
className: "formulaInputFocus",
spellCheck: "false",
onKeyDown: function onKeyDown(e) {
return e.stopPropagation();
},
value: replaceText,
onChange: function onChange(e) {
return setReplaceText(e.target.value);
}
}))), /*#__PURE__*/React.createElement("div", {
className: "checkboxs"
}, /*#__PURE__*/React.createElement("div", {
id: "regCheck"
}, /*#__PURE__*/React.createElement("input", {
type: "checkbox",
onChange: function onChange(e) {
return setCheckMode("regCheck", e.target.checked);
}
}), /*#__PURE__*/React.createElement("span", null, findAndReplace.regexTextbox)), /*#__PURE__*/React.createElement("div", {
id: "wordCheck"
}, /*#__PURE__*/React.createElement("input", {
type: "checkbox",
onChange: function onChange(e) {
return setCheckMode("wordCheck", e.target.checked);
}
}), /*#__PURE__*/React.createElement("span", null, findAndReplace.wholeTextbox)), /*#__PURE__*/React.createElement("div", {
id: "caseCheck"
}, /*#__PURE__*/React.createElement("input", {
type: "checkbox",
onChange: function onChange(e) {
return setCheckMode("caseCheck", e.target.checked);
}
}), /*#__PURE__*/React.createElement("span", null, findAndReplace.distinguishTextbox)))), /*#__PURE__*/React.createElement("div", {
className: "btnBox"
}, showReplace && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
id: "replaceAllBtn",
className: "fortune-message-box-button button-default",
onClick: function onClick() {
setContext(function (draftCtx) {
setSelectedCell(undefined);
var alertMsg = replaceAll(draftCtx, searchText, replaceText, checkMode);
showAlert(alertMsg);
});
},
tabIndex: 0
}, findAndReplace.allReplaceBtn), /*#__PURE__*/React.createElement("div", {
id: "replaceBtn",
className: "fortune-message-box-button button-default",
onClick: function onClick() {
return setContext(function (draftCtx) {
setSelectedCell(undefined);
var alertMsg = replace(draftCtx, searchText, replaceText, checkMode);
if (alertMsg != null) {
showAlert(alertMsg);
}
});
},
tabIndex: 0
}, findAndReplace.replaceBtn)), /*#__PURE__*/React.createElement("div", {
id: "searchAllBtn",
className: "fortune-message-box-button button-default",
onClick: function onClick() {
return setContext(function (draftCtx) {
setSelectedCell(undefined);
if (!searchText) return;
var res = searchAll(draftCtx, searchText, checkMode);
setSearchResult(res);
if (_.isEmpty(res)) showAlert(findAndReplace.noFindTip);
});
},
tabIndex: 0
}, findAndReplace.allFindBtn), /*#__PURE__*/React.createElement("div", {
id: "searchNextBtn",
className: "fortune-message-box-button button-default",
onClick: function onClick() {
return setContext(function (draftCtx) {
setSearchResult([]);
var alertMsg = searchNext(draftCtx, searchText, checkMode);
if (alertMsg != null) showAlert(alertMsg);
});
},
tabIndex: 0
}, findAndReplace.findBtn))), /*#__PURE__*/React.createElement("div", {
className: "close-button fortune-message-box-button button-default",
onClick: closeDialog,
tabIndex: 0
}, button.close), searchResult.length > 0 && /*#__PURE__*/React.createElement("div", {
id: "searchAllbox"
}, /*#__PURE__*/React.createElement("div", {
className: "boxTitle"
}, /*#__PURE__*/React.createElement("span", null, findAndReplace.searchTargetSheet), /*#__PURE__*/React.createElement("span", null, findAndReplace.searchTargetCell), /*#__PURE__*/React.createElement("span", null, findAndReplace.searchTargetValue)), /*#__PURE__*/React.createElement("div", {
className: "boxMain"
}, searchResult.map(function (v) {
return /*#__PURE__*/React.createElement("div", {
className: "boxItem ".concat(_.isEqual(selectedCell, {
r: v.r,
c: v.c
}) ? "on" : ""),
key: v.cellPosition,
onClick: function onClick() {
setContext(function (draftCtx) {
draftCtx.luckysheet_select_save = normalizeSelection(draftCtx, [{
row: [v.r, v.r],
column: [v.c, v.c]
}]);
scrollToHighlightCell(draftCtx, v.r, v.c);
});
setSelectedCell({
r: v.r,
c: v.c
});
},
tabIndex: 0
}, /*#__PURE__*/React.createElement("span", null, v.sheetName), /*#__PURE__*/React.createElement("span", null, v.cellPosition), /*#__PURE__*/React.createElement("span", null, v.value));
})))));
};
export default SearchReplace;