This repository was archived by the owner on Jan 14, 2025. It is now read-only.
fix(list): maintain classes with state.listItemClassNames #776
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -51,6 +51,11 @@ export interface ListProps<T extends HTMLElement> extends React.HTMLProps<HTMLEl | |
| children: ListItem<T> | ListItem<T>[] | React.ReactNode; | ||
| }; | ||
|
|
||
|
|
||
| interface ListState { | ||
| listItemClassNames: {[listItemIndex: number]: string[]}, | ||
| } | ||
|
|
||
| function isReactText(element: any): element is React.ReactText { | ||
| return typeof element === 'string' || typeof element === 'number'; | ||
| } | ||
|
|
@@ -63,13 +68,18 @@ function isSelectedIndexType(selectedIndex: unknown): selectedIndex is MDCListIn | |
| return typeof selectedIndex === 'number' && !isNaN(selectedIndex) || Array.isArray(selectedIndex); | ||
| } | ||
|
|
||
| export default class List<T extends HTMLElement = HTMLElement> extends React.Component<ListProps<T>, ListState> { | ||
| listItemCount = 0; | ||
| foundation!: MDCListFoundation; | ||
| hasInitializedListItemTabIndex = false; | ||
| hasInitializedList = false; | ||
|
|
||
| private listElement = React.createRef<HTMLElement>(); | ||
|
|
||
| state: ListState = { | ||
| listItemClassNames: {}, | ||
| }; | ||
|
|
||
| static defaultProps: Partial<ListProps<HTMLElement>> = { | ||
| 'className': '', | ||
| 'checkboxList': false, | ||
|
|
@@ -100,6 +110,11 @@ export default class List<T extends HTMLElement = HTMLElement> extends React.Com | |
| this.props[ARIA_ORIENTATION] === VERTICAL | ||
| ); | ||
| this.initializeListType(); | ||
|
|
||
| // tabIndex for the list items can only be initialized after | ||
| // the above logic has executed. Once this is true, we need to call forceUpdate. | ||
| this.hasInitializedList = true; | ||
| this.forceUpdate(); | ||
| } | ||
|
|
||
| componentDidUpdate(prevProps: ListProps<T>) { | ||
|
|
@@ -185,16 +200,30 @@ export default class List<T extends HTMLElement = HTMLElement> extends React.Com | |
| listItem.setAttribute(attr, value); | ||
| } | ||
| }, | ||
| /** | ||
| * Pushes class name to state.listItemClassNames[listItemIndex] if it doesn't yet exist. | ||
| */ | ||
| addClassForElementIndex: (index, className) => { | ||
| const {listItemClassNames} = this.state; | ||
| if (listItemClassNames[index] && listItemClassNames[index].indexOf(className) === -1) { | ||
| listItemClassNames[index].push(className); | ||
| } else { | ||
| listItemClassNames[index] = [className]; | ||
| } | ||
| this.setState({listItemClassNames}); | ||
|
There was a problem hiding this comment. Did you test this with disabled list item?
There was a problem hiding this comment. good catch - updated and added tests |
||
| }, | ||
| /** | ||
| * Finds the className within state.listItemClassNames[listItemIndex], and removes it | ||
| * from the array. | ||
| */ | ||
| removeClassForElementIndex: (index, className) => { | ||
| const {listItemClassNames} = this.state; | ||
| if (listItemClassNames[index]) { | ||
| const removalIndex = listItemClassNames[index].indexOf(className); | ||
| if (removalIndex !== -1) { | ||
| listItemClassNames[index].splice(removalIndex, 1); | ||
| this.setState({listItemClassNames}); | ||
| } | ||
| } | ||
| }, | ||
| setTabIndexForListItemChildren: (listItemIndex, tabIndexValue) => { | ||
|
|
@@ -251,6 +280,44 @@ export default class List<T extends HTMLElement = HTMLElement> extends React.Com | |
| return null; | ||
| } | ||
|
|
||
| /** | ||
| * Initializes the tabIndex prop for the listItems. tabIndex is determined by: | ||
| * 1. if selectedIndex is an array, and the index === selectedIndex[0] | ||
| * 2. if selectedIndex is a number, and the the index === selectedIndex | ||
| * 3. if there is no selectedIndex | ||
| */ | ||
| private getListItemInitialTabIndex = (index: number) => { | ||
|
There was a problem hiding this comment. To simplify this, I think There was a problem hiding this comment. @abhiomkar you're saying it doesn't matter if its checkbox or radio type list? It should only be set to the first selectedIndex? There was a problem hiding this comment. That's correct. See Accessibility section and examples for reference: https://github.com/material-components/material-components-web/tree/master/packages/mdc-list#accessibility There was a problem hiding this comment. Hmm...ya that sounds a lot simpler than what i have...I will update. There was a problem hiding this comment. ya that worked like a charm. Thanks! There was a problem hiding this comment. nit: missing return type. And in other places. There was a problem hiding this comment. I think it is better for the TS compiler to infer the type here. Otherwise the return type is |
||
| const {selectedIndex} = this.props; | ||
| let tabIndex = {}; | ||
| if (this.hasInitializedList && !this.hasInitializedListItemTabIndex) { | ||
| const isSelectedIndexArray | ||
| = Array.isArray(selectedIndex) && selectedIndex.length > 0 && index === selectedIndex[0]; | ||
| const isSelected = selectedIndex === index; | ||
| if (isSelectedIndexArray || isSelected || selectedIndex === -1) { | ||
| tabIndex = {tabIndex: 0}; | ||
| this.hasInitializedListItemTabIndex = true; | ||
| } | ||
| } | ||
|
|
||
| return tabIndex; | ||
| } | ||
|
|
||
| /** | ||
| * Method checks if the list item at `index` contains classes. If true, | ||
| * method merges state.listItemClassNames[index] with listItem.props.className. | ||
| * The return value is used as the listItem's className. | ||
| */ | ||
| private getListItemClassNames = (index: number, listItem: React.ReactElement<ListItemProps<T>>) => { | ||
| let {className = ''} = listItem.props; | ||
| const {listItemClassNames} = this.state; | ||
| if (listItemClassNames[index]) { | ||
| listItemClassNames[index]; | ||
| className = classnames(className, listItemClassNames[index]); | ||
| } | ||
|
|
||
| return className; | ||
| } | ||
|
|
||
| handleKeyDown = (e: React.KeyboardEvent<any>, index: number) => { | ||
| e.persist(); // Persist the synthetic event to access its `key` | ||
| this.foundation.handleKeydown( | ||
|
|
@@ -317,46 +384,33 @@ export default class List<T extends HTMLElement = HTMLElement> extends React.Com | |
|
|
||
| renderChild = (child: React.ReactElement<ListItemProps<T>> | React.ReactChild) => { | ||
| if (!isReactText(child) && isListItem(child)) { | ||
| return this.renderListItem(child, child.props.disabled ? -1 : this.listItemCount++); | ||
| } | ||
| return child; | ||
| }; | ||
|
|
||
| renderListItem = (listItem: React.ReactElement<ListItemProps<T>>, index: number) => { | ||
| const {checkboxList, radioList} = this.props; | ||
| const tabIndex = this.getListItemInitialTabIndex(index); | ||
| const className = this.getListItemClassNames(index, listItem); | ||
|
|
||
| const { | ||
| onKeyDown, | ||
| onClick, | ||
| onFocus, | ||
| onBlur, | ||
| /* eslint-disable no-unused-vars */ | ||
| className: _classNames, | ||
| /* eslint-enable no-unused-vars */ | ||
| ...otherProps | ||
| } = listItem.props; | ||
|
|
||
| const props = { | ||
| // otherProps must be first | ||
| ...otherProps, | ||
| checkboxList, | ||
| radioList, | ||
| className, | ||
| onKeyDown: (e: React.KeyboardEvent<T>) => { | ||
| onKeyDown!(e); | ||
| this.handleKeyDown(e, index); | ||
|
|
@@ -373,6 +427,11 @@ export default class List<T extends HTMLElement = HTMLElement> extends React.Com | |
| onBlur!(e); | ||
| this.handleBlur(e, index); | ||
| }, | ||
| onDestroy: () => { | ||
| const {listItemClassNames} = this.state; | ||
| delete listItemClassNames[index]; | ||
| this.setState({listItemClassNames}); | ||
| }, | ||
| ...tabIndex, | ||
| }; | ||
| return React.cloneElement(listItem, props); | ||
|
|
||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.