formaat-design
New Resizer/Splitter component
Is your feature request related to a problem? Please describe. Not particularly a problem. We're rebuilding a major application from Kendo to Reshaped and we'll need a resizer component at some point. Would be great if you consider it as an additional new component!
Describe the solution you'd like A new resizer/splitter component. Similar to the Kendo UI one or this open source one or like the PrimeReact one?
Describe alternatives you've considered The above mentioned.
Added it to 3.1.0. It shouldn't indicate the timeline but mostly its priority compared to the major release planned for early July. We might pick it up earlier based on the availability
Component usage:
<Splitter>
<Splitter.Item minSize="20%" maxSize="50%" />
{/* Default handle */}
<Splitter.Handle />
<Splitter.Item />
{/* Custom handle */}
<Splitter.Handle>
{attributes => (
<div className="bar">
<Actionable attributes={attributes}>...</Actionable>
</div>
)}
</Splitter.Handle>
<Splitter.Item />
</Splitter>
Component props:
type Props = {
orientation?: 'horizontal' | 'vertical';
height?: string;
}
type ItemProps = {
minSize?: string;
maxSize?: string;
onResize?: ({ size }) => void;
}
@vladoyoung if you look at the code snippets above, would you need anything on top of that for your use cases?
@vladoyoung since it's your request, I would like to ask if you have any requirements for the min/max/default sizes. Do you need this functionality now? If you do, do you need to pass them in px, %, something else?
I'm asking since implementation is based on the flexGrow so I can't just assign any css value and have to resolve all potential property values in js
I don't need the resizer at the moment and I have no planned usage, but i think px, % and calc() should be more than enough for sizing.
Writing tests and docs now. Should be out in 3.1
https://github.com/user-attachments/assets/aaaf02e7-de33-4569-9a79-0aa87d8c95b1