@zenkit/typography/esm/code.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';
import Pre from './pre';
export const styles = {
  root: {
    margin: 0,
    borderRadius: '3px',
    fontSize: '85%',
    padding: '.2em .4em'
  },
  block: {
    display: 'block',
    lineHeight: '1.45'
  }
};

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

  let children;

  if (typeof childrenProps === 'string') {
    if (block) {
      let minPadding;
      const lines = childrenProps.replace('\t', '  ').split('\n');
      lines.filter(line => line.search(/\S|$/) !== line.length).forEach(line => {
        minPadding = !minPadding || minPadding > line.search(/\S|$/) ? line.search(/\S|$/) : minPadding;
      });
      children = lines.map(line => line.search(/\S|$/) === line.length ? '' : line.slice(minPadding)).join('\n').trim();
    } else {
      children = childrenProps.trim();
    }
  } else {
    children = childrenProps;
  }

  const content = React.createElement(Text, _extends({
    is: "code",
    background: "#f6f8fa",
    family: "monospace",
    className: cn(classes.root, {
      [classes.block]: block
    }, classNameProps)
  }, otherProps), children);

  if (block) {
    return React.createElement(Pre, null, content);
  }

  return content;
}

export default withStyles(styles)(Code);