@light-sheet/react/esm/components/SheetList/SheetListItem.js

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

import { cancelNormalSelected, cancelActiveImgItem } from "@light-sheet/core";
import React, { useContext, useEffect, useRef } from "react";
import WorkbookContext from "../../context";
import "./index.css";
import SheetHiddenButton from "./SheetHiddenButton";
import SVGIcon from "../SVGIcon";
var SheetListItem = function SheetListItem(_ref) {
  var sheet = _ref.sheet,
    isDropPlaceholder = _ref.isDropPlaceholder;
  var _useContext = useContext(WorkbookContext),
    context = _useContext.context,
    setContext = _useContext.setContext,
    refs = _useContext.refs;
  var containerRef = useRef(null);
  useEffect(function () {
    setContext(function (draftCtx) {
      var r = context.sheetScrollRecord[draftCtx === null || draftCtx === void 0 ? void 0 : draftCtx.currentSheetId];
      if (r) {
        var _r$scrollLeft, _r$scrollTop, _r$luckysheet_select_, _r$luckysheet_select_2;
        draftCtx.scrollLeft = (_r$scrollLeft = r.scrollLeft) !== null && _r$scrollLeft !== void 0 ? _r$scrollLeft : 0;
        draftCtx.scrollTop = (_r$scrollTop = r.scrollTop) !== null && _r$scrollTop !== void 0 ? _r$scrollTop : 0;
        draftCtx.luckysheet_select_status = (_r$luckysheet_select_ = r.luckysheet_select_status) !== null && _r$luckysheet_select_ !== void 0 ? _r$luckysheet_select_ : false;
        draftCtx.luckysheet_select_save = (_r$luckysheet_select_2 = r.luckysheet_select_save) !== null && _r$luckysheet_select_2 !== void 0 ? _r$luckysheet_select_2 : undefined;
      } else {
        draftCtx.scrollLeft = 0;
        draftCtx.scrollTop = 0;
        draftCtx.luckysheet_select_status = false;
        draftCtx.luckysheet_select_save = undefined;
      }
      draftCtx.luckysheet_selection_range = [];
    });
  }, [context.currentSheetId, context.sheetScrollRecord, setContext]);
  return /*#__PURE__*/React.createElement("div", {
    className: "fortune-sheet-list-item",
    key: sheet.id,
    ref: containerRef,
    onClick: function onClick() {
      if (isDropPlaceholder) return;
      setContext(function (draftCtx) {
        draftCtx.sheetScrollRecord[draftCtx.currentSheetId] = {
          scrollLeft: draftCtx.scrollLeft,
          scrollTop: draftCtx.scrollTop,
          luckysheet_select_status: draftCtx.luckysheet_select_status,
          luckysheet_select_save: draftCtx.luckysheet_select_save,
          luckysheet_selection_range: draftCtx.luckysheet_selection_range
        };
        draftCtx.currentSheetId = sheet.id;
        draftCtx.zoomRatio = sheet.zoomRatio || 1;
        cancelActiveImgItem(draftCtx, refs.globalCache);
        cancelNormalSelected(draftCtx);
      });
    },
    tabIndex: 0
  }, /*#__PURE__*/React.createElement("span", {
    className: "fortune-sheet-selected-check-sapce"
  }, sheet.id === context.currentSheetId && /*#__PURE__*/React.createElement(SVGIcon, {
    name: "check",
    width: 16,
    height: 16,
    style: {
      lineHeight: 30,
      verticalAlign: "middle"
    }
  })), /*#__PURE__*/React.createElement("span", {
    className: "luckysheet-sheets-item-name fortune-sheet-list-item-name",
    spellCheck: "false"
  }, !!sheet.color && /*#__PURE__*/React.createElement("div", {
    className: "luckysheet-sheets-list-item-color",
    style: {
      background: sheet.color
    }
  }), sheet.name), sheet.hide && /*#__PURE__*/React.createElement(SheetHiddenButton, {
    sheet: sheet
  }));
};
export default SheetListItem;