react-hold/src/holders/Square.js

Hold the empty presentational components in react.js

import React from 'react'
import PropTypes from 'prop-types'
import shapes from '../shapes'
import { CENTER } from '../align'
import { isNull } from '../utils'

const Square = ({ color, width, height, children, side, align, fillerStyle }) => {
  if (isNull(side)) {
    if (!isNull(width) && !isNull(height)) {
      side = width > height ? height : width
    } else if (!isNull(width)) {
      side = width
    } else if (!isNull(height)) {
      side = height
    }
  }
  const lineHeight = (typeof side === 'string' && side.trim()) ?
    side : typeof side === 'number' ?
    `${side}px` : null

  return (
    <div style={{ textAlign: align }}>
      <div
        style={{
          background: color,
          ...fillerStyle,
          display: 'inline-block',
          textAlign: 'center',
          width: side,
          height: side,
          lineHeight,
        }}
      >
        { children }
      </div>
    </div>
  )
}

Square.propTypes = {
  ...shapes,
  side: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
  align: PropTypes.string,
}

Square.defaultProps = {
  width: null,
  height: null,
  side: null,
  align: CENTER,
  fillerStyle: null,
}

export default Square