ice.fo.utils/LayoutUtils.js

/**
 * Some props name is not native CSS name e.g. horiztonalAlign, verticalAlign, ...
 *
 * This will convert to CSS Styles
 *
 * ICE Core:
 *
 * foCommonLayout
 * foFlexLayout
 * foFloatingLayout
 * foImageLayout
 */
import _get from 'lodash/get'
import _pickBy from 'lodash/pickBy'

function getValue (o, defaultValue = '', path = '') {
  if (path) {
    const paths = path.split('.')
    return _get(o, paths.concat('value')) || _get(o, paths) || defaultValue
  } else {
    return (o && o.value !== undefined ? o.value : o) || defaultValue
  }
}

export function buildInlineStyles (...args) {
  const data = Object.assign({}, ...args)
  const result = {}

  for (const k in data) {
    const value = getValue(data[k], null)

    switch (k) {
      case 'flexHorizontalAlign':
        {
          const direction = getValue(data, 'column', 'flexDirection')

          if (direction == 'row') {
            result.justifyContent = getFlexHorizontalAlign(value)
          } else {
            result.alignItems = getFlexHorizontalAlign(value)
          }
        }
        break
      case 'flexVerticalAlign':
        {
          const direction = getValue(data, 'column', 'flexDirection')
          if (direction == 'row') {
            result.alignItems = getFlexVerticalAlign(value)
          } else {
            result.justifyContent = getFlexVerticalAlign(value)
          }
        }
        break
      case 'horizontalPosition':
        {
          const position = getValue(data, '', 'position')

          if (position == 'fixed') {
            const { left, transform } = getPositionFixedHorizontal(value)
            result.left = left
            result.transform = `${(result.transform || '')} ${transform}`
          }
        }
        break
      case 'verticalPosition':
        {
          const position = getValue(data, '', 'position')

          if (position == 'fixed') {
            const { top, transform } = getPositionFixedVertical(value)
            result.top = top
            result.transform = `${(result.transform || '')} ${transform}`
          }
        }
        break
      case 'blockHorizontalAlign':
        {
          const styles = getBlockHorizontalAlign(value)
          Object.assign(result, styles)
        }
        break
      default:
        result[k] = value
    }
  }

  return _pickBy(result, i => i)
}

function getFlexHorizontalAlign (align) {
  switch (align) {
    case 'left':
      return 'flex-start'
    case 'center':
      return 'center'
    case 'right':
      return 'flex-end'
  }
}

function getFlexVerticalAlign (align) {
  switch (align) {
    case 'top':
      return 'flex-start'
    case 'middle':
      return 'center'
    case 'bottom':
      return 'flex-end'
  }
}

function getPositionFixedHorizontal (value) {
  switch (value) {
    case 'left':
      return { left: '0', transform: '' }
    case 'center':
      return { left: '50%', transform: 'translateX(-50%)' }
    case 'right':
      return { left: '100%', translate: 'translateX(-100%)' }
  }
}

function getPositionFixedVertical (value) {
  switch (value) {
    case 'top':
      return { top: '0', transform: '' }
    case 'middle':
      return { top: '50%', transform: 'translateY(-50%)' }
    case 'bottom':
      return { top: '100%', transform: 'translateY(-100%)' }
  }
}

function getBlockHorizontalAlign (value) {
  switch (value) {
    case 'left':
      return { display: 'table', marginRight: 'auto' }
    case 'center':
      return { display: 'table', marginLeft: 'auto', marginRight: 'auto' }
    case 'right':
      return { display: 'table', marginLeft: 'auto' }
    case 'inline':
      return { display: 'inline-block', verticalAlign: 'middle' }
  }
}