react-hold
Version:
Hold the empty presentational components in react.js
1,623 lines (1,298 loc) • 65.3 kB
JavaScript
(function webpackUniversalModuleDefinition(root, factory) {
if(typeof exports === 'object' && typeof module === 'object')
module.exports = factory(require("react"), require("react-dom"));
else if(typeof define === 'function' && define.amd)
define(["react", "react-dom"], factory);
else if(typeof exports === 'object')
exports["ReactHold"] = factory(require("react"), require("react-dom"));
else
root["ReactHold"] = factory(root["React"], root["ReactDom"]);
})(this, function(__WEBPACK_EXTERNAL_MODULE_3__, __WEBPACK_EXTERNAL_MODULE_23__) {
return /******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId])
/******/ return installedModules[moduleId].exports;
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ exports: {},
/******/ id: moduleId,
/******/ loaded: false
/******/ };
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/ // Flag the module as loaded
/******/ module.loaded = true;
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/ // Load entry module and return exports
/******/ return __webpack_require__(0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, exports, __webpack_require__) {
module.exports = __webpack_require__(19);
/***/ }),
/* 1 */
/***/ (function(module, exports, __webpack_require__) {
/**
* Copyright 2013-present, 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.
*/
if (true) {
var REACT_ELEMENT_TYPE = (typeof Symbol === 'function' &&
Symbol.for &&
Symbol.for('react.element')) ||
0xeac7;
var isValidElement = function(object) {
return typeof object === 'object' &&
object !== null &&
object.$$typeof === REACT_ELEMENT_TYPE;
};
// By explicitly using `prop-types` you are opting into new development behavior.
// http://fb.me/prop-types-in-prod
var throwOnDirectAccess = true;
module.exports = __webpack_require__(22)(isValidElement, throwOnDirectAccess);
} else {
// By explicitly using `prop-types` you are opting into new production behavior.
// http://fb.me/prop-types-in-prod
module.exports = require('./factoryWithThrowingShims')();
}
/***/ }),
/* 2 */
/***/ (function(module, exports, __webpack_require__) {
'use strict';
exports.__esModule = true;
exports.fillerStyle = exports.targetProps = exports.cancelHold = exports.height = exports.width = exports.color = undefined;
var _propTypes = __webpack_require__(1);
var _propTypes2 = _interopRequireDefault(_propTypes);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
/*
| All of the prop types in this file is belongs to placeholder component.
*/
var color = exports.color = _propTypes2.default.string;
var width = exports.width = _propTypes2.default.number;
var height = exports.height = _propTypes2.default.number;
var cancelHold = exports.cancelHold = _propTypes2.default.func;
var targetProps = exports.targetProps = _propTypes2.default.object;
// This is a inner prop use to add more custom style to the placeholder.
var fillerStyle = exports.fillerStyle = _propTypes2.default.object;
exports.default = {
color: color,
width: width,
height: height,
cancelHold: cancelHold,
targetProps: targetProps,
fillerStyle: fillerStyle
};
/***/ }),
/* 3 */
/***/ (function(module, exports) {
module.exports = __WEBPACK_EXTERNAL_MODULE_3__;
/***/ }),
/* 4 */
/***/ (function(module, exports) {
'use strict';
exports.__esModule = true;
var LEFT = exports.LEFT = 'left';
var CENTER = exports.CENTER = 'center';
var RIGHT = exports.RIGHT = 'right';
exports.default = {
LEFT: LEFT,
CENTER: CENTER,
RIGHT: RIGHT
};
/***/ }),
/* 5 */
/***/ (function(module, exports, __webpack_require__) {
'use strict';
exports.__esModule = true;
var isNull = exports.isNull = function isNull(value) {
return value === undefined || value === null;
};
var isFunction = exports.isFunction = function isFunction(value) {
return typeof value === 'function';
};
var isObject = exports.isObject = function isObject(value) {
return value !== null && Object.prototype.toString.call(value) === '[object Object]';
};
var getComputedStyle = exports.getComputedStyle = window.getComputedStyle || document.defaultView.getComputedStyle;
var getNodeSize = exports.getNodeSize = function getNodeSize(node) {
if (isNull(node)) return null;
return {
width: node.offsetWidth,
height: node.offsetHeight
};
};
var getDisplayName = exports.getDisplayName = function getDisplayName(component) {
if (isNull(component)) return null;
return component.displayName || component.name || (typeof component === 'string' ? component : 'Unknown');
};
var addHandler = exports.addHandler = window.addEventListener ? function (target, type, handler) {
target.addEventListener(type, handler, false);
} : function (target, type, handler) {
target.attachEvent('on' + type, handler);
};
var removeHandler = exports.removeHandler = window.removeEventListener ? function (target, type, handler) {
target.removeEventListener(type, handler, false);
} : function (target, type, handler) {
target.detachEvent('on' + type, handler);
};
var warn = exports.warn = function warn(msg) {
if (isNull(msg)) return;
if (true) {
throw new Error(msg);
} else if (console) {
console.warn('[react-hold]', msg);
}
};
/***/ }),
/* 6 */
/***/ (function(module, exports, __webpack_require__) {
'use strict';
exports.__esModule = 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; }; }();
exports.default = function (targetComponent, condition) {
var defaultHolder = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : _Fill2.default;
var holderDefaultProps = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
if (!(0, _utils.isFunction)(targetComponent) && typeof targetComponent !== 'string') {
throw new TypeError('Expected the target component to be a string or class/function.');
}
if (!(0, _utils.isFunction)(condition)) {
throw new TypeError('Expected the hold condition to be a function.');
}
if ((0, _utils.isObject)(defaultHolder)) {
holderDefaultProps = defaultHolder;
defaultHolder = _Fill2.default;
}
var targetComponentName = (0, _utils.getDisplayName)(targetComponent);
var refiter = (0, _createRefiter2.default)(targetComponent);
var Hold = function (_Component) {
_inherits(Hold, _Component);
function Hold() {
var _ref;
_classCallCheck(this, Hold);
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
var _this = _possibleConstructorReturn(this, (_ref = Hold.__proto__ || Object.getPrototypeOf(Hold)).call.apply(_ref, [this].concat(args)));
_this.state = {
hold: true,
copy: true,
holderAutoSize: {
width: null,
height: null
}
// The style of original node
};_this.originNodeStyle = null;
// window resize handler
_this.resizeHandler = function () {
if (_this.state.hold) {
_this.updateHolderSizeIfNecessary();
}
};
_this.cancelHold = _this.cancelHold.bind(_this);
return _this;
}
_createClass(Hold, [{
key: 'componentWillMount',
value: function componentWillMount() {
if (condition.call(null, this.props, {})) {
refiter.refit();
} else {
this.cancelHold();
}
}
}, {
key: 'componentDidMount',
value: function componentDidMount() {
if (this.state.hold) {
this.originNodeStyle = this.computeOriginNodeStyle();
this.setState({ copy: false });
}
(0, _utils.addHandler)(window, 'resize', this.resizeHandler);
}
}, {
key: 'componentWillReceiveProps',
value: function componentWillReceiveProps(nextProps) {
if (condition.call(null, nextProps, this.props)) {
this.setState({
hold: true,
copy: true
});
} else {
this.cancelHold();
}
}
}, {
key: 'componentDidUpdate',
value: function componentDidUpdate() {
if (this.state.hold) {
if (this.state.copy) {
refiter.refit();
this.originNodeStyle = this.computeOriginNodeStyle();
this.setState({ copy: false });
} else if (!(0, _utils.isNull)(this.originNodeStyle)) {
this.setFakeNodeStyle(this.originNodeStyle);
this.updateHolderSizeIfNecessary();
this.originNodeStyle = null;
}
}
}
}, {
key: 'componentWillUnmount',
value: function componentWillUnmount() {
(0, _utils.removeHandler)(window, 'resize', this.resizeHandler);
}
}, {
key: 'setFakeNodeStyle',
value: function setFakeNodeStyle(style) {
if (!(0, _utils.isObject)(style)) return;
var _refs = this.refs,
fake = _refs.fake,
env = _refs.env;
var isInline = style.display && style.display.indexOf('inline') > -1;
// hidden element
fake.style.display = 'none';
// set style
Object.keys(style).forEach(function (name) {
if (name !== 'display') {
fake.style[name] = style[name];
}
});
// fix fake style
fake.style.opacity = 1;
fake.style.background = 'transparent';
fake.style.borderColor = 'transparent';
// fix env style
if (isInline) {
env.style.overflow = 'hidden';
} else {
env.style.overflow = 'visible';
}
// display fake
fake.style.display = isInline ? 'inline-block' : style.display;
}
}, {
key: 'computeOriginNodeStyle',
value: function computeOriginNodeStyle() {
var result = null;
var originNode = (0, _reactDom.findDOMNode)(this);
// store original display property
var computedStyle = (0, _utils.getComputedStyle)(originNode, null);
var originDisplay = computedStyle.getPropertyValue('display');
// set display to 'none' before recompute is very **important**,
// don't remove or move this step!
originNode.style.display = 'none';
// compute node style
computedStyle = (0, _utils.getComputedStyle)(originNode, null);
// copy style
Object.keys(computedStyle).forEach(function (key) {
if (/[0-9]+/.test(key)) {
var name = computedStyle[key];
result = result || {};
if (name === 'display') {
result[name] = originDisplay;
} else {
result[name] = computedStyle.getPropertyValue(name);
}
}
});
return result;
}
}, {
key: 'cancelHold',
value: function cancelHold() {
var _refs2 = this.refs,
fake = _refs2.fake,
env = _refs2.env;
// manual restore fake and env node style,
// because their style had been modified by method 'setFakeNodeStyle'
if (fake) fake.removeAttribute('style');
if (env) env.style.overflow = 'visible';
// restore component lifecycle methods
refiter.undo();
// clear origin node style
this.originNodeStyle = null;
// exit hold state
this.setState({
hold: false,
copy: false
});
}
}, {
key: 'updateHolderSizeIfNecessary',
value: function updateHolderSizeIfNecessary() {
var env = this.refs.env;
if (!env) return;
var holderAutoSize = this.state.holderAutoSize;
var holderProps = this.props.holderProps || this.props.props || {};
var customWidth = (0, _utils.isNull)(holderDefaultProps.width) ? holderProps.width : holderDefaultProps.width;
var customHeight = (0, _utils.isNull)(holderDefaultProps.height) ? holderProps.height : holderDefaultProps.height;
if (!(0, _utils.isNull)(customWidth) && !(0, _utils.isNull)(customHeight)) return;
var size = (0, _utils.getNodeSize)(env);
var width = (0, _utils.isNull)(customWidth) ? size.width : null;
var height = (0, _utils.isNull)(customHeight) ? size.height : null;
if (holderAutoSize.width !== width || holderAutoSize.height !== height) {
this.setState({
holderAutoSize: {
width: width,
height: height
}
});
}
}
}, {
key: 'render',
value: function render() {
var _state = this.state,
hold = _state.hold,
copy = _state.copy,
holderAutoSize = _state.holderAutoSize;
var _props = this.props,
innerRef = _props.innerRef,
holder = _props.holder,
holderProps = _props.holderProps,
props = _props.props,
propsForElement = _objectWithoutProperties(_props, ['innerRef', 'holder', 'holderProps', 'props']);
if (!hold || copy) {
if (innerRef && !hold) propsForElement.ref = innerRef;
return _react2.default.createElement(targetComponent, propsForElement);
}
var propsForHolder = _extends({
color: '#eee',
width: null,
height: null
}, holderDefaultProps, props, holderProps, {
cancelHold: this.cancelHold,
targetProps: propsForElement
});
(0, _utils.isNull)(propsForHolder.width) && (propsForHolder.width = holderAutoSize.width);
(0, _utils.isNull)(propsForHolder.height) && (propsForHolder.height = holderAutoSize.height);
if (typeof propsForHolder.children === 'string') {
propsForHolder.children = propsForHolder.children.replace(/ /g, $nbsp);
}
propsForHolder.children = propsForHolder.children || $nbsp.repeat(blankLength);
return _react2.default.createElement(
'div',
{ ref: 'fake' },
_react2.default.createElement(
'div',
{ ref: 'env', style: envDefaultStyle },
_react2.default.createElement(holder, propsForHolder)
)
);
}
}]);
return Hold;
}(_react.Component);
(0, _hoistNonReactStatics2.default)(Hold, targetComponent);
Hold.displayName = 'Hold(' + targetComponentName + ')';
Hold.propTypes = {
holder: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.func]),
holderProps: _propTypes2.default.object,
props: _propTypes2.default.object, // The alias of 'holderProps'
innerRef: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.func])
};
Hold.defaultProps = {
holder: defaultHolder,
holderProps: null,
props: null,
innerRef: null
};
return Hold;
};
var _react = __webpack_require__(3);
var _react2 = _interopRequireDefault(_react);
var _reactDom = __webpack_require__(23);
var _propTypes = __webpack_require__(1);
var _propTypes2 = _interopRequireDefault(_propTypes);
var _hoistNonReactStatics = __webpack_require__(20);
var _hoistNonReactStatics2 = _interopRequireDefault(_hoistNonReactStatics);
var _utils = __webpack_require__(5);
var _Fill = __webpack_require__(7);
var _Fill2 = _interopRequireDefault(_Fill);
var _createRefiter = __webpack_require__(14);
var _createRefiter2 = _interopRequireDefault(_createRefiter);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var $nbsp = '\xA0';
var blankLength = 10;
var envDefaultStyle = {
position: 'relative',
padding: '0px',
margin: '0px',
width: '100%',
height: '100%',
border: 'none',
overflow: 'visible'
/**
* Create a higher-order component to manage
* original component and placeholder component.
*
* @param {Component|String} targetComponent
* @param {Function} condition
* @param {Component} defaultHolder
* @param {Object} holderDefaultProps
* @returns {Component}
*/
};
/***/ }),
/* 7 */
/***/ (function(module, exports, __webpack_require__) {
'use strict';
exports.__esModule = 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 _react = __webpack_require__(3);
var _react2 = _interopRequireDefault(_react);
var _propTypes = __webpack_require__(1);
var _propTypes2 = _interopRequireDefault(_propTypes);
var _shapes = __webpack_require__(2);
var _shapes2 = _interopRequireDefault(_shapes);
var _align = __webpack_require__(4);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var Fill = function Fill(_ref) {
var color = _ref.color,
width = _ref.width,
height = _ref.height,
children = _ref.children,
align = _ref.align,
fillerStyle = _ref.fillerStyle;
var lineHeight = typeof height === 'string' && height.trim() ? height : typeof height === 'number' ? height + 'px' : null;
return _react2.default.createElement(
'div',
{ style: { textAlign: align } },
_react2.default.createElement(
'div',
{
style: _extends({
background: color
}, fillerStyle, {
display: 'inline-block',
textAlign: 'center',
width: width,
height: height,
lineHeight: lineHeight
})
},
children
)
);
};
Fill.propTypes = _extends({}, _shapes2.default, {
width: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.string]),
height: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.string]),
align: _propTypes2.default.string
});
Fill.defaultProps = {
width: null,
height: null,
align: _align.CENTER,
fillerStyle: null
};
exports.default = Fill;
/***/ }),
/* 8 */
/***/ (function(module, exports, __webpack_require__) {
'use strict';
exports.__esModule = 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 _react = __webpack_require__(3);
var _react2 = _interopRequireDefault(_react);
var _propTypes = __webpack_require__(1);
var _propTypes2 = _interopRequireDefault(_propTypes);
var _shapes = __webpack_require__(2);
var _shapes2 = _interopRequireDefault(_shapes);
var _align = __webpack_require__(4);
var _utils = __webpack_require__(5);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var Square = function Square(_ref) {
var color = _ref.color,
width = _ref.width,
height = _ref.height,
children = _ref.children,
side = _ref.side,
align = _ref.align,
fillerStyle = _ref.fillerStyle;
if ((0, _utils.isNull)(side)) {
if (!(0, _utils.isNull)(width) && !(0, _utils.isNull)(height)) {
side = width > height ? height : width;
} else if (!(0, _utils.isNull)(width)) {
side = width;
} else if (!(0, _utils.isNull)(height)) {
side = height;
}
}
var lineHeight = typeof side === 'string' && side.trim() ? side : typeof side === 'number' ? side + 'px' : null;
return _react2.default.createElement(
'div',
{ style: { textAlign: align } },
_react2.default.createElement(
'div',
{
style: _extends({
background: color
}, fillerStyle, {
display: 'inline-block',
textAlign: 'center',
width: side,
height: side,
lineHeight: lineHeight
})
},
children
)
);
};
Square.propTypes = _extends({}, _shapes2.default, {
side: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.string]),
align: _propTypes2.default.string
});
Square.defaultProps = {
width: null,
height: null,
side: null,
align: _align.CENTER,
fillerStyle: null
};
exports.default = Square;
/***/ }),
/* 9 */
/***/ (function(module, exports) {
"use strict";
/**
* Copyright (c) 2013-present, 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.
*
*
*/
function makeEmptyFunction(arg) {
return function () {
return arg;
};
}
/**
* This function accepts and discards inputs; it has no side effects. This is
* primarily useful idiomatically for overridable function endpoints which
* always need to be callable, since JS lacks a null-call idiom ala Cocoa.
*/
var emptyFunction = function emptyFunction() {};
emptyFunction.thatReturns = makeEmptyFunction;
emptyFunction.thatReturnsFalse = makeEmptyFunction(false);
emptyFunction.thatReturnsTrue = makeEmptyFunction(true);
emptyFunction.thatReturnsNull = makeEmptyFunction(null);
emptyFunction.thatReturnsThis = function () {
return this;
};
emptyFunction.thatReturnsArgument = function (arg) {
return arg;
};
module.exports = emptyFunction;
/***/ }),
/* 10 */
/***/ (function(module, exports, __webpack_require__) {
/**
* Copyright (c) 2013-present, 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.
*
*/
'use strict';
/**
* Use invariant() to assert state which your program assumes to be true.
*
* Provide sprintf-style format (only %s is supported) and arguments
* to provide information about what broke and what you were
* expecting.
*
* The invariant message will be stripped in production, but the invariant
* will remain to ensure logic does not differ in production.
*/
var validateFormat = function validateFormat(format) {};
if (true) {
validateFormat = function validateFormat(format) {
if (format === undefined) {
throw new Error('invariant requires an error message argument');
}
};
}
function invariant(condition, format, a, b, c, d, e, f) {
validateFormat(format);
if (!condition) {
var error;
if (format === undefined) {
error = new Error('Minified exception occurred; use the non-minified dev environment ' + 'for the full error message and additional helpful warnings.');
} else {
var args = [a, b, c, d, e, f];
var argIndex = 0;
error = new Error(format.replace(/%s/g, function () {
return args[argIndex++];
}));
error.name = 'Invariant Violation';
}
error.framesToPop = 1; // we don't care about invariant's own frame
throw error;
}
}
module.exports = invariant;
/***/ }),
/* 11 */
/***/ (function(module, exports, __webpack_require__) {
/**
* Copyright 2014-2015, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*
*/
'use strict';
var emptyFunction = __webpack_require__(9);
/**
* Similar to invariant but only logs a warning if the condition is not met.
* This can be used to log issues in development environments in critical
* paths. Removing the logging code for production environments will keep the
* same logic and follow the same code paths.
*/
var warning = emptyFunction;
if (true) {
(function () {
var printWarning = function printWarning(format) {
for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
args[_key - 1] = arguments[_key];
}
var argIndex = 0;
var message = 'Warning: ' + format.replace(/%s/g, function () {
return args[argIndex++];
});
if (typeof console !== 'undefined') {
console.error(message);
}
try {
// --- Welcome to debugging React ---
// This error was thrown as a convenience so that you can use this stack
// to find the callsite that caused this warning to fire.
throw new Error(message);
} catch (x) {}
};
warning = function warning(condition, format) {
if (format === undefined) {
throw new Error('`warning(condition, format, ...args)` requires a warning ' + 'message argument');
}
if (format.indexOf('Failed Composite propType: ') === 0) {
return; // Ignore CompositeComponent proptype check.
}
if (!condition) {
for (var _len2 = arguments.length, args = Array(_len2 > 2 ? _len2 - 2 : 0), _key2 = 2; _key2 < _len2; _key2++) {
args[_key2 - 2] = arguments[_key2];
}
printWarning.apply(undefined, [format].concat(args));
}
};
})();
}
module.exports = warning;
/***/ }),
/* 12 */
/***/ (function(module, exports) {
/**
* Copyright 2013-present, 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.
*/
'use strict';
var ReactPropTypesSecret = 'SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED';
module.exports = ReactPropTypesSecret;
/***/ }),
/* 13 */
/***/ (function(module, exports, __webpack_require__) {
'use strict';
exports.__esModule = true;
exports.default = function (condition, holder, holderProps) {
return function wrap(WrappedComponent) {
return (0, _HoC2.default)(WrappedComponent, condition, holder, holderProps);
};
};
var _HoC = __webpack_require__(6);
var _HoC2 = _interopRequireDefault(_HoC);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
/***/ }),
/* 14 */
/***/ (function(module, exports, __webpack_require__) {
'use strict';
exports.__esModule = true;
exports.symbol = undefined;
exports.default = function (component) {
if (component[symbol]) return component[symbol];
var componentOriginalMethods = null;
var replaceLifecycleMethods = function replaceLifecycleMethods() {
var componentDidMount = void 0;
var componentWillUnmount = void 0;
var prototype = component.prototype;
if ((0, _utils.isNull)(componentOriginalMethods) && prototype) {
if ((0, _utils.isFunction)(prototype.componentDidMount)) {
componentDidMount = prototype.componentDidMount;
prototype.componentDidMount = null;
}
if ((0, _utils.isFunction)(prototype.componentWillUnmount)) {
componentWillUnmount = prototype.componentWillUnmount;
prototype.componentWillUnmount = function willUnmount() {
try {
componentWillUnmount.call(this);
} catch (e) {
// swallow exception
}
};
}
componentOriginalMethods = {
componentDidMount: componentDidMount,
componentWillUnmount: componentWillUnmount
};
}
};
var restoreLifecycleMethods = function restoreLifecycleMethods() {
var methods = componentOriginalMethods;
if (!(0, _utils.isNull)(methods) && component.prototype) {
Object.keys(methods).forEach(function (name) {
if ((0, _utils.isFunction)(methods[name])) {
component.prototype[name] = methods[name];
}
});
componentOriginalMethods = null;
}
};
var refiter = {
refit: replaceLifecycleMethods,
undo: restoreLifecycleMethods
};
if (typeof component !== 'string') {
component[symbol] = refiter;
}
return refiter;
};
var _utils = __webpack_require__(5);
var symbol = exports.symbol = Symbol ? Symbol('react-hold/refiter') : '$$react-hold/refiter';
/**
* Create APIs to refit the component lifecycle methods.
*
* @param {Component|String} component
* @returns {{refit, undo}}
*/
/***/ }),
/* 15 */
/***/ (function(module, exports, __webpack_require__) {
'use strict';
exports.__esModule = 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 _react = __webpack_require__(3);
var _react2 = _interopRequireDefault(_react);
var _propTypes = __webpack_require__(1);
var _propTypes2 = _interopRequireDefault(_propTypes);
var _shapes = __webpack_require__(2);
var _shapes2 = _interopRequireDefault(_shapes);
var _Square = __webpack_require__(8);
var _Square2 = _interopRequireDefault(_Square);
var _align = __webpack_require__(4);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var Circle = function Circle(_ref) {
var color = _ref.color,
width = _ref.width,
height = _ref.height,
children = _ref.children,
diameter = _ref.diameter,
align = _ref.align,
fillerStyle = _ref.fillerStyle;
return _react2.default.createElement(
_Square2.default,
{ color: 'transparent', width: width, height: height, side: diameter, align: align },
_react2.default.createElement(
'div',
{
style: _extends({
background: color
}, fillerStyle, {
width: '100%',
height: '100%',
borderRadius: '50%'
})
},
children
)
);
};
Circle.propTypes = _extends({}, _shapes2.default, {
diameter: _Square2.default.propTypes.side,
align: _propTypes2.default.string
});
Circle.defaultProps = {
width: null,
height: null,
diameter: null,
align: _align.CENTER,
fillerStyle: null
};
exports.default = Circle;
/***/ }),
/* 16 */
/***/ (function(module, exports, __webpack_require__) {
'use strict';
exports.__esModule = 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 _react = __webpack_require__(3);
var _react2 = _interopRequireDefault(_react);
var _propTypes = __webpack_require__(1);
var _propTypes2 = _interopRequireDefault(_propTypes);
var _shapes = __webpack_require__(2);
var _shapes2 = _interopRequireDefault(_shapes);
var _align = __webpack_require__(4);
var _utils = __webpack_require__(5);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var COLS = 2;
var ROWS = 2;
var GAP = 2;
var $nbsp = '\xA0';
var blankLength = 10;
var computeCellSide = function computeCellSide(total, number, gap) {
if (total <= 0) return 0;
var gapNumber = number === 1 ? 0 : number - 1;
var rest = total - gapNumber * gap;
if (rest <= 0) {
(0, _utils.warn)('Expected option gap lower than ' + total / gapNumber + ', current ' + gap + '. Default ' + GAP + '.');
rest = 0;
}
return rest / number;
};
var Table = function Table(_ref) {
var color = _ref.color,
width = _ref.width,
height = _ref.height,
children = _ref.children,
cols = _ref.cols,
rows = _ref.rows,
gap = _ref.gap,
align = _ref.align,
fillerStyle = _ref.fillerStyle;
cols = Math.ceil(cols);
rows = Math.ceil(rows);
if (cols < 1) throw new TypeError('Expected option cols greater than 0.');
if (rows < 1) throw new TypeError('Expected option rows greater than 0.');
var cellWidth = computeCellSide(width, cols, gap);
var cellHeight = computeCellSide(height, rows, gap);
var cells = [];
if (cellWidth && cellHeight) {
for (var i = 0; i < cols; i += 1) {
for (var j = 0; j < rows; j += 1) {
cells.push(_react2.default.createElement(
'div',
{
key: i + '-' + j,
style: _extends({
background: color
}, fillerStyle, {
position: 'absolute',
top: j * (cellHeight + gap),
left: i * (cellWidth + gap),
width: cellWidth,
height: cellHeight,
lineHeight: cellHeight + 'px',
overflow: 'hidden',
textAlign: 'center'
})
},
children
));
}
}
}
return _react2.default.createElement(
'div',
{ style: { textAlign: align } },
_react2.default.createElement(
'div',
{
style: {
position: 'relative',
display: 'inline-block',
background: 'transparent',
width: width,
height: height
}
},
$nbsp.repeat(blankLength),
cells
)
);
};
Table.propTypes = _extends({}, _shapes2.default, {
cols: _propTypes2.default.number,
rows: _propTypes2.default.number,
gap: _propTypes2.default.number,
align: _propTypes2.default.string
});
Table.defaultProps = {
width: null,
height: null,
cols: COLS,
rows: ROWS,
gap: GAP,
align: _align.CENTER,
fillerStyle: null
};
exports.default = Table;
/***/ }),
/* 17 */
/***/ (function(module, exports, __webpack_require__) {
'use strict';
exports.__esModule = 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 _react = __webpack_require__(3);
var _react2 = _interopRequireDefault(_react);
var _propTypes = __webpack_require__(1);
var _propTypes2 = _interopRequireDefault(_propTypes);
var _shapes = __webpack_require__(2);
var _shapes2 = _interopRequireDefault(_shapes);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var $nbsp = '\xA0';
var Text = function Text(_ref) {
var color = _ref.color,
width = _ref.width,
height = _ref.height,
length = _ref.length,
lineHeight = _ref.lineHeight,
fontSize = _ref.fontSize,
fillerStyle = _ref.fillerStyle;
return _react2.default.createElement(
'div',
{
style: {
background: 'transparent',
overflow: 'hidden',
width: width,
height: height,
lineHeight: lineHeight,
fontSize: fontSize
}
},
_react2.default.createElement(
'span',
{
style: _extends({
background: color
}, fillerStyle, {
wordBreak: 'break-word',
wordWrap: 'break-word'
})
},
('' + $nbsp.repeat(2)).repeat(length)
)
);
};
Text.propTypes = _extends({}, _shapes2.default, {
length: _propTypes2.default.number,
lineHeight: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.string]),
fontSize: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.string])
});
Text.defaultProps = {
width: null,
height: null,
length: 100,
lineHeight: 2.3,
fontSize: '0.7em',
fillerStyle: null
};
exports.default = Text;
/***/ }),
/* 18 */
/***/ (function(module, exports, __webpack_require__) {
'use strict';
exports.__esModule = true;
exports.Table = exports.Text = exports.Circle = exports.Square = exports.Fill = undefined;
var _Fill = __webpack_require__(7);
var _Fill2 = _interopRequireDefault(_Fill);
var _Square = __webpack_require__(8);
var _Square2 = _interopRequireDefault(_Square);
var _Circle = __webpack_require__(15);
var _Circle2 = _interopRequireDefault(_Circle);
var _Text = __webpack_require__(17);
var _Text2 = _interopRequireDefault(_Text);
var _Table = __webpack_require__(16);
var _Table2 = _interopRequireDefault(_Table);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.Fill = _Fill2.default;
exports.Square = _Square2.default;
exports.Circle = _Circle2.default;
exports.Text = _Text2.default;
exports.Table = _Table2.default;
exports.default = {
Fill: _Fill2.default,
Square: _Square2.default,
Circle: _Circle2.default,
Text: _Text2.default,
Table: _Table2.default
};
/***/ }),
/* 19 */
/***/ (function(module, exports, __webpack_require__) {
'use strict';
exports.__esModule = true;
exports.$nbsp = exports.align = exports.shapes = exports.holders = exports.holdify = exports.Decorator = undefined;
var _HoC = __webpack_require__(6);
var _HoC2 = _interopRequireDefault(_HoC);
var _Decorator = __webpack_require__(13);
var _Decorator2 = _interopRequireDefault(_Decorator);
var _index = __webpack_require__(18);
var _index2 = _interopRequireDefault(_index);
var _shapes = __webpack_require__(2);
var _shapes2 = _interopRequireDefault(_shapes);
var _align = __webpack_require__(4);
var _align2 = _interopRequireDefault(_align);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var $nbsp = '\xA0';
var holdify = _Decorator2.default;
_HoC2.default.Decorator = _Decorator2.default;
_HoC2.default.holdify = holdify; // The alias of decorator
_HoC2.default.hoders = _index2.default;
_HoC2.default.shapes = _shapes2.default;
_HoC2.default.align = _align2.default;
_HoC2.default.$nbsp = $nbsp;
exports.default = _HoC2.default;
exports.Decorator = _Decorator2.default;
exports.holdify = holdify;
exports.holders = _index2.default;
exports.shapes = _shapes2.default;
exports.align = _align2.default;
exports.$nbsp = $nbsp;
/***/ }),
/* 20 */
/***/ (function(module, exports) {
/**
* Copyright 2015, Yahoo! Inc.
* Copyrights licensed under the New BSD License. See the accompanying LICENSE file for terms.
*/
'use strict';
var REACT_STATICS = {
childContextTypes: true,
contextTypes: true,
defaultProps: true,
displayName: true,
getDefaultProps: true,
mixins: true,
propTypes: true,
type: true
};
var KNOWN_STATICS = {
name: true,
length: true,
prototype: true,
caller: true,
arguments: true,
arity: true
};
var isGetOwnPropertySymbolsAvailable = typeof Object.getOwnPropertySymbols === 'function';
module.exports = function hoistNonReactStatics(targetComponent, sourceComponent, customStatics) {
if (typeof sourceComponent !== 'string') { // don't hoist over string (html) components
var keys = Object.getOwnPropertyNames(sourceComponent);
/* istanbul ignore else */
if (isGetOwnPropertySymbolsAvailable) {
keys = keys.concat(Object.getOwnPropertySymbols(sourceComponent));
}
for (var i = 0; i < keys.length; ++i) {
if (!REACT_STATICS[keys[i]] && !KNOWN_STATICS[keys[i]] && (!customStatics || !customStatics[keys[i]])) {
try {
targetComponent[keys[i]] = sourceComponent[keys[i]];
} catch (error) {
}
}
}
}
return targetComponent;
};
/***/ }),
/* 21 */
/***/ (function(module, exports, __webpack_require__) {
/**
* Copyright 2013-present, 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.
*/
'use strict';
if (true) {
var invariant = __webpack_require__(10);
var warning = __webpack_require__(11);
var ReactPropTypesSecret = __webpack_require__(12);
var loggedTypeFailures = {};
}
/**
* Assert that the values match with the type specs.
* Error messages are memorized and will only be shown once.
*
* @param {object} typeSpecs Map of name to a ReactPropType
* @param {object} values Runtime values that need to be type-checked
* @param {string} location e.g. "prop", "context", "child context"
* @param {string} componentName Name of the component for error messages.
* @param {?Function} getStack Returns the component stack.
* @private
*/
function checkPropTypes(typeSpecs, values, location, componentName, getStack) {
if (true) {
for (var typeSpecName in typeSpecs) {
if (typeSpecs.hasOwnProperty(typeSpecName)) {
var error;
// Prop type validation may throw. In case they do, we don't want to
// fail the render phase where it didn't fail before. So we log it.
// After these have been cleaned up, we'll let them throw.
try {
// This is intentionally an invariant that gets caught. It's the same
// behavior as without this statement except with a better message.
invariant(typeof typeSpecs[typeSpecName] === 'function', '%s: %s type `%s` is invalid; it must be a function, usually from ' + 'React.PropTypes.', componentName || 'React class', location, typeSpecName);
error = typeSpecs[typeSpecName](values, typeSpecName, componentName, location, null, ReactPropTypesSecret);
} catch (ex) {
error = ex;
}
warning(!error || error instanceof Error, '%s: type specification of %s `%s` is invalid; the type checker ' + 'function must return `null` or an `Error` but returned a %s. ' + 'You may have forgotten to pass an argument to the type checker ' + 'creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and ' + 'shape all require an argument).', componentName || 'React class', location, typeSpecName, typeof error);
if (error instanceof Error && !(error.message in loggedTypeFailures)) {
// Only monitor this failure once because there tends to be a lot of the
// same error.
loggedTypeFailures[error.message] = true;
var stack = getStack ? getStack() : '';
warning(false, 'Failed %s type: %s%s', location, error.message, stack != null ? stack : '');
}
}
}
}
}
module.exports = checkPropTypes;
/***/ }),
/* 22 */
/***/ (function(module, exports, __webpack_require__) {
/**
* Copyright 2013-present, 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.
*/
'use strict';
var emptyFunction = __webpack_require__(9);
var invariant = __webpack_require__(10);
var warning = __webpack_require__(11);
var ReactPropTypesSecret = __webpack_require__(12);
var checkPropTypes = __webpack_require__(21);
module.exports = function(isValidElement, throwOnDirectAccess) {
/* global Symbol */
var ITERATOR_SYMBOL = typeof Symbol === 'function' && Symbol.iterator;
var FAUX_ITERATOR_SYMBOL = '@@iterator'; // Before Symbol spec.
/**
* Returns the iterator method function contained on the iterable object.
*
* Be sure to invoke the function with the iterable as context:
*
* var iteratorFn = getIteratorFn(myIterable);
* if (iteratorFn) {
* var iterator = iteratorFn.call(myIterable);
* ...
* }
*
* @param {?object} maybeIterable
* @return {?function}
*/
function getIteratorFn(maybeIterable) {
var iteratorFn = maybeIterable && (ITERATOR_SYMBOL && maybeIterable[ITERATOR_SYMBOL] || maybeIterable[FAUX_ITERATOR_SYMBOL]);
if (typeof iteratorFn === 'function') {
return iteratorFn;
}
}
/**
* Collection of methods that allow declaration and validation of props that are
* supplied to React components. Example usage:
*
* var Props = require('ReactPropTypes');
* var MyArticle = React.createClass({
* propTypes: {
* // An optional string prop named "description".
* description: Props.string,
*
* // A required enum prop named "category".
* category: Props.oneOf(['News','Photos']).isRequired,
*
* // A prop named "dialog" that requires an instance of Dialog.
* dialog: Props.instanceOf(Dialog).isRequired
* },
* render: function() { ... }
* });
*
* A more formal specification of how these methods are used:
*
* type := array|bool|func|object|number|string|oneOf([...])|instanceOf(...)
* decl := ReactPropTypes.{type}(.isRequired)?
*
* Each and every declaration produces a function with the same signature. This
* allows the creation of custom validation functions. For example:
*
* var MyLink = React.createClass({
* propTypes: {
* // An optional string or URI prop named "href".
* href: function(props, propName, componentName) {
* var propValue = props[propName];
* if (propValue != null && typeof propValue !== 'string' &&
* !(propValue instanceof URI)) {
* return new Error(
* 'Expected a string or an URI for ' + propName + ' in ' +
* componentName
* );
* }
* }
* },
* render: function() {...}
* });
*
* @internal
*/
var ANONYMOUS = '<<anonymous>>';
// Important!
// Keep this list in sync with production version in `./factoryWithThrowingShims.js`.
var ReactPropTypes = {
array: createPrimitiveTypeChecker('array'),
bool: createPrimitiveTypeChecker('boolean'),
func: createPrimitiveTypeChecker('function'),
number: createPrimitiveTypeChecker('number'),
object: createPrimitiveTypeChecker('object'),
string: createPrimitiveTypeChecker('string'),
symbol: createPrimitiveTypeChecker('symbol'),
any: createAnyTypeChecker(),
arrayOf: createArrayOfTypeChecker,
element: createElementTypeChecker