@wulperstudio/cms
Version:
Wulper Studio Library Components CMS
259 lines • 9.03 kB
JavaScript
import _objectDestructuringEmpty from "@babel/runtime/helpers/esm/objectDestructuringEmpty";
import _extends from "@babel/runtime/helpers/esm/extends";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import React, { useCallback } from 'react';
import { Menu, Grid, Backdrop, Avatar, Typography } from '@mui/material';
import { Preview } from './styled';
import { TextFieldV5LabelOut } from '../TextFieldV5LabelOut';
import { Button } from '../Button';
import { useMarker } from '../../hooks';
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
var INITIAL_VALUE = {
type: 'error',
message: ''
};
var PreviewBlock = function PreviewBlock(_ref) {
var _ref$id = _ref.id,
id = _ref$id === void 0 ? 'previewBlock' : _ref$id,
children = _ref.children,
onMessage = _ref.onMessage,
onClickReply = _ref.onClickReply,
needMenu = _ref.needMenu,
_ref$searchValues = _ref.searchValues,
searchValues = _ref$searchValues === void 0 ? [] : _ref$searchValues,
AvatarProps = _ref.AvatarProps,
CancelButtonProps = _ref.CancelButtonProps,
ReplyButtonProps = _ref.ReplyButtonProps,
NameProps = _ref.NameProps,
_ref$minLetters = _ref.minLetters,
minLetters = _ref$minLetters === void 0 ? 8 : _ref$minLetters,
setCommentId = _ref.setCommentId;
var _React$useState = React.useState(null),
_React$useState2 = _slicedToArray(_React$useState, 2),
contextMenu = _React$useState2[0],
setContextMenu = _React$useState2[1];
var _React$useState3 = React.useState(''),
_React$useState4 = _slicedToArray(_React$useState3, 2),
selectedText = _React$useState4[0],
setSelectedText = _React$useState4[1];
var _React$useState5 = React.useState(''),
_React$useState6 = _slicedToArray(_React$useState5, 2),
comment = _React$useState6[0],
setComment = _React$useState6[1];
var _React$useState7 = React.useState(INITIAL_VALUE),
_React$useState8 = _slicedToArray(_React$useState7, 2),
message = _React$useState8[0],
setMessage = _React$useState8[1];
var _useMarker = useMarker(),
markerRef = _useMarker.markerRef,
marker = _useMarker.marker;
var _React$useState9 = React.useState(false),
_React$useState10 = _slicedToArray(_React$useState9, 2),
backdrop = _React$useState10[0],
setBackdrop = _React$useState10[1];
var _ref2 = CancelButtonProps || {},
cancelProps = _extends({}, (_objectDestructuringEmpty(_ref2), _ref2));
var _ref3 = ReplyButtonProps || {},
replyProps = _extends({}, (_objectDestructuringEmpty(_ref3), _ref3));
var handleBackdropToggle = function handleBackdropToggle() {
setBackdrop(!backdrop);
};
var handleContextMenu = function handleContextMenu(event) {
event.preventDefault();
};
var handleClose = useCallback(function () {
setComment('');
setContextMenu(null);
setSelectedText('');
setBackdrop(false);
}, []);
var handleMouseUp = function handleMouseUp(_e) {
var _window$getSelection, _e$currentTarget;
var textAux = (_window$getSelection = window.getSelection()) == null ? void 0 : _window$getSelection.toString().split('\n');
var validate = ((_e$currentTarget = _e.currentTarget) == null ? void 0 : _e$currentTarget.id) === id;
if (validate && textAux) {
var _window;
if ((textAux == null ? void 0 : textAux.length) > 1) {
return;
}
if (textAux[0].length <= minLetters) {
setMessage({
type: 'error',
message: 'Selecciona más de 8 letras'
});
if (onMessage) onMessage(message);
return;
}
if (textAux[0] === '') {
setMessage({
type: 'error',
message: 'Selecciona algo para comentar'
});
if (onMessage) onMessage(message);
return;
}
setSelectedText(((_window = window) == null || (_window = _window.getSelection()) == null ? void 0 : _window.toString()) || '');
setContextMenu(contextMenu === null ? {
mouseX: _e.clientX - 2,
mouseY: _e.clientY - 4
} : null);
handleBackdropToggle();
setMessage(INITIAL_VALUE);
}
};
var handleClick = useCallback(function (selectText, inputValue) {
onClickReply == null || onClickReply({
selectText: selectText,
inputValue: inputValue
});
handleClose();
}, [onClickReply, handleClose]);
var handleChange = function handleChange(e) {
setComment(e.target.value);
};
React.useEffect(function () {
if (marker) {
searchValues == null || searchValues.forEach(function (_ref4) {
var word = _ref4.word;
marker.mark(word, {
separateWordSearch: false,
acrossElements: true
});
});
}
if (markerRef && markerRef != null && markerRef.current) {
var _markerRef$current;
var marks = (_markerRef$current = markerRef.current) == null ? void 0 : _markerRef$current.querySelectorAll("mark[data-markjs='true']");
marks == null || marks.forEach(function (mark, i) {
mark.setAttribute('id', setCommentId(i));
mark.removeAttribute('class');
});
}
return function () {
if (marker) {
marker.unmark();
}
};
}, [marker, markerRef, searchValues]);
return /*#__PURE__*/_jsxs(_Fragment, {
children: [/*#__PURE__*/_jsx(Preview, {
id: id,
onContextMenu: handleContextMenu,
onMouseUp: needMenu ? handleMouseUp : undefined,
ref: markerRef,
children: children
}), /*#__PURE__*/_jsx(Backdrop, {
sx: {
color: '#fff',
zIndex: function zIndex(theme) {
return theme.zIndex.drawer + 1;
}
},
open: backdrop,
onClick: handleClose,
children: /*#__PURE__*/_jsx(Menu, {
open: contextMenu !== null,
anchorReference: "anchorPosition",
onClick: function onClick(e) {
return e.stopPropagation();
},
anchorPosition: contextMenu !== null ? {
top: contextMenu.mouseY,
left: contextMenu.mouseX
} : undefined,
PaperProps: {
sx: {
width: 350,
px: '20px',
py: '12.5px',
borderRadius: '10px',
backgroundColor: 'background.default'
}
},
MenuListProps: {
sx: {
py: 0
}
},
children: /*#__PURE__*/_jsxs(Grid, {
container: true,
direction: "column",
rowGap: "15px",
children: [/*#__PURE__*/_jsx(Grid, {
item: true,
xs: 12,
children: /*#__PURE__*/_jsxs(Grid, {
container: true,
columnGap: "10px",
flexWrap: "nowrap",
alignItems: "center",
children: [/*#__PURE__*/_jsx(Avatar, Object.assign({
sx: {
bgcolor: '#F25A5A',
width: 24,
height: 24
}
}, AvatarProps)), /*#__PURE__*/_jsx(Typography, Object.assign({
variant: "h1",
fontSize: "16px",
lineHeight: 1.5,
fontWeight: 700,
color: "#3B414B"
}, NameProps))]
})
}), /*#__PURE__*/_jsx(Grid, {
item: true,
xs: 12,
children: /*#__PURE__*/_jsx(TextFieldV5LabelOut, {
multiline: true,
rows: 4,
placeholder: "Escribe un comentario",
onChange: handleChange,
sx: {
pl: '10px'
},
WrapperProps: {
sx: {
borderRadius: '10px'
}
}
})
}), /*#__PURE__*/_jsx(Grid, {
item: true,
xs: 12,
children: /*#__PURE__*/_jsxs(Grid, {
container: true,
columnGap: "10px",
children: [/*#__PURE__*/_jsx(Grid, {
item: true,
xs: true,
children: /*#__PURE__*/_jsx(Button, Object.assign({
variant: "contained",
size: "large",
disableElevation: true,
fullWidth: true,
onClick: function onClick() {
handleClick(selectedText, comment);
}
}, replyProps))
}), /*#__PURE__*/_jsx(Grid, {
item: true,
xs: true,
children: /*#__PURE__*/_jsx(Button, Object.assign({
variant: "outlined",
size: "large",
onClick: function onClick() {
handleClose();
},
disableElevation: true,
fullWidth: true
}, cancelProps))
})]
})
})]
})
})
})]
});
};
export default PreviewBlock;