You can not select more than 25 topics
			Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
		
		
		
		
		
			
		
			
				
					
					
						
							102 lines
						
					
					
						
							3.3 KiB
						
					
					
				
			
		
		
	
	
							102 lines
						
					
					
						
							3.3 KiB
						
					
					
				import * as React from 'react';
 | 
						|
import * as ReactDOM from 'react-dom';
 | 
						|
import { createPopper as defaultCreatePopper } from '@popperjs/core';
 | 
						|
import isEqual from 'react-fast-compare';
 | 
						|
import { fromEntries, useIsomorphicLayoutEffect } from './utils';
 | 
						|
var EMPTY_MODIFIERS = [];
 | 
						|
export var usePopper = function usePopper(referenceElement, popperElement, options) {
 | 
						|
  if (options === void 0) {
 | 
						|
    options = {};
 | 
						|
  }
 | 
						|
 | 
						|
  var prevOptions = React.useRef(null);
 | 
						|
  var optionsWithDefaults = {
 | 
						|
    onFirstUpdate: options.onFirstUpdate,
 | 
						|
    placement: options.placement || 'bottom',
 | 
						|
    strategy: options.strategy || 'absolute',
 | 
						|
    modifiers: options.modifiers || EMPTY_MODIFIERS
 | 
						|
  };
 | 
						|
 | 
						|
  var _React$useState = React.useState({
 | 
						|
    styles: {
 | 
						|
      popper: {
 | 
						|
        position: optionsWithDefaults.strategy,
 | 
						|
        left: '0',
 | 
						|
        top: '0'
 | 
						|
      },
 | 
						|
      arrow: {
 | 
						|
        position: 'absolute'
 | 
						|
      }
 | 
						|
    },
 | 
						|
    attributes: {}
 | 
						|
  }),
 | 
						|
      state = _React$useState[0],
 | 
						|
      setState = _React$useState[1];
 | 
						|
 | 
						|
  var updateStateModifier = React.useMemo(function () {
 | 
						|
    return {
 | 
						|
      name: 'updateState',
 | 
						|
      enabled: true,
 | 
						|
      phase: 'write',
 | 
						|
      fn: function fn(_ref) {
 | 
						|
        var state = _ref.state;
 | 
						|
        var elements = Object.keys(state.elements);
 | 
						|
        ReactDOM.flushSync(function () {
 | 
						|
          setState({
 | 
						|
            styles: fromEntries(elements.map(function (element) {
 | 
						|
              return [element, state.styles[element] || {}];
 | 
						|
            })),
 | 
						|
            attributes: fromEntries(elements.map(function (element) {
 | 
						|
              return [element, state.attributes[element]];
 | 
						|
            }))
 | 
						|
          });
 | 
						|
        });
 | 
						|
      },
 | 
						|
      requires: ['computeStyles']
 | 
						|
    };
 | 
						|
  }, []);
 | 
						|
  var popperOptions = React.useMemo(function () {
 | 
						|
    var newOptions = {
 | 
						|
      onFirstUpdate: optionsWithDefaults.onFirstUpdate,
 | 
						|
      placement: optionsWithDefaults.placement,
 | 
						|
      strategy: optionsWithDefaults.strategy,
 | 
						|
      modifiers: [].concat(optionsWithDefaults.modifiers, [updateStateModifier, {
 | 
						|
        name: 'applyStyles',
 | 
						|
        enabled: false
 | 
						|
      }])
 | 
						|
    };
 | 
						|
 | 
						|
    if (isEqual(prevOptions.current, newOptions)) {
 | 
						|
      return prevOptions.current || newOptions;
 | 
						|
    } else {
 | 
						|
      prevOptions.current = newOptions;
 | 
						|
      return newOptions;
 | 
						|
    }
 | 
						|
  }, [optionsWithDefaults.onFirstUpdate, optionsWithDefaults.placement, optionsWithDefaults.strategy, optionsWithDefaults.modifiers, updateStateModifier]);
 | 
						|
  var popperInstanceRef = React.useRef();
 | 
						|
  useIsomorphicLayoutEffect(function () {
 | 
						|
    if (popperInstanceRef.current) {
 | 
						|
      popperInstanceRef.current.setOptions(popperOptions);
 | 
						|
    }
 | 
						|
  }, [popperOptions]);
 | 
						|
  useIsomorphicLayoutEffect(function () {
 | 
						|
    if (referenceElement == null || popperElement == null) {
 | 
						|
      return;
 | 
						|
    }
 | 
						|
 | 
						|
    var createPopper = options.createPopper || defaultCreatePopper;
 | 
						|
    var popperInstance = createPopper(referenceElement, popperElement, popperOptions);
 | 
						|
    popperInstanceRef.current = popperInstance;
 | 
						|
    return function () {
 | 
						|
      popperInstance.destroy();
 | 
						|
      popperInstanceRef.current = null;
 | 
						|
    };
 | 
						|
  }, [referenceElement, popperElement, options.createPopper]);
 | 
						|
  return {
 | 
						|
    state: popperInstanceRef.current ? popperInstanceRef.current.state : null,
 | 
						|
    styles: state.styles,
 | 
						|
    attributes: state.attributes,
 | 
						|
    update: popperInstanceRef.current ? popperInstanceRef.current.update : null,
 | 
						|
    forceUpdate: popperInstanceRef.current ? popperInstanceRef.current.forceUpdate : null
 | 
						|
  };
 | 
						|
}; |