modo-mobile/lib/picker/index.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 _pickerView = require('./picker-view');

var _pickerView2 = _interopRequireDefault(_pickerView);

var _popup = require('../popup');

var _popup2 = _interopRequireDefault(_popup);

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 }; }

function noop() {}

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

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

        var _this = (0, _possibleConstructorReturn3['default'])(this, (Picker.__proto__ || Object.getPrototypeOf(Picker)).apply(this, arguments));

        _this.state = {
            value: _this.getValue(),
            visible: false
        };
        _this.handleChange = function (value) {
            _this.setState({ value: value });
        };
        _this.handlePopupCancel = function () {
            _this.props.onCancel();
            _this.setState({ visible: false });
        };
        _this.handlePopupConfirm = function () {
            _this.props.onConfirm(_this.state.value);
            _this.props.onChange(_this.state.value);
            _this.setState({ visible: false });
        };
        _this.fireVisibleChange = function () {
            var disabled = _this.props.disabled;

            if (!disabled) {
                _this.setState({ visible: !_this.state.visible });
            }
        };
        _this.getLabel = function () {
            var _this$props = _this.props,
                cascade = _this$props.cascade,
                data = _this$props.data,
                cols = _this$props.cols;

            var value = (_this.props.value || _this.state.value || _this.props.defaultValue).slice(0, cols);
            var treeChildren = [];
            if (cascade) {
                treeChildren = (0, _arrayTreeFilter2['default'])(data, function (c, level) {
                    return c.value === value[level];
                });
            } else {
                value.forEach(function (v, i) {
                    var item = data[i].find(function (col) {
                        return col.value === v;
                    });
                    if (item) treeChildren.push(item);
                });
            }
            return treeChildren.map(function (v) {
                return v.label;
            }).join(' ');
        };
        return _this;
    }

    (0, _createClass3['default'])(Picker, [{
        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 value = val || this.props.value || this.props.defaultValue || [];
            if (!value || !value.length || value.indexOf(undefined) > -1) {
                value = [];
                if (this.props.cascade) {
                    var data = d || this.props.data;
                    var cols = data.length > this.props.cols ? this.props.cols : data.length;
                    for (var i = 0; i < cols; i++) {
                        value[i] = data[0].value;
                    }
                } else {
                    var _data = d || this.props.data;
                    var _cols = _data.length > this.props.cols ? this.props.cols : _data.length;
                    for (var _i = 0; _i < _cols; _i++) {
                        value[_i] = _data[_i][0].value;
                    }
                }
            }
            return value.slice(0, this.props.cols);
        }
    }, {
        key: 'render',
        value: function render() {
            var _props = this.props,
                prefixCls = _props.prefixCls,
                isView = _props.isView,
                cols = _props.cols,
                children = _props.children,
                data = _props.data,
                cascade = _props.cascade,
                disabled = _props.disabled,
                title = _props.title,
                okText = _props.okText,
                cancelText = _props.cancelText,
                onColumnChange = _props.onColumnChange;
            var _state = this.state,
                value = _state.value,
                visible = _state.visible;

            var pickerNode = React.createElement(_pickerView2['default'], { prefixCls: prefixCls, data: data, cols: cols, value: value, cascade: cascade, onChange: this.handleChange, onColumnChange: onColumnChange });
            this.getLabel();
            return React.createElement(
                React.Fragment,
                null,
                isView ? pickerNode : React.createElement(
                    React.Fragment,
                    null,
                    children && typeof children !== 'string' && React.isValidElement(children) && React.cloneElement(children, {
                        disabled: disabled,
                        onClick: this.fireVisibleChange,
                        children: this.getLabel()
                    }),
                    React.createElement(
                        _popup2['default'],
                        { position: 'bottom', visible: visible, maskClosable: true, destroyed: true, onClose: this.fireVisibleChange },
                        React.createElement(_popup2['default'].TitleBar, { title: title, okText: okText, cancelText: cancelText, onCancel: this.handlePopupCancel, onConfirm: this.handlePopupConfirm }),
                        pickerNode
                    )
                )
            );
        }
    }]);
    return Picker;
}(React.Component);

exports['default'] = Picker;

Picker.defaultProps = {
    prefixCls: 'm-picker',
    isView: false,
    cols: 3,
    cascade: false,
    disabled: false,
    okText: '确定',
    cancelText: '取消',
    onChange: noop,
    onCancel: noop,
    onConfirm: noop,
    onColumnChange: noop
};
module.exports = exports['default'];