@brightleaf/elements/lib/columns/columns.js

React UI elements styled with Bulma CSS

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.FullColumn = exports.Column = exports.Columns = void 0;

var _react = _interopRequireDefault(require("react"));

var _classnames = _interopRequireDefault(require("classnames"));

var _propTypes = _interopRequireDefault(require("prop-types"));

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

/*
const o = {
  'is-0': is0,
  'is-1': is1,
  'is-2': is2,
  'is-3': is3,
  'is-4': is4,
  'is-5': is5,
  'is-6': is6,
  'is-7': is7,
  'is-8': is8,
}
*/
var Columns = function Columns(_ref) {
  var children = _ref.children,
      className = _ref.className,
      isMobile = _ref.isMobile,
      isMultiline = _ref.isMultiline,
      isCentered = _ref.isCentered,
      isNarrow = _ref.isNarrow,
      isGapless = _ref.isGapless;
  var classes = {
    'is-mobile': isMobile,
    'is-multiline': isMultiline,
    'is-centered': isCentered,
    'is-narrow': isNarrow,
    'is-gapless': isGapless
  };
  return _react.default.createElement("div", {
    className: (0, _classnames.default)('columns', className, classes)
  }, children);
};

exports.Columns = Columns;
Columns.defaultProps = {
  className: '',
  isMobile: false,
  isMultiline: false,
  isCentered: false,
  isNarrow: false,
  isGapless: false
};

var Column = function Column(_ref2) {
  var children = _ref2.children,
      Col = _ref2.as,
      className = _ref2.className,
      isThreeQuarters = _ref2.isThreeQuarters,
      isTwoThirds = _ref2.isTwoThirds,
      isHalf = _ref2.isHalf,
      isOneThird = _ref2.isOneThird,
      isOneQuarter = _ref2.isOneQuarter,
      isFull = _ref2.isFull,
      isFourFifths = _ref2.isFourFifths,
      isThreeFifths = _ref2.isThreeFifths,
      isTwoFifths = _ref2.isTwoFifths,
      isOneFifth = _ref2.isOneFifth,
      isNarrow = _ref2.isNarrow,
      isOffsetOneQuarter = _ref2.isOffsetOneQuarter,
      isOffsetOneFifth = _ref2.isOffsetOneFifth,
      isOffsetHalf = _ref2.isOffsetHalf,
      isOffsetOneThird = _ref2.isOffsetOneThird,
      isHidden = _ref2.isHidden,
      offset = _ref2.offset,
      size = _ref2.size,
      is = _ref2.is;
  var classes = {
    'is-four-fifths': isFourFifths,
    'is-three-fifths': isThreeFifths,
    'is-two-fifths': isTwoFifths,
    'is-one-fifth': isOneFifth,
    'is-three-quarters': isThreeQuarters,
    'is-two-thirds': isTwoThirds,
    'is-half': isHalf,
    'is-one-third': isOneThird,
    'is-one-quarter': isOneQuarter,
    'is-full': isFull,
    'is-narrow': isNarrow,
    'is-offset-one-quarter': isOffsetOneQuarter,
    'is-offset-one-fifth': isOffsetOneFifth,
    'is-offset-half': isOffsetHalf,
    'is-offset-one-third': isOffsetOneThird,
    'is-hidden': isHidden
  };

  if (size) {
    classes["is-".concat(size)] = true;
  }

  if (is) {
    classes["is-".concat(is)] = true;
  }

  if (offset) {
    classes["is-offset-".concat(offset)] = true;
  }

  if (size && is) {
    console.warn('Do not use both size and is');
  }

  return _react.default.createElement(Col, {
    className: (0, _classnames.default)('column', className, classes)
  }, children);
};

exports.Column = Column;
Columns.propTypes = {
  as: _propTypes.default.node,
  size: _propTypes.default.oneOf(['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']),
  is: _propTypes.default.oneOf(['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']),
  offset: _propTypes.default.oneOf(['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11'])
};
Column.defaultProps = {
  isFourFifths: false,
  isThreeFifths: false,
  isTwoFifths: false,
  isOneFifth: false,
  isThreeQuarters: false,
  isTwoThirds: false,
  isHalf: false,
  isOneThird: false,
  isOneQuarter: false,
  isFull: false,
  isNarrow: false,
  as: 'div'
};

var FullColumn = function FullColumn(_ref3) {
  var children = _ref3.children,
      className = _ref3.className;
  return _react.default.createElement(Columns, null, _react.default.createElement(Column, {
    isFull: true,
    className: className
  }, children));
};

exports.FullColumn = FullColumn;