@zenkit/typography/list.js

ZenKit components for impliments typography

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

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

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

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));

var React = _interopRequireWildcard(require("react"));

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

var _styles = require("@zenkit/styles");

var _text = _interopRequireDefault(require("./text"));

var styles = {
  root: {
    margin: '0 0 1rem',
    padding: 0,
    '& > li > ol, & > li > ul': {
      paddingLeft: '3ch',
      margin: '.5rem 0'
    }
  },
  type_unstyled: {
    padding: 0,
    listStyle: 'none'
  },
  type_inline: {
    padding: 0,
    listStyle: 'none',
    '& > li': {
      display: 'inline-block',
      '&:not(:last-child)': {
        marginRight: '1ch'
      }
    }
  },
  type_ordered: {
    paddingLeft: '3ch'
  },
  type_unordered: {
    paddingLeft: '3ch'
  }
};
exports.styles = styles;

function List(props) {
  var type = props.type,
      classes = props.classes,
      classNameProps = props.className,
      children = props.children,
      otherProps = (0, _objectWithoutProperties2.default)(props, ["type", "classes", "className", "children"]);
  var component = type !== 'ordered' ? 'ul' : 'ol';
  return React.createElement(_text.default, (0, _extends2.default)({
    is: component,
    className: (0, _classnames.default)(classes.root, (0, _defineProperty2.default)({}, classes["type_".concat(type)], type), classNameProps)
  }, otherProps), React.Children.map(children, function (child, index) {
    if (!child) {
      return;
    }

    var key = child.key || "list-".concat(index);

    if (child.type !== 'li') {
      return React.createElement("li", {
        key: key
      }, child);
    }

    return React.cloneElement(child, {
      key: key
    });
  }));
}

List.defaultProps = {
  type: 'unstyled'
};

var _default = (0, _styles.withStyles)(styles)(List);

exports.default = _default;