lm-carpicker/src/picker.js

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

import React from 'react'
import PropTypes from 'prop-types'
import PickerHoc from './pickerHoc'
import PopupHoc from './popupHoc'


const Picker = props => {

    let uuid = 0;

    let { data, selected, onSelect, renderList } = props;
    let component = null;
    // 列表渲染函数
    if (!renderList) renderList = (data = [], selected, onSelect, isModel) => {
        if (data instanceof Array && data.length) {
            return data.map((item, i) => {
                const { text, value, difftext, modelid } = item;
                return (
                    <li
                        key={value || modelid}
                        className={`item ${selected && [value, modelid].indexOf(selected) !== -1 ? 'active' : ''}`}
                        onClick={() => { onSelect(isModel ? modelid : value, text) }}
                    >
                        <p>{text}</p>
                        {difftext && <p className="desc">{difftext}</p>}
                    </li>
                );
            });
        } else {
            return null;
        }
    }

    // 车品牌/渲染
    const renderComponent = (data) => {

        const demoData = data && data[0]

        if (!demoData) return null;
        
        if (!checkData(demoData)) {
            return (
                <div className="area">
                    <ul className="list">
                        {renderList(data, selected, onSelect)}
                    </ul>
                </div>
            );
        }

        return data.map((listData, i) => {
            let { zimu, brandList, year, modelList, list = [] } = listData;
            let isModel = 'modelList' in listData;
            zimu = zimu === '热门' ? '热门品牌' : zimu;
            return (
                <div key={uuid++} className="area">
                    {
                        isModel || zimu
                            ? <h4 className="title" id={zimu || year || i}>{isModel ? year : zimu}</h4>
                            : null
                    }
                    <ul className="list">
                        {renderList(isModel ? modelList : (brandList || list), selected, onSelect, isModel)}
                    </ul>
                </div>
            );
        });
    }


    // 执行渲染
    if (data.length) component = renderComponent(data);

    return (
        <div className="main">
            {component}
        </div>
    );
}


Picker.propTypes = {
    index: PropTypes.number,
    data: PropTypes.array.isRequired,
    selected: PropTypes.string,
    onSelect: PropTypes.func
};

Picker.defaultProps = {
    index: 0,
    data: [],
    selected: '',
    onSelect() { }
};

export default PopupHoc(PickerHoc(Picker));


function checkData(data = {}) {
    let flag = false;
    let arr = Object.keys(data);
    let i = 0, l = arr.length;

    for (; i < l; i++) {
        const val = data[arr[i]];
        if (Object.prototype.toString.call(val) === '[object Array]') {
            flag = true;
            break;
        }
    }

    return flag;
}