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

A themable React component library.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.flexClassName = exports.Flex = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _get2 = _interopRequireDefault(require("lodash/get"));
var _reactBindings = require("@fluentui/react-bindings");
var PropTypes = _interopRequireWildcard(require("prop-types"));
var React = _interopRequireWildcard(require("react"));
var _utils = require("../../utils");
var _FlexItem = require("./FlexItem");
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
var flexClassName = 'ui-flex';

/**
 * A Flex is a layout component that arranges group of items aligned towards common direction (either row or column).
 */
exports.flexClassName = flexClassName;
var Flex = /*#__PURE__*/React.forwardRef(function (props, ref) {
  var context = (0, _reactBindings.useFluentContext)();
  var _useTelemetry = (0, _reactBindings.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 = (0, _reactBindings.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 = (0, _reactBindings.getElementType)(props);
  var unhandledProps = (0, _reactBindings.useUnhandledProps)(Flex.handledProps, props);
  var content = React.Children.map(children, function (child) {
    var isFlexItemElement = (0, _get2.default)(child, 'type.__isFlexItem');
    return isFlexItemElement ? /*#__PURE__*/React.cloneElement(child, {
      flexDirection: column ? 'column' : 'row'
    }) : child;
  });
  var element = /*#__PURE__*/React.createElement(ElementType, (0, _extends2.default)({
    className: classes.root
  }, unhandledProps, {
    ref: ref
  }), content);
  setEnd();
  return element;
});
exports.Flex = Flex;
Flex.displayName = 'Flex';
Flex.propTypes = Object.assign({}, _utils.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.FlexItem;
//# sourceMappingURL=Flex.js.map