@mirrormedia/lilith-draft-editor
Version:
## Installation
150 lines (131 loc) • 6.38 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.SlideshowEditBlock = SlideshowEditBlock;
exports.SlideshowEditBlockV2 = SlideshowEditBlockV2;
var _react = _interopRequireWildcard(require("react"));
var _styledComponents = _interopRequireDefault(require("styled-components"));
var _imageSelector = require("../selector/image-selector");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
const Image = _styledComponents.default.img`
width: 100%;
`;
const SlideshowCount = _styledComponents.default.div`
position: absolute;
top: 50%;
left: 50%;
border-radius: 100%;
border: black 1px solid;
transform: translate(-50%, -50%);
background-color: white;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
aspect-ratio: 1;
min-height: 66px;
padding: 10px;
`;
const Figure = _styledComponents.default.figure`
position: relative;
margin-block: unset;
margin-inline: unset;
margin: 0 10px;
`;
const SlideshowEditButton = _styledComponents.default.span`
cursor: pointer;
background-color: white;
padding: 6px;
border-radius: 6px;
`;
// support old version of slideshow without delay propertiy
function SlideshowEditBlock(props) {
var _images$, _images$$resized;
const {
block,
contentState
} = props;
const entityKey = block.getEntityAt(0);
const entity = contentState.getEntity(entityKey);
const images = entity.getData();
return /*#__PURE__*/_react.default.createElement(Figure, null, /*#__PURE__*/_react.default.createElement(Image, {
src: images === null || images === void 0 ? void 0 : (_images$ = images[0]) === null || _images$ === void 0 ? void 0 : (_images$$resized = _images$.resized) === null || _images$$resized === void 0 ? void 0 : _images$$resized.original,
onError: e => {
var _images$2, _images$2$imageFile;
return e.currentTarget.src = images === null || images === void 0 ? void 0 : (_images$2 = images[0]) === null || _images$2 === void 0 ? void 0 : (_images$2$imageFile = _images$2.imageFile) === null || _images$2$imageFile === void 0 ? void 0 : _images$2$imageFile.url;
}
}), /*#__PURE__*/_react.default.createElement(SlideshowCount, null, "+", images.length));
} // 202206 latest version of slideshow, support delay property
function SlideshowEditBlockV2(props) {
var _images$3, _images$3$resized;
const {
block,
blockProps,
contentState
} = props;
const {
onEditStart,
onEditFinish
} = blockProps;
const entityKey = block.getEntityAt(0);
const entity = contentState.getEntity(entityKey);
const {
images,
delay
} = entity.getData();
const initialSelected = images.map(image => ({
desc: image.desc,
image: {
id: image.id,
name: image.name,
imageFile: image.imageFile,
resized: image.resized,
resizedWebp: image.resizedWebp
}
}));
const [toShowImageSelector, setToShowImageSelector] = (0, _react.useState)(false);
const onImageSelectorChange = (selected, align, delay) => {
if (selected.length === 0) {
onEditFinish({});
} else {
onEditFinish({
entityKey,
entityData: {
alignment: align,
delay,
images: selected.map(ele => {
return { ...(ele === null || ele === void 0 ? void 0 : ele.image),
desc: ele === null || ele === void 0 ? void 0 : ele.desc
};
})
}
});
}
setToShowImageSelector(false);
};
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, toShowImageSelector && /*#__PURE__*/_react.default.createElement(_imageSelector.ImageSelector, {
onChange: onImageSelectorChange,
enableCaption: true,
enableDelay: true,
enableMultiSelect: true,
initialSelected: initialSelected,
initialDelay: delay
}), /*#__PURE__*/_react.default.createElement(Figure, null, /*#__PURE__*/_react.default.createElement(Image, {
src: images === null || images === void 0 ? void 0 : (_images$3 = images[0]) === null || _images$3 === void 0 ? void 0 : (_images$3$resized = _images$3.resized) === null || _images$3$resized === void 0 ? void 0 : _images$3$resized.original,
onError: e => {
var _images$4, _images$4$imageFile;
return e.currentTarget.src = images === null || images === void 0 ? void 0 : (_images$4 = images[0]) === null || _images$4 === void 0 ? void 0 : (_images$4$imageFile = _images$4.imageFile) === null || _images$4$imageFile === void 0 ? void 0 : _images$4$imageFile.url;
}
}), /*#__PURE__*/_react.default.createElement(SlideshowCount, null, /*#__PURE__*/_react.default.createElement("div", null, "+", images.length), delay && /*#__PURE__*/_react.default.createElement("div", null, `${delay}s`))), /*#__PURE__*/_react.default.createElement(SlideshowEditButton, {
onClick: () => {
// call `onEditStart` prop as we are trying to update the BGImage entity
onEditStart(); // open `BGImageInput`
setToShowImageSelector(true);
}
}, /*#__PURE__*/_react.default.createElement("i", {
className: "fa-solid fa-pen"
}), /*#__PURE__*/_react.default.createElement("span", null, "Modify")));
}