@multiplay/ui/dist/atoms/grid/column/index.js

UI kit for Unity and Multiplay applications

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.calculateSize = calculateSize;

var _styledComponents = require('styled-components');

var _styledComponents2 = _interopRequireDefault(_styledComponents);

var _propTypes = require('prop-types');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function calculateSize(size, columns) {
  if (!size) return '';
  return '\n    width: ' + size / columns * 100 + '%;\n    flex-basis: ' + size / columns * 100 + '%;\n    max-width: ' + size / columns * 100 + '%;\n  ';
}

var Column = _styledComponents2.default.div.withConfig({
  displayName: 'column__Column',
  componentId: 'wfmwtp-0'
})(['display:flex;width:100%;flex-direction:', ';flex-grow:', ';flex-shrink:', ';flex-basis:', ';align-items:', ';justify-content:', ';padding:', ';', ' @media (min-width:480px){', ';}@media (min-width:620px){', '}@media (min-width:767px){', '}@media (min-width:860px){', '}@media (min-width:1000px){', '}@media (min-width:1200px){', '}'], function (props) {
  return props.flexDirection;
}, function (props) {
  return props.flexGrow;
}, function (props) {
  return props.flexShrink;
}, function (props) {
  return props.flexBasis;
}, function (props) {
  return props.alignItems;
}, function (props) {
  return props.justifyContent;
}, function (props) {
  return props.padding;
}, function (props) {
  return calculateSize(props.default, props.columns);
}, function (props) {
  return calculateSize(props.phone, props.columns);
}, function (props) {
  return '' + calculateSize(props.small, props.columns);
}, function (props) {
  return '' + calculateSize(props.tablet, props.columns);
}, function (props) {
  return '' + calculateSize(props.medium, props.columns);
}, function (props) {
  return '' + calculateSize(props.large, props.columns);
}, function (props) {
  return '' + calculateSize(props.xlarge, props.columns);
});

Column.defaultProps = {
  flexGrow: '1',
  flexShrink: '0',
  flexBasis: '0%',
  flexDirection: 'column',
  alignItems: 'flex-start',
  justifyContent: 'flex-start',
  padding: '10px',
  columns: 12,
  default: 12,
  phone: null,
  small: null,
  tablet: null,
  medium: null,
  large: null,
  xlarge: null
};

Column.propTypes = {
  flexGrow: _propTypes.PropTypes.string,
  flexShrink: _propTypes.PropTypes.string,
  flexBasis: _propTypes.PropTypes.string,
  flexDirection: _propTypes.PropTypes.oneOf(['row', 'row-reverse', 'column', 'column-reverse']),
  alignItems: _propTypes.PropTypes.oneOf(['flex-start', 'center', 'flex-end']),
  justifyContent: _propTypes.PropTypes.oneOf(['space-between', 'center', 'flex-start', 'flex-end']),
  padding: _propTypes.PropTypes.string,
  columns: _propTypes.PropTypes.number,
  default: _propTypes.PropTypes.number,
  large: _propTypes.PropTypes.number,
  medium: _propTypes.PropTypes.number,
  tablet: _propTypes.PropTypes.number,
  phone: _propTypes.PropTypes.number,
  small: _propTypes.PropTypes.number
};

exports.default = Column;