modo-mobile/es/picker/picker-view.js

A mobile UI toolkit, based on React

import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
import _createClass from 'babel-runtime/helpers/createClass';
import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
import _inherits from 'babel-runtime/helpers/inherits';
import * as React from 'react';
import arrayTreeFilter from 'array-tree-filter';
import PickerColumn from './picker-column';

var PickerView = function (_React$Component) {
    _inherits(PickerView, _React$Component);

    function PickerView() {
        _classCallCheck(this, PickerView);

        var _this = _possibleConstructorReturn(this, (PickerView.__proto__ || Object.getPrototypeOf(PickerView)).apply(this, arguments));

        _this.state = {
            value: _this.props.value || []
        };
        _this.onValueChange = function (index, val) {
            var _this$props = _this.props,
                onChange = _this$props.onChange,
                onColumnChange = _this$props.onColumnChange,
                data = _this$props.data,
                cols = _this$props.cols,
                cascade = _this$props.cascade;

            var value = _this.state.value.slice(0);
            value[index] = val;
            if (cascade) {
                var newData = data;
                var item = newData.find(function (v) {
                    return v.value === value[0];
                });

                var _loop = function _loop(i) {
                    if (item && item.children && item.children.length) {
                        var child = item.children.find(function (v) {
                            return v.value === value[i];
                        });
                        if (child) {
                            item = child;
                        } else {
                            value[i] = item.children[0].value;
                            item = item.children[0];
                        }
                    } else {
                        value[i] = '';
                    }
                };

                for (var i = 1; i < cols; i++) {
                    _loop(i);
                }
            }
            _this.setState({ value: value });
            if (onChange) onChange(value);
            if (onColumnChange) onColumnChange(val, index);
        };
        return _this;
    }

    _createClass(PickerView, [{
        key: 'componentWillReceiveProps',
        value: function componentWillReceiveProps(nextProps) {
            if ('value' in nextProps) {
                if (this.state.value !== nextProps.value) {
                    this.setState({
                        value: nextProps.value
                    });
                }
            }
        }
    }, {
        key: 'getColumn',
        value: function getColumn() {
            var _this2 = this;

            var _props = this.props,
                prefixCls = _props.prefixCls,
                data = _props.data,
                cascade = _props.cascade,
                cols = _props.cols;
            var value = this.state.value;

            var colums = void 0;
            if (cascade) {
                var childrenTree = arrayTreeFilter(data, function (c, level) {
                    return c.value === value[level];
                }).map(function (c) {
                    return c.children;
                });
                var needPad = cols - childrenTree.length;
                if (needPad > 0) {
                    for (var i = 0; i < needPad; i++) {
                        childrenTree.push([]);
                    }
                }
                childrenTree.length = cols - 1;
                childrenTree.unshift(data);
                colums = childrenTree.map(function () {
                    var col = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
                    var index = arguments[1];
                    return React.createElement(PickerColumn, { key: index, prefixCls: prefixCls + '-column', data: col, value: value && value[index], onValueChange: function onValueChange(val) {
                            return _this2.onValueChange(index, val);
                        } });
                });
            } else {
                colums = data.map(function (col, index) {
                    return React.createElement(PickerColumn, { key: index, prefixCls: prefixCls + '-column', data: col, value: value && value[index], onValueChange: function onValueChange(val) {
                            return _this2.onValueChange(index, val);
                        } });
                });
            }
            return colums;
        }
    }, {
        key: 'render',
        value: function render() {
            var prefixCls = this.props.prefixCls;

            return React.createElement(
                'div',
                { className: prefixCls },
                this.getColumn()
            );
        }
    }]);

    return PickerView;
}(React.Component);

export default PickerView;

PickerView.defaultProps = {
    prefixCls: 'm-picker',
    cascade: false
};