@talend/react-components/lib/Inject/Inject.component.js

Set of react components.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = require("react");
var _propTypes = _interopRequireDefault(require("prop-types"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
/* eslint-disable @typescript-eslint/ban-ts-comment */
/* eslint-disable @typescript-eslint/no-explicit-any */

/**
 * This is to render an not found component to alert developers
 * @param {object} props container of the error
 */
function NotFoundComponent({
  error
}) {
  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
    className: "alert alert-danger",
    children: error
  });
}
/**
 * This component role is to show the evaluated component or not found component
 * @param {object} props getComponent method to resolve the component given and his props
 */
function Inject({
  getComponent,
  component,
  ...props
}) {
  if (!getComponent || !component) {
    return null;
  }
  try {
    const Component = getComponent(component);
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
      ...props
    });
  } catch (error) {
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(NotFoundComponent, {
      error: error.message
    });
  }
}

/**
 * This function is used to inject an array of components
 * @param {function} getComponent the method used to resolve the component
 * @param {array} array an array of components
 */
Inject.map = function injectMap(getComponent, array, CustomInject = Inject) {
  return array.map((props, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(CustomInject, {
    getComponent: getComponent,
    ...props
  }, index));
};

/**
 * Used to inject components & have them in an object to resolve it in our component
 * @param {function} getComponent the method used to resolve the component
 * @param {object} components an object to represent the components
 * @example
	{
		'header': [{ component: 'MyConnectedHeader', myProps: 'lol' }],
		'aside': [{ component: 'MyConnectedSidePanel', toto: 'mdr' }],
	}
 */
Inject.all = function injectAll(getComponent, components, CustomInject = Inject) {
  return (key, props = {}) => {
    if (!components) {
      return null;
    }
    const component = components[key];
    if (Array.isArray(component)) {
      return Inject.map(getComponent, component, CustomInject);
    } else if (/*#__PURE__*/(0, _react.isValidElement)(component)) {
      return component;
    } else if (typeof component === 'object') {
      return /*#__PURE__*/(0, _jsxRuntime.jsx)(CustomInject, {
        getComponent: getComponent,
        ...props,
        ...component
      });
    }
    return null;
  };
};

/**
 * used to inject a component with componentID & fallback on a component given if not available
 * @param {function} getComponent the method used to resolve the component
 * @param {string|function} componentId the id to fetch with getComponent method or the component to render
 * @param {object} DefaultComponent The component to fallback to
 */
Inject.get = function injectGet(getComponent, componentId, DefaultComponent) {
  if (typeof componentId === 'function') {
    return componentId;
  }
  if (!getComponent || componentId == null) {
    return DefaultComponent;
  }
  try {
    return getComponent(componentId);
  } catch (error) {
    return DefaultComponent;
  }
};

/**
 * Allow to call get on a object configuration
 * @param {function} getComponent the method used to resolve the component
 * @param {object} config the component configurations
 */
Inject.getAll = function injectGetAll(getComponent, config) {
  const components = {};
  Object.keys(config).forEach(key => {
    components[key] = Inject.get(getComponent, key, config[key]);
  });
  return components;
};

/**
 * Allow a props to have multiple shape with a target to be a react valid element.
 * It supports three shapes: string, object, react element
 * @param {function} getComponent
 * @param {object|string|React Element} data
 */
Inject.getReactElement = function getReactElement(getComponent, data, CustomInject = Inject, withKey = false) {
  let key;
  if (Array.isArray(data)) {
    return data.map(info => getReactElement(getComponent, info, CustomInject, true));
  } else if (data === null) {
    return data;
  } else if (typeof data === 'string') {
    const props = {
      getComponent,
      component: data
    };
    if (withKey) {
      key = `${data}#default`;
    }
    return /*#__PURE__*/(0, _react.createElement)(CustomInject, {
      ...props,
      key: key
    });
  } else if (/*#__PURE__*/(0, _react.isValidElement)(data)) {
    return data;
  } else if (typeof data === 'object') {
    const props = {
      getComponent,
      ...data
    };
    if (withKey) {
      key = `${data.component}#${data.componentId || 'default'}`;
    }
    return /*#__PURE__*/(0, _react.createElement)(CustomInject, {
      ...props,
      key: key
    });
  }
  return data; // We do not throw anything, proptypes should do the job
};
// @ts-ignore
Inject.getReactElement.propTypes = _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.shape({
  component: _propTypes.default.string
}), _propTypes.default.element, _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.shape({
  component: _propTypes.default.string
}), _propTypes.default.element]))]);
Inject.displayName = 'Inject';
Inject.NotFound = NotFoundComponent;
var _default = exports.default = Inject;
//# sourceMappingURL=Inject.component.js.map