@gechiui/components/build-module/slot-fill/fill.js

UI components for GeChiUI.

import _extends from "@babel/runtime/helpers/esm/extends";
import { createElement } from "@gechiui/element";
// @ts-nocheck

/**
 * External dependencies
 */
import { isFunction } from 'lodash';
/**
 * GeChiUI dependencies
 */

import { createPortal, useLayoutEffect, useRef } from '@gechiui/element';
/**
 * Internal dependencies
 */

import SlotFillContext from './context';
import useSlot from './use-slot';

function FillComponent(_ref) {
  let {
    name,
    children,
    registerFill,
    unregisterFill
  } = _ref;
  const slot = useSlot(name);
  const ref = useRef({
    name,
    children
  });
  useLayoutEffect(() => {
    registerFill(name, ref.current);
    return () => unregisterFill(name, ref.current);
  }, []);
  useLayoutEffect(() => {
    ref.current.children = children;

    if (slot) {
      slot.forceUpdate();
    }
  }, [children]);
  useLayoutEffect(() => {
    if (name === ref.current.name) {
      // ignore initial effect
      return;
    }

    unregisterFill(ref.current.name, ref.current);
    ref.current.name = name;
    registerFill(name, ref.current);
  }, [name]);

  if (!slot || !slot.node) {
    return null;
  } // If a function is passed as a child, provide it with the fillProps.


  if (isFunction(children)) {
    children = children(slot.props.fillProps);
  }

  return createPortal(children, slot.node);
}

const Fill = props => createElement(SlotFillContext.Consumer, null, _ref2 => {
  let {
    registerFill,
    unregisterFill
  } = _ref2;
  return createElement(FillComponent, _extends({}, props, {
    registerFill: registerFill,
    unregisterFill: unregisterFill
  }));
});

export default Fill;
//# sourceMappingURL=fill.js.map