modo-mobile/es/picker/index.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 PickerView from './picker-view';
import Popup from '../popup';
function noop() {}

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

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

        var _this = _possibleConstructorReturn(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 = arrayTreeFilter(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;
    }

    _createClass(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(PickerView, { 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(
                        Popup,
                        { position: 'bottom', visible: visible, maskClosable: true, destroyed: true, onClose: this.fireVisibleChange },
                        React.createElement(Popup.TitleBar, { title: title, okText: okText, cancelText: cancelText, onCancel: this.handlePopupCancel, onConfirm: this.handlePopupConfirm }),
                        pickerNode
                    )
                )
            );
        }
    }]);

    return Picker;
}(React.Component);

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