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

A themable React component library.

import _extends from "@babel/runtime/helpers/esm/extends";
import _get from "lodash/get";
import { getElementType, useUnhandledProps, useFluentContext, useStyles, useTelemetry } from '@fluentui/react-bindings';
import * as PropTypes from 'prop-types';
import * as React from 'react';
import { commonPropTypes } from '../../utils';
import { FlexItem } from './FlexItem';
export var flexClassName = 'ui-flex';

/**
 * A Flex is a layout component that arranges group of items aligned towards common direction (either row or column).
 */
export var Flex = /*#__PURE__*/function () {
  var Flex = /*#__PURE__*/React.forwardRef(function (props, ref) {
    var context = useFluentContext();
    var _useTelemetry = useTelemetry(Flex.displayName, context.telemetry),
      setStart = _useTelemetry.setStart,
      setEnd = _useTelemetry.setEnd;
    setStart();
    var children = props.children,
      className = props.className,
      column = props.column,
      debug = props.debug,
      design = props.design,
      fill = props.fill,
      gap = props.gap,
      hAlign = props.hAlign,
      inline = props.inline,
      padding = props.padding,
      space = props.space,
      styles = props.styles,
      variables = props.variables,
      vAlign = props.vAlign,
      wrap = props.wrap;
    var _useStyles = useStyles(Flex.displayName, {
        className: flexClassName,
        mapPropsToStyles: function mapPropsToStyles() {
          return {
            column: column,
            debug: debug,
            fill: fill,
            gap: gap,
            hAlign: hAlign,
            inline: inline,
            padding: padding,
            space: space,
            vAlign: vAlign,
            wrap: wrap
          };
        },
        mapPropsToInlineStyles: function mapPropsToInlineStyles() {
          return {
            className: className,
            design: design,
            styles: styles,
            variables: variables
          };
        },
        rtl: context.rtl
      }),
      classes = _useStyles.classes;
    var ElementType = getElementType(props);
    var unhandledProps = useUnhandledProps(Flex.handledProps, props);
    var content = React.Children.map(children, function (child) {
      var isFlexItemElement = _get(child, 'type.__isFlexItem');
      return isFlexItemElement ? /*#__PURE__*/React.cloneElement(child, {
        flexDirection: column ? 'column' : 'row'
      }) : child;
    });
    var element = /*#__PURE__*/React.createElement(ElementType, _extends({
      className: classes.root
    }, unhandledProps, {
      ref: ref
    }), content);
    setEnd();
    return element;
  });
  Flex.displayName = 'Flex';
  Flex.propTypes = Object.assign({}, commonPropTypes.createCommon({
    accessibility: false,
    content: false
  }), {
    inline: PropTypes.bool,
    column: PropTypes.bool,
    wrap: PropTypes.bool,
    hAlign: PropTypes.oneOf(['start', 'center', 'end', 'stretch']),
    vAlign: PropTypes.oneOf(['start', 'center', 'end', 'stretch']),
    space: PropTypes.oneOf(['around', 'between', 'evenly']),
    gap: PropTypes.oneOf(['gap.smaller', 'gap.small', 'gap.medium', 'gap.large']),
    padding: PropTypes.oneOf(['padding.medium']),
    fill: PropTypes.bool,
    debug: PropTypes.bool
  });
  Flex.handledProps = Object.keys(Flex.propTypes);
  Flex.Item = FlexItem;
  return Flex;
}();
//# sourceMappingURL=Flex.js.map