react-inky/lib/components/Spacer.js

React components for Inky

"use strict";

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

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

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

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

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

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

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

const createSpacer = (props, size, state = false) => _react.default.createElement(_containerContext.default.Consumer, null, ({
  strictMode
}) => _react.default.createElement("table", (0, _getAttrs.default)(props, ['size', 'sizeSm', 'sizeLg', 'children'], (0, _classnames.default)('spacer', state && `${state}-for-large`)), _react.default.createElement("tbody", null, _react.default.createElement("tr", null, _react.default.createElement("td", {
  height: strictMode ? `${size}px` : size,
  style: {
    fontSize: `${size}px`,
    lineHeight: `${size}px`
  }
}, "\xA0")))));
/**
 * Spacer component to create vertical space between elements.
 *
 * @param {Object} props - Component props.
 * @returns {Object} Spacer HTML.
 *
 * @example
 * <Button href="example.com/signup.html">Sign Up</Button>
 * <Spacer size="10" />
 * <Button href="example.com/learnmore.html">Learn More</Button>
 */


function Spacer(props) {
  if (!props.sizeSm && !props.sizeLg) {
    return createSpacer(props, props.size);
  }

  return _react.default.createElement(_react.default.Fragment, null, props.sizeSm && createSpacer(props, props.sizeSm, 'hide'), props.sizeLg && createSpacer(props, props.sizeLg, 'show'));
}
/**
 * Prop types for `<Spacer />`.
 * @type Object
 * @prop {Number} size - Height of spacer in pixels. Using this prop _only_ will create a spacer that displays on all screen sizes.
 * @prop {Number} sizeSm - Height of spacer in pixels. Using this prop creates a spacer that appears only on small screens.
 * @prop {Number} sizeLg - Height of spacer in pixels. Using this prop creates a spacer that appears only on small screens.
 */


Spacer.propTypes = {
  size: _propTypes.default.number,
  sizeSm: _propTypes.default.number,
  sizeLg: _propTypes.default.number
};
/**
 * Default props for `<Spacer />`.
 * @type Object
 */

Spacer.defaultProps = {
  size: 16,
  sizeSm: null,
  sizeLg: null
};