@geezee/react-ui/esm/display/display.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 withDefaults from '../utils/with-defaults';
import useTheme from '../styles/use-theme';
var defaultProps = {
  caption: '',
  shadow: false,
  className: ''
};

var Display = function Display(_ref) {
  var children = _ref.children,
      caption = _ref.caption,
      shadow = _ref.shadow,
      className = _ref.className,
      width = _ref.width,
      props = _objectWithoutProperties(_ref, ["children", "caption", "shadow", "className", "width"]);

  var theme = useTheme();
  var showShadow = useMemo(function () {
    return shadow && theme.type !== 'dark';
  }, [theme.type, shadow]);
  return /*#__PURE__*/React.createElement("div", _extends({}, props, {
    className: _JSXStyle.dynamic([["3592785454", [width ? width : 'max-content', showShadow ? theme.expressiveness.shadowLarge : 'none', theme.palette.accents_5, shadow ? '2.5rem' : '1.3rem']]]) + " " + (props && props.className != null && props.className || "display ".concat(className))
  }), /*#__PURE__*/React.createElement("div", {
    className: _JSXStyle.dynamic([["3592785454", [width ? width : 'max-content', showShadow ? theme.expressiveness.shadowLarge : 'none', theme.palette.accents_5, shadow ? '2.5rem' : '1.3rem']]]) + " " + "content"
  }, children), /*#__PURE__*/React.createElement("div", {
    className: _JSXStyle.dynamic([["3592785454", [width ? width : 'max-content', showShadow ? theme.expressiveness.shadowLarge : 'none', theme.palette.accents_5, shadow ? '2.5rem' : '1.3rem']]]) + " " + "caption"
  }, caption), /*#__PURE__*/React.createElement(_JSXStyle, {
    id: "3592785454",
    dynamic: [width ? width : 'max-content', showShadow ? theme.expressiveness.shadowLarge : 'none', theme.palette.accents_5, shadow ? '2.5rem' : '1.3rem']
  }, ".display.__jsx-style-dynamic-selector{display:block;margin:2.5rem auto;max-width:100%;}.content.__jsx-style-dynamic-selector{display:block;margin:0 auto;border-radius:4px;overflow:hidden;width:".concat(width ? width : 'max-content', ";box-shadow:").concat(showShadow ? theme.expressiveness.shadowLarge : 'none', ";max-width:100%;}.content.__jsx-style-dynamic-selector pre{margin:0;-webkit-transition:min-width ease 0.2s;transition:min-width ease 0.2s;}.content.__jsx-style-dynamic-selector img{display:block;}.caption.__jsx-style-dynamic-selector{font-size:0.875rem;line-height:1.571em;color:").concat(theme.palette.accents_5, ";margin:").concat(shadow ? '2.5rem' : '1.3rem', " auto 0;text-align:center;max-width:85%;}")));
};

var MemoDisplay = React.memo(Display);
export default withDefaults(MemoDisplay, defaultProps);