motyl
Version:
Helper functions for creating responsive CSS-in-JS styles without runtime
851 lines (820 loc) • 62.5 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var require$$0 = require('react');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var require$$0__default = /*#__PURE__*/_interopDefaultLegacy(require$$0);
const cssRegex = /^([+-]?(?:\d+|\d*\.\d+))([a-z]*|%)$/;
function stripUnit(value) {
if (typeof value !== "string")
return value;
const matchedValue = value.match(cssRegex);
return matchedValue ? parseFloat(value) : value;
}
function getBreakpointsArray(breakpoints) {
const unsortedBreakpoints = Object.entries(breakpoints);
return unsortedBreakpoints.sort((a, b) => {
const aVal = stripUnit(a[1]);
const bVal = stripUnit(b[1]);
return aVal - bVal;
});
}
function getBreakpointsIndexesMap(bpArray) {
return bpArray.reduce((acc, curr, index) => {
acc[curr[0]] = index;
return acc;
}, {});
}
function resolveOrientation(orientation) {
let orientationQuery = "";
if (typeof orientation !== "undefined") {
orientationQuery = `and (orientation: ${orientation})`;
}
return orientationQuery;
}
function createUp(breakpoints) {
return function up(bp, orientation) {
return `@media (min-width: ${breakpoints[bp]}) ${resolveOrientation(orientation)}`;
};
}
function createResolveDownBp(breakpoints) {
return function resolveDownBp(bp) {
return `${stripUnit(breakpoints[bp]) - 0.02}px`;
};
}
function createDown(breakpoints) {
const resolveDownBp = createResolveDownBp(breakpoints);
return function down(bp, orientation) {
return `@media (max-width: ${resolveDownBp(bp)}) ${resolveOrientation(orientation)}`;
};
}
function createOnly(breakpoints) {
const resolveDownBp = createResolveDownBp(breakpoints);
const breakpointsArray = getBreakpointsArray(breakpoints);
const breakpointsIndexesMap = getBreakpointsIndexesMap(breakpointsArray);
return function only(bp, orientation) {
const bpIndex = breakpointsIndexesMap[bp];
const nextBp = breakpointsArray[bpIndex + 1];
const down = nextBp ? `and (max-width: ${resolveDownBp(nextBp[0])})` : "";
return `@media (min-width: ${breakpoints[bp]}) ${down} ${resolveOrientation(orientation)}`;
};
}
function createBetween(breakpoints) {
const resolveDownBp = createResolveDownBp(breakpoints);
return function between(bp1, bp2, orientation) {
return `@media (min-width: ${breakpoints[bp1]}) and (max-width: ${resolveDownBp(bp2)}) ${resolveOrientation(orientation)}`;
};
}
function createSortValuesByBp(breakpoints) {
const breakpointsArray = getBreakpointsArray(breakpoints);
const breakpointsIndexesMap = getBreakpointsIndexesMap(breakpointsArray);
return function sortValuesByBp(values) {
return values.sort((a, b) => {
const aBp = a[0];
const bBp = b[0];
return breakpointsIndexesMap[aBp] - breakpointsIndexesMap[bBp];
});
};
}
function createBreakpoints(breakpoints) {
const up = createUp(breakpoints);
const down = createDown(breakpoints);
const only = createOnly(breakpoints);
const between = createBetween(breakpoints);
const sortValuesByBp = createSortValuesByBp(breakpoints);
return { up, down, only, between, sortValuesByBp };
}
const stripAsNumber = (value) => stripUnit(value);
function betweenFluid(fromSize, toSize, minScreen, maxScreen) {
const slope = (stripAsNumber(fromSize) - stripAsNumber(toSize)) /
(stripAsNumber(minScreen) - stripAsNumber(maxScreen));
const base = stripAsNumber(toSize) - slope * stripAsNumber(maxScreen);
return `calc(${base.toFixed(2)}${fromSize || ""} + ${(100 * slope).toFixed(2)}vw)`;
}
function createFluidRulesArray(breakpoints) {
const { sortValuesByBp } = createBreakpoints(breakpoints);
return function fluidRulesArray(prop, values, styles = []) {
const sortedFluidValuesArray = sortValuesByBp(Object.entries(values));
sortedFluidValuesArray.forEach(([bp, size], index) => {
if (index === 0) {
styles.push([prop, size]);
}
if (index === sortedFluidValuesArray.length - 1) {
styles.push([bp, { [prop]: size }]);
}
else {
const [nextBp, nextSize] = sortedFluidValuesArray[index + 1];
const fromScreen = breakpoints[bp];
const toScreen = breakpoints[nextBp];
styles.push([
[bp, nextBp],
{
[prop]: betweenFluid(size, nextSize, fromScreen, toScreen),
},
]);
}
});
return styles;
};
}
function createFluidStyle(breakpoints) {
const fluidRulesArray = createFluidRulesArray(breakpoints);
const breakpointsIndexes = getBreakpointsIndexesMap(getBreakpointsArray(breakpoints));
function getRuleScores(rule) {
const isTuple = Array.isArray(rule[0]);
const key = isTuple ? rule[0][0] : rule[0];
const breakpointIndex = breakpointsIndexes[key];
const isBreakpoint = typeof breakpointIndex === "number";
//key is css prop. set it on start of the rule
if (!isBreakpoint) {
return 100;
}
if (isTuple) {
return 10 - breakpointIndex;
}
return -breakpointIndex;
}
function rulesComparator(a, b) {
//if it's breakpoints tuple, use smallest breakpoints as a key
return getRuleScores(b) - getRuleScores(a);
}
const { up, between } = createBreakpoints(breakpoints);
function extendMediaRule(key, value, styles) {
var _a;
const currentRule = (_a = styles[key]) !== null && _a !== void 0 ? _a : {};
styles[key] = Object.assign(Object.assign({}, currentRule), value);
}
function applyStyleRuleToStyles(rulesTuple, styles) {
const [key, value] = rulesTuple;
if (Array.isArray(key)) {
const [from, to] = key;
extendMediaRule(between(from, to), value, styles);
}
else if (breakpointsIndexes[key] !== undefined) {
extendMediaRule(up(key), value, styles);
}
else {
styles[key] = value;
}
}
return function fluidStyle(style) {
const rulesArray = [];
Object.keys(style).forEach((prop) => {
fluidRulesArray(prop, style[prop], rulesArray);
});
rulesArray.sort(rulesComparator);
return rulesArray.reduce((styles, rule) => {
applyStyleRuleToStyles(rule, styles);
return styles;
}, {});
};
}
function createResponsive(breakpoints) {
const { sortValuesByBp, up } = createBreakpoints(breakpoints);
return function responsive(prop, values) {
const sortedFluidValuesArray = sortValuesByBp(Object.entries(values));
return sortedFluidValuesArray.reduce((acc, [bp, size]) => {
acc[up(bp)] = {
[prop]: size,
};
return acc;
}, {});
};
}
function matchMedia(media) {
return window.matchMedia(media.replace("@media", ""));
}
var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
function createCommonjsModule(fn) {
var module = { exports: {} };
return fn(module, module.exports), module.exports;
}
var reactResponsive = createCommonjsModule(function (module, exports) {
!function(root, factory) {
module.exports = factory(require$$0__default['default']) ;
}("undefined" != typeof self ? self : commonjsGlobal, function(__WEBPACK_EXTERNAL_MODULE_1__) {
return function(modules) {
function __webpack_require__(moduleId) {
if (installedModules[moduleId]) return installedModules[moduleId].exports;
var module = installedModules[moduleId] = {
i: moduleId,
l: !1,
exports: {}
};
return modules[moduleId].call(module.exports, module, module.exports, __webpack_require__),
module.l = !0, module.exports;
}
var installedModules = {};
return __webpack_require__.m = modules, __webpack_require__.c = installedModules,
__webpack_require__.d = function(exports, name, getter) {
__webpack_require__.o(exports, name) || Object.defineProperty(exports, name, {
configurable: !1,
enumerable: !0,
get: getter
});
}, __webpack_require__.n = function(module) {
var getter = module && module.__esModule ? function() {
return module.default;
} : function() {
return module;
};
return __webpack_require__.d(getter, "a", getter), getter;
}, __webpack_require__.o = function(object, property) {
return Object.prototype.hasOwnProperty.call(object, property);
}, __webpack_require__.p = "", __webpack_require__(__webpack_require__.s = 7);
}([ function(module, __webpack_exports__, __webpack_require__) {
function _slicedToArray(arr, i) {
return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
}
function _nonIterableRest() {
throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}
function _unsupportedIterableToArray(o, minLen) {
if (o) {
if ("string" == typeof o) return _arrayLikeToArray(o, minLen);
var n = Object.prototype.toString.call(o).slice(8, -1);
return "Object" === n && o.constructor && (n = o.constructor.name), "Map" === n || "Set" === n ? Array.from(o) : "Arguments" === n || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n) ? _arrayLikeToArray(o, minLen) : void 0;
}
}
function _arrayLikeToArray(arr, len) {
(null == len || len > arr.length) && (len = arr.length);
for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
return arr2;
}
function _iterableToArrayLimit(arr, i) {
if ("undefined" != typeof Symbol && Symbol.iterator in Object(arr)) {
var _arr = [], _n = !0, _d = !1, _e = void 0;
try {
for (var _s, _i = arr[Symbol.iterator](); !(_n = (_s = _i.next()).done) && (_arr.push(_s.value),
!i || _arr.length !== i); _n = !0) ;
} catch (err) {
_d = !0, _e = err;
} finally {
try {
_n || null == _i.return || _i.return();
} finally {
if (_d) throw _e;
}
}
return _arr;
}
}
function _arrayWithHoles(arr) {
if (Array.isArray(arr)) return arr;
}
var __WEBPACK_IMPORTED_MODULE_0_react__ = __webpack_require__(1), __WEBPACK_IMPORTED_MODULE_0_react___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_react__), __WEBPACK_IMPORTED_MODULE_1_matchmediaquery__ = __webpack_require__(8), __WEBPACK_IMPORTED_MODULE_1_matchmediaquery___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_1_matchmediaquery__), __WEBPACK_IMPORTED_MODULE_2_hyphenate_style_name__ = __webpack_require__(2), __WEBPACK_IMPORTED_MODULE_3_shallow_equal_objects__ = __webpack_require__(10), __WEBPACK_IMPORTED_MODULE_3_shallow_equal_objects___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_3_shallow_equal_objects__), __WEBPACK_IMPORTED_MODULE_4__toQuery__ = __webpack_require__(3), __WEBPACK_IMPORTED_MODULE_5__Context__ = __webpack_require__(6), makeQuery = function(settings) {
return settings.query || Object(__WEBPACK_IMPORTED_MODULE_4__toQuery__.a)(settings);
}, hyphenateKeys = function(obj) {
if (!obj) return null;
var keys = Object.keys(obj);
return 0 === keys.length ? null : keys.reduce(function(result, key) {
return result[Object(__WEBPACK_IMPORTED_MODULE_2_hyphenate_style_name__.a)(key)] = obj[key],
result;
}, {});
}, useIsUpdate = function() {
var ref = __WEBPACK_IMPORTED_MODULE_0_react___default.a.useRef(!1);
return __WEBPACK_IMPORTED_MODULE_0_react___default.a.useEffect(function() {
ref.current = !0;
}, []), ref.current;
}, useDevice = function(deviceFromProps) {
var deviceFromContext = __WEBPACK_IMPORTED_MODULE_0_react___default.a.useContext(__WEBPACK_IMPORTED_MODULE_5__Context__.a), getDevice = function() {
return hyphenateKeys(deviceFromProps) || hyphenateKeys(deviceFromContext);
}, _React$useState = __WEBPACK_IMPORTED_MODULE_0_react___default.a.useState(getDevice), _React$useState2 = _slicedToArray(_React$useState, 2), device = _React$useState2[0], setDevice = _React$useState2[1];
return __WEBPACK_IMPORTED_MODULE_0_react___default.a.useEffect(function() {
var newDevice = getDevice();
__WEBPACK_IMPORTED_MODULE_3_shallow_equal_objects___default()(device, newDevice) || setDevice(newDevice);
}, [ deviceFromProps, deviceFromContext ]), device;
}, useQuery = function(settings) {
var getQuery = function() {
return makeQuery(settings);
}, _React$useState3 = __WEBPACK_IMPORTED_MODULE_0_react___default.a.useState(getQuery), _React$useState4 = _slicedToArray(_React$useState3, 2), query = _React$useState4[0], setQuery = _React$useState4[1];
return __WEBPACK_IMPORTED_MODULE_0_react___default.a.useEffect(function() {
var newQuery = getQuery();
query !== newQuery && setQuery(newQuery);
}, [ settings ]), query;
}, useMatchMedia = function(query, device) {
var getMatchMedia = function() {
return __WEBPACK_IMPORTED_MODULE_1_matchmediaquery___default()(query, device || {}, !!device);
}, _React$useState5 = __WEBPACK_IMPORTED_MODULE_0_react___default.a.useState(getMatchMedia), _React$useState6 = _slicedToArray(_React$useState5, 2), mq = _React$useState6[0], setMq = _React$useState6[1], isUpdate = useIsUpdate();
return __WEBPACK_IMPORTED_MODULE_0_react___default.a.useEffect(function() {
return isUpdate && setMq(getMatchMedia()), function() {
mq.dispose();
};
}, [ query, device ]), mq;
}, useMatches = function(mediaQuery) {
var _React$useState7 = __WEBPACK_IMPORTED_MODULE_0_react___default.a.useState(mediaQuery.matches), _React$useState8 = _slicedToArray(_React$useState7, 2), matches = _React$useState8[0], setMatches = _React$useState8[1];
return __WEBPACK_IMPORTED_MODULE_0_react___default.a.useEffect(function() {
var updateMatches = function() {
setMatches(mediaQuery.matches);
};
return mediaQuery.addListener(updateMatches), updateMatches(), function() {
mediaQuery.removeListener(updateMatches);
};
}, [ mediaQuery ]), matches;
}, useMediaQuery = function(settings, device, onChange) {
var deviceSettings = useDevice(device), query = useQuery(settings);
if (!query) throw new Error("Invalid or missing MediaQuery!");
var mq = useMatchMedia(query, deviceSettings), matches = useMatches(mq), isUpdate = useIsUpdate();
return __WEBPACK_IMPORTED_MODULE_0_react___default.a.useEffect(function() {
isUpdate && onChange && onChange(matches);
}, [ matches ]), matches;
};
__webpack_exports__.a = useMediaQuery;
}, function(module, exports) {
module.exports = __WEBPACK_EXTERNAL_MODULE_1__;
}, function(module, __webpack_exports__, __webpack_require__) {
function toHyphenLower(match) {
return "-" + match.toLowerCase();
}
function hyphenateStyleName(name) {
if (cache.hasOwnProperty(name)) return cache[name];
var hName = name.replace(uppercasePattern, toHyphenLower);
return cache[name] = msPattern.test(hName) ? "-" + hName : hName;
}
var uppercasePattern = /[A-Z]/g, msPattern = /^ms-/, cache = {};
__webpack_exports__.a = hyphenateStyleName;
}, function(module, __webpack_exports__, __webpack_require__) {
var __WEBPACK_IMPORTED_MODULE_0_hyphenate_style_name__ = __webpack_require__(2), __WEBPACK_IMPORTED_MODULE_1__mediaQuery__ = __webpack_require__(11), negate = function(cond) {
return "not ".concat(cond);
}, keyVal = function(k, v) {
var realKey = Object(__WEBPACK_IMPORTED_MODULE_0_hyphenate_style_name__.a)(k);
return "number" == typeof v && (v = "".concat(v, "px")), !0 === v ? realKey : !1 === v ? negate(realKey) : "(".concat(realKey, ": ").concat(v, ")");
}, join = function(conds) {
return conds.join(" and ");
}, toQuery = function(obj) {
var rules = [];
return Object.keys(__WEBPACK_IMPORTED_MODULE_1__mediaQuery__.a.all).forEach(function(k) {
var v = obj[k];
null != v && rules.push(keyVal(k, v));
}), join(rules);
};
__webpack_exports__.a = toQuery;
}, function(module, exports, __webpack_require__) {
module.exports = __webpack_require__(13);
}, function(module, exports, __webpack_require__) {
module.exports = "SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED";
}, function(module, __webpack_exports__, __webpack_require__) {
var __WEBPACK_IMPORTED_MODULE_0_react__ = __webpack_require__(1), __WEBPACK_IMPORTED_MODULE_0_react___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_react__), Context = __WEBPACK_IMPORTED_MODULE_0_react___default.a.createContext();
__webpack_exports__.a = Context;
}, function(module, __webpack_exports__, __webpack_require__) {
Object.defineProperty(__webpack_exports__, "__esModule", {
value: !0
});
var __WEBPACK_IMPORTED_MODULE_0__useMediaQuery__ = __webpack_require__(0), __WEBPACK_IMPORTED_MODULE_1__Component__ = __webpack_require__(17), __WEBPACK_IMPORTED_MODULE_2__toQuery__ = __webpack_require__(3), __WEBPACK_IMPORTED_MODULE_3__Context__ = __webpack_require__(6);
__webpack_require__.d(__webpack_exports__, "default", function() {
return __WEBPACK_IMPORTED_MODULE_1__Component__.a;
}), __webpack_require__.d(__webpack_exports__, "useMediaQuery", function() {
return __WEBPACK_IMPORTED_MODULE_0__useMediaQuery__.a;
}), __webpack_require__.d(__webpack_exports__, "toQuery", function() {
return __WEBPACK_IMPORTED_MODULE_2__toQuery__.a;
}), __webpack_require__.d(__webpack_exports__, "Context", function() {
return __WEBPACK_IMPORTED_MODULE_3__Context__.a;
});
}, function(module, exports, __webpack_require__) {
function Mql(query, values, forceStatic) {
function addListener(listener) {
mql && mql.addListener(listener);
}
function removeListener(listener) {
mql && mql.removeListener(listener);
}
function update(evt) {
self.matches = evt.matches, self.media = evt.media;
}
function dispose() {
mql && mql.removeListener(update);
}
var self = this;
if (dynamicMatch && !forceStatic) {
var mql = dynamicMatch.call(window, query);
this.matches = mql.matches, this.media = mql.media, mql.addListener(update);
} else this.matches = staticMatch(query, values), this.media = query;
this.addListener = addListener, this.removeListener = removeListener, this.dispose = dispose;
}
function matchMedia(query, values, forceStatic) {
return new Mql(query, values, forceStatic);
}
var staticMatch = __webpack_require__(9).match, dynamicMatch = "undefined" != typeof window ? window.matchMedia : null;
module.exports = matchMedia;
}, function(module, exports, __webpack_require__) {
function matchQuery(mediaQuery, values) {
return parseQuery(mediaQuery).some(function(query) {
var inverse = query.inverse, typeMatch = "all" === query.type || values.type === query.type;
if (typeMatch && inverse || !typeMatch && !inverse) return !1;
var expressionsMatch = query.expressions.every(function(expression) {
var feature = expression.feature, modifier = expression.modifier, expValue = expression.value, value = values[feature];
if (!value) return !1;
switch (feature) {
case "orientation":
case "scan":
return value.toLowerCase() === expValue.toLowerCase();
case "width":
case "height":
case "device-width":
case "device-height":
expValue = toPx(expValue), value = toPx(value);
break;
case "resolution":
expValue = toDpi(expValue), value = toDpi(value);
break;
case "aspect-ratio":
case "device-aspect-ratio":
case "device-pixel-ratio":
expValue = toDecimal(expValue), value = toDecimal(value);
break;
case "grid":
case "color":
case "color-index":
case "monochrome":
expValue = parseInt(expValue, 10) || 1, value = parseInt(value, 10) || 0;
}
switch (modifier) {
case "min":
return value >= expValue;
case "max":
return value <= expValue;
default:
return value === expValue;
}
});
return expressionsMatch && !inverse || !expressionsMatch && inverse;
});
}
function parseQuery(mediaQuery) {
return mediaQuery.split(",").map(function(query) {
query = query.trim();
var captures = query.match(RE_MEDIA_QUERY), modifier = captures[1], type = captures[2], expressions = captures[3] || "", parsed = {};
return parsed.inverse = !!modifier && "not" === modifier.toLowerCase(), parsed.type = type ? type.toLowerCase() : "all",
expressions = expressions.match(/\([^\)]+\)/g) || [], parsed.expressions = expressions.map(function(expression) {
var captures = expression.match(RE_MQ_EXPRESSION), feature = captures[1].toLowerCase().match(RE_MQ_FEATURE);
return {
modifier: feature[1],
feature: feature[2],
value: captures[2]
};
}), parsed;
});
}
function toDecimal(ratio) {
var numbers, decimal = Number(ratio);
return decimal || (numbers = ratio.match(/^(\d+)\s*\/\s*(\d+)$/), decimal = numbers[1] / numbers[2]),
decimal;
}
function toDpi(resolution) {
var value = parseFloat(resolution);
switch (String(resolution).match(RE_RESOLUTION_UNIT)[1]) {
case "dpcm":
return value / 2.54;
case "dppx":
return 96 * value;
default:
return value;
}
}
function toPx(length) {
var value = parseFloat(length);
switch (String(length).match(RE_LENGTH_UNIT)[1]) {
case "em":
case "rem":
return 16 * value;
case "cm":
return 96 * value / 2.54;
case "mm":
return 96 * value / 2.54 / 10;
case "in":
return 96 * value;
case "pt":
return 72 * value;
case "pc":
return 72 * value / 12;
default:
return value;
}
}
exports.match = matchQuery, exports.parse = parseQuery;
var RE_MEDIA_QUERY = /(?:(only|not)?\s*([^\s\(\)]+)(?:\s*and)?\s*)?(.+)?/i, RE_MQ_EXPRESSION = /\(\s*([^\s\:\)]+)\s*(?:\:\s*([^\s\)]+))?\s*\)/, RE_MQ_FEATURE = /^(?:(min|max)-)?(.+)/, RE_LENGTH_UNIT = /(em|rem|px|cm|mm|in|pt|pc)?$/, RE_RESOLUTION_UNIT = /(dpi|dpcm|dppx)?$/;
}, function(module, exports, __webpack_require__) {
function shallowEqualObjects(objA, objB) {
if (objA === objB) return !0;
if (!objA || !objB) return !1;
var aKeys = Object.keys(objA), bKeys = Object.keys(objB), len = aKeys.length;
if (bKeys.length !== len) return !1;
for (var i = 0; i < len; i++) {
var key = aKeys[i];
if (objA[key] !== objB[key] || !Object.prototype.hasOwnProperty.call(objB, key)) return !1;
}
return !0;
}
module.exports = shallowEqualObjects;
}, function(module, __webpack_exports__, __webpack_require__) {
function ownKeys(object, enumerableOnly) {
var keys = Object.keys(object);
if (Object.getOwnPropertySymbols) {
var symbols = Object.getOwnPropertySymbols(object);
enumerableOnly && (symbols = symbols.filter(function(sym) {
return Object.getOwnPropertyDescriptor(object, sym).enumerable;
})), keys.push.apply(keys, symbols);
}
return keys;
}
function _objectSpread(target) {
for (var i = 1; i < arguments.length; i++) {
var source = null != arguments[i] ? arguments[i] : {};
i % 2 ? ownKeys(Object(source), !0).forEach(function(key) {
_defineProperty(target, key, source[key]);
}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function(key) {
Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
});
}
return target;
}
function _defineProperty(obj, key, value) {
return key in obj ? Object.defineProperty(obj, key, {
value: value,
enumerable: !0,
configurable: !0,
writable: !0
}) : obj[key] = value, obj;
}
var __WEBPACK_IMPORTED_MODULE_0_prop_types__ = __webpack_require__(12), __WEBPACK_IMPORTED_MODULE_0_prop_types___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_prop_types__), stringOrNumber = __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.oneOfType([ __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.string, __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.number ]), matchers = {
orientation: __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.oneOf([ "portrait", "landscape" ]),
scan: __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.oneOf([ "progressive", "interlace" ]),
aspectRatio: __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.string,
deviceAspectRatio: __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.string,
height: stringOrNumber,
deviceHeight: stringOrNumber,
width: stringOrNumber,
deviceWidth: stringOrNumber,
color: __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.bool,
colorIndex: __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.bool,
monochrome: __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.bool,
resolution: stringOrNumber
}, features = _objectSpread({
minAspectRatio: __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.string,
maxAspectRatio: __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.string,
minDeviceAspectRatio: __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.string,
maxDeviceAspectRatio: __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.string,
minHeight: stringOrNumber,
maxHeight: stringOrNumber,
minDeviceHeight: stringOrNumber,
maxDeviceHeight: stringOrNumber,
minWidth: stringOrNumber,
maxWidth: stringOrNumber,
minDeviceWidth: stringOrNumber,
maxDeviceWidth: stringOrNumber,
minColor: __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.number,
maxColor: __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.number,
minColorIndex: __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.number,
maxColorIndex: __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.number,
minMonochrome: __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.number,
maxMonochrome: __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.number,
minResolution: stringOrNumber,
maxResolution: stringOrNumber
}, matchers), types = {
all: __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.bool,
grid: __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.bool,
aural: __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.bool,
braille: __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.bool,
handheld: __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.bool,
print: __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.bool,
projection: __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.bool,
screen: __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.bool,
tty: __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.bool,
tv: __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.bool,
embossed: __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.bool
}, all = _objectSpread(_objectSpread({}, types), features);
matchers.type = Object.keys(types), __webpack_exports__.a = {
all: all,
types: types,
matchers: matchers,
features: features
};
}, function(module, exports, __webpack_require__) {
var ReactIs = __webpack_require__(4);
module.exports = __webpack_require__(14)(ReactIs.isElement, !0);
}, function(module, exports, __webpack_require__) {
!function() {
function isValidElementType(type) {
return "string" == typeof type || "function" == typeof type || type === REACT_FRAGMENT_TYPE || type === REACT_CONCURRENT_MODE_TYPE || type === REACT_PROFILER_TYPE || type === REACT_STRICT_MODE_TYPE || type === REACT_SUSPENSE_TYPE || type === REACT_SUSPENSE_LIST_TYPE || "object" == typeof type && null !== type && (type.$$typeof === REACT_LAZY_TYPE || type.$$typeof === REACT_MEMO_TYPE || type.$$typeof === REACT_PROVIDER_TYPE || type.$$typeof === REACT_CONTEXT_TYPE || type.$$typeof === REACT_FORWARD_REF_TYPE || type.$$typeof === REACT_FUNDAMENTAL_TYPE || type.$$typeof === REACT_RESPONDER_TYPE || type.$$typeof === REACT_SCOPE_TYPE || type.$$typeof === REACT_BLOCK_TYPE);
}
function typeOf(object) {
if ("object" == typeof object && null !== object) {
var $$typeof = object.$$typeof;
switch ($$typeof) {
case REACT_ELEMENT_TYPE:
var type = object.type;
switch (type) {
case REACT_ASYNC_MODE_TYPE:
case REACT_CONCURRENT_MODE_TYPE:
case REACT_FRAGMENT_TYPE:
case REACT_PROFILER_TYPE:
case REACT_STRICT_MODE_TYPE:
case REACT_SUSPENSE_TYPE:
return type;
default:
var $$typeofType = type && type.$$typeof;
switch ($$typeofType) {
case REACT_CONTEXT_TYPE:
case REACT_FORWARD_REF_TYPE:
case REACT_LAZY_TYPE:
case REACT_MEMO_TYPE:
case REACT_PROVIDER_TYPE:
return $$typeofType;
default:
return $$typeof;
}
}
case REACT_PORTAL_TYPE:
return $$typeof;
}
}
}
function isAsyncMode(object) {
return hasWarnedAboutDeprecatedIsAsyncMode || (hasWarnedAboutDeprecatedIsAsyncMode = !0,
console.warn("The ReactIs.isAsyncMode() alias has been deprecated, and will be removed in React 17+. Update your code to use ReactIs.isConcurrentMode() instead. It has the exact same API.")),
isConcurrentMode(object) || typeOf(object) === REACT_ASYNC_MODE_TYPE;
}
function isConcurrentMode(object) {
return typeOf(object) === REACT_CONCURRENT_MODE_TYPE;
}
function isContextConsumer(object) {
return typeOf(object) === REACT_CONTEXT_TYPE;
}
function isContextProvider(object) {
return typeOf(object) === REACT_PROVIDER_TYPE;
}
function isElement(object) {
return "object" == typeof object && null !== object && object.$$typeof === REACT_ELEMENT_TYPE;
}
function isForwardRef(object) {
return typeOf(object) === REACT_FORWARD_REF_TYPE;
}
function isFragment(object) {
return typeOf(object) === REACT_FRAGMENT_TYPE;
}
function isLazy(object) {
return typeOf(object) === REACT_LAZY_TYPE;
}
function isMemo(object) {
return typeOf(object) === REACT_MEMO_TYPE;
}
function isPortal(object) {
return typeOf(object) === REACT_PORTAL_TYPE;
}
function isProfiler(object) {
return typeOf(object) === REACT_PROFILER_TYPE;
}
function isStrictMode(object) {
return typeOf(object) === REACT_STRICT_MODE_TYPE;
}
function isSuspense(object) {
return typeOf(object) === REACT_SUSPENSE_TYPE;
}
var hasSymbol = "function" == typeof Symbol && Symbol.for, REACT_ELEMENT_TYPE = hasSymbol ? Symbol.for("react.element") : 60103, REACT_PORTAL_TYPE = hasSymbol ? Symbol.for("react.portal") : 60106, REACT_FRAGMENT_TYPE = hasSymbol ? Symbol.for("react.fragment") : 60107, REACT_STRICT_MODE_TYPE = hasSymbol ? Symbol.for("react.strict_mode") : 60108, REACT_PROFILER_TYPE = hasSymbol ? Symbol.for("react.profiler") : 60114, REACT_PROVIDER_TYPE = hasSymbol ? Symbol.for("react.provider") : 60109, REACT_CONTEXT_TYPE = hasSymbol ? Symbol.for("react.context") : 60110, REACT_ASYNC_MODE_TYPE = hasSymbol ? Symbol.for("react.async_mode") : 60111, REACT_CONCURRENT_MODE_TYPE = hasSymbol ? Symbol.for("react.concurrent_mode") : 60111, REACT_FORWARD_REF_TYPE = hasSymbol ? Symbol.for("react.forward_ref") : 60112, REACT_SUSPENSE_TYPE = hasSymbol ? Symbol.for("react.suspense") : 60113, REACT_SUSPENSE_LIST_TYPE = hasSymbol ? Symbol.for("react.suspense_list") : 60120, REACT_MEMO_TYPE = hasSymbol ? Symbol.for("react.memo") : 60115, REACT_LAZY_TYPE = hasSymbol ? Symbol.for("react.lazy") : 60116, REACT_BLOCK_TYPE = hasSymbol ? Symbol.for("react.block") : 60121, REACT_FUNDAMENTAL_TYPE = hasSymbol ? Symbol.for("react.fundamental") : 60117, REACT_RESPONDER_TYPE = hasSymbol ? Symbol.for("react.responder") : 60118, REACT_SCOPE_TYPE = hasSymbol ? Symbol.for("react.scope") : 60119, AsyncMode = REACT_ASYNC_MODE_TYPE, ConcurrentMode = REACT_CONCURRENT_MODE_TYPE, ContextConsumer = REACT_CONTEXT_TYPE, ContextProvider = REACT_PROVIDER_TYPE, Element = REACT_ELEMENT_TYPE, ForwardRef = REACT_FORWARD_REF_TYPE, Fragment = REACT_FRAGMENT_TYPE, Lazy = REACT_LAZY_TYPE, Memo = REACT_MEMO_TYPE, Portal = REACT_PORTAL_TYPE, Profiler = REACT_PROFILER_TYPE, StrictMode = REACT_STRICT_MODE_TYPE, Suspense = REACT_SUSPENSE_TYPE, hasWarnedAboutDeprecatedIsAsyncMode = !1;
exports.AsyncMode = AsyncMode, exports.ConcurrentMode = ConcurrentMode, exports.ContextConsumer = ContextConsumer,
exports.ContextProvider = ContextProvider, exports.Element = Element, exports.ForwardRef = ForwardRef,
exports.Fragment = Fragment, exports.Lazy = Lazy, exports.Memo = Memo, exports.Portal = Portal,
exports.Profiler = Profiler, exports.StrictMode = StrictMode, exports.Suspense = Suspense,
exports.isAsyncMode = isAsyncMode, exports.isConcurrentMode = isConcurrentMode,
exports.isContextConsumer = isContextConsumer, exports.isContextProvider = isContextProvider,
exports.isElement = isElement, exports.isForwardRef = isForwardRef, exports.isFragment = isFragment,
exports.isLazy = isLazy, exports.isMemo = isMemo, exports.isPortal = isPortal, exports.isProfiler = isProfiler,
exports.isStrictMode = isStrictMode, exports.isSuspense = isSuspense, exports.isValidElementType = isValidElementType,
exports.typeOf = typeOf;
}();
}, function(module, exports, __webpack_require__) {
function emptyFunctionThatReturnsNull() {
return null;
}
var ReactIs = __webpack_require__(4), assign = __webpack_require__(15), ReactPropTypesSecret = __webpack_require__(5), checkPropTypes = __webpack_require__(16), has = Function.call.bind(Object.prototype.hasOwnProperty), printWarning = function() {};
printWarning = function(text) {
var message = "Warning: " + text;
"undefined" != typeof console && console.error(message);
try {
throw new Error(message);
} catch (x) {}
}, module.exports = function(isValidElement, throwOnDirectAccess) {
function getIteratorFn(maybeIterable) {
var iteratorFn = maybeIterable && (ITERATOR_SYMBOL && maybeIterable[ITERATOR_SYMBOL] || maybeIterable[FAUX_ITERATOR_SYMBOL]);
if ("function" == typeof iteratorFn) return iteratorFn;
}
function is(x, y) {
return x === y ? 0 !== x || 1 / x == 1 / y : x !== x && y !== y;
}
function PropTypeError(message) {
this.message = message, this.stack = "";
}
function createChainableTypeChecker(validate) {
function checkType(isRequired, props, propName, componentName, location, propFullName, secret) {
if (componentName = componentName || ANONYMOUS, propFullName = propFullName || propName,
secret !== ReactPropTypesSecret) {
if (throwOnDirectAccess) {
var err = new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use `PropTypes.checkPropTypes()` to call them. Read more at http://fb.me/use-check-prop-types");
throw err.name = "Invariant Violation", err;
}
if ("undefined" != typeof console) {
var cacheKey = componentName + ":" + propName;
!manualPropTypeCallCache[cacheKey] && manualPropTypeWarningCount < 3 && (printWarning("You are manually calling a React.PropTypes validation function for the `" + propFullName + "` prop on `" + componentName + "`. This is deprecated and will throw in the standalone `prop-types` package. You may be seeing this warning due to a third-party PropTypes library. See https://fb.me/react-warning-dont-call-proptypes for details."),
manualPropTypeCallCache[cacheKey] = !0, manualPropTypeWarningCount++);
}
}
return null == props[propName] ? isRequired ? new PropTypeError(null === props[propName] ? "The " + location + " `" + propFullName + "` is marked as required in `" + componentName + "`, but its value is `null`." : "The " + location + " `" + propFullName + "` is marked as required in `" + componentName + "`, but its value is `undefined`.") : null : validate(props, propName, componentName, location, propFullName);
}
var manualPropTypeCallCache = {}, manualPropTypeWarningCount = 0, chainedCheckType = checkType.bind(null, !1);
return chainedCheckType.isRequired = checkType.bind(null, !0), chainedCheckType;
}
function createPrimitiveTypeChecker(expectedType) {
function validate(props, propName, componentName, location, propFullName, secret) {
var propValue = props[propName];
if (getPropType(propValue) !== expectedType) return new PropTypeError("Invalid " + location + " `" + propFullName + "` of type `" + getPreciseType(propValue) + "` supplied to `" + componentName + "`, expected `" + expectedType + "`.");
return null;
}
return createChainableTypeChecker(validate);
}
function createArrayOfTypeChecker(typeChecker) {
function validate(props, propName, componentName, location, propFullName) {
if ("function" != typeof typeChecker) return new PropTypeError("Property `" + propFullName + "` of component `" + componentName + "` has invalid PropType notation inside arrayOf.");
var propValue = props[propName];
if (!Array.isArray(propValue)) {
return new PropTypeError("Invalid " + location + " `" + propFullName + "` of type `" + getPropType(propValue) + "` supplied to `" + componentName + "`, expected an array.");
}
for (var i = 0; i < propValue.length; i++) {
var error = typeChecker(propValue, i, componentName, location, propFullName + "[" + i + "]", ReactPropTypesSecret);
if (error instanceof Error) return error;
}
return null;
}
return createChainableTypeChecker(validate);
}
function createInstanceTypeChecker(expectedClass) {
function validate(props, propName, componentName, location, propFullName) {
if (!(props[propName] instanceof expectedClass)) {
var expectedClassName = expectedClass.name || ANONYMOUS;
return new PropTypeError("Invalid " + location + " `" + propFullName + "` of type `" + getClassName(props[propName]) + "` supplied to `" + componentName + "`, expected instance of `" + expectedClassName + "`.");
}
return null;
}
return createChainableTypeChecker(validate);
}
function createEnumTypeChecker(expectedValues) {
function validate(props, propName, componentName, location, propFullName) {
for (var propValue = props[propName], i = 0; i < expectedValues.length; i++) if (is(propValue, expectedValues[i])) return null;
var valuesString = JSON.stringify(expectedValues, function(key, value) {
return "symbol" === getPreciseType(value) ? String(value) : value;
});
return new PropTypeError("Invalid " + location + " `" + propFullName + "` of value `" + String(propValue) + "` supplied to `" + componentName + "`, expected one of " + valuesString + ".");
}
return Array.isArray(expectedValues) ? createChainableTypeChecker(validate) : (printWarning(arguments.length > 1 ? "Invalid arguments supplied to oneOf, expected an array, got " + arguments.length + " arguments. A common mistake is to write oneOf(x, y, z) instead of oneOf([x, y, z])." : "Invalid argument supplied to oneOf, expected an array."),
emptyFunctionThatReturnsNull);
}
function createObjectOfTypeChecker(typeChecker) {
function validate(props, propName, componentName, location, propFullName) {
if ("function" != typeof typeChecker) return new PropTypeError("Property `" + propFullName + "` of component `" + componentName + "` has invalid PropType notation inside objectOf.");
var propValue = props[propName], propType = getPropType(propValue);
if ("object" !== propType) return new PropTypeError("Invalid " + location + " `" + propFullName + "` of type `" + propType + "` supplied to `" + componentName + "`, expected an object.");
for (var key in propValue) if (has(propValue, key)) {
var error = typeChecker(propValue, key, componentName, location, propFullName + "." + key, ReactPropTypesSecret);
if (error instanceof Error) return error;
}
return null;
}
return createChainableTypeChecker(validate);
}
function createUnionTypeChecker(arrayOfTypeCheckers) {
function validate(props, propName, componentName, location, propFullName) {
for (var i = 0; i < arrayOfTypeCheckers.length; i++) {
if (null == (0, arrayOfTypeCheckers[i])(props, propName, componentName, location, propFullName, ReactPropTypesSecret)) return null;
}
return new PropTypeError("Invalid " + location + " `" + propFullName + "` supplied to `" + componentName + "`.");
}
if (!Array.isArray(arrayOfTypeCheckers)) return printWarning("Invalid argument supplied to oneOfType, expected an instance of array."),
emptyFunctionThatReturnsNull;
for (var i = 0; i < arrayOfTypeCheckers.length; i++) {
var checker = arrayOfTypeCheckers[i];
if ("function" != typeof checker) return printWarning("Invalid argument supplied to oneOfType. Expected an array of check functions, but received " + getPostfixForTypeWarning(checker) + " at index " + i + "."),
emptyFunctionThatReturnsNull;
}
return createChainableTypeChecker(validate);
}
function createShapeTypeChecker(shapeTypes) {
function validate(props, propName, componentName, location, propFullName) {
var propValue = props[propName], propType = getPropType(propValue);
if ("object" !== propType) return new PropTypeError("Invalid " + location + " `" + propFullName + "` of type `" + propType + "` supplied to `" + componentName + "`, expected `object`.");
for (var key in shapeTypes) {
var checker = shapeTypes[key];
if (checker) {
var error = checker(propValue, key, componentName, location, propFullName + "." + key, ReactPropTypesSecret);
if (error) return error;
}
}
return null;
}
return createChainableTypeChecker(validate);
}
function createStrictShapeTypeChecker(shapeTypes) {
function validate(props, propName, componentName, location, propFullName) {
var propValue = props[propName], propType = getPropType(propValue);
if ("object" !== propType) return new PropTypeError("Invalid " + location + " `" + propFullName + "` of type `" + propType + "` supplied to `" + componentName + "`, expected `object`.");
var allKeys = assign({}, props[propName], shapeTypes);
for (var key in allKeys) {
var checker = shapeTypes[key];
if (!checker) return new PropTypeError("Invalid " + location + " `" + propFullName + "` key `" + key + "` supplied to `" + componentName + "`.\nBad object: " + JSON.stringify(props[propName], null, " ") + "\nValid keys: " + JSON.stringify(Object.keys(shapeTypes),