@instructure/ui-grid/lib/GridCol/index.js

A Grid component.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;

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

var _react = require("react");

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

var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");

var _emotion = require("@instructure/emotion");

var _styles = _interopRequireDefault(require("./styles"));

var _theme = _interopRequireDefault(require("./theme"));

var _dec, _class, _class2, _temp;

// TODO: get numcols from theme config
const COL_WIDTHS = ['auto', 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
/**
---
parent: Grid
id: Grid.Col
---
**/

let GridCol = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = class GridCol extends _react.Component {
  /* eslint-disable react/require-default-props */

  /* eslint-enable react/require-default-props */
  componentDidMount() {
    this.props.makeStyles();
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
    this.props.makeStyles();
  }

  render() {
    const _this$props = this.props,
          children = _this$props.children,
          styles = _this$props.styles;
    const props = (0, _omitProps.omitProps)(this.props, GridCol.propTypes);
    return (0, _emotion.jsx)("span", Object.assign({}, props, {
      ref: this.props.elementRef,
      css: styles.gridCol
    }), children);
  }

}, _class2.displayName = "GridCol", _class2.propTypes = {
  // eslint-disable-next-line react/require-default-props
  makeStyles: _propTypes.default.func,
  // eslint-disable-next-line react/require-default-props
  styles: _propTypes.default.object,
  children: _propTypes.default.node,
  colSpacing: _propTypes.default.oneOf(['none', 'small', 'medium', 'large']),
  rowSpacing: _propTypes.default.oneOf(['none', 'small', 'medium', 'large']),
  textAlign: _propTypes.default.oneOf(['start', 'end', 'center', 'inherit']),
  hAlign: _propTypes.default.oneOf(['start', 'center', 'end', 'space-around', 'space-between']),
  vAlign: _propTypes.default.oneOf(['top', 'middle', 'bottom']),
  startAt: _propTypes.default.oneOf(['small', 'medium', 'large', 'x-large', null]),
  visualDebug: _propTypes.default.bool,
  width: _propTypes.default.oneOfType([_propTypes.default.oneOf(COL_WIDTHS), _propTypes.default.shape({
    small: _propTypes.default.oneOf(COL_WIDTHS),
    medium: _propTypes.default.oneOf(COL_WIDTHS),
    large: _propTypes.default.oneOf(COL_WIDTHS),
    xLarge: _propTypes.default.oneOf(COL_WIDTHS)
  })]),
  offset: _propTypes.default.oneOfType([_propTypes.default.oneOf(COL_WIDTHS), _propTypes.default.shape({
    small: _propTypes.default.oneOf(COL_WIDTHS),
    medium: _propTypes.default.oneOf(COL_WIDTHS),
    large: _propTypes.default.oneOf(COL_WIDTHS),
    xLarge: _propTypes.default.oneOf(COL_WIDTHS)
  })]),
  isLastRow: _propTypes.default.bool,
  isLastCol: _propTypes.default.bool,
  elementRef: _propTypes.default.func
}, _class2.defaultProps = {
  textAlign: 'inherit',
  children: null,
  isLastCol: false,
  isLastRow: false,
  elementRef: void 0
}, _temp)) || _class);
exports.GridCol = GridCol;
var _default = GridCol;
exports.default = _default;