@zenkit/typography/esm/list.js

ZenKit components for impliments typography

import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
import * as React from 'react';
import cn from 'classnames';
import { withStyles } from '@zenkit/styles';
import Text from './text';
export const 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'
  }
};

function List(props) {
  const {
    type,
    classes,
    className: classNameProps,
    children
  } = props,
        otherProps = _objectWithoutPropertiesLoose(props, ["type", "classes", "className", "children"]);

  const component = type !== 'ordered' ? 'ul' : 'ol';
  return React.createElement(Text, _extends({
    is: component,
    className: cn(classes.root, {
      [classes[`type_${type}`]]: type
    }, classNameProps)
  }, otherProps), React.Children.map(children, (child, index) => {
    if (!child) {
      return;
    }

    const key = child.key || `list-${index}`;

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

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

List.defaultProps = {
  type: 'unstyled'
};
export default withStyles(styles)(List);