From 15bcfe91f895d2ad67aa25ff4b5f600f56b94311 Mon Sep 17 00:00:00 2001 From: "Matthew Olker (molker)" Date: Wed, 16 Mar 2022 10:45:24 -0400 Subject: [PATCH] feat: added prop to Accordion to conditionally disallow focusing on initialActive --- react/src/lib/Accordion/index.js | 45 ++++++++----------- .../tests/__snapshots__/index.spec.js.snap | 1 + 2 files changed, 20 insertions(+), 26 deletions(-) diff --git a/react/src/lib/Accordion/index.js b/react/src/lib/Accordion/index.js index f111537b38..c0db17ef54 100644 --- 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 ( -
+
{setAccordionGroups}
); @@ -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 index b62c9b6e78..cb5d17836f 100644 --- 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__):