zent
Version:
一套前端设计语言和基于React的实现
222 lines (188 loc) • 9.36 kB
JavaScript
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
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 _Search = require('./components/Search');
var _Search2 = _interopRequireDefault(_Search);
var _Option = require('./components/Option');
var _Option2 = _interopRequireDefault(_Option);
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; } /**
* Popup
*/
var isArray = function isArray(o) {
return Object.prototype.toString.apply(o) === '[object Array]';
};
var Popup = function (_Component) {
_inherits(Popup, _Component);
function Popup(props) {
_classCallCheck(this, Popup);
var _this = _possibleConstructorReturn(this, (Popup.__proto__ || Object.getPrototypeOf(Popup)).call(this, props));
_this.state = (0, _assign2['default'])({}, props);
_this.sourceData = props.data;
_this.searchFilterHandler = _this.searchFilterHandler.bind(_this);
_this.optionChangedHandler = _this.optionChangedHandler.bind(_this);
return _this;
}
_createClass(Popup, [{
key: 'componentWillReceiveProps',
value: function componentWillReceiveProps(nextProps) {
var nextState = (0, _assign2['default'])({}, nextProps);
nextState.keyword = this.state.keyword;
nextState.value = this.props.extraFilter ? nextProps.value : this.state.value;
this.sourceData = nextProps.data;
if (nextProps.keyCode === _constants.KEY_EN && this.state.keyCode === nextProps.keyCode) {
return;
}
this.updateCurrentId(nextProps.keyCode, nextProps.keyword);
this.setState(nextState);
}
}, {
key: 'optionChangedHandler',
value: function optionChangedHandler(ev, cid) {
this.props.onBlur();
this.props.onChange(ev, this.props.data.filter(function (item) {
return item.cid === cid;
})[0]);
}
}, {
key: 'searchFilterHandler',
value: function searchFilterHandler(keyword) {
var _this2 = this;
var _props = this.props,
filter = _props.filter,
onAsyncFilter = _props.onAsyncFilter;
if (typeof onAsyncFilter === 'function') {
onAsyncFilter('' + keyword, function (data) {
_this2.setState({
keyword: keyword,
data: _this2.sourceData.filter(function (item) {
return isArray(data) && data.indexOf(item.value) > -1;
})
});
});
} else {
// keyword 为空或者没有 filter 则不过滤
this.setState({
keyword: keyword,
data: this.sourceData.filter(function (item) {
return !keyword || !filter || filter(item, '' + keyword);
})
});
}
}
}, {
key: 'updateCurrentId',
value: function updateCurrentId(code, keyword) {
var itemIds = this.itemIds;
var index = itemIds.indexOf(this.currentId);
switch (code) {
case _constants.KEY_DOWN:
if (index < 0) {
this.currentId = this.itemIds[0];
} else if (this.itemIds[index + 1]) {
this.currentId = this.itemIds[index + 1];
} else {
this.currentId = null;
}
break;
case _constants.KEY_UP:
if (index >= 0) {
this.currentId = this.itemIds[index - 1];
} else {
this.currentId = this.itemIds[this.itemIds.length - 1];
}
break;
case _constants.KEY_EN:
this.optionChangedHandler(keyword, this.currentId);
break;
default:
break;
}
}
}, {
key: 'render',
value: function render() {
var _this3 = this;
var _props2 = this.props,
cid = _props2.cid,
selectedItems = _props2.selectedItems,
emptyText = _props2.emptyText,
prefixCls = _props2.prefixCls,
extraFilter = _props2.extraFilter,
searchPlaceholder = _props2.searchPlaceholder,
filter = _props2.filter,
onFocus = _props2.onFocus,
onBlur = _props2.onBlur;
var _state = this.state,
value = _state.value,
keyword = _state.keyword;
var data = this.state.data;
var filterData = data.filter(function (item) {
return extraFilter && !value || !extraFilter && !keyword || !filter || filter(item, extraFilter ? '' + value : '' + keyword);
});
var showEmpty = data.length === 0 || filterData.length === 0;
this.itemIds = filterData.map(function (item) {
return item.cid;
});
return _react2['default'].createElement(
'div',
{ tabIndex: '0', className: prefixCls + '-popup', onFocus: onFocus, onBlur: onBlur },
!extraFilter && filter && _react2['default'].createElement(_Search2['default'], { prefixCls: prefixCls, placeholder: searchPlaceholder, onChange: this.searchFilterHandler }),
filterData.map(function (item) {
var currentCls = typeof _this3.currentId !== 'undefined' && item.cid === _this3.currentId ? 'current' : '';
var activeCls = selectedItems.filter(function (o) {
return o.cid === item.cid;
}).length > 0 || item.cid === cid ? 'active' : '';
return _react2['default'].createElement(_Option2['default'], _extends({
key: item.cid,
className: prefixCls + '-option ' + activeCls + ' ' + currentCls
}, item, {
onClick: _this3.optionChangedHandler
}));
}),
showEmpty && _react2['default'].createElement(_Option2['default'], {
className: prefixCls + '-empty',
text: emptyText,
onClick: this.optionChangedHandler
})
);
}
}]);
return Popup;
}(_react.Component);
Popup.propTypes = {
cid: _react.PropTypes.string,
value: _react.PropTypes.any,
keyword: _react.PropTypes.any,
selectedItems: _react.PropTypes.array,
searchPlaceholder: _react.PropTypes.string,
emptyText: _react.PropTypes.any,
prefixCls: _react.PropTypes.string,
extraFilter: _react.PropTypes.bool,
filter: _react.PropTypes.func,
onAsyncFilter: _react.PropTypes.func,
onFocus: _react.PropTypes.func,
onBlur: _react.PropTypes.func
};
Popup.defaultProps = {
cid: 0,
value: '',
keyword: '',
selectedItems: [],
emptyText: '',
prefixCls: '',
extraFilter: false,
searchPlaceholder: ''
};
exports['default'] = Popup;
module.exports = exports['default'];