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

A mobile UI toolkit, based on React

'use strict';

Object.defineProperty(exports, "__esModule", {
    value: true
});

var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _createClass2 = require('babel-runtime/helpers/createClass');

var _createClass3 = _interopRequireDefault(_createClass2);

var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require('babel-runtime/helpers/inherits');

var _inherits3 = _interopRequireDefault(_inherits2);

var _react = require('react');

var React = _interopRequireWildcard(_react);

var _arrayTreeFilter = require('array-tree-filter');

var _arrayTreeFilter2 = _interopRequireDefault(_arrayTreeFilter);

var _pickerColumn = require('./picker-column');

var _pickerColumn2 = _interopRequireDefault(_pickerColumn);

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj['default'] = obj; return newObj; } }

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }

var PickerView = function (_React$Component) {
    (0, _inherits3['default'])(PickerView, _React$Component);

    function PickerView() {
        (0, _classCallCheck3['default'])(this, PickerView);

        var _this = (0, _possibleConstructorReturn3['default'])(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;
    }

    (0, _createClass3['default'])(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 = (0, _arrayTreeFilter2['default'])(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(_pickerColumn2['default'], { 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(_pickerColumn2['default'], { 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);

exports['default'] = PickerView;

PickerView.defaultProps = {
    prefixCls: 'm-picker',
    cascade: false
};
module.exports = exports['default'];