lm-drawer/src/index.js

* 作者：caoxuewei * 邮箱：caoxuewei@58ganji.com * 版本：**`0.2.0`**

/**
 * Created by caoxuewei<caoxuewei@58ganji.com>.
 * ComponentName Drawer
 * Desc 抽屉导航
 * GroupName lm-component
 */

import React, { Component } from 'react'
import PropTypes from 'prop-types'

import Mask from 'lm-mask'

import Navitem from './navitem.js'

import classNames from 'classnames'
import './index.scss'


/**
 * @class Drawer
 * @extends React.Component
 * @desc Drawer Component for mobile
 */
export default class Drawer extends Component {

    static propTypes = {
        /**
         * 主内容
         */
        navs: PropTypes.array, // 菜单的数数组
        opacity: PropTypes.number, // mask的透明度
        panelWidth: PropTypes.number, // 侧滑菜单的宽度 0~100
        showState: PropTypes.bool.isRequired, // 侧滑菜单的显示隐藏
    };

    static defaultProps = {
        opacity: 0.3, // mask透明度
        navs: [{
            content: '', // 菜单的每条的名称，字符串类型
            func: args => args, // 点击的回调，函数类型
            custCls: '', // 每条的自定义类，字符串类型
            child: (<div></div>), // 每条的自定义元素，Dom节点类型
        }],
        panelWidth: 40
    };

    /**
     * @constructor
     */
    constructor(props) {
        super(props);

    }


    defaultCb () {
        console.log('没有传item的回调函数')
        
    }

    render () {
        let {
            navs,
            opacity,
            panelWidth,
            showState
        } = this.props;
        

        let clsname = classNames({
            "lm-drawer-items": true,
            "drawer-move-show": showState,
            "drawer-move-hide": !showState
        })
        let panelStyle = {
            width: `${panelWidth}%`
        }

        let items = (
            <div className={clsname} style={panelStyle}>
                {
                    navs && navs.map((value, index) => {

                        return (
                            <Navitem
                                content={value.content}
                                handle={value.func || this.defaultCb}
                                customClassName={value.custCls}
                                key={index}
                                >
                                {value.child}
                            </Navitem>)
                    })
                }
            </div>
        )

        return (
            <div className="lm-drawer-container">

                <Mask 
                    visible={ showState }
                    opacity={opacity}
                    zIndex={99}
                    onMaskClick={this.toggleDrawer}
                    >
                    {items}
                </Mask>
            </div>
        )
    }

}