react-uikit-grid/lib/grid.js

React uikit grid component fror fully responsive, fluid and nestable grid layouts

'use strict';

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

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _reactUikitBase = require('react-uikit-base');

var _reactUikitBase2 = _interopRequireDefault(_reactUikitBase);

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

var Grid = function Grid(props) {
  // CSS classes
  var cssClassNames = _reactUikitBase2.default.helpers.cleanClasses(['uk-grid', props.classes, props.divider ? 'uk-grid-divider' : null, props.gutter ? 'uk-grid-' + props.gutter : null, props.large ? 'uk-grid-width-large-' + props.large : null, props.match ? 'uk-grid-match' : null, props.medium ? 'uk-grid-width-medium-' + props.medium : null, props.small ? 'uk-grid-width-small-' + props.small : null, props.widths ? 'uk-grid-width-' + props.widths : null, props.xlarge ? 'uk-grid-width-xlarge-' + props.xlarge : null, props.className]);

  // Remove non valid html attributes
  var ignoreProps = ['children', 'classes', 'divider', 'gutter', 'indent', 'kitid', 'large', 'match', 'medium', 'small', 'type', 'widths', 'xlarge'];

  var cleanProps = _reactUikitBase2.default.helpers.cleanProps(ignoreProps)(props);

  // Elements
  var events = _reactUikitBase2.default.events(props);

  var type = {
    block: _react2.default.createElement(
      'div',
      _extends({}, cleanProps, events, {
        style: props.indent ? { marginLeft: '0px' } : null,
        className: cssClassNames,
        'data-kitid': props.kitid
      }),
      props.children
    ),

    list: _react2.default.createElement(
      'ul',
      _extends({}, cleanProps, _reactUikitBase2.default.events(props), {
        className: cssClassNames,
        'data-kitid': props.kitid
      }),
      props.children
    )
  };

  // Return Component
  return type[props.type] || type['block'];
};

Grid.propTypes = {
  children: _react2.default.PropTypes.any,
  className: _react2.default.PropTypes.string,
  classes: _react2.default.PropTypes.array,
  divider: _react2.default.PropTypes.bool,
  gutter: _react2.default.PropTypes.oneOf(['small', 'medium', 'collapse']),
  indent: _react2.default.PropTypes.bool,
  kitid: _react2.default.PropTypes.string,
  large: _react2.default.PropTypes.oneOf(_reactUikitBase2.default.helpers.colSpan),
  match: _react2.default.PropTypes.bool,
  medium: _react2.default.PropTypes.oneOf(_reactUikitBase2.default.helpers.colSpan),
  small: _react2.default.PropTypes.oneOf(_reactUikitBase2.default.helpers.colSpan),
  type: _react2.default.PropTypes.oneOf(['block', 'list']),
  widths: _react2.default.PropTypes.oneOf(_reactUikitBase2.default.helpers.colSpan),
  xlarge: _react2.default.PropTypes.oneOf(_reactUikitBase2.default.helpers.colSpan)
};

exports.default = _reactUikitBase2.default.base(Grid);