@light-sheet/react
Version:
FortuneSheet is a drop-in javascript spreadsheet library that provides rich features like Excel and Google Sheets
221 lines • 7.93 kB
JavaScript
import _ from "lodash";
import { onImageMoveStart, onImageResizeStart } from "@light-sheet/core";
import React, { useContext, useMemo } from "react";
import WorkbookContext from "../../context";
var ImgBoxs = function ImgBoxs() {
var _context$insertedImgs;
var _useContext = useContext(WorkbookContext),
context = _useContext.context,
setContext = _useContext.setContext,
refs = _useContext.refs;
var activeImg = useMemo(function () {
return _.find(context.insertedImgs, {
id: context.activeImg
});
}, [context.activeImg, context.insertedImgs]);
return /*#__PURE__*/React.createElement("div", {
id: "luckysheet-image-showBoxs"
}, activeImg && /*#__PURE__*/React.createElement("div", {
id: "luckysheet-modal-dialog-activeImage",
className: "luckysheet-modal-dialog",
style: {
padding: 0,
position: "absolute",
zIndex: 300,
width: activeImg.width * context.zoomRatio,
height: activeImg.height * context.zoomRatio,
left: activeImg.left * context.zoomRatio,
top: activeImg.top * context.zoomRatio
}
}, /*#__PURE__*/React.createElement("div", {
className: "luckysheet-modal-dialog-border",
style: {
position: "absolute"
}
}), /*#__PURE__*/React.createElement("div", {
className: "luckysheet-modal-dialog-content",
style: {
width: activeImg.width * context.zoomRatio,
height: activeImg.height * context.zoomRatio,
backgroundImage: "url(".concat(activeImg.src, ")"),
backgroundSize: "".concat(activeImg.width * context.zoomRatio, "px ").concat(activeImg.height * context.zoomRatio, "px"),
backgroundRepeat: "no-repeat"
// context.activeImg.width * context.zoomRatio +
// context.activeImg.height * context.zoomRatio,
},
onMouseDown: function onMouseDown(e) {
var nativeEvent = e.nativeEvent;
onImageMoveStart(context, refs.globalCache, nativeEvent);
e.stopPropagation();
}
}), /*#__PURE__*/React.createElement("div", {
className: "luckysheet-modal-dialog-resize"
}, ["lt", "mt", "lm", "rm", "rt", "lb", "mb", "rb"].map(function (v) {
return /*#__PURE__*/React.createElement("div", {
key: v,
className: "luckysheet-modal-dialog-resize-item luckysheet-modal-dialog-resize-item-".concat(v),
"data-type": v,
onMouseDown: function onMouseDown(e) {
var nativeEvent = e.nativeEvent;
onImageResizeStart(refs.globalCache, nativeEvent, v);
e.stopPropagation();
}
});
})), /*#__PURE__*/React.createElement("div", {
className: "luckysheet-modal-dialog-controll"
}, /*#__PURE__*/React.createElement("span", {
className: "luckysheet-modal-controll-btn luckysheet-modal-controll-crop",
role: "button",
tabIndex: 0,
"aria-label": "\u88C1\u526A",
title: "\u88C1\u526A"
}, /*#__PURE__*/React.createElement("i", {
className: "fa fa-pencil",
"aria-hidden": "true"
})), /*#__PURE__*/React.createElement("span", {
className: "luckysheet-modal-controll-btn luckysheet-modal-controll-restore",
role: "button",
tabIndex: 0,
"aria-label": "\u6062\u590D\u539F\u56FE",
title: "\u6062\u590D\u539F\u56FE"
}, /*#__PURE__*/React.createElement("i", {
className: "fa fa-window-maximize",
"aria-hidden": "true"
})), /*#__PURE__*/React.createElement("span", {
className: "luckysheet-modal-controll-btn luckysheet-modal-controll-del",
role: "button",
tabIndex: 0,
"aria-label": "\u5220\u9664",
title: "\u5220\u9664"
}, /*#__PURE__*/React.createElement("i", {
className: "fa fa-trash",
"aria-hidden": "true"
})))), /*#__PURE__*/React.createElement("div", {
className: "img-list"
}, (_context$insertedImgs = context.insertedImgs) === null || _context$insertedImgs === void 0 ? void 0 : _context$insertedImgs.map(function (v) {
var id = v.id,
left = v.left,
top = v.top,
width = v.width,
height = v.height,
src = v.src;
if (v.id === context.activeImg) return null;
return /*#__PURE__*/React.createElement("div", {
id: id,
key: id,
className: "luckysheet-modal-dialog luckysheet-modal-dialog-image",
style: {
width: width * context.zoomRatio,
height: height * context.zoomRatio,
padding: 0,
position: "absolute",
left: left * context.zoomRatio,
top: top * context.zoomRatio,
zIndex: 200
},
onMouseDown: function onMouseDown(e) {
return e.stopPropagation();
},
onClick: function onClick(e) {
setContext(function (ctx) {
ctx.activeImg = id;
});
e.stopPropagation();
},
tabIndex: 0
}, /*#__PURE__*/React.createElement("div", {
className: "luckysheet-modal-dialog-content",
style: {
width: "100%",
height: "100%",
overflow: "hidden",
position: "relative"
}
}, /*#__PURE__*/React.createElement("img", {
src: src,
alt: "",
style: {
width: width * context.zoomRatio,
height: height * context.zoomRatio
}
})), /*#__PURE__*/React.createElement("div", {
className: "luckysheet-modal-dialog-border"
}));
})), /*#__PURE__*/React.createElement("div", {
id: "luckysheet-modal-dialog-cropping",
className: "luckysheet-modal-dialog",
style: {
display: "none",
padding: 0,
position: "absolute",
zIndex: 300
}
}, /*#__PURE__*/React.createElement("div", {
className: "cropping-mask"
}), /*#__PURE__*/React.createElement("div", {
className: "cropping-content"
}), /*#__PURE__*/React.createElement("div", {
className: "luckysheet-modal-dialog-border",
style: {
position: "absolute"
}
}), /*#__PURE__*/React.createElement("div", {
className: "luckysheet-modal-dialog-resize"
}, /*#__PURE__*/React.createElement("div", {
className: "resize-item lt",
"data-type": "lt"
}), /*#__PURE__*/React.createElement("div", {
className: "resize-item mt",
"data-type": "mt"
}), /*#__PURE__*/React.createElement("div", {
className: "resize-item lm",
"data-type": "lm"
}), /*#__PURE__*/React.createElement("div", {
className: "resize-item rm",
"data-type": "rm"
}), /*#__PURE__*/React.createElement("div", {
className: "resize-item rt",
"data-type": "rt"
}), /*#__PURE__*/React.createElement("div", {
className: "resize-item lb",
"data-type": "lb"
}), /*#__PURE__*/React.createElement("div", {
className: "resize-item mb",
"data-type": "mb"
}), /*#__PURE__*/React.createElement("div", {
className: "resize-item rb",
"data-type": "rb"
})), /*#__PURE__*/React.createElement("div", {
className: "luckysheet-modal-dialog-controll"
}, /*#__PURE__*/React.createElement("span", {
className: "luckysheet-modal-controll-btn luckysheet-modal-controll-crop",
role: "button",
tabIndex: 0,
"aria-label": "\u88C1\u526A",
title: "\u88C1\u526A"
}, /*#__PURE__*/React.createElement("i", {
className: "fa fa-pencil",
"aria-hidden": "true"
})), /*#__PURE__*/React.createElement("span", {
className: "luckysheet-modal-controll-btn luckysheet-modal-controll-restore",
role: "button",
tabIndex: 0,
"aria-label": "\u6062\u590D\u539F\u56FE",
title: "\u6062\u590D\u539F\u56FE"
}, /*#__PURE__*/React.createElement("i", {
className: "fa fa-window-maximize",
"aria-hidden": "true"
})), /*#__PURE__*/React.createElement("span", {
className: "luckysheet-modal-controll-btn luckysheet-modal-controll-del",
role: "button",
tabIndex: 0,
"aria-label": "\u5220\u9664",
title: "\u5220\u9664"
}, /*#__PURE__*/React.createElement("i", {
className: "fa fa-trash",
"aria-hidden": "true"
})))), /*#__PURE__*/React.createElement("div", {
className: "cell-date-picker"
}));
};
export default ImgBoxs;