eg-dropdown/lib/components/DropSuggestion.js

eg-dropdown is deprecated ,please use react-drop-tree solution instead

/**
 * Created by slashhuang on 16/5/13.
 * 联想下拉组件
 */
'use strict';

exports.__esModule = true;

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

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }

function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _reactDom = require('react-dom');

var _utilsDrawingJs = require('../utils/Drawing.js');

var _utilsDrawingJs2 = _interopRequireDefault(_utilsDrawingJs);

//js图形界面

var DropSuggestion = (function (_Component) {
    _inherits(DropSuggestion, _Component);

    function DropSuggestion(props, context) {
        _classCallCheck(this, DropSuggestion);

        _Component.call(this, props, context);
        this.state = {
            formGroup: [], //满足联想要求的下拉框
            targetContact: {}, //选中的目标联系人
            customerClassName: '',
            placeHolder: '',
            title: '', //展示的数据
            pressToIndex: -1, //初始化键盘按钮
            status: true //点击enter隐藏
        };
        this.formData = this.state.targetContact;
    }

    DropSuggestion.prototype.componentDidMount = function componentDidMount() {
        var that = this;
        _reactDom.findDOMNode(this.refs['suggestContainer']).addEventListener('mouseleave', function () {
            that.judgeStatus();
        });
        this.setState({
            customerClassName: this.props.customerClassName || "drop-down-suggestion",
            placeHolder: this.props.placeHolder || "请填写姓名"
        });
    };

    DropSuggestion.prototype.judgeStatus = function judgeStatus() {
        this.setState({
            status: false
        });
        if (Object.keys(this.state.targetContact).length < 1) {
            //alert('请选择列表中的联系人数据');
        }
        this.formData = this.state.targetContact;
    };

    /**
     * 处理点击操作
     * @param ele
     */

    DropSuggestion.prototype.clickHandler = function clickHandler(ele) {
        this.setState({
            targetContact: ele,
            status: true,
            title: ele
        });
    };

    DropSuggestion.prototype.renderKeyPress = function renderKeyPress(activeIndex) {
        var formGroup = this.state.formGroup;
        //列表总长度
        function lengthHandle(ele) {
            if (ele < 0) {
                return -1;
            } else if (ele >= formGroup.length) {
                //回归头部
                return 0;
            } else {
                return ele;
            }
        }
        var renderIndex = lengthHandle(activeIndex);
        if (formGroup && formGroup[renderIndex]) {
            this.setState({
                pressToIndex: renderIndex,
                targetContact: formGroup[renderIndex],
                title: formGroup[renderIndex]
            });
        } else {
            this.setState({
                pressToIndex: renderIndex,
                targetContact: {},
                title: ''
            });
        }
    };

    DropSuggestion.prototype.keyHandler = function keyHandler(event) {
        var keyCode = event.keyCode;
        switch (keyCode) {
            case 27:
                //esc
                break;
                return;
            case 38:
                //up键
                this.renderKeyPress(--this.state.pressToIndex);
                return;
            case 40:
                //down键
                this.renderKeyPress(++this.state.pressToIndex);
                return;
            case 13:
                //enter
                event.preventDefault();
                event.stopPropagation();
                this.renderKeyPress(this.state.pressToIndex);
                this.setState({
                    status: true
                });
                return;
            default:
                break;
        }
    };

    DropSuggestion.prototype.handleChange = function handleChange(value) {
        var that = this;
        var url = this.props.url;

        this.setState({
            title: value,
            status: false
        });
        fetch(url).then(function (res) {
            return res.json();
        }).then(function (data) {
            that.setState({
                formGroup: data.keywords,
                targetContact: {}
            });
        });
    };

    DropSuggestion.prototype.renderChildMenu = function renderChildMenu(formGroup) {
        var _this = this;

        var _state = this.state;
        var pressToIndex = _state.pressToIndex;
        var status = _state.status;

        var XML = formGroup && formGroup.length > 0 ? _react2['default'].createElement(
            'div',
            { className: 'question-multi-menu-body' },
            _react2['default'].createElement(
                'ul',
                { className: 'select-drop-down-list' },
                formGroup && formGroup.map(function (ele, index) {
                    return _react2['default'].createElement(
                        'li',
                        { className: pressToIndex == index ? "select-drop-down-input on" : 'select-drop-down-input',
                            onClick: function () {
                                _this.clickHandler(ele);
                            } },
                        _react2['default'].createElement(
                            'div',
                            null,
                            ele
                        )
                    );
                })
            )
        ) : _react2['default'].createElement('div', null);
        if (status) {
            XML = null;
        }
        return XML;
    };

    DropSuggestion.prototype.cancelInput = function cancelInput() {
        this.setState({
            pressToIndex: -1,
            targetContact: {},
            title: ''
        });
    };

    DropSuggestion.prototype.render = function render() {
        var _this2 = this;

        var _state2 = this.state;
        var formGroup = _state2.formGroup;
        var title = _state2.title;

        var that = this;
        return _react2['default'].createElement(
            'div',
            { className: this.state.customerClassName, ref: 'suggestContainer', onKeyDown: this.keyHandler.bind(this) },
            _react2['default'].createElement(
                'div',
                { style: { width: 'inherit', padding: '7px 9px' }, className: 'drop-down-suggestion-head' },
                _react2['default'].createElement('input', { style: { outline: 'none', border: 'none', verticalAlign: 'middle' },
                    value: title,
                    placeholder: this.state.placeHolder,
                    onChange: function (e) {
                        return _this2.handleChange(e.target.value);
                    },
                    onFocus: function () {
                        _this2.setState({
                            status: false
                        });
                    }
                }),
                _react2['default'].createElement(_utilsDrawingJs2['default'], { onClick: function () {
                        that.cancelInput();
                    }, show: !!this.state.title })
            ),
            this.renderChildMenu(formGroup)
        );
    };

    return DropSuggestion;
})(_react.Component);

exports['default'] = DropSuggestion;
module.exports = exports['default'];