sgpl/src/components/card-grid.js

/** @jsx h */
import { h } from 'preact'
import { connect } from 'redux-bundler-preact'
import getComponent from '../utils/get-component'
import { Crate } from './crate'
const Wrapper = getComponent('relative border-box')

const defaultMargin = 2
const defaultWidth = 18
const defaultHeight = 18

const toPixels = amount => amount * 16

const getStylesForIndex = (
  numColumns,
  index,
  width = defaultWidth,
  height = defaultHeight,
  margin = defaultMargin
) => {
  const column = index % numColumns
  const row = Math.floor(index / numColumns)
  const isSingle = numColumns === 1
  const totalHeight = height + margin
  const totalWidth = width + margin
  return {
    position: 'absolute',
    top: 0,
    left: 0,
    width: isSingle ? '100%' : `${width}rem`,
    height: `${height}rem`,
    transform: `translate(${column * totalWidth}rem, ${row * totalHeight}rem)`
  }
}

const getContainerStyles = (
  numColumns,
  numItems,
  width = defaultWidth,
  height = defaultHeight,
  margin = defaultMargin
) => {
  const singleColumn = numColumns === 1
  return {
    width: singleColumn
      ? '100%'
      : `${numColumns * (width + margin) - margin}rem`,
    height: `${Math.ceil(numItems / numColumns) * (width + margin) - margin}rem`
  }
}

const getTotalWidth = (count, widthInPixels, marginInPixels) =>
  widthInPixels * count + marginInPixels * (count - 1)

const getColumnInfo = (
  viewportWidth,
  widthToIgnore = 0,
  width = defaultWidth,
  margin = defaultMargin,
  maxColumns = 3
) => {
  const marginInPixels = toPixels(margin)
  const widthInPixels = toPixels(width)
  const totalPixelWidthToIgnore = marginInPixels * 2 + toPixels(widthToIgnore)
  const maxAvailableWidth = viewportWidth - totalPixelWidthToIgnore

  let count = 1
  let numColumns = count

  while (count <= maxColumns) {
    const totalWidth = getTotalWidth(count, widthInPixels, marginInPixels)
    if (totalWidth > maxAvailableWidth) {
      break
    } else {
      numColumns = count
    }
    count++
  }

  return {
    numColumns,
    internalContainerWidth: getTotalWidth(
      numColumns,
      widthInPixels,
      marginInPixels
    )
  }
}

export default connect('selectViewportWidth', props => {
  const {
    children,
    className,
    height,
    introComponent,
    margin,
    viewportWidth,
    width,
    widthToIgnore
  } = props

  const { numColumns, internalContainerWidth } = getColumnInfo(
    viewportWidth,
    widthToIgnore,
    width,
    height,
    margin
  )

  const externalContainerWidth =
    internalContainerWidth + toPixels((margin || defaultMargin) * 2)

  const newChildren = children.map((comp, index) => (
    <Crate
      className='tr-tr'
      style={getStylesForIndex(numColumns, index, width, height, margin)}
    >
      {comp}
    </Crate>
  ))

  const newProps = Object.assign({}, props, {
    introComponent: null,
    children: null,
    width: null,
    height: null,
    margin: null,
    viewportWidth: null,
    numColumns: null,
    widthToIgnore: null,
    className: null
  })

  const containerStyles = getContainerStyles(
    numColumns,
    newChildren.length,
    width,
    height,
    margin
  )

  const isSingle = numColumns === 1

  const outsideMargin = toPixels(margin || defaultMargin)

  return (
    <div
      style={{
        padding: outsideMargin + 'px',
        width: isSingle ? '100%' : externalContainerWidth + 'px'
      }}
      className={`center ${className || ''}`}
    >
      {introComponent}
      <Wrapper
        {...newProps}
        style={{ width: containerStyles.width, height: containerStyles.height }}
      >
        {newChildren}
      </Wrapper>
    </div>
  )
})