kedao
Version:
Rich Text Editor Based On Draft.js
68 lines (67 loc) • 3.75 kB
JavaScript
import { classNameParser } from '../../utils/style';
import React, { useEffect, useState } from 'react';
import mergeClassNames from 'merge-class-names';
import styles from "./style.module.css";
import { Portal } from 'react-portal';
import useLanguage from '../../hooks/use-language';
import XIcon from 'tabler-icons-react/dist/icons/x';
import { tablerIconProps } from '../../constants';
const cls = classNameParser(styles);
const Modal = ({ title, className, width, height, onCreate, children, confirmable, closeOnConfirm = true, onConfirm, showFooter = true, showCancel = true, showConfirm = true, onBlur, showClose = true, cancelText, onClose, confirmText, onCancel, closeOnBlur = true, bottomText, closeOnCancel = true, visible: outerVisible = true }) => {
const [visible, setVisible] = useState(outerVisible);
useEffect(() => {
setVisible(outerVisible);
}, [outerVisible]);
useEffect(() => onCreate === null || onCreate === void 0 ? void 0 : onCreate(), []);
const language = useLanguage();
const handleMouseDown = (event) => {
const tagName = event.target.tagName.toLowerCase();
if (tagName === 'input' || tagName === 'textarea') {
return false;
}
event.preventDefault();
return true;
};
const handleClose = () => {
setVisible(false);
onClose === null || onClose === void 0 ? void 0 : onClose();
};
const handleCancel = () => {
if (closeOnCancel) {
setVisible(false);
}
onCancel === null || onCancel === void 0 ? void 0 : onCancel();
};
const handleConfirm = () => {
if (closeOnConfirm) {
setVisible(false);
}
onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm();
};
const handleBlur = () => {
onBlur === null || onBlur === void 0 ? void 0 : onBlur();
if (closeOnBlur) {
handleClose();
}
};
if (!visible) {
return null;
}
return (React.createElement(Portal, null,
React.createElement("div", { role: "presentation", onMouseDown: handleMouseDown, className: cls(`kedao-modal ${className || ''}`) },
React.createElement("div", { role: "presentation", className: cls('kedao-modal-mask'), onClick: handleBlur }),
React.createElement("div", { style: { width, height }, className: cls('kedao-modal-content') },
React.createElement("div", { className: cls('kedao-modal-header') },
React.createElement("h3", { className: cls('kedao-modal-caption') }, title),
showClose && (React.createElement("button", { type: "button", onClick: handleClose, className: cls('kedao-modal-close-button') },
React.createElement(XIcon, Object.assign({}, tablerIconProps))))),
React.createElement("div", { className: cls('kedao-modal-body') }, children),
showFooter
? (React.createElement("div", { className: cls('kedao-modal-footer') },
React.createElement("div", { className: cls('kedao-modal-addon-text') }, bottomText),
React.createElement("div", { className: cls('kedao-modal-buttons') },
showCancel && (React.createElement("button", { type: "button", onClick: handleCancel, className: cls('kedao-modal-cancel') }, cancelText || language.base.cancel)),
showConfirm && (React.createElement("button", { type: "button", onClick: handleConfirm, className: cls(mergeClassNames('kedao-modal-confirm', !confirmable && 'disabled')) }, confirmText || language.base.confirm)))))
: null))));
};
export default Modal;