feat: added prop to Accordion to conditionally disallow focusing on i…

…nitialActive
momentum-design · Mar 25, 2022 · 15bcfe9 · 15bcfe9
1 parent e18891f
commit 15bcfe9
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 26 deletions.
diff --git a/react/src/lib/Accordion/index.js b/react/src/lib/Accordion/index.js
@@ -8,9 +8,9 @@ class Accordion extends React.Component {
 
   state = {
     activeIndices: this.props.initialActive || [],
-    focusIndicies: this.props.initialActiveFocus ,
+    focusIndicies: this.props.initialActiveFocus,
     focus: false,
-  }
+  };
 
   componentDidMount () {
     const { focusIndicies } = this.state;
@@ -31,23 +31,22 @@ class Accordion extends React.Component {
     }, true);
 
     return children && childrenArr.length && status;
-  }
+  };
 
   determineInitialFocus = () => {
-    const nonDisabledIndex = React.Children.toArray(this.props.children).reduceRight((agg, child, idx) => {
-      return !child.props.disabled
-        ? idx
-        : agg;
-    }, null);
+    const nonDisabledIndex = React.Children.toArray(this.props.children).reduceRight(
+      (agg, child, idx) => {
+        return !child.props.disabled ? idx : agg;
+      },
+      null
+    );
 
     this.setFocus(nonDisabledIndex);
-  }
+  };
 
   handleClick = index => {
-    return this.props.multipleVisible
-      ? this.setMultiple(index)
-      : this.setSelected(index);
-  }
+    return this.props.multipleVisible ? this.setMultiple(index) : this.setSelected(index);
+  };
 
   setMultiple = index => {
     let newValues;
@@ -68,14 +67,13 @@ class Accordion extends React.Component {
       onSelect && onSelect(newValues);
       return { activeIndices: newValues };
     });
-  }
+  };
 
   setSelected = index => {
     const { activeIndices, focusIndicies } = this.state;
     const { children, onSelect } = this.props;
     // Don't do anything if index is the same or outside of the bounds
-    if (activeIndices.includes(index) || index < 0 || index >= children.length)
-      return;
+    if (activeIndices.includes(index) || index < 0 || index >= children.length) return;
 
     // Keep reference to last index for event handler
     const last = activeIndices[0];
@@ -87,10 +85,10 @@ class Accordion extends React.Component {
     }
 
     onSelect && onSelect(index, last);
-  }
+  };
 
   handleKeyPress = (e, idx, length, disabled) => {
-    if(disabled) {
+    if (disabled) {
       e.preventDefault();
       e.stopPropagation();
       return;
@@ -185,19 +183,14 @@ class Accordion extends React.Component {
       return React.cloneElement(child, {
         isExpanded: !child.props.disabled && activeIndices.includes(idx),
         onClick: () => this.handleClick(idx),
-        onKeyDown: e => this.handleKeyPress(e, idx, children.length - 1 , child.props.disabled),
+        onKeyDown: e => this.handleKeyPress(e, idx, children.length - 1, child.props.disabled),
         focus: this.state.focus === idx,
         showSeparator,
       });
     });
 
     return (
-      <div
-        className={
-          'md-accordion' +
-          `${(className && ` ${className}`) || ''}`
-        }
-      >
+      <div className={'md-accordion' + `${(className && ` ${className}`) || ''}`}>
         {setAccordionGroups}
       </div>
     );
@@ -215,7 +208,7 @@ Accordion.propTypes = {
   initialActive: PropTypes.array,
   /** @prop Optional css class string | '' */
   initialActiveFocus: PropTypes.bool,
- /** @prop Set to disallow focus upon opening Accordion on load | true */
+  /** @prop Set to disallow focus upon opening Accordion on load | true */
   className: PropTypes.string,
   /** @prop Optional underline under Accordion menu item | false  */
   showSeparator: PropTypes.bool,

diff --git a/react/src/lib/Accordion/tests/__snapshots__/index.spec.js.snap b/react/src/lib/Accordion/tests/__snapshots__/index.spec.js.snap
@@ -6,6 +6,7 @@ ShallowWrapper {
   Symbol(enzyme.__unrendered__): <Accordion
     className=""
     initialActive={Array []}
+    initialActiveFocus={true}
     multipleVisible={false}
     onSelect={null}
     showSeparator={false}