@appbuckets/react-ui-core/esm/utils/createShorthandFactory.js

Core utilities built for AppBuckets React UI Framework

import { __assign } from 'tslib';
import * as React from 'react';
import clsx from 'clsx';
import kindOf from 'kind-of';

/* --------
 * Main Create Shorthand Function
 * -------- */
/**
 * A more robust React.createElement.
 * It can create elements from primitive values.
 *
 * @param Component Component to Create
 * @param mapValueToProps Function to transform props
 * @param getKey Function to get key from props
 * @param value Value to use
 * @param options Options to Apply
 */
function createShorthand(Component, mapValueToProps, getKey, value, options) {
  /** If no value, return an empty component */
  if (value == null || typeof value === 'boolean') {
    return null;
  }
  // Check value type
  var valueIsString = kindOf(value) === 'string';
  var valueIsNumber = kindOf(value) === 'number';
  var valueIsReactElement = React.isValidElement(value);
  var valueIsPropsObject = kindOf(value) === 'object';
  var valueIsPrimitiveValue =
    valueIsString || valueIsNumber || kindOf(value) === 'array';
  // Check value validity
  if (!valueIsReactElement && !valueIsPrimitiveValue && !valueIsPropsObject) {
    if (process.env.NODE_ENV !== 'production') {
      // eslint-disable-next-line no-console
      console.error(
        [
          'Shorthand value must be a string|number|array|object|ReactElement|function.',
          'Use null|undefined|boolean for none.',
          'Received '.concat(kindOf(value)),
        ].join(' ')
      );
    }
    return null;
  }
  /** Build Props */
  var defaultProps = options.defaultProps;
  // Get user props
  var userProps =
    (valueIsReactElement && value.props) ||
    (valueIsPropsObject && value) ||
    (valueIsPrimitiveValue && mapValueToProps(value)) ||
    {};
  // Override Props
  var overrideProps = options.overrideProps;
  if (typeof overrideProps === 'function') {
    overrideProps = overrideProps(
      __assign(__assign({}, defaultProps), userProps)
    );
  }
  // Merge Props together
  var props = __assign(
    __assign(__assign({}, defaultProps), userProps),
    overrideProps
  );
  // Merge className
  if (
    (defaultProps === null || defaultProps === void 0
      ? void 0
      : defaultProps.className) ||
    (overrideProps === null || overrideProps === void 0
      ? void 0
      : overrideProps.className) ||
    userProps.className
  ) {
    var mergedClassNames = clsx(
      defaultProps === null || defaultProps === void 0
        ? void 0
        : defaultProps.className,
      userProps.className,
      overrideProps === null || overrideProps === void 0
        ? void 0
        : overrideProps.className
    );
    props.className = Array.from(
      new Set(mergedClassNames.split(' ')).values()
    ).join(' ');
  }
  // Merge Style
  if (
    (defaultProps === null || defaultProps === void 0
      ? void 0
      : defaultProps.style) ||
    (overrideProps === null || overrideProps === void 0
      ? void 0
      : overrideProps.style) ||
    userProps.style
  ) {
    props.style = __assign(
      __assign(
        __assign(
          {},
          defaultProps === null || defaultProps === void 0
            ? void 0
            : defaultProps.style
        ),
        userProps.style
      ),
      overrideProps === null || overrideProps === void 0
        ? void 0
        : overrideProps.style
    );
  }
  // Create the Key
  if (props.key == null) {
    var autoGenerateKey = options.autoGenerateKey,
      childKey = options.childKey;
    if (typeof getKey === 'function') {
      props.key = getKey(props);
    } else if (childKey != null) {
      // Apply and Consume the Child Key props
      props.key = typeof childKey === 'function' ? childKey(props) : childKey;
    } else if (autoGenerateKey && (valueIsString || valueIsNumber)) {
      props.key = value;
    }
  }
  // Create the element
  if (valueIsReactElement) {
    return React.cloneElement(value, props);
  }
  // Render as Component
  if (valueIsPrimitiveValue || valueIsPropsObject) {
    return React.createElement(Component, __assign({}, props));
  }
  // Render as Function
  if (typeof value === 'function') {
    return value(Component, props, props.children);
  }
  // Fallback to null
  return null;
}
/* --------
 * Create a function to create shorthand factory
 * -------- */
/**
 * Get a callback function to be used to easily generate
 * a new component based on shorthand value
 *
 * @param Component The Component to Generate
 * @param mapValueToProps The function to map value to props
 * @param getKey A function that will be used to get key
 */
function createShorthandFactory(Component, mapValueToProps, getKey) {
  return function createFactoryElement(value, options) {
    return createShorthand(Component, mapValueToProps, getKey, value, options);
  };
}
var createHTMLLabel = createShorthandFactory('label', function (val) {
  return {
    children: val,
  };
});
var createHTMLImage = createShorthandFactory('img', function (val) {
  return {
    src: val,
  };
});
var createHTMLInput = createShorthandFactory('input', function (val) {
  return {
    type: val,
  };
});
var createHTMLParagraph = createShorthandFactory('p', function (val) {
  return {
    children: val,
  };
});

export {
  createHTMLImage,
  createHTMLInput,
  createHTMLLabel,
  createHTMLParagraph,
  createShorthand,
  createShorthandFactory,
};