@wordpress/components/build/ui/utils/create-component.js

UI components for WordPress.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.createComponent = void 0;

var _element = require("@wordpress/element");

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _context = require("../context");

var _view = require("../view");

/**
 * External dependencies
 */
// eslint-disable-next-line no-restricted-imports

/**
 * Internal dependencies
 */

/**
 * Factory that creates a React component from a hook
 *
 * @param options
 * @param options.as The element to render for the component.
 * @param options.name The name of the component.
 * @param options.useHook The hook to use for the component
 * @param options.memo Whether to memo the component.
 * @return A polymorphic component that uses the hook to process props.
 */
const createComponent = ({
  as,
  name,
  useHook,
  memo = false
}) => {
  function Component(props, forwardedRef) {
    const otherProps = useHook(props);
    return (0, _element.createElement)(_view.View, (0, _extends2.default)({
      as: as || 'div'
    }, otherProps, {
      ref: forwardedRef
    }));
  }

  Component.displayName = name;
  return (0, _context.contextConnect)(Component, name, {
    memo
  });
};

exports.createComponent = createComponent;
//# sourceMappingURL=create-component.js.map