Support `locale` prop for `rx.moment` (#4229)

reflex/components/moment/moment.py

@@ -3,10 +3,10 @@
 import dataclasses
 from typing import List, Optional
 
-from reflex.components.component import Component, NoSSRComponent
+from reflex.components.component import NoSSRComponent
 from reflex.event import EventHandler, identity_event
 from reflex.utils.imports import ImportDict
-from reflex.vars.base import Var
+from reflex.vars.base import LiteralVar, Var
 
 
 @dataclasses.dataclass(frozen=True)
@@ -92,6 +92,9 @@ class Moment(NoSSRComponent):
     # Display the date in the given timezone.
     tz: Var[str]
 
+    # The locale to use when rendering.
+    locale: Var[str]
+
     # Fires when the date changes.
     on_change: EventHandler[identity_event(str)]
 
@@ -101,22 +104,15 @@ class Moment(NoSSRComponent):
         Returns:
             The import dict for the component.
         """
+        imports = {}
+
+        if isinstance(self.locale, LiteralVar):
+            imports[""] = f"moment/locale/{self.locale._var_value}"
+        elif self.locale is not None:
+            # If the user is using a variable for the locale, we can't know the
+            # value at compile time so import all locales available.
+            imports[""] = "moment/min/locales"
         if self.tz is not None:
-            return {"moment-timezone": ""}
-        return {}
-
-    @classmethod
-    def create(cls, *children, **props) -> Component:
-        """Create a Moment component.
-
-        Args:
-            *children: The children of the component.
-            **props: The properties of the component.
+            imports["moment-timezone"] = ""
 
-        Returns:
-            The Moment Component.
-        """
-        comp = super().create(*children, **props)
-        if "tz" in props:
-            comp.lib_dependencies.append("moment-timezone")
-        return comp
+        return imports

reflex/components/moment/moment.pyi

@@ -51,6 +51,7 @@ class Moment(NoSSRComponent):
         unix: Optional[Union[Var[bool], bool]] = None,
         local: Optional[Union[Var[bool], bool]] = None,
         tz: Optional[Union[Var[str], str]] = None,
+        locale: Optional[Union[Var[str], str]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
@@ -75,7 +76,7 @@ class Moment(NoSSRComponent):
         on_unmount: Optional[EventType[[]]] = None,
         **props,
     ) -> "Moment":
-        """Create a Moment component.
+        """Create the component.
 
         Args:
             *children: The children of the component.
@@ -99,15 +100,16 @@ class Moment(NoSSRComponent):
             unix: Tells Moment to parse the given date value as a unix timestamp.
             local: Outputs the result in local time.
             tz: Display the date in the given timezone.
+            locale: The locale to use when rendering.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
             custom_attrs: custom attribute
-            **props: The properties of the component.
+            **props: The props of the component.
 
         Returns:
-            The Moment Component.
+            The component.
         """
         ...