zent
Version:
一套前端设计语言和基于React的实现
1,745 lines (1,415 loc) • 216 kB
JavaScript
(function webpackUniversalModuleDefinition(root, factory) {
if(typeof define === 'function' && define.amd)
define(["react"], factory);
else if(typeof exports === 'object' && typeof module === 'object')
module.exports = factory(require("react"));
else if(typeof exports === 'object')
exports["zent-pagination"] = factory(require("react"));
else
root["zent-pagination"] = factory(root["React"]);
})(this, function(__WEBPACK_EXTERNAL_MODULE_2__) {
return /******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId])
/******/ return installedModules[moduleId].exports;
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ exports: {},
/******/ id: moduleId,
/******/ loaded: false
/******/ };
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/ // Flag the module as loaded
/******/ module.loaded = true;
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/ // Load entry module and return exports
/******/ return __webpack_require__(0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ function(module, exports, __webpack_require__) {
module.exports = __webpack_require__(1);
/***/ },
/* 1 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
exports['default'] = undefined;
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 _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 _class, _temp2;
var _react = __webpack_require__(2);
var _react2 = _interopRequireDefault(_react);
var _CorePagination = __webpack_require__(3);
var _CorePagination2 = _interopRequireDefault(_CorePagination);
var _Prefix = __webpack_require__(7);
var _Prefix2 = _interopRequireDefault(_Prefix);
var _isEqual = __webpack_require__(158);
var _isEqual2 = _interopRequireDefault(_isEqual);
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; }
var number = _react.PropTypes.number,
func = _react.PropTypes.func,
string = _react.PropTypes.string,
oneOfType = _react.PropTypes.oneOfType;
var Pagination = (_temp2 = _class = function (_Component) {
_inherits(Pagination, _Component);
function Pagination() {
var _ref;
var _temp, _this, _ret;
_classCallCheck(this, Pagination);
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Pagination.__proto__ || Object.getPrototypeOf(Pagination)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
currentPageSize: _this.getCurrentPageSize(_this.parsePageSize(_this.props.pageSize))
}, _this.setPageSize = function (num) {
_this.setState({
currentPageSize: parseInt(num, 10)
});
}, _temp), _possibleConstructorReturn(_this, _ret);
}
// 为了能本地动态修改每页个数，得自己缓存pageSize了
_createClass(Pagination, [{
key: 'getCurrentPageSize',
/**
* [getCurrentPageSize description]
* @method getCurrentPageSize
* @param {[Array]} ps [从parsePageSize返回的标准数组]
* @return {[Number]} [返回currentPageSize的数字值]
*/
value: function getCurrentPageSize(ps) {
for (var i = 0, len = ps.length; i < len; i++) {
if (ps[i].isCurrent) {
return ps[i].value;
}
}
throw new Error('pageSize \u6570\u636E\u6709\u9519\u8BEF ' + ps);
}
}, {
key: 'parsePageSize',
value: function parsePageSize(pageSize) {
var ps = void 0;
if (typeof pageSize === 'number') {
ps = [{
value: pageSize,
isCurrent: true
}];
} else {
var hasCurrent = void 0;
ps = pageSize.map(function (item) {
var tmp = void 0;
if (typeof item === 'number') {
tmp = {
value: item
};
} else {
tmp = item;
if (tmp.isCurrent) {
hasCurrent = true;
}
}
return tmp;
});
if (!hasCurrent) {
ps[0].isCurrent = true;
}
}
return ps;
}
}, {
key: 'componentWillReceiveProps',
value: function componentWillReceiveProps(nextProps) {
if (!(0, _isEqual2['default'])(this.props.pageSize, nextProps.pageSize)) {
var pageSize = this.parsePageSize(nextProps.pageSize);
var currentPageSize = this.getCurrentPageSize(pageSize);
this.setState({
currentPageSize: currentPageSize
});
}
}
}, {
key: 'render',
value: function render() {
// 如果传入的current小于1则进行修改
var _props = this.props,
totalItem = _props.totalItem,
current = _props.current,
pageSize = _props.pageSize,
maxPageToShow = _props.maxPageToShow;
pageSize = this.parsePageSize(pageSize);
var currentPageSize = this.state.currentPageSize;
var totalPage = Math.ceil(totalItem / currentPageSize);
current = current > 1 ? current : 1; // 最小值限定
current = current > totalPage ? totalPage : current; // 最大值限定
return _react2['default'].createElement(
'div',
{ className: this.props.prefix + '-pagination ' + this.props.className },
_react2['default'].createElement(_Prefix2['default'], { pageSize: pageSize, currentPageSize: currentPageSize, totalItem: totalItem, setPageSize: this.setPageSize }),
totalPage > 1 && _react2['default'].createElement(_CorePagination2['default'], { maxPageToShow: maxPageToShow, current: current, total: totalPage, onChange: this.props.onChange || function () {} })
);
}
}]);
return Pagination;
}(_react.Component), _class.propTypes = {
className: string,
prefix: string,
current: number,
totalItem: number,
maxPageToShow: oneOfType([number, null]),
pageSize: function pageSize(conf) {
var pageSize = conf.pageSize;
if (typeof pageSize === 'number') {
if (pageSize < 0) {
return new Error('pageSize必须大等于0');
}
} else if (Array.isArray(pageSize)) {
var isAllNumber = void 0;
if (pageSize.length === 0) {
return new Error('pageSize的长度必须大于0');
}
isAllNumber = pageSize.every(function (item) {
return typeof item === 'number' || (typeof item === 'undefined' ? 'undefined' : _typeof(item)) === 'object';
});
if (!isAllNumber) {
return new Error('pageSize每一项必须是数字或对象');
}
} else {
return new Error('pageSize只能是数字或数组');
}
},
onChange: func
}, _class.defaultProps = {
prefix: 'zent',
pageSize: 10,
className: ''
}, _temp2);
exports['default'] = Pagination;
module.exports = exports['default'];
/***/ },
/* 2 */
/***/ function(module, exports) {
module.exports = __WEBPACK_EXTERNAL_MODULE_2__;
/***/ },
/* 3 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _react = __webpack_require__(2);
var _react2 = _interopRequireDefault(_react);
var _parser = __webpack_require__(4);
var _parser2 = _interopRequireDefault(_parser);
var _Pager = __webpack_require__(5);
var _Pager2 = _interopRequireDefault(_Pager);
var _Jump = __webpack_require__(6);
var _Jump2 = _interopRequireDefault(_Jump);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
var _React$PropTypes = _react2['default'].PropTypes,
number = _React$PropTypes.number,
func = _React$PropTypes.func;
var CorePagination = _react2['default'].createClass({
displayName: 'CorePagination',
propTypes: {
current: number,
total: number,
onChange: func
},
renderPager: function renderPager(item, index) {
if (!item) {
return null;
}
if (item.type === 'input') {
return _react2['default'].createElement(_Jump2['default'], {
key: index,
content: item.content,
total: item.total,
onChange: this.props.onChange
});
}
return _react2['default'].createElement(_Pager2['default'], {
key: index,
content: item.content,
current: item.current,
target: item.target,
type: item.type,
onChange: this.props.onChange
});
},
render: function render() {
var self = this;
var _props = this.props,
current = _props.current,
total = _props.total,
maxPageToShow = _props.maxPageToShow;
if (maxPageToShow && maxPageToShow > 0) {
total = Math.min(total, maxPageToShow);
}
var pages = _parser2['default'].getPages({
current: current,
total: total
});
return _react2['default'].createElement(
'div',
{ className: 'pagination-list' },
pages.map(function (item, index) {
return self.renderPager(item, index);
})
);
}
});
exports['default'] = CorePagination;
module.exports = exports['default'];
/***/ },
/* 4 */
/***/ function(module, exports) {
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
// 是否显示省略号的界线
var OMINIBOUNDARY = 5;
// 是否显示多个邻居的界线
var parser = {
getPrev: function getPrev(conf) {
return {
content: '❮',
target: conf.current === 1 ? null : conf.current - 1
};
},
getNext: function getNext(conf) {
return {
content: '❯',
target: conf.current === conf.total ? null : conf.current + 1
};
},
/**
* @param type {String} ['prev', 'post']
*/
getOmni: function getOmni(conf, type) {
var hasResult = false;
var count = 3;
var boundary = Math.floor(count / 2);
// 只有当总数大于
if (conf.total > OMINIBOUNDARY) {
if (type === 'prev') {
hasResult = conf.current - boundary > 2;
} else {
hasResult = conf.current + boundary < conf.total - 1;
}
}
return hasResult ? { content: '...', type: 'omni' } : null;
},
/**
* @param index {Number}
*/
getNumber: function getNumber(conf, index) {
var res = void 0;
res = {
content: index + ' ',
target: index
};
if (conf.current === index) {
res.current = true;
}
return res;
},
/**
* @param
*/
getJump: function getJump(conf) {
if (conf.total > OMINIBOUNDARY) {
return {
content: conf.current + ' ',
total: conf.total,
type: 'input'
};
}
return null;
},
/**
* 获取分页的完整数据支持
* @param conf {Object} 分页需要的对象
* @return pages {Array} 分页数据的数组
*/
getPages: function getPages(conf) {
var pages = [];
// 如果是10页以上，展示4个邻居，否则2个邻居
var count = 3;
var boundary = Math.floor(count / 2);
var min = void 0;
var max = void 0;
var start = 0;
var end = void 0;
pages.push(this.getPrev(conf));
pages.push(this.getNumber(conf, 1));
pages.push(this.getOmni(conf, 'prev'));
/**
* START FOR
* 循环遍历输出当前页及前后页
*/
// 如果页数在5个以内，则全部显示
if (conf.total <= OMINIBOUNDARY) {
min = 1;
max = conf.total;
// 否则显示省略号和部分页数
} else {
min = Math.max(1, conf.current - boundary);
max = Math.min(conf.current + boundary, conf.total);
if (conf.current <= boundary) {
min = 1;
max = count;
} else if (conf.current > conf.total - boundary) {
min = conf.total - count + 1;
max = conf.total;
}
}
start = min;
end = max;
while (start <= end) {
if (start > 1 && start < conf.total) {
pages.push(this.getNumber(conf, start));
}
start++;
}
/**
* END FOR
* 循环遍历输出当前页及前后页
*/
pages.push(this.getOmni(conf, 'post'));
// 当最大页大于1时，才创建最大页
if (conf.total > 1) {
pages.push(this.getNumber(conf, conf.total));
}
pages.push(this.getNext(conf));
pages.push(this.getJump(conf));
return pages;
}
};
exports['default'] = parser;
module.exports = exports['default'];
/***/ },
/* 5 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _react = __webpack_require__(2);
var _react2 = _interopRequireDefault(_react);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
var _React$PropTypes = _react2['default'].PropTypes,
string = _React$PropTypes.string,
number = _React$PropTypes.number,
func = _React$PropTypes.func,
bool = _React$PropTypes.bool;
var Pager = _react2['default'].createClass({
displayName: 'Pager',
propTypes: {
content: string,
current: bool,
onClick: func,
target: number
},
getInitialState: function getInitialState() {
return {
pageLabel: this.props.content
};
},
componentWillReceiveProps: function componentWillReceiveProps(nextProps) {
this.setState({
pageLabel: nextProps.content
});
},
onClick: function onClick() {
// 有目标，且不是当前页的时候
if (this.props.target && !this.props.current) {
this.props.onChange(this.props.target);
}
},
render: function render() {
var className = 'pager';
if (this.props.current) {
className += ' pager--current';
}
if (this.props.type === 'omni') {
className += ' pager--omni';
} else {
if (!this.props.target) {
className += ' pager--disabled';
}
}
return _react2['default'].createElement(
'li',
{
className: className,
onClick: this.onClick },
this.props.content
);
}
});
exports['default'] = Pager;
module.exports = exports['default'];
/***/ },
/* 6 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _react = __webpack_require__(2);
var _react2 = _interopRequireDefault(_react);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
var Jump = _react2['default'].createClass({
displayName: 'Jump',
getInitialState: function getInitialState() {
return {
pageLabel: this.props.content.trim()
};
},
componentWillReceiveProps: function componentWillReceiveProps(nextProps) {
this.setState({
pageLabel: nextProps.content.trim()
});
},
onKeyUp: function onKeyUp(e) {
if (e.key !== 'Enter') return;
var value = e.target.value.trim();
var pattern = /^\d+$/g;
if (pattern.test(value)) {
if (value <= 0) {
value = 0;
}
if (value > this.props.total) {
value = this.props.total;
}
this.props.onChange(parseInt(value, 10));
}
},
onChange: function onChange(e) {
this.setState({
pageLabel: e.target.value.trim()
});
},
render: function render() {
return _react2['default'].createElement(
'li',
{ className: 'pager pager--jump' },
_react2['default'].createElement('input', { className: 'pager__input', value: this.state.pageLabel, onKeyUp: this.onKeyUp, onChange: this.onChange }),
_react2['default'].createElement(
'span',
{ className: 'pager__suffix' },
'/\u5171',
this.props.total,
'\u9875'
)
);
}
});
exports['default'] = Jump;
module.exports = exports['default'];
/***/ },
/* 7 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _react = __webpack_require__(2);
var _react2 = _interopRequireDefault(_react);
var _zentSelect = __webpack_require__(8);
var _zentSelect2 = _interopRequireDefault(_zentSelect);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
var _React$PropTypes = _react2['default'].PropTypes,
number = _React$PropTypes.number,
array = _React$PropTypes.array,
oneOfType = _React$PropTypes.oneOfType,
func = _React$PropTypes.func;
var Option = _zentSelect2['default'].Option;
var Prefix = _react2['default'].createClass({
displayName: 'Prefix',
propTypes: {
totalItem: number,
pageSize: oneOfType([number, array]),
setPageSize: func
},
changePageSize: function changePageSize(e, data) {
var setPageSize = this.props.setPageSize;
setPageSize(data.text);
},
renderSelect: function renderSelect() {
var _props = this.props,
pageSize = _props.pageSize,
currentPageSize = _props.currentPageSize;
pageSize = pageSize.map(function (item) {
return '' + item.value;
});
return _react2['default'].createElement(
'span',
{ className: 'each' },
'\uFF0C\u6BCF\u9875',
_react2['default'].createElement(
_zentSelect2['default'],
{ value: currentPageSize, onChange: this.changePageSize },
pageSize.map(function (item, i) {
return _react2['default'].createElement(
Option,
{ key: i, value: item },
item
);
})
),
'\u6761'
);
},
render: function render() {
var _props2 = this.props,
pageSize = _props2.pageSize,
totalItem = _props2.totalItem,
currentPageSize = _props2.currentPageSize;
var isNeedSelect = false;
if (Array.isArray(pageSize) && pageSize.length > 1) {
isNeedSelect = true;
}
return _react2['default'].createElement(
'span',
{ className: 'zent-pagination__info' },
_react2['default'].createElement(
'span',
{ className: 'total' },
'\u5171',
totalItem,
'\u6761'
),
!isNeedSelect && _react2['default'].createElement(
'span',
{ className: 'each' },
'\uFF0C\u6BCF\u9875',
currentPageSize,
'\u6761'
),
isNeedSelect && this.renderSelect()
);
}
});
exports['default'] = Prefix;
module.exports = exports['default'];
/***/ },
/* 8 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.TagsTrigger = exports.InputTrigger = exports.SelectTrigger = exports.Option = undefined;
var _Select = __webpack_require__(9);
var _Select2 = _interopRequireDefault(_Select);
var _Option = __webpack_require__(174);
var _Option2 = _interopRequireDefault(_Option);
var _SelectTrigger = __webpack_require__(177);
var _SelectTrigger2 = _interopRequireDefault(_SelectTrigger);
var _InputTrigger = __webpack_require__(178);
var _InputTrigger2 = _interopRequireDefault(_InputTrigger);
var _TagsTrigger = __webpack_require__(179);
var _TagsTrigger2 = _interopRequireDefault(_TagsTrigger);
function _interopRequireDefault(obj) {
return obj && obj.__esModule ? obj : { 'default': obj };
}
_Select2['default'].Option = _Option2['default']; /**
* Index
*/
_Select2['default'].SelectTrigger = _SelectTrigger2['default'];
_Select2['default'].InputTrigger = _InputTrigger2['default'];
_Select2['default'].TagsTrigger = _TagsTrigger2['default'];
exports.Option = _Option2['default'];
exports.SelectTrigger = _SelectTrigger2['default'];
exports.InputTrigger = _InputTrigger2['default'];
exports.TagsTrigger = _TagsTrigger2['default'];
exports['default'] = _Select2['default'];
/***/ },
/* 9 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
var _typeof2 = 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; };
Object.defineProperty(exports, "__esModule", {
value: true
});
var _typeof = typeof Symbol === "function" && _typeof2(Symbol.iterator) === "symbol" ? function (obj) {
return typeof obj === "undefined" ? "undefined" : _typeof2(obj);
} : function (obj) {
return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj === "undefined" ? "undefined" : _typeof2(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 = __webpack_require__(2);
var _react2 = _interopRequireDefault(_react);
var _assign = __webpack_require__(10);
var _assign2 = _interopRequireDefault(_assign);
var _omit = __webpack_require__(62);
var _omit2 = _interopRequireDefault(_omit);
var _cloneDeep = __webpack_require__(156);
var _cloneDeep2 = _interopRequireDefault(_cloneDeep);
var _isEqual = __webpack_require__(158);
var _isEqual2 = _interopRequireDefault(_isEqual);
var _isArray = __webpack_require__(170);
var _isArray2 = _interopRequireDefault(_isArray);
var _Index = __webpack_require__(171);
var _Index2 = _interopRequireDefault(_Index);
var _Popup = __webpack_require__(172);
var _Popup2 = _interopRequireDefault(_Popup);
var _SimpleTrigger = __webpack_require__(176);
var _SimpleTrigger2 = _interopRequireDefault(_SimpleTrigger);
var _SelectTrigger = __webpack_require__(177);
var _SelectTrigger2 = _interopRequireDefault(_SelectTrigger);
var _InputTrigger = __webpack_require__(178);
var _InputTrigger2 = _interopRequireDefault(_InputTrigger);
var _TagsTrigger = __webpack_require__(179);
var _TagsTrigger2 = _interopRequireDefault(_TagsTrigger);
var _constants = __webpack_require__(175);
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 === "undefined" ? "undefined" : _typeof2(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 === "undefined" ? "undefined" : _typeof2(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'];
/***/ },
/* 10 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
/* DO NOT EDIT!! Auto genetated wrapper for lodash/assign. */
var assign = __webpack_require__(11);
module.exports = assign;
/***/ },
/* 11 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
var assignValue = __webpack_require__(12),
copyObject = __webpack_require__(30),
createAssigner = __webpack_require__(31),
isArrayLike = __webpack_require__(41),
isPrototype = __webpack_require__(44),
keys = __webpack_require__(45);
/** Used for built-in method references. */
var objectProto = Object.prototype;
/** Used to check objects for own properties. */
var hasOwnProperty = objectProto.hasOwnProperty;
/**
* Assigns own enumerable string keyed properties of source objects to the
* destination object. Source objects are applied from left to right.
* Subsequent sources overwrite property assignments of previous sources.
*
* **Note:** This method mutates `object` and is loosely based on
* [`Object.assign`](https://mdn.io/Object/assign).
*
* @static
* @memberOf _
* @since 0.10.0
* @category Object
* @param {Object} object The destination object.
* @param {...Object} [sources] The source objects.
* @returns {Object} Returns `object`.
* @see _.assignIn
* @example
*
* function Foo() {
* this.a = 1;
* }
*
* function Bar() {
* this.c = 3;
* }
*
* Foo.prototype.b = 2;
* Bar.prototype.d = 4;
*
* _.assign({ 'a': 0 }, new Foo, new Bar);
* // => { 'a': 1, 'c': 3 }
*/
var assign = createAssigner(function (object, source) {
if (isPrototype(source) || isArrayLike(source)) {
copyObject(source, keys(source), object);
return;
}
for (var key in source) {
if (hasOwnProperty.call(source, key)) {
assignValue(object, key, source[key]);
}
}
});
module.exports = assign;
/***/ },
/* 12 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
var baseAssignValue = __webpack_require__(13),
eq = __webpack_require__(29);
/** Used for built-in method references. */
var objectProto = Object.prototype;
/** Used to check objects for own properties. */
var hasOwnProperty = objectProto.hasOwnProperty;
/**
* Assigns `value` to `key` of `object` if the existing value is not equivalent
* using [`SameValueZero`](http://ecma-international.org/ecma-262/7.0/#sec-samevaluezero)
* for equality comparisons.
*
* @private
* @param {Object} object The object to modify.
* @param {string} key The key of the property to assign.
* @param {*} value The value to assign.
*/
function assignValue(object, key, value) {
var objValue = object[key];
if (!(hasOwnProperty.call(object, key) && eq(objValue, value)) || value === undefined && !(key in object)) {
baseAssignValue(object, key, value);
}
}
module.exports = assignValue;
/***/ },
/* 13 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
var defineProperty = __webpack_require__(14);
/**
* The base implementation of `assignValue` and `assignMergeValue` without
* value checks.
*
* @private
* @param {Object} object The object to modify.
* @param {string} key The key of the property to assign.
* @param {*} value The value to assign.
*/
function baseAssignValue(object, key, value) {
if (key == '__proto__' && defineProperty) {
defineProperty(object, key, {
'configurable': true,
'enumerable': true,
'value': value,
'writable': true
});
} else {
object[key] = value;
}
}
module.exports = baseAssignValue;
/***/ },
/* 14 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
var getNative = __webpack_require__(15);
var defineProperty = function () {
try {
var func = getNative(Object, 'defineProperty');
func({}, '', {});
return func;
} catch (e) {}
}();
module.exports = defineProperty;
/***/ },
/* 15 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
var baseIsNative = __webpack_require__(16),
getValue = __webpack_require__(28);
/**
* Gets the native function at `key` of `object`.
*
* @private
* @param {Object} object The object to query.
* @param {string} key The key of the method to get.
* @returns {*} Returns the function if it's native, else `undefined`.
*/
function getNative(object, key) {
var value = getValue(object, key);
return baseIsNative(value) ? value : undefined;
}
module.exports = getNative;
/***/ },
/* 16 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
var isFunction = __webpack_require__(17),
isMasked = __webpack_require__(25),
isObject = __webpack_require__(24),
toSource = __webpack_require__(27);
/**
* Used to match `RegExp`
* [syntax characters](http://ecma-international.org/ecma-262/7.0/#sec-patterns).
*/
var reRegExpChar = /[\\^$.*+?()[\]{}|]/g;
/** Used to detect host constructors (Safari). */
var reIsHostCtor = /^\[object .+?Constructor\]$/;
/** Used for built-in method references. */
var funcProto = Function.prototype,
objectProto = Object.prototype;
/** Used to resolve the decompiled source of functions. */
var funcToString = funcProto.toString;
/** Used to check objects for own properties. */
var hasOwnProperty = objectProto.hasOwnProperty;
/** Used to detect if a method is native. */
var reIsNative = RegExp('^' + funcToString.call(hasOwnProperty).replace(reRegExpChar, '\\$&').replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g, '$1.*?') + '$');
/**
* The base implementation of `_.isNative` without bad shim checks.
*
* @private
* @param {*} value The value to check.
* @returns {boolean} Returns `true` if `value` is a native function,
* else `false`.
*/
function baseIsNative(value) {
if (!isObject(value) || isMasked(value)) {
return false;
}
var pattern = isFunction(value) ? reIsNative : reIsHostCtor;
return pattern.test(toSource(value));
}
module.exports = baseIsNative;
/***/ },
/* 17 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
var baseGetTag = __webpack_require__(18),
isObject = __webpack_require__(24);
/** `Object#toString` result references. */
var asyncTag = '[object AsyncFunction]',
funcTag = '[object Function]',
genTag = '[object GeneratorFunction]',
proxyTag = '[object Proxy]';
/**
* Checks if `value` is classified as a `Function` object.
*
* @static
* @memberOf _
* @since 0.1.0
* @category Lang
* @param {*} value The value to check.
* @returns {boolean} Returns `true` if `value` is a function, else `false`.
* @example
*
* _.isFunction(_);
* // => true
*
* _.isFunction(/abc/);
* // => false
*/
function isFunction(value) {
if (!isObject(value)) {
return false;
}
// The use of `Object#toString` avoids issues with the `typeof` operator
// in Safari 9 which returns 'object' for typed arrays and other constructors.
var tag = baseGetTag(value);
return tag == funcTag || tag == genTag || tag == asyncTag || tag == proxyTag;
}
module.exports = isFunction;
/***/ },
/* 18 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
var _Symbol = __webpack_require__(19),
getRawTag = __webpack_require__(22),
objectToString = __webpack_require__(23);
/** `Object#toString` result references. */
var nullTag = '[object Null]',
undefinedTag = '[object Undefined]';
/** Built-in value references. */
var symToStringTag = _Symbol ? _Symbol.toStringTag : undefined;
/**
* The base implementation of `getTag` without fallbacks for buggy environments.
*
* @private
* @param {*} value The value to query.
* @returns {string} Returns the `toStringTag`.
*/
function baseGetTag(value) {
if (value == null) {
return value === undefined ? undefinedTag : nullTag;
}
return symToStringTag && symToStringTag in Object(value) ? getRawTag(value) : objectToString(value);
}
module.exports = baseGetTag;
/***/ },
/* 19 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
var root = __webpack_require__(20);
/** Built-in value references. */
var _Symbol = root.Symbol;
module.exports = _Symbol;
/***/ },
/* 20 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
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 freeGlobal = __webpack_require__(21);
/** Detect free variable `self`. */
var freeSelf = (typeof self === 'undefined' ? 'undefined' : _typeof(self)) == 'object' && self && self.Object === Object && self;
/** Used as a reference to the global object. */
var root = freeGlobal || freeSelf || Function('return this')();
module.exports = root;
/***/ },
/* 21 */
/***/ function(module, exports) {
/* WEBPACK VAR INJECTION */(function(global) {'use strict';
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; };
/** Detect free variable `global` from Node.js. */
var freeGlobal = (typeof global === 'undefined' ? 'undefined' : _typeof(global)) == 'object' && global && global.Object === Object && global;
module.exports = freeGlobal;
/* WEBPACK VAR INJECTION */}.call(exports, (function() { return this; }())))
/***/ },
/* 22 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
var _Symbol = __webpack_require__(19);
/** Used for built-in method references. */
var objectProto = Object.prototype;
/** Used to check objects for own properties. */
var hasOwnProperty = objectProto.hasOwnProperty;
/**
* Used to resolve the
* [`toStringTag`](http://ecma-international.org/ecma-262/7.0/#sec-object.prototype.tostring)
* of values.
*/
var nativeObjectToString = objectProto.toString;
/** Built-in value references. */
var symToStringTag = _Symbol ? _Symbol.toStringTag : undefined;
/**
* A specialized version of `baseGetTag` which ignores `Symbol.toStringTag` values.
*
* @private
* @param {*} value The value to query.
* @returns {string} Returns the raw `toStringTag`.
*/
function getRawTag(value) {
var isOwn = hasOwnProperty.call(value, symToStringTag),
tag = value[symToStringTag];
try {
value[symToStringTag] = undefined;
var unmasked = true;
} catch (e) {}
var result = nativeObjectToString.call(value);
if (unmasked) {
if (isOwn) {
value[symToStringTag] = tag;
} else {
delete value[symToStringTag];
}
}
return result;
}
module.exports = getRawTag;
/***/ },
/* 23 */
/***/ function(module, exports) {
"use strict";
/** Used for built-in method references. */
var objectProto = Object.prototype;
/**
* Used to resolve the
* [`toStringTag`](http://ecma-international.org/ecma-262/7.0/#sec-object.prototype.tostring)
* of values.
*/
var nativeObjectToString = objectProto.toString;
/**
* Converts `value` to a string using `Object.prototype.toString`.
*
* @private
* @param {*} value The value to convert.
* @returns {string} Returns the converted string.
*/
function objectToString(value) {
return nativeObjectToString.call(value);
}
module.exports = objectToString;
/***/ },
/* 24 */
/***/ function(module, exports) {
'use strict';
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; };
/**
* Checks if `value` is the
* [language type](http://www.ecma-international.org/ecma-262/7.0/#sec-ecmascript-language-types)
* of `Object`. (e.g. arrays, functions, objects, regexes, `new Number(0)`, and `new String('')`)
*
* @static
* @memberOf _
* @since 0.1.0
* @category Lang
* @param {*} value The value to check.
* @returns {boolean} Returns `true` if `value` is an object, else `false`.
* @example
*
* _.isObject({});
* // => true
*
* _.isObject([1, 2, 3]);
* // => true
*
* _.isObject(_.noop);
* // => true
*
* _.isObject(null);
* // => false
*/
function