@enact/ui/FloatingLayer/useFloatingLayerDecorator.js

A collection of simplified unstyled cross-platform UI components for Enact

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = exports.FloatingLayerContext = void 0;
exports.useFloatingLayerDecorator = useFloatingLayerDecorator;
var _useClass = _interopRequireDefault(require("@enact/core/useClass"));
var _react = require("react");
var _FloatingLayerContainer = _interopRequireDefault(require("./FloatingLayerContainer"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
var FloatingLayerContext = exports.FloatingLayerContext = /*#__PURE__*/(0, _react.createContext)();

/**
 * Configuration for `useFloatingLayerDecorator`
 *
 * @typedef {Object} useFloatingLayerDecoratorConfig
 * @memberof ui/FloatingLayerDecorator
 * @property {Function} [floatLayerId] Floating layer id
 * @private
 */

/**
 * Object returned by `useFloatingLayerDecorator`
 *
 * @typedef {Object} useFloatingLayerDecoratorInterface
 * @memberof ui/FloatingLayerDecorator
 * @property {Function} provideFloatingLayer Provide the wrapper DOM elements
 * @private
 */

/**
 * Close all floating layers registered in the same id
 *
 * @param {useFloatingLayerDecoratorConfig} config Configuration options
 * @returns {useFloatingLayerDecoratorInterface}
 * @private
 */
function useFloatingLayerDecorator() {
  var config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
  var className = config.className,
    _config$floatLayerId = config.floatLayerId,
    floatLayerId = _config$floatLayerId === void 0 ? 'floatLayer' : _config$floatLayerId;
  var floating = (0, _useClass["default"])(_FloatingLayerContainer["default"], {
    floatLayerId: floatLayerId
  });
  (0, _react.useEffect)(function () {
    floating.load();
  }, []); // eslint-disable-line react-hooks/exhaustive-deps

  var provideFloatingLayer = (0, _react.useCallback)(function (children) {
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerContext, {
      value: floating.registry.register,
      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
        className: className,
        children: [children, /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
          id: floatLayerId,
          ref: floating.setFloatingLayer
        }, "floatLayer")]
      })
    });
  }, [className, floating, floatLayerId]);
  return {
    provideFloatingLayer: provideFloatingLayer
  };
}
var _default = exports["default"] = useFloatingLayerDecorator;