@e-group/material-lab/esm/Divider/Divider.js

EGroup Team Lab - Incubator for EGroup Team experimental React components.

import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import clsx from 'clsx';

const styles = theme => ({
  root: {
    borderTop: "1px solid ".concat(theme.palette.divider)
  },
  vertical: {
    position: 'relative',
    top: '-0.06em',
    display: 'inline-block',
    height: '0.9em',
    margin: '0 8px',
    verticalAlign: 'middle',
    borderTop: 0,
    borderLeft: "1px solid ".concat(theme.palette.divider),
    '&$dashed': {
      borderWidth: '0 0 0 1px'
    }
  },
  horizontal: {
    display: 'flex',
    clear: 'both',
    width: '100%',
    minWidth: '100%',
    // Fix https://github.com/ant-design/ant-design/issues/10914
    margin: '24px 0',
    '&$withText': {
      display: 'flex',
      margin: ' 16px 0',
      whiteSpace: 'nowrap',
      textAlign: 'center',
      borderTop: 0,
      '&::before, &::after': {
        position: 'relative',
        top: '50%',
        width: '50%',
        borderTop: "1px solid ".concat(theme.palette.divider),
        transform: 'translateY(50%)',
        content: '""'
      },
      '&$dashed': {
        borderTop: 0,
        '&::before, &::after': {
          borderStyle: 'dashed none none'
        }
      },
      '&$withTextLeft': {
        '&::before': {
          top: '50%',
          width: '5%'
        },
        '&::after': {
          top: '50%',
          width: '95%'
        }
      },
      '&$withTextRight': {
        '&::before': {
          top: '50%',
          width: '95%'
        },
        '&::after': {
          top: '50%',
          width: '5%'
        }
      }
    }
  },
  withText: props => _objectSpread(_objectSpread({}, theme.typography[props.headingVariant]), {}, {
    lineHeight: 1
  }),
  withTextLeft: {},
  withTextRight: {},
  innerText: {
    display: 'inline-block',
    padding: theme.spacing(0, 1)
  },
  dashed: {
    background: 'none',
    borderColor: theme.palette.divider,
    borderStyle: 'dashed',
    borderWidth: '1px 0 0'
  },
  plain: {
    '&$withText': _objectSpread(_objectSpread({}, theme.typography.body1), {}, {
      lineHeight: 1
    })
  }
});
/**
 * Re implement Ant Design Divider component with react-material coding style.
 * https://github.com/ant-design/ant-design/blob/master/components/divider/index.tsx
 * @param {*} props
 */


const Divider = props => {
  const classes = props.classes,
        className = props.className,
        children = props.children,
        type = props.type,
        orientation = props.orientation,
        dashed = props.dashed,
        plain = props.plain,
        headingVariant = props.headingVariant,
        other = _objectWithoutProperties(props, ["classes", "className", "children", "type", "orientation", "dashed", "plain", "headingVariant"]);

  const hasChildren = !!children;
  const orientationPrefix = orientation.length > 0 ? "".concat(orientation.charAt(0).toUpperCase()).concat(orientation.slice(1)) : orientation;
  return /*#__PURE__*/React.createElement("div", _extends({
    className: clsx(classes.root, classes[type], {
      [classes.withText]: hasChildren,
      [classes["withText".concat(orientationPrefix)]]: hasChildren,
      [classes.dashed]: !!dashed,
      [classes.plain]: !!plain
    }, className)
  }, other, {
    role: "separator"
  }), children && /*#__PURE__*/React.createElement("span", {
    className: classes.innerText
  }, children));
};

Divider.propTypes = {
  /**
   * Override or extend the styles applied to the component.
   * See [CSS API](#css) below for more details.
   */
  classes: PropTypes.object.isRequired,

  /**
   * @ignore
   */
  className: PropTypes.string,

  /**
   * The content of the component.
   */
  children: PropTypes.node,

  /**
   * direction type of divider
   */
  type: PropTypes.oneOf(['horizontal', 'vertical']),

  /**
   * divider text show as plain style
   */
  plain: PropTypes.bool,

  /**
   * whether line is dashed
   */
  dashed: PropTypes.bool,

  /**
   * position of title inside divider
   */
  orientation: PropTypes.oneOf(['left', 'right', 'center']),

  /**
   * Applies the heading typography styles.
   */
  headingVariant: PropTypes.oneOf(['h1', 'h2', 'h3', 'h4', 'h5', 'h6'])
};
Divider.defaultProps = {
  type: 'horizontal',
  plain: true,
  dashed: false,
  orientation: 'center',
  headingVariant: 'h6'
};
export default withStyles(styles, {
  name: 'EgDivider'
})(Divider);