@beisen/ethos/lib/transfer/list.js

beisencloud pc react components

'use strict';

var _extends2 = require('babel-runtime/helpers/extends');

var _extends3 = _interopRequireDefault(_extends2);

var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');

var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);

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 _reactDom = require('react-dom');

var _commonFunc = require('../common-func');

var _reactSortablejs = require('react-sortablejs');

var _reactSortablejs2 = _interopRequireDefault(_reactSortablejs);

var _toolTip = require('../tool-tip');

var _toolTip2 = _interopRequireDefault(_toolTip);

var _treeList = require('./treeList');

var _treeList2 = _interopRequireDefault(_treeList);

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

var List = function (_Component) {
    (0, _inherits3.default)(List, _Component);

    function List(props) {
        (0, _classCallCheck3.default)(this, List);

        var _this = (0, _possibleConstructorReturn3.default)(this, (List.__proto__ || (0, _getPrototypeOf2.default)(List)).call(this, props));

        _this.handleSelect = function (key) {
            _this.props.handleSelect(_this.props.dire, key);
        };

        _this.cancelSelect = function (key) {
            _this.props.cancelSelect(_this.props.dire, key);
        };

        _this.handleDrop = function (order, sortable, evt) {
            // 获取传输方向
            var dire = evt.item.getAttribute('data-dire');
            // type=update表示单列排序
            if (evt.type === 'update') {
                _this.props.sortTransfer(order, dire);
            } else if (dire !== _this.props.dire) {
                //列间拖拽:触发目标列change事件
                // chosenIndex: 当前拖拽的ＩＤ
                var chosenIndex = evt.item.getAttribute('data-index');
                _this.props.handleDropTransfer(chosenIndex, order, dire);
            }
        };

        return _this;
    }

    // 处理选中


    // 取消选中


    //


    (0, _createClass3.default)(List, [{
        key: 'render',
        value: function render() {
            var _this2 = this;

            var _props = this.props,
                title = _props.title,
                data = _props.data,
                dire = _props.dire,
                style = _props.style,
                waitForTrans = _props.waitForTrans,
                topPosition = _props.topPosition,
                hiddenTip = _props.hiddenTip,
                sideTip = _props.sideTip,
                treeMode = _props.treeMode,
                treeModeLeft = _props.treeModeLeft;

            var items = [];
            if (treeMode) {
                items = _react2.default.createElement(_treeList2.default, (0, _extends3.default)({}, this.props, {
                    handleSelect: this.handleSelect,
                    cancelSelect: this.cancelSelect,
                    hiddenTip: hiddenTip,
                    sideTip: sideTip
                }));
            } else {
                items = data.map(function (item) {
                    var active = waitForTrans.indexOf(treeModeLeft ? item.ID : item.index) < 0 ? false : true;
                    return _react2.default.createElement(ListItem, (0, _extends3.default)({
                        key: item.index
                    }, item, {
                        dire: dire,
                        active: active,
                        handleSelect: _this2.handleSelect,
                        cancelSelect: _this2.cancelSelect,
                        hiddenTip: hiddenTip,
                        sideTip: sideTip,
                        treeModeLeft: treeModeLeft
                    }));
                });
            }
            return _react2.default.createElement(
                'div',
                { className: 'transfer-list', style: { width: style.width } },
                _react2.default.createElement(
                    'div',
                    { className: 'transfer-list__text' },
                    title
                ),
                _react2.default.createElement('div', { className: 'transfer-list__text-bottom' }),
                _react2.default.createElement(
                    'div',
                    { className: 'transfer-list__body', id: "transfer-list__body-" + dire },
                    !treeMode ? _react2.default.createElement(
                        'div',
                        null,
                        _react2.default.createElement(
                            _reactSortablejs2.default,
                            {
                                options: {
                                    animation: 100,
                                    group: 'transfer',
                                    forceFallback: true,
                                    dataIdAttr: 'data-index',
                                    fallbackClass: "transfer-list__item_fallback",
                                    fallbackTolerance: 0,
                                    chosenClass: 'transfer-list__item_chosen',
                                    ghostClass: 'transfer-list__item_ghost'
                                },
                                tag: 'ul',
                                onChange: this.handleDrop
                            },
                            items
                        )
                    ) : _react2.default.createElement(
                        'div',
                        null,
                        items
                    )
                )
            );
        }
    }]);
    return List;
}(_react.Component);

module.exports = List;

var ListItem = function (_Component2) {
    (0, _inherits3.default)(ListItem, _Component2);

    function ListItem(props) {
        (0, _classCallCheck3.default)(this, ListItem);

        var _this3 = (0, _possibleConstructorReturn3.default)(this, (ListItem.__proto__ || (0, _getPrototypeOf2.default)(ListItem)).call(this, props));

        _this3.handleClick = function (e) {
            var isChecked = _this3.state.isChecked;
            var treeModeLeft = _this3.props.treeModeLeft;

            _this3.setState({ isChecked: !isChecked });
            if (_this3.props.active) {
                //当前选中状态
                _this3.props.cancelSelect(treeModeLeft ? _this3.props.ID : _this3.props.index);
            } else {
                _this3.props.handleSelect(treeModeLeft ? _this3.props.ID : _this3.props.index);
            }
            e.stopPropagation();
        };

        _this3.state = {
            isChecked: false
        };
        return _this3;
    }

    // componentWillReceiveProps(nextProps) {
    //     if (nextProps.hasOwnProperty('clicked')) {
    //         this.setState({ isChecked: nextProps.clicked })
    //     }
    // }

    // 选中或取消选中


    (0, _createClass3.default)(ListItem, [{
        key: 'render',
        value: function render() {
            var isChecked = this.state.isChecked;
            var _props2 = this.props,
                text = _props2.text,
                index = _props2.index,
                dire = _props2.dire,
                active = _props2.active,
                sideTip = _props2.sideTip,
                hiddenTip = _props2.hiddenTip,
                treeModeLeft = _props2.treeModeLeft,
                clicked = _props2.clicked;

            var className = (clicked && !treeModeLeft ? ' transfer-list__item active ' : ' transfer-list__item ') + (treeModeLeft ? ' treeNoHoverColor ' : '');
            var checkClass = 'icon-check ' + (!isChecked ? 'sys-icon-Checkbox-nomal ' : 'sys-icon-checked-normal ');
            return _react2.default.createElement(
                'li',
                {
                    className: (active ? 'transfer-list__item active' : 'transfer-list__item') + className,
                    onClick: this.handleClick,
                    'data-index': index,
                    'data-dire': dire
                },
                treeModeLeft ? _react2.default.createElement('span', { className: checkClass, onClick: this.handleClick, onMouseOver: this.handleHover, onMouseOut: this.handleMouseOut }) : null,
                _react2.default.createElement(
                    _toolTip2.default,
                    { title: (0, _commonFunc.decode)(text), hidden: hiddenTip, side: sideTip },
                    _react2.default.createElement(
                        'span',
                        { className: 'transfer-list__item__text' },
                        (0, _commonFunc.decode)(text)
                    )
                ),
                _react2.default.createElement(
                    'span',
                    { className: 'transfer-list__item__drop-icon' },
                    _react2.default.createElement('span', null),
                    _react2.default.createElement('span', null),
                    _react2.default.createElement('span', null)
                )
            );
        }
    }]);
    return ListItem;
}(_react.Component);