@pluve/ace/lib/popup/index.js

一套React版本的 Taro UI 组件库

import React, { useEffect, useState, useRef } from 'react';
import { View } from '@tarojs/components';
const closeIcon = 
// eslint-disable-next-line max-len
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAAAXNSR0IArs4c6QAAA61JREFUSA2tVk1IVFEYnTczjUnDGCKCm4gGgiBQTFwEEk+IiHCR1RQtZjE/lRs3bmyRkS5q1aIWRjOjjtijJhJEQkR0CKFFuHCgrRCtQ1KMwWl+Oud1r1xn5jlvZC7c+b773e+cc+9339z3tFQq5dnZ2XnvcDgmo9HoCmzDWywWuwrSoZaWlnvO3d1dA4Ob6AuJREJvtJrgXKAGtZyapr3DII/eXCqVFqenp/saJUoucpKbGtTSSI5VBDBhoLsw3HO5XNdCodBXzh23TU1NXS4UCsvAeyFUQL8fDodTThLSgQmiF9G9xWJxKR6P98I/ViOWHAB70ckZFBoOU5CskUjEwCpCTMBOfbDLOOxLnKunCcyy4CiSk9ySwyypHNCivGEkx9CRq22j92N1GTXHyge2E7g19FbgSBAFNqHmVwhyEsBHKMmkSPwFoI5VfleB5T7KeBFCacTbOOd0Oocg9qY876Ck6gQTARgWsTYQraJUF9Qc1ecccxCTYsPVxIipKsgJAF5DdIQ+Wjv6ajKZPG+OlB8RoxhzuLMRYpWUQ66lILMAfAnzWCA6crnc2szMjF+MHfQZw7iDMZR+VGBkSoWteoblWSjZE8TGRfyn2+2+Qj+fz3+BOSPiY7gaJ4RvaWwJEo0HaRwPEoW5kx+0OLeztCjjBHY2Rr9Wsy1IIog+h+ioSgqxFxCTZVenqvpHnmE5wuPxvMLufss4fcbk2I61LTg7O9u+v7+/ijKelsT0GeOcjNWytgQNw2jD00gx87+InU2yk5wxzjGnlhjna54hbpBW5PG66jQBmhbHmT2gjzN9i3hExHn99eNG2ubYqh25Q7zPToNwRRFLQuwhdsd7siT8JMmZw1xirMQYtxScm5vzifdZNxMhYEAgBFvkmI2+iMm3QTcxxP7PqPytKojvHG82m13CiuU7MeXz+YKqmKRijHMY853KnfYSSw6Zo9qKM8QTdwpPHl+efUwE4bzf77+r6zo/QyxbOp12b21tfYDgoEhab2pquh4MBv+ooEOCWFUzPnQ+A6QzCWKLXV1dt3p6ev6qICt/Y2PjxObm5ifgBwQ+jd3fCAQCWYk5KCkO+yTEFhSxJSTftitGQuYSg4WyQiyvTk5yc8xmCvLbFIc9jwR+P3JnK/iQGsTKchzX04ghlhzEkZPc1OBYs1MGJtbbrI7HmclkzoHMfEBg13E3Dqg1r1dI5pODXOQUsT5qmQ+N+CR8hvrfQeKeBDXCYqdenONHcD3FLfTtH7Ae1T05j0wWAAAAAElFTkSuQmCC';
const Container = ({ children, visible = false }) => {
    return visible ? React.createElement(View, null, children) : null;
};
const Popup = ({ title = '', bodyClassName = '', visible: inputVisible = false, maskClosable = true, onClose, children, topRightView, }) => {
    const [cut, setCut] = useState('');
    const [visible, setVisible] = useState(false);
    const timerRef = useRef(null);
    const selfOnClose = () => {
        setCut('leave');
        if (timerRef.current) {
            clearTimeout(timerRef.current);
            timerRef.current = null;
        }
        timerRef.current = setTimeout(() => {
            setVisible(false);
            if (onClose) {
                onClose();
            }
        }, 300);
    };
    const onMaskClick = () => {
        if (maskClosable) {
            selfOnClose();
        }
    };
    useEffect(() => {
        setVisible(inputVisible);
        if (inputVisible) {
            setCut('enter');
        }
        return () => {
            setCut('');
        };
    }, [inputVisible]);
    return (React.createElement(Container, { visible: visible },
        React.createElement(View, { className: `ace-popup ${cut ? `ace-popup__${cut}` : ''}` },
            React.createElement(View, { onClick: onMaskClick, className: "ace-popup-mask" }),
            React.createElement(View, { className: "ace-popup-container" },
                topRightView ? (React.createElement(View, { className: "ace-popup-right-view" }, topRightView)) : (React.createElement(View, { onClick: selfOnClose, className: "ace-popup-close", style: { backgroundImage: `url(${closeIcon})` } })),
                title && React.createElement(View, { className: "ace-popup-title" }, title),
                React.createElement(View, { className: `ace-popup-body ${bodyClassName}` }, children)))));
};
export default Popup;
//# sourceMappingURL=index.js.map