@geezee/react-ui/esm/row/row.js

Modern and minimalist React UI library.

import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import _JSXStyle from "styled-jsx/style";
import React, { useMemo } from 'react';
import withDefaults from '../utils/with-defaults';
import useTheme from '../styles/use-theme';
var defaultProps = {
  gap: 0,
  justify: 'start',
  align: 'top',
  component: 'div',
  className: ''
};

var getFlexAlignment = function getFlexAlignment(justify, align) {
  var flexJustifyMap = {
    end: 'flex-end',
    center: 'center',
    'space-around': 'space-around',
    'space-between': 'space-between'
  };
  var flexAlignMap = {
    middle: 'center',
    bottom: 'flex-end'
  };
  return {
    justifyValue: flexJustifyMap[justify] || 'normal',
    alignValue: flexAlignMap[align] || 'normal'
  };
};

var Container = function Container(_ref) {
  var children = _ref.children,
      component = _ref.component,
      gap = _ref.gap,
      justify = _ref.justify,
      align = _ref.align,
      className = _ref.className,
      props = _objectWithoutProperties(_ref, ["children", "component", "gap", "justify", "align", "className"]);

  var Component = component;
  var theme = useTheme();

  var _useMemo = useMemo(function () {
    return getFlexAlignment(justify, align);
  }, [justify, align]),
      justifyValue = _useMemo.justifyValue,
      alignValue = _useMemo.alignValue;

  return /*#__PURE__*/React.createElement(Component, _extends({}, props, {
    className: _JSXStyle.dynamic([["1276699340", [gap, theme.layout.gapHalf, gap, theme.layout.gapHalf, gap, theme.layout.gap, justifyValue, alignValue]]]) + " " + (props && props.className != null && props.className || "row ".concat(className))
  }), children, /*#__PURE__*/React.createElement(_JSXStyle, {
    id: "1276699340",
    dynamic: [gap, theme.layout.gapHalf, gap, theme.layout.gapHalf, gap, theme.layout.gap, justifyValue, alignValue]
  }, ".row.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;position:relative;box-sizing:border-box;margin-left:calc(".concat(gap, " * ").concat(theme.layout.gapHalf, ");margin-right:calc(").concat(gap, " * ").concat(theme.layout.gapHalf, ");--row-gap:calc(").concat(gap, " * ").concat(theme.layout.gap, ");-webkit-box-pack:").concat(justifyValue, ";-webkit-justify-content:").concat(justifyValue, ";-ms-flex-pack:").concat(justifyValue, ";justify-content:").concat(justifyValue, ";-webkit-align-items:").concat(alignValue, ";-webkit-box-align:").concat(alignValue, ";-ms-flex-align:").concat(alignValue, ";align-items:").concat(alignValue, ";}")));
};

var MemoContainer = React.memo(Container);
export default withDefaults(MemoContainer, defaultProps);