@eureca/eureca-ui/src/components/Flex/index.js

UI component library of Eureca's user and admin apps

import React from 'react';
import PropTypes from 'prop-types';
import { decamelize } from 'humps';

import { Box } from '@material-ui/core';

const Flex = ({
  style = {},
  onClick = () => {},
  flexGrow = 'initial',
  children,
  forwardedRef,
  className,
  ...props
}) => {
  const {
    alignCenter,
    alignFlexStart,
    alignFlexEnd,
    directionColumn,
    directionRow,
    directionRowReverse,
    justifyCenter,
    justifyFlexStart,
    justifyFlexEnd,
    justifySpaceAround,
    justifySpaceBetween,
    justifyContentCenter,
    wrapWrap,
    wrapWrapReverse,
    cursorPointer,
    error,
    ...rest
  } = props;

  const getFlexRule = (rule, defaultValue) => {
    const flexRule = Object.keys(props).find(key => key.startsWith(rule));

    if (!flexRule || !props[flexRule]) {
      return defaultValue;
    }

    // skips the first element (e.g. wrap in wrapWrapReverse)
    const [, ...transformedRule] = decamelize(flexRule, {
      separator: '-',
    }).split('-');

    return transformedRule.join('-');
  };

  return (
    <Box
      display="flex"
      justifyContent={getFlexRule('justify', 'flex-start')}
      alignItems={getFlexRule('align', 'stretch')}
      flexDirection={getFlexRule('direction', 'column')}
      flexWrap={getFlexRule('wrap', 'nowrap')}
      style={{ cursor: getFlexRule('cursor', 'inherit'), flexGrow, ...style }}
      onClick={onClick}
      ref={forwardedRef}
      className={className}
      {...rest}
    >
      {children}
    </Box>
  );
};

// by @tcp: We don't need to list them below, but it's a good indicative of
//          how to use the flex component.
Flex.propTypes = {
  style: PropTypes.object,
  onClick: PropTypes.func,
  forwardedRef: PropTypes.elementType,
  alignCenter: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
  alignFlexEnd: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
  directionColumn: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
  directionRow: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
  justifyCenter: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
  justifyFlexEnd: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
  justifySpaceAround: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
  justifySpaceBetween: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
  wrapWrap: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
  wrapWrapReverse: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
  flexGrow: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
  cursorPointer: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
  className: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.string]),
  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
};

const forwardedFlex = React.forwardRef((props, ref) => <Flex {...props} forwardedRef={ref} />);

export { forwardedFlex as Flex };