UNPKG

zent

Version:

一套前端设计语言和基于React的实现

1,745 lines (1,415 loc) 216 kB
(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