@eightfeet/modal

modal

弹窗模块，需要promise polyfill demo

npm i @eightfeet/modal -S

import Modal from '@eightfeet/modal';

const myModal = new Modal({
    style: {
        article: {
            borderRadius: '0.5em',
            backgroundColor: '#fff',
        }
	}
});

myModal.create({
    article: '这是一个弹窗'
}).then(() => console.log('弹窗已打开'));

parame

参数	说明	是否必填	备注	类型
id	所创建弹窗的id	否	不传可自动生成id（modal + 时间戳 + 100以内的随机数）	String
zIndex	modal的样式层级关系	否	默认100	Number
emBase	em单位的基准像素	否	默认自动计算（emBase = document.clientWidth/24）	Number
parentId	所挂载的父级ID用于做局部弹窗	否	默认挂在body下面，指定父级dom时将挂载在父级dom下，配合css实现局部弹窗	String
closable	是否可关闭	否	默认true	Boolean
shouldCloseOnOverlayClick	是否点击蒙层关闭弹窗	否	默认false	Boolean
style	弹窗样式	是	定义modal样式 { overlay: 覆盖层, wrap: 模块包裹层, content: 内容区, header: 头部, article: 内容区, close: 关闭按钮, modify: 修饰器 }, modify修饰器 是一个数组，每个数组元素对应会创建一个 基于弹窗的绝对定位div层，用于修饰弹窗（参考case）	Object
animation	弹窗动画	否	{ form: 弹窗动画形式，参考animation附表, duration：持续时长 }	Object
onCancel	关闭弹窗		关闭弹窗时的回调	Function

animation附表

参数	说明	备注
fadeInUp	从底部向上淡入
fadeInDown	从顶部向下淡入
fadeInLeft	从左向右淡入
fadeInRight	从右向左淡入
zoomIn	从中心放大淡入	默认
zoomInUp	从底部向上放大淡入
zoomInDown	从顶部向下放大淡入
zoomInLeft	从左向右放大淡入
zoomInRight	从右向左放大淡入

options

1. create: ƒ (elements, doNotRemove) 创建弹窗

   /**
     * @description 创建弹窗
     * @param {{
     *         header: InnerHTML;
     *         article: InnerHTML;
     *         footer: InnerHTML;
     *     }} elements 弹窗元素
     * @param {boolean} doNotRemove 是否移除弹窗
     * @memberof Modal
     */

2. hide: ƒ (doNotRemove) 隐藏弹窗

   /**
     * @description 移除弹窗
     * @memberof Modal
     */

3. remove: ƒ () 移除弹窗

   移除，将弹窗从body中移除。

4. show: ƒ () 显示弹窗

   显示页面弹窗，如果创建的弹窗隐藏时，调用此方法显示弹窗。

createInlineStyles

createInlineStyles: 创建行内样式、 

    import {createInlineStyles} from '@eightfeet/modal';

saferInnerHtml

InnerHtml 具有一定安全隐患，saferInnerHtml用于过滤模版中的危险脚本，让你安全使用InnerHtml
避免XSS 攻击，默认InnerHtml都有通过saferInnerHtml转译为安全html

    import {saferInnerHtml} from '@eightfeet/modal';
    const htmlStr = saferInnerHtml('<img src="x" onerror="alert(1)" />')
    console.log(htmlStr); // <img src="x" />

case

import Modal from '@eightfeet/modal';

const newModal = new Modal({
        id: 'modalId', // 所创建弹窗的id 不传可自动生成id（modal + 时间戳 + 100以内的随机数）
        zIndex: 100, // modal的层级关系，默认100
        emBase: 12, // 基准像素 parent Dom’s fontsize
        animation: {
           from: 'bottom',
           duration: '2s'
        }, // 启用动画 默认true
        parentId: 'indom', // modal的创建位置，默认创建在body下
        closable: false, // modal是否可关闭 默认true
        shouldCloseOnOverlayClick: true, // 点击背景层关闭弹窗 默认false
        style: { // 定义modal样式 {overlay: 覆盖层, content: 内容区, close: 关闭按钮} 
            overlay: {
                backgroundColor: 'rgba(0,0,0,0.5)'
            },
            content: {
                backgroundColor: 'rgba(100, 100, 100, 0.2)',
                width: '19em',
                // padding: '120px',
                // 设置内容的层级关系
                zIndex: 107
            },
            close: {
                backgroundColor: 'rgba(0, 0, 0, 1)',
                width: '1em',
                height: '1em',
                top: '-3em',
                left: '50%'
            },
            // modify(修饰层)层级按照zIndex（modal的层级）以2为步值递增
            modify: [
                {
                    backgroundColor: 'rgba(0, 0, 255, 0.4)',
                    width: '120%',
                    left: '-10%',
                    height: '200px',
                    border: '1px solid rgba(0, 0, 255, 0.6)',
                    top: '-5em'
                },
                {
                    backgroundColor: 'rgba(0, 0, 255, 0.4)',
                    width: '130%',
                    left: '-15%',
                    height: '200px',
                    border: '1px solid rgba(0, 0, 255, 0.6)',
                    top: '-4em'
                }
            ]
        }
    });

    const btn = document.getElementById('exampleBtn');

    btn.onclick = function(){ 
        return newModal.create({
            header:'<div style="position:relative; z-index: 90;background-color: yellow;">头部</div>',
            article: `<div style="background-color: #fff;">
                        这是一段内容
                        <input id="inp" type="text" />
                    </div>`,
            footer: `<div style="background-color: white">
                        <button id="close" style="border:1px solid #aaa; padding: 1em">确定</button>
                        <br>
                        脚部
                    </div>`
        }, true).then(function(){
            document.getElementById('close').onclick = function(){
                console.log(document.getElementById('inp').value);
                return newModal.hide(true);
            };
        });
    }
    

react

Modal组件最佳实践

demo

    <Modal 
        visible={visible}
        onCancel={() => setVisible(false)}
        overlayStyle={{background: 'rgba(0, 255, 0, 0.5)'}}
    >
        <div>这是一个弹窗</div>
        <button onClick={() => setVisible(false)}>关闭弹窗</button>
    </Modal>

react hook

• case react useModal hook

    import { useRef, useCallback, useMemo, useEffect } from "react";
    import Modal, { ModalParameters } from "@eightfeet/modal";

    const useModal = (parameters: ModalParameters) => {
    const ref = useRef<Modal>();
    useMemo(() => {
        ref.current = new Modal(parameters);
    }, [parameters]);

    useEffect(() => {
        return () => {
        if (ref.current) {
            const previousModal = ref.current;
            if (document.getElementById(previousModal.state.id as string)) {
            previousModal.remove();
            }
        }
        }
    }, [])

    const createModal = useCallback<Modal['create']>((data) => {
        return ref.current?.create(data) || Promise.reject('modal is not ready yet!');
    }, []);

    const hideModal = useCallback<Modal["hide"]>((doNotRemove) => {
        return ref.current?.hide(doNotRemove) || Promise.reject('modal is not ready yet!');
    }, []);

    return { createModal, hideModal, modal: ref.current }
    };

    export default useModal;

• useModal

    import React from "react";
    import useModal from "./hooks/useModal";

    function App() {
        const { createModal, hideModal } = useModal({
            style: {
                content: {
                    width: '301px'
                }
            }
        });

        return (
            <div className="App">
            <button
                onClick={() =>
                createModal({ article: "<div>messages!</div>" }).then(() =>
                    setTimeout(hideModal, 1000)
                )
                }
            >
                弹窗
            </button>
            </div>
        );
    }

    export default App;