@geezee/react-ui/esm/divider/divider.js

Modern and minimalist React UI library.

import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import _JSXStyle from "styled-jsx/style";
import React, { useMemo } from 'react';
import useTheme from '../styles/use-theme';
import withDefaults from '../utils/with-defaults';
import { getMargin } from '../spacer/spacer';
var defaultProps = {
  x: 0,
  y: 2,
  volume: 1,
  align: 'center',
  color: 'default',
  className: ''
};

var getColor = function getColor(type, palette) {
  var colors = {
    "default": palette.border,
    lite: palette.accents_1,
    success: palette.successLight,
    warning: palette.warningLight,
    error: palette.errorLight,
    secondary: palette.secondary,
    dark: palette.foreground
  };
  return colors[type];
};

var Divider = function Divider(_ref) {
  var volume = _ref.volume,
      dividerColor = _ref.color,
      x = _ref.x,
      y = _ref.y,
      align = _ref.align,
      children = _ref.children,
      className = _ref.className,
      props = _objectWithoutProperties(_ref, ["volume", "color", "x", "y", "align", "children", "className"]);

  var theme = useTheme();
  var color = useMemo(function () {
    return getColor(dividerColor, theme.palette);
  }, [dividerColor, theme.palette]);
  var alignClassName = useMemo(function () {
    if (!align || align === 'center') return '';
    if (align === 'left' || align === 'start') return 'start';
    return 'end';
  }, [align]);
  var textColor = dividerColor === 'default' ? theme.palette.foreground : color;
  var top = y ? getMargin(y / 2) : 0;
  var left = x ? getMargin(x / 2) : 0;
  return /*#__PURE__*/React.createElement("div", _extends({
    role: "separator"
  }, props, {
    className: _JSXStyle.dynamic([["499005081", [volume, color, top, left, theme.layout.gap, theme.palette.background, textColor]]]) + " " + (props && props.className != null && props.className || "divider ".concat(className))
  }), children && /*#__PURE__*/React.createElement("span", {
    className: _JSXStyle.dynamic([["499005081", [volume, color, top, left, theme.layout.gap, theme.palette.background, textColor]]]) + " " + "text ".concat(alignClassName)
  }, children), /*#__PURE__*/React.createElement(_JSXStyle, {
    id: "499005081",
    dynamic: [volume, color, top, left, theme.layout.gap, theme.palette.background, textColor]
  }, ".divider.__jsx-style-dynamic-selector{width:auto;max-width:100%;height:calc(".concat(volume, " * 1px);background-color:").concat(color, ";margin:").concat(top, " ").concat(left, ";position:relative;}.text.__jsx-style-dynamic-selector{position:absolute;left:50%;top:50%;min-height:100%;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);padding:0 ").concat(theme.layout.gap, ";font-size:1rem;font-weight:bold;text-transform:capitalize;background-color:").concat(theme.palette.background, ";color:").concat(textColor, ";z-index:10;}.text.start.__jsx-style-dynamic-selector{-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);left:7%;}.text.end.__jsx-style-dynamic-selector{-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);left:auto;right:7%;}")));
};

var MemoDivider = React.memo(Divider);
export default withDefaults(MemoDivider, defaultProps);