rangeslider.py 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144
  1. """A range slider component."""
  2. from typing import Dict, List, Optional
  3. from reflex.components.component import Component
  4. from reflex.components.libs.chakra import ChakraComponent
  5. from reflex.event import EVENT_ARG
  6. from reflex.utils import format
  7. from reflex.vars import Var
  8. class RangeSlider(ChakraComponent):
  9. """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."""
  10. tag = "RangeSlider"
  11. # State var to bind the the input.
  12. value: Var[List[int]]
  13. # The default values.
  14. default_value: Var[List[int]]
  15. # The writing mode ("ltr" | "rtl")
  16. direction: Var[str]
  17. # If false, the slider handle will not capture focus when value changes.
  18. focus_thumb_on_change: Var[bool]
  19. # If true, the slider will be disabled
  20. is_disabled: Var[bool]
  21. # If true, the slider will be in `read-only` state.
  22. is_read_only: Var[bool]
  23. # If true, the value will be incremented or decremented in reverse.
  24. is_reversed: Var[bool]
  25. # The minimum value of the slider.
  26. min_: Var[int]
  27. # The maximum value of the slider.
  28. max_: Var[int]
  29. # The minimum distance between slider thumbs. Useful for preventing the thumbs from being too close together.
  30. min_steps_between_thumbs: Var[int]
  31. def get_controlled_triggers(self) -> Dict[str, Var]:
  32. """Get the event triggers that pass the component's value to the handler.
  33. Returns:
  34. A dict mapping the event trigger to the var that is passed to the handler.
  35. """
  36. return {
  37. "on_change": EVENT_ARG,
  38. "on_change_end": EVENT_ARG,
  39. "on_change_start": EVENT_ARG,
  40. }
  41. def get_ref(self):
  42. """Get the ref of the component.
  43. Returns:
  44. The ref of the component.
  45. """
  46. return None
  47. def _get_ref_hook(self) -> Optional[str]:
  48. """Override the base _get_ref_hook to handle array refs.
  49. Returns:
  50. The overrided hooks.
  51. """
  52. if self.id:
  53. ref = format.format_array_ref(self.id, None)
  54. if ref:
  55. return f"const {ref} = Array.from({{length:2}}, () => useRef(null));"
  56. return super()._get_ref_hook()
  57. @classmethod
  58. def create(cls, *children, **props) -> Component:
  59. """Create a RangeSlider component.
  60. If no children are provided, a default RangeSlider will be created.
  61. Args:
  62. children: The children of the component.
  63. props: The properties of the component.
  64. Returns:
  65. The RangeSlider component.
  66. """
  67. if len(children) == 0:
  68. _id = props.get("id", None)
  69. if _id:
  70. children = [
  71. RangeSliderTrack.create(
  72. RangeSliderFilledTrack.create(),
  73. ),
  74. RangeSliderThumb.create(index=0, id=_id),
  75. RangeSliderThumb.create(index=1, id=_id),
  76. ]
  77. else:
  78. children = [
  79. RangeSliderTrack.create(
  80. RangeSliderFilledTrack.create(),
  81. ),
  82. RangeSliderThumb.create(index=0),
  83. RangeSliderThumb.create(index=1),
  84. ]
  85. return super().create(*children, **props)
  86. class RangeSliderTrack(ChakraComponent):
  87. """A range slider track."""
  88. tag = "RangeSliderTrack"
  89. class RangeSliderFilledTrack(ChakraComponent):
  90. """A filled range slider track."""
  91. tag = "RangeSliderFilledTrack"
  92. class RangeSliderThumb(ChakraComponent):
  93. """A range slider thumb."""
  94. tag = "RangeSliderThumb"
  95. # The position of the thumb.
  96. index: Var[int]
  97. def _get_ref_hook(self) -> Optional[str]:
  98. # hook is None because RangeSlider is handling it.
  99. return None
  100. def get_ref(self):
  101. """Get an array ref for the range slider thumb.
  102. Returns:
  103. The array ref.
  104. """
  105. if self.id:
  106. return format.format_array_ref(self.id, self.index)