Files
slider/examples/simple.js
T
2015-08-19 17:41:54 +08:00

3871 lines
113 KiB
JavaScript

webpackJsonp([0,1],[
/* 0 */
/***/ function(module, exports, __webpack_require__) {
module.exports = __webpack_require__(1);
/***/ },
/* 1 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
__webpack_require__(2);
var Slider = __webpack_require__(6);
var React = __webpack_require__(9);
function onChange(v) {
console.log(v);
}
// React.render(<div style={{width:400,margin:100}}><Slider marks={["一","二","三","四","五"]} defaultIndex={2} /></div>, document.getElementById('__react-content'));
// React.render(<div style={{width:400,margin:100}}><Slider className='rc-slider' step={20}/></div>, document.getElementById('__react-content'));
React.render(React.createElement(
'div',
{ style: { width: 400, margin: 100 } },
React.createElement(Slider, { onChange: onChange })
), document.getElementById('__react-content'));
/***/ },
/* 2 */
/***/ function(module, exports, __webpack_require__) {
// style-loader: Adds some css to the DOM by adding a <style> tag
// load the styles
var content = __webpack_require__(3);
if(typeof content === 'string') content = [[module.id, content, '']];
// add the styles to the DOM
var update = __webpack_require__(5)(content, {});
// Hot Module Replacement
if(false) {
// When the styles change, update the <style> tags
module.hot.accept("!!/Users/weixingzhang/temp/slider/node_modules/rc-tools/node_modules/css-loader/index.js?sourceMap!/Users/weixingzhang/temp/slider/node_modules/rc-tools/node_modules/less-loader/index.js?sourceMap!/Users/weixingzhang/temp/slider/assets/index.less", function() {
var newContent = require("!!/Users/weixingzhang/temp/slider/node_modules/rc-tools/node_modules/css-loader/index.js?sourceMap!/Users/weixingzhang/temp/slider/node_modules/rc-tools/node_modules/less-loader/index.js?sourceMap!/Users/weixingzhang/temp/slider/assets/index.less");
if(typeof newContent === 'string') newContent = [[module.id, newContent, '']];
update(newContent);
});
// When the module is disposed, remove the <style> tags
module.hot.dispose(function() { update(); });
}
/***/ },
/* 3 */
/***/ function(module, exports, __webpack_require__) {
exports = module.exports = __webpack_require__(4)();
exports.push([module.id, "* {\n box-sizing: border-box;\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n*:before,\n*:after {\n box-sizing: border-box;\n}\n.rc-slider {\n position: relative;\n height: 4px;\n width: 100%;\n border-radius: 6px;\n background-color: #e9e9e9;\n}\n.rc-slider-track {\n position: absolute;\n left: 0;\n height: 4px;\n border-radius: 6px;\n background-color: #abe2fb;\n z-index: 1;\n}\n.rc-slider-handle {\n position: absolute;\n margin-left: -7px;\n margin-top: -5px;\n width: 14px;\n height: 14px;\n cursor: pointer;\n border-radius: 50%;\n border: solid 2px #96dbfa;\n background-color: #fff;\n z-index: 2;\n}\n.rc-slider-handle:hover {\n border-color: #57c5f7;\n}\n.rc-slider-handle-active:active {\n border-color: #57c5f7;\n box-shadow: 0 0 5px #57c5f7;\n}\n.rc-slider-mark {\n position: absolute;\n top: 10px;\n left: 0;\n width: 100%;\n font-size: 12px;\n z-index: 3;\n}\n.rc-slider-mark-text {\n position: absolute;\n display: inline-block;\n vertical-align: middle;\n text-align: center;\n cursor: pointer;\n color: #999;\n}\n.rc-slider-mark-text-active {\n color: #666;\n}\n.rc-slider-step {\n position: absolute;\n width: 100%;\n height: 4px;\n background: transparent;\n z-index: 1;\n}\n.rc-slider-dot {\n position: absolute;\n top: -2px;\n margin-left: -4px;\n width: 8px;\n height: 8px;\n border: 2px solid #e9e9e9;\n background-color: #fff;\n cursor: pointer;\n border-radius: 50%;\n vertical-align: middle;\n}\n.rc-slider-dot:first-child {\n margin-left: -4px;\n}\n.rc-slider-dot:last-child {\n margin-left: -4px;\n}\n.rc-slider-dot-active {\n border-color: #96dbfa;\n}\n.rc-slider-disabled {\n background-color: #e9e9e9;\n}\n.rc-slider-disabled .rc-slider-track {\n background-color: #cccccc;\n}\n.rc-slider-disabled .rc-slider-handle {\n border-color: #cccccc;\n background-color: #fff;\n cursor: not-allowed;\n}\n.rc-slider-disabled .rc-slider-mark-text,\n.rc-slider-disabled .dot {\n cursor: not-allowed !important;\n}\n.rc-slider-tooltip {\n position: absolute;\n left: -9999px;\n top: -9999px;\n z-index: 4;\n visibility: visible;\n}\n.rc-slider-tooltip-hidden {\n display: none;\n}\n.rc-slider-tooltip-placement-points-bc-tc {\n padding: 4px 0 8px 0;\n}\n.rc-slider-tooltip-inner {\n padding: 6px 0;\n width: 24px;\n height: 24px;\n font-size: 12px;\n line-height: 1;\n color: #ffffff;\n text-align: center;\n text-decoration: none;\n background-color: #6c6c6c;\n border-radius: 6px;\n box-shadow: 0 0 4px #d9d9d9;\n}\n.rc-slider-tooltip-arrow {\n position: absolute;\n width: 0;\n height: 0;\n border-color: transparent;\n border-style: solid;\n}\n.rc-slider-tooltip-placement-points-bc-tc .rc-slider-tooltip-arrow {\n bottom: 4px;\n left: 50%;\n margin-left: -4px;\n border-width: 4px 4px 0;\n border-top-color: #6c6c6c;\n}\n", "", {"version":3,"sources":["index.less"],"names":[],"mappings":"AAWA;EACE,sBAAA;EACA,6CAAA;;AAGF,CAAC;AACD,CAAC;EACC,sBAAA;;AAGF,CAAC;EACC,kBAAA;EACA,WAAA;EACA,WAAA;EACA,kBAAA;EACA,yBAAA;;AAEA,CAPD,SAOE;EACC,kBAAA;EACA,OAAA;EACA,WAAA;EACA,kBAAA;EACA,yBAAA;EACA,UAAA;;AAGF,CAhBD,SAgBE;EACC,kBAAA;EACA,iBAAA;EACA,gBAAA;EACA,WAAA;EACA,YAAA;EACA,eAAA;EACA,kBAAA;EACA,yBAAA;EACA,sBAAA;EACA,UAAA;;AAEA,CA5BH,SAgBE,OAYE;EACC,qBAAA;;AAGA,CAhCL,SAgBE,OAeE,OACE;EACC,qBAAA;EACA,2BAAA;;AAKN,CAvCD,SAuCE;EACC,kBAAA;EACA,SAAA;EACA,OAAA;EACA,WAAA;EACA,eAAA;EACA,UAAA;;AAGF,CAhDD,SAgDE;EACC,kBAAA;EACA,qBAAA;EACA,sBAAA;EACA,kBAAA;EACA,eAAA;EACA,WAAA;;AAEA,CAxDH,SAgDE,UAQE;EACC,WAAA;;AAIJ,CA7DD,SA6DE;EACC,kBAAA;EACA,WAAA;EACA,WAAA;EACA,uBAAA;EACA,UAAA;;AAGF,CArED,SAqEE;EACC,kBAAA;EACA,SAAA;EACA,iBAAA;EACA,UAAA;EACA,WAAA;EACA,yBAAA;EACA,sBAAA;EACA,eAAA;EACA,kBAAA;EACA,sBAAA;;AACA,CAhFH,SAqEE,IAWE;EACC,iBAAA;;AAEF,CAnFH,SAqEE,IAcE;EACC,iBAAA;;AAEF,CAtFH,SAqEE,IAiBE;EACC,qBAAA;;AAIJ,CA3FD,SA2FE;EACC,yBAAA;;AADF,CA3FD,SA2FE,SAGC,EAAC,SAAc;EACb,yBAAA;;AAJJ,CA3FD,SA2FE,SAOC,EAAC,SAAc;EACb,qBAAA;EACA,sBAAA;EACA,mBAAA;;AAVJ,CA3FD,SA2FE,SAaC,EAAC,SAAc;AAbjB,CA3FD,SA2FE,SAa4B;EACzB,mBAAA;;AAKJ,CA9GD,SA8GE;EACC,kBAAA;EACA,aAAA;EACA,YAAA;EACA,UAAA;EACA,mBAAA;;AAEA,CArHH,SA8GE,QAOE;EACC,aAAA;;AAGF,CAzHH,SA8GE,QAWE;EACC,oBAAA;;AAGF,CA7HH,SA8GE,QAeE;EACC,cAAA;EACA,WAAA;EACA,YAAA;EACA,eAAA;EACA,cAAA;EACA,cAAA;EACA,kBAAA;EACA,qBAAA;EACA,yBAAA;EACA,kBAAA;EACA,2BAAA;;AAGF,CA3IH,SA8GE,QA6BE;EACC,kBAAA;EACA,QAAA;EACA,SAAA;EACA,yBAAA;EACA,mBAAA;;AAGF,CAnJH,SA8GE,QAqCE,uBAAwB,EAnJ5B,SA8GE,QAqC2B;EACxB,WAAA;EACA,SAAA;EACA,iBAAA;EACA,uBAAA;EACA,yBAAA","sourcesContent":["@prefixClass: rc-slider;\n\n@disabledColor: #ccc;\n@border-radius-base: 6px;\n@primary-color: #2db7f5;\n@tooltip-color: #fff;\n@tooltip-bg: tint(#666, 4%);\n@tooltip-arrow-width: 4px;\n@tooltip-distance: @tooltip-arrow-width+4;\n@tooltip-arrow-color: @tooltip-bg;\n\n* {\n box-sizing: border-box;\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0); // remove tap highlight color for mobile safari\n}\n\n*:before,\n*:after {\n box-sizing: border-box;\n}\n\n.@{prefixClass} {\n position: relative;\n height: 4px;\n width: 100%;\n border-radius: @border-radius-base;\n background-color: #e9e9e9;\n\n &-track {\n position: absolute;\n left: 0;\n height: 4px;\n border-radius: @border-radius-base;\n background-color: tint(@primary-color, 60%);\n z-index: 1;\n }\n\n &-handle {\n position: absolute;\n margin-left: -7px;\n margin-top: -5px;\n width: 14px;\n height: 14px;\n cursor: pointer;\n border-radius: 50%;\n border: solid 2px tint(@primary-color, 50%);\n background-color: #fff;\n z-index: 2;\n\n &:hover {\n border-color: tint(@primary-color, 20%);\n }\n &-active {\n &:active {\n border-color: tint(@primary-color, 20%);\n box-shadow: 0 0 5px tint(@primary-color, 20%);\n }\n }\n }\n\n &-mark {\n position: absolute;\n top: 10px;\n left: 0;\n width: 100%;\n font-size: 12px;\n z-index: 3;\n }\n\n &-mark-text {\n position: absolute;\n display: inline-block;\n vertical-align: middle;\n text-align: center;\n cursor: pointer;\n color: #999;\n\n &-active {\n color: #666;\n }\n }\n\n &-step {\n position: absolute;\n width: 100%;\n height: 4px;\n background: transparent;\n z-index: 1;\n }\n\n &-dot {\n position: absolute;\n top: -2px;\n margin-left: -4px;\n width: 8px;\n height: 8px;\n border: 2px solid #e9e9e9;\n background-color: #fff;\n cursor: pointer;\n border-radius: 50%;\n vertical-align: middle;\n &:first-child {\n margin-left: -4px;\n }\n &:last-child {\n margin-left: -4px;\n }\n &-active {\n border-color: tint(@primary-color, 50%);\n }\n }\n\n &-disabled {\n background-color: #e9e9e9;\n\n .@{prefixClass}-track {\n background-color: @disabledColor;\n }\n\n .@{prefixClass}-handle {\n border-color: @disabledColor;\n background-color: #fff;\n cursor: not-allowed;\n }\n\n .@{prefixClass}-mark-text, .dot {\n cursor: not-allowed!important;\n }\n }\n\n // slider tooltip style\n &-tooltip {\n position: absolute;\n left: -9999px;\n top: -9999px;\n z-index: 4;\n visibility: visible;\n\n &-hidden {\n display: none;\n }\n\n &-placement-points-bc-tc {\n padding: @tooltip-arrow-width 0 @tooltip-distance 0;\n }\n\n &-inner {\n padding: 6px 0;\n width: 24px;\n height: 24px;\n font-size: 12px;\n line-height: 1;\n color: @tooltip-color;\n text-align: center;\n text-decoration: none;\n background-color: @tooltip-bg;\n border-radius: @border-radius-base;\n box-shadow: 0 0 4px #d9d9d9;\n }\n\n &-arrow {\n position: absolute;\n width: 0;\n height: 0;\n border-color: transparent;\n border-style: solid;\n }\n\n &-placement-points-bc-tc &-arrow {\n bottom: @tooltip-distance - @tooltip-arrow-width;\n left: 50%;\n margin-left: -@tooltip-arrow-width;\n border-width: @tooltip-arrow-width @tooltip-arrow-width 0;\n border-top-color: @tooltip-arrow-color;\n }\n }\n}"]}]);
/***/ },
/* 4 */
/***/ function(module, exports) {
module.exports = function() {
var list = [];
list.toString = function toString() {
var result = [];
for(var i = 0; i < this.length; i++) {
var item = this[i];
if(item[2]) {
result.push("@media " + item[2] + "{" + item[1] + "}");
} else {
result.push(item[1]);
}
}
return result.join("");
};
return list;
}
/***/ },
/* 5 */
/***/ function(module, exports, __webpack_require__) {
/*
MIT License http://www.opensource.org/licenses/mit-license.php
Author Tobias Koppers @sokra
*/
var stylesInDom = {},
memoize = function(fn) {
var memo;
return function () {
if (typeof memo === "undefined") memo = fn.apply(this, arguments);
return memo;
};
},
isIE9 = memoize(function() {
return /msie 9\b/.test(window.navigator.userAgent.toLowerCase());
}),
getHeadElement = memoize(function () {
return document.head || document.getElementsByTagName("head")[0];
}),
singletonElement = null,
singletonCounter = 0;
module.exports = function(list, options) {
if(false) {
if(typeof document !== "object") throw new Error("The style-loader cannot be used in a non-browser environment");
}
options = options || {};
// Force single-tag solution on IE9, which has a hard limit on the # of <style>
// tags it will allow on a page
if (typeof options.singleton === "undefined") options.singleton = isIE9();
var styles = listToStyles(list);
addStylesToDom(styles, options);
return function update(newList) {
var mayRemove = [];
for(var i = 0; i < styles.length; i++) {
var item = styles[i];
var domStyle = stylesInDom[item.id];
domStyle.refs--;
mayRemove.push(domStyle);
}
if(newList) {
var newStyles = listToStyles(newList);
addStylesToDom(newStyles, options);
}
for(var i = 0; i < mayRemove.length; i++) {
var domStyle = mayRemove[i];
if(domStyle.refs === 0) {
for(var j = 0; j < domStyle.parts.length; j++)
domStyle.parts[j]();
delete stylesInDom[domStyle.id];
}
}
};
}
function addStylesToDom(styles, options) {
for(var i = 0; i < styles.length; i++) {
var item = styles[i];
var domStyle = stylesInDom[item.id];
if(domStyle) {
domStyle.refs++;
for(var j = 0; j < domStyle.parts.length; j++) {
domStyle.parts[j](item.parts[j]);
}
for(; j < item.parts.length; j++) {
domStyle.parts.push(addStyle(item.parts[j], options));
}
} else {
var parts = [];
for(var j = 0; j < item.parts.length; j++) {
parts.push(addStyle(item.parts[j], options));
}
stylesInDom[item.id] = {id: item.id, refs: 1, parts: parts};
}
}
}
function listToStyles(list) {
var styles = [];
var newStyles = {};
for(var i = 0; i < list.length; i++) {
var item = list[i];
var id = item[0];
var css = item[1];
var media = item[2];
var sourceMap = item[3];
var part = {css: css, media: media, sourceMap: sourceMap};
if(!newStyles[id])
styles.push(newStyles[id] = {id: id, parts: [part]});
else
newStyles[id].parts.push(part);
}
return styles;
}
function createStyleElement() {
var styleElement = document.createElement("style");
var head = getHeadElement();
styleElement.type = "text/css";
head.appendChild(styleElement);
return styleElement;
}
function addStyle(obj, options) {
var styleElement, update, remove;
if (options.singleton) {
var styleIndex = singletonCounter++;
styleElement = singletonElement || (singletonElement = createStyleElement());
update = applyToSingletonTag.bind(null, styleElement, styleIndex, false);
remove = applyToSingletonTag.bind(null, styleElement, styleIndex, true);
} else {
styleElement = createStyleElement();
update = applyToTag.bind(null, styleElement);
remove = function () {
styleElement.parentNode.removeChild(styleElement);
};
}
update(obj);
return function updateStyle(newObj) {
if(newObj) {
if(newObj.css === obj.css && newObj.media === obj.media && newObj.sourceMap === obj.sourceMap)
return;
update(obj = newObj);
} else {
remove();
}
};
}
function replaceText(source, id, replacement) {
var boundaries = ["/** >>" + id + " **/", "/** " + id + "<< **/"];
var start = source.lastIndexOf(boundaries[0]);
var wrappedReplacement = replacement
? (boundaries[0] + replacement + boundaries[1])
: "";
if (source.lastIndexOf(boundaries[0]) >= 0) {
var end = source.lastIndexOf(boundaries[1]) + boundaries[1].length;
return source.slice(0, start) + wrappedReplacement + source.slice(end);
} else {
return source + wrappedReplacement;
}
}
function applyToSingletonTag(styleElement, index, remove, obj) {
var css = remove ? "" : obj.css;
if(styleElement.styleSheet) {
styleElement.styleSheet.cssText = replaceText(styleElement.styleSheet.cssText, index, css);
} else {
var cssNode = document.createTextNode(css);
var childNodes = styleElement.childNodes;
if (childNodes[index]) styleElement.removeChild(childNodes[index]);
if (childNodes.length) {
styleElement.insertBefore(cssNode, childNodes[index]);
} else {
styleElement.appendChild(cssNode);
}
}
}
function applyToTag(styleElement, obj) {
var css = obj.css;
var media = obj.media;
var sourceMap = obj.sourceMap;
if(sourceMap && typeof btoa === "function") {
try {
css += "\n/*# sourceMappingURL=data:application/json;base64," + btoa(JSON.stringify(sourceMap)) + " */";
css = "@import url(\"data:text/css;base64," + btoa(css) + "\")";
} catch(e) {}
}
if(media) {
styleElement.setAttribute("media", media)
}
if(styleElement.styleSheet) {
styleElement.styleSheet.cssText = css;
} else {
while(styleElement.firstChild) {
styleElement.removeChild(styleElement.firstChild);
}
styleElement.appendChild(document.createTextNode(css));
}
}
/***/ },
/* 6 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
module.exports = __webpack_require__(7);
/***/ },
/* 7 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
module.exports = __webpack_require__(8);
/***/ },
/* 8 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
Object.defineProperty(exports, '__esModule', {
value: true
});
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
var _react = __webpack_require__(9);
var _react2 = _interopRequireDefault(_react);
var _rcTooltip = __webpack_require__(10);
var _rcTooltip2 = _interopRequireDefault(_rcTooltip);
var _rcUtil = __webpack_require__(12);
var _rcUtil2 = _interopRequireDefault(_rcUtil);
function noop() {}
function pauseEvent(e) {
e.cancelBubble = true;
e.returnValue = false;
if (e.stopPropagation) {
e.stopPropagation();
}
if (e.preventDefault) {
e.preventDefault();
}
}
function prefixClsFn(prefixCls) {
for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
args[_key - 1] = arguments[_key];
}
return args.map(function (s) {
return prefixCls + '-' + s;
}).join(' ');
}
function getValueFromIndex(props) {
var value = undefined;
var marksLen = props.marks.length;
var index = undefined;
if ('index' in props) {
index = props.index;
} else {
index = props.defaultIndex;
}
if (marksLen > 0) {
value = (props.max - props.min) / (marksLen - 1) * index;
value = value.toFixed(5) / 1;
}
return value;
}
var Slider = _react2['default'].createClass({
displayName: 'Slider',
propTypes: {
min: _react2['default'].PropTypes.number,
max: _react2['default'].PropTypes.number,
step: _react2['default'].PropTypes.number,
defaultValue: _react2['default'].PropTypes.number,
defaultIndex: _react2['default'].PropTypes.number,
value: _react2['default'].PropTypes.number,
index: _react2['default'].PropTypes.number,
marks: _react2['default'].PropTypes.array,
isIncluded: _react2['default'].PropTypes.bool,
className: _react2['default'].PropTypes.string,
prefixCls: _react2['default'].PropTypes.string,
disabled: _react2['default'].PropTypes.bool,
children: _react2['default'].PropTypes.any,
onBeforeChange: _react2['default'].PropTypes.func,
onChange: _react2['default'].PropTypes.func,
onAfterChange: _react2['default'].PropTypes.func
},
getDefaultProps: function getDefaultProps() {
return {
min: 0,
max: 100,
step: 1,
defaultValue: 0,
marks: [],
isIncluded: true,
className: '',
prefixCls: 'rc-slider',
disabled: false,
defaultIndex: 0
};
},
getInitialState: function getInitialState() {
var props = this.props;
var value = props.defaultValue;
if ('value' in props) {
value = props.value;
}
value = this._trimAlignValue(value);
var marksLen = props.marks.length;
if (marksLen > 0) {
value = getValueFromIndex(props);
}
return {
dragging: false,
showTooltip: false,
value: value
};
},
componentWillReceiveProps: function componentWillReceiveProps(nextProps) {
if ('value' in nextProps) {
this.setState({
value: nextProps.value
});
} else if ('index' in nextProps) {
this.setState({
value: getValueFromIndex(nextProps)
});
}
},
onMouseUp: function onMouseUp() {
this._end('mouse');
},
onTouchUp: function onTouchUp() {
this._end('touch');
},
onMouseMove: function onMouseMove(e) {
var position = e.pageX || e.clientX + document.documentElement.scrollLeft; // to compat ie8
this.onMove(e, position);
},
onTouchMove: function onTouchMove(e) {
if (e.touches.length > 1 || e.type === 'touchend' && e.touches.length > 0) {
this._end('touch');
return;
}
var position = this._getTouchPosition(e);
this.onMove(e, position);
},
onMove: function onMove(e, position) {
pauseEvent(e);
var props = this.props;
var state = this.state;
var value = state.value;
var oldValue = value;
var diffPosition = position - this.startPosition;
var diffValue = diffPosition / this.getSliderLength() * (props.max - props.min);
value = this._trimAlignValue(this.startValue + diffValue);
if (value !== oldValue && !('value' in props) && !('index' in props)) {
this.setState({ value: value });
}
if (value !== oldValue) {
this._triggerEvents('onChange', value);
}
},
onTouchStart: function onTouchStart(e) {
if (e.touches.length > 1 || e.type.toLowerCase() === 'touchend' && e.touches.length > 0) {
return;
}
var position = this._getTouchPosition(e);
var value = this._calValueByPos(position);
this._triggerEvents('onChange', value);
this._start(position);
this._addDocumentEvents('touch');
pauseEvent(e);
},
onSliderMouseDown: function onSliderMouseDown(e) {
var position = e.pageX || e.clientX + document.documentElement.scrollLeft; // to compat ie8
var value = this._calValueByPos(position);
this._triggerEvents('onChange', value);
this._start(position);
this._addDocumentEvents('mouse');
pauseEvent(e);
},
getIndex: function getIndex(v) {
var props = this.props;
var value = v === undefined ? this.state.value : v;
if (props.marks.length === 0) {
return Math.floor((value - props.min) / props.step);
}
var unit = ((props.max - props.min) / (props.marks.length - 1)).toFixed(5);
return Math.round(value / unit);
},
getSliderLength: function getSliderLength() {
var slider = this.refs.slider;
if (!slider) {
return 0;
}
return slider.getDOMNode().clientWidth;
},
getSliderStart: function getSliderStart() {
var slider = this.refs.slider.getDOMNode();
var rect = slider.getBoundingClientRect();
return rect.left;
},
renderSteps: function renderSteps() {
var props = this.props;
var marksLen = props.marks.length;
var stepNum = marksLen > 0 ? marksLen : Math.floor((props.max - props.min) / props.step) + 1;
var unit = 100 / (stepNum - 1);
var prefixCls = props.prefixCls;
var stepClassName = prefixClsFn(prefixCls, 'step');
var elements = [];
for (var i = 0; i < stepNum; i++) {
var offset = unit * i + '%';
var style = {
left: offset
};
var className = prefixClsFn(prefixCls, 'dot');
if (props.isIncluded) {
if (i <= this.getIndex()) {
className = prefixClsFn(prefixCls, 'dot', 'dot-active');
}
} else {
className = i === this.getIndex() ? prefixClsFn(prefixCls, 'dot', 'dot-active') : className;
}
elements[i] = _react2['default'].createElement('span', { className: className, style: style, ref: 'step' + i, key: 'step' + i });
}
return _react2['default'].createElement(
'div',
{ className: stepClassName },
elements
);
},
renderMark: function renderMark(i) {
var marks = this.props.marks;
var marksLen = marks.length;
var unit = 100 / (marksLen - 1);
var offset = unit * i;
var style = {
width: unit / 2 + '%'
};
if (i === marksLen - 1) {
style.right = -unit / 4 + '%';
} else {
style.left = i > 0 ? offset - unit / 4 + '%' : -unit / 4 + '%';
}
var prefixCls = this.props.prefixCls;
var className = prefixClsFn(prefixCls, 'mark-text');
if (this.props.isIncluded) {
if (i <= this.getIndex()) {
className = prefixClsFn(prefixCls, 'mark-text', 'mark-text-active');
}
} else {
className = i === this.getIndex() ? prefixClsFn(prefixCls, 'mark-text', 'mark-text-active') : className;
}
return _react2['default'].createElement(
'span',
{ className: className, style: style, key: i },
this.props.marks[i]
);
},
renderMarks: function renderMarks() {
var marks = this.props.marks;
var marksLen = marks.length;
var elements = [];
for (var i = 0; i < marksLen; i++) {
elements[i] = this.renderMark(i);
}
var prefixCls = this.props.prefixCls;
var className = prefixClsFn(prefixCls, 'mark');
return _react2['default'].createElement(
'div',
{ className: className },
elements
);
},
renderHandler: function renderHandler(offset) {
var onStyle = {
left: offset
};
var prefixCls = this.props.prefixCls;
var className = prefixClsFn(prefixCls, 'handle');
var events = {};
var tooltipVisible = undefined;
if (this.state.dragging) {
tooltipVisible = true;
} else {
events = {
onClick: this.showTooltip.bind(this, true),
onMouseEnter: this.showTooltip.bind(this, true),
onMouseLeave: this.showTooltip.bind(this, false)
};
tooltipVisible = this.state.showTooltip;
}
var handle = _react2['default'].createElement('div', _extends({ className: className
}, events, {
ref: 'handle',
style: onStyle }));
if (this.props.marks.length > 0) {
return handle;
}
return _react2['default'].createElement(
_rcTooltip2['default'],
{
placement: { points: ['bc', 'tc'] },
visible: tooltipVisible,
overlay: _react2['default'].createElement(
'span',
null,
this.state.value
),
delay: 0,
prefixCls: prefixClsFn(prefixCls, 'tooltip') },
handle
);
},
renderTrack: function renderTrack(offset) {
var style = {
width: offset
};
var prefixCls = this.props.prefixCls;
var trackClassName = prefixClsFn(prefixCls, 'track');
return _react2['default'].createElement('div', { className: trackClassName, ref: 'track', style: style });
},
render: function render() {
var _sliderClassName;
var state = this.state;
var props = this.props;
var value = state.value;
var offset = this._calcOffset(value);
var track = this.props.isIncluded ? this.renderTrack(offset) : null;
var ons = this.renderHandler(offset);
var steps = props.step > 1 || props.marks.length > 0 ? this.renderSteps() : null;
var sliderMarks = props.marks.length > 0 ? this.renderMarks() : null;
var prefixCls = props.prefixCls;
var disabled = props.disabled;
var sliderClassName = (_sliderClassName = {}, _defineProperty(_sliderClassName, prefixCls, 1), _defineProperty(_sliderClassName, props.className, !!props.className), _defineProperty(_sliderClassName, prefixCls + '-disabled', disabled), _sliderClassName);
return _react2['default'].createElement(
'div',
{ className: _rcUtil2['default'].classSet(sliderClassName), ref: 'slider',
onTouchStart: disabled ? noop : this.onTouchStart,
onMouseDown: disabled ? noop : this.onSliderMouseDown },
track,
ons,
steps,
sliderMarks,
this.props.children
);
},
showTooltip: function showTooltip(show) {
this.setState({
showTooltip: show
});
},
_trimAlignValue: function _trimAlignValue(v, propsArg) {
var val = v;
var props = propsArg || this.props;
var step = props.marks.length > 0 ? (props.max - props.min) / (props.marks.length - 1) : props.step;
if (val <= props.min) {
val = props.min;
}
if (val >= props.max) {
val = props.max;
}
var valModStep = (val - props.min) % step;
var alignValue = val - valModStep;
if (Math.abs(valModStep) * 2 >= step) {
alignValue += valModStep > 0 ? step : -step;
}
return parseFloat(alignValue.toFixed(5));
},
_calcOffset: function _calcOffset(value) {
var ratio = (value - this.props.min) / (this.props.max - this.props.min);
return ratio * 100 + '%';
},
_calcValue: function _calcValue(offset) {
var ratio = offset / this.getSliderLength();
return ratio * (this.props.max - this.props.min) + this.props.min;
},
_calValueByPos: function _calValueByPos(position) {
var pixelOffset = position - this.getSliderStart();
// pixelOffset -= (this.state.onSize / 2);
var nextValue = this._trimAlignValue(this._calcValue(pixelOffset));
this.setState({
value: nextValue
});
return nextValue;
},
_getTouchPosition: function _getTouchPosition(e) {
var touch = e.touches[0];
return touch.pageX;
},
_triggerEvents: function _triggerEvents(event, v) {
var props = this.props;
var hasMarks = props.marks && props.marks.length > 0;
if (props[event]) {
var data = undefined;
if (hasMarks) {
data = this.getIndex(v);
} else if (v === undefined) {
data = this.state.value;
} else {
data = v;
}
props[event](data);
}
},
_addDocumentEvents: function _addDocumentEvents(type) {
if (type === 'touch') {
// just work for chrome iOS Safari and Android Browser
this.onTouchMoveListener = _rcUtil.Dom.addEventListener(document, 'touchmove', this.onTouchMove);
this.onTouchUpListener = _rcUtil.Dom.addEventListener(document, 'touchend', this.onTouchUp);
} else if (type === 'mouse') {
this.onMouseMoveListener = _rcUtil.Dom.addEventListener(document, 'mousemove', this.onMouseMove);
this.onMouseUpListener = _rcUtil.Dom.addEventListener(document, 'mouseup', this.onMouseUp);
}
},
_removeEventons: function _removeEventons(type) {
if (type === 'touch') {
this.onTouchMoveListener.remove();
this.onTouchUpListener.remove();
} else if (type === 'mouse') {
this.onMouseMoveListener.remove();
this.onMouseUpListener.remove();
}
},
_start: function _start(position) {
this._triggerEvents('onBeforeChange');
this.startValue = this.state.value;
this.startPosition = position;
this.setState({
dragging: true
});
},
_end: function _end(type) {
this._removeEventons(type);
this._triggerEvents('onAfterChange');
this.setState({
dragging: false,
showTooltip: false
});
}
});
exports['default'] = Slider;
module.exports = exports['default'];
/***/ },
/* 9 */
/***/ function(module, exports) {
module.exports = React;
/***/ },
/* 10 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
module.exports = __webpack_require__(11);
/***/ },
/* 11 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
Object.defineProperty(exports, '__esModule', {
value: true
});
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; desc = parent = getter = undefined; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
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 _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 _react = __webpack_require__(9);
var _react2 = _interopRequireDefault(_react);
var _rcUtil = __webpack_require__(12);
var _rcUtil2 = _interopRequireDefault(_rcUtil);
var _Popup = __webpack_require__(24);
var _Popup2 = _interopRequireDefault(_Popup);
var Tooltip = (function (_React$Component) {
_inherits(Tooltip, _React$Component);
function Tooltip(props) {
var _this = this;
_classCallCheck(this, Tooltip);
_get(Object.getPrototypeOf(Tooltip.prototype), 'constructor', this).call(this, props);
this.state = {
visible: !!props.defaultVisible
};
if ('visible' in props) {
this.state.visible = !!props.visible;
}
['onClick', 'onMouseEnter', 'onMouseDown', 'onTouchStart', 'onMouseLeave', 'onFocus', 'onBlur', 'onDocumentClick'].forEach(function (m) {
_this[m] = _this[m].bind(_this);
});
}
_createClass(Tooltip, [{
key: 'componentDidMount',
value: function componentDidMount() {
this.componentDidUpdate();
}
}, {
key: 'componentWillReceiveProps',
value: function componentWillReceiveProps(nextProps) {
if ('visible' in nextProps) {
this.setState({
visible: !!nextProps.visible
});
}
}
}, {
key: 'componentDidUpdate',
value: function componentDidUpdate() {
if (!this.popupRendered) {
return;
}
if (this.props.renderPopupToBody) {
this.popupInstance = _react2['default'].render(this.getPopupElement(), this.getTipContainer());
}
var props = this.props;
if (props.trigger.indexOf('click') !== -1) {
if (this.state.visible) {
if (!this.clickOutsideHandler) {
this.clickOutsideHandler = _rcUtil2['default'].Dom.addEventListener(document, 'mousedown', this.onDocumentClick);
this.touchOutsideHandler = _rcUtil2['default'].Dom.addEventListener(document, 'touchstart', this.onDocumentClick);
}
return;
}
}
if (this.clickOutsideHandler) {
this.clickOutsideHandler.remove();
this.touchOutsideHandler.remove();
this.clickOutsideHandler = null;
this.touchOutsideHandler = null;
}
}
}, {
key: 'componentWillUnmount',
value: function componentWillUnmount() {
var tipContainer = this.tipContainer;
if (tipContainer) {
_react2['default'].unmountComponentAtNode(tipContainer);
document.body.removeChild(tipContainer);
this.tipContainer = null;
}
if (this.delayTimer) {
clearTimeout(this.delayTimer);
this.delayTimer = null;
}
if (this.clickOutsideHandler) {
this.clickOutsideHandler.remove();
this.touchOutsideHandler.remove();
this.clickOutsideHandler = null;
this.touchOutsideHandler = null;
}
}
}, {
key: 'onMouseEnter',
value: function onMouseEnter() {
this.delaySetVisible(true);
}
}, {
key: 'onMouseLeave',
value: function onMouseLeave() {
this.delaySetVisible(false);
}
}, {
key: 'onFocus',
value: function onFocus() {
this.focusTime = Date.now();
this.setVisible(true);
}
}, {
key: 'onMouseDown',
value: function onMouseDown() {
this.preClickTime = Date.now();
}
}, {
key: 'onTouchStart',
value: function onTouchStart() {
this.preTouchTime = Date.now();
}
}, {
key: 'onBlur',
value: function onBlur() {
this.setVisible(false);
}
}, {
key: 'onClick',
value: function onClick(e) {
// focus will trigger click
if (this.focusTime) {
var preTime = undefined;
if (this.preClickTime && this.preTouchTime) {
preTime = Math.min(this.preClickTime, this.preTouchTime);
} else if (this.preClickTime) {
preTime = this.preClickTime;
} else if (this.preTouchTime) {
preTime = this.preTouchTime;
}
if (Math.abs(preTime - this.focusTime) < 20) {
return;
}
this.focusTime = 0;
}
this.preClickTime = 0;
this.preTouchTime = 0;
e.preventDefault();
if (this.state.visible) {
this.setVisible(false);
} else {
this.setVisible(true);
}
}
}, {
key: 'onDocumentClick',
value: function onDocumentClick(e) {
var target = e.target;
var root = _react2['default'].findDOMNode(this);
var popupNode = this.getPopupDomNode();
if (!_rcUtil2['default'].Dom.contains(root, target) && !_rcUtil2['default'].Dom.contains(popupNode, target)) {
this.setVisible(false);
}
}
}, {
key: 'getPopupDomNode',
value: function getPopupDomNode() {
// for test
return this.refs.popup ? this.refs.popup.getPopupDomNode() : this.popupInstance.getPopupDomNode();
}
}, {
key: 'getTipContainer',
value: function getTipContainer() {
if (!this.tipContainer) {
this.tipContainer = document.createElement('div');
document.body.appendChild(this.tipContainer);
}
return this.tipContainer;
}
}, {
key: 'getPopupElement',
value: function getPopupElement() {
if (!this.popupRendered) {
return null;
}
var props = this.props;
var state = this.state;
var ref = {};
if (!props.renderPopupToBody) {
ref.ref = 'popup';
}
return _react2['default'].createElement(
_Popup2['default'],
_extends({ prefixCls: props.prefixCls
}, ref, {
visible: state.visible,
trigger: props.trigger,
placement: props.placement,
animation: props.animation,
wrap: this,
style: props.overlayStyle,
transitionName: props.transitionName }),
props.overlay
);
}
}, {
key: 'render',
value: function render() {
if (this.state.visible) {
this.popupRendered = true;
}
var props = this.props;
var children = props.children;
var child = _react2['default'].Children.only(children);
var childProps = child.props || {};
var newChildProps = {};
var trigger = props.trigger;
var mouseProps = {};
if (trigger.indexOf('click') !== -1) {
newChildProps.onClick = (0, _rcUtil.createChainedFunction)(this.onClick, childProps.onClick);
newChildProps.onMouseDown = (0, _rcUtil.createChainedFunction)(this.onMouseDown, childProps.onMouseDown);
newChildProps.onTouchStart = (0, _rcUtil.createChainedFunction)(this.onTouchStart, childProps.onTouchStart);
}
if (trigger.indexOf('hover') !== -1) {
mouseProps.onMouseEnter = (0, _rcUtil.createChainedFunction)(this.onMouseEnter, childProps.onMouseEnter);
mouseProps.onMouseLeave = (0, _rcUtil.createChainedFunction)(this.onMouseLeave, childProps.onMouseLeave);
}
if (trigger.indexOf('focus') !== -1) {
newChildProps.onFocus = (0, _rcUtil.createChainedFunction)(this.onFocus, childProps.onFocus);
newChildProps.onBlur = (0, _rcUtil.createChainedFunction)(this.onBlur, childProps.onBlur);
}
var popupElement = props.renderPopupToBody ? null : this.getPopupElement();
var className = props.prefixCls + '-wrap';
if (this.state.visible) {
className += ' ' + props.prefixCls + '-wrap-open';
}
return _react2['default'].createElement(
'span',
_extends({ className: className }, mouseProps, { style: props.wrapStyle }),
_rcUtil2['default'].Children.mapSelf([_react2['default'].cloneElement(child, newChildProps), popupElement])
);
}
}, {
key: 'setVisible',
value: function setVisible(visible) {
if (!('visible' in this.props)) {
this.setState({
visible: visible
});
}
this.props.onVisibleChange(visible);
}
}, {
key: 'delaySetVisible',
value: function delaySetVisible(visible) {
var _this2 = this;
var delay = this.props.delay * 1000;
if (delay) {
if (this.delayTimer) {
clearTimeout(this.delayTimer);
}
this.delayTimer = setTimeout(function () {
_this2.setVisible(visible);
_this2.delayTimer = null;
}, delay);
} else {
this.setVisible(visible);
}
}
}]);
return Tooltip;
})(_react2['default'].Component);
Tooltip.propTypes = {
trigger: _react2['default'].PropTypes.any,
placement: _react2['default'].PropTypes.any,
onVisibleChange: _react2['default'].PropTypes.func,
renderPopupToBody: _react2['default'].PropTypes.bool,
overlay: _react2['default'].PropTypes.node.isRequired,
overlayStyle: _react2['default'].PropTypes.object,
wrapStyle: _react2['default'].PropTypes.object,
delay: _react2['default'].PropTypes.number
};
Tooltip.defaultProps = {
prefixCls: 'rc-tooltip',
renderPopupToBody: true,
onVisibleChange: function onVisibleChange() {},
delay: 0.1,
overlayStyle: {},
wrapStyle: {},
placement: 'right',
trigger: ['hover']
};
exports['default'] = Tooltip;
module.exports = exports['default'];
/***/ },
/* 12 */
/***/ function(module, exports, __webpack_require__) {
module.exports = {
guid: __webpack_require__(13),
classSet: __webpack_require__(14),
joinClasses: __webpack_require__(15),
KeyCode: __webpack_require__(16),
PureRenderMixin: __webpack_require__(17),
shallowEqual: __webpack_require__(18),
createChainedFunction: __webpack_require__(19),
Dom: {
addEventListener: __webpack_require__(20),
contains: __webpack_require__(21)
},
Children: {
toArray: __webpack_require__(22),
mapSelf: __webpack_require__(23)
}
};
/***/ },
/* 13 */
/***/ function(module, exports) {
var seed = 0;
module.exports = function () {
return Date.now() + '_' + (seed++);
};
/***/ },
/* 14 */
/***/ function(module, exports) {
/**
* Copyright 2013-2014, Facebook, Inc.
* All rights reserved.
*
* This file contains an unmodified version of:
* https://github.com/facebook/react/blob/v0.12.0/src/vendor/stubs/cx.js
*
* This source code is licensed under the BSD-style license found here:
* https://github.com/facebook/react/blob/v0.12.0/LICENSE
* An additional grant of patent rights can be found here:
* https://github.com/facebook/react/blob/v0.12.0/PATENTS
*/
/**
* This function is used to mark string literals representing CSS class names
* so that they can be transformed statically. This allows for modularization
* and minification of CSS class names.
*
* In static_upstream, this function is actually implemented, but it should
* eventually be replaced with something more descriptive, and the transform
* that is used in the main stack should be ported for use elsewhere.
*
* @param string|object className to modularize, or an object of key/values.
* In the object case, the values are conditions that
* determine if the className keys should be included.
* @param [string ...] Variable list of classNames in the string case.
* @return string Renderable space-separated CSS className.
*/
function cx(classNames) {
if (typeof classNames === 'object') {
return Object.keys(classNames).filter(function(className) {
return classNames[className];
}).join(' ');
} else {
return Array.prototype.join.call(arguments, ' ');
}
}
module.exports = cx;
/***/ },
/* 15 */
/***/ function(module, exports) {
/**
* Copyright 2013-2014, Facebook, Inc.
* All rights reserved.
*
* This file contains an unmodified version of:
* https://github.com/facebook/react/blob/v0.12.0/src/utils/joinClasses.js
*
* This source code is licensed under the BSD-style license found here:
* https://github.com/facebook/react/blob/v0.12.0/LICENSE
* An additional grant of patent rights can be found here:
* https://github.com/facebook/react/blob/v0.12.0/PATENTS
*/
"use strict";
/**
* Combines multiple className strings into one.
* http://jsperf.com/joinclasses-args-vs-array
*
* @param {...?string} classes
* @return {string}
*/
function joinClasses(className /*, ... */ ) {
if (!className) {
className = '';
}
var nextClass;
var argLength = arguments.length;
if (argLength > 1) {
for (var ii = 1; ii < argLength; ii++) {
nextClass = arguments[ii];
if (nextClass) {
className = (className ? className + ' ' : '') + nextClass;
}
}
}
return className;
}
module.exports = joinClasses;
/***/ },
/* 16 */
/***/ function(module, exports) {
/**
* @ignore
* some key-codes definition and utils from closure-library
* @author yiminghe@gmail.com
*/
var KeyCode = {
/**
* MAC_ENTER
*/
MAC_ENTER: 3,
/**
* BACKSPACE
*/
BACKSPACE: 8,
/**
* TAB
*/
TAB: 9,
/**
* NUMLOCK on FF/Safari Mac
*/
NUM_CENTER: 12, // NUMLOCK on FF/Safari Mac
/**
* ENTER
*/
ENTER: 13,
/**
* SHIFT
*/
SHIFT: 16,
/**
* CTRL
*/
CTRL: 17,
/**
* ALT
*/
ALT: 18,
/**
* PAUSE
*/
PAUSE: 19,
/**
* CAPS_LOCK
*/
CAPS_LOCK: 20,
/**
* ESC
*/
ESC: 27,
/**
* SPACE
*/
SPACE: 32,
/**
* PAGE_UP
*/
PAGE_UP: 33, // also NUM_NORTH_EAST
/**
* PAGE_DOWN
*/
PAGE_DOWN: 34, // also NUM_SOUTH_EAST
/**
* END
*/
END: 35, // also NUM_SOUTH_WEST
/**
* HOME
*/
HOME: 36, // also NUM_NORTH_WEST
/**
* LEFT
*/
LEFT: 37, // also NUM_WEST
/**
* UP
*/
UP: 38, // also NUM_NORTH
/**
* RIGHT
*/
RIGHT: 39, // also NUM_EAST
/**
* DOWN
*/
DOWN: 40, // also NUM_SOUTH
/**
* PRINT_SCREEN
*/
PRINT_SCREEN: 44,
/**
* INSERT
*/
INSERT: 45, // also NUM_INSERT
/**
* DELETE
*/
DELETE: 46, // also NUM_DELETE
/**
* ZERO
*/
ZERO: 48,
/**
* ONE
*/
ONE: 49,
/**
* TWO
*/
TWO: 50,
/**
* THREE
*/
THREE: 51,
/**
* FOUR
*/
FOUR: 52,
/**
* FIVE
*/
FIVE: 53,
/**
* SIX
*/
SIX: 54,
/**
* SEVEN
*/
SEVEN: 55,
/**
* EIGHT
*/
EIGHT: 56,
/**
* NINE
*/
NINE: 57,
/**
* QUESTION_MARK
*/
QUESTION_MARK: 63, // needs localization
/**
* A
*/
A: 65,
/**
* B
*/
B: 66,
/**
* C
*/
C: 67,
/**
* D
*/
D: 68,
/**
* E
*/
E: 69,
/**
* F
*/
F: 70,
/**
* G
*/
G: 71,
/**
* H
*/
H: 72,
/**
* I
*/
I: 73,
/**
* J
*/
J: 74,
/**
* K
*/
K: 75,
/**
* L
*/
L: 76,
/**
* M
*/
M: 77,
/**
* N
*/
N: 78,
/**
* O
*/
O: 79,
/**
* P
*/
P: 80,
/**
* Q
*/
Q: 81,
/**
* R
*/
R: 82,
/**
* S
*/
S: 83,
/**
* T
*/
T: 84,
/**
* U
*/
U: 85,
/**
* V
*/
V: 86,
/**
* W
*/
W: 87,
/**
* X
*/
X: 88,
/**
* Y
*/
Y: 89,
/**
* Z
*/
Z: 90,
/**
* META
*/
META: 91, // WIN_KEY_LEFT
/**
* WIN_KEY_RIGHT
*/
WIN_KEY_RIGHT: 92,
/**
* CONTEXT_MENU
*/
CONTEXT_MENU: 93,
/**
* NUM_ZERO
*/
NUM_ZERO: 96,
/**
* NUM_ONE
*/
NUM_ONE: 97,
/**
* NUM_TWO
*/
NUM_TWO: 98,
/**
* NUM_THREE
*/
NUM_THREE: 99,
/**
* NUM_FOUR
*/
NUM_FOUR: 100,
/**
* NUM_FIVE
*/
NUM_FIVE: 101,
/**
* NUM_SIX
*/
NUM_SIX: 102,
/**
* NUM_SEVEN
*/
NUM_SEVEN: 103,
/**
* NUM_EIGHT
*/
NUM_EIGHT: 104,
/**
* NUM_NINE
*/
NUM_NINE: 105,
/**
* NUM_MULTIPLY
*/
NUM_MULTIPLY: 106,
/**
* NUM_PLUS
*/
NUM_PLUS: 107,
/**
* NUM_MINUS
*/
NUM_MINUS: 109,
/**
* NUM_PERIOD
*/
NUM_PERIOD: 110,
/**
* NUM_DIVISION
*/
NUM_DIVISION: 111,
/**
* F1
*/
F1: 112,
/**
* F2
*/
F2: 113,
/**
* F3
*/
F3: 114,
/**
* F4
*/
F4: 115,
/**
* F5
*/
F5: 116,
/**
* F6
*/
F6: 117,
/**
* F7
*/
F7: 118,
/**
* F8
*/
F8: 119,
/**
* F9
*/
F9: 120,
/**
* F10
*/
F10: 121,
/**
* F11
*/
F11: 122,
/**
* F12
*/
F12: 123,
/**
* NUMLOCK
*/
NUMLOCK: 144,
/**
* SEMICOLON
*/
SEMICOLON: 186, // needs localization
/**
* DASH
*/
DASH: 189, // needs localization
/**
* EQUALS
*/
EQUALS: 187, // needs localization
/**
* COMMA
*/
COMMA: 188, // needs localization
/**
* PERIOD
*/
PERIOD: 190, // needs localization
/**
* SLASH
*/
SLASH: 191, // needs localization
/**
* APOSTROPHE
*/
APOSTROPHE: 192, // needs localization
/**
* SINGLE_QUOTE
*/
SINGLE_QUOTE: 222, // needs localization
/**
* OPEN_SQUARE_BRACKET
*/
OPEN_SQUARE_BRACKET: 219, // needs localization
/**
* BACKSLASH
*/
BACKSLASH: 220, // needs localization
/**
* CLOSE_SQUARE_BRACKET
*/
CLOSE_SQUARE_BRACKET: 221, // needs localization
/**
* WIN_KEY
*/
WIN_KEY: 224,
/**
* MAC_FF_META
*/
MAC_FF_META: 224, // Firefox (Gecko) fires this for the meta key instead of 91
/**
* WIN_IME
*/
WIN_IME: 229
};
/*
whether text and modified key is entered at the same time.
*/
KeyCode.isTextModifyingKeyEvent = function (e) {
var keyCode = e.keyCode;
if (e.altKey && !e.ctrlKey || e.metaKey ||
// Function keys don't generate text
keyCode >= KeyCode.F1 && keyCode <= KeyCode.F12) {
return false;
}
// The following keys are quite harmless, even in combination with
// CTRL, ALT or SHIFT.
switch (keyCode) {
case KeyCode.ALT:
case KeyCode.CAPS_LOCK:
case KeyCode.CONTEXT_MENU:
case KeyCode.CTRL:
case KeyCode.DOWN:
case KeyCode.END:
case KeyCode.ESC:
case KeyCode.HOME:
case KeyCode.INSERT:
case KeyCode.LEFT:
case KeyCode.MAC_FF_META:
case KeyCode.META:
case KeyCode.NUMLOCK:
case KeyCode.NUM_CENTER:
case KeyCode.PAGE_DOWN:
case KeyCode.PAGE_UP:
case KeyCode.PAUSE:
case KeyCode.PRINT_SCREEN:
case KeyCode.RIGHT:
case KeyCode.SHIFT:
case KeyCode.UP:
case KeyCode.WIN_KEY:
case KeyCode.WIN_KEY_RIGHT:
return false;
default:
return true;
}
};
/*
whether character is entered.
*/
KeyCode.isCharacterKey = function (keyCode) {
if (keyCode >= KeyCode.ZERO &&
keyCode <= KeyCode.NINE) {
return true;
}
if (keyCode >= KeyCode.NUM_ZERO &&
keyCode <= KeyCode.NUM_MULTIPLY) {
return true;
}
if (keyCode >= KeyCode.A &&
keyCode <= KeyCode.Z) {
return true;
}
// Safari sends zero key code for non-latin characters.
if (window.navigation.userAgent.indexOf('WebKit') !== -1 && keyCode === 0) {
return true;
}
switch (keyCode) {
case KeyCode.SPACE:
case KeyCode.QUESTION_MARK:
case KeyCode.NUM_PLUS:
case KeyCode.NUM_MINUS:
case KeyCode.NUM_PERIOD:
case KeyCode.NUM_DIVISION:
case KeyCode.SEMICOLON:
case KeyCode.DASH:
case KeyCode.EQUALS:
case KeyCode.COMMA:
case KeyCode.PERIOD:
case KeyCode.SLASH:
case KeyCode.APOSTROPHE:
case KeyCode.SINGLE_QUOTE:
case KeyCode.OPEN_SQUARE_BRACKET:
case KeyCode.BACKSLASH:
case KeyCode.CLOSE_SQUARE_BRACKET:
return true;
default:
return false;
}
};
module.exports = KeyCode;
/***/ },
/* 17 */
/***/ function(module, exports, __webpack_require__) {
/**
* Copyright 2013-2014, 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 ReactComponentWithPureRenderMixin
*/
"use strict";
var shallowEqual = __webpack_require__(18);
/**
* If your React component's render function is "pure", e.g. it will render the
* same result given the same props and state, provide this Mixin for a
* considerable performance boost.
*
* Most React components have pure render functions.
*
* Example:
*
* var ReactComponentWithPureRenderMixin =
* require('ReactComponentWithPureRenderMixin');
* React.createClass({
* mixins: [ReactComponentWithPureRenderMixin],
*
* render: function() {
* return <div className={this.props.className}>foo</div>;
* }
* });
*
* Note: This only checks shallow equality for props and state. If these contain
* complex data structures this mixin may have false-negatives for deeper
* differences. Only mixin to components which have simple props and state, or
* use `forceUpdate()` when you know deep data structures have changed.
*/
var ReactComponentWithPureRenderMixin = {
shouldComponentUpdate: function(nextProps, nextState) {
return !shallowEqual(this.props, nextProps) ||
!shallowEqual(this.state, nextState);
}
};
module.exports = ReactComponentWithPureRenderMixin;
/***/ },
/* 18 */
/***/ function(module, exports) {
/**
* Copyright 2013-2014, 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 shallowEqual
*/
"use strict";
/**
* Performs equality by iterating through keys on an object and returning
* false when any key has values which are not strictly equal between
* objA and objB. Returns true when the values of all keys are strictly equal.
*
* @return {boolean}
*/
function shallowEqual(objA, objB) {
if (objA === objB) {
return true;
}
var key;
// Test for A's keys different from B.
for (key in objA) {
if (objA.hasOwnProperty(key) &&
(!objB.hasOwnProperty(key) || objA[key] !== objB[key])) {
return false;
}
}
// Test for B's keys missing from A.
for (key in objB) {
if (objB.hasOwnProperty(key) && !objA.hasOwnProperty(key)) {
return false;
}
}
return true;
}
module.exports = shallowEqual;
/***/ },
/* 19 */
/***/ function(module, exports) {
/**
* Safe chained function
*
* Will only create a new function if needed,
* otherwise will pass back existing functions or null.
*
* @returns {function|null}
*/
function createChainedFunction() {
var args = arguments;
return function chainedFunction() {
for (var i = 0; i < args.length; i++) {
if (args[i] && args[i].apply) {
args[i].apply(this, arguments);
}
}
};
}
module.exports = createChainedFunction;
/***/ },
/* 20 */
/***/ function(module, exports) {
module.exports = function (target, eventType, callback) {
if (target.addEventListener) {
target.addEventListener(eventType, callback, false);
return {
remove: function () {
target.removeEventListener(eventType, callback, false);
}
};
} else if (target.attachEvent) {
target.attachEvent('on' + eventType, callback);
return {
remove: function () {
target.detachEvent('on' + eventType, callback);
}
};
}
};
/***/ },
/* 21 */
/***/ function(module, exports) {
module.exports = function (root, node) {
while (node) {
if (node === root) {
return true;
}
node = node.parentNode;
}
return false;
};
/***/ },
/* 22 */
/***/ function(module, exports, __webpack_require__) {
var React = __webpack_require__(9);
module.exports = function (children) {
var ret = [];
React.Children.forEach(children, function (c) {
ret.push(c);
});
return ret;
};
/***/ },
/* 23 */
/***/ function(module, exports, __webpack_require__) {
var React = __webpack_require__(9);
function mirror(o) {
return o;
}
module.exports = function (children) {
// return ReactFragment
return React.Children.map(children, mirror);
};
/***/ },
/* 24 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
Object.defineProperty(exports, '__esModule', {
value: true
});
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
var _react = __webpack_require__(9);
var _react2 = _interopRequireDefault(_react);
var _utils = __webpack_require__(25);
var _rcAlign = __webpack_require__(26);
var _rcAlign2 = _interopRequireDefault(_rcAlign);
var _rcAnimate = __webpack_require__(30);
var _rcAnimate2 = _interopRequireDefault(_rcAnimate);
var placementAlignMap = {
left: { points: ['cr', 'cl'] },
right: { points: ['cl', 'cr'] },
top: { points: ['bc', 'tc'] },
bottom: { points: ['tc', 'bc'] }
};
var Popup = _react2['default'].createClass({
displayName: 'Popup',
propTypes: {
visible: _react2['default'].PropTypes.bool,
wrap: _react2['default'].PropTypes.object,
style: _react2['default'].PropTypes.object
},
// optimize for speed
shouldComponentUpdate: function shouldComponentUpdate(nextProps) {
return this.props.visible || nextProps.visible;
},
onAlign: function onAlign(popupDomNode, align) {
var props = this.props;
var placement = props.placement;
if (placement && placement.points) {
var originalClassName = (0, _utils.getToolTipClassByPlacement)(props.prefixCls, placement);
var nextClassName = (0, _utils.getToolTipClassByPlacement)(props.prefixCls, align);
if (nextClassName !== originalClassName) {
popupDomNode.className = popupDomNode.className.replace(originalClassName, nextClassName);
}
}
},
getPopupDomNode: function getPopupDomNode() {
return _react2['default'].findDOMNode(this);
},
getTarget: function getTarget() {
return _react2['default'].findDOMNode(this.props.wrap).firstChild;
},
getTransitionName: function getTransitionName() {
var props = this.props;
var transitionName = props.transitionName;
if (!transitionName && props.animation) {
transitionName = props.prefixCls + '-' + props.animation;
}
return transitionName;
},
render: function render() {
var props = this.props;
var className = (0, _utils.getToolTipClassByPlacement)(props.prefixCls, props.placement);
if (props.className) {
className += ' ' + props.className;
}
var style = this.props.style;
if (!props.visible) {
className += ' ' + props.prefixCls + '-hidden';
}
var arrowClassName = props.prefixCls + '-arrow';
var innerClassname = props.prefixCls + '-inner';
var placement = props.placement;
var align = undefined;
if (placement && placement.points) {
align = placement;
} else {
align = placementAlignMap[placement];
}
return _react2['default'].createElement(
_rcAnimate2['default'],
{ component: '',
exclusive: true,
animateMount: true,
transitionName: this.getTransitionName(),
showProp: 'data-visible' },
_react2['default'].createElement(
_rcAlign2['default'],
{ target: this.getTarget,
key: 'popup',
'data-visible': props.visible,
disabled: !props.visible,
align: align,
onAlign: this.onAlign },
_react2['default'].createElement(
'div',
{ className: className,
style: style },
_react2['default'].createElement('div', { className: arrowClassName }),
_react2['default'].createElement(
'div',
{ className: innerClassname },
props.children
)
)
)
);
}
});
exports['default'] = Popup;
module.exports = exports['default'];
/***/ },
/* 25 */
/***/ function(module, exports) {
'use strict';
Object.defineProperty(exports, '__esModule', {
value: true
});
exports.getToolTipClassByPlacement = getToolTipClassByPlacement;
function getToolTipClassByPlacement(prefixCls, placement) {
if (typeof placement === 'string') {
return prefixCls + ' ' + prefixCls + '-placement-' + placement;
}
var offset = placement.offset || [0, 0];
var offsetClass = '';
if (offset && offset.length) {
offsetClass = prefixCls + '-placement-offset-x-' + offset[0] + ' ' + prefixCls + '-placement-offset-y-' + offset[1];
}
var points = placement.points;
return prefixCls + ' ' + offsetClass + ' ' + prefixCls + '-placement-points-' + points[0] + '-' + points[1];
}
/***/ },
/* 26 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
// export this package's api
Object.defineProperty(exports, '__esModule', {
value: true
});
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
var _Align = __webpack_require__(27);
var _Align2 = _interopRequireDefault(_Align);
exports['default'] = _Align2['default'];
module.exports = exports['default'];
/***/ },
/* 27 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
Object.defineProperty(exports, '__esModule', {
value: true
});
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 _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; desc = parent = getter = undefined; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
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 _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 _react = __webpack_require__(9);
var _react2 = _interopRequireDefault(_react);
var _domAlign = __webpack_require__(28);
var _domAlign2 = _interopRequireDefault(_domAlign);
var _rcUtil = __webpack_require__(12);
var _rcUtil2 = _interopRequireDefault(_rcUtil);
function isWindow(obj) {
/*eslint-disable eqeqeq */
return obj != null && obj == obj.window;
/*eslint-enable eqeqeq */
}
function buffer(fn, ms) {
var timer;
return function () {
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(fn, ms);
};
}
var Align = (function (_React$Component) {
_inherits(Align, _React$Component);
function Align(props) {
_classCallCheck(this, Align);
_get(Object.getPrototypeOf(Align.prototype), 'constructor', this).apply(this, arguments);
this.handleWindowResize = this.handleWindowResize.bind(this);
}
_createClass(Align, [{
key: 'componentDidMount',
value: function componentDidMount() {
var props = this.props;
// if parent ref not attached .... use document.getElementById
if (!props.disabled) {
var source = _react2['default'].findDOMNode(this);
props.onAlign(source, (0, _domAlign2['default'])(source, props.target(), props.align));
if (props.monitorWindowResize) {
this.startMonitorWindowResize();
}
}
}
}, {
key: 'startMonitorWindowResize',
value: function startMonitorWindowResize() {
if (!this.resizeHandler) {
this.resizeHandler = _rcUtil2['default'].Dom.addEventListener(window, 'resize', buffer(this.handleWindowResize, this.props.monitorBufferTime));
}
}
}, {
key: 'stopMonitorWindowResize',
value: function stopMonitorWindowResize() {
if (this.resizeHandler) {
this.resizeHandler.remove();
this.resizeHandler = null;
}
}
}, {
key: 'handleWindowResize',
value: function handleWindowResize() {
var props = this.props;
if (!props.disabled) {
var source = _react2['default'].findDOMNode(this);
props.onAlign(source, (0, _domAlign2['default'])(source, props.target(), props.align));
}
}
}, {
key: 'componentWillUnmount',
value: function componentWillUnmount() {
this.stopMonitorWindowResize();
}
}, {
key: 'componentDidUpdate',
value: function componentDidUpdate(prevProps) {
var reAlign = false;
var props = this.props;
var currentTarget;
if (!props.disabled) {
if (prevProps.disabled || prevProps.align !== props.align) {
reAlign = true;
currentTarget = props.target();
} else {
var lastTarget = prevProps.target();
currentTarget = props.target();
if (isWindow(lastTarget) && isWindow(currentTarget)) {
reAlign = false;
} else if (lastTarget !== currentTarget) {
reAlign = true;
}
}
}
if (reAlign) {
var source = _react2['default'].findDOMNode(this);
props.onAlign(source, (0, _domAlign2['default'])(source, currentTarget, props.align));
}
if (props.monitorWindowResize && !props.disabled) {
this.startMonitorWindowResize();
} else {
this.stopMonitorWindowResize();
}
}
}, {
key: 'render',
value: function render() {
return _react2['default'].Children.only(this.props.children);
}
}]);
return Align;
})(_react2['default'].Component);
Align.defaultProps = {
target: function target() {
return window;
},
onAlign: function onAlign() {},
monitorBufferTime: 50,
monitorWindowResize: false,
disabled: false
};
Align.PropTypes = {
align: _react2['default'].PropTypes.object.isRequired,
target: _react2['default'].PropTypes.func,
onAlign: _react2['default'].PropTypes.func,
monitorBufferTime: _react2['default'].PropTypes.number,
monitorWindowResize: _react2['default'].PropTypes.bool,
disabled: _react2['default'].PropTypes.bool
};
exports['default'] = Align;
module.exports = exports['default'];
/***/ },
/* 28 */
/***/ function(module, exports, __webpack_require__) {
/**
* align dom node flexibly
* @author yiminghe@gmail.com
*/
'use strict';
var utils = __webpack_require__(29);
// http://yiminghe.iteye.com/blog/1124720
/**
* 获取 node 上的 align 对齐点 相对于页面的坐标
*/
function getAlignOffset(region, align) {
var V = align.charAt(0),
H = align.charAt(1),
w = region.width,
h = region.height,
x,
y;
x = region.left;
y = region.top;
if (V === 'c') {
y += h / 2;
} else if (V === 'b') {
y += h;
}
if (H === 'c') {
x += w / 2;
} else if (H === 'r') {
x += w;
}
return {
left: x,
top: y
};
}
/**
* 得到会导致元素显示不全的祖先元素
*/
function getOffsetParent(element) {
// ie 这个也不是完全可行
/*
<div style="width: 50px;height: 100px;overflow: hidden">
<div style="width: 50px;height: 100px;position: relative;" id="d6">
元素 6 高 100px 宽 50px<br/>
</div>
</div>
*/
// element.offsetParent does the right thing in ie7 and below. Return parent with layout!
// In other browsers it only includes elements with position absolute, relative or
// fixed, not elements with overflow set to auto or scroll.
// if (UA.ie && ieMode < 8) {
// return element.offsetParent;
// }
// 统一的 offsetParent 方法
var doc = element.ownerDocument,
body = doc.body,
parent,
positionStyle = utils.css(element, 'position'),
skipStatic = positionStyle === 'fixed' || positionStyle === 'absolute';
if (!skipStatic) {
return element.nodeName.toLowerCase() === 'html' ? null : element.parentNode;
}
for (parent = element.parentNode; parent && parent !== body; parent = parent.parentNode) {
positionStyle = utils.css(parent, 'position');
if (positionStyle !== 'static') {
return parent;
}
}
return null;
}
/**
* 获得元素的显示部分的区域
*/
function getVisibleRectForElement(element) {
var visibleRect = {
left: 0,
right: Infinity,
top: 0,
bottom: Infinity
},
el = element,
scrollX,
scrollY,
winSize,
doc = element.ownerDocument,
win = doc.defaultView || doc.parentWindow,
body = doc.body,
documentElement = doc.documentElement;
// Determine the size of the visible rect by climbing the dom accounting for
// all scrollable containers.
while (el) {
// clientWidth is zero for inline block elements in ie.
if ((navigator.userAgent.indexOf('MSIE') === -1 || el.clientWidth !== 0) && (el !== body && el !== documentElement && utils.css(el, 'overflow') !== 'visible')) {
var pos = utils.offset(el);
// add border
pos.left += el.clientLeft;
pos.top += el.clientTop;
visibleRect.top = Math.max(visibleRect.top, pos.top);
visibleRect.right = Math.min(visibleRect.right,
// consider area without scrollBar
pos.left + el.clientWidth);
visibleRect.bottom = Math.min(visibleRect.bottom, pos.top + el.clientHeight);
visibleRect.left = Math.max(visibleRect.left, pos.left);
} else if (el === body || el === documentElement) {
break;
}
el = getOffsetParent(el);
}
// Clip by window's viewport.
scrollX = utils.getWindowScrollLeft(win);
scrollY = utils.getWindowScrollTop(win);
visibleRect.left = Math.max(visibleRect.left, scrollX);
visibleRect.top = Math.max(visibleRect.top, scrollY);
winSize = {
width: utils.viewportWidth(win),
height: utils.viewportHeight(win)
};
visibleRect.right = Math.min(visibleRect.right, scrollX + winSize.width);
visibleRect.bottom = Math.min(visibleRect.bottom, scrollY + winSize.height);
return visibleRect.top >= 0 && visibleRect.left >= 0 && visibleRect.bottom > visibleRect.top && visibleRect.right > visibleRect.left ? visibleRect : null;
}
function getElFuturePos(elRegion, refNodeRegion, points, offset) {
var xy, diff, p1, p2;
xy = {
left: elRegion.left,
top: elRegion.top
};
p1 = getAlignOffset(refNodeRegion, points[1]);
p2 = getAlignOffset(elRegion, points[0]);
diff = [p2.left - p1.left, p2.top - p1.top];
return {
left: xy.left - diff[0] + +offset[0],
top: xy.top - diff[1] + +offset[1]
};
}
function isFailX(elFuturePos, elRegion, visibleRect) {
return elFuturePos.left < visibleRect.left || elFuturePos.left + elRegion.width > visibleRect.right;
}
function isFailY(elFuturePos, elRegion, visibleRect) {
return elFuturePos.top < visibleRect.top || elFuturePos.top + elRegion.height > visibleRect.bottom;
}
function adjustForViewport(elFuturePos, elRegion, visibleRect, overflow) {
var pos = utils.clone(elFuturePos),
size = {
width: elRegion.width,
height: elRegion.height
};
if (overflow.adjustX && pos.left < visibleRect.left) {
pos.left = visibleRect.left;
}
// Left edge inside and right edge outside viewport, try to resize it.
if (overflow.resizeWidth && pos.left >= visibleRect.left && pos.left + size.width > visibleRect.right) {
size.width -= pos.left + size.width - visibleRect.right;
}
// Right edge outside viewport, try to move it.
if (overflow.adjustX && pos.left + size.width > visibleRect.right) {
// 保证左边界和可视区域左边界对齐
pos.left = Math.max(visibleRect.right - size.width, visibleRect.left);
}
// Top edge outside viewport, try to move it.
if (overflow.adjustY && pos.top < visibleRect.top) {
pos.top = visibleRect.top;
}
// Top edge inside and bottom edge outside viewport, try to resize it.
if (overflow.resizeHeight && pos.top >= visibleRect.top && pos.top + size.height > visibleRect.bottom) {
size.height -= pos.top + size.height - visibleRect.bottom;
}
// Bottom edge outside viewport, try to move it.
if (overflow.adjustY && pos.top + size.height > visibleRect.bottom) {
// 保证上边界和可视区域上边界对齐
pos.top = Math.max(visibleRect.bottom - size.height, visibleRect.top);
}
return utils.mix(pos, size);
}
function flip(points, reg, map) {
var ret = [];
utils.each(points, function (p) {
ret.push(p.replace(reg, function (m) {
return map[m];
}));
});
return ret;
}
function flipOffset(offset, index) {
offset[index] = -offset[index];
return offset;
}
function getRegion(node) {
var offset, w, h;
if (!utils.isWindow(node) && node.nodeType !== 9) {
offset = utils.offset(node);
w = utils.outerWidth(node);
h = utils.outerHeight(node);
} else {
var win = utils.getWindow(node);
offset = {
left: utils.getWindowScrollLeft(win),
top: utils.getWindowScrollTop(win)
};
w = utils.viewportWidth(win);
h = utils.viewportHeight(win);
}
offset.width = w;
offset.height = h;
return offset;
}
/*
* align node
* @param {Element} node current dom node
* @param {Object} align align config
*
* @example
* {
* node: null, // 参考元素, falsy 或 window 为可视区域, 'trigger' 为触发元素, 其他为指定元素
* points: ['cc','cc'], // ['tr', 'tl'] 表示 overlay 的 tr 与参考节点的 tl 对齐
* offset: [0, 0] // 有效值为 [n, m]
* }
*/
function domAlign(el, refNode, align) {
var points = align.points;
var offset = align.offset;
var overflow = align.overflow;
offset = offset && [].concat(offset) || [0, 0];
overflow = overflow || {};
var newOverflowCfg = {};
var fail = 0;
// 当前节点可以被放置的显示区域
var visibleRect = getVisibleRectForElement(el);
// 当前节点所占的区域, left/top/width/height
var elRegion = getRegion(el);
// 参照节点所占的区域, left/top/width/height
var refNodeRegion = getRegion(refNode);
// 当前节点将要被放置的位置
var elFuturePos = getElFuturePos(elRegion, refNodeRegion, points, offset);
// 当前节点将要所处的区域
var newElRegion = utils.merge(elRegion, elFuturePos);
// 如果可视区域不能完全放置当前节点时允许调整
if (visibleRect && (overflow.adjustX || overflow.adjustY)) {
if (overflow.adjustX) {
// 如果横向不能放下
if (isFailX(elFuturePos, elRegion, visibleRect)) {
fail = 1;
// 对齐位置反下
points = flip(points, /[lr]/ig, {
l: 'r',
r: 'l'
});
// 偏移量也反下
offset = flipOffset(offset, 0);
}
}
if (overflow.adjustY) {
// 如果纵向不能放下
if (isFailY(elFuturePos, elRegion, visibleRect)) {
fail = 1;
// 对齐位置反下
points = flip(points, /[tb]/ig, {
t: 'b',
b: 't'
});
// 偏移量也反下
offset = flipOffset(offset, 1);
}
}
// 如果失败,重新计算当前节点将要被放置的位置
if (fail) {
elFuturePos = getElFuturePos(elRegion, refNodeRegion, points, offset);
utils.mix(newElRegion, elFuturePos);
}
// 检查反下后的位置是否可以放下了
// 如果仍然放不下只有指定了可以调整当前方向才调整
newOverflowCfg.adjustX = overflow.adjustX && isFailX(elFuturePos, elRegion, visibleRect);
newOverflowCfg.adjustY = overflow.adjustY && isFailY(elFuturePos, elRegion, visibleRect);
// 确实要调整,甚至可能会调整高度宽度
if (newOverflowCfg.adjustX || newOverflowCfg.adjustY) {
newElRegion = adjustForViewport(elFuturePos, elRegion, visibleRect, newOverflowCfg);
}
}
// https://github.com/kissyteam/kissy/issues/190
// http://localhost:8888/kissy/src/overlay/demo/other/relative_align/align.html
// 相对于屏幕位置没变,而 left/top 变了
// 例如 <div 'relative'><el absolute></div>
utils.offset(el, { left: newElRegion.left, top: newElRegion.top });
// need judge to in case set fixed with in css on height auto element
if (newElRegion.width !== elRegion.width) {
utils.css(el, 'width', el.width() + newElRegion.width - elRegion.width);
}
if (newElRegion.height !== elRegion.height) {
utils.css(el, 'height', el.height() + newElRegion.height - elRegion.height);
}
return {
points: points,
offset: offset,
overflow: newOverflowCfg
};
}
domAlign.__getOffsetParent = getOffsetParent;
domAlign.__getVisibleRectForElement = getVisibleRectForElement;
module.exports = domAlign;
/**
* 2012-04-26 yiminghe@gmail.com
* - 优化智能对齐算法
* - 慎用 resizeXX
*
* 2011-07-13 yiminghe@gmail.com note:
* - 增加智能对齐,以及大小调整选项
**/
// body may have overflow set on it, yet we still get the entire
// viewport. In some browsers, el.offsetParent may be
// document.documentElement, so check for that too.
/***/ },
/* 29 */
/***/ function(module, exports) {
'use strict';
var RE_NUM = /[\-+]?(?:\d*\.|)\d+(?:[eE][\-+]?\d+|)/.source;
var getComputedStyleX;
function css(el, name, value) {
if (typeof name === 'object') {
for (var i in name) {
css(el, i, name[i]);
}
return undefined;
}
if (typeof value !== 'undefined') {
if (typeof value === 'number') {
value = value + 'px';
}
el.style[name] = value;
return undefined;
} else {
return getComputedStyleX(el, name);
}
}
function getClientPosition(elem) {
var box, x, y;
var doc = elem.ownerDocument;
var body = doc.body;
var docElem = doc && doc.documentElement;
// 根据 GBS 最新数据,A-Grade Browsers 都已支持 getBoundingClientRect 方法,不用再考虑传统的实现方式
box = elem.getBoundingClientRect();
// 注:jQuery 还考虑减去 docElem.clientLeft/clientTop
// 但测试发现,这样反而会导致当 html 和 body 有边距/边框样式时,获取的值不正确
// 此外,ie6 会忽略 html 的 margin 值,幸运地是没有谁会去设置 html 的 margin
x = box.left;
y = box.top;
// In IE, most of the time, 2 extra pixels are added to the top and left
// due to the implicit 2-pixel inset border. In IE6/7 quirks mode and
// IE6 standards mode, this border can be overridden by setting the
// document element's border to zero -- thus, we cannot rely on the
// offset always being 2 pixels.
// In quirks mode, the offset can be determined by querying the body's
// clientLeft/clientTop, but in standards mode, it is found by querying
// the document element's clientLeft/clientTop. Since we already called
// getClientBoundingRect we have already forced a reflow, so it is not
// too expensive just to query them all.
// ie 下应该减去窗口的边框吧,毕竟默认 absolute 都是相对窗口定位的
// 窗口边框标准是设 documentElement ,quirks 时设置 body
// 最好禁止在 body 和 html 上边框 ,但 ie < 9 html 默认有 2px ,减去
// 但是非 ie 不可能设置窗口边框,body html 也不是窗口 ,ie 可以通过 html,body 设置
// 标准 ie 下 docElem.clientTop 就是 border-top
// ie7 html 即窗口边框改变不了。永远为 2
// 但标准 firefox/chrome/ie9 下 docElem.clientTop 是窗口边框,即使设了 border-top 也为 0
x -= docElem.clientLeft || body.clientLeft || 0;
y -= docElem.clientTop || body.clientTop || 0;
return { left: x, top: y };
}
function getScroll(w, top) {
var ret = w['page' + (top ? 'Y' : 'X') + 'Offset'];
var method = 'scroll' + (top ? 'Top' : 'Left');
if (typeof ret !== 'number') {
var d = w.document;
//ie6,7,8 standard mode
ret = d.documentElement[method];
if (typeof ret !== 'number') {
//quirks mode
ret = d.body[method];
}
}
return ret;
}
function getScrollLeft(w) {
return getScroll(w);
}
function getScrollTop(w) {
return getScroll(w, true);
}
function getOffset(el) {
var pos = getClientPosition(el);
var doc = el.ownerDocument;
var w = doc.defaultView || doc.parentWindow;
pos.left += getScrollLeft(w);
pos.top += getScrollTop(w);
return pos;
}
function _getComputedStyle(elem, name, computedStyle) {
var val = '';
var d = elem.ownerDocument;
// https://github.com/kissyteam/kissy/issues/61
if (computedStyle = computedStyle || d.defaultView.getComputedStyle(elem, null)) {
val = computedStyle.getPropertyValue(name) || computedStyle[name];
}
return val;
}
var _RE_NUM_NO_PX = new RegExp('^(' + RE_NUM + ')(?!px)[a-z%]+$', 'i');
var RE_POS = /^(top|right|bottom|left)$/,
CURRENT_STYLE = 'currentStyle',
RUNTIME_STYLE = 'runtimeStyle',
LEFT = 'left',
PX = 'px';
function _getComputedStyleIE(elem, name) {
// currentStyle maybe null
// http://msdn.microsoft.com/en-us/library/ms535231.aspx
var ret = elem[CURRENT_STYLE] && elem[CURRENT_STYLE][name];
// 当 width/height 设置为百分比时,通过 pixelLeft 方式转换的 width/height 值
// 一开始就处理了! CUSTOM_STYLE.height,CUSTOM_STYLE.width ,cssHook 解决@2011-08-19
// 在 ie 下不对,需要直接用 offset 方式
// borderWidth 等值也有问题,但考虑到 borderWidth 设为百分比的概率很小,这里就不考虑了
// From the awesome hack by Dean Edwards
// http://erik.eae.net/archives/2007/07/27/18.54.15/#comment-102291
// If we're not dealing with a regular pixel number
// but a number that has a weird ending, we need to convert it to pixels
// exclude left right for relativity
if (_RE_NUM_NO_PX.test(ret) && !RE_POS.test(name)) {
// Remember the original values
var style = elem.style,
left = style[LEFT],
rsLeft = elem[RUNTIME_STYLE][LEFT];
// prevent flashing of content
elem[RUNTIME_STYLE][LEFT] = elem[CURRENT_STYLE][LEFT];
// Put in the new values to get a computed value out
style[LEFT] = name === 'fontSize' ? '1em' : ret || 0;
ret = style.pixelLeft + PX;
// Revert the changed values
style[LEFT] = left;
elem[RUNTIME_STYLE][LEFT] = rsLeft;
}
return ret === '' ? 'auto' : ret;
}
if (typeof window !== 'undefined') {
getComputedStyleX = window.getComputedStyle ? _getComputedStyle : _getComputedStyleIE;
}
// 设置 elem 相对 elem.ownerDocument 的坐标
function setOffset(elem, offset) {
// set position first, in-case top/left are set even on static elem
if (css(elem, 'position') === 'static') {
elem.style.position = 'relative';
}
var preset = -9999;
if ('left' in offset) {
elem.style.left = preset + 'px';
}
if ('top' in offset) {
elem.style.top = preset + 'px';
}
var old = getOffset(elem);
var ret = {};
var key;
for (key in offset) {
ret[key] = preset + offset[key] - old[key];
}
css(elem, ret);
}
function each(arr, fn) {
for (var i = 0; i < arr.length; i++) {
fn(arr[i]);
}
}
function isBorderBoxFn(elem) {
return getComputedStyleX(elem, 'boxSizing') === 'border-box';
}
var BOX_MODELS = ['margin', 'border', 'padding'],
CONTENT_INDEX = -1,
PADDING_INDEX = 2,
BORDER_INDEX = 1,
MARGIN_INDEX = 0;
function swap(elem, options, callback) {
var old = {},
style = elem.style,
name;
// Remember the old values, and insert the new ones
for (name in options) {
old[name] = style[name];
style[name] = options[name];
}
callback.call(elem);
// Revert the old values
for (name in options) {
style[name] = old[name];
}
}
function getPBMWidth(elem, props, which) {
var value = 0,
prop,
j,
i;
for (j = 0; j < props.length; j++) {
prop = props[j];
if (prop) {
for (i = 0; i < which.length; i++) {
var cssProp;
if (prop === 'border') {
cssProp = prop + which[i] + 'Width';
} else {
cssProp = prop + which[i];
}
value += parseFloat(getComputedStyleX(elem, cssProp)) || 0;
}
}
}
return value;
}
/**
* A crude way of determining if an object is a window
* @member util
*/
function isWindow(obj) {
// must use == for ie8
/*eslint eqeqeq:0*/
return obj != null && obj == obj.window;
}
var domUtils = {};
each(['Width', 'Height'], function (name) {
domUtils['doc' + name] = function (refWin) {
var d = refWin.document;
return Math.max(
//firefox chrome documentElement.scrollHeight< body.scrollHeight
//ie standard mode : documentElement.scrollHeight> body.scrollHeight
d.documentElement['scroll' + name],
//quirks : documentElement.scrollHeight 最大等于可视窗口多一点?
d.body['scroll' + name], domUtils['viewport' + name](d));
};
domUtils['viewport' + name] = function (win) {
// pc browser includes scrollbar in window.innerWidth
var prop = 'client' + name,
doc = win.document,
body = doc.body,
documentElement = doc.documentElement,
documentElementProp = documentElement[prop];
// 标准模式取 documentElement
// backcompat 取 body
return doc.compatMode === 'CSS1Compat' && documentElementProp || body && body[prop] || documentElementProp;
};
});
/*
得到元素的大小信息
@param elem
@param name
@param {String} [extra] 'padding' : (css width) + padding
'border' : (css width) + padding + border
'margin' : (css width) + padding + border + margin
*/
function getWH(elem, name, extra) {
if (isWindow(elem)) {
return name === 'width' ? domUtils.viewportWidth(elem) : domUtils.viewportHeight(elem);
} else if (elem.nodeType === 9) {
return name === 'width' ? domUtils.docWidth(elem) : domUtils.docHeight(elem);
}
var which = name === 'width' ? ['Left', 'Right'] : ['Top', 'Bottom'],
borderBoxValue = name === 'width' ? elem.offsetWidth : elem.offsetHeight;
var computedStyle = getComputedStyleX(elem);
var isBorderBox = isBorderBoxFn(elem, computedStyle);
var cssBoxValue = 0;
if (borderBoxValue == null || borderBoxValue <= 0) {
borderBoxValue = undefined;
// Fall back to computed then un computed css if necessary
cssBoxValue = getComputedStyleX(elem, name);
if (cssBoxValue == null || Number(cssBoxValue) < 0) {
cssBoxValue = elem.style[name] || 0;
}
// Normalize '', auto, and prepare for extra
cssBoxValue = parseFloat(cssBoxValue) || 0;
}
if (extra === undefined) {
extra = isBorderBox ? BORDER_INDEX : CONTENT_INDEX;
}
var borderBoxValueOrIsBorderBox = borderBoxValue !== undefined || isBorderBox;
var val = borderBoxValue || cssBoxValue;
if (extra === CONTENT_INDEX) {
if (borderBoxValueOrIsBorderBox) {
return val - getPBMWidth(elem, ['border', 'padding'], which, computedStyle);
} else {
return cssBoxValue;
}
} else if (borderBoxValueOrIsBorderBox) {
return val + (extra === BORDER_INDEX ? 0 : extra === PADDING_INDEX ? -getPBMWidth(elem, ['border'], which, computedStyle) : getPBMWidth(elem, ['margin'], which, computedStyle));
} else {
return cssBoxValue + getPBMWidth(elem, BOX_MODELS.slice(extra), which, computedStyle);
}
}
var cssShow = { position: 'absolute', visibility: 'hidden', display: 'block' };
// fix #119 : https://github.com/kissyteam/kissy/issues/119
function getWHIgnoreDisplay(elem) {
var val,
args = arguments;
// in case elem is window
// elem.offsetWidth === undefined
if (elem.offsetWidth !== 0) {
val = getWH.apply(undefined, args);
} else {
swap(elem, cssShow, function () {
val = getWH.apply(undefined, args);
});
}
return val;
}
each(['width', 'height'], function (name) {
var first = name.charAt(0).toUpperCase() + name.slice(1);
domUtils['outer' + first] = function (el, includeMargin) {
return el && getWHIgnoreDisplay(el, name, includeMargin ? MARGIN_INDEX : BORDER_INDEX);
};
var which = name === 'width' ? ['Left', 'Right'] : ['Top', 'Bottom'];
domUtils[name] = function (elem, val) {
if (val !== undefined) {
if (elem) {
var computedStyle = getComputedStyleX(elem);
var isBorderBox = isBorderBoxFn(elem);
if (isBorderBox) {
val += getPBMWidth(elem, ['padding', 'border'], which, computedStyle);
}
return css(elem, name, val);
}
return undefined;
}
return elem && getWHIgnoreDisplay(elem, name, CONTENT_INDEX);
};
});
function mix(to, from) {
for (var i in from) {
to[i] = from[i];
}
return to;
}
var utils = module.exports = {
getWindow: function getWindow(node) {
if (node && node.document && node.setTimeout) {
return node;
}
var doc = node.ownerDocument || node;
return doc.defaultView || doc.parentWindow;
},
offset: function offset(el, value) {
if (typeof value !== 'undefined') {
setOffset(el, value);
} else {
return getOffset(el);
}
},
isWindow: isWindow,
each: each,
css: css,
clone: function clone(obj) {
var i;
var ret = {};
for (i in obj) {
ret[i] = obj[i];
}
var overflow = obj.overflow;
if (overflow) {
for (i in obj) {
ret.overflow[i] = obj.overflow[i];
}
}
return ret;
},
mix: mix,
getWindowScrollLeft: function getWindowScrollLeft(w) {
return getScrollLeft(w);
},
getWindowScrollTop: function getWindowScrollTop(w) {
return getScrollTop(w);
},
merge: function merge() {
var ret = {};
for (var i = 0; i < arguments.length; i++) {
utils.mix(ret, arguments[i]);
}
return ret;
},
viewportWidth: 0,
viewportHeight: 0
};
mix(utils, domUtils);
/***/ },
/* 30 */
/***/ function(module, exports, __webpack_require__) {
// export this package's api
'use strict';
module.exports = __webpack_require__(31);
/***/ },
/* 31 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
Object.defineProperty(exports, '__esModule', {
value: true
});
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
var _react = __webpack_require__(9);
var _react2 = _interopRequireDefault(_react);
var _ChildrenUtils = __webpack_require__(32);
var _ChildrenUtils2 = _interopRequireDefault(_ChildrenUtils);
var _AnimateChild = __webpack_require__(33);
var _AnimateChild2 = _interopRequireDefault(_AnimateChild);
var defaultKey = 'rc_animate_' + Date.now();
function getChildrenFromProps(props) {
var children = props.children;
if (_react2['default'].isValidElement(children)) {
if (!children.key) {
return _react2['default'].cloneElement(children, {
key: defaultKey
});
}
}
return children;
}
var Animate = _react2['default'].createClass({
displayName: 'Animate',
protoTypes: {
component: _react2['default'].PropTypes.any,
animation: _react2['default'].PropTypes.object,
transitionName: _react2['default'].PropTypes.string,
transitionEnter: _react2['default'].PropTypes.bool,
transitionLeave: _react2['default'].PropTypes.bool,
onEnd: _react2['default'].PropTypes.func,
showProp: _react2['default'].PropTypes.bool,
animateMount: _react2['default'].PropTypes.bool
},
getDefaultProps: function getDefaultProps() {
return {
animation: {},
component: 'span',
transitionEnter: true,
transitionLeave: true,
enter: true,
animateMount: false,
onEnd: function onEnd() {}
};
},
getInitialState: function getInitialState() {
this.currentlyAnimatingKeys = {};
this.keysToEnter = [];
this.keysToLeave = [];
return {
children: (0, _ChildrenUtils.toArrayChildren)(getChildrenFromProps(this.props))
};
},
componentWillReceiveProps: function componentWillReceiveProps(nextProps) {
var _this = this;
var nextChildren = (0, _ChildrenUtils.toArrayChildren)(getChildrenFromProps(nextProps));
var props = this.props;
var showProp = props.showProp;
var exclusive = props.exclusive;
var currentlyAnimatingKeys = this.currentlyAnimatingKeys;
// last props children if exclusive
// exclusive needs immediate response
var currentChildren = this.state.children;
var newChildren = _ChildrenUtils2['default'].mergeChildren(currentChildren, nextChildren);
if (showProp && !exclusive) {
newChildren = newChildren.map(function (c) {
if (!c.props[showProp] && (0, _ChildrenUtils.isShownInChildren)(currentChildren, c, showProp)) {
c = _react2['default'].cloneElement(c, _defineProperty({}, showProp, true));
}
return c;
});
}
this.setState({
children: newChildren
});
// exclusive needs immediate response
if (exclusive) {
Object.keys(currentlyAnimatingKeys).forEach(function (key) {
_this.stop(key);
});
currentChildren = (0, _ChildrenUtils.toArrayChildren)(getChildrenFromProps(props));
}
nextChildren.forEach(function (c) {
var key = c.key;
if (currentlyAnimatingKeys[key]) {
return;
}
var hasPrev = (0, _ChildrenUtils.inChildren)(currentChildren, c);
if (showProp) {
if (hasPrev) {
var showInNow = (0, _ChildrenUtils.isShownInChildren)(currentChildren, c, showProp);
var showInNext = c.props[showProp];
if (!showInNow && showInNext) {
_this.keysToEnter.push(key);
}
}
} else if (!hasPrev) {
_this.keysToEnter.push(key);
}
});
currentChildren.forEach(function (c) {
var key = c.key;
if (currentlyAnimatingKeys[key]) {
return;
}
var hasNext = (0, _ChildrenUtils.inChildren)(nextChildren, c);
if (showProp) {
if (hasNext) {
var showInNext = (0, _ChildrenUtils.isShownInChildren)(nextChildren, c, showProp);
var showInNow = c.props[showProp];
if (!showInNext && showInNow) {
_this.keysToLeave.push(key);
}
}
} else if (!hasNext) {
_this.keysToLeave.push(key);
}
});
},
performEnter: function performEnter(key) {
// may already remove by exclusive
if (this.refs[key]) {
this.currentlyAnimatingKeys[key] = true;
this.refs[key].componentWillEnter(this._handleDoneEntering.bind(this, key));
}
},
_handleDoneEntering: function _handleDoneEntering(key) {
delete this.currentlyAnimatingKeys[key];
var currentChildren = (0, _ChildrenUtils.toArrayChildren)(getChildrenFromProps(this.props));
if (!this.isValidChildByKey(currentChildren, key)) {
// exclusive will not need this
this.performLeave(key);
} else {
this.props.onEnd(key, true);
if (this.isMounted() && !(0, _ChildrenUtils.isSameChildren)(this.state.children, currentChildren)) {
this.setState({
children: currentChildren
});
}
}
},
performLeave: function performLeave(key) {
// may already remove by exclusive
if (this.refs[key]) {
this.currentlyAnimatingKeys[key] = true;
this.refs[key].componentWillLeave(this._handleDoneLeaving.bind(this, key));
}
},
isValidChildByKey: function isValidChildByKey(currentChildren, key) {
var showProp = this.props.showProp;
if (showProp) {
return (0, _ChildrenUtils.isShownInChildrenByKey)(currentChildren, key, showProp);
} else {
return (0, _ChildrenUtils.inChildrenByKey)(currentChildren, key);
}
},
_handleDoneLeaving: function _handleDoneLeaving(key) {
delete this.currentlyAnimatingKeys[key];
var currentChildren = (0, _ChildrenUtils.toArrayChildren)(getChildrenFromProps(this.props));
// in case state change is too fast
if (this.isValidChildByKey(currentChildren, key)) {
this.performEnter(key);
} else {
this.props.onEnd(key, false);
if (this.isMounted() && !(0, _ChildrenUtils.isSameChildren)(this.state.children, currentChildren)) {
this.setState({
children: currentChildren
});
}
}
},
stop: function stop(key) {
delete this.currentlyAnimatingKeys[key];
var component = this.refs[key];
if (component) {
component.stop();
}
},
componentDidMount: function componentDidMount() {
if (this.props.animateMount) {
this.state.children.map(function (c) {
return c.key;
}).forEach(this.performEnter);
}
},
componentDidUpdate: function componentDidUpdate() {
var keysToEnter = this.keysToEnter;
this.keysToEnter = [];
keysToEnter.forEach(this.performEnter);
var keysToLeave = this.keysToLeave;
this.keysToLeave = [];
keysToLeave.forEach(this.performLeave);
},
render: function render() {
var props = this.props;
var children = this.state.children.map(function (child) {
if (!child.key) {
throw new Error('must set key for <rc-animate> children');
}
return _react2['default'].createElement(
_AnimateChild2['default'],
{
key: child.key,
ref: child.key,
animation: props.animation,
transitionName: props.transitionName,
transitionEnter: props.transitionEnter,
transitionLeave: props.transitionLeave },
child
);
});
var Component = props.component;
if (Component) {
return _react2['default'].createElement(
Component,
this.props,
children
);
} else {
return children[0] || null;
}
}
});
exports['default'] = Animate;
module.exports = exports['default'];
/***/ },
/* 32 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
Object.defineProperty(exports, '__esModule', {
value: true
});
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
var _react = __webpack_require__(9);
var _react2 = _interopRequireDefault(_react);
function inChildren(children, child) {
var found = 0;
children.forEach(function (c) {
if (found) {
return;
}
found = c.key === child.key;
});
return found;
}
exports['default'] = {
inChildren: inChildren,
toArrayChildren: function toArrayChildren(children) {
var ret = [];
_react2['default'].Children.forEach(children, function (c) {
ret.push(c);
});
return ret;
},
isShownInChildren: function isShownInChildren(children, child, showProp) {
var found = 0;
children.forEach(function (c) {
if (found) {
return;
}
found = c.key === child.key && c.props[showProp];
});
return found;
},
inChildrenByKey: function inChildrenByKey(children, key) {
var found = 0;
if (children) {
children.forEach(function (c) {
if (found) {
return;
}
found = c.key === key;
});
}
return found;
},
isShownInChildrenByKey: function isShownInChildrenByKey(children, key, showProp) {
var found = 0;
if (children) {
children.forEach(function (c) {
if (found) {
return;
}
found = c.key === key && c.props[showProp];
});
}
return found;
},
isSameChildren: function isSameChildren(c1, c2) {
var same = c1.length === c2.length;
if (same) {
c1.forEach(function (c, i) {
if (c !== c2[i]) {
same = false;
}
});
}
return same;
},
mergeChildren: function mergeChildren(prev, next) {
var ret = [];
// For each key of `next`, the list of keys to insert before that key in
// the combined list
var nextChildrenPending = {};
var pendingChildren = [];
prev.forEach(function (c) {
if (inChildren(next, c)) {
if (pendingChildren.length) {
nextChildrenPending[c.key] = pendingChildren;
pendingChildren = [];
}
} else {
pendingChildren.push(c);
}
});
next.forEach(function (c) {
if (nextChildrenPending.hasOwnProperty(c.key)) {
ret = ret.concat(nextChildrenPending[c.key]);
}
ret.push(c);
});
ret = ret.concat(pendingChildren);
return ret;
}
};
module.exports = exports['default'];
/***/ },
/* 33 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
Object.defineProperty(exports, '__esModule', {
value: true
});
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
var _react = __webpack_require__(9);
var _react2 = _interopRequireDefault(_react);
var _cssAnimation = __webpack_require__(34);
var _cssAnimation2 = _interopRequireDefault(_cssAnimation);
var transitionMap = {
enter: 'transitionEnter',
leave: 'transitionLeave'
};
var AnimateChild = _react2['default'].createClass({
displayName: 'AnimateChild',
transition: function transition(animationType, finishCallback) {
var _this = this;
var node = _react2['default'].findDOMNode(this);
var props = this.props;
var transitionName = props.transitionName;
this.stop();
var end = function end() {
_this.stopper = null;
finishCallback();
};
if ((_cssAnimation.isCssAnimationSupported || !props.animation[animationType]) && transitionName && props[transitionMap[animationType]]) {
this.stopper = (0, _cssAnimation2['default'])(node, transitionName + '-' + animationType, end);
} else {
this.stopper = props.animation[animationType](node, end);
}
},
stop: function stop() {
if (this.stopper) {
this.stopper.stop();
this.stopper = null;
}
},
componentWillUnmount: function componentWillUnmount() {
this.stop();
},
componentWillEnter: function componentWillEnter(done) {
var props = this.props;
if (props.transitionEnter && props.transitionName || props.animation.enter) {
this.transition('enter', done);
} else {
done();
}
},
componentWillLeave: function componentWillLeave(done) {
var props = this.props;
if (props.transitionLeave && props.transitionName || props.animation.leave) {
this.transition('leave', done);
} else {
done();
}
},
render: function render() {
return this.props.children;
}
});
exports['default'] = AnimateChild;
module.exports = exports['default'];
/***/ },
/* 34 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
var Event = __webpack_require__(35);
var Css = __webpack_require__(36);
var isCssAnimationSupported = Event.endEvents.length !== 0;
function getDuration(node, name) {
var style = window.getComputedStyle(node);
var prefixes = ['-webkit-', '-moz-', '-o-', 'ms-', ''];
var ret = '';
for (var i = 0; i < prefixes.length; i++) {
ret = style.getPropertyValue(prefixes[i] + name);
if (ret) {
break;
}
}
return ret;
}
function fixBrowserByTimeout(node) {
if (isCssAnimationSupported) {
var transitionDuration = parseFloat(getDuration(node, 'transition-duration')) || 0;
var animationDuration = parseFloat(getDuration(node, 'animation-duration')) || 0;
var time = Math.max(transitionDuration, animationDuration);
// sometimes, browser bug
node.rcEndAnimTimeout = setTimeout(function () {
node.rcEndAnimTimeout = null;
if (node.rcEndListener) {
node.rcEndListener();
}
}, time * 1000 + 200);
}
}
function clearBrowserBugTimeout(node) {
if (node.rcEndAnimTimeout) {
clearTimeout(node.rcEndAnimTimeout);
node.rcEndAnimTimeout = null;
}
}
var cssAnimation = function cssAnimation(node, transitionName, callback) {
var className = transitionName;
var activeClassName = className + '-active';
if (node.rcEndListener) {
node.rcEndListener();
}
node.rcEndListener = function (e) {
if (e && e.target !== node) {
return;
}
if (node.rcAnimTimeout) {
clearTimeout(node.rcAnimTimeout);
node.rcAnimTimeout = null;
}
clearBrowserBugTimeout(node);
Css.removeClass(node, className);
Css.removeClass(node, activeClassName);
Event.removeEndEventListener(node, node.rcEndListener);
node.rcEndListener = null;
// Usually this optional callback is used for informing an owner of
// a leave animation and telling it to remove the child.
if (callback) {
callback();
}
};
Event.addEndEventListener(node, node.rcEndListener);
Css.addClass(node, className);
node.rcAnimTimeout = setTimeout(function () {
node.rcAnimTimeout = null;
Css.addClass(node, activeClassName);
fixBrowserByTimeout(node);
}, 0);
return {
stop: function stop() {
if (node.rcEndListener) {
node.rcEndListener();
}
}
};
};
cssAnimation.style = function (node, style, callback) {
if (node.rcEndListener) {
node.rcEndListener();
}
node.rcEndListener = function (e) {
if (e && e.target !== node) {
return;
}
if (node.rcAnimTimeout) {
clearTimeout(node.rcAnimTimeout);
node.rcAnimTimeout = null;
}
clearBrowserBugTimeout(node);
Event.removeEndEventListener(node, node.rcEndListener);
node.rcEndListener = null;
// Usually this optional callback is used for informing an owner of
// a leave animation and telling it to remove the child.
if (callback) {
callback();
}
};
Event.addEndEventListener(node, node.rcEndListener);
node.rcAnimTimeout = setTimeout(function () {
for (var s in style) {
if (style.hasOwnProperty(s)) {
node.style[s] = style[s];
}
}
node.rcAnimTimeout = null;
fixBrowserByTimeout(node);
}, 0);
};
cssAnimation.setTransition = function (node, p, value) {
var property = p;
var v = value;
if (value === undefined) {
v = property;
property = '';
}
property = property || '';
['Webkit', 'Moz', 'O',
// ms is special .... !
'ms'].forEach(function (prefix) {
node.style[prefix + 'Transition' + property] = v;
});
};
cssAnimation.addClass = Css.addClass;
cssAnimation.removeClass = Css.removeClass;
cssAnimation.isCssAnimationSupported = isCssAnimationSupported;
module.exports = cssAnimation;
/***/ },
/* 35 */
/***/ function(module, exports) {
'use strict';
var EVENT_NAME_MAP = {
transitionend: {
transition: 'transitionend',
WebkitTransition: 'webkitTransitionEnd',
MozTransition: 'mozTransitionEnd',
OTransition: 'oTransitionEnd',
msTransition: 'MSTransitionEnd'
},
animationend: {
animation: 'animationend',
WebkitAnimation: 'webkitAnimationEnd',
MozAnimation: 'mozAnimationEnd',
OAnimation: 'oAnimationEnd',
msAnimation: 'MSAnimationEnd'
}
};
var endEvents = [];
function detectEvents() {
var testEl = document.createElement('div');
var style = testEl.style;
if (!('AnimationEvent' in window)) {
delete EVENT_NAME_MAP.animationend.animation;
}
if (!('TransitionEvent' in window)) {
delete EVENT_NAME_MAP.transitionend.transition;
}
for (var baseEventName in EVENT_NAME_MAP) {
if (EVENT_NAME_MAP.hasOwnProperty(baseEventName)) {
var baseEvents = EVENT_NAME_MAP[baseEventName];
for (var styleName in baseEvents) {
if (styleName in style) {
endEvents.push(baseEvents[styleName]);
break;
}
}
}
}
}
if (typeof window !== 'undefined') {
detectEvents();
}
function addEventListener(node, eventName, eventListener) {
node.addEventListener(eventName, eventListener, false);
}
function removeEventListener(node, eventName, eventListener) {
node.removeEventListener(eventName, eventListener, false);
}
var TransitionEvents = {
addEndEventListener: function addEndEventListener(node, eventListener) {
if (endEvents.length === 0) {
window.setTimeout(eventListener, 0);
return;
}
endEvents.forEach(function (endEvent) {
addEventListener(node, endEvent, eventListener);
});
},
endEvents: endEvents,
removeEndEventListener: function removeEndEventListener(node, eventListener) {
if (endEvents.length === 0) {
return;
}
endEvents.forEach(function (endEvent) {
removeEventListener(node, endEvent, eventListener);
});
}
};
module.exports = TransitionEvents;
/***/ },
/* 36 */
/***/ function(module, exports) {
'use strict';
var SPACE = ' ';
var RE_CLASS = /[\n\t\r]/g;
function norm(elemClass) {
return (SPACE + elemClass + SPACE).replace(RE_CLASS, SPACE);
}
module.exports = {
addClass: function addClass(elem, className) {
elem.className += ' ' + className;
},
removeClass: function removeClass(elem, n) {
var elemClass = elem.className.trim();
var className = norm(elemClass);
var needle = n.trim();
needle = SPACE + needle + SPACE;
// 一个 cls 有可能多次出现:'link link2 link link3 link'
while (className.indexOf(needle) >= 0) {
className = className.replace(needle, SPACE);
}
elem.className = className.trim();
}
};
/***/ }
]);
//# sourceMappingURL=simple.js.map