@wulperstudio/cms
Version:
Wulper Studio Library Components CMS
269 lines (268 loc) • 10.8 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _objectDestructuringEmpty2 = _interopRequireDefault(require("@babel/runtime/helpers/objectDestructuringEmpty"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireWildcard(require("react"));
var _material = require("@mui/material");
var _styled = require("./styled");
var _TextFieldV5LabelOut = require("../TextFieldV5LabelOut");
var _Button = require("../Button");
var _hooks = require("../../hooks");
var _jsxRuntime = require("react/jsx-runtime");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
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["default"].useState(null),
_React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
contextMenu = _React$useState2[0],
setContextMenu = _React$useState2[1];
var _React$useState3 = _react["default"].useState(''),
_React$useState4 = (0, _slicedToArray2["default"])(_React$useState3, 2),
selectedText = _React$useState4[0],
setSelectedText = _React$useState4[1];
var _React$useState5 = _react["default"].useState(''),
_React$useState6 = (0, _slicedToArray2["default"])(_React$useState5, 2),
comment = _React$useState6[0],
setComment = _React$useState6[1];
var _React$useState7 = _react["default"].useState(INITIAL_VALUE),
_React$useState8 = (0, _slicedToArray2["default"])(_React$useState7, 2),
message = _React$useState8[0],
setMessage = _React$useState8[1];
var _useMarker = (0, _hooks.useMarker)(),
markerRef = _useMarker.markerRef,
marker = _useMarker.marker;
var _React$useState9 = _react["default"].useState(false),
_React$useState10 = (0, _slicedToArray2["default"])(_React$useState9, 2),
backdrop = _React$useState10[0],
setBackdrop = _React$useState10[1];
var _ref2 = CancelButtonProps || {},
cancelProps = (0, _extends2["default"])({}, ((0, _objectDestructuringEmpty2["default"])(_ref2), _ref2));
var _ref3 = ReplyButtonProps || {},
replyProps = (0, _extends2["default"])({}, ((0, _objectDestructuringEmpty2["default"])(_ref3), _ref3));
var handleBackdropToggle = function handleBackdropToggle() {
setBackdrop(!backdrop);
};
var handleContextMenu = function handleContextMenu(event) {
event.preventDefault();
};
var handleClose = (0, _react.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 = (0, _react.useCallback)(function (selectText, inputValue) {
onClickReply == null || onClickReply({
selectText: selectText,
inputValue: inputValue
});
handleClose();
}, [onClickReply, handleClose]);
var handleChange = function handleChange(e) {
setComment(e.target.value);
};
_react["default"].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__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styled.Preview, {
id: id,
onContextMenu: handleContextMenu,
onMouseUp: needMenu ? handleMouseUp : undefined,
ref: markerRef,
children: children
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Backdrop, {
sx: {
color: '#fff',
zIndex: function zIndex(theme) {
return theme.zIndex.drawer + 1;
}
},
open: backdrop,
onClick: handleClose,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.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__*/(0, _jsxRuntime.jsxs)(_material.Grid, {
container: true,
direction: "column",
rowGap: "15px",
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
item: true,
xs: 12,
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Grid, {
container: true,
columnGap: "10px",
flexWrap: "nowrap",
alignItems: "center",
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Avatar, Object.assign({
sx: {
bgcolor: '#F25A5A',
width: 24,
height: 24
}
}, AvatarProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, Object.assign({
variant: "h1",
fontSize: "16px",
lineHeight: 1.5,
fontWeight: 700,
color: "#3B414B"
}, NameProps))]
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
item: true,
xs: 12,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextFieldV5LabelOut.TextFieldV5LabelOut, {
multiline: true,
rows: 4,
placeholder: "Escribe un comentario",
onChange: handleChange,
sx: {
pl: '10px'
},
WrapperProps: {
sx: {
borderRadius: '10px'
}
}
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
item: true,
xs: 12,
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Grid, {
container: true,
columnGap: "10px",
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
item: true,
xs: true,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.Button, Object.assign({
variant: "contained",
size: "large",
disableElevation: true,
fullWidth: true,
onClick: function onClick() {
handleClick(selectedText, comment);
}
}, replyProps))
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
item: true,
xs: true,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.Button, Object.assign({
variant: "outlined",
size: "large",
onClick: function onClick() {
handleClose();
},
disableElevation: true,
fullWidth: true
}, cancelProps))
})]
})
})]
})
})
})]
});
};
var _default = exports["default"] = PreviewBlock;