apphouse/dist/utils/styles/getStylesForPosition.ts

Component library for React that uses observable state management and theme-able components.

import { CSSProperties } from 'glamor';

export enum PositionOptionsType {
  bottom = 'bottom',
  top = 'top',
  left = 'left',
  right = 'right',
  center = 'center',
  'center-top' = 'center-top',
  'center-bottom' = 'center-bottom',
  'center-left' = 'center-left',
  'center-right' = 'center-right',
  'top-left' = 'top-left',
  'top-right' = 'top-right',
  'bottom-left' = 'bottom-left',
  'bottom-right' = 'bottom-right'
}

export const getStylesForPosition = (
  position?: keyof typeof PositionOptionsType
): CSSProperties => {
  const commonStyles = {
    display: 'flex',
    width: '100%',
    height: '100%',
    boxSizing: 'border-box'
  };
  switch (position) {
    case PositionOptionsType.bottom:
      return {
        ...commonStyles,
        justifyContent: 'center',
        alignItems: 'flex-end'
      };
    case PositionOptionsType.top:
      return {
        ...commonStyles,
        justifyContent: 'center',
        alignItems: 'flex-start'
      };
    case PositionOptionsType.left:
      return {
        ...commonStyles,
        justifyContent: 'flex-start',
        alignItems: 'center'
      };
    case PositionOptionsType.right:
      return {
        ...commonStyles,
        justifyContent: 'flex-end',
        alignItems: 'center'
      };
    case PositionOptionsType.center:
      return {
        ...commonStyles,
        justifyContent: 'center',
        alignItems: 'center'
      };
    case 'center-top':
      return {
        ...commonStyles,
        justifyContent: 'center',
        alignItems: 'flex-start'
      };
    case 'center-bottom':
      return {
        ...commonStyles,
        justifyContent: 'center',
        boxSizing: 'border-box'
      };
    case 'center-left':
      return {
        ...commonStyles,
        justifyContent: 'flex-start',
        alignItems: 'center'
      };
    case 'center-right':
      return {
        ...commonStyles,
        justifyContent: 'flex-end',
        alignItems: 'center'
      };
    case 'top-left':
      return {
        ...commonStyles,
        justifyContent: 'flex-start',
        alignItems: 'flex-start'
      };
    case 'top-right':
      return {
        ...commonStyles,
        justifyContent: 'flex-end',
        alignItems: 'flex-start'
      };
    case 'bottom-left':
      return {
        ...commonStyles,
        justifyContent: 'flex-start',
        alignItems: 'flex-end'
      };
    case 'bottom-right':
      return {
        ...commonStyles,
        justifyContent: 'flex-end',

        alignItems: 'flex-end'
      };

    default:
      return {
        ...commonStyles,
        justifyContent: 'center',
        alignItems: 'center'
      };
  }
};

export const getSelfStylesForPosition = (
  position?: keyof typeof PositionOptionsType
): CSSProperties => {
  switch (position) {
    case 'bottom':
      return {
        alignSelf: 'flex-end'
      };
    case 'top':
      return {
        alignSelf: 'flex-start'
      };
    case 'left':
      return {
        alignSelf: 'flex-start'
      };
    case 'right':
      return {
        alignSelf: 'flex-end'
      };
    case 'center':
      return {
        alignSelf: 'center'
      };
    case 'center-top':
      return {
        alignSelf: 'flex-start'
      };
    case 'center-bottom':
      return {
        alignSelf: 'flex-end'
      };
    case 'center-left':
      return {
        alignSelf: 'flex-start'
      };
    case 'center-right':
      return {
        alignSelf: 'flex-end'
      };
    default:
      return {
        alignSelf: 'center'
      };
  }
};