\n * Prefer `scheduleUpdate` over `update` because of performance reasons.\n * @method\n * @memberof Popper\n */\n\n\nfunction update() {\n // if popper is destroyed, don't perform any further update\n if (this.state.isDestroyed) {\n return;\n }\n\n var data = {\n instance: this,\n styles: {},\n arrowStyles: {},\n attributes: {},\n flipped: false,\n offsets: {}\n }; // compute reference element offsets\n\n data.offsets.reference = getReferenceOffsets(this.state, this.popper, this.reference, this.options.positionFixed); // compute auto placement, store placement inside the data object,\n // modifiers will be able to edit `placement` if needed\n // and refer to originalPlacement to know the original value\n\n data.placement = computeAutoPlacement(this.options.placement, data.offsets.reference, this.popper, this.reference, this.options.modifiers.flip.boundariesElement, this.options.modifiers.flip.padding); // store the computed placement inside `originalPlacement`\n\n data.originalPlacement = data.placement;\n data.positionFixed = this.options.positionFixed; // compute the popper offsets\n\n data.offsets.popper = getPopperOffsets(this.popper, data.offsets.reference, data.placement);\n data.offsets.popper.position = this.options.positionFixed ? 'fixed' : 'absolute'; // run the modifiers\n\n data = runModifiers(this.modifiers, data); // the first `update` will call `onCreate` callback\n // the other ones will call `onUpdate` callback\n\n if (!this.state.isCreated) {\n this.state.isCreated = true;\n this.options.onCreate(data);\n } else {\n this.options.onUpdate(data);\n }\n}\n/**\n * Helper used to know if the given modifier is enabled.\n * @method\n * @memberof Popper.Utils\n * @returns {Boolean}\n */\n\n\nfunction isModifierEnabled(modifiers, modifierName) {\n return modifiers.some(function (_ref) {\n var name = _ref.name,\n enabled = _ref.enabled;\n return enabled && name === modifierName;\n });\n}\n/**\n * Get the prefixed supported property name\n * @method\n * @memberof Popper.Utils\n * @argument {String} property (camelCase)\n * @returns {String} prefixed property (camelCase or PascalCase, depending on the vendor prefix)\n */\n\n\nfunction getSupportedPropertyName(property) {\n var prefixes = [false, 'ms', 'Webkit', 'Moz', 'O'];\n var upperProp = property.charAt(0).toUpperCase() + property.slice(1);\n\n for (var i = 0; i < prefixes.length; i++) {\n var prefix = prefixes[i];\n var toCheck = prefix ? '' + prefix + upperProp : property;\n\n if (typeof document.body.style[toCheck] !== 'undefined') {\n return toCheck;\n }\n }\n\n return null;\n}\n/**\n * Destroys the popper.\n * @method\n * @memberof Popper\n */\n\n\nfunction destroy() {\n this.state.isDestroyed = true; // touch DOM only if `applyStyle` modifier is enabled\n\n if (isModifierEnabled(this.modifiers, 'applyStyle')) {\n this.popper.removeAttribute('x-placement');\n this.popper.style.position = '';\n this.popper.style.top = '';\n this.popper.style.left = '';\n this.popper.style.right = '';\n this.popper.style.bottom = '';\n this.popper.style.willChange = '';\n this.popper.style[getSupportedPropertyName('transform')] = '';\n }\n\n this.disableEventListeners(); // remove the popper if user explicitly asked for the deletion on destroy\n // do not use `remove` because IE11 doesn't support it\n\n if (this.options.removeOnDestroy) {\n this.popper.parentNode.removeChild(this.popper);\n }\n\n return this;\n}\n/**\n * Get the window associated with the element\n * @argument {Element} element\n * @returns {Window}\n */\n\n\nfunction getWindow(element) {\n var ownerDocument = element.ownerDocument;\n return ownerDocument ? ownerDocument.defaultView : window;\n}\n\nfunction attachToScrollParents(scrollParent, event, callback, scrollParents) {\n var isBody = scrollParent.nodeName === 'BODY';\n var target = isBody ? scrollParent.ownerDocument.defaultView : scrollParent;\n target.addEventListener(event, callback, {\n passive: true\n });\n\n if (!isBody) {\n attachToScrollParents(getScrollParent(target.parentNode), event, callback, scrollParents);\n }\n\n scrollParents.push(target);\n}\n/**\n * Setup needed event listeners used to update the popper position\n * @method\n * @memberof Popper.Utils\n * @private\n */\n\n\nfunction setupEventListeners(reference, options, state, updateBound) {\n // Resize event listener on window\n state.updateBound = updateBound;\n getWindow(reference).addEventListener('resize', state.updateBound, {\n passive: true\n }); // Scroll event listener on scroll parents\n\n var scrollElement = getScrollParent(reference);\n attachToScrollParents(scrollElement, 'scroll', state.updateBound, state.scrollParents);\n state.scrollElement = scrollElement;\n state.eventsEnabled = true;\n return state;\n}\n/**\n * It will add resize/scroll events and start recalculating\n * position of the popper element when they are triggered.\n * @method\n * @memberof Popper\n */\n\n\nfunction enableEventListeners() {\n if (!this.state.eventsEnabled) {\n this.state = setupEventListeners(this.reference, this.options, this.state, this.scheduleUpdate);\n }\n}\n/**\n * Remove event listeners used to update the popper position\n * @method\n * @memberof Popper.Utils\n * @private\n */\n\n\nfunction removeEventListeners(reference, state) {\n // Remove resize event listener on window\n getWindow(reference).removeEventListener('resize', state.updateBound); // Remove scroll event listener on scroll parents\n\n state.scrollParents.forEach(function (target) {\n target.removeEventListener('scroll', state.updateBound);\n }); // Reset state\n\n state.updateBound = null;\n state.scrollParents = [];\n state.scrollElement = null;\n state.eventsEnabled = false;\n return state;\n}\n/**\n * It will remove resize/scroll events and won't recalculate popper position\n * when they are triggered. It also won't trigger `onUpdate` callback anymore,\n * unless you call `update` method manually.\n * @method\n * @memberof Popper\n */\n\n\nfunction disableEventListeners() {\n if (this.state.eventsEnabled) {\n cancelAnimationFrame(this.scheduleUpdate);\n this.state = removeEventListeners(this.reference, this.state);\n }\n}\n/**\n * Tells if a given input is a number\n * @method\n * @memberof Popper.Utils\n * @param {*} input to check\n * @return {Boolean}\n */\n\n\nfunction isNumeric(n) {\n return n !== '' && !isNaN(parseFloat(n)) && isFinite(n);\n}\n/**\n * Set the style to the given popper\n * @method\n * @memberof Popper.Utils\n * @argument {Element} element - Element to apply the style to\n * @argument {Object} styles\n * Object with a list of properties and values which will be applied to the element\n */\n\n\nfunction setStyles(element, styles) {\n Object.keys(styles).forEach(function (prop) {\n var unit = ''; // add unit if the value is numeric and is one of the following\n\n if (['width', 'height', 'top', 'right', 'bottom', 'left'].indexOf(prop) !== -1 && isNumeric(styles[prop])) {\n unit = 'px';\n }\n\n element.style[prop] = styles[prop] + unit;\n });\n}\n/**\n * Set the attributes to the given popper\n * @method\n * @memberof Popper.Utils\n * @argument {Element} element - Element to apply the attributes to\n * @argument {Object} styles\n * Object with a list of properties and values which will be applied to the element\n */\n\n\nfunction setAttributes(element, attributes) {\n Object.keys(attributes).forEach(function (prop) {\n var value = attributes[prop];\n\n if (value !== false) {\n element.setAttribute(prop, attributes[prop]);\n } else {\n element.removeAttribute(prop);\n }\n });\n}\n/**\n * @function\n * @memberof Modifiers\n * @argument {Object} data - The data object generated by `update` method\n * @argument {Object} data.styles - List of style properties - values to apply to popper element\n * @argument {Object} data.attributes - List of attribute properties - values to apply to popper element\n * @argument {Object} options - Modifiers configuration and options\n * @returns {Object} The same data object\n */\n\n\nfunction applyStyle(data) {\n // any property present in `data.styles` will be applied to the popper,\n // in this way we can make the 3rd party modifiers add custom styles to it\n // Be aware, modifiers could override the properties defined in the previous\n // lines of this modifier!\n setStyles(data.instance.popper, data.styles); // any property present in `data.attributes` will be applied to the popper,\n // they will be set as HTML attributes of the element\n\n setAttributes(data.instance.popper, data.attributes); // if arrowElement is defined and arrowStyles has some properties\n\n if (data.arrowElement && Object.keys(data.arrowStyles).length) {\n setStyles(data.arrowElement, data.arrowStyles);\n }\n\n return data;\n}\n/**\n * Set the x-placement attribute before everything else because it could be used\n * to add margins to the popper margins needs to be calculated to get the\n * correct popper offsets.\n * @method\n * @memberof Popper.modifiers\n * @param {HTMLElement} reference - The reference element used to position the popper\n * @param {HTMLElement} popper - The HTML element used as popper\n * @param {Object} options - Popper.js options\n */\n\n\nfunction applyStyleOnLoad(reference, popper, options, modifierOptions, state) {\n // compute reference element offsets\n var referenceOffsets = getReferenceOffsets(state, popper, reference, options.positionFixed); // compute auto placement, store placement inside the data object,\n // modifiers will be able to edit `placement` if needed\n // and refer to originalPlacement to know the original value\n\n var placement = computeAutoPlacement(options.placement, referenceOffsets, popper, reference, options.modifiers.flip.boundariesElement, options.modifiers.flip.padding);\n popper.setAttribute('x-placement', placement); // Apply `position` to popper before anything else because\n // without the position applied we can't guarantee correct computations\n\n setStyles(popper, {\n position: options.positionFixed ? 'fixed' : 'absolute'\n });\n return options;\n}\n/**\n * @function\n * @memberof Popper.Utils\n * @argument {Object} data - The data object generated by `update` method\n * @argument {Boolean} shouldRound - If the offsets should be rounded at all\n * @returns {Object} The popper's position offsets rounded\n *\n * The tale of pixel-perfect positioning. It's still not 100% perfect, but as\n * good as it can be within reason.\n * Discussion here: https://github.com/FezVrasta/popper.js/pull/715\n *\n * Low DPI screens cause a popper to be blurry if not using full pixels (Safari\n * as well on High DPI screens).\n *\n * Firefox prefers no rounding for positioning and does not have blurriness on\n * high DPI screens.\n *\n * Only horizontal placement and left/right values need to be considered.\n */\n\n\nfunction getRoundedOffsets(data, shouldRound) {\n var _data$offsets = data.offsets,\n popper = _data$offsets.popper,\n reference = _data$offsets.reference;\n var round = Math.round,\n floor = Math.floor;\n\n var noRound = function noRound(v) {\n return v;\n };\n\n var referenceWidth = round(reference.width);\n var popperWidth = round(popper.width);\n var isVertical = ['left', 'right'].indexOf(data.placement) !== -1;\n var isVariation = data.placement.indexOf('-') !== -1;\n var sameWidthParity = referenceWidth % 2 === popperWidth % 2;\n var bothOddWidth = referenceWidth % 2 === 1 && popperWidth % 2 === 1;\n var horizontalToInteger = !shouldRound ? noRound : isVertical || isVariation || sameWidthParity ? round : floor;\n var verticalToInteger = !shouldRound ? noRound : round;\n return {\n left: horizontalToInteger(bothOddWidth && !isVariation && shouldRound ? popper.left - 1 : popper.left),\n top: verticalToInteger(popper.top),\n bottom: verticalToInteger(popper.bottom),\n right: horizontalToInteger(popper.right)\n };\n}\n\nvar isFirefox = isBrowser && /Firefox/i.test(navigator.userAgent);\n/**\n * @function\n * @memberof Modifiers\n * @argument {Object} data - The data object generated by `update` method\n * @argument {Object} options - Modifiers configuration and options\n * @returns {Object} The data object, properly modified\n */\n\nfunction computeStyle(data, options) {\n var x = options.x,\n y = options.y;\n var popper = data.offsets.popper; // Remove this legacy support in Popper.js v2\n\n var legacyGpuAccelerationOption = find(data.instance.modifiers, function (modifier) {\n return modifier.name === 'applyStyle';\n }).gpuAcceleration;\n\n if (legacyGpuAccelerationOption !== undefined) {\n console.warn('WARNING: `gpuAcceleration` option moved to `computeStyle` modifier and will not be supported in future versions of Popper.js!');\n }\n\n var gpuAcceleration = legacyGpuAccelerationOption !== undefined ? legacyGpuAccelerationOption : options.gpuAcceleration;\n var offsetParent = getOffsetParent(data.instance.popper);\n var offsetParentRect = getBoundingClientRect(offsetParent); // Styles\n\n var styles = {\n position: popper.position\n };\n var offsets = getRoundedOffsets(data, window.devicePixelRatio < 2 || !isFirefox);\n var sideA = x === 'bottom' ? 'top' : 'bottom';\n var sideB = y === 'right' ? 'left' : 'right'; // if gpuAcceleration is set to `true` and transform is supported,\n // we use `translate3d` to apply the position to the popper we\n // automatically use the supported prefixed version if needed\n\n var prefixedProperty = getSupportedPropertyName('transform'); // now, let's make a step back and look at this code closely (wtf?)\n // If the content of the popper grows once it's been positioned, it\n // may happen that the popper gets misplaced because of the new content\n // overflowing its reference element\n // To avoid this problem, we provide two options (x and y), which allow\n // the consumer to define the offset origin.\n // If we position a popper on top of a reference element, we can set\n // `x` to `top` to make the popper grow towards its top instead of\n // its bottom.\n\n var left = void 0,\n top = void 0;\n\n if (sideA === 'bottom') {\n // when offsetParent is the positioning is relative to the bottom of the screen (excluding the scrollbar)\n // and not the bottom of the html element\n if (offsetParent.nodeName === 'HTML') {\n top = -offsetParent.clientHeight + offsets.bottom;\n } else {\n top = -offsetParentRect.height + offsets.bottom;\n }\n } else {\n top = offsets.top;\n }\n\n if (sideB === 'right') {\n if (offsetParent.nodeName === 'HTML') {\n left = -offsetParent.clientWidth + offsets.right;\n } else {\n left = -offsetParentRect.width + offsets.right;\n }\n } else {\n left = offsets.left;\n }\n\n if (gpuAcceleration && prefixedProperty) {\n styles[prefixedProperty] = 'translate3d(' + left + 'px, ' + top + 'px, 0)';\n styles[sideA] = 0;\n styles[sideB] = 0;\n styles.willChange = 'transform';\n } else {\n // othwerise, we use the standard `top`, `left`, `bottom` and `right` properties\n var invertTop = sideA === 'bottom' ? -1 : 1;\n var invertLeft = sideB === 'right' ? -1 : 1;\n styles[sideA] = top * invertTop;\n styles[sideB] = left * invertLeft;\n styles.willChange = sideA + ', ' + sideB;\n } // Attributes\n\n\n var attributes = {\n 'x-placement': data.placement\n }; // Update `data` attributes, styles and arrowStyles\n\n data.attributes = _extends({}, attributes, data.attributes);\n data.styles = _extends({}, styles, data.styles);\n data.arrowStyles = _extends({}, data.offsets.arrow, data.arrowStyles);\n return data;\n}\n/**\n * Helper used to know if the given modifier depends from another one.
\n * It checks if the needed modifier is listed and enabled.\n * @method\n * @memberof Popper.Utils\n * @param {Array} modifiers - list of modifiers\n * @param {String} requestingName - name of requesting modifier\n * @param {String} requestedName - name of requested modifier\n * @returns {Boolean}\n */\n\n\nfunction isModifierRequired(modifiers, requestingName, requestedName) {\n var requesting = find(modifiers, function (_ref) {\n var name = _ref.name;\n return name === requestingName;\n });\n var isRequired = !!requesting && modifiers.some(function (modifier) {\n return modifier.name === requestedName && modifier.enabled && modifier.order < requesting.order;\n });\n\n if (!isRequired) {\n var _requesting = '`' + requestingName + '`';\n\n var requested = '`' + requestedName + '`';\n console.warn(requested + ' modifier is required by ' + _requesting + ' modifier in order to work, be sure to include it before ' + _requesting + '!');\n }\n\n return isRequired;\n}\n/**\n * @function\n * @memberof Modifiers\n * @argument {Object} data - The data object generated by update method\n * @argument {Object} options - Modifiers configuration and options\n * @returns {Object} The data object, properly modified\n */\n\n\nfunction arrow(data, options) {\n var _data$offsets$arrow; // arrow depends on keepTogether in order to work\n\n\n if (!isModifierRequired(data.instance.modifiers, 'arrow', 'keepTogether')) {\n return data;\n }\n\n var arrowElement = options.element; // if arrowElement is a string, suppose it's a CSS selector\n\n if (typeof arrowElement === 'string') {\n arrowElement = data.instance.popper.querySelector(arrowElement); // if arrowElement is not found, don't run the modifier\n\n if (!arrowElement) {\n return data;\n }\n } else {\n // if the arrowElement isn't a query selector we must check that the\n // provided DOM node is child of its popper node\n if (!data.instance.popper.contains(arrowElement)) {\n console.warn('WARNING: `arrow.element` must be child of its popper element!');\n return data;\n }\n }\n\n var placement = data.placement.split('-')[0];\n var _data$offsets = data.offsets,\n popper = _data$offsets.popper,\n reference = _data$offsets.reference;\n var isVertical = ['left', 'right'].indexOf(placement) !== -1;\n var len = isVertical ? 'height' : 'width';\n var sideCapitalized = isVertical ? 'Top' : 'Left';\n var side = sideCapitalized.toLowerCase();\n var altSide = isVertical ? 'left' : 'top';\n var opSide = isVertical ? 'bottom' : 'right';\n var arrowElementSize = getOuterSizes(arrowElement)[len]; //\n // extends keepTogether behavior making sure the popper and its\n // reference have enough pixels in conjunction\n //\n // top/left side\n\n if (reference[opSide] - arrowElementSize < popper[side]) {\n data.offsets.popper[side] -= popper[side] - (reference[opSide] - arrowElementSize);\n } // bottom/right side\n\n\n if (reference[side] + arrowElementSize > popper[opSide]) {\n data.offsets.popper[side] += reference[side] + arrowElementSize - popper[opSide];\n }\n\n data.offsets.popper = getClientRect(data.offsets.popper); // compute center of the popper\n\n var center = reference[side] + reference[len] / 2 - arrowElementSize / 2; // Compute the sideValue using the updated popper offsets\n // take popper margin in account because we don't have this info available\n\n var css = getStyleComputedProperty(data.instance.popper);\n var popperMarginSide = parseFloat(css['margin' + sideCapitalized]);\n var popperBorderSide = parseFloat(css['border' + sideCapitalized + 'Width']);\n var sideValue = center - data.offsets.popper[side] - popperMarginSide - popperBorderSide; // prevent arrowElement from being placed not contiguously to its popper\n\n sideValue = Math.max(Math.min(popper[len] - arrowElementSize, sideValue), 0);\n data.arrowElement = arrowElement;\n data.offsets.arrow = (_data$offsets$arrow = {}, defineProperty(_data$offsets$arrow, side, Math.round(sideValue)), defineProperty(_data$offsets$arrow, altSide, ''), _data$offsets$arrow);\n return data;\n}\n/**\n * Get the opposite placement variation of the given one\n * @method\n * @memberof Popper.Utils\n * @argument {String} placement variation\n * @returns {String} flipped placement variation\n */\n\n\nfunction getOppositeVariation(variation) {\n if (variation === 'end') {\n return 'start';\n } else if (variation === 'start') {\n return 'end';\n }\n\n return variation;\n}\n/**\n * List of accepted placements to use as values of the `placement` option.
\n * Valid placements are:\n * - `auto`\n * - `top`\n * - `right`\n * - `bottom`\n * - `left`\n *\n * Each placement can have a variation from this list:\n * - `-start`\n * - `-end`\n *\n * Variations are interpreted easily if you think of them as the left to right\n * written languages. Horizontally (`top` and `bottom`), `start` is left and `end`\n * is right.
\n * Vertically (`left` and `right`), `start` is top and `end` is bottom.\n *\n * Some valid examples are:\n * - `top-end` (on top of reference, right aligned)\n * - `right-start` (on right of reference, top aligned)\n * - `bottom` (on bottom, centered)\n * - `auto-end` (on the side with more space available, alignment depends by placement)\n *\n * @static\n * @type {Array}\n * @enum {String}\n * @readonly\n * @method placements\n * @memberof Popper\n */\n\n\nvar placements = ['auto-start', 'auto', 'auto-end', 'top-start', 'top', 'top-end', 'right-start', 'right', 'right-end', 'bottom-end', 'bottom', 'bottom-start', 'left-end', 'left', 'left-start']; // Get rid of `auto` `auto-start` and `auto-end`\n\nvar validPlacements = placements.slice(3);\n/**\n * Given an initial placement, returns all the subsequent placements\n * clockwise (or counter-clockwise).\n *\n * @method\n * @memberof Popper.Utils\n * @argument {String} placement - A valid placement (it accepts variations)\n * @argument {Boolean} counter - Set to true to walk the placements counterclockwise\n * @returns {Array} placements including their variations\n */\n\nfunction clockwise(placement) {\n var counter = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;\n var index = validPlacements.indexOf(placement);\n var arr = validPlacements.slice(index + 1).concat(validPlacements.slice(0, index));\n return counter ? arr.reverse() : arr;\n}\n\nvar BEHAVIORS = {\n FLIP: 'flip',\n CLOCKWISE: 'clockwise',\n COUNTERCLOCKWISE: 'counterclockwise'\n};\n/**\n * @function\n * @memberof Modifiers\n * @argument {Object} data - The data object generated by update method\n * @argument {Object} options - Modifiers configuration and options\n * @returns {Object} The data object, properly modified\n */\n\nfunction flip(data, options) {\n // if `inner` modifier is enabled, we can't use the `flip` modifier\n if (isModifierEnabled(data.instance.modifiers, 'inner')) {\n return data;\n }\n\n if (data.flipped && data.placement === data.originalPlacement) {\n // seems like flip is trying to loop, probably there's not enough space on any of the flippable sides\n return data;\n }\n\n var boundaries = getBoundaries(data.instance.popper, data.instance.reference, options.padding, options.boundariesElement, data.positionFixed);\n var placement = data.placement.split('-')[0];\n var placementOpposite = getOppositePlacement(placement);\n var variation = data.placement.split('-')[1] || '';\n var flipOrder = [];\n\n switch (options.behavior) {\n case BEHAVIORS.FLIP:\n flipOrder = [placement, placementOpposite];\n break;\n\n case BEHAVIORS.CLOCKWISE:\n flipOrder = clockwise(placement);\n break;\n\n case BEHAVIORS.COUNTERCLOCKWISE:\n flipOrder = clockwise(placement, true);\n break;\n\n default:\n flipOrder = options.behavior;\n }\n\n flipOrder.forEach(function (step, index) {\n if (placement !== step || flipOrder.length === index + 1) {\n return data;\n }\n\n placement = data.placement.split('-')[0];\n placementOpposite = getOppositePlacement(placement);\n var popperOffsets = data.offsets.popper;\n var refOffsets = data.offsets.reference; // using floor because the reference offsets may contain decimals we are not going to consider here\n\n var floor = Math.floor;\n var overlapsRef = placement === 'left' && floor(popperOffsets.right) > floor(refOffsets.left) || placement === 'right' && floor(popperOffsets.left) < floor(refOffsets.right) || placement === 'top' && floor(popperOffsets.bottom) > floor(refOffsets.top) || placement === 'bottom' && floor(popperOffsets.top) < floor(refOffsets.bottom);\n var overflowsLeft = floor(popperOffsets.left) < floor(boundaries.left);\n var overflowsRight = floor(popperOffsets.right) > floor(boundaries.right);\n var overflowsTop = floor(popperOffsets.top) < floor(boundaries.top);\n var overflowsBottom = floor(popperOffsets.bottom) > floor(boundaries.bottom);\n var overflowsBoundaries = placement === 'left' && overflowsLeft || placement === 'right' && overflowsRight || placement === 'top' && overflowsTop || placement === 'bottom' && overflowsBottom; // flip the variation if required\n\n var isVertical = ['top', 'bottom'].indexOf(placement) !== -1; // flips variation if reference element overflows boundaries\n\n var flippedVariationByRef = !!options.flipVariations && (isVertical && variation === 'start' && overflowsLeft || isVertical && variation === 'end' && overflowsRight || !isVertical && variation === 'start' && overflowsTop || !isVertical && variation === 'end' && overflowsBottom); // flips variation if popper content overflows boundaries\n\n var flippedVariationByContent = !!options.flipVariationsByContent && (isVertical && variation === 'start' && overflowsRight || isVertical && variation === 'end' && overflowsLeft || !isVertical && variation === 'start' && overflowsBottom || !isVertical && variation === 'end' && overflowsTop);\n var flippedVariation = flippedVariationByRef || flippedVariationByContent;\n\n if (overlapsRef || overflowsBoundaries || flippedVariation) {\n // this boolean to detect any flip loop\n data.flipped = true;\n\n if (overlapsRef || overflowsBoundaries) {\n placement = flipOrder[index + 1];\n }\n\n if (flippedVariation) {\n variation = getOppositeVariation(variation);\n }\n\n data.placement = placement + (variation ? '-' + variation : ''); // this object contains `position`, we want to preserve it along with\n // any additional property we may add in the future\n\n data.offsets.popper = _extends({}, data.offsets.popper, getPopperOffsets(data.instance.popper, data.offsets.reference, data.placement));\n data = runModifiers(data.instance.modifiers, data, 'flip');\n }\n });\n return data;\n}\n/**\n * @function\n * @memberof Modifiers\n * @argument {Object} data - The data object generated by update method\n * @argument {Object} options - Modifiers configuration and options\n * @returns {Object} The data object, properly modified\n */\n\n\nfunction keepTogether(data) {\n var _data$offsets = data.offsets,\n popper = _data$offsets.popper,\n reference = _data$offsets.reference;\n var placement = data.placement.split('-')[0];\n var floor = Math.floor;\n var isVertical = ['top', 'bottom'].indexOf(placement) !== -1;\n var side = isVertical ? 'right' : 'bottom';\n var opSide = isVertical ? 'left' : 'top';\n var measurement = isVertical ? 'width' : 'height';\n\n if (popper[side] < floor(reference[opSide])) {\n data.offsets.popper[opSide] = floor(reference[opSide]) - popper[measurement];\n }\n\n if (popper[opSide] > floor(reference[side])) {\n data.offsets.popper[opSide] = floor(reference[side]);\n }\n\n return data;\n}\n/**\n * Converts a string containing value + unit into a px value number\n * @function\n * @memberof {modifiers~offset}\n * @private\n * @argument {String} str - Value + unit string\n * @argument {String} measurement - `height` or `width`\n * @argument {Object} popperOffsets\n * @argument {Object} referenceOffsets\n * @returns {Number|String}\n * Value in pixels, or original string if no values were extracted\n */\n\n\nfunction toValue(str, measurement, popperOffsets, referenceOffsets) {\n // separate value from unit\n var split = str.match(/((?:\\-|\\+)?\\d*\\.?\\d*)(.*)/);\n var value = +split[1];\n var unit = split[2]; // If it's not a number it's an operator, I guess\n\n if (!value) {\n return str;\n }\n\n if (unit.indexOf('%') === 0) {\n var element = void 0;\n\n switch (unit) {\n case '%p':\n element = popperOffsets;\n break;\n\n case '%':\n case '%r':\n default:\n element = referenceOffsets;\n }\n\n var rect = getClientRect(element);\n return rect[measurement] / 100 * value;\n } else if (unit === 'vh' || unit === 'vw') {\n // if is a vh or vw, we calculate the size based on the viewport\n var size = void 0;\n\n if (unit === 'vh') {\n size = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);\n } else {\n size = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);\n }\n\n return size / 100 * value;\n } else {\n // if is an explicit pixel unit, we get rid of the unit and keep the value\n // if is an implicit unit, it's px, and we return just the value\n return value;\n }\n}\n/**\n * Parse an `offset` string to extrapolate `x` and `y` numeric offsets.\n * @function\n * @memberof {modifiers~offset}\n * @private\n * @argument {String} offset\n * @argument {Object} popperOffsets\n * @argument {Object} referenceOffsets\n * @argument {String} basePlacement\n * @returns {Array} a two cells array with x and y offsets in numbers\n */\n\n\nfunction parseOffset(offset, popperOffsets, referenceOffsets, basePlacement) {\n var offsets = [0, 0]; // Use height if placement is left or right and index is 0 otherwise use width\n // in this way the first offset will use an axis and the second one\n // will use the other one\n\n var useHeight = ['right', 'left'].indexOf(basePlacement) !== -1; // Split the offset string to obtain a list of values and operands\n // The regex addresses values with the plus or minus sign in front (+10, -20, etc)\n\n var fragments = offset.split(/(\\+|\\-)/).map(function (frag) {\n return frag.trim();\n }); // Detect if the offset string contains a pair of values or a single one\n // they could be separated by comma or space\n\n var divider = fragments.indexOf(find(fragments, function (frag) {\n return frag.search(/,|\\s/) !== -1;\n }));\n\n if (fragments[divider] && fragments[divider].indexOf(',') === -1) {\n console.warn('Offsets separated by white space(s) are deprecated, use a comma (,) instead.');\n } // If divider is found, we divide the list of values and operands to divide\n // them by ofset X and Y.\n\n\n var splitRegex = /\\s*,\\s*|\\s+/;\n var ops = divider !== -1 ? [fragments.slice(0, divider).concat([fragments[divider].split(splitRegex)[0]]), [fragments[divider].split(splitRegex)[1]].concat(fragments.slice(divider + 1))] : [fragments]; // Convert the values with units to absolute pixels to allow our computations\n\n ops = ops.map(function (op, index) {\n // Most of the units rely on the orientation of the popper\n var measurement = (index === 1 ? !useHeight : useHeight) ? 'height' : 'width';\n var mergeWithPrevious = false;\n return op // This aggregates any `+` or `-` sign that aren't considered operators\n // e.g.: 10 + +5 => [10, +, +5]\n .reduce(function (a, b) {\n if (a[a.length - 1] === '' && ['+', '-'].indexOf(b) !== -1) {\n a[a.length - 1] = b;\n mergeWithPrevious = true;\n return a;\n } else if (mergeWithPrevious) {\n a[a.length - 1] += b;\n mergeWithPrevious = false;\n return a;\n } else {\n return a.concat(b);\n }\n }, []) // Here we convert the string values into number values (in px)\n .map(function (str) {\n return toValue(str, measurement, popperOffsets, referenceOffsets);\n });\n }); // Loop trough the offsets arrays and execute the operations\n\n ops.forEach(function (op, index) {\n op.forEach(function (frag, index2) {\n if (isNumeric(frag)) {\n offsets[index] += frag * (op[index2 - 1] === '-' ? -1 : 1);\n }\n });\n });\n return offsets;\n}\n/**\n * @function\n * @memberof Modifiers\n * @argument {Object} data - The data object generated by update method\n * @argument {Object} options - Modifiers configuration and options\n * @argument {Number|String} options.offset=0\n * The offset value as described in the modifier description\n * @returns {Object} The data object, properly modified\n */\n\n\nfunction offset(data, _ref) {\n var offset = _ref.offset;\n var placement = data.placement,\n _data$offsets = data.offsets,\n popper = _data$offsets.popper,\n reference = _data$offsets.reference;\n var basePlacement = placement.split('-')[0];\n var offsets = void 0;\n\n if (isNumeric(+offset)) {\n offsets = [+offset, 0];\n } else {\n offsets = parseOffset(offset, popper, reference, basePlacement);\n }\n\n if (basePlacement === 'left') {\n popper.top += offsets[0];\n popper.left -= offsets[1];\n } else if (basePlacement === 'right') {\n popper.top += offsets[0];\n popper.left += offsets[1];\n } else if (basePlacement === 'top') {\n popper.left += offsets[0];\n popper.top -= offsets[1];\n } else if (basePlacement === 'bottom') {\n popper.left += offsets[0];\n popper.top += offsets[1];\n }\n\n data.popper = popper;\n return data;\n}\n/**\n * @function\n * @memberof Modifiers\n * @argument {Object} data - The data object generated by `update` method\n * @argument {Object} options - Modifiers configuration and options\n * @returns {Object} The data object, properly modified\n */\n\n\nfunction preventOverflow(data, options) {\n var boundariesElement = options.boundariesElement || getOffsetParent(data.instance.popper); // If offsetParent is the reference element, we really want to\n // go one step up and use the next offsetParent as reference to\n // avoid to make this modifier completely useless and look like broken\n\n if (data.instance.reference === boundariesElement) {\n boundariesElement = getOffsetParent(boundariesElement);\n } // NOTE: DOM access here\n // resets the popper's position so that the document size can be calculated excluding\n // the size of the popper element itself\n\n\n var transformProp = getSupportedPropertyName('transform');\n var popperStyles = data.instance.popper.style; // assignment to help minification\n\n var top = popperStyles.top,\n left = popperStyles.left,\n transform = popperStyles[transformProp];\n popperStyles.top = '';\n popperStyles.left = '';\n popperStyles[transformProp] = '';\n var boundaries = getBoundaries(data.instance.popper, data.instance.reference, options.padding, boundariesElement, data.positionFixed); // NOTE: DOM access here\n // restores the original style properties after the offsets have been computed\n\n popperStyles.top = top;\n popperStyles.left = left;\n popperStyles[transformProp] = transform;\n options.boundaries = boundaries;\n var order = options.priority;\n var popper = data.offsets.popper;\n var check = {\n primary: function primary(placement) {\n var value = popper[placement];\n\n if (popper[placement] < boundaries[placement] && !options.escapeWithReference) {\n value = Math.max(popper[placement], boundaries[placement]);\n }\n\n return defineProperty({}, placement, value);\n },\n secondary: function secondary(placement) {\n var mainSide = placement === 'right' ? 'left' : 'top';\n var value = popper[mainSide];\n\n if (popper[placement] > boundaries[placement] && !options.escapeWithReference) {\n value = Math.min(popper[mainSide], boundaries[placement] - (placement === 'right' ? popper.width : popper.height));\n }\n\n return defineProperty({}, mainSide, value);\n }\n };\n order.forEach(function (placement) {\n var side = ['left', 'top'].indexOf(placement) !== -1 ? 'primary' : 'secondary';\n popper = _extends({}, popper, check[side](placement));\n });\n data.offsets.popper = popper;\n return data;\n}\n/**\n * @function\n * @memberof Modifiers\n * @argument {Object} data - The data object generated by `update` method\n * @argument {Object} options - Modifiers configuration and options\n * @returns {Object} The data object, properly modified\n */\n\n\nfunction shift(data) {\n var placement = data.placement;\n var basePlacement = placement.split('-')[0];\n var shiftvariation = placement.split('-')[1]; // if shift shiftvariation is specified, run the modifier\n\n if (shiftvariation) {\n var _data$offsets = data.offsets,\n reference = _data$offsets.reference,\n popper = _data$offsets.popper;\n var isVertical = ['bottom', 'top'].indexOf(basePlacement) !== -1;\n var side = isVertical ? 'left' : 'top';\n var measurement = isVertical ? 'width' : 'height';\n var shiftOffsets = {\n start: defineProperty({}, side, reference[side]),\n end: defineProperty({}, side, reference[side] + reference[measurement] - popper[measurement])\n };\n data.offsets.popper = _extends({}, popper, shiftOffsets[shiftvariation]);\n }\n\n return data;\n}\n/**\n * @function\n * @memberof Modifiers\n * @argument {Object} data - The data object generated by update method\n * @argument {Object} options - Modifiers configuration and options\n * @returns {Object} The data object, properly modified\n */\n\n\nfunction hide(data) {\n if (!isModifierRequired(data.instance.modifiers, 'hide', 'preventOverflow')) {\n return data;\n }\n\n var refRect = data.offsets.reference;\n var bound = find(data.instance.modifiers, function (modifier) {\n return modifier.name === 'preventOverflow';\n }).boundaries;\n\n if (refRect.bottom < bound.top || refRect.left > bound.right || refRect.top > bound.bottom || refRect.right < bound.left) {\n // Avoid unnecessary DOM access if visibility hasn't changed\n if (data.hide === true) {\n return data;\n }\n\n data.hide = true;\n data.attributes['x-out-of-boundaries'] = '';\n } else {\n // Avoid unnecessary DOM access if visibility hasn't changed\n if (data.hide === false) {\n return data;\n }\n\n data.hide = false;\n data.attributes['x-out-of-boundaries'] = false;\n }\n\n return data;\n}\n/**\n * @function\n * @memberof Modifiers\n * @argument {Object} data - The data object generated by `update` method\n * @argument {Object} options - Modifiers configuration and options\n * @returns {Object} The data object, properly modified\n */\n\n\nfunction inner(data) {\n var placement = data.placement;\n var basePlacement = placement.split('-')[0];\n var _data$offsets = data.offsets,\n popper = _data$offsets.popper,\n reference = _data$offsets.reference;\n var isHoriz = ['left', 'right'].indexOf(basePlacement) !== -1;\n var subtractLength = ['top', 'left'].indexOf(basePlacement) === -1;\n popper[isHoriz ? 'left' : 'top'] = reference[basePlacement] - (subtractLength ? popper[isHoriz ? 'width' : 'height'] : 0);\n data.placement = getOppositePlacement(placement);\n data.offsets.popper = getClientRect(popper);\n return data;\n}\n/**\n * Modifier function, each modifier can have a function of this type assigned\n * to its `fn` property.
\n * These functions will be called on each update, this means that you must\n * make sure they are performant enough to avoid performance bottlenecks.\n *\n * @function ModifierFn\n * @argument {dataObject} data - The data object generated by `update` method\n * @argument {Object} options - Modifiers configuration and options\n * @returns {dataObject} The data object, properly modified\n */\n\n/**\n * Modifiers are plugins used to alter the behavior of your poppers.
\n * Popper.js uses a set of 9 modifiers to provide all the basic functionalities\n * needed by the library.\n *\n * Usually you don't want to override the `order`, `fn` and `onLoad` props.\n * All the other properties are configurations that could be tweaked.\n * @namespace modifiers\n */\n\n\nvar modifiers = {\n /**\n * Modifier used to shift the popper on the start or end of its reference\n * element.
\n * It will read the variation of the `placement` property.
\n * It can be one either `-end` or `-start`.\n * @memberof modifiers\n * @inner\n */\n shift: {\n /** @prop {number} order=100 - Index used to define the order of execution */\n order: 100,\n\n /** @prop {Boolean} enabled=true - Whether the modifier is enabled or not */\n enabled: true,\n\n /** @prop {ModifierFn} */\n fn: shift\n },\n\n /**\n * The `offset` modifier can shift your popper on both its axis.\n *\n * It accepts the following units:\n * - `px` or unit-less, interpreted as pixels\n * - `%` or `%r`, percentage relative to the length of the reference element\n * - `%p`, percentage relative to the length of the popper element\n * - `vw`, CSS viewport width unit\n * - `vh`, CSS viewport height unit\n *\n * For length is intended the main axis relative to the placement of the popper.
\n * This means that if the placement is `top` or `bottom`, the length will be the\n * `width`. In case of `left` or `right`, it will be the `height`.\n *\n * You can provide a single value (as `Number` or `String`), or a pair of values\n * as `String` divided by a comma or one (or more) white spaces.
\n * The latter is a deprecated method because it leads to confusion and will be\n * removed in v2.
\n * Additionally, it accepts additions and subtractions between different units.\n * Note that multiplications and divisions aren't supported.\n *\n * Valid examples are:\n * ```\n * 10\n * '10%'\n * '10, 10'\n * '10%, 10'\n * '10 + 10%'\n * '10 - 5vh + 3%'\n * '-10px + 5vh, 5px - 6%'\n * ```\n * > **NB**: If you desire to apply offsets to your poppers in a way that may make them overlap\n * > with their reference element, unfortunately, you will have to disable the `flip` modifier.\n * > You can read more on this at this [issue](https://github.com/FezVrasta/popper.js/issues/373).\n *\n * @memberof modifiers\n * @inner\n */\n offset: {\n /** @prop {number} order=200 - Index used to define the order of execution */\n order: 200,\n\n /** @prop {Boolean} enabled=true - Whether the modifier is enabled or not */\n enabled: true,\n\n /** @prop {ModifierFn} */\n fn: offset,\n\n /** @prop {Number|String} offset=0\n * The offset value as described in the modifier description\n */\n offset: 0\n },\n\n /**\n * Modifier used to prevent the popper from being positioned outside the boundary.\n *\n * A scenario exists where the reference itself is not within the boundaries.
\n * We can say it has \"escaped the boundaries\" — or just \"escaped\".
\n * In this case we need to decide whether the popper should either:\n *\n * - detach from the reference and remain \"trapped\" in the boundaries, or\n * - if it should ignore the boundary and \"escape with its reference\"\n *\n * When `escapeWithReference` is set to`true` and reference is completely\n * outside its boundaries, the popper will overflow (or completely leave)\n * the boundaries in order to remain attached to the edge of the reference.\n *\n * @memberof modifiers\n * @inner\n */\n preventOverflow: {\n /** @prop {number} order=300 - Index used to define the order of execution */\n order: 300,\n\n /** @prop {Boolean} enabled=true - Whether the modifier is enabled or not */\n enabled: true,\n\n /** @prop {ModifierFn} */\n fn: preventOverflow,\n\n /**\n * @prop {Array} [priority=['left','right','top','bottom']]\n * Popper will try to prevent overflow following these priorities by default,\n * then, it could overflow on the left and on top of the `boundariesElement`\n */\n priority: ['left', 'right', 'top', 'bottom'],\n\n /**\n * @prop {number} padding=5\n * Amount of pixel used to define a minimum distance between the boundaries\n * and the popper. This makes sure the popper always has a little padding\n * between the edges of its container\n */\n padding: 5,\n\n /**\n * @prop {String|HTMLElement} boundariesElement='scrollParent'\n * Boundaries used by the modifier. Can be `scrollParent`, `window`,\n * `viewport` or any DOM element.\n */\n boundariesElement: 'scrollParent'\n },\n\n /**\n * Modifier used to make sure the reference and its popper stay near each other\n * without leaving any gap between the two. Especially useful when the arrow is\n * enabled and you want to ensure that it points to its reference element.\n * It cares only about the first axis. You can still have poppers with margin\n * between the popper and its reference element.\n * @memberof modifiers\n * @inner\n */\n keepTogether: {\n /** @prop {number} order=400 - Index used to define the order of execution */\n order: 400,\n\n /** @prop {Boolean} enabled=true - Whether the modifier is enabled or not */\n enabled: true,\n\n /** @prop {ModifierFn} */\n fn: keepTogether\n },\n\n /**\n * This modifier is used to move the `arrowElement` of the popper to make\n * sure it is positioned between the reference element and its popper element.\n * It will read the outer size of the `arrowElement` node to detect how many\n * pixels of conjunction are needed.\n *\n * It has no effect if no `arrowElement` is provided.\n * @memberof modifiers\n * @inner\n */\n arrow: {\n /** @prop {number} order=500 - Index used to define the order of execution */\n order: 500,\n\n /** @prop {Boolean} enabled=true - Whether the modifier is enabled or not */\n enabled: true,\n\n /** @prop {ModifierFn} */\n fn: arrow,\n\n /** @prop {String|HTMLElement} element='[x-arrow]' - Selector or node used as arrow */\n element: '[x-arrow]'\n },\n\n /**\n * Modifier used to flip the popper's placement when it starts to overlap its\n * reference element.\n *\n * Requires the `preventOverflow` modifier before it in order to work.\n *\n * **NOTE:** this modifier will interrupt the current update cycle and will\n * restart it if it detects the need to flip the placement.\n * @memberof modifiers\n * @inner\n */\n flip: {\n /** @prop {number} order=600 - Index used to define the order of execution */\n order: 600,\n\n /** @prop {Boolean} enabled=true - Whether the modifier is enabled or not */\n enabled: true,\n\n /** @prop {ModifierFn} */\n fn: flip,\n\n /**\n * @prop {String|Array} behavior='flip'\n * The behavior used to change the popper's placement. It can be one of\n * `flip`, `clockwise`, `counterclockwise` or an array with a list of valid\n * placements (with optional variations)\n */\n behavior: 'flip',\n\n /**\n * @prop {number} padding=5\n * The popper will flip if it hits the edges of the `boundariesElement`\n */\n padding: 5,\n\n /**\n * @prop {String|HTMLElement} boundariesElement='viewport'\n * The element which will define the boundaries of the popper position.\n * The popper will never be placed outside of the defined boundaries\n * (except if `keepTogether` is enabled)\n */\n boundariesElement: 'viewport',\n\n /**\n * @prop {Boolean} flipVariations=false\n * The popper will switch placement variation between `-start` and `-end` when\n * the reference element overlaps its boundaries.\n *\n * The original placement should have a set variation.\n */\n flipVariations: false,\n\n /**\n * @prop {Boolean} flipVariationsByContent=false\n * The popper will switch placement variation between `-start` and `-end` when\n * the popper element overlaps its reference boundaries.\n *\n * The original placement should have a set variation.\n */\n flipVariationsByContent: false\n },\n\n /**\n * Modifier used to make the popper flow toward the inner of the reference element.\n * By default, when this modifier is disabled, the popper will be placed outside\n * the reference element.\n * @memberof modifiers\n * @inner\n */\n inner: {\n /** @prop {number} order=700 - Index used to define the order of execution */\n order: 700,\n\n /** @prop {Boolean} enabled=false - Whether the modifier is enabled or not */\n enabled: false,\n\n /** @prop {ModifierFn} */\n fn: inner\n },\n\n /**\n * Modifier used to hide the popper when its reference element is outside of the\n * popper boundaries. It will set a `x-out-of-boundaries` attribute which can\n * be used to hide with a CSS selector the popper when its reference is\n * out of boundaries.\n *\n * Requires the `preventOverflow` modifier before it in order to work.\n * @memberof modifiers\n * @inner\n */\n hide: {\n /** @prop {number} order=800 - Index used to define the order of execution */\n order: 800,\n\n /** @prop {Boolean} enabled=true - Whether the modifier is enabled or not */\n enabled: true,\n\n /** @prop {ModifierFn} */\n fn: hide\n },\n\n /**\n * Computes the style that will be applied to the popper element to gets\n * properly positioned.\n *\n * Note that this modifier will not touch the DOM, it just prepares the styles\n * so that `applyStyle` modifier can apply it. This separation is useful\n * in case you need to replace `applyStyle` with a custom implementation.\n *\n * This modifier has `850` as `order` value to maintain backward compatibility\n * with previous versions of Popper.js. Expect the modifiers ordering method\n * to change in future major versions of the library.\n *\n * @memberof modifiers\n * @inner\n */\n computeStyle: {\n /** @prop {number} order=850 - Index used to define the order of execution */\n order: 850,\n\n /** @prop {Boolean} enabled=true - Whether the modifier is enabled or not */\n enabled: true,\n\n /** @prop {ModifierFn} */\n fn: computeStyle,\n\n /**\n * @prop {Boolean} gpuAcceleration=true\n * If true, it uses the CSS 3D transformation to position the popper.\n * Otherwise, it will use the `top` and `left` properties\n */\n gpuAcceleration: true,\n\n /**\n * @prop {string} [x='bottom']\n * Where to anchor the X axis (`bottom` or `top`). AKA X offset origin.\n * Change this if your popper should grow in a direction different from `bottom`\n */\n x: 'bottom',\n\n /**\n * @prop {string} [x='left']\n * Where to anchor the Y axis (`left` or `right`). AKA Y offset origin.\n * Change this if your popper should grow in a direction different from `right`\n */\n y: 'right'\n },\n\n /**\n * Applies the computed styles to the popper element.\n *\n * All the DOM manipulations are limited to this modifier. This is useful in case\n * you want to integrate Popper.js inside a framework or view library and you\n * want to delegate all the DOM manipulations to it.\n *\n * Note that if you disable this modifier, you must make sure the popper element\n * has its position set to `absolute` before Popper.js can do its work!\n *\n * Just disable this modifier and define your own to achieve the desired effect.\n *\n * @memberof modifiers\n * @inner\n */\n applyStyle: {\n /** @prop {number} order=900 - Index used to define the order of execution */\n order: 900,\n\n /** @prop {Boolean} enabled=true - Whether the modifier is enabled or not */\n enabled: true,\n\n /** @prop {ModifierFn} */\n fn: applyStyle,\n\n /** @prop {Function} */\n onLoad: applyStyleOnLoad,\n\n /**\n * @deprecated since version 1.10.0, the property moved to `computeStyle` modifier\n * @prop {Boolean} gpuAcceleration=true\n * If true, it uses the CSS 3D transformation to position the popper.\n * Otherwise, it will use the `top` and `left` properties\n */\n gpuAcceleration: undefined\n }\n};\n/**\n * The `dataObject` is an object containing all the information used by Popper.js.\n * This object is passed to modifiers and to the `onCreate` and `onUpdate` callbacks.\n * @name dataObject\n * @property {Object} data.instance The Popper.js instance\n * @property {String} data.placement Placement applied to popper\n * @property {String} data.originalPlacement Placement originally defined on init\n * @property {Boolean} data.flipped True if popper has been flipped by flip modifier\n * @property {Boolean} data.hide True if the reference element is out of boundaries, useful to know when to hide the popper\n * @property {HTMLElement} data.arrowElement Node used as arrow by arrow modifier\n * @property {Object} data.styles Any CSS property defined here will be applied to the popper. It expects the JavaScript nomenclature (eg. `marginBottom`)\n * @property {Object} data.arrowStyles Any CSS property defined here will be applied to the popper arrow. It expects the JavaScript nomenclature (eg. `marginBottom`)\n * @property {Object} data.boundaries Offsets of the popper boundaries\n * @property {Object} data.offsets The measurements of popper, reference and arrow elements\n * @property {Object} data.offsets.popper `top`, `left`, `width`, `height` values\n * @property {Object} data.offsets.reference `top`, `left`, `width`, `height` values\n * @property {Object} data.offsets.arrow] `top` and `left` offsets, only one of them will be different from 0\n */\n\n/**\n * Default options provided to Popper.js constructor.
\n * These can be overridden using the `options` argument of Popper.js.
\n * To override an option, simply pass an object with the same\n * structure of the `options` object, as the 3rd argument. For example:\n * ```\n * new Popper(ref, pop, {\n * modifiers: {\n * preventOverflow: { enabled: false }\n * }\n * })\n * ```\n * @type {Object}\n * @static\n * @memberof Popper\n */\n\nvar Defaults = {\n /**\n * Popper's placement.\n * @prop {Popper.placements} placement='bottom'\n */\n placement: 'bottom',\n\n /**\n * Set this to true if you want popper to position it self in 'fixed' mode\n * @prop {Boolean} positionFixed=false\n */\n positionFixed: false,\n\n /**\n * Whether events (resize, scroll) are initially enabled.\n * @prop {Boolean} eventsEnabled=true\n */\n eventsEnabled: true,\n\n /**\n * Set to true if you want to automatically remove the popper when\n * you call the `destroy` method.\n * @prop {Boolean} removeOnDestroy=false\n */\n removeOnDestroy: false,\n\n /**\n * Callback called when the popper is created.
\n * By default, it is set to no-op.
\n * Access Popper.js instance with `data.instance`.\n * @prop {onCreate}\n */\n onCreate: function onCreate() {},\n\n /**\n * Callback called when the popper is updated. This callback is not called\n * on the initialization/creation of the popper, but only on subsequent\n * updates.
\n * By default, it is set to no-op.
\n * Access Popper.js instance with `data.instance`.\n * @prop {onUpdate}\n */\n onUpdate: function onUpdate() {},\n\n /**\n * List of modifiers used to modify the offsets before they are applied to the popper.\n * They provide most of the functionalities of Popper.js.\n * @prop {modifiers}\n */\n modifiers: modifiers\n};\n/**\n * @callback onCreate\n * @param {dataObject} data\n */\n\n/**\n * @callback onUpdate\n * @param {dataObject} data\n */\n// Utils\n// Methods\n\nvar Popper = function () {\n /**\n * Creates a new Popper.js instance.\n * @class Popper\n * @param {Element|referenceObject} reference - The reference element used to position the popper\n * @param {Element} popper - The HTML / XML element used as the popper\n * @param {Object} options - Your custom options to override the ones defined in [Defaults](#defaults)\n * @return {Object} instance - The generated Popper.js instance\n */\n function Popper(reference, popper) {\n var _this = this;\n\n var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};\n classCallCheck(this, Popper);\n\n this.scheduleUpdate = function () {\n return requestAnimationFrame(_this.update);\n }; // make update() debounced, so that it only runs at most once-per-tick\n\n\n this.update = debounce(this.update.bind(this)); // with {} we create a new object with the options inside it\n\n this.options = _extends({}, Popper.Defaults, options); // init state\n\n this.state = {\n isDestroyed: false,\n isCreated: false,\n scrollParents: []\n }; // get reference and popper elements (allow jQuery wrappers)\n\n this.reference = reference && reference.jquery ? reference[0] : reference;\n this.popper = popper && popper.jquery ? popper[0] : popper; // Deep merge modifiers options\n\n this.options.modifiers = {};\n Object.keys(_extends({}, Popper.Defaults.modifiers, options.modifiers)).forEach(function (name) {\n _this.options.modifiers[name] = _extends({}, Popper.Defaults.modifiers[name] || {}, options.modifiers ? options.modifiers[name] : {});\n }); // Refactoring modifiers' list (Object => Array)\n\n this.modifiers = Object.keys(this.options.modifiers).map(function (name) {\n return _extends({\n name: name\n }, _this.options.modifiers[name]);\n }) // sort the modifiers by order\n .sort(function (a, b) {\n return a.order - b.order;\n }); // modifiers have the ability to execute arbitrary code when Popper.js get inited\n // such code is executed in the same order of its modifier\n // they could add new properties to their options configuration\n // BE AWARE: don't add options to `options.modifiers.name` but to `modifierOptions`!\n\n this.modifiers.forEach(function (modifierOptions) {\n if (modifierOptions.enabled && isFunction(modifierOptions.onLoad)) {\n modifierOptions.onLoad(_this.reference, _this.popper, _this.options, modifierOptions, _this.state);\n }\n }); // fire the first update to position the popper in the right place\n\n this.update();\n var eventsEnabled = this.options.eventsEnabled;\n\n if (eventsEnabled) {\n // setup event listeners, they will take care of update the position in specific situations\n this.enableEventListeners();\n }\n\n this.state.eventsEnabled = eventsEnabled;\n } // We can't use class properties because they don't get listed in the\n // class prototype and break stuff like Sinon stubs\n\n\n createClass(Popper, [{\n key: 'update',\n value: function update$$1() {\n return update.call(this);\n }\n }, {\n key: 'destroy',\n value: function destroy$$1() {\n return destroy.call(this);\n }\n }, {\n key: 'enableEventListeners',\n value: function enableEventListeners$$1() {\n return enableEventListeners.call(this);\n }\n }, {\n key: 'disableEventListeners',\n value: function disableEventListeners$$1() {\n return disableEventListeners.call(this);\n }\n /**\n * Schedules an update. It will run on the next UI update available.\n * @method scheduleUpdate\n * @memberof Popper\n */\n\n /**\n * Collection of utilities useful when writing custom modifiers.\n * Starting from version 1.7, this method is available only if you\n * include `popper-utils.js` before `popper.js`.\n *\n * **DEPRECATION**: This way to access PopperUtils is deprecated\n * and will be removed in v2! Use the PopperUtils module directly instead.\n * Due to the high instability of the methods contained in Utils, we can't\n * guarantee them to follow semver. Use them at your own risk!\n * @static\n * @private\n * @type {Object}\n * @deprecated since version 1.8\n * @member Utils\n * @memberof Popper\n */\n\n }]);\n return Popper;\n}();\n/**\n * The `referenceObject` is an object that provides an interface compatible with Popper.js\n * and lets you use it as replacement of a real DOM node.
\n * You can use this method to position a popper relatively to a set of coordinates\n * in case you don't have a DOM node to use as reference.\n *\n * ```\n * new Popper(referenceObject, popperNode);\n * ```\n *\n * NB: This feature isn't supported in Internet Explorer 10.\n * @name referenceObject\n * @property {Function} data.getBoundingClientRect\n * A function that returns a set of coordinates compatible with the native `getBoundingClientRect` method.\n * @property {number} data.clientWidth\n * An ES6 getter that will return the width of the virtual reference element.\n * @property {number} data.clientHeight\n * An ES6 getter that will return the height of the virtual reference element.\n */\n\n\nPopper.Utils = (typeof window !== 'undefined' ? window : global).PopperUtils;\nPopper.placements = placements;\nPopper.Defaults = Defaults;\nexport default Popper;","import \"core-js/modules/es6.array.for-each\";\n\n/**\n * Copyright (c) 2017-present, Ephox, Inc.\n *\n * This source code is licensed under the Apache 2 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\nimport { uuid } from './Utils';\n\nvar createState = function createState() {\n return {\n listeners: [],\n scriptId: uuid('tiny-script'),\n scriptLoaded: false\n };\n};\n\nvar CreateScriptLoader = function CreateScriptLoader() {\n var state = createState();\n\n var injectScriptTag = function injectScriptTag(scriptId, doc, url, callback) {\n var scriptTag = doc.createElement('script');\n scriptTag.referrerPolicy = 'origin';\n scriptTag.type = 'application/javascript';\n scriptTag.id = scriptId;\n scriptTag.src = url;\n\n var handler = function handler() {\n scriptTag.removeEventListener('load', handler);\n callback();\n };\n\n scriptTag.addEventListener('load', handler);\n\n if (doc.head) {\n doc.head.appendChild(scriptTag);\n }\n };\n\n var load = function load(doc, url, callback) {\n if (state.scriptLoaded) {\n callback();\n } else {\n state.listeners.push(callback);\n\n if (!doc.getElementById(state.scriptId)) {\n injectScriptTag(state.scriptId, doc, url, function () {\n state.listeners.forEach(function (fn) {\n return fn();\n });\n state.scriptLoaded = true;\n });\n }\n }\n }; // Only to be used by tests.\n\n\n var reinitialize = function reinitialize() {\n state = createState();\n };\n\n return {\n load: load,\n reinitialize: reinitialize\n };\n};\n\nvar ScriptLoader = CreateScriptLoader();\nexport { ScriptLoader };","import \"core-js/modules/web.dom.iterable\";\nimport \"core-js/modules/es6.array.iterator\";\nimport \"core-js/modules/es6.object.to-string\";\nimport \"core-js/modules/es6.object.keys\";\nimport \"core-js/modules/es6.array.for-each\";\nimport \"core-js/modules/es6.object.assign\";\nimport \"core-js/modules/es6.object.create\";\nimport \"core-js/modules/es6.object.set-prototype-of\";\n\n/**\n * Copyright (c) 2017-present, Ephox, Inc.\n *\n * This source code is licensed under the Apache 2 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\nvar __extends = this && this.__extends || function () {\n var _extendStatics = function extendStatics(d, b) {\n _extendStatics = Object.setPrototypeOf || {\n __proto__: []\n } instanceof Array && function (d, b) {\n d.__proto__ = b;\n } || function (d, b) {\n for (var p in b) {\n if (b.hasOwnProperty(p)) d[p] = b[p];\n }\n };\n\n return _extendStatics(d, b);\n };\n\n return function (d, b) {\n _extendStatics(d, b);\n\n function __() {\n this.constructor = d;\n }\n\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n}();\n\nvar __assign = this && this.__assign || function () {\n __assign = Object.assign || function (t) {\n for (var s, i = 1, n = arguments.length; i < n; i++) {\n s = arguments[i];\n\n for (var p in s) {\n if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];\n }\n }\n\n return t;\n };\n\n return __assign.apply(this, arguments);\n};\n\nimport * as React from 'react';\nimport { ScriptLoader } from '../ScriptLoader';\nimport { getTinymce } from '../TinyMCE';\nimport { bindHandlers, isFunction, isTextarea, mergePlugins, uuid } from '../Utils';\nimport { EditorPropTypes } from './EditorPropTypes';\n\nvar Editor =\n/** @class */\nfunction (_super) {\n __extends(Editor, _super);\n\n function Editor(props) {\n var _this = _super.call(this, props) || this;\n\n _this.handleEditorChange = function (evt) {\n var editor = _this.editor;\n\n if (editor) {\n var newContent = editor.getContent({\n format: _this.props.outputFormat\n });\n\n if (newContent !== _this.currentContent) {\n _this.currentContent = newContent;\n\n if (isFunction(_this.props.onEditorChange)) {\n _this.props.onEditorChange(_this.currentContent, editor);\n }\n }\n }\n };\n\n _this.handleInit = function (initEvent) {\n var editor = _this.editor;\n\n if (editor) {\n editor.setContent(_this.getInitialValue());\n\n if (isFunction(_this.props.onEditorChange)) {\n editor.on('change keyup setcontent', _this.handleEditorChange);\n }\n\n if (isFunction(_this.props.onInit)) {\n _this.props.onInit(initEvent, editor);\n }\n\n bindHandlers(editor, _this.props, _this.boundHandlers);\n }\n };\n\n _this.initialise = function () {\n var finalInit = __assign(__assign({}, _this.props.init), {\n target: _this.elementRef.current,\n readonly: _this.props.disabled,\n inline: _this.inline,\n plugins: mergePlugins(_this.props.init && _this.props.init.plugins, _this.props.plugins),\n toolbar: _this.props.toolbar || _this.props.init && _this.props.init.toolbar,\n setup: function setup(editor) {\n _this.editor = editor;\n editor.on('init', _this.handleInit);\n\n if (_this.props.init && isFunction(_this.props.init.setup)) {\n _this.props.init.setup(editor);\n }\n }\n });\n\n if (isTextarea(_this.elementRef.current)) {\n _this.elementRef.current.style.visibility = '';\n }\n\n getTinymce().init(finalInit);\n };\n\n _this.id = _this.props.id || uuid('tiny-react');\n _this.elementRef = React.createRef();\n _this.inline = _this.props.inline ? _this.props.inline : _this.props.init && _this.props.init.inline;\n _this.boundHandlers = {};\n return _this;\n }\n\n Editor.prototype.componentDidUpdate = function (prevProps) {\n if (this.editor && this.editor.initialized) {\n bindHandlers(this.editor, this.props, this.boundHandlers);\n this.currentContent = this.currentContent || this.editor.getContent({\n format: this.props.outputFormat\n });\n\n if (typeof this.props.value === 'string' && this.props.value !== prevProps.value && this.props.value !== this.currentContent) {\n this.editor.setContent(this.props.value);\n }\n\n if (typeof this.props.disabled === 'boolean' && this.props.disabled !== prevProps.disabled) {\n this.editor.setMode(this.props.disabled ? 'readonly' : 'design');\n }\n }\n };\n\n Editor.prototype.componentDidMount = function () {\n if (getTinymce() !== null) {\n this.initialise();\n } else if (this.elementRef.current && this.elementRef.current.ownerDocument) {\n ScriptLoader.load(this.elementRef.current.ownerDocument, this.getScriptSrc(), this.initialise);\n }\n };\n\n Editor.prototype.componentWillUnmount = function () {\n var _this = this;\n\n var editor = this.editor;\n\n if (getTinymce() !== null && editor) {\n editor.off('init', this.handleInit);\n\n if (editor.initialized) {\n editor.off('change keyup setcontent', this.handleEditorChange);\n Object.keys(this.boundHandlers).forEach(function (eventName) {\n editor.off(eventName, _this.boundHandlers[eventName]);\n });\n this.boundHandlers = {};\n }\n\n getTinymce().remove(editor);\n }\n };\n\n Editor.prototype.render = function () {\n return this.inline ? this.renderInline() : this.renderIframe();\n };\n\n Editor.prototype.renderInline = function () {\n var _a = this.props.tagName,\n tagName = _a === void 0 ? 'div' : _a;\n return React.createElement(tagName, {\n ref: this.elementRef,\n id: this.id\n });\n };\n\n Editor.prototype.renderIframe = function () {\n return React.createElement('textarea', {\n ref: this.elementRef,\n style: {\n visibility: 'hidden'\n },\n name: this.props.textareaName,\n id: this.id\n });\n };\n\n Editor.prototype.getScriptSrc = function () {\n if (typeof this.props.tinymceScriptSrc === 'string') {\n return this.props.tinymceScriptSrc;\n } else {\n var channel = this.props.cloudChannel;\n var apiKey = this.props.apiKey ? this.props.apiKey : 'no-api-key';\n return \"https://cdn.tiny.cloud/1/\" + apiKey + \"/tinymce/\" + channel + \"/tinymce.min.js\";\n }\n };\n\n Editor.prototype.getInitialValue = function () {\n if (typeof this.props.value === 'string') {\n return this.props.value;\n } else if (typeof this.props.initialValue === 'string') {\n return this.props.initialValue;\n } else {\n return '';\n }\n };\n\n Editor.propTypes = EditorPropTypes;\n Editor.defaultProps = {\n cloudChannel: '5'\n };\n return Editor;\n}(React.Component);\n\nexport { Editor };","import \"core-js/modules/es6.object.assign\";\n\n/**\n * Copyright (c) 2017-present, Ephox, Inc.\n *\n * This source code is licensed under the Apache 2 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\nvar __assign = this && this.__assign || function () {\n __assign = Object.assign || function (t) {\n for (var s, i = 1, n = arguments.length; i < n; i++) {\n s = arguments[i];\n\n for (var p in s) {\n if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];\n }\n }\n\n return t;\n };\n\n return __assign.apply(this, arguments);\n};\n\nimport * as PropTypes from 'prop-types';\nexport var eventPropTypes = {\n onActivate: PropTypes.func,\n onAddUndo: PropTypes.func,\n onBeforeAddUndo: PropTypes.func,\n onBeforeExecCommand: PropTypes.func,\n onBeforeGetContent: PropTypes.func,\n onBeforeRenderUI: PropTypes.func,\n onBeforeSetContent: PropTypes.func,\n onBeforePaste: PropTypes.func,\n onBlur: PropTypes.func,\n onChange: PropTypes.func,\n onClearUndos: PropTypes.func,\n onClick: PropTypes.func,\n onContextMenu: PropTypes.func,\n onCopy: PropTypes.func,\n onCut: PropTypes.func,\n onDblclick: PropTypes.func,\n onDeactivate: PropTypes.func,\n onDirty: PropTypes.func,\n onDrag: PropTypes.func,\n onDragDrop: PropTypes.func,\n onDragEnd: PropTypes.func,\n onDragGesture: PropTypes.func,\n onDragOver: PropTypes.func,\n onDrop: PropTypes.func,\n onExecCommand: PropTypes.func,\n onFocus: PropTypes.func,\n onFocusIn: PropTypes.func,\n onFocusOut: PropTypes.func,\n onGetContent: PropTypes.func,\n onHide: PropTypes.func,\n onInit: PropTypes.func,\n onKeyDown: PropTypes.func,\n onKeyPress: PropTypes.func,\n onKeyUp: PropTypes.func,\n onLoadContent: PropTypes.func,\n onMouseDown: PropTypes.func,\n onMouseEnter: PropTypes.func,\n onMouseLeave: PropTypes.func,\n onMouseMove: PropTypes.func,\n onMouseOut: PropTypes.func,\n onMouseOver: PropTypes.func,\n onMouseUp: PropTypes.func,\n onNodeChange: PropTypes.func,\n onObjectResizeStart: PropTypes.func,\n onObjectResized: PropTypes.func,\n onObjectSelected: PropTypes.func,\n onPaste: PropTypes.func,\n onPostProcess: PropTypes.func,\n onPostRender: PropTypes.func,\n onPreProcess: PropTypes.func,\n onProgressState: PropTypes.func,\n onRedo: PropTypes.func,\n onRemove: PropTypes.func,\n onReset: PropTypes.func,\n onSaveContent: PropTypes.func,\n onSelectionChange: PropTypes.func,\n onSetAttrib: PropTypes.func,\n onSetContent: PropTypes.func,\n onShow: PropTypes.func,\n onSubmit: PropTypes.func,\n onUndo: PropTypes.func,\n onVisualAid: PropTypes.func\n};\nexport var EditorPropTypes = __assign({\n apiKey: PropTypes.string,\n id: PropTypes.string,\n inline: PropTypes.bool,\n init: PropTypes.object,\n initialValue: PropTypes.string,\n onEditorChange: PropTypes.func,\n outputFormat: PropTypes.oneOf(['html', 'text']),\n value: PropTypes.string,\n tagName: PropTypes.string,\n cloudChannel: PropTypes.string,\n plugins: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),\n toolbar: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),\n disabled: PropTypes.bool,\n textareaName: PropTypes.string,\n tinymceScriptSrc: PropTypes.string\n}, eventPropTypes);","import \"core-js/modules/es6.regexp.split\";\nimport \"core-js/modules/es6.array.is-array\";\nimport \"core-js/modules/es6.array.for-each\";\nimport \"core-js/modules/web.dom.iterable\";\nimport \"core-js/modules/es6.array.iterator\";\nimport \"core-js/modules/es6.object.to-string\";\nimport \"core-js/modules/es6.object.keys\";\nimport \"core-js/modules/es6.array.filter\";\nimport \"core-js/modules/es6.array.map\";\n\n/**\n * Copyright (c) 2017-present, Ephox, Inc.\n *\n * This source code is licensed under the Apache 2 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\nimport { eventPropTypes } from './components/EditorPropTypes';\nexport var isFunction = function isFunction(x) {\n return typeof x === 'function';\n};\n\nvar isEventProp = function isEventProp(name) {\n return name in eventPropTypes;\n};\n\nvar findEventHandlers = function findEventHandlers(props) {\n return Object.keys(props).filter(isEventProp).filter(function (name) {\n return isFunction(props[name]);\n }).map(function (name) {\n return {\n handler: props[name],\n eventName: name.substring(2)\n };\n });\n};\n\nexport var bindHandlers = function bindHandlers(editor, props, boundHandlers) {\n findEventHandlers(props).forEach(function (found) {\n // Unbind old handler\n var oldHandler = boundHandlers[found.eventName];\n\n if (isFunction(oldHandler)) {\n editor.off(found.eventName, oldHandler);\n } // Bind new handler\n\n\n var newHandler = function newHandler(e) {\n return found.handler(e, editor);\n };\n\n boundHandlers[found.eventName] = newHandler;\n editor.on(found.eventName, newHandler);\n });\n};\nvar unique = 0;\nexport var uuid = function uuid(prefix) {\n var date = new Date();\n var time = date.getTime();\n var random = Math.floor(Math.random() * 1000000000);\n unique++;\n return prefix + '_' + random + unique + String(time);\n};\nexport var isTextarea = function isTextarea(element) {\n return element !== null && element.tagName.toLowerCase() === 'textarea';\n};\n\nvar normalizePluginArray = function normalizePluginArray(plugins) {\n if (typeof plugins === 'undefined' || plugins === '') {\n return [];\n }\n\n return Array.isArray(plugins) ? plugins : plugins.split(' ');\n};\n\nexport var mergePlugins = function mergePlugins(initPlugins, inputPlugins) {\n return normalizePluginArray(initPlugins).concat(normalizePluginArray(inputPlugins));\n};","import React from \"react\";\nimport { Editor } from \"@tinymce/tinymce-react\";\n\nconst key = \"2snaiiqoggpk5xr1v5k7dng23muq3y6vhaqf0pt06kyrxl33\";\n\ntype Props = {\n value: string;\n onChange?: (contents: string, Editor: any) => void;\n};\n\nexport default function WkEditor(props: Props) {\n const { onChange, value } = props;\n\n console.log(\"defaluValue:\", props);\n const handleEditorChange = (content: string, editor: any) => {\n console.log(\"Content was updated:\", content);\n if (onChange) {\n onChange(content, editor);\n }\n };\n\n return (\n
\n * \n *
\n * )}\n * Drag 'n' drop some files here, or click to select files
\n *\n * \n *
\n * )\n * }\n * ```\n *\n * @function useDropzone\n *\n * @param {object} props\n * @param {string|string[]} [props.accept] Set accepted file types.\n * See https://github.com/okonet/attr-accept for more information.\n * Keep in mind that mime type determination is not reliable across platforms. CSV files,\n * for example, are reported as text/plain under macOS but as application/vnd.ms-excel under\n * Windows. In some cases there might not be a mime type set at all.\n * See: https://github.com/react-dropzone/react-dropzone/issues/276\n * @param {boolean} [props.multiple=true] Allow drag 'n' drop (or selection from the file dialog) of multiple files\n * @param {boolean} [props.preventDropOnDocument=true] If false, allow dropped items to take over the current browser window\n * @param {boolean} [props.noClick=false] If true, disables click to open the native file selection dialog\n * @param {boolean} [props.noKeyboard=false] If true, disables SPACE/ENTER to open the native file selection dialog.\n * Note that it also stops tracking the focus state.\n * @param {boolean} [props.noDrag=false] If true, disables drag 'n' drop\n * @param {boolean} [props.noDragEventsBubbling=false] If true, stops drag event propagation to parents\n * @param {number} [props.minSize=0] Minimum file size (in bytes)\n * @param {number} [props.maxSize=Infinity] Maximum file size (in bytes)\n * @param {boolean} [props.disabled=false] Enable/disable the dropzone\n * @param {getFilesFromEvent} [props.getFilesFromEvent] Use this to provide a custom file aggregator\n * @param {Function} [props.onFileDialogCancel] Cb for when closing the file dialog with no selection\n * @param {dragCb} [props.onDragEnter] Cb for when the `dragenter` event occurs.\n * @param {dragCb} [props.onDragLeave] Cb for when the `dragleave` event occurs\n * @param {dragCb} [props.onDragOver] Cb for when the `dragover` event occurs\n * @param {dropCb} [props.onDrop] Cb for when the `drop` event occurs.\n * Note that this callback is invoked after the `getFilesFromEvent` callback is done.\n *\n * Files are accepted or rejected based on the `accept`, `multiple`, `minSize` and `maxSize` props.\n * `accept` must be a valid [MIME type](http://www.iana.org/assignments/media-types/media-types.xhtml) according to [input element specification](https://www.w3.org/wiki/HTML/Elements/input/file) or a valid file extension.\n * If `multiple` is set to false and additional files are droppped,\n * all files besides the first will be rejected.\n * Any file which does not have a size in the [`minSize`, `maxSize`] range, will be rejected as well.\n *\n * Note that the `onDrop` callback will always be invoked regardless if the dropped files were accepted or rejected.\n * If you'd like to react to a specific scenario, use the `onDropAccepted`/`onDropRejected` props.\n *\n * `onDrop` will provide you with an array of [File](https://developer.mozilla.org/en-US/docs/Web/API/File) objects which you can then process and send to a server.\n * For example, with [SuperAgent](https://github.com/visionmedia/superagent) as a http/ajax library:\n *\n * ```js\n * function onDrop(acceptedFiles) {\n * const req = request.post('/upload')\n * acceptedFiles.forEach(file => {\n * req.attach(file.name, file)\n * })\n * req.end(callback)\n * }\n * ```\n * @param {dropAcceptedCb} [props.onDropAccepted]\n * @param {dropRejectedCb} [props.onDropRejected]\n *\n * @returns {DropzoneState}\n */\n\nexport function useDropzone() {\n var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},\n accept = _ref2.accept,\n _ref2$disabled = _ref2.disabled,\n disabled = _ref2$disabled === void 0 ? false : _ref2$disabled,\n _ref2$getFilesFromEve = _ref2.getFilesFromEvent,\n getFilesFromEvent = _ref2$getFilesFromEve === void 0 ? fromEvent : _ref2$getFilesFromEve,\n _ref2$maxSize = _ref2.maxSize,\n maxSize = _ref2$maxSize === void 0 ? Infinity : _ref2$maxSize,\n _ref2$minSize = _ref2.minSize,\n minSize = _ref2$minSize === void 0 ? 0 : _ref2$minSize,\n _ref2$multiple = _ref2.multiple,\n multiple = _ref2$multiple === void 0 ? true : _ref2$multiple,\n onDragEnter = _ref2.onDragEnter,\n onDragLeave = _ref2.onDragLeave,\n onDragOver = _ref2.onDragOver,\n onDrop = _ref2.onDrop,\n onDropAccepted = _ref2.onDropAccepted,\n onDropRejected = _ref2.onDropRejected,\n onFileDialogCancel = _ref2.onFileDialogCancel,\n _ref2$preventDropOnDo = _ref2.preventDropOnDocument,\n preventDropOnDocument = _ref2$preventDropOnDo === void 0 ? true : _ref2$preventDropOnDo,\n _ref2$noClick = _ref2.noClick,\n noClick = _ref2$noClick === void 0 ? false : _ref2$noClick,\n _ref2$noKeyboard = _ref2.noKeyboard,\n noKeyboard = _ref2$noKeyboard === void 0 ? false : _ref2$noKeyboard,\n _ref2$noDrag = _ref2.noDrag,\n noDrag = _ref2$noDrag === void 0 ? false : _ref2$noDrag,\n _ref2$noDragEventsBub = _ref2.noDragEventsBubbling,\n noDragEventsBubbling = _ref2$noDragEventsBub === void 0 ? false : _ref2$noDragEventsBub;\n\n var rootRef = useRef(null);\n var inputRef = useRef(null);\n\n var _useReducer = useReducer(reducer, initialState),\n _useReducer2 = _slicedToArray(_useReducer, 2),\n state = _useReducer2[0],\n dispatch = _useReducer2[1];\n\n var isFocused = state.isFocused,\n isFileDialogActive = state.isFileDialogActive,\n draggedFiles = state.draggedFiles; // Fn for opening the file dialog programmatically\n\n var openFileDialog = useCallback(function () {\n if (inputRef.current) {\n dispatch({\n type: 'openDialog'\n });\n inputRef.current.value = null;\n inputRef.current.click();\n }\n }, [dispatch]); // Update file dialog active state when the window is focused on\n\n var onWindowFocus = function onWindowFocus() {\n // Execute the timeout only if the file dialog is opened in the browser\n if (isFileDialogActive) {\n setTimeout(function () {\n if (inputRef.current) {\n var files = inputRef.current.files;\n\n if (!files.length) {\n dispatch({\n type: 'closeDialog'\n });\n\n if (typeof onFileDialogCancel === 'function') {\n onFileDialogCancel();\n }\n }\n }\n }, 300);\n }\n };\n\n useEffect(function () {\n window.addEventListener('focus', onWindowFocus, false);\n return function () {\n window.removeEventListener('focus', onWindowFocus, false);\n };\n }, [inputRef, isFileDialogActive, onFileDialogCancel]); // Cb to open the file dialog when SPACE/ENTER occurs on the dropzone\n\n var onKeyDownCb = useCallback(function (event) {\n // Ignore keyboard events bubbling up the DOM tree\n if (!rootRef.current || !rootRef.current.isEqualNode(event.target)) {\n return;\n }\n\n if (event.keyCode === 32 || event.keyCode === 13) {\n event.preventDefault();\n openFileDialog();\n }\n }, [rootRef, inputRef]); // Update focus state for the dropzone\n\n var onFocusCb = useCallback(function () {\n dispatch({\n type: 'focus'\n });\n }, []);\n var onBlurCb = useCallback(function () {\n dispatch({\n type: 'blur'\n });\n }, []); // Cb to open the file dialog when click occurs on the dropzone\n\n var onClickCb = useCallback(function () {\n if (noClick) {\n return;\n } // In IE11/Edge the file-browser dialog is blocking, therefore, use setTimeout()\n // to ensure React can handle state changes\n // See: https://github.com/react-dropzone/react-dropzone/issues/450\n\n\n if (isIeOrEdge()) {\n setTimeout(openFileDialog, 0);\n } else {\n openFileDialog();\n }\n }, [inputRef, noClick]);\n var dragTargetsRef = useRef([]);\n\n var onDocumentDrop = function onDocumentDrop(event) {\n if (rootRef.current && rootRef.current.contains(event.target)) {\n // If we intercepted an event for our instance, let it propagate down to the instance's onDrop handler\n return;\n }\n\n event.preventDefault();\n dragTargetsRef.current = [];\n };\n\n useEffect(function () {\n if (preventDropOnDocument) {\n document.addEventListener('dragover', onDocumentDragOver, false);\n document.addEventListener('drop', onDocumentDrop, false);\n }\n\n return function () {\n if (preventDropOnDocument) {\n document.removeEventListener('dragover', onDocumentDragOver);\n document.removeEventListener('drop', onDocumentDrop);\n }\n };\n }, [rootRef, preventDropOnDocument]);\n var onDragEnterCb = useCallback(function (event) {\n event.preventDefault(); // Persist here because we need the event later after getFilesFromEvent() is done\n\n event.persist();\n stopPropagation(event); // Count the dropzone and any children that are entered.\n\n if (dragTargetsRef.current.indexOf(event.target) === -1) {\n dragTargetsRef.current = [].concat(_toConsumableArray(dragTargetsRef.current), [event.target]);\n }\n\n if (isEvtWithFiles(event)) {\n Promise.resolve(getFilesFromEvent(event)).then(function (draggedFiles) {\n if (isPropagationStopped(event) && !noDragEventsBubbling) {\n return;\n }\n\n dispatch({\n draggedFiles: draggedFiles,\n isDragActive: true,\n type: 'setDraggedFiles'\n });\n\n if (onDragEnter) {\n onDragEnter(event);\n }\n });\n }\n }, [getFilesFromEvent, onDragEnter, noDragEventsBubbling]);\n var onDragOverCb = useCallback(function (event) {\n event.preventDefault();\n event.persist();\n stopPropagation(event);\n\n if (event.dataTransfer) {\n try {\n event.dataTransfer.dropEffect = 'copy';\n } catch (_unused) {}\n /* eslint-disable-line no-empty */\n\n }\n\n if (isEvtWithFiles(event) && onDragOver) {\n onDragOver(event);\n }\n\n return false;\n }, [onDragOver, noDragEventsBubbling]);\n var onDragLeaveCb = useCallback(function (event) {\n event.preventDefault();\n event.persist();\n stopPropagation(event); // Only deactivate once the dropzone and all children have been left\n\n var targets = dragTargetsRef.current.filter(function (target) {\n return target !== event.target && rootRef.current && rootRef.current.contains(target);\n });\n dragTargetsRef.current = targets;\n\n if (targets.length > 0) {\n return;\n }\n\n dispatch({\n isDragActive: false,\n type: 'setDraggedFiles',\n draggedFiles: []\n });\n\n if (isEvtWithFiles(event) && onDragLeave) {\n onDragLeave(event);\n }\n }, [rootRef, onDragLeave, noDragEventsBubbling]);\n var onDropCb = useCallback(function (event) {\n event.preventDefault(); // Persist here because we need the event later after getFilesFromEvent() is done\n\n event.persist();\n stopPropagation(event);\n dragTargetsRef.current = [];\n\n if (isEvtWithFiles(event)) {\n Promise.resolve(getFilesFromEvent(event)).then(function (files) {\n if (isPropagationStopped(event) && !noDragEventsBubbling) {\n return;\n }\n\n var acceptedFiles = [];\n var rejectedFiles = [];\n files.forEach(function (file) {\n if (fileAccepted(file, accept) && fileMatchSize(file, minSize, maxSize)) {\n acceptedFiles.push(file);\n } else {\n rejectedFiles.push(file);\n }\n });\n\n if (!multiple && acceptedFiles.length > 1) {\n rejectedFiles.push.apply(rejectedFiles, _toConsumableArray(acceptedFiles.splice(0))); // Reject everything and empty accepted files\n }\n\n dispatch({\n acceptedFiles: acceptedFiles,\n rejectedFiles: rejectedFiles,\n type: 'setFiles'\n });\n\n if (onDrop) {\n onDrop(acceptedFiles, rejectedFiles, event);\n }\n\n if (rejectedFiles.length > 0 && onDropRejected) {\n onDropRejected(rejectedFiles, event);\n }\n\n if (acceptedFiles.length > 0 && onDropAccepted) {\n onDropAccepted(acceptedFiles, event);\n }\n });\n }\n\n dispatch({\n type: 'reset'\n });\n }, [multiple, accept, minSize, maxSize, getFilesFromEvent, onDrop, onDropAccepted, onDropRejected, noDragEventsBubbling]);\n\n var composeHandler = function composeHandler(fn) {\n return disabled ? null : fn;\n };\n\n var composeKeyboardHandler = function composeKeyboardHandler(fn) {\n return noKeyboard ? null : composeHandler(fn);\n };\n\n var composeDragHandler = function composeDragHandler(fn) {\n return noDrag ? null : composeHandler(fn);\n };\n\n var stopPropagation = function stopPropagation(event) {\n if (noDragEventsBubbling) {\n event.stopPropagation();\n }\n };\n\n var getRootProps = useMemo(function () {\n return function () {\n var _ref3 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},\n _ref3$refKey = _ref3.refKey,\n refKey = _ref3$refKey === void 0 ? 'ref' : _ref3$refKey,\n onKeyDown = _ref3.onKeyDown,\n onFocus = _ref3.onFocus,\n onBlur = _ref3.onBlur,\n onClick = _ref3.onClick,\n onDragEnter = _ref3.onDragEnter,\n onDragOver = _ref3.onDragOver,\n onDragLeave = _ref3.onDragLeave,\n onDrop = _ref3.onDrop,\n rest = _objectWithoutProperties(_ref3, [\"refKey\", \"onKeyDown\", \"onFocus\", \"onBlur\", \"onClick\", \"onDragEnter\", \"onDragOver\", \"onDragLeave\", \"onDrop\"]);\n\n return _objectSpread(_defineProperty({\n onKeyDown: composeKeyboardHandler(composeEventHandlers(onKeyDown, onKeyDownCb)),\n onFocus: composeKeyboardHandler(composeEventHandlers(onFocus, onFocusCb)),\n onBlur: composeKeyboardHandler(composeEventHandlers(onBlur, onBlurCb)),\n onClick: composeHandler(composeEventHandlers(onClick, onClickCb)),\n onDragEnter: composeDragHandler(composeEventHandlers(onDragEnter, onDragEnterCb)),\n onDragOver: composeDragHandler(composeEventHandlers(onDragOver, onDragOverCb)),\n onDragLeave: composeDragHandler(composeEventHandlers(onDragLeave, onDragLeaveCb)),\n onDrop: composeDragHandler(composeEventHandlers(onDrop, onDropCb))\n }, refKey, rootRef), !disabled && !noKeyboard ? {\n tabIndex: 0\n } : {}, {}, rest);\n };\n }, [rootRef, onKeyDownCb, onFocusCb, onBlurCb, onClickCb, onDragEnterCb, onDragOverCb, onDragLeaveCb, onDropCb, noKeyboard, noDrag, disabled]);\n var onInputElementClick = useCallback(function (event) {\n event.stopPropagation();\n }, []);\n var getInputProps = useMemo(function () {\n return function () {\n var _ref4 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},\n _ref4$refKey = _ref4.refKey,\n refKey = _ref4$refKey === void 0 ? 'ref' : _ref4$refKey,\n onChange = _ref4.onChange,\n onClick = _ref4.onClick,\n rest = _objectWithoutProperties(_ref4, [\"refKey\", \"onChange\", \"onClick\"]);\n\n var inputProps = _defineProperty({\n accept: accept,\n multiple: multiple,\n type: 'file',\n style: {\n display: 'none'\n },\n onChange: composeHandler(composeEventHandlers(onChange, onDropCb)),\n onClick: composeHandler(composeEventHandlers(onClick, onInputElementClick)),\n autoComplete: 'off',\n tabIndex: -1\n }, refKey, inputRef);\n\n return _objectSpread({}, inputProps, {}, rest);\n };\n }, [inputRef, accept, multiple, onDropCb, disabled]);\n var fileCount = draggedFiles.length;\n var isDragAccept = fileCount > 0 && allFilesAccepted({\n files: draggedFiles,\n accept: accept,\n minSize: minSize,\n maxSize: maxSize,\n multiple: multiple\n });\n var isDragReject = fileCount > 0 && !isDragAccept;\n return _objectSpread({}, state, {\n isDragAccept: isDragAccept,\n isDragReject: isDragReject,\n isFocused: isFocused && !disabled,\n getRootProps: getRootProps,\n getInputProps: getInputProps,\n rootRef: rootRef,\n inputRef: inputRef,\n open: composeHandler(openFileDialog)\n });\n}\n\nfunction reducer(state, action) {\n /* istanbul ignore next */\n switch (action.type) {\n case 'focus':\n return _objectSpread({}, state, {\n isFocused: true\n });\n\n case 'blur':\n return _objectSpread({}, state, {\n isFocused: false\n });\n\n case 'openDialog':\n return _objectSpread({}, state, {\n isFileDialogActive: true\n });\n\n case 'closeDialog':\n return _objectSpread({}, state, {\n isFileDialogActive: false\n });\n\n case 'setDraggedFiles':\n /* eslint no-case-declarations: 0 */\n var isDragActive = action.isDragActive,\n draggedFiles = action.draggedFiles;\n return _objectSpread({}, state, {\n draggedFiles: draggedFiles,\n isDragActive: isDragActive\n });\n\n case 'setFiles':\n return _objectSpread({}, state, {\n acceptedFiles: action.acceptedFiles,\n rejectedFiles: action.rejectedFiles\n });\n\n case 'reset':\n return _objectSpread({}, state, {\n isFileDialogActive: false,\n isDragActive: false,\n draggedFiles: [],\n acceptedFiles: [],\n rejectedFiles: []\n });\n\n default:\n return state;\n }\n}","import \"core-js/modules/es6.array.filter\";\nimport \"core-js/modules/es7.array.includes\";\nimport \"core-js/modules/es6.string.includes\";\nimport \"core-js/modules/es6.array.is-array\";\nimport \"core-js/modules/es6.array.for-each\";\nimport \"core-js/modules/es6.array.reduce\";\nimport \"core-js/modules/web.dom.iterable\";\nimport \"core-js/modules/es6.array.iterator\";\nimport \"core-js/modules/es6.string.iterator\";\nimport \"core-js/modules/es6.regexp.to-string\";\nimport \"core-js/modules/es6.date.to-string\";\nimport \"core-js/modules/es6.reflect.construct\";\nimport \"core-js/modules/es6.function.name\";\nimport \"core-js/modules/es6.array.map\";\nimport \"core-js/modules/es6.promise\";\nimport \"core-js/modules/es6.object.to-string\";\nimport \"core-js/modules/es6.regexp.replace\";\nimport \"core-js/modules/es6.regexp.split\";\nimport _extends from '@babel/runtime/helpers/extends';\nimport _slicedToArray from '@babel/runtime/helpers/slicedToArray';\nimport _regeneratorRuntime from '@babel/runtime/regenerator';\nimport _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';\nimport _classCallCheck from '@babel/runtime/helpers/classCallCheck';\nimport _createClass from '@babel/runtime/helpers/createClass';\nimport _inherits from '@babel/runtime/helpers/inherits';\nimport _possibleConstructorReturn from '@babel/runtime/helpers/possibleConstructorReturn';\nimport _getPrototypeOf from '@babel/runtime/helpers/getPrototypeOf';\nimport _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';\nimport PropTypes from 'prop-types';\nimport { createElement, Fragment, PureComponent } from 'react';\nimport Snackbar from '@material-ui/core/Snackbar';\nimport Typography from '@material-ui/core/Typography';\nimport { withStyles } from '@material-ui/core/styles';\nimport AttachFileIcon from '@material-ui/icons/AttachFile';\nimport CloudUploadIcon from '@material-ui/icons/CloudUpload';\nimport clsx from 'clsx';\nimport Dropzone from 'react-dropzone';\nimport Chip from '@material-ui/core/Chip';\nimport Fab from '@material-ui/core/Fab';\nimport Grid from '@material-ui/core/Grid';\nimport DeleteIcon from '@material-ui/icons/Delete';\nimport IconButton from '@material-ui/core/IconButton';\nimport SnackbarContent from '@material-ui/core/SnackbarContent';\nimport CheckCircleIcon from '@material-ui/icons/CheckCircle';\nimport CloseIcon from '@material-ui/icons/Close';\nimport ErrorIcon from '@material-ui/icons/Error';\nimport InfoIcon from '@material-ui/icons/Info';\nimport WarningIcon from '@material-ui/icons/Warning';\nimport Button from '@material-ui/core/Button';\nimport Dialog from '@material-ui/core/Dialog';\nimport DialogActions from '@material-ui/core/DialogActions';\nimport DialogContent from '@material-ui/core/DialogContent';\nimport DialogTitle from '@material-ui/core/DialogTitle';\n\nfunction isImage(file) {\n if (file.type.split('/')[0] === 'image') {\n return true;\n }\n}\n\nfunction convertBytesToMbsOrKbs(filesize) {\n var size = ''; // I know, not technically correct...\n\n if (filesize >= 1000000) {\n size = filesize / 1000000 + ' megabytes';\n } else if (filesize >= 1000) {\n size = filesize / 1000 + ' kilobytes';\n } else {\n size = filesize + ' bytes';\n }\n\n return size;\n}\n\nfunction createFileFromUrl(_x) {\n return _createFileFromUrl.apply(this, arguments);\n}\n\nfunction _createFileFromUrl() {\n _createFileFromUrl = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(url) {\n var response, data, metadata, filename;\n return _regeneratorRuntime.wrap(function _callee$(_context) {\n while (1) {\n switch (_context.prev = _context.next) {\n case 0:\n _context.next = 2;\n return fetch(url);\n\n case 2:\n response = _context.sent;\n _context.next = 5;\n return response.blob();\n\n case 5:\n data = _context.sent;\n metadata = {\n type: data.type\n };\n filename = url.replace(/\\?.+/, '').split('/').pop();\n return _context.abrupt(\"return\", new File([data], filename, metadata));\n\n case 9:\n case \"end\":\n return _context.stop();\n }\n }\n }, _callee);\n }));\n return _createFileFromUrl.apply(this, arguments);\n}\n\nfunction readFile(file) {\n return new Promise(function (resolve, reject) {\n var reader = new FileReader();\n\n reader.onload = function (event) {\n var _event$target;\n\n resolve(event === null || event === void 0 ? void 0 : (_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.result);\n };\n\n reader.onerror = function (event) {\n reader.abort();\n reject(event);\n };\n\n reader.readAsDataURL(file);\n });\n}\n\nvar styles = function styles(_ref) {\n var palette = _ref.palette,\n shape = _ref.shape,\n spacing = _ref.spacing;\n return {\n root: {},\n imageContainer: {\n position: 'relative',\n zIndex: 10,\n textAlign: 'center',\n '&:hover $image': {\n opacity: 0.3\n },\n '&:hover $removeButton': {\n opacity: 1\n }\n },\n image: {\n height: 100,\n width: 'initial',\n maxWidth: '100%',\n color: palette.text.primary,\n transition: 'all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms',\n boxSizing: 'border-box',\n boxShadow: 'rgba(0, 0, 0, 0.12) 0 1px 6px, rgba(0, 0, 0, 0.12) 0 1px 4px',\n borderRadius: shape.borderRadius,\n zIndex: 5,\n opacity: 1\n },\n removeButton: {\n transition: '.5s ease',\n position: 'absolute',\n opacity: 0,\n top: spacing(-1),\n right: spacing(-1),\n width: 40,\n height: 40,\n '&:focus': {\n opacity: 1\n }\n }\n };\n};\n\nvar _ref3 = /*#__PURE__*/createElement(DeleteIcon, null);\n\nfunction PreviewList(_ref2) {\n var fileObjects = _ref2.fileObjects,\n handleRemove = _ref2.handleRemove,\n showFileNames = _ref2.showFileNames,\n useChipsForPreview = _ref2.useChipsForPreview,\n previewChipProps = _ref2.previewChipProps,\n previewGridClasses = _ref2.previewGridClasses,\n previewGridProps = _ref2.previewGridProps,\n classes = _ref2.classes,\n getPreviewIcon = _ref2.getPreviewIcon;\n\n if (useChipsForPreview) {\n return /*#__PURE__*/createElement(Grid, _extends({\n spacing: 1,\n direction: \"row\"\n }, previewGridProps.container, {\n container: true,\n className: clsx(classes.root, previewGridClasses.container)\n }), fileObjects.map(function (fileObject, i) {\n var _fileObject$file$name, _fileObject$file;\n\n return /*#__PURE__*/createElement(Grid, _extends({}, previewGridProps.item, {\n item: true,\n key: \"\".concat((_fileObject$file$name = (_fileObject$file = fileObject.file) === null || _fileObject$file === void 0 ? void 0 : _fileObject$file.name) !== null && _fileObject$file$name !== void 0 ? _fileObject$file$name : 'file', \"-\").concat(i),\n className: classes.imageContainer\n }), /*#__PURE__*/createElement(Chip, _extends({\n variant: \"outlined\"\n }, previewChipProps, {\n label: fileObject.file.name,\n onDelete: handleRemove(i)\n })));\n }));\n }\n\n return /*#__PURE__*/createElement(Grid, _extends({\n spacing: 8\n }, previewGridProps.container, {\n container: true,\n className: clsx(classes.root, previewGridClasses.container)\n }), fileObjects.map(function (fileObject, i) {\n var _fileObject$file$name2, _fileObject$file2;\n\n return /*#__PURE__*/createElement(Grid, _extends({\n xs: 4\n }, previewGridProps.item, {\n item: true,\n key: \"\".concat((_fileObject$file$name2 = (_fileObject$file2 = fileObject.file) === null || _fileObject$file2 === void 0 ? void 0 : _fileObject$file2.name) !== null && _fileObject$file$name2 !== void 0 ? _fileObject$file$name2 : 'file', \"-\").concat(i),\n className: clsx(classes.imageContainer, previewGridClasses.item)\n }), getPreviewIcon(fileObject, classes), showFileNames && /*#__PURE__*/createElement(Typography, {\n variant: \"body1\",\n component: \"p\"\n }, fileObject.file.name), /*#__PURE__*/createElement(Fab, {\n onClick: handleRemove(i),\n \"aria-label\": \"Delete\",\n className: classes.removeButton\n }, _ref3));\n }));\n}\n\nprocess.env.NODE_ENV !== \"production\" ? PreviewList.propTypes = {\n classes: PropTypes.object.isRequired,\n fileObjects: PropTypes.arrayOf(PropTypes.object).isRequired,\n getPreviewIcon: PropTypes.func.isRequired,\n handleRemove: PropTypes.func.isRequired,\n previewChipProps: PropTypes.object,\n previewGridClasses: PropTypes.object,\n previewGridProps: PropTypes.object,\n showFileNames: PropTypes.bool,\n useChipsForPreview: PropTypes.bool\n} : void 0;\nvar PreviewList$1 = withStyles(styles, {\n name: 'MuiDropzonePreviewList'\n})(PreviewList);\nvar variantIcon = {\n success: CheckCircleIcon,\n warning: WarningIcon,\n error: ErrorIcon,\n info: InfoIcon\n};\n\nvar styles$1 = function styles(theme) {\n return {\n successAlert: {\n backgroundColor: theme.palette.success.main\n },\n errorAlert: {\n backgroundColor: theme.palette.error.main\n },\n infoAlert: {\n backgroundColor: theme.palette.info.main\n },\n warningAlert: {\n backgroundColor: theme.palette.warning.main\n },\n message: {\n display: 'flex',\n alignItems: 'center'\n },\n icon: {\n fontSize: 20,\n opacity: 0.9,\n marginRight: theme.spacing(1)\n },\n closeButton: {}\n };\n};\n\nfunction SnackbarContentWrapper(props) {\n var classes = props.classes,\n className = props.className,\n message = props.message,\n onClose = props.onClose,\n variant = props.variant,\n other = _objectWithoutProperties(props, [\"classes\", \"className\", \"message\", \"onClose\", \"variant\"]);\n\n var Icon = variantIcon[variant];\n return /*#__PURE__*/createElement(SnackbarContent, _extends({\n className: clsx(classes[\"\".concat(variant, \"Alert\")], className),\n \"aria-describedby\": \"client-snackbar\",\n message: /*#__PURE__*/createElement(\"span\", {\n id: \"client-snackbar\",\n className: classes.message\n }, /*#__PURE__*/createElement(Icon, {\n className: classes.icon\n }), message),\n action: [/*#__PURE__*/createElement(IconButton, {\n key: \"close\",\n \"aria-label\": \"Close\",\n color: \"inherit\",\n className: classes.closeButton,\n onClick: onClose\n }, /*#__PURE__*/createElement(CloseIcon, {\n className: classes.icon\n }))]\n }, other));\n}\n\nprocess.env.NODE_ENV !== \"production\" ? SnackbarContentWrapper.propTypes = {\n classes: PropTypes.object.isRequired,\n className: PropTypes.string,\n message: PropTypes.node,\n onClose: PropTypes.func,\n variant: PropTypes.oneOf(['success', 'warning', 'error', 'info']).isRequired\n} : void 0;\nvar SnackbarContentWrapper$1 = withStyles(styles$1, {\n name: 'MuiDropzoneSnackbar'\n})(SnackbarContentWrapper);\n\nfunction _createSuper(Derived) {\n var hasNativeReflectConstruct = _isNativeReflectConstruct();\n\n return function _createSuperInternal() {\n var Super = _getPrototypeOf(Derived),\n result;\n\n if (hasNativeReflectConstruct) {\n var NewTarget = _getPrototypeOf(this).constructor;\n\n result = Reflect.construct(Super, arguments, NewTarget);\n } else {\n result = Super.apply(this, arguments);\n }\n\n return _possibleConstructorReturn(this, result);\n };\n}\n\nfunction _isNativeReflectConstruct() {\n if (typeof Reflect === \"undefined\" || !Reflect.construct) return false;\n if (Reflect.construct.sham) return false;\n if (typeof Proxy === \"function\") return true;\n\n try {\n Date.prototype.toString.call(Reflect.construct(Date, [], function () {}));\n return true;\n } catch (e) {\n return false;\n }\n}\n\nvar styles$2 = function styles(_ref) {\n var palette = _ref.palette,\n shape = _ref.shape,\n spacing = _ref.spacing;\n return {\n '@keyframes progress': {\n '0%': {\n backgroundPosition: '0 0'\n },\n '100%': {\n backgroundPosition: '-70px 0'\n }\n },\n root: {\n position: 'relative',\n width: '100%',\n minHeight: '250px',\n backgroundColor: palette.background.paper,\n border: 'dashed',\n borderColor: palette.divider,\n borderRadius: shape.borderRadius,\n boxSizing: 'border-box',\n cursor: 'pointer',\n overflow: 'hidden'\n },\n active: {\n animation: '$progress 2s linear infinite !important',\n // eslint-disable-next-line max-len\n backgroundImage: \"repeating-linear-gradient(-45deg, \".concat(palette.background.paper, \", \").concat(palette.background.paper, \" 25px, \").concat(palette.divider, \" 25px, \").concat(palette.divider, \" 50px)\"),\n backgroundSize: '150% 100%',\n border: 'solid',\n borderColor: palette.primary.light\n },\n invalid: {\n // eslint-disable-next-line max-len\n backgroundImage: \"repeating-linear-gradient(-45deg, \".concat(palette.error.light, \", \").concat(palette.error.light, \" 25px, \").concat(palette.error.dark, \" 25px, \").concat(palette.error.dark, \" 50px)\"),\n borderColor: palette.error.main\n },\n textContainer: {\n textAlign: 'center'\n },\n text: {\n marginBottom: spacing(3),\n marginTop: spacing(3)\n },\n icon: {\n width: 51,\n height: 51,\n color: palette.text.primary\n }\n };\n};\n\nvar defaultSnackbarAnchorOrigin = {\n horizontal: 'left',\n vertical: 'bottom'\n};\n\nvar defaultGetPreviewIcon = function defaultGetPreviewIcon(fileObject, classes) {\n if (isImage(fileObject.file)) {\n return /*#__PURE__*/createElement(\"img\", {\n className: classes.image,\n role: \"presentation\",\n src: fileObject.data\n });\n }\n\n return /*#__PURE__*/createElement(AttachFileIcon, {\n className: classes.image\n });\n};\n/**\n * This components creates a Material-UI Dropzone, with previews and snackbar notifications.\n */\n\n\nvar DropzoneAreaBase = /*#__PURE__*/function (_React$PureComponent) {\n _inherits(DropzoneAreaBase, _React$PureComponent);\n\n var _super = _createSuper(DropzoneAreaBase);\n\n function DropzoneAreaBase() {\n var _this;\n\n _classCallCheck(this, DropzoneAreaBase);\n\n for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {\n args[_key] = arguments[_key];\n }\n\n _this = _super.call.apply(_super, [this].concat(args));\n _this.state = {\n openSnackBar: false,\n snackbarMessage: '',\n snackbarVariant: 'success'\n };\n\n _this.handleDropAccepted = /*#__PURE__*/function () {\n var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(acceptedFiles, evt) {\n var _this$props, fileObjects, filesLimit, getFileAddedMessage, getFileLimitExceedMessage, onAdd, onDrop, fileObjs, message;\n\n return _regeneratorRuntime.wrap(function _callee2$(_context2) {\n while (1) {\n switch (_context2.prev = _context2.next) {\n case 0:\n _this$props = _this.props, fileObjects = _this$props.fileObjects, filesLimit = _this$props.filesLimit, getFileAddedMessage = _this$props.getFileAddedMessage, getFileLimitExceedMessage = _this$props.getFileLimitExceedMessage, onAdd = _this$props.onAdd, onDrop = _this$props.onDrop;\n\n if (!(filesLimit > 1 && fileObjects.length + acceptedFiles.length > filesLimit)) {\n _context2.next = 4;\n break;\n }\n\n _this.setState({\n openSnackBar: true,\n snackbarMessage: getFileLimitExceedMessage(filesLimit),\n snackbarVariant: 'error'\n }, _this.notifyAlert);\n\n return _context2.abrupt(\"return\");\n\n case 4:\n // Notify Drop event\n if (onDrop) {\n onDrop(acceptedFiles, evt);\n } // Retrieve fileObjects data\n\n\n _context2.next = 7;\n return Promise.all(acceptedFiles.map( /*#__PURE__*/function () {\n var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(file) {\n var data;\n return _regeneratorRuntime.wrap(function _callee$(_context) {\n while (1) {\n switch (_context.prev = _context.next) {\n case 0:\n _context.next = 2;\n return readFile(file);\n\n case 2:\n data = _context.sent;\n return _context.abrupt(\"return\", {\n file: file,\n data: data\n });\n\n case 4:\n case \"end\":\n return _context.stop();\n }\n }\n }, _callee);\n }));\n\n return function (_x3) {\n return _ref3.apply(this, arguments);\n };\n }()));\n\n case 7:\n fileObjs = _context2.sent; // Notify added files\n\n if (onAdd) {\n onAdd(fileObjs);\n } // Display message\n\n\n message = fileObjs.reduce(function (msg, fileObj) {\n return msg + getFileAddedMessage(fileObj.file.name);\n }, '');\n\n _this.setState({\n openSnackBar: true,\n snackbarMessage: message,\n snackbarVariant: 'success'\n }, _this.notifyAlert);\n\n case 11:\n case \"end\":\n return _context2.stop();\n }\n }\n }, _callee2);\n }));\n\n return function (_x, _x2) {\n return _ref2.apply(this, arguments);\n };\n }();\n\n _this.handleDropRejected = function (rejectedFiles, evt) {\n var _this$props2 = _this.props,\n acceptedFiles = _this$props2.acceptedFiles,\n filesLimit = _this$props2.filesLimit,\n fileObjects = _this$props2.fileObjects,\n getDropRejectMessage = _this$props2.getDropRejectMessage,\n getFileLimitExceedMessage = _this$props2.getFileLimitExceedMessage,\n maxFileSize = _this$props2.maxFileSize,\n onDropRejected = _this$props2.onDropRejected;\n var message = '';\n\n if (fileObjects.length + rejectedFiles.length > filesLimit) {\n message = getFileLimitExceedMessage(filesLimit);\n } else {\n rejectedFiles.forEach(function (rejectedFile) {\n message = getDropRejectMessage(rejectedFile, acceptedFiles, maxFileSize);\n });\n }\n\n if (onDropRejected) {\n onDropRejected(rejectedFiles, evt);\n }\n\n _this.setState({\n openSnackBar: true,\n snackbarMessage: message,\n snackbarVariant: 'error'\n }, _this.notifyAlert);\n };\n\n _this.handleRemove = function (fileIndex) {\n return function (event) {\n event.stopPropagation();\n var _this$props3 = _this.props,\n fileObjects = _this$props3.fileObjects,\n getFileRemovedMessage = _this$props3.getFileRemovedMessage,\n onDelete = _this$props3.onDelete; // Find removed fileObject\n\n var removedFileObj = fileObjects[fileIndex]; // Notify removed file\n\n if (onDelete) {\n onDelete(removedFileObj, fileIndex);\n }\n\n _this.setState({\n openSnackBar: true,\n snackbarMessage: getFileRemovedMessage(removedFileObj.file.name),\n snackbarVariant: 'info'\n }, _this.notifyAlert);\n };\n };\n\n _this.handleCloseSnackbar = function () {\n _this.setState({\n openSnackBar: false\n });\n };\n\n return _this;\n }\n\n _createClass(DropzoneAreaBase, [{\n key: \"notifyAlert\",\n value: function notifyAlert() {\n var onAlert = this.props.onAlert;\n var _this$state = this.state,\n openSnackBar = _this$state.openSnackBar,\n snackbarMessage = _this$state.snackbarMessage,\n snackbarVariant = _this$state.snackbarVariant;\n\n if (openSnackBar && onAlert) {\n onAlert(snackbarMessage, snackbarVariant);\n }\n }\n }, {\n key: \"render\",\n value: function render() {\n var _this2 = this;\n\n var _this$props4 = this.props,\n acceptedFiles = _this$props4.acceptedFiles,\n alertSnackbarProps = _this$props4.alertSnackbarProps,\n classes = _this$props4.classes,\n disableRejectionFeedback = _this$props4.disableRejectionFeedback,\n dropzoneClass = _this$props4.dropzoneClass,\n dropzoneParagraphClass = _this$props4.dropzoneParagraphClass,\n dropzoneProps = _this$props4.dropzoneProps,\n dropzoneText = _this$props4.dropzoneText,\n fileObjects = _this$props4.fileObjects,\n filesLimit = _this$props4.filesLimit,\n getPreviewIcon = _this$props4.getPreviewIcon,\n inputProps = _this$props4.inputProps,\n maxFileSize = _this$props4.maxFileSize,\n previewChipProps = _this$props4.previewChipProps,\n previewGridClasses = _this$props4.previewGridClasses,\n previewGridProps = _this$props4.previewGridProps,\n previewText = _this$props4.previewText,\n showAlerts = _this$props4.showAlerts,\n showFileNames = _this$props4.showFileNames,\n showFileNamesInPreview = _this$props4.showFileNamesInPreview,\n showPreviews = _this$props4.showPreviews,\n showPreviewsInDropzone = _this$props4.showPreviewsInDropzone,\n useChipsForPreview = _this$props4.useChipsForPreview;\n var _this$state2 = this.state,\n openSnackBar = _this$state2.openSnackBar,\n snackbarMessage = _this$state2.snackbarMessage,\n snackbarVariant = _this$state2.snackbarVariant;\n var acceptFiles = acceptedFiles === null || acceptedFiles === void 0 ? void 0 : acceptedFiles.join(',');\n var isMultiple = filesLimit > 1;\n var previewsVisible = showPreviews && fileObjects.length > 0;\n var previewsInDropzoneVisible = showPreviewsInDropzone && fileObjects.length > 0;\n return /*#__PURE__*/createElement(Fragment, null, /*#__PURE__*/createElement(Dropzone, _extends({}, dropzoneProps, {\n accept: acceptFiles,\n onDropAccepted: this.handleDropAccepted,\n onDropRejected: this.handleDropRejected,\n maxSize: maxFileSize,\n multiple: isMultiple\n }), function (_ref4) {\n var getRootProps = _ref4.getRootProps,\n getInputProps = _ref4.getInputProps,\n isDragActive = _ref4.isDragActive,\n isDragReject = _ref4.isDragReject;\n return /*#__PURE__*/createElement(\"div\", _extends({}, getRootProps(), {\n className: clsx(classes.root, dropzoneClass, isDragActive && classes.active, !disableRejectionFeedback && isDragReject && classes.invalid)\n }), /*#__PURE__*/createElement(\"input\", _extends({}, inputProps, getInputProps())), /*#__PURE__*/createElement(\"div\", {\n className: classes.textContainer\n }, /*#__PURE__*/createElement(Typography, {\n variant: \"h5\",\n component: \"p\",\n className: clsx(classes.text, dropzoneParagraphClass)\n }, dropzoneText), /*#__PURE__*/createElement(CloudUploadIcon, {\n className: classes.icon\n })), previewsInDropzoneVisible && /*#__PURE__*/createElement(PreviewList$1, {\n fileObjects: fileObjects,\n handleRemove: _this2.handleRemove,\n getPreviewIcon: getPreviewIcon,\n showFileNames: showFileNames,\n useChipsForPreview: useChipsForPreview,\n previewChipProps: previewChipProps,\n previewGridClasses: previewGridClasses,\n previewGridProps: previewGridProps\n }));\n }), previewsVisible && /*#__PURE__*/createElement(Fragment, null, /*#__PURE__*/createElement(Typography, {\n variant: \"subtitle1\",\n component: \"span\"\n }, previewText), /*#__PURE__*/createElement(PreviewList$1, {\n fileObjects: fileObjects,\n handleRemove: this.handleRemove,\n getPreviewIcon: getPreviewIcon,\n showFileNames: showFileNamesInPreview,\n useChipsForPreview: useChipsForPreview,\n previewChipProps: previewChipProps,\n previewGridClasses: previewGridClasses,\n previewGridProps: previewGridProps\n })), (typeof showAlerts === 'boolean' && showAlerts || Array.isArray(showAlerts) && showAlerts.includes(snackbarVariant)) && /*#__PURE__*/createElement(Snackbar, _extends({\n anchorOrigin: defaultSnackbarAnchorOrigin,\n autoHideDuration: 6000\n }, alertSnackbarProps, {\n open: openSnackBar,\n onClose: this.handleCloseSnackbar\n }), /*#__PURE__*/createElement(SnackbarContentWrapper$1, {\n onClose: this.handleCloseSnackbar,\n variant: snackbarVariant,\n message: snackbarMessage\n })));\n }\n }]);\n\n return DropzoneAreaBase;\n}(PureComponent);\n\nDropzoneAreaBase.defaultProps = {\n acceptedFiles: ['image/*', 'video/*', 'application/*'],\n filesLimit: 3,\n fileObjects: [],\n maxFileSize: 3000000,\n dropzoneText: 'Drag and drop a file here or click',\n previewText: 'Preview:',\n disableRejectionFeedback: false,\n showPreviews: false,\n // By default previews show up under in the dialog and inside in the standalone\n showPreviewsInDropzone: true,\n showFileNames: false,\n showFileNamesInPreview: false,\n useChipsForPreview: false,\n previewChipProps: {},\n previewGridClasses: {},\n previewGridProps: {},\n showAlerts: true,\n alertSnackbarProps: {\n anchorOrigin: {\n horizontal: 'left',\n vertical: 'bottom'\n },\n autoHideDuration: 6000\n },\n getFileLimitExceedMessage: function getFileLimitExceedMessage(filesLimit) {\n return \"Maximum allowed number of files exceeded. Only \".concat(filesLimit, \" allowed\");\n },\n getFileAddedMessage: function getFileAddedMessage(fileName) {\n return \"File \".concat(fileName, \" successfully added.\");\n },\n getPreviewIcon: defaultGetPreviewIcon,\n getFileRemovedMessage: function getFileRemovedMessage(fileName) {\n return \"File \".concat(fileName, \" removed.\");\n },\n getDropRejectMessage: function getDropRejectMessage(rejectedFile, acceptedFiles, maxFileSize) {\n var message = \"File \".concat(rejectedFile.name, \" was rejected. \");\n\n if (!acceptedFiles.includes(rejectedFile.type)) {\n message += 'File type not supported. ';\n }\n\n if (rejectedFile.size > maxFileSize) {\n message += 'File is too big. Size limit is ' + convertBytesToMbsOrKbs(maxFileSize) + '. ';\n }\n\n return message;\n }\n};\nvar FileObjectShape = PropTypes.shape({\n file: PropTypes.object,\n data: PropTypes.any\n});\nprocess.env.NODE_ENV !== \"production\" ? DropzoneAreaBase.propTypes = {\n /** @ignore */\n classes: PropTypes.object.isRequired,\n\n /** A list of file types to accept.\n * @see See [here](https://react-dropzone.js.org/#section-accepting-specific-file-types) for more details.\n */\n acceptedFiles: PropTypes.arrayOf(PropTypes.string),\n\n /** Maximum number of files that can be loaded into the dropzone. */\n filesLimit: PropTypes.number,\n\n /** Currently loaded files. */\n fileObjects: PropTypes.arrayOf(FileObjectShape),\n\n /** Maximum file size (in bytes) that the dropzone will accept. */\n maxFileSize: PropTypes.number,\n\n /** Text inside the dropzone. */\n dropzoneText: PropTypes.string,\n\n /** Custom CSS class name for dropzone container. */\n dropzoneClass: PropTypes.string,\n\n /** Custom CSS class name for text inside the container. */\n dropzoneParagraphClass: PropTypes.string,\n\n /** Disable feedback effect when dropping rejected files. */\n disableRejectionFeedback: PropTypes.bool,\n\n /** Shows previews **BELOW** the dropzone. */\n showPreviews: PropTypes.bool,\n\n /** Shows preview **INSIDE** the dropzone area. */\n showPreviewsInDropzone: PropTypes.bool,\n\n /** Shows file name under the dropzone image. */\n showFileNames: PropTypes.bool,\n\n /** Shows file name under the image. */\n showFileNamesInPreview: PropTypes.bool,\n\n /** Uses deletable Material-UI Chip components to display file names. */\n useChipsForPreview: PropTypes.bool,\n\n /**\n * Props to pass to the Material-UI Chip components.Drag and drop some files here, or click to select files
\n *Requires `useChipsForPreview` prop to be `true`.\n *\n * @see See [Material-UI Chip](https://material-ui.com/api/chip/#props) for available values.\n */\n previewChipProps: PropTypes.object,\n\n /**\n * Custom CSS classNames for preview Grid components.
\n * Should be in the form {container: string, item: string, image: string}.\n */\n previewGridClasses: PropTypes.object,\n\n /**\n * Props to pass to the Material-UI Grid components.
\n * Should be in the form {container: GridProps, item: GridProps}.\n *\n * @see See [Material-UI Grid](https://material-ui.com/api/grid/#props) for available GridProps values.\n */\n previewGridProps: PropTypes.object,\n\n /** The label for the file preview section. */\n previewText: PropTypes.string,\n\n /**\n * Shows styled Material-UI Snackbar when files are dropped, deleted or rejected.\n *\n * - can be a boolean (\"global\" `true` or `false` for all alerts).\n * - can be an array, with values 'error', 'info', 'success' to select to view only certain alerts:\n * - showAlerts={['error']} for only errors.\n * - showAlerts={['error', 'info']} for both errors and info.\n * - showAlerts={['error', 'success', 'info']} is same as showAlerts={true}.\n * - showAlerts={[]} is same as showAlerts={false}.\n */\n showAlerts: PropTypes.oneOfType([PropTypes.bool, PropTypes.arrayOf(PropTypes.oneOf(['error', 'success', 'info']))]),\n\n /**\n * Props to pass to the Material-UI Snackbar components.
Requires `showAlerts` prop to be `true`.\n *\n * @see See [Material-UI Snackbar](https://material-ui.com/api/snackbar/#props) for available values.\n */\n alertSnackbarProps: PropTypes.object,\n\n /**\n * Props to pass to the Dropzone component.\n *\n * @see See [Dropzone props](https://react-dropzone.js.org/#src) for available values.\n */\n dropzoneProps: PropTypes.object,\n\n /**\n * Attributes applied to the input element.\n *\n * @see See [MDN Input File attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#Additional_attributes) for available values.\n */\n inputProps: PropTypes.object,\n\n /**\n * Get alert message to display when files limit is exceed.\n *\n * *Default*: \"Maximum allowed number of files exceeded. Only ${filesLimit} allowed\"\n *\n * @param {number} filesLimit The `filesLimit` currently set for the component.\n */\n getFileLimitExceedMessage: PropTypes.func,\n\n /**\n * Get alert message to display when a new file is added.\n *\n * *Default*: \"File ${fileName} successfully added.\"\n *\n * @param {string} fileName The newly added file name.\n */\n getFileAddedMessage: PropTypes.func,\n\n /**\n * Get alert message to display when a file is removed.\n *\n * *Default*: \"File ${fileName} removed.\"\n *\n * @param {string} fileName The name of the removed file.\n */\n getFileRemovedMessage: PropTypes.func,\n\n /**\n * Get alert message to display when a file is rejected onDrop.\n *\n * *Default*: \"File ${rejectedFile.name} was rejected.\"\n *\n * @param {Object} rejectedFile The file that got rejected\n * @param {string[]} acceptedFiles The `acceptedFiles` prop currently set for the component\n * @param {number} maxFileSize The `maxFileSize` prop currently set for the component\n */\n getDropRejectMessage: PropTypes.func,\n\n /**\n * A function which determines which icon to display for a file preview.\n *\n * *Default*: If its an image then displays a preview the image, otherwise it will display an attachment icon\n *\n * @param {FileObject} objectFile The file which the preview will belong to\n * @param {Object} classes The classes for the file preview icon, in the default case we use the 'image' className.\n */\n getPreviewIcon: PropTypes.func,\n\n /**\n * Fired when new files are added to dropzone.\n *\n * @param {FileObject[]} newFiles The new files added to the dropzone.\n */\n onAdd: PropTypes.func,\n\n /**\n * Fired when a file is deleted from the previews panel.\n *\n * @param {FileObject} deletedFileObject The file that was removed.\n * @param {number} index The index of the removed file object.\n */\n onDelete: PropTypes.func,\n\n /**\n * Fired when the user drops files into the dropzone.\n *\n * @param {File[]} droppedFiles All the files dropped into the dropzone.\n * @param {Event} event The react-dropzone drop event.\n */\n onDrop: PropTypes.func,\n\n /**\n * Fired when a file is rejected because of wrong file type, size or goes beyond the filesLimit.\n *\n * @param {File[]} rejectedFiles All the rejected files.\n * @param {Event} event The react-dropzone drop event.\n */\n onDropRejected: PropTypes.func,\n\n /**\n * Fired when an alert is triggered.\n *\n * @param {string} message Alert message.\n * @param {string} variant One of \"error\", \"info\", \"success\".\n */\n onAlert: PropTypes.func\n} : void 0;\nvar DropzoneAreaBase$1 = withStyles(styles$2, {\n name: 'MuiDropzoneArea'\n})(DropzoneAreaBase);\n\nfunction _createSuper$1(Derived) {\n var hasNativeReflectConstruct = _isNativeReflectConstruct$1();\n\n return function _createSuperInternal() {\n var Super = _getPrototypeOf(Derived),\n result;\n\n if (hasNativeReflectConstruct) {\n var NewTarget = _getPrototypeOf(this).constructor;\n\n result = Reflect.construct(Super, arguments, NewTarget);\n } else {\n result = Super.apply(this, arguments);\n }\n\n return _possibleConstructorReturn(this, result);\n };\n}\n\nfunction _isNativeReflectConstruct$1() {\n if (typeof Reflect === \"undefined\" || !Reflect.construct) return false;\n if (Reflect.construct.sham) return false;\n if (typeof Proxy === \"function\") return true;\n\n try {\n Date.prototype.toString.call(Reflect.construct(Date, [], function () {}));\n return true;\n } catch (e) {\n return false;\n }\n}\n\nvar splitDropzoneAreaProps = function splitDropzoneAreaProps(props) {\n var clearOnUnmount = props.clearOnUnmount,\n initialFiles = props.initialFiles,\n onChange = props.onChange,\n onDelete = props.onDelete,\n dropzoneAreaProps = _objectWithoutProperties(props, [\"clearOnUnmount\", \"initialFiles\", \"onChange\", \"onDelete\"]);\n\n return [{\n clearOnUnmount: clearOnUnmount,\n initialFiles: initialFiles,\n onChange: onChange,\n onDelete: onDelete\n }, dropzoneAreaProps];\n};\n/**\n * This components creates an uncontrolled Material-UI Dropzone, with previews and snackbar notifications.\n *\n * It supports all props of `DropzoneAreaBase` but keeps the files state internally.\n *\n * **Note** To listen to file changes use `onChange` event handler and notice that `onDelete` returns a `File` instance instead of `FileObject`.\n */\n\n\nvar DropzoneArea = /*#__PURE__*/function (_React$PureComponent) {\n _inherits(DropzoneArea, _React$PureComponent);\n\n var _super = _createSuper$1(DropzoneArea);\n\n function DropzoneArea() {\n var _this;\n\n _classCallCheck(this, DropzoneArea);\n\n for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {\n args[_key] = arguments[_key];\n }\n\n _this = _super.call.apply(_super, [this].concat(args));\n _this.state = {\n fileObjects: []\n };\n\n _this.notifyFileChange = function () {\n var onChange = _this.props.onChange;\n var fileObjects = _this.state.fileObjects;\n\n if (onChange) {\n onChange(fileObjects.map(function (fileObject) {\n return fileObject.file;\n }));\n }\n };\n\n _this.loadInitialFiles = /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {\n var initialFiles, fileObjs;\n return _regeneratorRuntime.wrap(function _callee2$(_context2) {\n while (1) {\n switch (_context2.prev = _context2.next) {\n case 0:\n initialFiles = _this.props.initialFiles;\n _context2.prev = 1;\n _context2.next = 4;\n return Promise.all(initialFiles.map( /*#__PURE__*/function () {\n var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(initialFile) {\n var file, data;\n return _regeneratorRuntime.wrap(function _callee$(_context) {\n while (1) {\n switch (_context.prev = _context.next) {\n case 0:\n if (!(typeof initialFile === 'string')) {\n _context.next = 6;\n break;\n }\n\n _context.next = 3;\n return createFileFromUrl(initialFile);\n\n case 3:\n file = _context.sent;\n _context.next = 7;\n break;\n\n case 6:\n file = initialFile;\n\n case 7:\n _context.next = 9;\n return readFile(file);\n\n case 9:\n data = _context.sent;\n return _context.abrupt(\"return\", {\n file: file,\n data: data\n });\n\n case 11:\n case \"end\":\n return _context.stop();\n }\n }\n }, _callee);\n }));\n\n return function (_x) {\n return _ref2.apply(this, arguments);\n };\n }()));\n\n case 4:\n fileObjs = _context2.sent;\n\n _this.setState(function (state) {\n return {\n fileObjects: [].concat(state.fileObjects, fileObjs)\n };\n }, _this.notifyFileChange);\n\n _context2.next = 11;\n break;\n\n case 8:\n _context2.prev = 8;\n _context2.t0 = _context2[\"catch\"](1);\n console.log(_context2.t0);\n\n case 11:\n case \"end\":\n return _context2.stop();\n }\n }\n }, _callee2, null, [[1, 8]]);\n }));\n\n _this.addFiles = /*#__PURE__*/function () {\n var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3(newFileObjects) {\n var filesLimit;\n return _regeneratorRuntime.wrap(function _callee3$(_context3) {\n while (1) {\n switch (_context3.prev = _context3.next) {\n case 0:\n filesLimit = _this.props.filesLimit; // Update component state\n\n _this.setState(function (state) {\n // Handle a single file\n if (filesLimit <= 1) {\n return {\n fileObjects: [].concat(newFileObjects[0])\n };\n } // Handle multiple files\n\n\n return {\n fileObjects: [].concat(state.fileObjects, newFileObjects)\n };\n }, _this.notifyFileChange);\n\n case 2:\n case \"end\":\n return _context3.stop();\n }\n }\n }, _callee3);\n }));\n\n return function (_x2) {\n return _ref3.apply(this, arguments);\n };\n }();\n\n _this.deleteFile = function (removedFileObj, removedFileObjIdx) {\n event.stopPropagation();\n var onDelete = _this.props.onDelete;\n var fileObjects = _this.state.fileObjects; // Calculate remaining fileObjects array\n\n var remainingFileObjs = fileObjects.filter(function (fileObject, i) {\n return i !== removedFileObjIdx;\n }); // Notify removed file\n\n if (onDelete) {\n onDelete(removedFileObj.file);\n } // Update local state\n\n\n _this.setState({\n fileObjects: remainingFileObjs\n }, _this.notifyFileChange);\n };\n\n return _this;\n }\n\n _createClass(DropzoneArea, [{\n key: \"componentDidMount\",\n value: function componentDidMount() {\n this.loadInitialFiles();\n }\n }, {\n key: \"componentWillUnmount\",\n value: function componentWillUnmount() {\n var clearOnUnmount = this.props.clearOnUnmount;\n\n if (clearOnUnmount) {\n this.setState({\n fileObjects: []\n }, this.notifyFileChange);\n }\n }\n }, {\n key: \"render\",\n value: function render() {\n var _splitDropzoneAreaPro = splitDropzoneAreaProps(this.props),\n _splitDropzoneAreaPro2 = _slicedToArray(_splitDropzoneAreaPro, 2),\n dropzoneAreaProps = _splitDropzoneAreaPro2[1];\n\n var fileObjects = this.state.fileObjects;\n return /*#__PURE__*/createElement(DropzoneAreaBase$1, _extends({}, dropzoneAreaProps, {\n fileObjects: fileObjects,\n onAdd: this.addFiles,\n onDelete: this.deleteFile\n }));\n }\n }]);\n\n return DropzoneArea;\n}(PureComponent);\n\nDropzoneArea.defaultProps = {\n clearOnUnmount: true,\n filesLimit: 3,\n initialFiles: []\n};\nprocess.env.NODE_ENV !== \"production\" ? DropzoneArea.propTypes = _extends({}, DropzoneAreaBase$1.propTypes, {\n /** Clear uploaded files when component is unmounted. */\n clearOnUnmount: PropTypes.bool,\n\n /** List containing File objects or URL strings.
\n * **Note:** Please take care of CORS.\n */\n initialFiles: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(File), PropTypes.string])),\n\n /** Maximum number of files that can be loaded into the dropzone. */\n filesLimit: PropTypes.number,\n\n /**\n * Fired when the files inside dropzone change.\n *\n * @param {File[]} loadedFiles All the files currently loaded into the dropzone.\n */\n onChange: PropTypes.func,\n\n /**\n * Fired when a file is deleted from the previews panel.\n *\n * @param {File} deletedFile The file that was removed.\n */\n onDelete: PropTypes.func\n}) : void 0;\n\nfunction _createSuper$2(Derived) {\n var hasNativeReflectConstruct = _isNativeReflectConstruct$2();\n\n return function _createSuperInternal() {\n var Super = _getPrototypeOf(Derived),\n result;\n\n if (hasNativeReflectConstruct) {\n var NewTarget = _getPrototypeOf(this).constructor;\n\n result = Reflect.construct(Super, arguments, NewTarget);\n } else {\n result = Super.apply(this, arguments);\n }\n\n return _possibleConstructorReturn(this, result);\n };\n}\n\nfunction _isNativeReflectConstruct$2() {\n if (typeof Reflect === \"undefined\" || !Reflect.construct) return false;\n if (Reflect.construct.sham) return false;\n if (typeof Proxy === \"function\") return true;\n\n try {\n Date.prototype.toString.call(Reflect.construct(Date, [], function () {}));\n return true;\n } catch (e) {\n return false;\n }\n}\n\nfunction splitDropzoneDialogProps(allProps) {\n var cancelButtonText = allProps.cancelButtonText,\n dialogProps = allProps.dialogProps,\n dialogTitle = allProps.dialogTitle,\n fullWidth = allProps.fullWidth,\n maxWidth = allProps.maxWidth,\n onClose = allProps.onClose,\n onSave = allProps.onSave,\n open = allProps.open,\n submitButtonText = allProps.submitButtonText,\n dropzoneAreaProps = _objectWithoutProperties(allProps, [\"cancelButtonText\", \"dialogProps\", \"dialogTitle\", \"fullWidth\", \"maxWidth\", \"onClose\", \"onSave\", \"open\", \"submitButtonText\"]);\n\n return [{\n cancelButtonText: cancelButtonText,\n dialogProps: dialogProps,\n dialogTitle: dialogTitle,\n fullWidth: fullWidth,\n maxWidth: maxWidth,\n onClose: onClose,\n onSave: onSave,\n open: open,\n submitButtonText: submitButtonText\n }, dropzoneAreaProps];\n}\n/**\n * This component provides the DropzoneArea inside of a Material-UI Dialog.\n *\n * It supports all the Props and Methods from `DropzoneAreaBase`.\n */\n\n\nvar DropzoneDialogBase = /*#__PURE__*/function (_React$PureComponent) {\n _inherits(DropzoneDialogBase, _React$PureComponent);\n\n var _super = _createSuper$2(DropzoneDialogBase);\n\n function DropzoneDialogBase() {\n _classCallCheck(this, DropzoneDialogBase);\n\n return _super.apply(this, arguments);\n }\n\n _createClass(DropzoneDialogBase, [{\n key: \"render\",\n value: function render() {\n var _splitDropzoneDialogP = splitDropzoneDialogProps(this.props),\n _splitDropzoneDialogP2 = _slicedToArray(_splitDropzoneDialogP, 2),\n dropzoneDialogProps = _splitDropzoneDialogP2[0],\n dropzoneAreaProps = _splitDropzoneDialogP2[1];\n\n var cancelButtonText = dropzoneDialogProps.cancelButtonText,\n dialogProps = dropzoneDialogProps.dialogProps,\n dialogTitle = dropzoneDialogProps.dialogTitle,\n fullWidth = dropzoneDialogProps.fullWidth,\n maxWidth = dropzoneDialogProps.maxWidth,\n onClose = dropzoneDialogProps.onClose,\n onSave = dropzoneDialogProps.onSave,\n open = dropzoneDialogProps.open,\n submitButtonText = dropzoneDialogProps.submitButtonText; // Submit button state\n\n var submitDisabled = dropzoneAreaProps.fileObjects.length === 0;\n return /*#__PURE__*/createElement(Dialog, _extends({}, dialogProps, {\n fullWidth: fullWidth,\n maxWidth: maxWidth,\n onClose: onClose,\n open: open\n }), /*#__PURE__*/createElement(DialogTitle, null, dialogTitle), /*#__PURE__*/createElement(DialogContent, null, /*#__PURE__*/createElement(DropzoneAreaBase$1, dropzoneAreaProps)), /*#__PURE__*/createElement(DialogActions, null, /*#__PURE__*/createElement(Button, {\n color: \"primary\",\n onClick: onClose\n }, cancelButtonText), /*#__PURE__*/createElement(Button, {\n color: \"primary\",\n disabled: submitDisabled,\n onClick: onSave\n }, submitButtonText)));\n }\n }]);\n\n return DropzoneDialogBase;\n}(PureComponent);\n\nDropzoneDialogBase.defaultProps = {\n open: false,\n dialogTitle: 'Upload file',\n dialogProps: {},\n fullWidth: true,\n maxWidth: 'sm',\n cancelButtonText: 'Cancel',\n submitButtonText: 'Submit',\n showPreviews: true,\n showPreviewsInDropzone: false,\n showFileNamesInPreview: true\n};\nprocess.env.NODE_ENV !== \"production\" ? DropzoneDialogBase.propTypes = _extends({}, DropzoneAreaBase$1.propTypes, {\n /** Sets whether the dialog is open or closed. */\n open: PropTypes.bool,\n\n /** The Dialog title. */\n dialogTitle: PropTypes.string,\n\n /**\n * Props to pass to the Material-UI Dialog components.\n * @see See [Material-UI Dialog](https://material-ui.com/api/dialog/#props) for available values.\n */\n dialogProps: PropTypes.object,\n\n /**\n * If `true`, the dialog stretches to `maxWidth`.
\n * Notice that the dialog width grow is limited by the default margin.\n */\n fullWidth: PropTypes.bool,\n\n /**\n * Determine the max-width of the dialog. The dialog width grows with the size of the screen.
\n * Set to `false` to disable `maxWidth`.\n */\n maxWidth: PropTypes.string,\n\n /** Cancel button text in dialog. */\n cancelButtonText: PropTypes.string,\n\n /** Submit button text in dialog. */\n submitButtonText: PropTypes.string,\n\n /**\n * Fired when the modal is closed.\n *\n * @param {SyntheticEvent} event The react `SyntheticEvent`\n */\n onClose: PropTypes.func,\n\n /**\n * Fired when the user clicks the Submit button.\n *\n * @param {SyntheticEvent} event The react `SyntheticEvent`\n */\n onSave: PropTypes.func,\n\n /**\n * Shows previews **BELOW** the dropzone.
\n * **Note:** By default previews show up under in the Dialog and inside in the standalone.\n */\n showPreviews: PropTypes.bool,\n\n /** Shows preview **INSIDE** the dropzone area. */\n showPreviewsInDropzone: PropTypes.bool,\n\n /** Shows file name under the image. */\n showFileNamesInPreview: PropTypes.bool\n}) : void 0;\n\nfunction _createSuper$3(Derived) {\n var hasNativeReflectConstruct = _isNativeReflectConstruct$3();\n\n return function _createSuperInternal() {\n var Super = _getPrototypeOf(Derived),\n result;\n\n if (hasNativeReflectConstruct) {\n var NewTarget = _getPrototypeOf(this).constructor;\n\n result = Reflect.construct(Super, arguments, NewTarget);\n } else {\n result = Super.apply(this, arguments);\n }\n\n return _possibleConstructorReturn(this, result);\n };\n}\n\nfunction _isNativeReflectConstruct$3() {\n if (typeof Reflect === \"undefined\" || !Reflect.construct) return false;\n if (Reflect.construct.sham) return false;\n if (typeof Proxy === \"function\") return true;\n\n try {\n Date.prototype.toString.call(Reflect.construct(Date, [], function () {}));\n return true;\n } catch (e) {\n return false;\n }\n}\n/**\n * This component provides an uncontrolled version of the DropzoneDialogBase component.\n *\n * It supports all the Props and Methods from `DropzoneDialogBase` but keeps the files state internally.\n *\n * **Note** The `onSave` handler also returns `File[]` with all the accepted files.\n */\n\n\nvar DropzoneDialog = /*#__PURE__*/function (_React$PureComponent) {\n _inherits(DropzoneDialog, _React$PureComponent);\n\n var _super = _createSuper$3(DropzoneDialog);\n\n function DropzoneDialog() {\n var _this;\n\n _classCallCheck(this, DropzoneDialog);\n\n for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {\n args[_key] = arguments[_key];\n }\n\n _this = _super.call.apply(_super, [this].concat(args));\n _this.state = {\n fileObjects: []\n };\n\n _this.notifyFileChange = function () {\n var onChange = _this.props.onChange;\n var fileObjects = _this.state.fileObjects;\n\n if (onChange) {\n onChange(fileObjects.map(function (fileObject) {\n return fileObject.file;\n }));\n }\n };\n\n _this.loadInitialFiles = /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {\n var initialFiles, fileObjs;\n return _regeneratorRuntime.wrap(function _callee2$(_context2) {\n while (1) {\n switch (_context2.prev = _context2.next) {\n case 0:\n initialFiles = _this.props.initialFiles;\n _context2.prev = 1;\n _context2.next = 4;\n return Promise.all(initialFiles.map( /*#__PURE__*/function () {\n var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(initialFile) {\n var file, data;\n return _regeneratorRuntime.wrap(function _callee$(_context) {\n while (1) {\n switch (_context.prev = _context.next) {\n case 0:\n if (!(typeof initialFile === 'string')) {\n _context.next = 6;\n break;\n }\n\n _context.next = 3;\n return createFileFromUrl(initialFile);\n\n case 3:\n file = _context.sent;\n _context.next = 7;\n break;\n\n case 6:\n file = initialFile;\n\n case 7:\n _context.next = 9;\n return readFile(file);\n\n case 9:\n data = _context.sent;\n return _context.abrupt(\"return\", {\n file: file,\n data: data\n });\n\n case 11:\n case \"end\":\n return _context.stop();\n }\n }\n }, _callee);\n }));\n\n return function (_x) {\n return _ref2.apply(this, arguments);\n };\n }()));\n\n case 4:\n fileObjs = _context2.sent;\n\n _this.setState(function (state) {\n return {\n fileObjects: [].concat(state.fileObjects, fileObjs)\n };\n }, _this.notifyFileChange);\n\n _context2.next = 11;\n break;\n\n case 8:\n _context2.prev = 8;\n _context2.t0 = _context2[\"catch\"](1);\n console.log(_context2.t0);\n\n case 11:\n case \"end\":\n return _context2.stop();\n }\n }\n }, _callee2, null, [[1, 8]]);\n }));\n\n _this.addFiles = /*#__PURE__*/function () {\n var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3(newFileObjects) {\n var filesLimit;\n return _regeneratorRuntime.wrap(function _callee3$(_context3) {\n while (1) {\n switch (_context3.prev = _context3.next) {\n case 0:\n filesLimit = _this.props.filesLimit; // Update component state\n\n _this.setState(function (state) {\n // Handle a single file\n if (filesLimit <= 1) {\n return {\n fileObjects: [].concat(newFileObjects[0])\n };\n } // Handle multiple files\n\n\n return {\n fileObjects: [].concat(state.fileObjects, newFileObjects)\n };\n }, _this.notifyFileChange);\n\n case 2:\n case \"end\":\n return _context3.stop();\n }\n }\n }, _callee3);\n }));\n\n return function (_x2) {\n return _ref3.apply(this, arguments);\n };\n }();\n\n _this.deleteFile = function (removedFileObj, removedFileObjIdx) {\n event.stopPropagation();\n var onDelete = _this.props.onDelete;\n var fileObjects = _this.state.fileObjects; // Calculate remaining fileObjects array\n\n var remainingFileObjs = fileObjects.filter(function (fileObject, i) {\n return i !== removedFileObjIdx;\n }); // Notify removed file\n\n if (onDelete) {\n onDelete(removedFileObj.file);\n } // Update local state\n\n\n _this.setState({\n fileObjects: remainingFileObjs\n }, _this.notifyFileChange);\n };\n\n _this.handleClose = function (evt) {\n var _this$props = _this.props,\n clearOnUnmount = _this$props.clearOnUnmount,\n onClose = _this$props.onClose;\n\n if (onClose) {\n onClose(evt);\n }\n\n if (clearOnUnmount) {\n _this.setState({\n fileObjects: []\n }, _this.notifyFileChange);\n }\n };\n\n _this.handleSave = function (evt) {\n var _this$props2 = _this.props,\n clearOnUnmount = _this$props2.clearOnUnmount,\n onSave = _this$props2.onSave;\n var fileObjects = _this.state.fileObjects;\n\n if (onSave) {\n onSave(fileObjects.map(function (fileObject) {\n return fileObject.file;\n }), evt);\n }\n\n if (clearOnUnmount) {\n _this.setState({\n fileObjects: []\n }, _this.notifyFileChange);\n }\n };\n\n return _this;\n }\n\n _createClass(DropzoneDialog, [{\n key: \"componentDidMount\",\n value: function componentDidMount() {\n this.loadInitialFiles();\n }\n }, {\n key: \"componentWillUnmount\",\n value: function componentWillUnmount() {\n var clearOnUnmount = this.props.clearOnUnmount;\n\n if (clearOnUnmount) {\n this.setState({\n fileObjects: []\n }, this.notifyFileChange);\n }\n }\n }, {\n key: \"render\",\n value: function render() {\n var fileObjects = this.state.fileObjects;\n return /*#__PURE__*/createElement(DropzoneDialogBase, _extends({}, this.props, {\n fileObjects: fileObjects,\n onAdd: this.addFiles,\n onDelete: this.deleteFile,\n onClose: this.handleClose,\n onSave: this.handleSave\n }));\n }\n }]);\n\n return DropzoneDialog;\n}(PureComponent);\n\nDropzoneDialog.defaultProps = {\n clearOnUnmount: true,\n filesLimit: 3,\n initialFiles: []\n};\nprocess.env.NODE_ENV !== \"production\" ? DropzoneDialog.propTypes = _extends({}, DropzoneDialogBase.propTypes, {\n /** Clear uploaded files when component is unmounted. */\n clearOnUnmount: PropTypes.bool,\n\n /** Maximum number of files that can be loaded into the dropzone. */\n filesLimit: PropTypes.number,\n\n /** List containing File objects or URL strings.
\n * **Note:** Please take care of CORS.\n */\n initialFiles: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(File), PropTypes.string])),\n\n /**\n * Fired when the user clicks the Submit button.\n *\n * @param {File[]} files All the files currently inside the Dropzone.\n * @param {SyntheticEvent} event The react `SyntheticEvent`.\n */\n onSave: PropTypes.func\n}) : void 0;\nexport { DropzoneArea, DropzoneAreaBase$1 as DropzoneAreaBase, DropzoneDialog, DropzoneDialogBase };","import * as React from \"react\";\nimport { DropzoneDialog } from \"material-ui-dropzone\";\nimport Button from \"@material-ui/core/Button\";\n\ntype Props = {\n onDrop: any;\n singleImage?: boolean;\n};\nconst UploadImage = (props: Props) => {\n const { onDrop, singleImage } = props;\n const [open, setOpen] = React.useState(false);\n\n return (\n <>\n
\n 0}\n style={{ position: \"fixed\", top: \"200px\" }}\n unmountOnExit\n >\n \n \n \n )}\n
\n );\n}\n","let cfOrigin = \"\";\n\nif (process.env.GATSBY_CF_DOMAIN) {\n cfOrigin = \"https://cf.onlineboatshow.jp\";\n}\n\nconsole.log(\"GATSBY_CF_DOMAI:\", process.env.GATSBY_CF_DOMAIN);\n\nconsole.log(\"cfOrigin:\", cfOrigin);\n\nexport { cfOrigin };\n","import React, { useState } from \"react\";\nimport ImageUploader from \"components/atoms/ImageUploader\";\nimport Alubum, { Photo } from \"components/molecures/Allbum\";\nimport { DialogTitle, TextField, DialogContent } from \"@material-ui/core\";\nimport { listImages } from \"graphql/queries\";\nimport { v4 as uuid } from \"uuid\";\nimport { createImage } from \"../../graphql/mutations\";\nimport awsconfig from \"aws-exports\";\nimport { API, graphqlOperation } from \"aws-amplify\";\nimport { Storage } from \"aws-amplify\";\nimport { cfOrigin } from \"settings/storageSettings\";\nimport { useSelector } from \"react-redux\";\nimport { Image } from \"API\";\n\ntype Props = {\n onSelect: any;\n value: any;\n};\nconst UploadImage = (props: Props) => {\n const { value, onSelect } = props;\n\n const show = useSelector((state: any) => state.user.selectedShow);\n const [search, setSerach] = useState(\"\");\n const [registPhots, setRegistPhots] = useState\n {!mode && (\n
\n \n \n copyしました。 \n \n
\n );\n};\nexport default TextClipboard;\n","import React from \"react\";\nimport { Checkbox } from \"@material-ui/core\";\n\ntype Props = {\n value: any;\n};\nexport default function SingleCheckbox(props: Props) {\n const { value } = props;\n\n return