@carbon/react 0.17.0-rc.0 → 1.0.0

package/lib/components/CodeSnippet/CodeSnippet.js

@@ -0,0 +1,375 @@
+/**
+ * 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.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
+var PropTypes = require('prop-types');
+var React = require('react');
+var cx = require('classnames');
+var polyfilled = require('../../node_modules/use-resize-observer/polyfilled.js');
+var iconsReact = require('@carbon/icons-react');
+var Copy = require('../Copy/Copy.js');
+var Button = require('../Button/Button.js');
+var CopyButton = require('../CopyButton/CopyButton.js');
+var uniqueId = require('../../tools/uniqueId.js');
+var copy = require('copy-to-clipboard');
+var usePrefix = require('../../internal/usePrefix.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+var copy__default = /*#__PURE__*/_interopDefaultLegacy(copy);
+
+var _excluded = ["className", "type", "children", "disabled", "feedback", "feedbackTimeout", "onClick", "ariaLabel", "copyText", "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,
+      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 = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+
+  var _useState = React.useState(false),
+      _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
+      expandedCode = _useState2[0],
+      setExpandedCode = _useState2[1];
+
+  var _useState3 = React.useState(false),
+      _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
+      shouldShowMoreLessBtn = _useState4[0],
+      setShouldShowMoreLessBtn = _useState4[1];
+
+  var _useRef = React.useRef(uniqueId["default"]()),
+      uid = _useRef.current;
+
+  var codeContentRef = React.useRef();
+  var codeContainerRef = React.useRef();
+  var innerCodeRef = React.useRef();
+
+  var _useState5 = React.useState(false),
+      _useState6 = _rollupPluginBabelHelpers.slicedToArray(_useState5, 2),
+      hasLeftOverflow = _useState6[0],
+      setHasLeftOverflow = _useState6[1];
+
+  var _useState7 = React.useState(false),
+      _useState8 = _rollupPluginBabelHelpers.slicedToArray(_useState7, 2),
+      hasRightOverflow = _useState8[0],
+      setHasRightOverflow = _useState8[1];
+
+  var getCodeRef = React.useCallback(function () {
+    if (type === 'single') {
+      return codeContainerRef;
+    }
+
+    if (type === 'multi') {
+      return codeContentRef;
+    }
+  }, [type]);
+  var prefix = usePrefix.usePrefix();
+  var getCodeRefDimensions = React.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 = React.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]);
+  polyfilled["default"]({
+    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]);
+  React.useEffect(function () {
+    handleScroll();
+  }, [handleScroll]);
+
+  var handleCopyClick = function handleCopyClick(evt) {
+    if (copyText || innerCodeRef !== null && innerCodeRef !== void 0 && innerCodeRef.current) {
+      var _innerCodeRef$current;
+
+      copy__default["default"](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__default["default"](className, "".concat(prefix, "--snippet"), (_classNames = {}, _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--snippet--").concat(type), type), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--snippet--disabled"), type !== 'inline' && disabled), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--snippet--expand"), expandedCode), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--snippet--light"), light), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--snippet--no-copy"), hideCopyButton), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--snippet--wraptext"), wrapText), _classNames));
+  var expandCodeBtnText = expandedCode ? showLessText : showMoreText;
+
+  if (type === 'inline') {
+    if (hideCopyButton) {
+      return /*#__PURE__*/React__default["default"].createElement("span", {
+        className: codeSnippetClasses
+      }, /*#__PURE__*/React__default["default"].createElement("code", {
+        id: uid,
+        ref: innerCodeRef
+      }, children));
+    }
+
+    return /*#__PURE__*/React__default["default"].createElement(Copy["default"], _rollupPluginBabelHelpers["extends"]({}, rest, {
+      onClick: handleCopyClick,
+      "aria-label": ariaLabel,
+      "aria-describedby": uid,
+      className: codeSnippetClasses,
+      feedback: feedback,
+      feedbackTimeout: feedbackTimeout
+    }), /*#__PURE__*/React__default["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["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, {
+    className: codeSnippetClasses
+  }), /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
+    ref: codeContainerRef,
+    role: type === 'single' ? 'textbox' : null,
+    tabIndex: type === 'single' && !disabled ? 0 : null,
+    className: "".concat(prefix, "--snippet-container"),
+    "aria-label": ariaLabel || 'code-snippet',
+    onScroll: type === 'single' && handleScroll || null
+  }, containerStyle), /*#__PURE__*/React__default["default"].createElement("pre", {
+    ref: codeContentRef,
+    onScroll: type === 'multi' && handleScroll || null
+  }, /*#__PURE__*/React__default["default"].createElement("code", {
+    ref: innerCodeRef
+  }, children))), hasLeftOverflow && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(prefix, "--snippet__overflow-indicator--left")
+  }), hasRightOverflow && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(prefix, "--snippet__overflow-indicator--right")
+  }), !hideCopyButton && /*#__PURE__*/React__default["default"].createElement(CopyButton["default"], {
+    disabled: disabled,
+    onClick: handleCopyClick,
+    feedback: feedback,
+    feedbackTimeout: feedbackTimeout,
+    iconDescription: copyButtonDescription
+  }), shouldShowMoreLessBtn && /*#__PURE__*/React__default["default"].createElement(Button["default"], {
+    kind: "ghost",
+    size: "field",
+    className: "".concat(prefix, "--snippet-btn--expand"),
+    disabled: disabled,
+    onClick: function onClick() {
+      return setExpandedCode(!expandedCode);
+    }
+  }, /*#__PURE__*/React__default["default"].createElement("span", {
+    className: "".concat(prefix, "--snippet-btn--text")
+  }, expandCodeBtnText), /*#__PURE__*/React__default["default"].createElement(iconsReact.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__default["default"].string,
+
+  /**
+   * Provide the content of your CodeSnippet as a node or string
+   */
+  children: PropTypes__default["default"].node,
+
+  /**
+   * Specify an optional className to be applied to the container node
+   */
+  className: PropTypes__default["default"].string,
+
+  /**
+   * Specify the description for the Copy Button
+   */
+  copyButtonDescription: PropTypes__default["default"].string,
+
+  /**
+   * Optional text to copy. If not specified, the `children` node's `innerText`
+   * will be used as the copy value.
+   */
+  copyText: PropTypes__default["default"].string,
+
+  /**
+   * Specify whether or not the CodeSnippet should be disabled
+   */
+  disabled: PropTypes__default["default"].bool,
+
+  /**
+   * Specify the string displayed when the snippet is copied
+   */
+  feedback: PropTypes__default["default"].string,
+
+  /**
+   * Specify the time it takes for the feedback message to timeout
+   */
+  feedbackTimeout: PropTypes__default["default"].number,
+
+  /**
+   * Specify whether or not a copy button should be used/rendered.
+   */
+  hideCopyButton: PropTypes__default["default"].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__default["default"].bool,
+
+  /**
+   * Specify the maximum number of rows to be shown when in collapsed view
+   */
+  maxCollapsedNumberOfRows: PropTypes__default["default"].number,
+
+  /**
+   * Specify the maximum number of rows to be shown when in expanded view
+   */
+  maxExpandedNumberOfRows: PropTypes__default["default"].number,
+
+  /**
+   * Specify the minimum number of rows to be shown when in collapsed view
+   */
+  minCollapsedNumberOfRows: PropTypes__default["default"].number,
+
+  /**
+   * Specify the minimum number of rows to be shown when in expanded view
+   */
+  minExpandedNumberOfRows: PropTypes__default["default"].number,
+
+  /**
+   * An optional handler to listen to the `onClick` even fired by the Copy
+   * Button
+   */
+  onClick: PropTypes__default["default"].func,
+
+  /**
+   * Specify a string that is displayed when the Code Snippet has been
+   * interacted with to show more lines
+   */
+  showLessText: PropTypes__default["default"].string,
+
+  /**
+   * Specify a string that is displayed when the Code Snippet text is more
+   * than 15 lines
+   */
+  showMoreText: PropTypes__default["default"].string,
+
+  /**
+   * Provide the type of Code Snippet
+   */
+  type: PropTypes__default["default"].oneOf(['single', 'inline', 'multi']),
+
+  /**
+   * Specify whether or not to wrap the text.
+   */
+  wrapText: PropTypes__default["default"].bool
+};
+CodeSnippet.defaultProps = {
+  ariaLabel: 'Copy to clipboard',
+  type: 'single',
+  showMoreText: 'Show more',
+  showLessText: 'Show less',
+  wrapText: false
+};
+
+exports["default"] = CodeSnippet;