153 lines
4.7 KiB
Python
153 lines
4.7 KiB
Python
"""A range slider component."""
|
|
from __future__ import annotations
|
|
|
|
from typing import Any, List, Optional, Union
|
|
|
|
from reflex.components.chakra import ChakraComponent, LiteralChakraDirection
|
|
from reflex.components.component import Component
|
|
from reflex.constants import EventTriggers
|
|
from reflex.utils import format
|
|
from reflex.vars import Var
|
|
|
|
|
|
class RangeSlider(ChakraComponent):
|
|
"""The RangeSlider is a multi thumb slider used to select a range of related values. A common use-case of this component is a price range picker that allows a user to set the minimum and maximum price."""
|
|
|
|
tag: str = "RangeSlider"
|
|
|
|
# State var to bind the the input.
|
|
value: Optional[Var[List[int]]] = None
|
|
|
|
# The default values.
|
|
default_value: Optional[Var[List[int]]] = None
|
|
|
|
# The writing mode ("ltr" | "rtl")
|
|
direction: Optional[Var[LiteralChakraDirection]] = None
|
|
|
|
# If false, the slider handle will not capture focus when value changes.
|
|
focus_thumb_on_change: Optional[Var[bool]] = None
|
|
|
|
# If true, the slider will be disabled
|
|
is_disabled: Optional[Var[bool]] = None
|
|
|
|
# If true, the slider will be in `read-only` state.
|
|
is_read_only: Optional[Var[bool]] = None
|
|
|
|
# If true, the value will be incremented or decremented in reverse.
|
|
is_reversed: Optional[Var[bool]] = None
|
|
|
|
# The minimum value of the slider.
|
|
min_: Optional[Var[int]] = None
|
|
|
|
# The maximum value of the slider.
|
|
max_: Optional[Var[int]] = None
|
|
|
|
# The minimum distance between slider thumbs. Useful for preventing the thumbs from being too close together.
|
|
min_steps_between_thumbs: Optional[Var[int]] = None
|
|
|
|
# The name of the form field
|
|
name: Optional[Var[str]] = None
|
|
|
|
def get_event_triggers(self) -> dict[str, Union[Var, Any]]:
|
|
"""Get the event triggers that pass the component's value to the handler.
|
|
|
|
Returns:
|
|
A dict mapping the event trigger to the var that is passed to the handler.
|
|
"""
|
|
return {
|
|
**super().get_event_triggers(),
|
|
EventTriggers.ON_CHANGE: lambda e0: [e0],
|
|
EventTriggers.ON_CHANGE_END: lambda e0: [e0],
|
|
EventTriggers.ON_CHANGE_START: lambda e0: [e0],
|
|
}
|
|
|
|
def get_ref(self):
|
|
"""Get the ref of the component.
|
|
|
|
Returns:
|
|
The ref of the component.
|
|
"""
|
|
return None
|
|
|
|
def _get_ref_hook(self) -> Optional[str]:
|
|
"""Override the base _get_ref_hook to handle array refs.
|
|
|
|
Returns:
|
|
The overrided hooks.
|
|
"""
|
|
if self.id:
|
|
ref = format.format_array_ref(self.id, None)
|
|
if ref:
|
|
return (
|
|
f"const {ref} = Array.from({{length:2}}, () => useRef(null)); "
|
|
f"{str(Var.create_safe(ref).as_ref())} = {ref}"
|
|
)
|
|
return super()._get_ref_hook()
|
|
|
|
@classmethod
|
|
def create(cls, *children, **props) -> Component:
|
|
"""Create a RangeSlider component.
|
|
|
|
If no children are provided, a default RangeSlider will be created.
|
|
|
|
Args:
|
|
*children: The children of the component.
|
|
**props: The properties of the component.
|
|
|
|
Returns:
|
|
The RangeSlider component.
|
|
"""
|
|
if len(children) == 0:
|
|
_id = props.get("id", None)
|
|
if _id:
|
|
children = [
|
|
RangeSliderTrack.create(
|
|
RangeSliderFilledTrack.create(),
|
|
),
|
|
RangeSliderThumb.create(index=0, id=_id),
|
|
RangeSliderThumb.create(index=1, id=_id),
|
|
]
|
|
else:
|
|
children = [
|
|
RangeSliderTrack.create(
|
|
RangeSliderFilledTrack.create(),
|
|
),
|
|
RangeSliderThumb.create(index=0),
|
|
RangeSliderThumb.create(index=1),
|
|
]
|
|
return super().create(*children, **props)
|
|
|
|
|
|
class RangeSliderTrack(ChakraComponent):
|
|
"""A range slider track."""
|
|
|
|
tag: str = "RangeSliderTrack"
|
|
|
|
|
|
class RangeSliderFilledTrack(ChakraComponent):
|
|
"""A filled range slider track."""
|
|
|
|
tag: str = "RangeSliderFilledTrack"
|
|
|
|
|
|
class RangeSliderThumb(ChakraComponent):
|
|
"""A range slider thumb."""
|
|
|
|
tag: str = "RangeSliderThumb"
|
|
|
|
# The position of the thumb.
|
|
index: Optional[Var[int]] = None
|
|
|
|
def _get_ref_hook(self) -> Optional[str]:
|
|
# hook is None because RangeSlider is handling it.
|
|
return None
|
|
|
|
def get_ref(self):
|
|
"""Get an array ref for the range slider thumb.
|
|
|
|
Returns:
|
|
The array ref.
|
|
"""
|
|
if self.id:
|
|
return format.format_array_ref(self.id, self.index)
|