@beisen/paging
Version:
configurable page component
1,443 lines (1,227 loc) • 825 kB
JavaScript
(function webpackUniversalModuleDefinition(root, factory) {
if(typeof exports === 'object' && typeof module === 'object')
module.exports = factory();
else if(typeof define === 'function' && define.amd)
define([], factory);
else if(typeof exports === 'object')
exports["index"] = factory();
else
root["index"] = factory();
})(this, function() {
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__) {
__webpack_require__(1);
module.exports = __webpack_require__(1);
/***/ }),
/* 1 */
/***/ (function(module, exports, __webpack_require__) {
'use strict';
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 _react = __webpack_require__(2);
var _react2 = _interopRequireDefault(_react);
var _commonFunc = __webpack_require__(159);
var _dropdownButton = __webpack_require__(160);
var _dropdownButton2 = _interopRequireDefault(_dropdownButton);
__webpack_require__(174);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return 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) : _defaults(subClass, superClass); } /* eslint-disable */
var defaultTranslation = {
pieceOrPage: '{0}条/页',
jumpTo: '跳转至',
countPageTotal: '共{0}页'
};
var Paging = function (_Component) {
_inherits(Paging, _Component);
function Paging(props) {
_classCallCheck(this, Paging);
var _this = _possibleConstructorReturn(this, _Component.call(this, props));
_this.handleOver = function (e) {
console.log(e);
switch (e) {
case 'icon_ne':
if (_this.icon_next == 'pc-sys-Forward-nomal-svg') {
_this.icon_next = 'pc-sys-Forward-active-svg';
_this.setState({});
}
break;
case 'icon_pr':
console.log(_this.icon_prev);
if (_this.icon_prev == 'pc-sys-backward-nomal-svg') {
_this.icon_prev = 'pc-sys-backward-active-svg';
_this.setState({});
}
break;
}
};
_this.handleLeave = function (e) {
console.log(e);
switch (e) {
case 'icon_ne':
if (_this.icon_next == 'pc-sys-Forward-active-svg') {
_this.icon_next = 'pc-sys-Forward-nomal-svg';
_this.setState({});
}
break;
case 'icon_pr':
if (_this.icon_prev == 'pc-sys-backward-active-svg') {
_this.icon_prev = 'pc-sys-backward-nomal-svg';
_this.setState({});
}
break;
}
};
_this.state = {
currentPage: props.currentPage || 1,
isFocus: false,
inputValue: '',
capacity: props.capacity,
visiblePages: 7
};
_this.icon_next = _this.state.currentPage === _this.props.total ? "pc-sys-Forward-disabled-svg" : "pc-sys-Forward-nomal-svg";
_this.icon_prev = _this.state.currentPage === 1 ? "pc-sys-backward-disabled-svg" : "pc-sys-backward-nomal-svg";
_this.translation = _extends({}, defaultTranslation, props.translation);
_this.pageClick = _this.pageClick.bind(_this);
_this.onChange = _this.onChange.bind(_this);
_this.addClass = _this.addClass.bind(_this);
_this.removeClass = _this.removeClass.bind(_this);
_this.ulListStyle = _this.ulListStyle.bind(_this);
_this.renderPageItems = _this.renderPageItems.bind(_this);
_this.pageContainerStyle = _this.pageContainerStyle.bind(_this);
_this.handleKeyUp = _this.handleKeyUp.bind(_this);
return _this;
}
Paging.prototype.componentDidUpdate = function componentDidUpdate() {
if (!this.props.hidden) {
var fawidth = this.refs.pagref.parentElement.clientWidth;
var pawidth = this.refs.pagref.clientWidth;
var totle = document.getElementsByClassName('total').length > 0 ? document.getElementsByClassName('total')[0].clientWidth : 0;
var allchose = document.getElementsByClassName('checkAllAcrossPage').length > 0 ? document.getElementsByClassName('checkAllAcrossPage')[0].clientWidth : 0;
if (fawidth - (totle + allchose + 30) < pawidth) {
switch (this.state.visiblePages) {
case 7:
this.setState({ visiblePages: 5 });
break;
case 5:
this.setState({ visiblePages: 3 });
break;
case 3:
break;
}
}
}
};
// 数据校验
Paging.prototype.verify = function verify(props) {
var total = props.total,
currentPage = props.currentPage;
try {
if (total < 2) {
throw {
name: 'TypeError',
message: 'error total'
};
}
} catch (err) {
console.error(err);
}
try {
if (currentPage < 1 || currentPage > total) {
throw {
name: 'TypeError',
message: 'error currentPage'
};
}
} catch (err) {
console.error(err);
}
// 因为新的需求需要有visiblePages少于5的情况这里把这部分的验证取消
// try {
// if (visiblePages < 5 || visiblePages % 2 === 0) {
// throw {
// name: 'TypeError',
// message: 'error visiblePages'
// }
// }
// } catch (err) {
// console.error(err);
// }
};
// 渲染item 除开头和和结尾
Paging.prototype.renderPageItems = function renderPageItems() {
var total = this.props.total;
var visiblePages = this.state.visiblePages;
var currentPage = this.state.currentPage;
var pageItems = [];
// let tempClassName;
// wuzhe----四位数时，添加类，改变宽度
// for (let i = 2; i < total; i++) {
// let tempClassName = currentPage === i ? 'active' : '';
// if (i >= 1000) {
// pageItems.push(<li key={i} className={tempClassName}><a href="javascript:void(0)" data-index={i} className="page_large">{i}</a></li>)
// } else {
// pageItems.push(<li key={i} className={tempClassName}><a href="javascript:void(0)" data-index={i}>{i}</a></li>)
// }
// }
//优化渲染，防止出几万个Dom节点
var showCount = (visiblePages - 2) / 2;
if (currentPage >= 5 && total - currentPage >= 3 && total > 99) {
for (var i = currentPage - Math.floor(showCount); i < currentPage + Math.ceil(showCount); i++) {
this.getPageItem(pageItems, currentPage, i);
}
} else if (total - currentPage < 5 && total > 99) {
var fir = total - currentPage < 5 ? total - 5 : currentPage - 1;
for (var _i = fir; _i < total + 1; _i++) {
this.getPageItem(pageItems, currentPage, _i);
}
} else {
var all = total > 100 ? 100 : total;
for (var _i2 = 2; _i2 < all + 1; _i2++) {
this.getPageItem(pageItems, currentPage, _i2, total);
}
}
return pageItems;
};
Paging.prototype.getPageItem = function getPageItem(pageItems, currentPage, i, total) {
var tempClassName = currentPage === i ? 'active' : '';
if (i >= 1000) {
var width = 34 + ((i + "").length - 4) * 4;
pageItems.push(_react2.default.createElement(
'li',
{ key: i, className: tempClassName },
_react2.default.createElement(
'a',
{ href: 'javascript:void(0)', 'data-index': i, style: { "padding": "3px", "width": width + "px" } },
i
)
));
} else {
pageItems.push(_react2.default.createElement(
'li',
{ key: i, className: tempClassName },
_react2.default.createElement(
'a',
{ href: 'javascript:void(0)', 'data-index': i },
i
)
));
}
};
// 渲染样式
Paging.prototype.pageContainerStyle = function pageContainerStyle() {
var total = this.props.total;
var _state = this.state,
currentPage = _state.currentPage,
visiblePages = _state.visiblePages;
if (total <= visiblePages) {
return;
}
var styles = {},
// num = visiblePages - 4;
num = visiblePages;
var tempEll = this.showEllipsis();
// num = tempEll.isEllPrev ? num : num+1;
// num = tempEll.isEllNext ? num : num+1;
styles['overflow'] = 'hidden';
if (num == 1) {
if (currentPage >= 1000) {
styles['width'] = num * (33 + ((currentPage + "").length - 4) * 4) + 1;
} else {
styles['width'] = num * 26 + 1;
}
return styles;
};
// wuzhe----省略号在中间
if (tempEll.isEllPrev && tempEll.isEllNext) {
num = visiblePages - 2;
var maxNum = currentPage + (num - 1) / 2;
var minNum = currentPage - (num - 1) / 2;
if (maxNum < 1000) {
styles['width'] = num * 26 + num + 1;
} else if (minNum >= 1000) {
styles['width'] = num * (34 + ((currentPage + "").length - 4) * 4) + num + 1;
} else {
var largeNum = maxNum - 1000 + 1;
styles['width'] = largeNum * 34 + (num - largeNum) * 26 + num;
}
return styles;
}
// wuzhe----省略号在左边
if (tempEll.isEllPrev) {
num = visiblePages - 1;
if (total > 1000) {
var _minNum = total - num;
if (_minNum >= 1000) {
styles['width'] = num * (34 + ((currentPage + "").length - 4) * 4) + num + 1;
} else {
var _largeNum = total - 1000;
styles['width'] = _largeNum * 33 + (num - _largeNum) * 26 + num - 1 + _largeNum - 2;
};
} else {
styles['width'] = num * 26 + num + 1;
}
return styles;
}
// wuzhe----省略号在右边
if (tempEll.isEllNext) {
num = visiblePages - 1;
styles['width'] = num * 26 + num + 1;
return styles;
}
};
// ul 样式
Paging.prototype.ulListStyle = function ulListStyle() {
var total = this.props.total;
var visiblePages = this.state.visiblePages;
var preWidth = (1000 - 2) * 26;
if (total <= visiblePages) {
return;
}
var styles = {};
// wuzhe----
if (total > 1000) {
styles['width'] = (total - 1000) * 33 + preWidth + total - 1;
styles['marginRight'] = this.transformUl();
} else {
//去除最后一页,此处total-2，变为 total -1
styles['width'] = (total - 1) * 26 + total;
styles['marginRight'] = this.transformUl();
}
if (styles['marginRight']) {
styles['overflow'] = 'initial';
}
return styles;
};
// ul move
Paging.prototype.transformUl = function transformUl() {
var total = this.props.total;
var visiblePages = this.state.visiblePages;
var currentPage = this.state.currentPage;
if (total <= visiblePages) {
return;
}
var tempEll = this.showEllipsis();
var translateX = void 0,
largeNum = void 0;
// let num = visiblePages - 4;
var num = visiblePages;
// num = tempEll.isEllPrev ? num-1 : num;
// num = tempEll.isEllNext ? num-1 : num;
if (tempEll.isEllPrev && tempEll.isEllNext) {
//去除最后一页,此处total+2 变为 total +3
var count = total + 3 - (visiblePages + 1) / 2 - currentPage;
// wuzhe----
var moveNum = total - count;
if (total <= 1000) {
translateX = -((count - 1) * 26 + count) + 1 + 'px';
} else if (moveNum >= 1000) {
translateX = -(33 * count + count + 1) + 'px';
} else {
largeNum = total - 1000;
translateX = -(33 * largeNum + largeNum + 1) - (count - largeNum) * 34 + 'px';
}
return translateX;
}
if (tempEll.isEllPrev) {
var middle = (visiblePages + 1) / 2;
if (currentPage > total - middle - 2) {
return 0;
}
}
var preWidth = (1000 - 2) * 26;
if (tempEll.isEllNext) {
//去除最后一页,此处total-2 变为 total -1
// let count = (total - 1) - (visiblePages - 3);
var _count = total - 2 - (visiblePages - 1);
if (total > 1000) {
translateX = -((total - 1000) * 33 + preWidth + total - 1 - (num * 26 + num)) + 'px';
} else {
translateX = ((_count + 1) * 26 + _count + 1) * -1 + 'px';
}
return translateX;
}
};
// 是否显示省略号
Paging.prototype.showEllipsis = function showEllipsis() {
var total = this.props.total;
var visiblePages = this.state.visiblePages;
var currentPage = this.state.currentPage;
var obj = {
isEllPrev: false,
isEllNext: false
};
if (total <= visiblePages) {
return obj;
}
var middle = (visiblePages + 1) / 2;
obj.isEllPrev = currentPage > middle ? true : false;
//去除最后一页，此处+1
obj.isEllNext = total - currentPage + 1 >= middle ? true : false;
return obj;
};
Paging.prototype.addClass = function addClass(event) {
event.stopPropagation();
this.setState({
isFocus: true
});
this.props.focusCallBack && this.props.focusCallBack(event);
};
// input blur animation
Paging.prototype.removeClass = function removeClass(event) {
event.stopPropagation();
this.setState({
isFocus: false
});
this.props.blurCallBack && this.props.blurCallBack(event);
};
// input onchange event
Paging.prototype.onChange = function onChange(event) {
this.setState({
inputValue: event.target.value
});
this.props.changeCallBack && this.props.changeCallBack(event);
};
// click
Paging.prototype.pageClick = function pageClick(event) {
if (event.target.className.indexOf('drop-down-btn-title') > -1) return;
if (event.target.className.indexOf('drop-down-btn-svg') > -1) return;
// event.stopPropagation(); // 影响了推屏关闭，暂时注掉，不知道为啥加的
var node = event.target;
if (this.props.total == 1) return;
if (node.tagName == 'DIV' || node.tagName == 'INPUT' || node.tagName == 'UL') return;
if (node.className === 'page-ellipsis') return;
var index = void 0;
if (node.className == 'goAnyWhere') {
index = this.paging_input.value;
if (parseInt(index) >= 1 && parseInt(index) <= this.props.total) {
if (parseInt(index) === this.state.currentPage) return;
this.state.inputValue = '';
} else {
return;
}
} else {
index = node.getAttribute('data-index');
if (parseInt(index) === this.state.currentPage) return;
}
this.state.currentPage = parseInt(index);
this.icon_next = this.state.currentPage === this.props.total ? "pc-sys-Forward-disabled-svg" : "pc-sys-Forward-nomal-svg";
this.icon_prev = this.state.currentPage === 1 ? "pc-sys-backward-disabled-svg" : "pc-sys-backward-nomal-svg";
this.setState(this.state);
this.props.onIndexChange && this.props.onIndexChange(parseInt(index));
};
//zyt
Paging.prototype.handleKeyUp = function handleKeyUp(e) {
var index = this.paging_input.value;
if (e.keyCode == 13 && parseInt(index) >= 1 && parseInt(index) <= this.props.total) {
if (parseInt(index) === this.state.currentPage) return;
this.state.inputValue = '';
} else {
return;
}
this.setState({ currentPage: parseInt(index) });
this.props.onIndexChange && this.props.onIndexChange(parseInt(index));
};
Paging.prototype.dropDownClick = function dropDownClick(val, target, onClick, stateVal) {
target.stopPropagation();
this.state.capacity = parseInt(val.text);
this.setState(this.state);
this.props.onCapacityChange && this.props.onCapacityChange(val.value);
};
Paging.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
if (nextProps.currentPage != this.props.currentPage) {
this.setState({
currentPage: nextProps.currentPage
});
}
};
Paging.prototype.render = function render() {
var _this2 = this;
var _props = this.props,
total = _props.total,
hidden = _props.hidden,
capacity = _props.capacity,
capacityList = _props.capacityList,
_props$isShowDropdown = _props.isShowDropdown,
isShowDropdown = _props$isShowDropdown === undefined ? true : _props$isShowDropdown;
var _state2 = this.state,
currentPage = _state2.currentPage,
inputValue = _state2.inputValue,
isFocus = _state2.isFocus;
if (!hidden) {
// 省略号显示
var tempEll = this.showEllipsis();
var ell_prev_style = tempEll.isEllPrev ? {
display: 'inline-block'
} : {
display: 'none'
};
var ell_next_style = tempEll.isEllNext ? {
display: 'inline-block'
} : {
display: 'none'
};
var start_temp = currentPage === 1 ? 'page_start active' : 'page_start';
var end_temp = currentPage === total ? 'page_end active' : 'page_end';
var end_style = {};
if (total >= 1000) {
end_temp += ' page_large';
if (total >= 10000) {
var width = 34 + ((total + "").length - 4) * 4;
end_style = { "padding": "3px", "width": width + "px" };
}
};
var nextPage = currentPage === total ? total : currentPage + 1;
var prevPage = currentPage === 1 ? 1 : currentPage - 1;
var notAllowed_prev = currentPage === 1 ? ' notAllowed_prev' : '';
var notAllowed_next = currentPage === total ? ' notAllowed_next' : '';
this.icon_prev = currentPage === 1 ? "pc-sys-backward-disabled-svg" : "pc-sys-backward-nomal-svg";
this.icon_next = currentPage === total ? "pc-sys-Forward-disabled-svg" : 'pc-sys-Forward-nomal-svg';
var dropChildren = capacityList && capacityList.map(function (item, index) {
var isFalg = false;
if (capacity == item) isFalg = true;
return {
value: index,
text: (0, _commonFunc.transFormat)(_this2.translation.pieceOrPage, item),
active: false,
isChecked: isFalg
};
});
var autoDirection = true;
var direction = 'right-down';
if (this.props.autoDirection !== undefined && this.props.direction !== undefined) {
autoDirection = this.props.autoDirection;
direction = this.props.direction;
}
var jumpTo = this.props.hasJumpTo ? _react2.default.createElement(
'div',
null,
_react2.default.createElement(
'a',
{ href: 'javascript:void(0)', className: 'goAnyWhere' },
'Go'
),
_react2.default.createElement(
'div',
{ className: "auto-rightinput auto-form-input " + inputClass },
_react2.default.createElement('input', { type: 'text', placeholder: this.translation.jumpTo, ref: function ref(input) {
_this2.paging_input = input;
}, value: inputValue, onClick: function onClick(event) {
return event.stopPropagation();
}, onKeyUp: this.handleKeyUp, onChange: this.onChange, onFocus: this.addClass, onBlur: this.removeClass })
)
) : '';
var dropDownData = {
title: (0, _commonFunc.transFormat)(this.translation.pieceOrPage, capacity),
type: 'text',
bsSize: 'small',
bsStyle: 'weaken',
children: dropChildren || [],
open: false,
iconName: "pc-sys-arrowdown-nomal-svg",
hoverName: "pc-sys-arrowdown-active-svg",
activeName: "pc-sys-arrowdown-active-svg",
direction: direction,
autoDirection: autoDirection,
onClick: this.dropDownClick.bind(this)
};
var inputClass = isFocus ? 'auto-form-input-active' : '';
var totalOne = total == 1 ? '' : _react2.default.createElement(
'a',
{ href: 'javascript:void(0)', className: end_temp, style: end_style, 'data-index': total },
total
);
return _react2.default.createElement(
'div',
{ className: 'paging', onClick: this.pageClick, ref: 'pagref' },
_react2.default.createElement(
'div',
{ className: 'page-next' },
_react2.default.createElement(
'a',
{ className: 'page-ellipsis', style: ell_next_style },
'...'
),
_react2.default.createElement('a', { href: 'javascript:void(0)', onMouseOver: this.handleOver.bind(this, 'icon_ne'), onMouseOut: this.handleLeave.bind(this, 'icon_ne'), style: { "marginLeft": "4px" }, 'data-index': nextPage, className: this.icon_next + notAllowed_next + ' paging-icon paging__btn paging__btn__next' }),
jumpTo
),
_react2.default.createElement(
'div',
{ className: 'page-container' + (total - currentPage < 5 && total > 99 || currentPage >= 5 && total - currentPage >= 3 && total > 99 ? '' : '' + (ell_prev_style.display == 'none' ? ' remove_left_radius' : ' add_left_radius')), style: this.pageContainerStyle() },
_react2.default.createElement(
'ul',
{ style: total > 99 ? {} : this.ulListStyle() },
this.renderPageItems()
)
),
_react2.default.createElement(
'div',
{ className: 'page-content' + ('' + (ell_prev_style.display == 'none' ? '' : ' content-box')) },
_react2.default.createElement(
'a',
{ className: 'page-ellipsis', style: ell_prev_style },
'...'
),
_react2.default.createElement(
'a',
{ href: 'javascript:void(0)', className: start_temp + ('' + (ell_prev_style.display == 'none' && total != 1 ? ' remove_right_border remove_right_radius' : '')), 'data-index': '1' },
'1'
),
_react2.default.createElement('a', { href: 'javascript:void(0)', onMouseOver: this.handleOver.bind(this, 'icon_pr'), onMouseOut: this.handleLeave.bind(this, 'icon_pr'), 'data-index': prevPage, className: this.icon_prev + notAllowed_prev + ' paging-icon paging__btn' }),
isShowDropdown ? _react2.default.createElement(_dropdownButton2.default, dropDownData) : null,
this.props.issum && this.props.issum == true ? _react2.default.createElement(
'span',
{ style: { pointerEvents: "none" }, className: 'pag-sum' },
(0, _commonFunc.transFormat)(this.translation.countPageTotal, total)
) : ''
)
);
} else {
return _react2.default.createElement('div', null);
}
};
return Paging;
}(_react.Component);
module.exports = Paging;
/***/ }),
/* 2 */
/***/ (function(module, exports, __webpack_require__) {
'use strict';
module.exports = __webpack_require__(3);
/***/ }),
/* 3 */
/***/ (function(module, exports, __webpack_require__) {
/**
* Copyright 2013-2015, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*
* @providesModule React
*/
'use strict';
var ReactDOM = __webpack_require__(4);
var ReactDOMServer = __webpack_require__(149);
var ReactIsomorphic = __webpack_require__(153);
var assign = __webpack_require__(40);
var deprecated = __webpack_require__(158);
// `version` will be added here by ReactIsomorphic.
var React = {};
assign(React, ReactIsomorphic);
assign(React, {
// ReactDOM
findDOMNode: deprecated('findDOMNode', 'ReactDOM', 'react-dom', ReactDOM, ReactDOM.findDOMNode),
render: deprecated('render', 'ReactDOM', 'react-dom', ReactDOM, ReactDOM.render),
unmountComponentAtNode: deprecated('unmountComponentAtNode', 'ReactDOM', 'react-dom', ReactDOM, ReactDOM.unmountComponentAtNode),
// ReactDOMServer
renderToString: deprecated('renderToString', 'ReactDOMServer', 'react-dom/server', ReactDOMServer, ReactDOMServer.renderToString),
renderToStaticMarkup: deprecated('renderToStaticMarkup', 'ReactDOMServer', 'react-dom/server', ReactDOMServer, ReactDOMServer.renderToStaticMarkup)
});
React.__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED = ReactDOM;
React.__SECRET_DOM_SERVER_DO_NOT_USE_OR_YOU_WILL_BE_FIRED = ReactDOMServer;
module.exports = React;
/***/ }),
/* 4 */
/***/ (function(module, exports, __webpack_require__) {
/* WEBPACK VAR INJECTION */(function(process) {/**
* Copyright 2013-2015, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*
* @providesModule ReactDOM
*/
/* globals __REACT_DEVTOOLS_GLOBAL_HOOK__*/
'use strict';
var ReactCurrentOwner = __webpack_require__(6);
var ReactDOMTextComponent = __webpack_require__(7);
var ReactDefaultInjection = __webpack_require__(72);
var ReactInstanceHandles = __webpack_require__(46);
var ReactMount = __webpack_require__(29);
var ReactPerf = __webpack_require__(19);
var ReactReconciler = __webpack_require__(51);
var ReactUpdates = __webpack_require__(55);
var ReactVersion = __webpack_require__(147);
var findDOMNode = __webpack_require__(92);
var renderSubtreeIntoContainer = __webpack_require__(148);
var warning = __webpack_require__(26);
ReactDefaultInjection.inject();
var render = ReactPerf.measure('React', 'render', ReactMount.render);
var React = {
findDOMNode: findDOMNode,
render: render,
unmountComponentAtNode: ReactMount.unmountComponentAtNode,
version: ReactVersion,
/* eslint-disable camelcase */
unstable_batchedUpdates: ReactUpdates.batchedUpdates,
unstable_renderSubtreeIntoContainer: renderSubtreeIntoContainer
};
// Inject the runtime into a devtools global hook regardless of browser.
// Allows for debugging when the hook is injected on the page.
/* eslint-enable camelcase */
if (typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== 'undefined' && typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.inject === 'function') {
__REACT_DEVTOOLS_GLOBAL_HOOK__.inject({
CurrentOwner: ReactCurrentOwner,
InstanceHandles: ReactInstanceHandles,
Mount: ReactMount,
Reconciler: ReactReconciler,
TextComponent: ReactDOMTextComponent
});
}
if (process.env.NODE_ENV !== 'production') {
var ExecutionEnvironment = __webpack_require__(10);
if (ExecutionEnvironment.canUseDOM && window.top === window.self) {
// First check if devtools is not installed
if (typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ === 'undefined') {
// If we're in Chrome or Firefox, provide a download link if not installed.
if (navigator.userAgent.indexOf('Chrome') > -1 && navigator.userAgent.indexOf('Edge') === -1 || navigator.userAgent.indexOf('Firefox') > -1) {
console.debug('Download the React DevTools for a better development experience: ' + 'https://fb.me/react-devtools');
}
}
// If we're in IE8, check to see if we are in compatibility mode and provide
// information on preventing compatibility mode
var ieCompatibilityMode = document.documentMode && document.documentMode < 8;
process.env.NODE_ENV !== 'production' ? warning(!ieCompatibilityMode, 'Internet Explorer is running in compatibility mode; please add the ' + 'following tag to your HTML to prevent this from happening: ' + '<meta http-equiv="X-UA-Compatible" content="IE=edge" />') : undefined;
var expectedFeatures = [
// shims
Array.isArray, Array.prototype.every, Array.prototype.forEach, Array.prototype.indexOf, Array.prototype.map, Date.now, Function.prototype.bind, Object.keys, String.prototype.split, String.prototype.trim,
// shams
Object.create, Object.freeze];
for (var i = 0; i < expectedFeatures.length; i++) {
if (!expectedFeatures[i]) {
console.error('One or more ES5 shim/shams expected by React are not available: ' + 'https://fb.me/react-warning-polyfills');
break;
}
}
}
}
module.exports = React;
/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(5)))
/***/ }),
/* 5 */
/***/ (function(module, exports) {
// shim for using process in browser
var process = module.exports = {};
// cached from whatever global is present so that test runners that stub it
// don't break things. But we need to wrap it in a try catch in case it is
// wrapped in strict mode code which doesn't define any globals. It's inside a
// function because try/catches deoptimize in certain engines.
var cachedSetTimeout;
var cachedClearTimeout;
function defaultSetTimout() {
throw new Error('setTimeout has not been defined');
}
function defaultClearTimeout () {
throw new Error('clearTimeout has not been defined');
}
(function () {
try {
if (typeof setTimeout === 'function') {
cachedSetTimeout = setTimeout;
} else {
cachedSetTimeout = defaultSetTimout;
}
} catch (e) {
cachedSetTimeout = defaultSetTimout;
}
try {
if (typeof clearTimeout === 'function') {
cachedClearTimeout = clearTimeout;
} else {
cachedClearTimeout = defaultClearTimeout;
}
} catch (e) {
cachedClearTimeout = defaultClearTimeout;
}
} ())
function runTimeout(fun) {
if (cachedSetTimeout === setTimeout) {
//normal enviroments in sane situations
return setTimeout(fun, 0);
}
// if setTimeout wasn't available but was latter defined
if ((cachedSetTimeout === defaultSetTimout || !cachedSetTimeout) && setTimeout) {
cachedSetTimeout = setTimeout;
return setTimeout(fun, 0);
}
try {
// when when somebody has screwed with setTimeout but no I.E. maddness
return cachedSetTimeout(fun, 0);
} catch(e){
try {
// When we are in I.E. but the script has been evaled so I.E. doesn't trust the global object when called normally
return cachedSetTimeout.call(null, fun, 0);
} catch(e){
// same as above but when it's a version of I.E. that must have the global object for 'this', hopfully our context correct otherwise it will throw a global error
return cachedSetTimeout.call(this, fun, 0);
}
}
}
function runClearTimeout(marker) {
if (cachedClearTimeout === clearTimeout) {
//normal enviroments in sane situations
return clearTimeout(marker);
}
// if clearTimeout wasn't available but was latter defined
if ((cachedClearTimeout === defaultClearTimeout || !cachedClearTimeout) && clearTimeout) {
cachedClearTimeout = clearTimeout;
return clearTimeout(marker);
}
try {
// when when somebody has screwed with setTimeout but no I.E. maddness
return cachedClearTimeout(marker);
} catch (e){
try {
// When we are in I.E. but the script has been evaled so I.E. doesn't trust the global object when called normally
return cachedClearTimeout.call(null, marker);
} catch (e){
// same as above but when it's a version of I.E. that must have the global object for 'this', hopfully our context correct otherwise it will throw a global error.
// Some versions of I.E. have different rules for clearTimeout vs setTimeout
return cachedClearTimeout.call(this, marker);
}
}
}
var queue = [];
var draining = false;
var currentQueue;
var queueIndex = -1;
function cleanUpNextTick() {
if (!draining || !currentQueue) {
return;
}
draining = false;
if (currentQueue.length) {
queue = currentQueue.concat(queue);
} else {
queueIndex = -1;
}
if (queue.length) {
drainQueue();
}
}
function drainQueue() {
if (draining) {
return;
}
var timeout = runTimeout(cleanUpNextTick);
draining = true;
var len = queue.length;
while(len) {
currentQueue = queue;
queue = [];
while (++queueIndex < len) {
if (currentQueue) {
currentQueue[queueIndex].run();
}
}
queueIndex = -1;
len = queue.length;
}
currentQueue = null;
draining = false;
runClearTimeout(timeout);
}
process.nextTick = function (fun) {
var args = new Array(arguments.length - 1);
if (arguments.length > 1) {
for (var i = 1; i < arguments.length; i++) {
args[i - 1] = arguments[i];
}
}
queue.push(new Item(fun, args));
if (queue.length === 1 && !draining) {
runTimeout(drainQueue);
}
};
// v8 likes predictible objects
function Item(fun, array) {
this.fun = fun;
this.array = array;
}
Item.prototype.run = function () {
this.fun.apply(null, this.array);
};
process.title = 'browser';
process.browser = true;
process.env = {};
process.argv = [];
process.version = ''; // empty string to avoid regexp issues
process.versions = {};
function noop() {}
process.on = noop;
process.addListener = noop;
process.once = noop;
process.off = noop;
process.removeListener = noop;
process.removeAllListeners = noop;
process.emit = noop;
process.prependListener = noop;
process.prependOnceListener = noop;
process.listeners = function (name) { return [] }
process.binding = function (name) {
throw new Error('process.binding is not supported');
};
process.cwd = function () { return '/' };
process.chdir = function (dir) {
throw new Error('process.chdir is not supported');
};
process.umask = function() { return 0; };
/***/ }),
/* 6 */
/***/ (function(module, exports) {
/**
* Copyright 2013-2015, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*
* @providesModule ReactCurrentOwner
*/
'use strict';
/**
* Keeps track of the current owner.
*
* The current owner is the component who should own any components that are
* currently being constructed.
*/
var ReactCurrentOwner = {
/**
* @internal
* @type {ReactComponent}
*/
current: null
};
module.exports = ReactCurrentOwner;
/***/ }),
/* 7 */
/***/ (function(module, exports, __webpack_require__) {
/* WEBPACK VAR INJECTION */(function(process) {/**
* Copyright 2013-2015, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*
* @providesModule ReactDOMTextComponent
* @typechecks static-only
*/
'use strict';
var DOMChildrenOperations = __webpack_require__(8);
var DOMPropertyOperations = __webpack_require__(23);
var ReactComponentBrowserEnvironment = __webpack_require__(27);
var ReactMount = __webpack_require__(29);
var assign = __webpack_require__(40);
var escapeTextContentForBrowser = __webpack_require__(22);
var setTextContent = __webpack_require__(21);
var validateDOMNesting = __webpack_require__(71);
/**
* Text nodes violate a couple assumptions that React makes about components:
*
* - When mounting text into the DOM, adjacent text nodes are merged.
* - Text nodes cannot be assigned a React root ID.
*
* This component is used to wrap strings in elements so that they can undergo
* the same reconciliation that is applied to elements.
*
* TODO: Investigate representing React components in the DOM with text nodes.
*
* @class ReactDOMTextComponent
* @extends ReactComponent
* @internal
*/
var ReactDOMTextComponent = function (props) {
// This constructor and its argument is currently used by mocks.
};
assign(ReactDOMTextComponent.prototype, {
/**
* @param {ReactText} text
* @internal
*/
construct: function (text) {
// TODO: This is really a ReactText (ReactNode), not a ReactElement
this._currentElement = text;
this._stringText = '' + text;
// Properties
this._rootNodeID = null;
this._mountIndex = 0;
},
/**
* Creates the markup for this text node. This node is not intended to have
* any features besides containing text content.
*
* @param {string} rootID DOM ID of the root node.
* @param {ReactReconcileTransaction|ReactServerRenderingTransaction} transaction
* @return {string} Markup for this text node.
* @internal
*/
mountComponent: function (rootID, transaction, context) {
if (process.env.NODE_ENV !== 'production') {
if (context[validateDOMNesting.ancestorInfoContextKey]) {
validateDOMNesting('span', null, context[validateDOMNesting.ancestorInfoContextKey]);
}
}
this._rootNodeID = rootID;
if (transaction.useCreateElement) {
var ownerDocument = context[ReactMount.ownerDocumentContextKey];
var el = ownerDocument.createElement('span');
DOMPropertyOperations.setAttributeForID(el, rootID);
// Populate node cache
ReactMount.getID(el);
setTextContent(el, this._stringText);
return el;
} else {
var escapedText = escapeTextContentForBrowser(this._stringText);
if (transaction.renderToStaticMarkup) {
// Normally we'd wrap this in a `span` for the reasons stated above, but
// since this is a situation where React won't take over (static pages),
// we can simply return the text as it is.
return escapedText;
}
return '<span ' + DOMPropertyOperations.createMarkupForID(rootID) + '>' + escapedText + '</span>';
}
},
/**
* Updates this component by updating the text content.
*
* @param {ReactText} nextText The next text content
* @param {ReactReconcileTransaction} transaction
* @internal
*/
receiveComponent: function (nextText, transaction) {
if (nextText !== this._currentElement) {
this._currentElement = nextText;
var nextStringText = '' + nextText;
if (nextStringText !== this._stringText) {
// TODO: Save this as pending props and use performUpdateIfNecessary
// and/or updateComponent to do the actual update for consistency with
// other component types?
this._stringText = nextStringText;
var node = ReactMount.getNode(this._rootNodeID);
DOMChildrenOperations.updateTextContent(node, nextStringText);
}
}
},
unmountComponent: function () {
ReactComponentBrowserEnvironment.unmountIDFromEnvironment(this._rootNodeID);
}
});
module.exports = ReactDOMTextComponent;
/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(5)))
/***/ }),
/* 8 */
/***/ (function(module, exports, __webpack_require__) {
/* WEBPACK VAR INJECTION */(function(process) {/**
* Copyright 2013-2015, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*
* @providesModule DOMChildrenOperations
* @typechecks static-only
*/
'use strict';
var Danger = __webpack_require__(9);
var ReactMultiChildUpdateTypes = __webpack_require__(17);
var ReactPerf = __webpack_require__(19);
var setInnerHTML = __webpack_require__(20);
var setTextContent = __webpack_require__(21);
var invariant = __webpack_require__(14);
/**
* Inserts `childNode` as a child of `parentNode` at the `index`.
*
* @param {DOMElement} parentNode Parent node in which to insert.
* @param {DOMElement} childNode Child node to insert.
* @param {number} index Index at which to insert the child.
* @internal
*/
function insertChildAt(parentNode, childNode, index) {
// By exploiting arrays returning `undefined` for an undefined index, we can
// rely exclusively on `insertBefore(node, null)` instead of also using
// `appendChild(node)`. However, using `undefined` is not allowed by all
// browsers so we must replace it with `null`.
// fix render order error in safari
// IE8 will throw error when index out of list size.
var beforeChild = index >= parentNode.childNodes.length ? null : parentNode.childNodes.item(index);
parentNode.insertBefore(childNode, beforeChild);
}
/**
* Operations for updating with DOM children.
*/
var DOMChildrenOperations = {
dangerouslyReplaceNodeWithMarkup: Danger.dangerouslyReplaceNodeWithMarkup,
updateTextContent: setTextContent,
/**
* Updates a component's children by processing a series of updates. The
* update configurations are each expected to have a `parentNode` property.
*
* @param {array<object>} updates List of update configurations.
* @param {array<string>} markupList List of markup strings.
* @internal
*/
processUpdates: function (updates, markupList) {
var update;
// Mapping from parent IDs to initial child orderings.
var initialChildren = null;
// List of children that will be moved or removed.
var updatedChildren = null;
for (var i = 0; i < updates.length; i++) {
update = updates[i];
if (update.type === ReactMultiChildUpdateTypes.MOVE_EXISTING || update.type === ReactMultiChildUpdateTypes.REMOVE_NODE) {
var updatedIndex = update.fromIndex;
var updatedChild = update.parentNode.childNodes[updatedIndex];
var parentID = update.parentID;
!updatedChild ? process.env.NODE_ENV !== 'production' ? invariant(false, 'processUpdates(): Unable to find child %s of element. This ' + 'probably means the DOM was unexpectedly mutated (e.g., by the ' + 'browser), usually due to forgetting a <tbody> when using tables, ' + 'nesting tags like <form>, <p>, or <a>, or using non-SVG elements ' + 'in an <svg> parent. Try inspecting the child nodes of the element ' + 'with React ID `%s`.', updatedIndex, parentID) : invariant(false) : undefined;
initialChildren = initialChildren || {};
initialChildren[parentID] = initialChildren[parentID] || [];
initialChildren[parentID][updatedIndex] = updatedChild;
updatedChildren = updatedChildren || [];
updatedChildren.push(updatedChild);
}
}
var renderedMarkup;
// markupList is either a list of markup or just a list of elements
if (markupList.length && typeof markupList[0] === 'string') {
renderedMarkup = Danger.dangerouslyRenderMarkup(markupList);
} else {
renderedMarkup = markupList;
}
// Remove updated children first so that `toIndex` is consistent.
if (updatedChildren) {
for (var j = 0; j < updatedChildren.length; j++) {
updatedChildren[j].parentNode.removeChild(updatedChildren[j]);
}
}
for (var k = 0; k < updates.length; k++) {
update = updates[k];
switch (update.type) {
case ReactMultiChildUpdateTypes.INSERT_MARKUP:
insertChildAt(update.parentNode, renderedMarkup[update.markupIndex], update.toIndex);
break;
case ReactMultiChildUpdateTypes.MOVE_EXISTING:
insertChildAt(update.parentNode, initialChildren[update.parentID][update.fromIndex], update.toIndex);
break;
case ReactMultiChildUpdateTypes.SET_MARKUP:
setInnerHTML(update.parentNode, update.content);
break;
case ReactMultiChildUpdateTypes.TEXT_CONTENT:
setTextContent(update.parentNode, update.content);
break;
case ReactMultiChildUpdateTypes.REMOVE_NODE:
// Already removed by the for-loop above.
break;
}
}
}
};
ReactPerf.measureMethods(DOMChildrenOperations, 'DOMChildrenOperations', {
updateTextContent: 'updateTextContent'
});
module.exports = DOMChildrenOperations;
/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(5)))
/***/ }),
/* 9 */
/***/ (function(module, exports, __webpack_require__) {
/* WEBPACK VAR INJECTION */(function(process) {/**
* Copyright 2013-2015, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*
* @providesModule Danger
* @typechecks static-only
*/
'use strict';
var ExecutionEnvironment = __webpack_require__(10);
var createNodesFromMarkup = __webpack_require__(11);
var emptyFunction = __webpack_require__(16);
var getMarkupWrap = __webpack_require__(15);
var invariant = __webpack_require__(14);
var OPEN_TAG_NAME_EXP = /^(<[^ \/>]+)/;
var RESULT_INDEX_ATTR = 'data-danger-index';
/**
* Extracts the `nodeName` from a string of markup.
*
* NOTE: Extracting the `nodeName` does not require a regular expression match
* because we make assumptions about React-generated markup (i.e. there are no
* spaces surrounding the opening tag and there is at least one attribute).
*
* @param {string} markup String of markup.
* @return {string} Node name of the supplied markup.
* @see http://jsperf.com/extract-nodename
*/
function getNodeName(markup) {
return markup.substring(1, markup.indexOf(' '));
}
var Danger = {
/**
* Renders markup into an array of nodes. The markup is expected to render
* into a list of root nodes. Also, the length of `resultList` and
* `markupList` should be the same.
*
* @param {array<string>} markupList List of markup strings to render.
* @return {array<DOMElement>} List of rendered nodes.
* @internal
*/
dangerouslyRenderMarkup: function (markupList) {
!ExecutionEnvironment.canUseDOM ? process.env.NODE_ENV !== 'production' ? invariant(false, 'dangerouslyRenderMarkup(...): Cannot render markup in a worker ' + 'thread. Make sure `window` and `document` are available globally ' + 'before requiring React when unit testing or use ' + 'ReactDOMServer.renderToString for server rendering.') : invariant(false) : undefined;
var nodeName;
var markupByNodeName = {};
// Group markup by `nodeName` if a wrap is necessary, else by '*'.
for (var i = 0; i < markupList.length; i++) {
!markupList[i] ? process.env.NODE_ENV !== 'production' ? invariant(false, 'dangerouslyRenderMarkup(...): Missing markup.') : invariant(false) : undefined;
nodeName = getNodeName(markupList[i]);
nodeName = getMarkupWrap(nodeName) ? nodeName : '*';
markupByNodeName[nodeName] = markupByNodeName[nodeName] || [];
markupByNodeName[nodeName][i] = markupList[i];
}
var resultList = [];
var resultListAssignmentCount = 0;
for (nodeName in markupByNodeName) {
if (!markupByNodeName.hasOwnProperty(nodeName)) {
continue;
}
var markupListByNodeName =