Merge pull request #42 from ScalablyTyped/native-duration-locale

React native localized duration

antd/src/main/scala/demo/App.scala

@@ -446,7 +446,13 @@ object CSS extends js.Any
         .onChange { (values: RangeValue[Moment], formatString: js.Tuple2[String, String]) =>
           console.log(formatString)
           updateRangePickerValues(values)
-        }
+        },
+      div(b("Note that moment.js date times are ready to be localized")),
+      div(s"moment.js current locale: ${moment().locale()}"),
+      div(s"moment.js duration en_US: ${moment().locale("en_US").fromNow()}"),
+      div(s"moment.js duration es_ES: ${moment().locale("es_ES").fromNow()}"),
+      div(s"moment.js duration fr_FR: ${moment().locale("fr_FR").fromNow()}"),
+      div(s"moment.js duration it_IT: ${moment().locale("it_IT").fromNow()}")
     )
 
     val renderTreeSelect = section(

react-native/package.json

@@ -27,13 +27,15 @@
     "expo-av": "~8.2.1",
     "expo-font": "~8.2.1",
     "expo-constants": "~9.1.1",
+    "expo-localization": "~8.2.1",
     "expo-web-browser": "~8.2.1",
     "react": "16.11.0",
     "react-native": "https://github.com/expo/react-native/archive/sdk-38.0.2.tar.gz",
     "react-router-native": "5.1.2",
     "react-native-webview": "10.8.2",
     "typescript": "~3.9.5",
-    "url": "~0.11.0"
+    "url": "~0.11.0",
+    "moment": "2.29.1"
   },
   "devDependencies": {
     "@babel/core": "^7.9.0",

react-native/src/main/scala/hello/world/App.scala

@@ -19,10 +19,11 @@ import scala.scalajs.js.|
     object Home extends RoutePath("/", "Home")
     object Antd extends RoutePath("/antd", "Antd")
     object PlayAudio extends RoutePath("/audio", "PlayAudio")
+    object Duration extends RoutePath("/duration", "Duration")
     object Webview extends RoutePath("/webview", "Webview")
     object ReactRouter extends RoutePath("/react_router", "React Router")
 
-    val allOrdered: List[RoutePath] = List(Home, Antd, PlayAudio, Webview, ReactRouter)
+    val allOrdered: List[RoutePath] = List(Home, Antd, PlayAudio, Webview, Duration, ReactRouter)
   }
 
   type Props = Unit
@@ -65,6 +66,11 @@ import scala.scalajs.js.|
                     .setPath(RoutePath.Webview.path)
                     .setRender(_ => Webview())
                 ),
+                Route(
+                  RouteProps()
+                    .setPath(RoutePath.Duration.path)
+                    .setRender(_ => Duration())
+                ),
                 Route(
                   RouteProps()
                     .setPath(RoutePath.ReactRouter.path)

react-native/src/main/scala/hello/world/Duration.scala

@@ -0,0 +1,48 @@
+package hello.world
+
+import slinky.core.FunctionalComponent
+import slinky.core.annotations.react
+import slinky.core.facade.Hooks.useState
+import slinky.native.{Text, View}
+import typings.antDesignReactNative.components._
+import typings.antDesignReactNative.{antDesignReactNativeStrings => antdStrings}
+import typings.expoLocalization.mod.locale
+import typings.moment.mod.{^ => moment}
+import typings.reactNative.mod.{TextStyle, ViewStyle}
+
+import scala.scalajs.js
+import scala.scalajs.js.annotation.JSImport
+
+@JSImport("moment/locale/es", JSImport.Namespace)
+@js.native
+object es extends js.Object
+
+@JSImport("moment/locale/fr", JSImport.Namespace)
+@js.native
+object fr extends js.Object
+
+@JSImport("moment/locale/it", JSImport.Namespace)
+@js.native
+object it extends js.Object
+
+@react object Duration {
+
+  type Props = Unit
+
+  val component = FunctionalComponent[Props] { _ =>
+
+    val locales = (es, fr, it)
+
+    View(style = ViewStyle().setMargin(20))(
+      Text(style = TextStyle().setFontSize(16))("Localized duration"),
+      WhiteSpace().size(antdStrings.md),
+      Text(s"Expo current locale: $locale"),
+      WhiteSpace().size(antdStrings.md),
+      Text(s"moment.js current locale: ${moment().locale()}"),
+      Text(s"moment.js duration en_US: ${moment().locale("en_US").fromNow()}"),
+      Text(s"moment.js duration es_ES: ${moment().locale("es_ES").fromNow()}"),
+      Text(s"moment.js duration fr_FR: ${moment().locale("fr_FR").fromNow()}"),
+      Text(s"moment.js duration it_IT: ${moment().locale("it_IT").fromNow()}"),
+    )
+  }
+}

react-native/yarn.lock

@@ -2605,6 +2605,13 @@ expo-linking@~1.0.3:
     qs "^6.5.0"
     url-parse "^1.4.4"
 
+expo-localization@~8.2.1:
+  version "8.2.1"
+  resolved "https://registry.yarnpkg.com/expo-localization/-/expo-localization-8.2.1.tgz#99d422670d9e4261268f1feed9c4d228183a745b"
+  integrity sha512-T2S1J6L0VaKdiO10kQk690GGMdO990zKXKGvdw5D8UEfoFomXh0W2CTtfqN2HCkkpc7iqvn7MYaKN0yJxu+jJQ==
+  dependencies:
+    rtl-detect "^1.0.2"
+
 expo-location@~8.2.1:
   version "8.2.1"
   resolved "https://registry.yarnpkg.com/expo-location/-/expo-location-8.2.1.tgz#5ea6bfd3d211939117416da151f1384caa15e0db"
@@ -4141,6 +4148,11 @@ mkdirp@^0.5.1:
   dependencies:
     minimist "^1.2.5"
 
+[email protected]:
+  version "2.29.1"
+  resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.1.tgz#b2be769fa31940be9eeea6469c075e35006fa3d3"
+  integrity sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ==
+
 [email protected]:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
@@ -4992,6 +5004,11 @@ rsvp@^4.8.4:
   resolved "https://registry.yarnpkg.com/rsvp/-/rsvp-4.8.5.tgz#c8f155311d167f68f21e168df71ec5b083113734"
   integrity sha512-nfMOlASu9OnRJo1mbEk2cz0D56a1MBNrJ7orjRZQG10XDyuvwksKbuXNp6qa+kbn839HwjwhBzhFmdsaEAfauA==
 
+rtl-detect@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/rtl-detect/-/rtl-detect-1.0.2.tgz#8eca316f5c6563d54df4e406171dd7819adda67f"
+  integrity sha512-5X1422hvphzg2a/bo4tIDbjFjbJUOaPZwqE6dnyyxqwFqfR+tBcvfqapJr0o0VygATVCGKiODEewhZtKF+90AA==
+
 run-async@^2.2.0:
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/run-async/-/run-async-2.4.1.tgz#8440eccf99ea3e70bd409d49aab88e10c189a455"