lm-noticebar/src/index.js

* 作者：kanghongyan * 邮箱：khongyan@gmail.com * 版本：**`1.0.3`**

import React from 'react'
import PropTypes from 'prop-types'
import './index.scss'
import classname from 'classnames'

class NoticeBar extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            isShow: this.props.initShow
        }
    }

    componentWillReceiveProps(newProps) {

        if (newProps.initShow !== this.props.initShow) {
            this.setState({
                isShow: newProps.initShow
            })
        }

    }


    renderIcon = (el, show) => show ? el : null;


    renderCont = (children) => {

        const isObjectChildren = Object.prototype.toString.call(children) === '[object Object]';

        return this.props.itemHeight && isObjectChildren ?
            React.cloneElement(children, {height: this.props.itemHeight}) :
            children

    };

    closeBar = () => {
        this.setState({
            isShow: false
        }, () => {
            this.props.closeCb && this.props.closeCb()
        })
    };

    render() {

        const {
            noticeType,
            children,
            hasIcon,
            canClose,
            hasArrow,
            itemHeight,
            className,
            onClick
        } = this.props;

        const { isShow } = this.state;

        if (!isShow) {
            return null
        }

        const _cls = noticeType ? `m-notice-bar-${noticeType}` : '';

        const cn = classname('m-notice-bar', _cls, className);

        return (
            <div className={ cn }>
                {
                    this.renderIcon(<i className="icon-notice"/>, hasIcon)
                }
                <div className="m-notice-bar-content"
                     style={{height: `${itemHeight}px`}}
                     onClick={ onClick }
                >
                    {
                        this.renderCont(children)
                    }
                </div>
                {
                    this.renderIcon(<i className="icon-close" onClick={ this.closeBar }/>, canClose)
                }
                {
                    this.renderIcon(<i className="icon-arrow"/>, hasArrow)
                }
            </div>
        )
    }
}

NoticeBar.propTypes = {
    noticeType: PropTypes.string,
    initShow: PropTypes.bool,
    children: PropTypes.node,
    className: PropTypes.string,
    type: PropTypes.string,
    hasIcon: PropTypes.bool,
    canClose: PropTypes.bool,
    hasArrow: PropTypes.bool,
    closeCb: PropTypes.func,
    itemHeight: PropTypes.number, // wrapper高度 单位px
    onClick: PropTypes.func
};

NoticeBar.defaultProps = {
    noticeType: '',
    initShow: true,
    children: <p>顶部提示信息</p>,
    className: '',
    type: 'warning',
    hasIcon: true,
    canClose: true,
    hasArrow: false,
    closeCb: () => {},
    itemHeight: 20,
    onClick: () => {}
};

export default NoticeBar