lm-carpicker/src/index.js

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

/**
 * Created by liuduan<liuduan.05.05@163.com>.
 * ComponentName Carpicker
 * Desc 汽车品牌、车系、车型选择器
 * GroupName lm-component
 */

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import Wrapper from './wrapper'
import Picker from './picker'
import PickerHoc from './pickerHoc'
import PopupHoc from './popupHoc'
import './index.scss'

/**
 * @class Carpicker
 * @extends React.Component
 * @desc Carpicker Component for mobile
 */

const carpickers = ['brand', 'series', 'model'];

export default class Carpicker extends Component {

    static propTypes = {
        className: PropTypes.array,               // 自定义类名
        style: PropTypes.array,                   // 自定义样式
        id: PropTypes.array,                      // id,
        refName: PropTypes.array,                 // ref值
        spellList: PropTypes.array,               // 拼音索引数据
        title: PropTypes.array,                   // popup标题
        rightText: PropTypes.array,               // popup右侧按钮文字
        selected: PropTypes.array,                // 选中 品牌、车系、车型 id
        label: PropTypes.array,                   // 选中 品牌、车系、车型 text
        disabled: PropTypes.bool,                 // 禁用
        visible: PropTypes.bool,                  // 显示弹层
        data: PropTypes.array,                    // 数据集合
        onSelect: PropTypes.func,                 // 点选 选项后的回调，可用于请求数据操作等
        onDismiss: PropTypes.func,                // 点击取消按钮后的回调
        onOk: PropTypes.func,                     // 点选车型选项后的确认提交的回调
        renderList: PropTypes.func,               // 列表item渲染方法
        spellComponent: PropTypes.element,        // 自定义abc索引
        spellShow: PropTypes.bool,                // 是否显示abc索引
        backTopShow: PropTypes.bool,              // 是否显示滚动到顶部按钮
        picker: PropTypes.oneOfType([
            PropTypes.element,
            PropTypes.func
        ])                                        // 自定义picker组件
    };

    static defaultProps = {
        className: [],
        style: [],
        id: [],
        refName: [],
        title: ['选择品牌', '车系', '车型'],
        rightText: ['取消', '取消', '取消'],
        selected: [],
        label: [],
        disabled: false,
        visible: false,
        spellShow: true,
        backTopShow: true,
        data: [[], [], []],
        onSelect() { },
        onDismiss() { },
        onOk() { }
    };

    // 渲染选择层
    renderPicker() {
        const {
            visible,
            selected,
            onSelect,
            onDismiss,
            onOk,
            data,
            title,
            rightText,
            className,
            style,
            id,
            refName,
            picker,
            ...others
        } = this.props;

        return title.length && title.map((title, index) => {

            const pickerProps = {
                className: `${carpickers[index]} ${className[index] || ''}`,
                style: style[index] || {},
                id: id[index],
                ref: el => this[refName[index]] = el,
                key: index,
                title,
                rightText: rightText[index],
                data: data[index] || [],
                ...others
            }

            const Com = PopupHoc(PickerHoc(picker));

            if (picker) return <Com {...pickerProps} />;

            return <Picker {...pickerProps} />;
        });
    }

    render() {
        const { disabled, visible, selected, label, onSelect, onDismiss, onOk } = this.props;
        return (<Wrapper
            disabled={disabled}
            visible={visible}
            selectedMap={selected}
            selectedLabel={label}
            onSelect={onSelect}
            onDismiss={onDismiss}
            onOk={onOk}
        >
            {this.renderPicker()}
        </Wrapper>)
    }
}