mirror of
https://github.com/idanoo/GoScrobble.git
synced 2024-11-23 00:45:16 +00:00
179 lines
6.2 KiB
JavaScript
179 lines
6.2 KiB
JavaScript
|
import _extends from "@babel/runtime/helpers/esm/extends";
|
||
|
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
||
|
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
||
|
import useSafeState from '@restart/hooks/useSafeState';
|
||
|
import { createPopper } from './popper';
|
||
|
|
||
|
var initialPopperStyles = function initialPopperStyles(position) {
|
||
|
return {
|
||
|
position: position,
|
||
|
top: '0',
|
||
|
left: '0',
|
||
|
opacity: '0',
|
||
|
pointerEvents: 'none'
|
||
|
};
|
||
|
};
|
||
|
|
||
|
var disabledApplyStylesModifier = {
|
||
|
name: 'applyStyles',
|
||
|
enabled: false
|
||
|
}; // until docjs supports type exports...
|
||
|
|
||
|
var ariaDescribedByModifier = {
|
||
|
name: 'ariaDescribedBy',
|
||
|
enabled: true,
|
||
|
phase: 'afterWrite',
|
||
|
effect: function effect(_ref) {
|
||
|
var state = _ref.state;
|
||
|
return function () {
|
||
|
var _state$elements = state.elements,
|
||
|
reference = _state$elements.reference,
|
||
|
popper = _state$elements.popper;
|
||
|
|
||
|
if ('removeAttribute' in reference) {
|
||
|
var ids = (reference.getAttribute('aria-describedby') || '').split(',').filter(function (id) {
|
||
|
return id.trim() !== popper.id;
|
||
|
});
|
||
|
if (!ids.length) reference.removeAttribute('aria-describedby');else reference.setAttribute('aria-describedby', ids.join(','));
|
||
|
}
|
||
|
};
|
||
|
},
|
||
|
fn: function fn(_ref2) {
|
||
|
var _popper$getAttribute;
|
||
|
|
||
|
var state = _ref2.state;
|
||
|
var _state$elements2 = state.elements,
|
||
|
popper = _state$elements2.popper,
|
||
|
reference = _state$elements2.reference;
|
||
|
var role = (_popper$getAttribute = popper.getAttribute('role')) == null ? void 0 : _popper$getAttribute.toLowerCase();
|
||
|
|
||
|
if (popper.id && role === 'tooltip' && 'setAttribute' in reference) {
|
||
|
var ids = reference.getAttribute('aria-describedby');
|
||
|
|
||
|
if (ids && ids.split(',').indexOf(popper.id) !== -1) {
|
||
|
return;
|
||
|
}
|
||
|
|
||
|
reference.setAttribute('aria-describedby', ids ? ids + "," + popper.id : popper.id);
|
||
|
}
|
||
|
}
|
||
|
};
|
||
|
var EMPTY_MODIFIERS = [];
|
||
|
/**
|
||
|
* Position an element relative some reference element using Popper.js
|
||
|
*
|
||
|
* @param referenceElement
|
||
|
* @param popperElement
|
||
|
* @param {object} options
|
||
|
* @param {object=} options.modifiers Popper.js modifiers
|
||
|
* @param {boolean=} options.enabled toggle the popper functionality on/off
|
||
|
* @param {string=} options.placement The popper element placement relative to the reference element
|
||
|
* @param {string=} options.strategy the positioning strategy
|
||
|
* @param {boolean=} options.eventsEnabled have Popper listen on window resize events to reposition the element
|
||
|
* @param {function=} options.onCreate called when the popper is created
|
||
|
* @param {function=} options.onUpdate called when the popper is updated
|
||
|
*
|
||
|
* @returns {UsePopperState} The popper state
|
||
|
*/
|
||
|
|
||
|
function usePopper(referenceElement, popperElement, _temp) {
|
||
|
var _ref3 = _temp === void 0 ? {} : _temp,
|
||
|
_ref3$enabled = _ref3.enabled,
|
||
|
enabled = _ref3$enabled === void 0 ? true : _ref3$enabled,
|
||
|
_ref3$placement = _ref3.placement,
|
||
|
placement = _ref3$placement === void 0 ? 'bottom' : _ref3$placement,
|
||
|
_ref3$strategy = _ref3.strategy,
|
||
|
strategy = _ref3$strategy === void 0 ? 'absolute' : _ref3$strategy,
|
||
|
_ref3$modifiers = _ref3.modifiers,
|
||
|
modifiers = _ref3$modifiers === void 0 ? EMPTY_MODIFIERS : _ref3$modifiers,
|
||
|
config = _objectWithoutPropertiesLoose(_ref3, ["enabled", "placement", "strategy", "modifiers"]);
|
||
|
|
||
|
var popperInstanceRef = useRef();
|
||
|
var update = useCallback(function () {
|
||
|
var _popperInstanceRef$cu;
|
||
|
|
||
|
(_popperInstanceRef$cu = popperInstanceRef.current) == null ? void 0 : _popperInstanceRef$cu.update();
|
||
|
}, []);
|
||
|
var forceUpdate = useCallback(function () {
|
||
|
var _popperInstanceRef$cu2;
|
||
|
|
||
|
(_popperInstanceRef$cu2 = popperInstanceRef.current) == null ? void 0 : _popperInstanceRef$cu2.forceUpdate();
|
||
|
}, []);
|
||
|
|
||
|
var _useSafeState = useSafeState(useState({
|
||
|
placement: placement,
|
||
|
update: update,
|
||
|
forceUpdate: forceUpdate,
|
||
|
attributes: {},
|
||
|
styles: {
|
||
|
popper: initialPopperStyles(strategy),
|
||
|
arrow: {}
|
||
|
}
|
||
|
})),
|
||
|
popperState = _useSafeState[0],
|
||
|
setState = _useSafeState[1];
|
||
|
|
||
|
var updateModifier = useMemo(function () {
|
||
|
return {
|
||
|
name: 'updateStateModifier',
|
||
|
enabled: true,
|
||
|
phase: 'write',
|
||
|
requires: ['computeStyles'],
|
||
|
fn: function fn(_ref4) {
|
||
|
var state = _ref4.state;
|
||
|
var styles = {};
|
||
|
var attributes = {};
|
||
|
Object.keys(state.elements).forEach(function (element) {
|
||
|
styles[element] = state.styles[element];
|
||
|
attributes[element] = state.attributes[element];
|
||
|
});
|
||
|
setState({
|
||
|
state: state,
|
||
|
styles: styles,
|
||
|
attributes: attributes,
|
||
|
update: update,
|
||
|
forceUpdate: forceUpdate,
|
||
|
placement: state.placement
|
||
|
});
|
||
|
}
|
||
|
};
|
||
|
}, [update, forceUpdate, setState]);
|
||
|
useEffect(function () {
|
||
|
if (!popperInstanceRef.current || !enabled) return;
|
||
|
popperInstanceRef.current.setOptions({
|
||
|
placement: placement,
|
||
|
strategy: strategy,
|
||
|
modifiers: [].concat(modifiers, [updateModifier, disabledApplyStylesModifier])
|
||
|
}); // intentionally NOT re-running on new modifiers
|
||
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||
|
}, [strategy, placement, updateModifier, enabled]);
|
||
|
useEffect(function () {
|
||
|
if (!enabled || referenceElement == null || popperElement == null) {
|
||
|
return undefined;
|
||
|
}
|
||
|
|
||
|
popperInstanceRef.current = createPopper(referenceElement, popperElement, _extends({}, config, {
|
||
|
placement: placement,
|
||
|
strategy: strategy,
|
||
|
modifiers: [].concat(modifiers, [ariaDescribedByModifier, updateModifier])
|
||
|
}));
|
||
|
return function () {
|
||
|
if (popperInstanceRef.current != null) {
|
||
|
popperInstanceRef.current.destroy();
|
||
|
popperInstanceRef.current = undefined;
|
||
|
setState(function (s) {
|
||
|
return _extends({}, s, {
|
||
|
attributes: {},
|
||
|
styles: {
|
||
|
popper: initialPopperStyles(strategy)
|
||
|
}
|
||
|
});
|
||
|
});
|
||
|
}
|
||
|
}; // This is only run once to _create_ the popper
|
||
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||
|
}, [enabled, referenceElement, popperElement]);
|
||
|
return popperState;
|
||
|
}
|
||
|
|
||
|
export default usePopper;
|