refactor(components): this commit reverses code blocks toggler mechanism behavior

- prop `isInitiallyExpanded` doesn't make sense anymore, so it is renamed to `heightTogglers` in CodeGroup and `showHeightToggler` in Code components
- toggler logic abstracted to custom hook

Author: Kirill Bolotsky

CONTRIBUTING_FILE_FORMAT.md

@@ -326,26 +326,28 @@ See _'Then do this?'_ text line between tabs? **You can not do that**. Put nothi
 
     </CodeGroup>
 
-#### State control
+#### Height control
 
-Large code blocks (>400px) by default have a collapsed state, i.e. have a max-height prop of `400px` and user can change their behavior via toggler:
+You can provide large code blocks (>400px, ~20 LoC) with expand/collapse toggler that will allow users to control code block's height.
 
 ![Code Block States](internal-images/code-block-states.png)
 
-If you are using `CodeGroup` wrapper you can specify the initial state of code blocks via `isInitiallyExpanded` prop which works very similarly to the other available props:
+Prop `heightTogglers` passed to `CodeGroup` component makes it possible, which works very similar to `labels` and `lineNumbers` props:
 
-    <CodeGroup labels={["Nice code!", "This one is better", "Oh my.."]} lineNumbers={[true, true, true]} isInitiallyExpanded=[true, false, false]>
+    <CodeGroup labels={["Nice code!", "This one is better", "Oh my.."]} lineNumbers={[true, true, true]} heightTogglers=[true, false, false]>
 
     ```javascript
-    // a lot of lines of important code
+    // a lot of lines of code,
+    // maxHeight of this code block will be set to `400px`
+    // and a toggler will appear
     ```
 
     ```javascript
-    // a lot of lines of not so important code
+    // a lot of lines of code, default behavior
     ```
 
     ```javascript
-    // a lot of lines of not so important code
+    // a lot of lines of code, default behavior
     ```
 
 

src/components/shared/code/code-group.js

@@ -5,7 +5,7 @@ import { getRandomKey } from 'utils';
 import Code from './code';
 import styles from './code-group.module.scss';
 
-const CodeGroup = ({ children, labels, lineNumbers }) => {
+const CodeGroup = ({ children, labels, lineNumbers, heightTogglers }) => {
   const [currentIndex, setCurrentIndex] = useState(0);
   const randomKey = getRandomKey();
   return (
@@ -35,7 +35,11 @@ const CodeGroup = ({ children, labels, lineNumbers }) => {
       </style>
       <div className={`${styles.itemsContainer} ${randomKey}`}>
         {React.Children.map(children, (child, i) => (
-          <Code showLineNumbers={lineNumbers[i]} key={i}>
+          <Code
+            showLineNumbers={lineNumbers[i]}
+            key={i}
+            showHeightToggler={heightTogglers[i]}
+          >
             {child.props.children}
           </Code>
         ))}
@@ -48,12 +52,14 @@ CodeGroup.propTypes = {
   children: PropTypes.node,
   labels: PropTypes.arrayOf(PropTypes.string),
   lineNumbers: PropTypes.arrayOf(PropTypes.bool),
+  heightTogglers: PropTypes.arrayOf(PropTypes.bool),
 };
 
 CodeGroup.defaultProps = {
   children: null,
   labels: [],
   lineNumbers: [],
+  heightTogglers: [],
 };
 
 export default CodeGroup;

src/components/shared/code/code.js

@@ -1,37 +1,41 @@
 import classNames from 'classnames';
 import { WithCopyButton } from 'components/shared/with-copy-button';
+import { useCodeBlockHeightToggler } from 'hooks';
 import Highlight, { defaultProps } from 'prism-react-renderer';
 import PropTypes from 'prop-types';
-import React, { useEffect, useState, useRef } from 'react';
+import React, { useRef } from 'react';
 
 import styles from './code.module.scss';
 
-const Code = ({ children, showLineNumbers, isInitiallyExpanded }) => {
+const DEFAULT_HEIGHT = `100%`;
+const MAX_HEIGHT = 400;
+
+const Code = ({ children, showLineNumbers, showHeightToggler }) => {
   if (!children) return null;
-  const [isExpanded, setIsExpanded] = useState(true);
-  const [height, setHeight] = useState('100%');
+
   const containerRef = useRef(null);
-  const toggleHandler = () => setIsExpanded((prev) => !prev);
 
-  useEffect(() => {
-    if (containerRef?.current) {
-      const computedHeight = containerRef.current.offsetHeight;
-      if (computedHeight > 420) {
-        setHeight(computedHeight);
-      }
-    }
-    if (!isInitiallyExpanded) {
-      setIsExpanded(false);
-    }
-  }, [containerRef]);
+  const { toggleHandler, height, isExpanded } = useCodeBlockHeightToggler({
+    ref: containerRef,
+    defaultHeight: DEFAULT_HEIGHT,
+    maxHeight: MAX_HEIGHT,
+    isEnabled: showHeightToggler,
+  });
 
   let toggler = null;
-  if (height !== '100%') {
+  let containerStyles = {};
+  // if `height` isn't equla default height,
+  // code blocks fits the height requirements
+  // for toggler to be shown
+  if (height !== DEFAULT_HEIGHT) {
     toggler = (
       <button className={styles.toggler} type="button" onClick={toggleHandler}>
         {isExpanded ? 'Collapse' : 'Expand'}
       </button>
     );
+    containerStyles = {
+      maxHeight: isExpanded ? height : `${MAX_HEIGHT}px`,
+    };
   }
 
   return (
@@ -45,10 +49,7 @@ const Code = ({ children, showLineNumbers, isInitiallyExpanded }) => {
           <pre
             className={classNames(className, styles.code, styles.codeContainer)}
             ref={containerRef}
-            style={{
-              transition: 'max-height .2s ease',
-              maxHeight: isExpanded ? height : '400px',
-            }}
+            style={containerStyles}
           >
             <code className={styles.code}>
               {tokens.map((line, i) => {
@@ -81,13 +82,13 @@ const Code = ({ children, showLineNumbers, isInitiallyExpanded }) => {
 Code.propTypes = {
   children: PropTypes.node,
   showLineNumbers: PropTypes.bool,
-  isInitiallyExpanded: PropTypes.bool,
+  showHeightToggler: PropTypes.bool,
 };
 
 Code.defaultProps = {
   children: null,
   showLineNumbers: false,
-  isInitiallyExpanded: false,
+  showHeightToggler: false,
 };
 
 export default Code;

src/components/shared/code/code.module.scss

@@ -3,6 +3,7 @@
   height: 100%;
   overflow-y: auto;
   text-align: left;
+  transition: max-height 0.2s ease-in-out;
   @include no-scrollbars;
 }
 

src/hooks/index.js

@@ -1,5 +1,11 @@
+import useCodeBlockHeightToggler from './use-code-block-height-toggler';
 import useElementsReplacement from './use-elements-replacement';
 import useLandmark from './use-landmark';
 import useScrollToAnchor from './use-scroll-to-anchor';
 
-export { useLandmark, useScrollToAnchor, useElementsReplacement };
+export {
+  useLandmark,
+  useScrollToAnchor,
+  useElementsReplacement,
+  useCodeBlockHeightToggler,
+};

src/hooks/use-code-block-height-toggler.js

@@ -0,0 +1,29 @@
+import { useEffect, useState } from 'react';
+
+const useCodeBlockHeightToggler = ({
+  ref,
+  defaultHeight,
+  maxHeight,
+  isEnabled,
+}) => {
+  const [isExpanded, setIsExpanded] = useState(false);
+  const [height, setHeight] = useState(defaultHeight);
+
+  const toggleHandler = () => setIsExpanded((prev) => !prev);
+
+  useEffect(() => {
+    if (ref?.current && isEnabled) {
+      const computedHeight = ref.current.offsetHeight;
+      // add a little margin to maxHeight
+      // to prevent showing toggler in blocks
+      // which height is just about maxHeight,
+      // therefore very little moving during toggle action
+      if (computedHeight > maxHeight + 20) {
+        setHeight(`${computedHeight}px`);
+      }
+    }
+  }, [ref, isEnabled]);
+  return { toggleHandler, isExpanded, height };
+};
+
+export default useCodeBlockHeightToggler;