@carbon/react 0.16.2 → 1.0.0-rc.0

package/es/components/CodeSnippet/CodeSnippet.js

@@ -0,0 +1,372 @@
+/**
+ * Copyright IBM Corp. 2016, 2021
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import PropTypes from 'prop-types';
+import React__default, { useState, useRef, useCallback, useEffect } from 'react';
+import cx from 'classnames';
+import useResizeObserver from '../../node_modules/use-resize-observer/polyfilled.js';
+import { ChevronDown } from '@carbon/icons-react';
+import Copy from '../Copy/Copy.js';
+import Button from '../Button/Button.js';
+import CopyButton from '../CopyButton/CopyButton.js';
+import uniqueId from '../../tools/uniqueId.js';
+import copy from 'copy-to-clipboard';
+import { usePrefix } from '../../internal/usePrefix.js';
+
+var _excluded = ["className", "type", "children", "disabled", "feedback", "feedbackTimeout", "onClick", "ariaLabel", "copyText", "copyLabel", "copyButtonDescription", "light", "showMoreText", "showLessText", "hideCopyButton", "wrapText", "maxCollapsedNumberOfRows", "maxExpandedNumberOfRows", "minCollapsedNumberOfRows", "minExpandedNumberOfRows"];
+var rowHeightInPixels = 16;
+var defaultMaxCollapsedNumberOfRows = 15;
+var defaultMaxExpandedNumberOfRows = 0;
+var defaultMinCollapsedNumberOfRows = 3;
+var defaultMinExpandedNumberOfRows = 16;
+
+function CodeSnippet(_ref) {
+  var _classNames;
+
+  var className = _ref.className,
+      type = _ref.type,
+      children = _ref.children,
+      disabled = _ref.disabled,
+      feedback = _ref.feedback,
+      feedbackTimeout = _ref.feedbackTimeout,
+      onClick = _ref.onClick,
+      ariaLabel = _ref.ariaLabel,
+      copyText = _ref.copyText,
+      copyLabel = _ref.copyLabel,
+      copyButtonDescription = _ref.copyButtonDescription,
+      light = _ref.light,
+      showMoreText = _ref.showMoreText,
+      showLessText = _ref.showLessText,
+      hideCopyButton = _ref.hideCopyButton,
+      wrapText = _ref.wrapText,
+      _ref$maxCollapsedNumb = _ref.maxCollapsedNumberOfRows,
+      maxCollapsedNumberOfRows = _ref$maxCollapsedNumb === void 0 ? defaultMaxCollapsedNumberOfRows : _ref$maxCollapsedNumb,
+      _ref$maxExpandedNumbe = _ref.maxExpandedNumberOfRows,
+      maxExpandedNumberOfRows = _ref$maxExpandedNumbe === void 0 ? defaultMaxExpandedNumberOfRows : _ref$maxExpandedNumbe,
+      _ref$minCollapsedNumb = _ref.minCollapsedNumberOfRows,
+      minCollapsedNumberOfRows = _ref$minCollapsedNumb === void 0 ? defaultMinCollapsedNumberOfRows : _ref$minCollapsedNumb,
+      _ref$minExpandedNumbe = _ref.minExpandedNumberOfRows,
+      minExpandedNumberOfRows = _ref$minExpandedNumbe === void 0 ? defaultMinExpandedNumberOfRows : _ref$minExpandedNumbe,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      expandedCode = _useState2[0],
+      setExpandedCode = _useState2[1];
+
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      shouldShowMoreLessBtn = _useState4[0],
+      setShouldShowMoreLessBtn = _useState4[1];
+
+  var _useRef = useRef(uniqueId()),
+      uid = _useRef.current;
+
+  var codeContentRef = useRef();
+  var codeContainerRef = useRef();
+  var innerCodeRef = useRef();
+
+  var _useState5 = useState(false),
+      _useState6 = _slicedToArray(_useState5, 2),
+      hasLeftOverflow = _useState6[0],
+      setHasLeftOverflow = _useState6[1];
+
+  var _useState7 = useState(false),
+      _useState8 = _slicedToArray(_useState7, 2),
+      hasRightOverflow = _useState8[0],
+      setHasRightOverflow = _useState8[1];
+
+  var getCodeRef = useCallback(function () {
+    if (type === 'single') {
+      return codeContainerRef;
+    }
+
+    if (type === 'multi') {
+      return codeContentRef;
+    }
+  }, [type]);
+  var prefix = usePrefix();
+  var getCodeRefDimensions = useCallback(function () {
+    var _getCodeRef$current = getCodeRef().current,
+        codeClientWidth = _getCodeRef$current.clientWidth,
+        codeScrollLeft = _getCodeRef$current.scrollLeft,
+        codeScrollWidth = _getCodeRef$current.scrollWidth;
+    return {
+      horizontalOverflow: codeScrollWidth > codeClientWidth,
+      codeClientWidth: codeClientWidth,
+      codeScrollWidth: codeScrollWidth,
+      codeScrollLeft: codeScrollLeft
+    };
+  }, [getCodeRef]);
+  var handleScroll = useCallback(function () {
+    if (type === 'inline' || type === 'single' && !(codeContainerRef !== null && codeContainerRef !== void 0 && codeContainerRef.current) || type === 'multi' && !(codeContentRef !== null && codeContentRef !== void 0 && codeContentRef.current)) {
+      return;
+    }
+
+    var _getCodeRefDimensions = getCodeRefDimensions(),
+        horizontalOverflow = _getCodeRefDimensions.horizontalOverflow,
+        codeClientWidth = _getCodeRefDimensions.codeClientWidth,
+        codeScrollWidth = _getCodeRefDimensions.codeScrollWidth,
+        codeScrollLeft = _getCodeRefDimensions.codeScrollLeft;
+
+    setHasLeftOverflow(horizontalOverflow && !!codeScrollLeft);
+    setHasRightOverflow(horizontalOverflow && codeScrollLeft + codeClientWidth !== codeScrollWidth);
+  }, [type, getCodeRefDimensions]);
+  useResizeObserver({
+    ref: getCodeRef(),
+    onResize: function onResize() {
+      if (codeContentRef !== null && codeContentRef !== void 0 && codeContentRef.current && type === 'multi') {
+        var _codeContentRef$curre = codeContentRef.current.getBoundingClientRect(),
+            height = _codeContentRef$curre.height;
+
+        if (maxCollapsedNumberOfRows > 0 && (maxExpandedNumberOfRows <= 0 || maxExpandedNumberOfRows > maxCollapsedNumberOfRows) && height > maxCollapsedNumberOfRows * rowHeightInPixels) {
+          setShouldShowMoreLessBtn(true);
+        } else {
+          setShouldShowMoreLessBtn(false);
+        }
+
+        if (expandedCode && minExpandedNumberOfRows > 0 && height <= minExpandedNumberOfRows * rowHeightInPixels) {
+          setExpandedCode(false);
+        }
+      }
+
+      if (codeContentRef !== null && codeContentRef !== void 0 && codeContentRef.current && type === 'multi' || codeContainerRef !== null && codeContainerRef !== void 0 && codeContainerRef.current && type === 'single') {
+        handleScroll();
+      }
+    }
+  }, [type, maxCollapsedNumberOfRows, maxExpandedNumberOfRows, minExpandedNumberOfRows, rowHeightInPixels]);
+  useEffect(function () {
+    handleScroll();
+  }, [handleScroll]);
+
+  var handleCopyClick = function handleCopyClick(evt) {
+    if (copyText || innerCodeRef !== null && innerCodeRef !== void 0 && innerCodeRef.current) {
+      var _innerCodeRef$current;
+
+      copy(copyText !== null && copyText !== void 0 ? copyText : innerCodeRef === null || innerCodeRef === void 0 ? void 0 : (_innerCodeRef$current = innerCodeRef.current) === null || _innerCodeRef$current === void 0 ? void 0 : _innerCodeRef$current.innerText);
+    }
+
+    if (onClick) {
+      onClick(evt);
+    }
+  };
+
+  var codeSnippetClasses = cx(className, "".concat(prefix, "--snippet"), (_classNames = {}, _defineProperty(_classNames, "".concat(prefix, "--snippet--").concat(type), type), _defineProperty(_classNames, "".concat(prefix, "--snippet--disabled"), type !== 'inline' && disabled), _defineProperty(_classNames, "".concat(prefix, "--snippet--expand"), expandedCode), _defineProperty(_classNames, "".concat(prefix, "--snippet--light"), light), _defineProperty(_classNames, "".concat(prefix, "--snippet--no-copy"), hideCopyButton), _defineProperty(_classNames, "".concat(prefix, "--snippet--wraptext"), wrapText), _classNames));
+  var expandCodeBtnText = expandedCode ? showLessText : showMoreText;
+
+  if (type === 'inline') {
+    if (hideCopyButton) {
+      return /*#__PURE__*/React__default.createElement("span", {
+        className: codeSnippetClasses
+      }, /*#__PURE__*/React__default.createElement("code", {
+        id: uid,
+        ref: innerCodeRef
+      }, children));
+    }
+
+    return /*#__PURE__*/React__default.createElement(Copy, _extends({}, rest, {
+      onClick: handleCopyClick,
+      "aria-label": copyLabel || ariaLabel,
+      "aria-describedby": uid,
+      className: codeSnippetClasses,
+      feedback: feedback,
+      feedbackTimeout: feedbackTimeout
+    }), /*#__PURE__*/React__default.createElement("code", {
+      id: uid,
+      ref: innerCodeRef
+    }, children));
+  }
+
+  var containerStyle = {};
+
+  if (type === 'multi') {
+    var styles = {};
+
+    if (expandedCode) {
+      if (maxExpandedNumberOfRows > 0) {
+        styles.maxHeight = maxExpandedNumberOfRows * rowHeightInPixels;
+      }
+
+      if (minExpandedNumberOfRows > 0) {
+        styles.minHeight = minExpandedNumberOfRows * rowHeightInPixels;
+      }
+    } else {
+      if (maxCollapsedNumberOfRows > 0) {
+        styles.maxHeight = maxCollapsedNumberOfRows * rowHeightInPixels;
+      }
+
+      if (minCollapsedNumberOfRows > 0) {
+        styles.minHeight = minCollapsedNumberOfRows * rowHeightInPixels;
+      }
+    }
+
+    if (Object.keys(styles).length) {
+      containerStyle.style = styles;
+    }
+  }
+
+  return /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
+    className: codeSnippetClasses
+  }), /*#__PURE__*/React__default.createElement("div", _extends({
+    ref: codeContainerRef,
+    role: type === 'single' ? 'textbox' : null,
+    tabIndex: type === 'single' && !disabled ? 0 : null,
+    className: "".concat(prefix, "--snippet-container"),
+    "aria-label": ariaLabel || copyLabel || 'code-snippet',
+    onScroll: type === 'single' && handleScroll || null
+  }, containerStyle), /*#__PURE__*/React__default.createElement("pre", {
+    ref: codeContentRef,
+    onScroll: type === 'multi' && handleScroll || null
+  }, /*#__PURE__*/React__default.createElement("code", {
+    ref: innerCodeRef
+  }, children))), hasLeftOverflow && /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(prefix, "--snippet__overflow-indicator--left")
+  }), hasRightOverflow && /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(prefix, "--snippet__overflow-indicator--right")
+  }), !hideCopyButton && /*#__PURE__*/React__default.createElement(CopyButton, {
+    disabled: disabled,
+    onClick: handleCopyClick,
+    feedback: feedback,
+    feedbackTimeout: feedbackTimeout,
+    iconDescription: copyButtonDescription
+  }), shouldShowMoreLessBtn && /*#__PURE__*/React__default.createElement(Button, {
+    kind: "ghost",
+    size: "field",
+    className: "".concat(prefix, "--snippet-btn--expand"),
+    disabled: disabled,
+    onClick: function onClick() {
+      return setExpandedCode(!expandedCode);
+    }
+  }, /*#__PURE__*/React__default.createElement("span", {
+    className: "".concat(prefix, "--snippet-btn--text")
+  }, expandCodeBtnText), /*#__PURE__*/React__default.createElement(ChevronDown, {
+    "aria-label": expandCodeBtnText,
+    className: "".concat(prefix, "--icon-chevron--down ").concat(prefix, "--snippet__icon"),
+    name: "chevron--down",
+    role: "img"
+  })));
+}
+
+CodeSnippet.propTypes = {
+  /**
+   * Specify a label to be read by screen readers on the containing <textbox>
+   * node
+   */
+  ariaLabel: PropTypes.string,
+
+  /**
+   * Provide the content of your CodeSnippet as a node or string
+   */
+  children: PropTypes.node,
+
+  /**
+   * Specify an optional className to be applied to the container node
+   */
+  className: PropTypes.string,
+
+  /**
+   * Specify the description for the Copy Button
+   */
+  copyButtonDescription: PropTypes.string,
+
+  /**
+   * Specify a label to be read by screen readers on the containing <textbox>
+   * node
+   */
+  copyLabel: PropTypes.string,
+
+  /**
+   * Optional text to copy. If not specified, the `children` node's `innerText`
+   * will be used as the copy value.
+   */
+  copyText: PropTypes.string,
+
+  /**
+   * Specify whether or not the CodeSnippet should be disabled
+   */
+  disabled: PropTypes.bool,
+
+  /**
+   * Specify the string displayed when the snippet is copied
+   */
+  feedback: PropTypes.string,
+
+  /**
+   * Specify the time it takes for the feedback message to timeout
+   */
+  feedbackTimeout: PropTypes.number,
+
+  /**
+   * Specify whether or not a copy button should be used/rendered.
+   */
+  hideCopyButton: PropTypes.bool,
+
+  /**
+   * Specify whether you are using the light variant of the Code Snippet,
+   * typically used for inline snippet to display an alternate color
+   */
+  light: PropTypes.bool,
+
+  /**
+   * Specify the maximum number of rows to be shown when in collapsed view
+   */
+  maxCollapsedNumberOfRows: PropTypes.number,
+
+  /**
+   * Specify the maximum number of rows to be shown when in expanded view
+   */
+  maxExpandedNumberOfRows: PropTypes.number,
+
+  /**
+   * Specify the minimum number of rows to be shown when in collapsed view
+   */
+  minCollapsedNumberOfRows: PropTypes.number,
+
+  /**
+   * Specify the minimum number of rows to be shown when in expanded view
+   */
+  minExpandedNumberOfRows: PropTypes.number,
+
+  /**
+   * An optional handler to listen to the `onClick` even fired by the Copy
+   * Button
+   */
+  onClick: PropTypes.func,
+
+  /**
+   * Specify a string that is displayed when the Code Snippet has been
+   * interacted with to show more lines
+   */
+  showLessText: PropTypes.string,
+
+  /**
+   * Specify a string that is displayed when the Code Snippet text is more
+   * than 15 lines
+   */
+  showMoreText: PropTypes.string,
+
+  /**
+   * Provide the type of Code Snippet
+   */
+  type: PropTypes.oneOf(['single', 'inline', 'multi']),
+
+  /**
+   * Specify whether or not to wrap the text.
+   */
+  wrapText: PropTypes.bool
+};
+CodeSnippet.defaultProps = {
+  ariaLabel: 'Copy to clipboard',
+  copyLabel: 'Copy to clipboard',
+  type: 'single',
+  showMoreText: 'Show more',
+  showLessText: 'Show less',
+  wrapText: false
+};
+
+export { CodeSnippet as default };