lm-mask/src/index.js

* 作者：niuguimin * 邮箱：15275151030@163.com * 版本：**`1.0.0`**

/**
 * Created by quying<qy9404@163.com>.
 * ComponentName Mask
 * Desc Mask
 * GroupName lm-component
 */

import React from 'react'
import PropTypes from 'prop-types'

import classNames from 'classnames';
import Portal from 'lm-portal';

import { helper } from './helper.js';

import './index.scss';


export default class Mask extends React.Component {

    static propTypes = {
        visible: PropTypes.bool.isRequired,         //是否可见
        opacity: PropTypes.number,                  //透明度 0-1
        zIndex: PropTypes.oneOfType([               //z-index
            PropTypes.number,
            PropTypes.string
        ]),
        target: PropTypes.any,                      //Protal组件 目标插入参数
        alwaysAppend: PropTypes.bool,               //Protal组件 是否每次更新都始终执行 append
        className: PropTypes.string,                //Protal组件 class 名
        style: PropTypes.object,
        onMaskClick: PropTypes.func
    }

    static defaultProps = {
        visible: false,
        opacity: 0.7,
        zIndex: 999,
        className: '',
        style: {},
        onMaskClick: () => { }
    }

    constructor(props) {

        super(props);
        this.timer = null;
        this.state = {};

    }

    componentWillReceiveProps(nextProps) {
        //隐藏的时候执行动画
        if (this.props.visible === true && nextProps.visible === false) {
            this.setState({
                inOutAnimation: true
            });

            this.outAnimationTime = setTimeout(() => {
                this.setState({
                    inOutAnimation: false
                });
            }, 250);
        }

        // 标识visible变化：处理遮罩下面可滑动bug, 多个遮罩层叠出现时，只处理最底层遮罩
        if (this.props.visible !== nextProps.visible) {

            try {

                if (nextProps.visible) {
                    helper.afterOpen();

                } else {
                    helper.beforeClose();

                }

            } catch (error) {
                console.log(error);

            }

        }

    }

    componentDidMount() {

        let self = this;
        window.addEventListener("hashchange", () => {
            if(self.props.visible){
                self.props.onMaskClick();
                helper.beforeClose();    
            }
        });

    }

    componentWillUnmount() {
        clearTimeout(this.outAnimationTime);

        helper.cancelAnimation();
    }

    render() {
        const { visible, opacity, zIndex, style, onMaskClick, children } = this.props;
        const { target, alwaysAppend, className } = this.props;
        const { inOutAnimation } = this.state;
        let maskClass = classNames({
            'lm-ui-mask': true,
            'enter-animation': visible,   // 修改成更通用的名字，以便重写样式，默认效果为fade
            'leave-animation': !visible && inOutAnimation,
            'hide': !visible && !inOutAnimation
        })
        const maskStyle = Object.assign({}, style, {
            backgroundColor: `rgba(33, 33, 33, ${opacity})`,
            zIndex: zIndex,
        })

        return (
            <Portal className={className} target={target} alwaysAppend={alwaysAppend}>
                <div key="mask" onClick={onMaskClick} className={maskClass} style={maskStyle}>

                    {children}

                </div>
            </Portal>

        )

    }

}