react-spectrum
e4bc3269 - Expandable rows TableView (#4641)

Commit
2 years ago
Expandable rows TableView (#4641) * poking around to make Rows process nested rows * cleanup * progress * got nested rows rendering still need to double check node info like index, level, prev/next key and fix keyboard nav * fixing naming and adding way to track rows that have nested rows * fixing expandable row detection and debugging weird TableLayout issue for some reason it is trying to render a child row of a non-expanded row * renaming from treeble to TreeGrid * fix cell values and weird crash with dynamic treeble with subset of keys expanded * update left/right keyboard navigation logic * updating up/down keyboard navigation logic for now made changes to getNext/PrevKey in the collection, see comments about why * fixing typeahead and using this.getChildNodes whereever possible * cleanup and fix getText * fixing index and column assignment to node still need to debug why I cant make the rows in the body 0 indexed * debugging persisted keys * adding basic story to check controlled expanded keys * musings when trying to fix persisted key case * enforcing user places cells before nested rows * making GridNode index track position with respect to parent and adding indexOfType to track posinset * fixing persisted keys by adding index for headerrows and columns * create Table wrapper element to conditionally render Table or TreeGridTable * get rid of extra story * update keyboard delegate to use node.indexOfType we dont actually set indexOfType in TableCollection so use index as fallback * adding tree grid aria for now not including aria row index, will need to test announcement differences * fix crash on collapse it is possible for the collection to be up to date but the removed items still go through a render cycle before being removed * fixes from screen reader testing experiemented with adding aria-rowindex as per wai-aria docs but decided to omit it since it made for a confusing announcement in NVDA where there was two row position announcements * setting up tests, debugging why they dont run not sure why the feature flag isnt being set to true... * add feature flag getter for tests for now * fixing row border styling and adding more tests * TableView expandable rows: rendering + interactions (#4663) * start implementing toggle chevron * expandable-rows-start * add padding based on level * improve padding offset * update level logic * use usePress for expand button * cleanup styles * add keyboard interactions * fix rendering chevron on static example * use expand as row action if none provided * fix chevron rendering * only keyboard toggle if expandable * cleanup * types * skip two focus tests * fix chevron position in RTL * handle cases of controlled & not updating expanded * fixing crash when collapsing rows * Adjusting so chevron appears on first row header cell * fix messed up merge conflict * remove edge case check * fix deps * check for props.childItems instead of link * making chevron focusable by screen readers * Support Enter/press on chevron cell to expand/collapse row seems to interfere with row actions... * update offset logic * update offset logic again * fix crashes when switching between selectionMode/styles and fix tests * fixing indenting * Get rid of cell action since it blocks row actions * fix expansion button rendering * Fix chevron disappearance when selectioncheckboxs are added The columnCount from the collection includes the drag handle and selection columns, messing up the check for if a static row is expandable. Updated to add a counter in the collection that represents the number of columns without the drag handle and selection column so we can easily tell if a static row has nested rows as children without needing to iterate over the children every time * adjusting row header id placement so it doesnt include the chevron label * fix selection extension for nested rows when using shift + click/arrow keys compareNodeOrder didnt handle cases where the compared nodes were of different level and one of the nodes was a top level node OR if one node contained the other node * fixing logic for compareNodeOrders * Adding tests for compareNodeOrder updates + range selection --------- Co-authored-by: Daniel Lu <dl1644@gmail.com> * fix shared context for base tableview and treegrid tableview moved context up into wrapper since resizer and stuff relies on the the context being the same between the two tables * fixing lint for build * adding more stories * adding more row selection test * make NVDA/Talkback not announce the chevron label when the cell is focused VoiceOver still announces the chevron as part of the cells content but that was true before this change anyways. Change not made in the hooks because we need to differentiate the grid cell content from the chevron but we only have gridCellProps in the hook. Make that update later when we make expandable table rows aria example * add chevron rotation transition and increase hit target some misc followup items from testing as well * add chromatic stories * adding tests for loading state, onAction, and highlight selection * adding persisted key and remaining keyboard nav tests * add expand/collapse tests * (WIP) Simplify TreeGridCollection by building the keymap inside state instead (#4730) * tentative update to treegridstate to minimize usage of treegrid collection reversions of delegate and layout code to come * revert changes to keyboard delegates and other areas now that we are using TableCollection again with a flattened set of rows, reverted uneeded changes where possible. Kept TableLayout changes since it felt non-tree specific and is an overall improvement * partial simplification of TreeGridCollection one snag is that useCollection expects the collection provided as the factory to have a bunch of getters that TreeGridCollection just doesnt need * get rid of TreeGridCollection in favor of function in useTreeGridState TreeGridCollection was only really being used to generate a keymap of tree grid nodes to set aria-posinset and other aria attributes so it was a bit overkill and didnt need all the extra required getters, especially since TableCollection would be used in layout/keyboard delegates. * Refactoring TableView wrapper strategy merges TreeGridTable and TableView logic so there is less duplicated code * renaming tableview files previous commit is for code reviewers for TableView diffing. This commit renames the components to be more appropriate for their actual usage * getting rid of extraneous shouldShowCheckbox now that it is lifted into TableView/TreeGridTableView we dont need it in the base TableView * fixing tests for react-17 not entirely sure what was breaking, but this prevents the base table tests from being run twice when the TreeGridTable tests are run * cleaning up todos * adding alpha to types * Add message for feature flag pointing to docs * Remove zoom transition effect from TableView (#4771) * alternative transition approach 2 * Revert "alternative transition approach 2" This reverts commit ede52f43fa2618e6855e116a8ead5363744080d1. * another alterative * trigger build * cleanup * Adding UNSTABLE to expandable rows state hook and prop added so people will know about its alpha status even though it lives in a stable release package * addressing review comments * moving expand/collapse chevron label to intl files * addressing review comments (prop rename and stuff) * hide expandable table props from spectrum docs * removing column node assigment to treegrid node cell as per review, already done in TableCollection, nor do I really use it * expanding type and fixing tests to get rid of .onlys the type change broadens the table children type so Collection builder doesnt complain. I also moved the feature flag test into TableView so I dont need the .onlys. Making a separate file to contain the tableTests function works as well and allows us to run those tests in TreeGridTable instead but this felt more appropriate * fix tests in 17 * Fix click focus and transform overlap for expandable row chevron (#4808) * focusing row when chevron is clicked the chevron doesnt have a tabindex so clicking it doesnt make focus enter the table so we need to manually do so * getting rid of columns array in favor of a counter * fix chevron button hit area doesnt overlap row content when row is narrow and overflow wrap is applied --------- Co-authored-by: Reid Barber <reid@reidbarber.com>
Author
Parents
Loading