@fluentui/react-northstar/dist/es/utils/factories.js

A themable React component library.

import _uniq from "lodash/uniq";
import _isArray from "lodash/isArray";
import _isPlainObject from "lodash/isPlainObject";
import _isNil from "lodash/isNil";
import { mergeStyles } from '@fluentui/styles';
import cx from 'classnames';
import * as React from 'react';
import * as ReactIs from 'react-is';
// It's only necessary to map props that don't use 'children' as value ('children' is the default)
var mappedProps = {
  iframe: 'src',
  img: 'src',
  input: 'type'
};

// ============================================================
// Factory Creators
// ============================================================
/**
 * @param config - Options passed to factory
 * @returns A shorthand factory function waiting for `val` and `defaultProps`.
 */
export function createShorthandFactory(_ref) {
  var Component = _ref.Component,
    mappedProp = _ref.mappedProp,
    mappedArrayProp = _ref.mappedArrayProp,
    allowsJSX = _ref.allowsJSX;
  if (!ReactIs.isValidElementType(Component)) {
    throw new Error('createShorthandFactory() Component must be a string or function.');
  }
  return function (value, options) {
    return createShorthandInternal({
      allowsJSX: allowsJSX,
      Component: Component,
      mappedProp: mappedProp,
      mappedArrayProp: mappedArrayProp,
      value: value,
      options: options
    });
  };
}

// ============================================================
// Factories
// ============================================================

export function createShorthandInternal(_ref2) {
  var Component = _ref2.Component,
    mappedProp = _ref2.mappedProp,
    mappedArrayProp = _ref2.mappedArrayProp,
    value = _ref2.value,
    _ref2$options = _ref2.options,
    options = _ref2$options === void 0 ? {} : _ref2$options,
    _ref2$allowsJSX = _ref2.allowsJSX,
    allowsJSX = _ref2$allowsJSX === void 0 ? true : _ref2$allowsJSX;
  if (!ReactIs.isValidElementType(Component)) {
    throw new Error('createShorthand() Component must be a string or function.');
  }

  // short circuit noop values
  var valIsNoop = _isNil(value) || typeof value === 'boolean';
  if (valIsNoop && !options.render) return null;
  var valIsPrimitive = typeof value === 'string' || typeof value === 'number';
  var valIsPropsObject = _isPlainObject(value);
  var valIsArray = _isArray(value);
  var valIsReactElement = /*#__PURE__*/React.isValidElement(value);

  // unhandled type warning
  if (process.env.NODE_ENV !== 'production') {
    var displayName = typeof Component === 'string' ? Component : Component.displayName;
    if (!valIsPrimitive && !valIsPropsObject && !valIsArray && !valIsReactElement && !valIsNoop) {
      /* eslint-disable-next-line no-console */
      console.error(["The shorthand prop for \"" + displayName + "\" component was passed a JSX element but this slot only supports string|number|object|array|ReactElements.", ' Use null|undefined|boolean for none.', " Received: " + value].join(''));
    }
    if (!allowsJSX && valIsReactElement) {
      /* eslint-disable-next-line no-console */
      console.error(["The shorthand prop for \"" + displayName + "\" component was passed a JSX element but this slot only supports string|number|object|array.", ' Use null|undefined|boolean for none.', " Received: " + value].join(''));
    }
  }

  // ----------------------------------------
  // Build up props
  // ----------------------------------------
  var defaultProps = options.defaultProps ? options.defaultProps() || {} : {};

  // User's props
  var usersProps = valIsReactElement && {} || valIsPropsObject && value || {};

  // Override props
  var overrideProps = typeof options.overrideProps === 'function' ? options.overrideProps(Object.assign({}, defaultProps, usersProps)) : options.overrideProps || {};

  // Merge props
  var props = Object.assign({}, defaultProps, usersProps, overrideProps);
  var mappedHTMLProps = mappedProps[overrideProps.as || defaultProps.as];

  // Map prop for primitive value
  if (valIsPrimitive || valIsReactElement) {
    props[mappedHTMLProps || mappedProp || 'children'] = value;
  }

  // Map prop for array value
  if (valIsArray) {
    props[mappedHTMLProps || mappedArrayProp || 'children'] = value;
  }

  // Merge className
  if (defaultProps.className || overrideProps.className || usersProps.className) {
    var mergedClassesNames = cx(defaultProps.className, overrideProps.className, usersProps.className);
    props.className = _uniq(mergedClassesNames.split(' ')).join(' ');
  }

  // Merge style
  if (defaultProps.style || overrideProps.style || usersProps.style) {
    props.style = Object.assign({}, defaultProps.style, usersProps.style, overrideProps.style);
  }

  // Merge styles
  if (defaultProps.styles || overrideProps.styles || usersProps.styles) {
    props.styles = mergeStyles(defaultProps.styles, usersProps.styles, overrideProps.styles);
  }

  // ----------------------------------------
  // Get key
  // ----------------------------------------
  var _options$generateKey = options.generateKey,
    generateKey = _options$generateKey === void 0 ? true : _options$generateKey;

  // Use key or generate key
  if (generateKey && _isNil(props.key)) {
    if (valIsPrimitive) {
      // use string/number shorthand values as the key
      props.key = value;
    }
    if (valIsReactElement) {
      // use the key from React Element
      var elementKey = value.key;
      // <div /> - key is not passed as will be `null`
      // <div key={null} /> - key is passed as `null` and will be stringified
      var isNullKey = elementKey === null;
      if (!isNullKey) {
        props.key = elementKey;
      }
    }
  }

  // Remove the kind prop from the props object
  delete props.kind;

  // ----------------------------------------
  // Create Element
  // ----------------------------------------
  var render = options.render;
  if (render) {
    return render(Component, props);
  }
  if (typeof props.children === 'function') {
    return props.children(Component, Object.assign({}, props, {
      children: undefined
    }));
  }
  if (!allowsJSX && valIsReactElement) {
    return null;
  }

  // Create ReactElements from built up props
  if (valIsPrimitive || valIsPropsObject || valIsArray || valIsReactElement) {
    return /*#__PURE__*/React.createElement(Component, props);
  }
  return null;
}
export function createShorthand(Component, value, options) {
  var _Component$fluentComp;
  var _ref3 = Component.shorthandConfig || ((_Component$fluentComp = Component.fluentComposeConfig) == null ? void 0 : _Component$fluentComp.shorthandConfig) || {},
    _ref3$mappedProp = _ref3.mappedProp,
    mappedProp = _ref3$mappedProp === void 0 ? 'children' : _ref3$mappedProp,
    _ref3$allowsJSX = _ref3.allowsJSX,
    allowsJSX = _ref3$allowsJSX === void 0 ? true : _ref3$allowsJSX,
    mappedArrayProp = _ref3.mappedArrayProp;
  return createShorthandInternal({
    Component: Component,
    mappedProp: mappedProp,
    allowsJSX: allowsJSX,
    mappedArrayProp: mappedArrayProp,
    value: value,
    options: options || {}
  });
}
//# sourceMappingURL=factories.js.map