progress.py 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596
  1. """Progress."""
  2. from __future__ import annotations
  3. from types import SimpleNamespace
  4. from typing import Optional
  5. from reflex.components.component import Component
  6. from reflex.components.radix.primitives.accordion import DEFAULT_ANIMATION_DURATION
  7. from reflex.components.radix.primitives.base import RadixPrimitiveComponentWithClassName
  8. from reflex.style import Style
  9. from reflex.vars import Var
  10. class ProgressComponent(RadixPrimitiveComponentWithClassName):
  11. """A Progress component."""
  12. library = "@radix-ui/react-progress@^1.0.3"
  13. class ProgressRoot(ProgressComponent):
  14. """The Progress Root component."""
  15. tag = "Root"
  16. alias = "RadixProgressRoot"
  17. # The current progress value.
  18. value: Var[Optional[int]]
  19. # The maximum progress value.
  20. max: Var[int]
  21. def _apply_theme(self, theme: Component):
  22. self.style = Style(
  23. {
  24. "position": "relative",
  25. "overflow": "hidden",
  26. "background": "var(--gray-a3)",
  27. "border_radius": "99999px",
  28. "width": "100%",
  29. "height": "20px",
  30. "boxShadow": "inset 0 0 0 1px var(--gray-a5)",
  31. **self.style,
  32. }
  33. )
  34. class ProgressIndicator(ProgressComponent):
  35. """The Progress bar indicator."""
  36. tag = "Indicator"
  37. alias = "RadixProgressIndicator"
  38. # The current progress value.
  39. value: Var[Optional[int]]
  40. def _apply_theme(self, theme: Component):
  41. self.style = Style(
  42. {
  43. "background-color": "var(--accent-9)",
  44. "width": "100%",
  45. "height": "100%",
  46. f"transition": f"transform {DEFAULT_ANIMATION_DURATION}ms linear",
  47. "&[data_state='loading']": {
  48. "transition": f"transform {DEFAULT_ANIMATION_DURATION}ms linear",
  49. },
  50. "transform": f"translateX(-{100 - self.value}%)", # type: ignore
  51. "boxShadow": "inset 0 0 0 1px var(--gray-a5)",
  52. }
  53. )
  54. class Progress(SimpleNamespace):
  55. """High level API for progress bar."""
  56. root = staticmethod(ProgressRoot.create)
  57. indicator = staticmethod(ProgressIndicator.create)
  58. @staticmethod
  59. def __call__(**props) -> Component:
  60. """High level API for progress bar.
  61. Args:
  62. **props: The props of the progress bar
  63. Returns:
  64. The progress bar.
  65. """
  66. return ProgressRoot.create(
  67. ProgressIndicator.create(value=props.get("value")),
  68. **props,
  69. )
  70. progress = Progress()