eg-dropdown
Version:
eg-dropdown is deprecated ,please use react-drop-tree solution instead
260 lines (227 loc) • 9.46 kB
JavaScript
/**
* Created by slashhuang on 16/5/11.
*层级下拉菜单栏
*/
;
exports.__esModule = true;
var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
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 MultiDropMenu = (function (_Component) {
_inherits(MultiDropMenu, _Component);
function MultiDropMenu(props, context) {
_classCallCheck(this, MultiDropMenu);
_Component.call(this, props, context);
this.state = {
dropDownQueue: [], //1代表浮动在1.2; 0代表浮动在2.1，
formGroup: [], //最后存取的数据
title: props.title,
keyName: props.keyName,
leafName: props.leafName
};
this.formData = this.state.formGroup;
}
/**
* 渲染标题
* @param formGroup
*
* @return {*}
*/
MultiDropMenu.prototype.renderTitle = function renderTitle(formGroup) {
var keyName = this.state.keyName;
return formGroup && formGroup.reduce(function (pre, ele) {
return pre + ele[keyName] + ';';
}, '');
};
/**
* 处理多选框点击操作
* @param ele
*/
MultiDropMenu.prototype.checkboxHandler = function checkboxHandler(ele) {
var cachedFormGroup = this.state.formGroup;
/**
* 按照如下格式存取对外调用的数据，确保完备
* [ele]//ele为数组中的每一项
*/
var targetIndex = cachedFormGroup.indexOf(ele);
if (targetIndex > -1) {
cachedFormGroup.splice(targetIndex, 1);
} else {
cachedFormGroup.push(ele);
}
this.setState({
formGroup: cachedFormGroup,
title: this.renderTitle(cachedFormGroup) || this.props.title
});
};
MultiDropMenu.prototype.renderList = function renderList(type, ele, activeIndex, index, depth) {
var _this = this;
var xml = null;
var _state = this.state;
var formGroup = _state.formGroup;
var keyName = _state.keyName;
if (type == 'branch') {
xml = _react2['default'].createElement(
'li',
{ key: depth + ele[keyName], className: index == activeIndex ? "on" : '' },
_react2['default'].createElement(
'div',
{ className: 'multi-drop-down-list-content',
onMouseOver: function () {
_this.calculateNextMenuTree(depth, index);
}
},
ele[keyName]
),
_react2['default'].createElement('em', null)
);
} else {
xml = _react2['default'].createElement(
'li',
{ className: 'select-drop-down-input', onClick: function () {
_this.checkboxHandler(ele);
}, key: depth + ele[keyName] },
_react2['default'].createElement(
'i',
{ className: formGroup.indexOf(ele) < 0 ? 'check-box' : 'check-box active' },
_react2['default'].createElement('b', null)
),
_react2['default'].createElement(
'div',
{ className: 'select-drop-down-check-content' },
' ',
ele[keyName]
)
);
}
return xml;
};
/**
* 计算新的menu队列数据
* @param depth 状态数组深度
* @param index 替换的序数号
*/
MultiDropMenu.prototype.calculateNextMenuTree = function calculateNextMenuTree(depth, index) {
var cachedDropDownQueue = this.state.dropDownQueue;
cachedDropDownQueue = cachedDropDownQueue.slice(0, depth); //每次鼠标浮动，保留之前的
cachedDropDownQueue[depth] = index; //队列尾部添加序数号
//推入数据
this.setState({
dropDownQueue: cachedDropDownQueue
});
};
/**
* 下拉children所需要的数据形式
* [1,2,3]=>
* dropDownData[1].children//第1层
* dropDownData[1].children[2].children
* dropDownData[1].children[2].children[3]
* @type {{dropDownQueue: Array}}
*/
MultiDropMenu.prototype.renderQueuedMenu = function renderQueuedMenu(dropDownQueue) {
var _this2 = this;
var dropDownData = this.props.dropDownData;
var cachedData = [];
dropDownQueue.reduce(function (preQueue, cur) {
/**
* 参数叠加
*/
preQueue.push(cur);
/**
* 往数组推送数据
*/
var childMenuSourceData = preQueue.reduce(function (pre, cur) {
return pre[cur].children;
}, dropDownData);
if (childMenuSourceData && childMenuSourceData.length > 0) {
cachedData.push(_this2.renderChildMenu(childMenuSourceData, preQueue.length, dropDownQueue));
}
return preQueue;
}, []);
return cachedData;
};
/**
*
* @param listData 菜单数据
* @param depth 菜单深度(parent的节点)
* @return {XML}
* active的序数号码dropDownQueue[depth+1]
*/
MultiDropMenu.prototype.renderChildMenu = function renderChildMenu(listData, depth, dropDownQueue) {
var _this3 = this;
var leafName = this.state.leafName;
var activeIndex = dropDownQueue[depth];
var XML = _react2['default'].createElement(
'ul',
{ className: 'multi-drop-down-list select-drop-down-list', key: depth },
listData && listData.map(function (ele, index) {
return ele[leafName] ? _this3.renderList('leaf', ele, activeIndex, index, depth) : _this3.renderList('branch', ele, activeIndex, index, depth);
})
);
return XML;
};
MultiDropMenu.prototype.render = function render() {
var _this4 = this;
var dropDownData = this.props.dropDownData;
var _state2 = this.state;
var dropDownQueue = _state2.dropDownQueue;
var title = _state2.title;
return _react2['default'].createElement(
'div',
{ className: 'question-multi-menu' },
_react2['default'].createElement(
'div',
{ className: 'question-multi-menu-head', onMouseOver: function () {
_this4.setState({
dropDownQueue: []
});
} },
_react2['default'].createElement(
'span',
{ className: 'drop-down-hint' },
title
),
_react2['default'].createElement('i', { className: 'drop-down-arrow' })
),
dropDownData && dropDownData.length > 0 ? _react2['default'].createElement(
'div',
{ className: 'question-multi-menu-body' },
this.renderChildMenu(dropDownData, 0, dropDownQueue),
/*来自第0层*/
this.renderQueuedMenu(dropDownQueue)
) : null
);
};
_createClass(MultiDropMenu, null, [{
key: 'defaultProps',
value: {
leafName: 'leaf',
keyName: 'keyName',
title: '下拉菜单'
},
enumerable: true
}, {
key: 'propTypes',
value: {
/**
* ui展示的数据结构中的键值
* */
keyName: _react.PropTypes.string,
/**
* 初始化展示头部文字
* */
title: _react.PropTypes.string,
/**
* 叶子节点的键值(true or false)
* */
leafName: _react.PropTypes.string
},
enumerable: true
}]);
return MultiDropMenu;
})(_react.Component);
exports['default'] = MultiDropMenu;
module.exports = exports['default'];