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

Modern and minimalist React UI library.

import _extends from "@babel/runtime/helpers/esm/extends";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import _JSXStyle from "styled-jsx/style";
import React, { useMemo, useRef } from 'react';
import useTheme from '../styles/use-theme';
import withDefaults from '../utils/with-defaults';
import { getStyles } from './styles';
import SnippetIcon from './snippet-icon';
import useClipboard from '../utils/use-clipboard';
import useToasts from '../use-toasts';
var defaultProps = {
  filled: false,
  width: 'initial',
  copy: 'default',
  color: 'default',
  className: ''
};

var textArrayToString = function textArrayToString(text) {
  return text.reduce(function (pre, current) {
    if (!current) return pre;
    return pre ? "".concat(pre, "\n").concat(current) : current;
  }, '');
};

var Snippet = function Snippet(_ref) {
  var color = _ref.color,
      filled = _ref.filled,
      children = _ref.children,
      text = _ref.text,
      width = _ref.width,
      copyType = _ref.copy,
      className = _ref.className,
      props = _objectWithoutProperties(_ref, ["color", "filled", "children", "text", "width", "copy", "className"]);

  var theme = useTheme();

  var _useClipboard = useClipboard(),
      copy = _useClipboard.copy;

  var _useToasts = useToasts(),
      _useToasts2 = _slicedToArray(_useToasts, 2),
      setToast = _useToasts2[1];

  var ref = useRef(null);
  var isMultiLine = text && Array.isArray(text);
  var style = useMemo(function () {
    return getStyles(color, theme.palette, filled);
  }, [color, theme.palette, filled]);
  var showCopyIcon = useMemo(function () {
    return copyType !== 'prevent';
  }, [copyType]);
  var childText = useMemo(function () {
    if (isMultiLine) return textArrayToString(text);
    if (!children) return text;
    if (!ref.current) return '';
    return ref.current.textContent;
  }, [ref.current, children, text]);

  var clickHandler = function clickHandler() {
    if (!childText || !showCopyIcon) return;
    copy(childText);
    if (copyType === 'slient') return;
    setToast({
      text: 'Copied to clipboard!',
      type: 'success'
    });
  };

  return /*#__PURE__*/React.createElement("div", _extends({}, props, {
    className: _JSXStyle.dynamic([["4273876836", [width, theme.layout.gapHalf, theme.layout.gap, style.color, style.bgColor, style.border, theme.expressiveness.R2, style.color, style.bgColor, theme.layout.gap, theme.expressiveness.R2]]]) + " " + (props && props.className != null && props.className || "snippet ".concat(className))
  }), isMultiLine ? text.map(function (t, index) {
    return /*#__PURE__*/React.createElement("pre", {
      key: "snippet-".concat(index, "-").concat(t),
      className: _JSXStyle.dynamic([["4273876836", [width, theme.layout.gapHalf, theme.layout.gap, style.color, style.bgColor, style.border, theme.expressiveness.R2, style.color, style.bgColor, theme.layout.gap, theme.expressiveness.R2]]])
    }, t);
  }) : /*#__PURE__*/React.createElement("pre", {
    ref: ref,
    className: _JSXStyle.dynamic([["4273876836", [width, theme.layout.gapHalf, theme.layout.gap, style.color, style.bgColor, style.border, theme.expressiveness.R2, style.color, style.bgColor, theme.layout.gap, theme.expressiveness.R2]]])
  }, children || text), showCopyIcon && /*#__PURE__*/React.createElement("div", {
    onClick: clickHandler,
    className: _JSXStyle.dynamic([["4273876836", [width, theme.layout.gapHalf, theme.layout.gap, style.color, style.bgColor, style.border, theme.expressiveness.R2, style.color, style.bgColor, theme.layout.gap, theme.expressiveness.R2]]]) + " " + "copy"
  }, /*#__PURE__*/React.createElement(SnippetIcon, null)), /*#__PURE__*/React.createElement(_JSXStyle, {
    id: "4273876836",
    dynamic: [width, theme.layout.gapHalf, theme.layout.gap, style.color, style.bgColor, style.border, theme.expressiveness.R2, style.color, style.bgColor, theme.layout.gap, theme.expressiveness.R2]
  }, ".snippet.__jsx-style-dynamic-selector{position:relative;width:".concat(width, ";max-width:100%;padding:").concat(theme.layout.gapHalf, ";padding-right:calc(2 * ").concat(theme.layout.gap, ");color:").concat(style.color, ";background-color:").concat(style.bgColor, ";border:1px solid ").concat(style.border, ";border-radius:").concat(theme.expressiveness.R2, ";}pre.__jsx-style-dynamic-selector{margin:0;padding:0;border:none;background-color:transparent;color:").concat(style.color, ";font-size:0.8125rem;}pre.__jsx-style-dynamic-selector::before{content:'$ ';-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}pre.__jsx-style-dynamic-selector *{margin:0;padding:0;font-size:inherit;color:inherit;}.copy.__jsx-style-dynamic-selector{position:absolute;right:0;top:-2px;-webkit-transform:translateY(50%);-ms-transform:translateY(50%);transform:translateY(50%);background-color:").concat(style.bgColor, ";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;width:calc(2 * ").concat(theme.layout.gap, ");color:inherit;-webkit-transition:opacity 0.2s ease 0s;transition:opacity 0.2s ease 0s;border-radius:").concat(theme.expressiveness.R2, ";cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}.copy.__jsx-style-dynamic-selector:hover{opacity:0.7;}")));
};

var MemoSnippet = React.memo(Snippet);
export default withDefaults(MemoSnippet, defaultProps);