react-dots-loader
Version:
A nice loader showing 3 animated dots - carefully crafted for React
623 lines (514 loc) • 19.5 kB
JavaScript
(function webpackUniversalModuleDefinition(root, factory) {
if(typeof exports === 'object' && typeof module === 'object')
module.exports = factory(require("React"));
else if(typeof define === 'function' && define.amd)
define(["React"], factory);
else if(typeof exports === 'object')
exports["DotsLoader"] = factory(require("React"));
else
root["DotsLoader"] = factory(root["React"]);
})(this, function(__WEBPACK_EXTERNAL_MODULE_2__) {
return /******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId])
/******/ return installedModules[moduleId].exports;
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ exports: {},
/******/ id: moduleId,
/******/ loaded: false
/******/ };
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/ // Flag the module as loaded
/******/ module.loaded = true;
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "/assets";
/******/ // Load entry module and return exports
/******/ return __webpack_require__(0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ function(module, exports, __webpack_require__) {
module.exports = __webpack_require__(1);
/***/ },
/* 1 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
var _react = __webpack_require__(2);
var _react2 = _interopRequireDefault(_react);
var _src = __webpack_require__(3);
var _src2 = _interopRequireDefault(_src);
__webpack_require__(6);
_react2['default'].render(_react2['default'].createElement(_src2['default'], { size: 20, distance: 30, color: 'red' }), document.getElementById('content'));
/***/ },
/* 2 */
/***/ function(module, exports) {
module.exports = __WEBPACK_EXTERNAL_MODULE_2__;
/***/ },
/* 3 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
var React = __webpack_require__(2);
var PropTypes = React.PropTypes;
var assign = __webpack_require__(4);
var InlineBlock = __webpack_require__(5);
var CLASS_PREFIX = ' react-dots-loader';
var CIRCLE_CLASSNAME = ' ' + CLASS_PREFIX + '__circle';
var INDEXES = {
0: 'one',
1: 'two',
2: 'three'
};
module.exports = React.createClass({
displayName: 'exports',
propTypes: {
visible: PropTypes.bool,
distance: PropTypes.number,
size: PropTypes.number,
renderDot: PropTypes.func
},
getDefaultProps: function getDefaultProps() {
return {
visible: true,
distance: 10,
size: 18
};
},
render: function render() {
var props = this.props;
if (props.visible == null || props.visible === false) {
return null;
}
var className = ((props.className || '') + CLASS_PREFIX).trim();
var circleStyle = {
marginLeft: props.distance,
width: props.size,
height: props.size,
background: props.color
};
var oneStyle = assign({}, circleStyle, { marginLeft: 0 });
var twoStyle = circleStyle;
var threeStyle = circleStyle;
return React.createElement(
InlineBlock,
_extends({}, props, { className: className, size: null, color: null }),
this.renderDot(0, oneStyle),
this.renderDot(1, twoStyle),
this.renderDot(2, threeStyle)
);
},
renderDot: function renderDot(index, style) {
var className = CIRCLE_CLASSNAME + CIRCLE_CLASSNAME + '--' + INDEXES[index];
var props = {
style: style,
index: index,
className: className
};
var result = undefined;
if (typeof this.props.renderDot === 'function') {
result = this.props.renderDot(props);
}
if (result === undefined) {
result = React.createElement(InlineBlock, props);
}
return result;
}
});
/***/ },
/* 4 */
/***/ function(module, exports) {
'use strict';
/* eslint-disable no-unused-vars */
var hasOwnProperty = Object.prototype.hasOwnProperty;
var propIsEnumerable = Object.prototype.propertyIsEnumerable;
function toObject(val) {
if (val === null || val === undefined) {
throw new TypeError('Object.assign cannot be called with null or undefined');
}
return Object(val);
}
function shouldUseNative() {
try {
if (!Object.assign) {
return false;
}
// Detect buggy property enumeration order in older V8 versions.
// https://bugs.chromium.org/p/v8/issues/detail?id=4118
var test1 = new String('abc'); // eslint-disable-line
test1[5] = 'de';
if (Object.getOwnPropertyNames(test1)[0] === '5') {
return false;
}
// https://bugs.chromium.org/p/v8/issues/detail?id=3056
var test2 = {};
for (var i = 0; i < 10; i++) {
test2['_' + String.fromCharCode(i)] = i;
}
var order2 = Object.getOwnPropertyNames(test2).map(function (n) {
return test2[n];
});
if (order2.join('') !== '0123456789') {
return false;
}
// https://bugs.chromium.org/p/v8/issues/detail?id=3056
var test3 = {};
'abcdefghijklmnopqrst'.split('').forEach(function (letter) {
test3[letter] = letter;
});
if (Object.keys(Object.assign({}, test3)).join('') !==
'abcdefghijklmnopqrst') {
return false;
}
return true;
} catch (e) {
// We don't expect any of the above to throw, but better to be safe.
return false;
}
}
module.exports = shouldUseNative() ? Object.assign : function (target, source) {
var from;
var to = toObject(target);
var symbols;
for (var s = 1; s < arguments.length; s++) {
from = Object(arguments[s]);
for (var key in from) {
if (hasOwnProperty.call(from, key)) {
to[key] = from[key];
}
}
if (Object.getOwnPropertySymbols) {
symbols = Object.getOwnPropertySymbols(from);
for (var i = 0; i < symbols.length; i++) {
if (propIsEnumerable.call(from, symbols[i])) {
to[symbols[i]] = from[symbols[i]];
}
}
}
}
return to;
};
/***/ },
/* 5 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
var React = __webpack_require__(2);
var assign = __webpack_require__(4);
var inlineBlockStyle = {
display: 'inline-block'
};
module.exports = React.createClass({
displayName: 'ReactInlineBlock',
render: function render() {
var style = assign({}, this.props.style, inlineBlockStyle);
var props = assign({}, this.props, { style: style });
return React.createElement('div', props);
}
});
/***/ },
/* 6 */
/***/ 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__(7);
if(typeof content === 'string') content = [[module.id, content, '']];
// add the styles to the DOM
var update = __webpack_require__(9)(content, {});
if(content.locals) module.exports = content.locals;
// Hot Module Replacement
if(false) {
// When the styles change, update the <style> tags
if(!content.locals) {
module.hot.accept("!!./../node_modules/css-loader/index.js?modules&importLoaders=1&localIdentName=[local]---[hash:6]!./../node_modules/autoprefixer-loader/index.js!./index.css", function() {
var newContent = require("!!./../node_modules/css-loader/index.js?modules&importLoaders=1&localIdentName=[local]---[hash:6]!./../node_modules/autoprefixer-loader/index.js!./index.css");
if(typeof newContent === 'string') newContent = [[module.id, newContent, '']];
update(newContent);
});
}
// When the module is disposed, remove the <style> tags
module.hot.dispose(function() { update(); });
}
/***/ },
/* 7 */
/***/ function(module, exports, __webpack_require__) {
exports = module.exports = __webpack_require__(8)();
// imports
// module
exports.push([module.id, ".react-dots-loader---16c9d7 {\n line-height: 0px;\n}\n\n.react-dots-loader__circle---d2f24b {\n border-radius: 50%;\n margin-left: 10px;\n background-color: black;\n -webkit-transform-origin: center center;\n transform-origin: center center;\n display: inline-block;\n}\n\n.react-dots-loader__circle--one---986979 {\n opacity: 1;\n -webkit-animation: react-dots-loader__animation--one---4f67f3 1s infinite linear;\n animation: react-dots-loader__animation--one---4f67f3 1s infinite linear;\n}\n\n.react-dots-loader__circle--two---9ce44a,\n.react-dots-loader__circle--three---f8f1aa {\n opacity: 0.25;\n}\n\n.react-dots-loader__circle--two---9ce44a {\n -webkit-animation: react-dots-loader__animation--two---c58377 1s infinite linear;\n animation: react-dots-loader__animation--two---c58377 1s infinite linear;\n}\n.react-dots-loader__circle--three---f8f1aa {\n -webkit-animation: react-dots-loader__animation--three---58e013 1s infinite linear;\n animation: react-dots-loader__animation--three---58e013 1s infinite linear;\n}\n\n@-webkit-keyframes react-dots-loader__animation--one---4f67f3 {\n 0% {\n opacity: 1;\n }\n 33% {\n opacity: 0.25;\n }\n 66% {\n opacity: 0.25;\n }\n 100% {\n opacity: 1;\n }\n}\n\n@keyframes react-dots-loader__animation--one---4f67f3 {\n 0% {\n opacity: 1;\n }\n 33% {\n opacity: 0.25;\n }\n 66% {\n opacity: 0.25;\n }\n 100% {\n opacity: 1;\n }\n}\n\n@-webkit-keyframes react-dots-loader__animation--two---c58377 {\n 0% {\n opacity: 0.25;\n }\n 33% {\n opacity: 1;\n }\n 66% {\n opacity: 0.25;\n }\n}\n\n@keyframes react-dots-loader__animation--two---c58377 {\n 0% {\n opacity: 0.25;\n }\n 33% {\n opacity: 1;\n }\n 66% {\n opacity: 0.25;\n }\n}\n\n@-webkit-keyframes react-dots-loader__animation--three---58e013 {\n 33% {\n opacity: 0.25;\n }\n 66% {\n opacity: 1;\n }\n 100% {\n opacity: 0.25;\n }\n}\n\n@keyframes react-dots-loader__animation--three---58e013 {\n 33% {\n opacity: 0.25;\n }\n 66% {\n opacity: 1;\n }\n 100% {\n opacity: 0.25;\n }\n}\n", ""]);
// exports
exports.locals = {
"react-dots-loader": "react-dots-loader---16c9d7",
"react-dots-loader__circle": "react-dots-loader__circle---d2f24b",
"react-dots-loader__circle--one": "react-dots-loader__circle--one---986979",
"react-dots-loader__animation--one": "react-dots-loader__animation--one---4f67f3",
"react-dots-loader__circle--two": "react-dots-loader__circle--two---9ce44a",
"react-dots-loader__circle--three": "react-dots-loader__circle--three---f8f1aa",
"react-dots-loader__animation--two": "react-dots-loader__animation--two---c58377",
"react-dots-loader__animation--three": "react-dots-loader__animation--three---58e013"
};
/***/ },
/* 8 */
/***/ function(module, exports) {
/*
MIT License http://www.opensource.org/licenses/mit-license.php
Author Tobias Koppers @sokra
*/
// css base code, injected by the css-loader
module.exports = function() {
var list = [];
// return the list of modules as css string
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("");
};
// import a list of modules into the list
list.i = function(modules, mediaQuery) {
if(typeof modules === "string")
modules = [[null, modules, ""]];
var alreadyImportedModules = {};
for(var i = 0; i < this.length; i++) {
var id = this[i][0];
if(typeof id === "number")
alreadyImportedModules[id] = true;
}
for(i = 0; i < modules.length; i++) {
var item = modules[i];
// skip already imported module
// this implementation is not 100% perfect for weird media query combinations
// when a module is imported multiple times with different media queries.
// I hope this will never occur (Hey this way we have smaller bundles)
if(typeof item[0] !== "number" || !alreadyImportedModules[item[0]]) {
if(mediaQuery && !item[2]) {
item[2] = mediaQuery;
} else if(mediaQuery) {
item[2] = "(" + item[2] + ") and (" + mediaQuery + ")";
}
list.push(item);
}
}
};
return list;
};
/***/ },
/* 9 */
/***/ 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;
};
},
isOldIE = memoize(function() {
return /msie [6-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 IE6-9, which has a hard limit on the # of <style>
// tags it will allow on a page
if (typeof options.singleton === "undefined") options.singleton = isOldIE();
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 createLinkElement() {
var linkElement = document.createElement("link");
var head = getHeadElement();
linkElement.rel = "stylesheet";
head.appendChild(linkElement);
return linkElement;
}
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 if(obj.sourceMap &&
typeof URL === "function" &&
typeof URL.createObjectURL === "function" &&
typeof URL.revokeObjectURL === "function" &&
typeof Blob === "function" &&
typeof btoa === "function") {
styleElement = createLinkElement();
update = updateLink.bind(null, styleElement);
remove = function() {
styleElement.parentNode.removeChild(styleElement);
if(styleElement.href)
URL.revokeObjectURL(styleElement.href);
};
} 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();
}
};
}
var replaceText = (function () {
var textStore = [];
return function (index, replacement) {
textStore[index] = replacement;
return textStore.filter(Boolean).join('\n');
};
})();
function applyToSingletonTag(styleElement, index, remove, obj) {
var css = remove ? "" : obj.css;
if (styleElement.styleSheet) {
styleElement.styleSheet.cssText = replaceText(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(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));
}
}
function updateLink(linkElement, obj) {
var css = obj.css;
var media = obj.media;
var sourceMap = obj.sourceMap;
if(sourceMap) {
// http://stackoverflow.com/a/26603875
css += "\n/*# sourceMappingURL=data:application/json;base64," + btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap)))) + " */";
}
var blob = new Blob([css], { type: "text/css" });
var oldSrc = linkElement.href;
linkElement.href = URL.createObjectURL(blob);
if(oldSrc)
URL.revokeObjectURL(oldSrc);
}
/***/ }
/******/ ])
});
;