lm-button/src/index.js

* 作者：hjingfen * 邮箱：hjingfen@gmail.com * 版本：**`1.0.0`**

/**
 * Created by hjingfen<hjingfen@gmail.com>.
 * ComponentName Button
 * Desc 组件描述内容
 * GroupName lm-component
 */
import React from 'react'
import PropTypes from 'prop-types'

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


const propTypes = {
    content: PropTypes.string,              //按钮名称
    type: PropTypes.string,                 //按钮类型 现在主要指按钮颜色
    size: PropTypes.string,                 //按钮大小
    position: PropTypes.string,             //按钮位置 在文档流中还是吸底
    className: PropTypes.string,            //自定义样式 readme中写的是这个属性
    customClass: PropTypes.string,          //自定义样式 取名不当 readme中已经删除这个属性，为了兼容老用户不删除此属性
    disabled: PropTypes.oneOfType([         //是否可点击 若值为'false'时，处理成布尔值false
        PropTypes.string,
        PropTypes.bool
    ]),
    handle: PropTypes.func,                 //click事件处理
    href: PropTypes.string                  //点击按钮后跳转页面的跳转链接
};

const defaultProps = {
    content: '',
    className: '',
    customClass: '',
    type: 'blue-white',  //可选项：'white-blue', 'white-grey', 'blue-white'
    size: '',  //可选项： 'normal', 'tiny', 'small'
    position: '', //可选项：'fixed'
    disabled: false,
    handle: () => {},
    href: ''
};

// 若disabled值为'false'时，处理成布尔值false
// 若没有子元素children同时也没有传入content值时，显示按钮内容默认为“提交”
const Button = ({
                content,
                className,
                customClass,
                handle,
                size,
                type,
                position,
                disabled,
                children,
                href,
                ...others
             }) => {
    let defaultClass = classNames('lm-btn', `lm-btn-${type}`, size ? `lm-btn-${size}` : '', position ? `lm-btn-${position}` : '', className, customClass);
    disabled === 'false' ? false : disabled;

    const template = href ?
        <a className={`${defaultClass} lm-btn-a`} href={href} disabled={disabled} {...others} >
            {children ? content : content || '提交'} {children}
        </a>
        :
        <button type="button" className={defaultClass} disabled={disabled} onClick={handle} {...others} >
            {children ? content : content || '提交'} {children}
        </button>

    return template;
};

Button.propTypes = propTypes;
Button.defaultProps = defaultProps;

export default Button;