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

A themable React component library.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.flexItemClassName = exports.FlexItem = void 0;
var _isNil2 = _interopRequireDefault(require("lodash/isNil"));
var _reactBindings = require("@fluentui/react-bindings");
var _styles = require("@fluentui/styles");
var _classnames = _interopRequireDefault(require("classnames"));
var PropTypes = _interopRequireWildcard(require("prop-types"));
var React = _interopRequireWildcard(require("react"));
var _utils = require("../../utils");
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 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: (0, _classnames.default)(element.props.className, classes.root)
    });
  }

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

/**
 * A FlexItem is a layout component that customizes alignment of Flex child.
 */
exports.flexItemClassName = flexItemClassName;
var FlexItem = function FlexItem(props) {
  var context = (0, _reactBindings.useFluentContext)();
  var _useTelemetry = (0, _reactBindings.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 = (0, _reactBindings.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 ((0, _isNil2.default)(children)) {
    element = null;
  } else {
    element = applyStyles(React.Children.only(children), resolvedStyles, classes);
  }
  setEnd();
  return element;
};
exports.FlexItem = FlexItem;
FlexItem.displayName = 'FlexItem';
FlexItem.propTypes = Object.assign({}, _utils.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).
FlexItem.__isFlexItem = true;
//# sourceMappingURL=FlexItem.js.map