lm-carpicker/src/wrapper.js

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

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


export default class Wrapper extends Component {

    static propTypes = {
        selectedMap: PropTypes.array,             // 选中集合 id
        selectedLabel: PropTypes.array,           // 选中集合 text
        onSelect: PropTypes.func,                 // 点选 选项后的回调，可用于请求数据操作等
        onDismiss: PropTypes.func,                // 点击取消按钮后的回调
        onOk: PropTypes.func,                     // 点击提交按钮后的回调
    };

    static defaultProps = {
        selectedMap: [],
        selectedLabel: [],
        onSelect() { },
        onDismiss() { },
        onOk() { }
    };

    constructor(props) {
        super(props);
        this.state = {
            selectedMap: [].concat(props.selectedMap),
            selectedLabel: [].concat(props.selectedLabel)
        };
    }

    componentWillReceiveProps(nextProps) {
        // 监听 props.selectedMap 变化, 若不同则改变
        const nextSelectedMap = nextProps.selectedMap, beforeSelectedMap = this.props.selectedMap, len = this.props.children.length;
        if (nextSelectedMap.length === len && nextSelectedMap[nextSelectedMap.length - 1] !== beforeSelectedMap[beforeSelectedMap.length - 1]) {
            this.setState({
                selectedMap: [].concat(nextSelectedMap),
                selectedLabel: [].concat(nextProps.selectedLabel)
            });
        }
    }

    // 点击item项
    onSelect(index, val, label) {
        const { disabled, children, onSelect, onOk } = this.props;
        if (disabled) return;
        // 更新当前selected
        let { selectedMap, selectedLabel } = this.state, len = children.length;
        selectedMap[index] = val;
        selectedLabel[index] = label;
        // 如果是最后一项直接提交
        if (index < len - 1) {
            // 如果不是, 将后面的选中值设置为空
            let i = index;
            i++;
            for (i; i < len; i++) {
                selectedMap[i] = ''
            }
        } else {
            onOk(selectedMap, selectedLabel);
        }
        this.setState({
            selectedMap,
            selectedLabel
        }, () => { onSelect(selectedMap[index], index) });
    }

    // 点击取消
    onDismiss(index) {
        const { onDismiss } = this.props;
        let { selectedMap, selectedLabel } = this.state;
        // 如果是第一个恢复值
        if (index === 0) {
            selectedMap = [].concat(this.props.selectedMap);
            selectedLabel = [].concat(this.props.selectedLabel);
        } else {
            // 更新当前selected
            selectedMap[index] = '';
            selectedMap[index - 1] = '';
        }
        this.setState({
            selectedMap,
            selectedLabel
        }, () => { onDismiss(index) });
    }

    // 控制 弹框 显示隐藏
    controlShow = (visible, index) => {
        if (visible) {
            if (index === 0) {
                return true;
            } else {
                return this.state.selectedMap[index - 1] ? true : false
            }
        } else {
            return false;
        }
    }

    render() {
        return (
            <React.Fragment>
                {Children.map(this.props.children, (child, index) => {
                    return cloneElement(child, {
                        index: index,
                        visible: this.controlShow(this.props.visible, index),
                        selected: this.state.selectedMap[index],
                        onSelect: this.onSelect.bind(this, index),
                        onDismiss: this.onDismiss.bind(this, index),
                        ...child.props
                    });
                })}
            </React.Fragment>
        )
    }
}