react-inky/lib/components/Column.js

React components for Inky

"use strict";

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

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

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

var _containsRow = _interopRequireDefault(require("../util/containsRow"));

var _getAttrs = _interopRequireDefault(require("../util/getAttrs"));

var _getColumnClasses = _interopRequireDefault(require("../util/getColumnClasses"));

var _containerContext = _interopRequireDefault(require("../util/containerContext"));

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

/**
 * Grid column. Place sections of email content inside these.
 * @todo Remove expander if housing a nested grid
 *
 * @param {Object} props - Component props.
 * @returns {Object} Column HTML.
 *
 * @example
 * <Row>
 *   <Column small="12" large="4">
 *     Left column
 *   </Column>
 *   <Column small="12" large="8">
 *     Right column
 *   </Column>
 * </Row>
 */
function Column(props) {
  const hasRow = (0, _containsRow.default)(props.children);
  return _react.default.createElement(_containerContext.default.Consumer, null, ({
    columnCount
  }) => _react.default.createElement("th", (0, _getAttrs.default)(props, ['children', 'expander', 'first', 'last'], (0, _getColumnClasses.default)(props, columnCount)), _react.default.createElement("table", null, _react.default.createElement("tr", null, _react.default.createElement("th", null, props.children), !hasRow && props.expander ? _react.default.createElement("th", {
    className: "expander"
  }) : null))));
}
/**
 * Props for `<Column />`.
 * @type Object
 * @type {String} small - Width on small screens.
 * @type {String} large - Width on large screens.
 * @prop {Boolean} [expander=true] Include expander `<th />` in column.
 * @prop {Boolean} [first=false] Column is the first child.
 * @prop {Boolean} [last=false] Column is the last child.
 * @prop [children] - Child elements.
 */


Column.propTypes = {
  small: _propTypes.default.string,
  large: _propTypes.default.string,
  expander: _propTypes.default.bool,
  first: _propTypes.default.bool,
  last: _propTypes.default.bool,
  children: _propTypes.default.node
};
/**
 * Default props for `<Column />`.
 * @type Object
 */

Column.defaultProps = {
  expander: true,
  first: false,
  last: false,
  children: null,
  small: null,
  large: null
};