lm-form/src/select.js

* 作者：liuduan * 邮箱：liuduan.05.05@163.com * 版本：**`1.0.2`**

import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';

import './index.scss';

// wrapper for select
const Select = props => {

    const { data, className, children, value, disabled, selected, onChange, placeholder, multiple, ...other } = props;
    const cls = classNames('lm-select', {
        'lm-select-placeholder': !`${value}`
    }, className);

    const renderOption = data => {
        const result = data.map((item, i) => (
            <option key={i} value={item.value} disabled={'disabled' in item ? item.disabled : false}>
                {item.label}
            </option>
        ));
        result.unshift(
            <option key={'lmSelectPlaceholder'} value={''} disabled={disabled}>
                {placeholder}
            </option>
        )
        return result;
    }

    return (
        <select className={cls} value={value || placeholder} onChange={onChange} disabled={disabled} {...other}>
            {
                data.length
                    ? renderOption(data)
                    : children
            }
        </select>
    );
};

Select.propTypes = {
    data: PropTypes.array,        // option用数据
    className: PropTypes.string,  // 自定义类名
    value: PropTypes.oneOfType([  // 选中值
        PropTypes.string,
        PropTypes.number
    ]),
    placeholder: PropTypes.oneOfType([  // 提示信息
        PropTypes.string,
        PropTypes.number
    ]),
    disabled: PropTypes.bool,
    onChange: PropTypes.func
};

Select.defaultProps = {
    data: [],
    value: '',
    placeholder: '请选择',
    disabled: false,
    onChange() { }
};

export default Select;