@sendbird/uikit-react
Version:
Sendbird UIKit for React: A feature-rich and customizable chat UI kit with messaging, channel management, and user authentication.
77 lines (70 loc) • 6.29 kB
JavaScript
'use strict';
var _tslib = require('./bundle-Conb-pOy.js');
var React = require('react');
var reactDom = require('react-dom');
var utils = require('./bundle-CkQrhwR6.js');
var LocalizationContext = require('./bundle-DPDyqKIJ.js');
var MediaQueryContext = require('./bundle-Fv6PNPGZ.js');
var ui_IconButton = require('../ui/IconButton.js');
var ui_Button = require('../ui/Button.js');
var ui_Icon = require('../ui/Icon.js');
var ui_Label = require('./bundle-zgmRG2KL.js');
var uuid = require('./bundle-t8BQsgL5.js');
var useSendbird = require('./bundle-Bq15P9qk.js');
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
var React__default = /*#__PURE__*/_interopDefaultCompat(React);
// simple component to be used as modal root
var MODAL_ROOT = 'sendbird-modal-root';
var ModalRoot = function () { return (React__default.default.createElement("div", { id: MODAL_ROOT, className: MODAL_ROOT })); };
var ModalHeader = function (_a) {
var titleText = _a.titleText, onCloseClick = _a.onCloseClick;
return (React__default.default.createElement("div", { className: "sendbird-modal__header" },
React__default.default.createElement(ui_Label.Label, { type: ui_Label.LabelTypography.H_1, color: ui_Label.LabelColors.ONBACKGROUND_1 }, titleText),
React__default.default.createElement("div", { className: "sendbird-modal__close" },
React__default.default.createElement(ui_IconButton, { width: "32px", height: "32px", onClick: onCloseClick },
React__default.default.createElement(ui_Icon.default, { type: ui_Icon.IconTypes.CLOSE, fillColor: ui_Icon.IconColors.DEFAULT, width: "24px", height: "24px" })))));
};
var ModalBody = function (_a) {
var children = _a.children;
return (React__default.default.createElement("div", { className: "sendbird-modal__body" },
React__default.default.createElement(ui_Label.Label, { type: ui_Label.LabelTypography.SUBTITLE_1, color: ui_Label.LabelColors.ONBACKGROUND_2 }, children)));
};
var ModalFooter = function (_a) {
var submitText = _a.submitText, _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.hideCancelButton, hideCancelButton = _c === void 0 ? false : _c, _d = _a.type, type = _d === void 0 ? ui_Button.ButtonTypes.DANGER : _d, onSubmit = _a.onSubmit, onCancel = _a.onCancel;
var stringSet = React.useContext(LocalizationContext.LocalizationContext).stringSet;
return (React__default.default.createElement("div", { className: "sendbird-modal__footer" },
!hideCancelButton && (React__default.default.createElement(ui_Button.default, { type: ui_Button.ButtonTypes.SECONDARY, onClick: onCancel },
React__default.default.createElement(ui_Label.Label, { type: ui_Label.LabelTypography.BUTTON_1, color: ui_Label.LabelColors.ONBACKGROUND_1 }, stringSet.BUTTON__CANCEL))),
React__default.default.createElement(ui_Button.default, { type: type, disabled: disabled, onClick: onSubmit }, submitText)));
};
function Modal(props) {
var _a;
var _b = props.children, children = _b === void 0 ? null : _b, _c = props.className, className = _c === void 0 ? '' : _c, _d = props.contentClassName, contentClassName = _d === void 0 ? '' : _d, _e = props.isCloseOnClickOutside, isCloseOnClickOutside = _e === void 0 ? false : _e, _f = props.isFullScreenOnMobile, isFullScreenOnMobile = _f === void 0 ? false : _f, titleText = props.titleText, submitText = props.submitText, _g = props.disabled, disabled = _g === void 0 ? false : _g, _h = props.hideFooter, hideFooter = _h === void 0 ? false : _h, _j = props.type, type = _j === void 0 ? ui_Button.ButtonTypes.DANGER : _j, renderHeader = props.renderHeader, _k = props.onSubmit, onSubmit = _k === void 0 ? utils.noop : _k, onClose = props.onClose, onCancel = props.onCancel, customFooter = props.customFooter;
var handleClose = (_a = onClose !== null && onClose !== void 0 ? onClose : onCancel) !== null && _a !== void 0 ? _a : utils.noop;
var eventHandlers = useSendbird.useSendbird().state.eventHandlers;
var id = React.useState(function () { return "sbu-modal-".concat(uuid.uuidv4()); })[0];
React.useEffect(function () {
var _a, _b;
return (_b = (_a = eventHandlers === null || eventHandlers === void 0 ? void 0 : eventHandlers.modal) === null || _a === void 0 ? void 0 : _a.onMounted) === null || _b === void 0 ? void 0 : _b.call(_a, { close: handleClose, id: id });
}, []);
var isMobile = MediaQueryContext.useMediaQueryContext().isMobile;
return reactDom.createPortal(React__default.default.createElement("div", { className: utils.classnames('sendbird-modal', className, isFullScreenOnMobile && isMobile && 'sendbird-modal--full-mobile') },
React__default.default.createElement("div", { className: utils.classnames.apply(void 0, _tslib.__spreadArray(['sendbird-modal__content'], (Array.isArray(contentClassName) ? contentClassName : [contentClassName]), false)) },
(renderHeader === null || renderHeader === void 0 ? void 0 : renderHeader()) || React__default.default.createElement(ModalHeader, { titleText: titleText !== null && titleText !== void 0 ? titleText : '', onCloseClick: handleClose }),
React__default.default.createElement(ModalBody, null, children),
!hideFooter
&& (customFooter !== null && customFooter !== void 0 ? customFooter : (React__default.default.createElement(ModalFooter, { disabled: disabled, onCancel: handleClose, onSubmit: onSubmit, submitText: submitText !== null && submitText !== void 0 ? submitText : '', type: type })))),
React__default.default.createElement("div", { className: utils.classnames('sendbird-modal__backdrop', isCloseOnClickOutside && 'sendbird-modal__backdrop--clickoutside'), onClick: function (e) {
e === null || e === void 0 ? void 0 : e.stopPropagation();
if (isCloseOnClickOutside) {
handleClose();
}
} })), document.getElementById(MODAL_ROOT));
}
exports.MODAL_ROOT = MODAL_ROOT;
exports.Modal = Modal;
exports.ModalBody = ModalBody;
exports.ModalFooter = ModalFooter;
exports.ModalHeader = ModalHeader;
exports.ModalRoot = ModalRoot;
//# sourceMappingURL=bundle-DZlJeh0V.js.map