@light-sheet/react/esm/components/NotationBoxes/index.js

FortuneSheet is a drop-in javascript spreadsheet library that provides rich features like Excel and Google Sheets

import React, { useContext, useEffect } from "react";
import { getFlowdata, onCommentBoxMoveStart, onCommentBoxResizeStart, setEditingComment, showComments } from "@light-sheet/core";
import _ from "lodash";
import ContentEditable from "../SheetOverlay/ContentEditable";
import WorkbookContext from "../../context";
var NotationBoxes = function NotationBoxes() {
  var _context$commentBoxes;
  var _useContext = useContext(WorkbookContext),
    context = _useContext.context,
    setContext = _useContext.setContext,
    refs = _useContext.refs;
  var flowdata = getFlowdata(context);

  // TODO use patch to detect ps isShow change may be more effecient
  useEffect(function () {
    if (flowdata) {
      var psShownCells = [];
      for (var i = 0; i < flowdata.length; i += 1) {
        for (var j = 0; j < flowdata[i].length; j += 1) {
          var _cell$ps;
          var cell = flowdata[i][j];
          if (!cell) continue;
          if ((_cell$ps = cell.ps) !== null && _cell$ps !== void 0 && _cell$ps.isShow) {
            psShownCells.push({
              r: i,
              c: j
            });
          }
        }
      }
      setContext(function (ctx) {
        return showComments(ctx, psShownCells);
      });
    }
  }, [flowdata, setContext]);
  return /*#__PURE__*/React.createElement("div", {
    id: "luckysheet-postil-showBoxs"
  }, _.concat((_context$commentBoxes = context.commentBoxes) === null || _context$commentBoxes === void 0 ? void 0 : _context$commentBoxes.filter(function (v) {
    var _context$editingComme;
    return (v === null || v === void 0 ? void 0 : v.rc) !== ((_context$editingComme = context.editingCommentBox) === null || _context$editingComme === void 0 ? void 0 : _context$editingComme.rc);
  }), [context.editingCommentBox, context.hoveredCommentBox]).map(function (commentBox) {
    var _context$editingComme2;
    if (!commentBox) return null;
    var r = commentBox.r,
      c = commentBox.c,
      rc = commentBox.rc,
      left = commentBox.left,
      top = commentBox.top,
      width = commentBox.width,
      height = commentBox.height,
      value = commentBox.value,
      autoFocus = commentBox.autoFocus,
      size = commentBox.size;
    var isEditing = ((_context$editingComme2 = context.editingCommentBox) === null || _context$editingComme2 === void 0 ? void 0 : _context$editingComme2.rc) === rc;
    var commentId = "comment-box-".concat(rc);
    return /*#__PURE__*/React.createElement("div", {
      key: rc
    }, /*#__PURE__*/React.createElement("canvas", {
      id: "arrowCanvas-".concat(rc),
      className: "arrowCanvas",
      width: size.width,
      height: size.height,
      style: {
        position: "absolute",
        left: size.left,
        top: size.top,
        zIndex: 100,
        pointerEvents: "none"
      }
    }), /*#__PURE__*/React.createElement("div", {
      id: commentId,
      className: "luckysheet-postil-show-main",
      style: {
        width: width,
        height: height,
        color: "#000",
        padding: 5,
        border: "1px solid #000",
        backgroundColor: "rgb(255,255,225)",
        position: "absolute",
        left: left,
        top: top,
        boxSizing: "border-box",
        zIndex: isEditing ? 200 : 100
      },
      onMouseDown: function onMouseDown(e) {
        var nativeEvent = e.nativeEvent;
        // @ts-ignore
        setContext(function (draftContext) {
          if (flowdata) {
            setEditingComment(draftContext, flowdata, r, c);
          }
        });
        onCommentBoxMoveStart(context, refs.globalCache, nativeEvent, {
          r: r,
          c: c,
          rc: rc
        }, commentId);
        e.stopPropagation();
      }
    }, /*#__PURE__*/React.createElement("div", {
      className: "luckysheet-postil-dialog-move"
    }, ["t", "r", "b", "l"].map(function (v) {
      return /*#__PURE__*/React.createElement("div", {
        key: v,
        className: "luckysheet-postil-dialog-move-item luckysheet-postil-dialog-move-item-".concat(v),
        "data-type": v
      });
    })), isEditing && /*#__PURE__*/React.createElement("div", {
      className: "luckysheet-postil-dialog-resize"
    }, ["lt", "mt", "lm", "rm", "rt", "lb", "mb", "rb"].map(function (v) {
      return /*#__PURE__*/React.createElement("div", {
        key: v,
        className: "luckysheet-postil-dialog-resize-item luckysheet-postil-dialog-resize-item-".concat(v),
        "data-type": v,
        onMouseDown: function onMouseDown(e) {
          var nativeEvent = e.nativeEvent;
          onCommentBoxResizeStart(context, refs.globalCache, nativeEvent, {
            r: r,
            c: c,
            rc: rc
          }, commentId, v);
          e.stopPropagation();
        }
      });
    })), /*#__PURE__*/React.createElement("div", {
      style: {
        width: "100%",
        height: "100%",
        overflow: "hidden"
      }
    }, /*#__PURE__*/React.createElement(ContentEditable, {
      id: "comment-editor-".concat(rc),
      autoFocus: autoFocus,
      style: {
        width: "100%",
        height: "100%",
        lineHeight: "20px",
        boxSizing: "border-box",
        textAlign: "center",
        wordBreak: "break-all",
        outline: "none"
      },
      allowEdit: context.allowEdit,
      spellCheck: false,
      "data-r": r,
      "data-c": c,
      onKeyDown: function onKeyDown(e) {
        return e.stopPropagation();
      },
      onFocus: function onFocus(e) {
        if (context.allowEdit === false) return;
        refs.globalCache.editingCommentBoxEle = e.target;
      },
      onMouseDown: function onMouseDown(e) {
        setContext(function (draftContext) {
          if (flowdata) {
            setEditingComment(draftContext, flowdata, r, c);
          }
        });
        e.stopPropagation();
      },
      onDoubleClick: function onDoubleClick(e) {
        e.stopPropagation();
      },
      initialContent: value
    }))));
  }));
};
export default NotationBoxes;