-
-
Notifications
You must be signed in to change notification settings - Fork 184
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(UniversalTable): column pinning improvements TASK-1312 (#5338)
### 📣 Summary Improve multiple pinned columns handling. Allow pinning columns to right side. Improve pinned column styling based on table having horizontal scrollbar. Add reusable `useViewportSize` and `useWindowEvent` hooks. Add extensive story for testing the component, including left/right column pinning, the amount of columns and much more. ### 💭 Notes Both `useViewportSize` and `useWindowEvent` hooks were copied from `@mantine/hooks`, retaining the original code as closely as possible. We most possibly will use Mantine in near future, and we should replace both with the ones from Mantine package. Pinned columns have visual shadow to distinct them from other columns (useful when scrolling table horizontally). That shadow is not being added if table has no horizontal scrollbar. @magicznyleszek this should be used in actions column added in #5309 (should be always pinned to right) ### 👀 Preview steps Best way to test component changes: 1. run storybook locally 2. go to http://localhost:6006/?path=/docs/misc-universaltable--docs 3. 🟢 verify columns pinning works for all possible combinations - story allows pinning one or two columns on both sides 4. 🟢 verify pinned columns have shadow only if table has lots of columns (i.e. if there is horizontal scrollbar) 5. 🟢 verify all the other props of component work as expected Verify that Organization Members table still works: 1. ℹ️ have multiple different users 2. for one of the users (e.g. "joe"), use http://kf.kobo.local/admin/organizations/organization/ to add multiple users into joe's organization 3. for one of the users (e.g. "sue") set the role to "admin" 4. enable "Multi-members override" for joe's organization 5. enable feature flag `mmosEnabled` 7. navigate to `#/account/organization/members` (as "joe") 8. 🟢 notice that the table works as previously 👌 Verify that Recent Project Activity table still works: 1. note: this particular table displays mock data right now 2. for a deployed project go to `#/forms/<uid>/settings/activity` 3. 🟢 notice that the table works as previously 👌 --------- Co-authored-by: RuthShryock <[email protected]>
- Loading branch information
1 parent
8094a92
commit 8e473b8
Showing
5 changed files
with
317 additions
and
48 deletions.
There are no files selected for viewing
This file contains 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 |
|---|---|---|
| @@ -0,0 +1,25 @@ | ||
| // TODO: in near future either replace with `@mantine/hooks` or other hooks library | ||
| // This is a copy of: https://github.com/mantinedev/mantine/blob/master/packages/%40mantine/hooks/src/use-viewport-size/use-viewport-size.ts | ||
| import {useCallback, useEffect, useState} from 'react'; | ||
| import {useWindowEvent} from './useWindowEvent'; | ||
|
|
||
| const eventListerOptions = { | ||
| passive: true, | ||
| }; | ||
|
|
||
| export function useViewportSize() { | ||
| const [windowSize, setWindowSize] = useState({ | ||
| width: 0, | ||
| height: 0, | ||
| }); | ||
|
|
||
| const setSize = useCallback(() => { | ||
| setWindowSize({ width: window.innerWidth || 0, height: window.innerHeight || 0 }); | ||
| }, []); | ||
|
|
||
| useWindowEvent('resize', setSize, eventListerOptions); | ||
| useWindowEvent('orientationchange', setSize, eventListerOptions); | ||
| useEffect(setSize, []); | ||
|
|
||
| return windowSize; | ||
| } |
This file contains 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 |
|---|---|---|
| @@ -0,0 +1,16 @@ | ||
| // TODO: in near future either replace with `@mantine/hooks` or other hooks library | ||
| // This is a copy of: https://github.com/mantinedev/mantine/blob/master/packages/%40mantine/hooks/src/use-window-event/use-window-event.ts | ||
| import {useEffect} from 'react'; | ||
|
|
||
| export function useWindowEvent<K extends string>( | ||
| type: K, | ||
| listener: K extends keyof WindowEventMap | ||
| ? (this: Window, ev: WindowEventMap[K]) => void | ||
| : (this: Window, ev: CustomEvent) => void, | ||
| options?: boolean | AddEventListenerOptions | ||
| ) { | ||
| useEffect(() => { | ||
| window.addEventListener(type as any, listener, options); | ||
| return () => window.removeEventListener(type as any, listener, options); | ||
| }, [type, listener]); | ||
| } |
This file contains 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 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.