@fluentui/react-northstar/dist/es/components/Flex/FlexItem.js

A themable React component library.

import _isNil from "lodash/isNil";
import { useStyles, useTelemetry, useFluentContext } from '@fluentui/react-bindings';
import { mergeStyles } from '@fluentui/styles';
import cx from 'classnames';
import * as PropTypes from 'prop-types';
import * as React from 'react';
import { commonPropTypes } from '../../utils';
var applyStyles = function applyStyles(element, styles, classes) {
  if (!styles) {
    return element;
  }

  // if element is DOM element
  if (typeof element.type === 'string') {
    return /*#__PURE__*/React.cloneElement(element, {
      className: cx(element.props.className, classes.root)
    });
  }

  // assuming element is Fluent UI element
  return /*#__PURE__*/React.cloneElement(element, {
    styles: mergeStyles(styles.root || {}, element.props.styles)
  });
};
export var flexItemClassName = 'ui-flex__item';

/**
 * A FlexItem is a layout component that customizes alignment of Flex child.
 */
export var FlexItem = /*#__PURE__*/function () {
  var FlexItem = function FlexItem(props) {
    var context = useFluentContext();
    var _useTelemetry = useTelemetry(FlexItem.displayName, context.telemetry),
      setStart = _useTelemetry.setStart,
      setEnd = _useTelemetry.setEnd;
    setStart();
    var align = props.align,
      children = props.children,
      className = props.className,
      design = props.design,
      grow = props.grow,
      flexDirection = props.flexDirection,
      push = props.push,
      shrink = props.shrink,
      size = props.size,
      styles = props.styles,
      variables = props.variables;
    var _useStyles = useStyles(FlexItem.displayName, {
        className: flexItemClassName,
        mapPropsToStyles: function mapPropsToStyles() {
          return {
            align: align,
            grow: grow,
            flexDirection: flexDirection,
            push: push,
            shrink: shrink,
            size: size
          };
        },
        mapPropsToInlineStyles: function mapPropsToInlineStyles() {
          return {
            className: className,
            design: design,
            styles: styles,
            variables: variables
          };
        },
        rtl: context.rtl
      }),
      classes = _useStyles.classes,
      resolvedStyles = _useStyles.styles;
    var element;

    // pass calculated bits using Render Props pattern
    if (typeof children === 'function') {
      element = children({
        styles: resolvedStyles.root,
        classes: classes.root
      });
    } else if (_isNil(children)) {
      element = null;
    } else {
      element = applyStyles(React.Children.only(children), resolvedStyles, classes);
    }
    setEnd();
    return element;
  };
  FlexItem.displayName = 'FlexItem';
  FlexItem.propTypes = Object.assign({}, commonPropTypes.createCommon({
    children: false,
    accessibility: false,
    content: false
  }), {
    children: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
    align: PropTypes.oneOf(['auto', 'start', 'end', 'center', 'baseline', 'stretch']),
    size: PropTypes.oneOfType([PropTypes.oneOf(['size.half', 'size.quarter', 'size.small', 'size.medium', 'size.large']), PropTypes.string]),
    shrink: PropTypes.oneOfType([PropTypes.bool, PropTypes.number]),
    push: PropTypes.bool,
    /**
     * Will be automatically set by parent Flex component
     */
    flexDirection: PropTypes.oneOf(['row', 'column'])
  });

  // Boolean flag for now, Symbol-based approach may be used instead.
  // However, there are  concerns related to browser compatibility if Symbols will be used.
  // Completely alternative approach - check class name of React element (and generalize this logic).
  // Boolean flag for now, Symbol-based approach may be used instead.
  // However, there are  concerns related to browser compatibility if Symbols will be used.
  // Completely alternative approach - check class name of React element (and generalize this logic).
  FlexItem.__isFlexItem = true;
  return FlexItem;
}();

// Boolean flag for now, Symbol-based approach may be used instead.
// However, there are  concerns related to browser compatibility if Symbols will be used.
// Completely alternative approach - check class name of React element (and generalize this logic).
//# sourceMappingURL=FlexItem.js.map