@carbon/react 1.27.0 → 1.28.0-rc.0

package/es/components/CodeSnippet/CodeSnippet.js

@@ -5,7 +5,7 @@
  * 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 { 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';
@@ -19,72 +19,47 @@ import copy from 'copy-to-clipboard';
 import deprecate from '../../prop-types/deprecate.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 
-var _CodeSnippet$propType, _CodeSnippet$defaultP;
-
-var _excluded = ["className", "type", "children", "disabled", "feedback", "feedbackTimeout", "onClick", "aria-label", "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;
+const rowHeightInPixels = 16;
+const defaultMaxCollapsedNumberOfRows = 15;
+const defaultMaxExpandedNumberOfRows = 0;
+const defaultMinCollapsedNumberOfRows = 3;
+const 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['aria-label'],
-      deprecatedAriaLabel = _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 = _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 () {
+  let {
+    className,
+    type,
+    children,
+    disabled,
+    feedback,
+    feedbackTimeout,
+    onClick,
+    ['aria-label']: ariaLabel,
+    ariaLabel: deprecatedAriaLabel,
+    copyText,
+    copyButtonDescription,
+    light,
+    showMoreText,
+    showLessText,
+    hideCopyButton,
+    wrapText,
+    maxCollapsedNumberOfRows = defaultMaxCollapsedNumberOfRows,
+    maxExpandedNumberOfRows = defaultMaxExpandedNumberOfRows,
+    minCollapsedNumberOfRows = defaultMinCollapsedNumberOfRows,
+    minExpandedNumberOfRows = defaultMinExpandedNumberOfRows,
+    ...rest
+  } = _ref;
+  const [expandedCode, setExpandedCode] = useState(false);
+  const [shouldShowMoreLessBtn, setShouldShowMoreLessBtn] = useState(false);
+  const {
+    current: uid
+  } = useRef(uniqueId());
+  const codeContentRef = useRef();
+  const codeContainerRef = useRef();
+  const innerCodeRef = useRef();
+  const [hasLeftOverflow, setHasLeftOverflow] = useState(false);
+  const [hasRightOverflow, setHasRightOverflow] = useState(false);
+  const getCodeRef = useCallback(() => {
     if (type === 'single') {
       return codeContainerRef;
     }
@@ -93,39 +68,41 @@ function CodeSnippet(_ref) {
       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;
+  const prefix = usePrefix();
+  const getCodeRefDimensions = useCallback(() => {
+    const {
+      clientWidth: codeClientWidth,
+      scrollLeft: codeScrollLeft,
+      scrollWidth: codeScrollWidth
+    } = getCodeRef().current;
     return {
       horizontalOverflow: codeScrollWidth > codeClientWidth,
-      codeClientWidth: codeClientWidth,
-      codeScrollWidth: codeScrollWidth,
-      codeScrollLeft: codeScrollLeft
+      codeClientWidth,
+      codeScrollWidth,
+      codeScrollLeft
     };
   }, [getCodeRef]);
-  var handleScroll = useCallback(function () {
+  const handleScroll = useCallback(() => {
     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;
-
+    const {
+      horizontalOverflow,
+      codeClientWidth,
+      codeScrollWidth,
+      codeScrollLeft
+    } = getCodeRefDimensions();
     setHasLeftOverflow(horizontalOverflow && !!codeScrollLeft);
     setHasRightOverflow(horizontalOverflow && codeScrollLeft + codeClientWidth !== codeScrollWidth);
   }, [type, getCodeRefDimensions]);
   useResizeObserver({
     ref: getCodeRef(),
-    onResize: function onResize() {
+    onResize: () => {
       if (codeContentRef !== null && codeContentRef !== void 0 && codeContentRef.current && type === 'multi') {
-        var _codeContentRef$curre = codeContentRef.current.getBoundingClientRect(),
-            height = _codeContentRef$curre.height;
+        const {
+          height
+        } = codeContentRef.current.getBoundingClientRect();
 
         if (maxCollapsedNumberOfRows > 0 && (maxExpandedNumberOfRows <= 0 || maxExpandedNumberOfRows > maxCollapsedNumberOfRows) && height > maxCollapsedNumberOfRows * rowHeightInPixels) {
           setShouldShowMoreLessBtn(true);
@@ -143,15 +120,15 @@ function CodeSnippet(_ref) {
       }
     }
   }, [type, maxCollapsedNumberOfRows, maxExpandedNumberOfRows, minExpandedNumberOfRows, rowHeightInPixels]);
-  useEffect(function () {
+  useEffect(() => {
     handleScroll();
   }, [handleScroll]);
 
-  var handleCopyClick = function handleCopyClick(evt) {
+  const 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);
+      copy(copyText ?? (innerCodeRef === null || innerCodeRef === void 0 ? void 0 : (_innerCodeRef$current = innerCodeRef.current) === null || _innerCodeRef$current === void 0 ? void 0 : _innerCodeRef$current.innerText));
     }
 
     if (onClick) {
@@ -159,8 +136,16 @@ function CodeSnippet(_ref) {
     }
   };
 
-  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), _defineProperty(_classNames, "".concat(prefix, "--snippet--has-right-overflow"), type == 'multi' && hasRightOverflow), _classNames));
-  var expandCodeBtnText = expandedCode ? showLessText : showMoreText;
+  const codeSnippetClasses = cx(className, `${prefix}--snippet`, {
+    [`${prefix}--snippet--${type}`]: type,
+    [`${prefix}--snippet--disabled`]: type !== 'inline' && disabled,
+    [`${prefix}--snippet--expand`]: expandedCode,
+    [`${prefix}--snippet--light`]: light,
+    [`${prefix}--snippet--no-copy`]: hideCopyButton,
+    [`${prefix}--snippet--wraptext`]: wrapText,
+    [`${prefix}--snippet--has-right-overflow`]: type == 'multi' && hasRightOverflow
+  });
+  const expandCodeBtnText = expandedCode ? showLessText : showMoreText;
 
   if (type === 'inline') {
     if (hideCopyButton) {
@@ -185,10 +170,10 @@ function CodeSnippet(_ref) {
     }, children));
   }
 
-  var containerStyle = {};
+  let containerStyle = {};
 
   if (type === 'multi') {
-    var styles = {};
+    const styles = {};
 
     if (expandedCode) {
       if (maxExpandedNumberOfRows > 0) {
@@ -219,7 +204,7 @@ function CodeSnippet(_ref) {
     ref: codeContainerRef,
     role: type === 'single' || type === 'multi' ? 'textbox' : null,
     tabIndex: (type === 'single' || type === 'multi') && !disabled ? 0 : null,
-    className: "".concat(prefix, "--snippet-container"),
+    className: `${prefix}--snippet-container`,
     "aria-label": deprecatedAriaLabel || ariaLabel || 'code-snippet',
     "aria-readonly": type === 'single' || type === 'multi' ? true : null,
     "aria-multiline": type === 'multi' ? true : null,
@@ -230,9 +215,9 @@ function CodeSnippet(_ref) {
   }, /*#__PURE__*/React__default.createElement("code", {
     ref: innerCodeRef
   }, children))), hasLeftOverflow && /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(prefix, "--snippet__overflow-indicator--left")
+    className: `${prefix}--snippet__overflow-indicator--left`
   }), hasRightOverflow && type !== 'multi' && /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(prefix, "--snippet__overflow-indicator--right")
+    className: `${prefix}--snippet__overflow-indicator--right`
   }), !hideCopyButton && /*#__PURE__*/React__default.createElement(CopyButton, {
     disabled: disabled,
     onClick: handleCopyClick,
@@ -242,21 +227,133 @@ function CodeSnippet(_ref) {
   }), shouldShowMoreLessBtn && /*#__PURE__*/React__default.createElement(Button, {
     kind: "ghost",
     size: "sm",
-    className: "".concat(prefix, "--snippet-btn--expand"),
+    className: `${prefix}--snippet-btn--expand`,
     disabled: disabled,
-    onClick: function onClick() {
-      return setExpandedCode(!expandedCode);
-    }
+    onClick: () => setExpandedCode(!expandedCode)
   }, /*#__PURE__*/React__default.createElement("span", {
-    className: "".concat(prefix, "--snippet-btn--text")
+    className: `${prefix}--snippet-btn--text`
   }, expandCodeBtnText), /*#__PURE__*/React__default.createElement(ChevronDown, {
-    className: "".concat(prefix, "--icon-chevron--down ").concat(prefix, "--snippet__icon"),
+    className: `${prefix}--icon-chevron--down ${prefix}--snippet__icon`,
     name: "chevron--down",
     role: "img"
   })));
 }
 
-CodeSnippet.propTypes = (_CodeSnippet$propType = {}, _defineProperty(_CodeSnippet$propType, 'aria-label', PropTypes.string), _defineProperty(_CodeSnippet$propType, "ariaLabel", deprecate(PropTypes.string, 'This prop syntax has been deprecated. Please use the new `aria-label`.')), _defineProperty(_CodeSnippet$propType, "children", PropTypes.node), _defineProperty(_CodeSnippet$propType, "className", PropTypes.string), _defineProperty(_CodeSnippet$propType, "copyButtonDescription", PropTypes.string), _defineProperty(_CodeSnippet$propType, "copyText", PropTypes.string), _defineProperty(_CodeSnippet$propType, "disabled", PropTypes.bool), _defineProperty(_CodeSnippet$propType, "feedback", PropTypes.string), _defineProperty(_CodeSnippet$propType, "feedbackTimeout", PropTypes.number), _defineProperty(_CodeSnippet$propType, "hideCopyButton", PropTypes.bool), _defineProperty(_CodeSnippet$propType, "light", deprecate(PropTypes.bool, 'The `light` prop for `CodeSnippet` has ' + 'been deprecated in favor of the new `Layer` component. It will be removed in the next major release.')), _defineProperty(_CodeSnippet$propType, "maxCollapsedNumberOfRows", PropTypes.number), _defineProperty(_CodeSnippet$propType, "maxExpandedNumberOfRows", PropTypes.number), _defineProperty(_CodeSnippet$propType, "minCollapsedNumberOfRows", PropTypes.number), _defineProperty(_CodeSnippet$propType, "minExpandedNumberOfRows", PropTypes.number), _defineProperty(_CodeSnippet$propType, "onClick", PropTypes.func), _defineProperty(_CodeSnippet$propType, "showLessText", PropTypes.string), _defineProperty(_CodeSnippet$propType, "showMoreText", PropTypes.string), _defineProperty(_CodeSnippet$propType, "type", PropTypes.oneOf(['single', 'inline', 'multi'])), _defineProperty(_CodeSnippet$propType, "wrapText", PropTypes.bool), _CodeSnippet$propType);
-CodeSnippet.defaultProps = (_CodeSnippet$defaultP = {}, _defineProperty(_CodeSnippet$defaultP, 'aria-label', 'Copy to clipboard'), _defineProperty(_CodeSnippet$defaultP, "type", 'single'), _defineProperty(_CodeSnippet$defaultP, "showMoreText", 'Show more'), _defineProperty(_CodeSnippet$defaultP, "showLessText", 'Show less'), _defineProperty(_CodeSnippet$defaultP, "wrapText", false), _CodeSnippet$defaultP);
+CodeSnippet.propTypes = {
+  /**
+   * Specify a label to be read by screen readers on the containing <textbox>
+   * node
+   */
+  ['aria-label']: PropTypes.string,
+
+  /**
+   * Deprecated, please use `aria-label` instead.
+   * Specify a label to be read by screen readers on the containing <textbox>
+   * node
+   */
+  ariaLabel: deprecate(PropTypes.string, 'This prop syntax has been deprecated. Please use the new `aria-label`.'),
+
+  /**
+   * 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,
+
+  /**
+   * 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: deprecate(PropTypes.bool, 'The `light` prop for `CodeSnippet` has ' + 'been deprecated in favor of the new `Layer` component. It will be removed in the next major release.'),
+
+  /**
+   * 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 = {
+  ['aria-label']: 'Copy to clipboard',
+  type: 'single',
+  showMoreText: 'Show more',
+  showLessText: 'Show less',
+  wrapText: false
+};
 
 export { CodeSnippet as default };