progress.py 2.1 KB

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