@music-loopy/loops/lib/components/Divider/index.js

A React component library for Music Loopy Applications and websites

"use strict";

exports.__esModule = true;
exports["default"] = void 0;
var _styledComponents = _interopRequireDefault(require("styled-components"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _react = _interopRequireDefault(require("react"));
var _excluded = ["variant", "center"];
var _templateObject, _templateObject2, _templateObject3;
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
function _taggedTemplateLiteralLoose(e, t) { return t || (t = e.slice(0)), e.raw = t, e; }
var StyledDivider = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  width: 40%;\n  height: 4px;\n  background-color: ", ";\n  opacity: 0.5;\n"])), function (props) {
  return props.theme.colors[props.variant].color;
});
var Container = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n"])));
var CenteredText = _styledComponents["default"].p(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  font-size: 0.8rem;\n  font-weight: 500;\n  color: ", ";\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin: 0 10px;\n  text-transform: uppercase;\n  font-weight: 500;\n"])), function (props) {
  return props.theme.colors[props.variant || 'dark'].color;
});
var Divider = function Divider(_ref) {
  var _ref$variant = _ref.variant,
    variant = _ref$variant === void 0 ? 'dark' : _ref$variant,
    center = _ref.center,
    props = _objectWithoutPropertiesLoose(_ref, _excluded);
  return /*#__PURE__*/_react["default"].createElement(Container, props, /*#__PURE__*/_react["default"].createElement(StyledDivider, {
    variant: variant
  }), center && /*#__PURE__*/_react["default"].createElement(CenteredText, {
    variant: center.variant
  }, center.text), /*#__PURE__*/_react["default"].createElement(StyledDivider, {
    variant: variant
  }));
};
Divider.propTypes = process.env.NODE_ENV !== "production" ? {
  variant: _propTypes["default"].oneOf(['primary', 'dark', 'light', 'secondary', 'danger', 'success', 'warning']),
  center: _propTypes["default"].shape({
    variant: _propTypes["default"].oneOf(['primary', 'dark', 'light', 'secondary', 'danger', 'success', 'warning']),
    text: _propTypes["default"].string
  })
} : {};
Divider.defaultProps = {
  variant: 'dark'
};
var _default = exports["default"] = Divider;
module.exports = exports.default;