'use strict'; Object.defineProperty(exports, "__esModule", { value: true }); var _extends2 = require('babel-runtime/helpers/extends'); var _extends3 = _interopRequireDefault(_extends2); 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 _react2 = _interopRequireDefault(_react); var _arrayTreeFilter = require('array-tree-filter'); var _arrayTreeFilter2 = _interopRequireDefault(_arrayTreeFilter); var _MultiPicker = require('rmc-picker/lib/MultiPicker'); var _MultiPicker2 = _interopRequireDefault(_MultiPicker); var _Picker = require('rmc-picker/lib/Picker'); var _Picker2 = _interopRequireDefault(_Picker); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } var Cascader = function (_React$Component) { (0, _inherits3['default'])(Cascader, _React$Component); function Cascader() { (0, _classCallCheck3['default'])(this, Cascader); var _this = (0, _possibleConstructorReturn3['default'])(this, (Cascader.__proto__ || Object.getPrototypeOf(Cascader)).apply(this, arguments)); _this.state = { value: _this.getValue(_this.props.data, _this.props.defaultValue || _this.props.value) }; _this.onValueChange = function (value, index) { var children = (0, _arrayTreeFilter2['default'])(_this.props.data, function (c, level) { return level <= index && c.value === value[level]; }); var data = children[index]; var i = void 0; for (i = index + 1; data && data.children && data.children.length && i < _this.props.cols; i++) { data = data.children[0]; value[i] = data.value; } value.length = i; _this.setState({ value: value }); if (_this.props.onChange) { _this.props.onChange(value); } }; return _this; } (0, _createClass3['default'])(Cascader, [{ key: 'componentWillReceiveProps', value: function componentWillReceiveProps(nextProps) { if ('value' in nextProps) { this.setState({ value: this.getValue(nextProps.data, nextProps.value) }); } } }, { key: 'getValue', value: function getValue(d, val) { var data = d || this.props.data; var value = val || this.props.value || this.props.defaultValue; if (!value || !value.length || value.indexOf(undefined) > -1) { value = []; for (var i = 0; i < this.props.cols; i++) { if (data && data.length) { value[i] = data[0].value; data = data[0].children; } } } return value; } }, { key: 'getCols', value: function getCols() { var _props = this.props, data = _props.data, cols = _props.cols, pickerPrefixCls = _props.pickerPrefixCls, disabled = _props.disabled, pickerItemStyle = _props.pickerItemStyle, indicatorStyle = _props.indicatorStyle; var value = this.state.value; var childrenTree = (0, _arrayTreeFilter2['default'])(data, function (c, level) { return c.value === value[level]; }).map(function (c) { return c.children; }); // in case the users data is async get when select change var needPad = cols - childrenTree.length; if (needPad > 0) { for (var i = 0; i < needPad; i++) { childrenTree.push([]); } } childrenTree.length = cols - 1; childrenTree.unshift(data); return childrenTree.map(function () { var children = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : []; var level = arguments[1]; return _react2['default'].createElement(_Picker2['default'], { key: level, prefixCls: pickerPrefixCls, style: { flex: 1 }, disabled: disabled, itemStyle: pickerItemStyle, indicatorStyle: indicatorStyle }, children.map(function (item) { return _react2['default'].createElement(_Picker2['default'].Item, { value: item.value, key: item.value }, item.label); })); }); } }, { key: 'render', value: function render() { var props = this.props; var prefixCls = props.prefixCls, className = props.className, rootNativeProps = props.rootNativeProps, style = props.style; var cols = this.getCols(); var multiStyle = (0, _extends3['default'])({ flexDirection: 'row', alignItems: 'center' }, style); return _react2['default'].createElement(_MultiPicker2['default'], { style: multiStyle, prefixCls: prefixCls, className: className, selectedValue: this.state.value, rootNativeProps: rootNativeProps, onValueChange: this.onValueChange, onScrollChange: props.onScrollChange }, cols); } }]); return Cascader; }(_react2['default'].Component); Cascader.defaultProps = { cols: 3, prefixCls: 'rmc-cascader', pickerPrefixCls: 'rmc-picker', data: [], disabled: false }; exports['default'] = Cascader; module.exports = exports['default'];