@tarojsx/ui
Version:
We reinvents the UI for Taro3+
42 lines • 2.5 kB
JavaScript
import React, { useCallback } from 'react';
import classNames from 'classnames';
import { View, ScrollView, Button } from '@tarojs/components';
import '../style/Modal.scss';
export const Modal = (props) => {
const { className, style = {}, children, isOpened, title, content, cancelText, confirmText, closeOnClickOverlay = true, } = props;
const onClose = useCallback((e) => {
var _a;
(_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props, e);
}, [props.onClose]);
const onCancel = useCallback((e) => {
var _a;
(_a = props.onCancel) === null || _a === void 0 ? void 0 : _a.call(props, e);
onClose(e);
}, [props.onCancel, onClose]);
const onConfirm = useCallback((e) => {
var _a;
(_a = props.onConfirm) === null || _a === void 0 ? void 0 : _a.call(props, e);
}, [props.onConfirm]);
const onClickOverlay = useCallback((e) => {
if (closeOnClickOverlay) {
onClose(e);
}
}, [closeOnClickOverlay, onClose]);
const rootClass = classNames('at-modal', { 'at-modal--active': isOpened }, className);
if (title || content) {
return (React.createElement(View, { className: rootClass, style: style },
React.createElement(View, { onClick: onClickOverlay, className: "at-modal__overlay" }),
React.createElement(View, { className: "at-modal__container" },
title && React.createElement(View, { className: "at-modal__header" }, title),
content && (React.createElement(ScrollView, { className: "at-modal__content", scrollY: true },
React.createElement(View, { className: "content-simple" }, content))),
(cancelText || confirmText) && (React.createElement(View, { className: classNames('at-modal__footer', 'at-modal__footer--simple') },
React.createElement(View, { className: "at-modal__action" },
cancelText && React.createElement(Button, { onClick: onCancel }, cancelText),
confirmText && React.createElement(Button, { onClick: onConfirm }, confirmText)))))));
}
return (React.createElement(View, { className: rootClass, style: style, onTouchMove: (e) => e.stopPropagation() },
React.createElement(View, { className: "at-modal__overlay", onClick: onClickOverlay }),
React.createElement(View, { className: "at-modal__container" }, children)));
};
//# sourceMappingURL=Modal.js.map