zent
Version:
一套前端设计语言和基于React的实现
423 lines (356 loc) • 15.3 kB
JavaScript
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
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; }; }();
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _assign = require('zent-utils/lodash/assign');
var _assign2 = _interopRequireDefault(_assign);
var _omit = require('zent-utils/lodash/omit');
var _omit2 = _interopRequireDefault(_omit);
var _cloneDeep = require('zent-utils/lodash/cloneDeep');
var _cloneDeep2 = _interopRequireDefault(_cloneDeep);
var _isEqual = require('zent-utils/lodash/isEqual');
var _isEqual2 = _interopRequireDefault(_isEqual);
var _isArray = require('zent-utils/lodash/isArray');
var _isArray2 = _interopRequireDefault(_isArray);
var _Index = require('./triggers/Index');
var _Index2 = _interopRequireDefault(_Index);
var _Popup = require('./Popup');
var _Popup2 = _interopRequireDefault(_Popup);
var _SimpleTrigger = require('./triggers/SimpleTrigger');
var _SimpleTrigger2 = _interopRequireDefault(_SimpleTrigger);
var _SelectTrigger = require('./triggers/SelectTrigger');
var _SelectTrigger2 = _interopRequireDefault(_SelectTrigger);
var _InputTrigger = require('./triggers/InputTrigger');
var _InputTrigger2 = _interopRequireDefault(_InputTrigger);
var _TagsTrigger = require('./triggers/TagsTrigger');
var _TagsTrigger2 = _interopRequireDefault(_TagsTrigger);
var _constants = require('./constants');
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 _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
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; } /**
* Select
*/
var noop = function noop() {
return void 0;
};
var Select = function (_Component) {
_inherits(Select, _Component);
function Select(props) {
_classCallCheck(this, Select);
var _this = _possibleConstructorReturn(this, (Select.__proto__ || Object.getPrototypeOf(Select)).call(this, props));
var data = [];
/**
* data支持字符串数组和对象数组两种模式
*
* 字符串数组默认value为下标
* 对象数组需提供value和text
*
* @return {object}
*/
if (props.children) {
var children = props.children;
if (!(0, _isArray2['default'])(children)) {
children = [children];
}
data = children.map(function (item) {
var value = item.props.value;
value = typeof value === 'undefined' ? item : value;
return (0, _assign2['default'])({}, item.props, {
value: value,
text: item.props.children
});
});
}
// props.data会将子元素覆盖
if (props.data) {
data = props.data;
}
if (props.simple) {
_this.trigger = _SimpleTrigger2['default'];
} else if (props.search) {
_this.trigger = _InputTrigger2['default'];
} else if (props.tags) {
_this.trigger = _TagsTrigger2['default'];
} else {
_this.trigger = props.trigger;
}
_this.state = (0, _assign2['default'])({
selectedItems: []
}, props);
_this.formateData(data);
_this.blurHandler = _this.blurHandler.bind(_this);
_this.keyupHandler = _this.keyupHandler.bind(_this);
_this.triggerChangeHandler = _this.triggerChangeHandler.bind(_this);
_this.triggerDeleteHandler = _this.triggerDeleteHandler.bind(_this);
_this.optionChangedHandler = _this.optionChangedHandler.bind(_this);
_this.popupFocusHandler = _this.popupFocusHandler.bind(_this);
_this.popupBlurHandler = _this.popupBlurHandler.bind(_this);
return _this;
}
_createClass(Select, [{
key: 'componentWillReceiveProps',
value: function componentWillReceiveProps(nextProps) {
var open = this.state.open;
// 重置组件data
open = typeof this.focus === 'undefined' ? open : this.focus;
var nextState = _extends({}, nextProps, { open: open });
var selectedItems = [];
if (nextProps.data === this.state.data && nextProps.value === this.state.value && nextProps.index === this.state.index) return;
if ('' + nextProps.value || '' + nextProps.index) {
this.state.selectedItem = this.props.selectedItem;
}
this.formateData(nextProps.data, nextProps);
if ((0, _isArray2['default'])(nextProps.value)) {
this.sourceData.forEach(function (item) {
if (nextProps.value.indexOf(item.value) > -1) {
selectedItems.push(item);
}
});
}
nextState.selectedItem = this.state.selectedItem;
nextState.selectedItems = selectedItems;
this.setState(nextState);
}
// 对data进行处理，增加cid
}, {
key: 'formateData',
value: function formateData(data, props) {
data = data || this.sourceData;
props = props || this.props;
var that = this;
this.sourceData = (0, _cloneDeep2['default'])(data).map(function (item) {
var result = {};
if ((typeof item === 'undefined' ? 'undefined' : _typeof(item)) === 'object') {
result.value = item[props.optionValue];
result.text = item[props.optionText];
} else {
result.value = item;
result.text = item;
}
return (0, _assign2['default'])(item, result);
}).map(function (item, index) {
// 显示当前选项，支持value和index
item.cid = '' + index;
if ((0, _isArray2['default'])(props.value) && props.value.indexOf(item.value) > -1) {
that.state.selectedItems.push(item);
} else if (_typeof(props.value) === 'object' && (0, _isEqual2['default'])(props.value, item.value)) {
that.state.selectedItem = item;
} else if (typeof props.value !== 'undefined' && _typeof(props.value) !== 'object' && '' + item.value === '' + props.value || props.index !== 'undefined' && '' + index === '' + props.index) {
that.state.selectedItem = item;
}
return item;
});
return this.sourceData;
}
// 接收trigger改变后的数据，将数据传给popup
}, {
key: 'triggerChangeHandler',
value: function triggerChangeHandler(data) {
if (data.open) {
this.props.onOpen();
}
this.setState(data);
}
}, {
key: 'triggerDeleteHandler',
value: function triggerDeleteHandler(data) {
var _this2 = this;
var selectedItems = this.state.selectedItems;
selectedItems = selectedItems.filter(function (item) {
return item.cid !== data.cid;
});
this.setState({
selectedItems: selectedItems
}, function () {
_this2.props.onDelete(data);
});
}
// 将被选中的option的数据传给trigger
}, {
key: 'optionChangedHandler',
value: function optionChangedHandler(ev, selectedItem) {
var result = {};
var _props = this.props,
onEmptySelected = _props.onEmptySelected,
optionValue = _props.optionValue,
optionText = _props.optionText,
tags = _props.tags,
onChange = _props.onChange;
var selectedItems = this.state.selectedItems;
if (!selectedItem) {
onEmptySelected(ev);
return;
}
var args = (0, _omit2['default'])(selectedItem, ['cid']);
result[optionValue] = selectedItem.value;
result[optionText] = selectedItem.text;
var data = _extends({}, args, { result: result });
if (tags) {
if (!selectedItems.some(function (item) {
return item.cid === selectedItem.cid;
})) {
selectedItems.push(selectedItem);
}
}
onChange(ev, data);
this.setState({
selectedItems: selectedItems,
selectedItem: selectedItem,
open: this.focus
});
}
}, {
key: 'popupFocusHandler',
value: function popupFocusHandler() {
this.focus = true;
}
}, {
key: 'popupBlurHandler',
value: function popupBlurHandler() {
this.focus = false;
}
// 焦点丢失处理
}, {
key: 'blurHandler',
value: function blurHandler() {
var _this3 = this;
var that = this;
setTimeout(function () {
that.setState({
open: _this3.focus
});
}, 0);
}
}, {
key: 'keyupHandler',
value: function keyupHandler(ev) {
var code = ev.keyCode;
var keyword = ev.target.value;
if (code === _constants.KEY_ESC) {
this.setState({
open: false
});
} else if ([_constants.KEY_EN, _constants.KEY_UP, _constants.KEY_DOWN].indexOf(code) > -1) {
ev.preventDefault();
this.setState({
keyCode: code,
keyword: keyword
});
} else {
this.setState({
keyCode: code
});
}
}
}, {
key: 'render',
value: function render() {
var _props2 = this.props,
placeholder = _props2.placeholder,
className = _props2.className,
disabled = _props2.disabled,
emptyText = _props2.emptyText,
_props2$filter = _props2.filter,
filter = _props2$filter === undefined ? this.props.onFilter : _props2$filter,
onAsyncFilter = _props2.onAsyncFilter,
searchPlaceholder = _props2.searchPlaceholder;
var _state = this.state,
selectedItems = _state.selectedItems,
_state$selectedItem = _state.selectedItem,
selectedItem = _state$selectedItem === undefined ? {} : _state$selectedItem,
extraFilter = _state.extraFilter,
open = _state.open,
keyCode = _state.keyCode,
keyword = _state.keyword;
var _selectedItem$cid = selectedItem.cid,
cid = _selectedItem$cid === undefined ? '' : _selectedItem$cid,
value = selectedItem.value;
var openCls = open && !disabled ? 'open' : '';
var disabledCls = disabled ? 'disabled' : '';
var prefixCls = this.props.prefix + '-select';
return _react2['default'].createElement(
'div',
{ tabIndex: '0', className: prefixCls + ' ' + className + ' ' + openCls + ' ' + disabledCls, onBlur: this.blurHandler, onKeyDown: this.keyupHandler },
_react2['default'].createElement(_Index2['default'], _extends({
prefixCls: prefixCls,
trigger: this.trigger,
placeholder: placeholder,
selectedItems: selectedItems,
open: open
}, selectedItem, {
onChange: this.triggerChangeHandler,
onDelete: this.triggerDeleteHandler
})),
_react2['default'].createElement(_Popup2['default'], {
cid: cid,
prefixCls: prefixCls,
data: this.sourceData,
selectedItems: selectedItems,
extraFilter: extraFilter,
searchPlaceholder: searchPlaceholder,
value: value,
emptyText: emptyText,
keyCode: keyCode,
keyword: keyword,
filter: filter,
onAsyncFilter: onAsyncFilter,
onChange: this.optionChangedHandler,
onFocus: this.popupFocusHandler,
onBlur: this.popupBlurHandler
})
);
}
}]);
return Select;
}(_react.Component);
Select.propTypes = {
data: _react.PropTypes.array,
prefix: _react.PropTypes.string,
className: _react.PropTypes.string,
disabled: _react.PropTypes.bool,
placeholder: _react.PropTypes.string,
searchPlaceholder: _react.PropTypes.string,
emptyText: _react.PropTypes.string,
selectedItem: _react.PropTypes.shape({
value: _react.PropTypes.any,
text: _react.PropTypes.string
}),
trigger: _react.PropTypes.func,
optionValue: _react.PropTypes.string,
optionText: _react.PropTypes.string,
onChange: _react.PropTypes.func,
onDelete: _react.PropTypes.func,
filter: _react.PropTypes.func,
onAsyncFilter: _react.PropTypes.func,
onEmptySelected: _react.PropTypes.func,
onOpen: _react.PropTypes.func
};
Select.defaultProps = {
prefix: 'zent',
disabled: false,
className: '',
trigger: _SelectTrigger2['default'],
open: false,
placeholder: '请选择',
searchPlaceholder: '',
emptyText: '没有找到匹配项',
selectedItem: {
value: '',
text: ''
},
selectedItems: [],
optionValue: 'value',
optionText: 'text',
onChange: noop,
onDelete: noop,
onEmptySelected: noop,
onOpen: noop
};
exports['default'] = Select;
module.exports = exports['default'];