feat(admin-ui): Slider / Range Slider components #4348
Conversation
leopuleo
force-pushed
the
leo/feat/ui-slider
branch
from
690056b to
9332850
Compare
| export const useRangeSlider = (props: RangeSliderProps) => { | ||
| const presenter = useMemo(() => { | ||
| const rangeSliderPresenter = new RangeSliderPresenter( | ||
| omit(props, ["label", "labelPosition"]) |
There was a problem hiding this comment.
Is it possible that your props change, but you want to maintain the state of the Presenter?
|
|
||
| class FormRangeSliderPresenter implements IRangeSliderPresenter { | ||
| private rangeSliderPresenter: IRangeSliderPresenter; | ||
| private localValues: number[]; |
There was a problem hiding this comment.
Not sure you even need this property. You can always derive labels from the value of rangeSliderPresenter.
There was a problem hiding this comment.
Before the admin-ui component supported both controlled and uncontrolled states, like the Radix UI base components. (Radix UI docs, see value and defaultValue).
Now the admin-ui component does not support the defaultValue component, developers must provide externally controlled value and onValueChange callback. Doing so we can derive labels from values.
| @@ -15,10 +14,10 @@ type Props = FormComponentProps & { | |||
| description?: string; | |||
|
|
|||
| // The minimum value of the Slider. | |||
| min: number | string; | |||
| min?: number | string; | |||
There was a problem hiding this comment.
Why is string supported?
There was a problem hiding this comment.
No idea 😄 it's coming from the previous implementation
Changes
This PR introduces two new components to the
@webiny/admin-uipackage:SliderRangeSlideralong with their form variants.
Basic Component (
<Slider />)For the base slider, two components are exported:
<ComposableSlider />: Accepts subcomponent VMs (ViewModels) and renders Radix UI components. This component serves as the foundation for both the simple and form variants.<Slider />: Receives custom-designed props, retrieves the necessary VMs via the presenter, and passes them to<ComposableSlider />.The component state is managed by a presenter and linked to the main component through a dedicated hook, such as
useSlider(). This hook acts as the composition root in React, establishing a three-layered architecture:SliderPresenter.ts): Initializes with the component props, manages the component’s state, and exposes the VMs.useSlider.ts): Serves as the composition root. It receives the component props, integrates with React, and returns the VMs.Slider.ts): Renders the Radix UI components.Form Component (
<Slider />)The form variant may need to manage its own state and use the simple component with others like
<Label />. In this scenario, the component state is managed by a presenter and linked to the main component through a dedicated hook.How Has This Been Tested?
Manually with Storybook + Presenter tested via Jest