@appbuckets/react-ui-core/utils/ElementType.js

Core utilities built for AppBuckets React UI Framework

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var React = require('react');

function _interopNamespace(e) {
  if (e && e.__esModule) return e;
  var n = Object.create(null);
  if (e) {
    Object.keys(e).forEach(function (k) {
      if (k !== 'default') {
        var d = Object.getOwnPropertyDescriptor(e, k);
        Object.defineProperty(
          n,
          k,
          d.get
            ? d
            : {
                enumerable: true,
                get: function () {
                  return e[k];
                },
              }
        );
      }
    });
  }
  n['default'] = e;
  return Object.freeze(n);
}

var React__namespace = /*#__PURE__*/ _interopNamespace(React);

/**
 * Compute the React Element Type used to render a Component.
 *
 * First look to get the right type is checking props or default props
 * searching for `as` key.
 *
 * If no `as` key exists, function will use the `getDefault` function
 * to compute the Element Type.
 *
 * getElementType will fallback to `div` element.
 *
 * @param Component A React Component Type
 * @param userDefinedProps The Element props defined when using a Component
 * @param themedProps AppBuckets UI will use themed variable, userDefinedProps will be extended with theme defined
 * @param getDefault A function that must return an Element Type
 */
function getElementType(Component, userDefinedProps, themedProps, getDefault) {
  // Get Component defaultProps
  var defaultProps = Component.defaultProps;
  // Return user defined ElementType
  if (
    userDefinedProps.as &&
    userDefinedProps.as !==
      (defaultProps === null || defaultProps === void 0
        ? void 0
        : defaultProps.as)
  ) {
    return userDefinedProps.as;
  }
  // Use the getDefault function to calculate the element
  if (typeof getDefault === 'function') {
    var elementType = getDefault(
      themedProps !== null && themedProps !== void 0
        ? themedProps
        : userDefinedProps
    );
    if (elementType) {
      return elementType;
    }
  }
  // If props include href property, return an anchor element
  if (userDefinedProps.href) {
    return 'a';
  }
  // Return the defaultProps, or fallback to div element
  return (
    (defaultProps === null || defaultProps === void 0
      ? void 0
      : defaultProps.as) ||
    (themedProps === null || themedProps === void 0
      ? void 0
      : themedProps.as) ||
    'div'
  );
}
/**
 * Hook version of getElementType, return a memoized
 * variable with component
 *
 * Compute the React Element Type used to render a Component.
 *
 * First look to get the right type is checking props or default props
 * searching for `as` key.
 *
 * If no `as` key exists, function will use the `getDefault` function
 * to compute the Element Type.
 *
 * getElementType will fallback to `div` element.
 *
 * @param Component A React Component Type
 * @param userDefinedProps The Element props defined when using a Component
 * @param themedProps AppBuckets UI will use themed variable, userDefinedProps will be extended with theme defined
 * @param getDefault A function that must return an Element Type
 */
function useElementType(Component, userDefinedProps, themedProps, getDefault) {
  /** Deconstruct data */
  var userDefinedAs = userDefinedProps.as,
    userDefinedHref = userDefinedProps.href;
  var _a = themedProps || { href: undefined },
    defaultDefinedAs = _a.as,
    defaultDefinedHref = _a.href;
  var defaultAsFromComponent = (Component.defaultProps || { as: undefined }).as;
  return React__namespace.useMemo(
    function () {
      return getElementType(
        Component,
        userDefinedProps,
        themedProps,
        getDefault
      );
    },
    // eslint-disable-next-line
    [
      defaultAsFromComponent,
      userDefinedAs,
      userDefinedHref,
      defaultDefinedAs,
      defaultDefinedHref,
      getDefault,
    ]
  );
}

exports.getElementType = getElementType;
exports.useElementType = useElementType;