Bill Detail Testimony View #915
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎ |
components/UserTestimonies/Tabs.tsx
Outdated
| <div ref={el => (tabRefs.current[index] = el)} key={child.props.label}> | ||
| <React.Fragment> | ||
| {React.cloneElement(child, { | ||
| active: child.props.value === selectedTab, |
There was a problem hiding this comment.
Very cool! I've never used cloneElement but I guess it allows you to add props to passed in elements?
components/UserTestimonies/Tabs.tsx
Outdated
| ) { | ||
| setSliderWidth( | ||
| tabRefs.current[selectedTab - 1]!.getBoundingClientRect().width | ||
| ) |
There was a problem hiding this comment.
To handle resizing, I like to use the useResizeObserver hook from beautiful-react-hooks (you'll have to add the dependency).
You would attach a ref to the TabSliderContainer, get its width with the hook, add its width as a dependency to this useEffect, so we update the width/position of the tab whenever the container changes size.
There was a problem hiding this comment.
Looking good Mark! The animation is so satisfying :) I pushed a change to simplify the position calculation for tabs, and also increased the speed of the transition. lmk what you think.
to respond to your slack question, we should support resizing, that can happen if the user resizes their window while on the page.
There are a few spacing tweaks that can be done, but overall this is about ready to replace the current views. Let's work toward merging this PR in the next week. We can add pagination and wire up filtering by testifier type in a separate PR.
|
Also, @MarkTrepanier please merge in the latest changes from main. There is a new |
#885
Bill Testimony List that requires new UI, Hook adjustment and use roles support(Organization)
So far, I've translated the design for the tabs from the Figma mock-up. Instead of using built-in tabs that did not have a slider feature or importing another library, I made use of React's Ref hooks to position and size a slider.