Home Reference Source Repository

src/region/Area.js

/**
 * @file Region/RegionArea
 * @author cxtom([email protected])
 */

import React, {PropTypes, Component} from 'react';
import {create} from 'melon-core/classname/cxBuilder';
import Selector from './Selector';
import Province from './Province';
import City from './City';
import * as helper from './helper';

const cx = create('RegionArea');

export default class RegionArea extends Component {

    constructor(props) {

        super(props);

        this.onSelectorChange = this.onSelectorChange.bind(this);
        this.onProvinceChange = this.onProvinceChange.bind(this);

    }

    onSelectorChange(e) {

        const value = e.value;
        const {datasource, onChange} = this.props;

        helper[value ? 'selectAll' : 'cancelAll'](datasource);

        onChange && onChange({
            data: datasource
        });

    }

    onProvinceChange(index, e) {

        const data = e.data;
        const {datasource, onChange} = this.props;

        datasource.children[index] = data;

        helper.isAllSelected(datasource);

        onChange && onChange({
            data: datasource
        });

    }

    onCityChange(pIndex, cIndex, e) {

        const data = e.data;

        const {datasource, onChange} = this.props;

        const p = datasource.children[pIndex];

        p.children[cIndex] = data;

        helper.isAllSelected(p);

        onChange && onChange({
            data: datasource
        });

    }

    renderProvince(child, index) {
        return (
            <Province
                key={index}
                datasource={child}
                onChange={this.onProvinceChange.bind(this, index)}>
                {
                    Array.isArray(child.children) && child.children.length > 0
                    ? child.children.map((child, i) => {
                        return this.renderCity(index, child, i);
                    })
                    : null
                }
            </Province>
        );
    }

    renderCity(pIndex, child, index) {
        return (
            <City
                key={index}
                datasource={child}
                onChange={e => {
                    return this.onCityChange(pIndex, index, e);
                }} />
        );
    }

    render() {

        const {datasource} = this.props;

        return (
            <li className={cx(this.props).build()}>
                <div className={cx().part('selector').build()}>
                    <Selector
                        label={datasource.text}
                        id={datasource.id}
                        checked={datasource.selected}
                        onChange={this.onSelectorChange} />
                </div>
                <div className={cx().part('content').build()}>
                    {datasource
                        .children
                        .map((...args) => {
                            return this.renderProvince(...args);
                        })
                    }
                </div>
            </li>
        );
    }

}

RegionArea.displayName = 'RegionArea';


RegionArea.propTypes = {
    onChange: PropTypes.func,
    disabled: PropTypes.bool,
    datasource: PropTypes.object
};