diff --git a/antd/src/main/scala/demo/App.scala b/antd/src/main/scala/demo/App.scala index 08771d4..a9ea32f 100644 --- a/antd/src/main/scala/demo/App.scala +++ b/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( diff --git a/react-native/package.json b/react-native/package.json index 2b7b659..0c1e9ba 100644 --- a/react-native/package.json +++ b/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", diff --git a/react-native/src/main/scala/hello/world/App.scala b/react-native/src/main/scala/hello/world/App.scala index 407b7e5..93f6ffd 100644 --- a/react-native/src/main/scala/hello/world/App.scala +++ b/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) diff --git a/react-native/src/main/scala/hello/world/Duration.scala b/react-native/src/main/scala/hello/world/Duration.scala new file mode 100644 index 0000000..e1221ff --- /dev/null +++ b/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()}"), + ) + } +} diff --git a/react-native/yarn.lock b/react-native/yarn.lock index 4eb66c6..8a29baf 100644 --- a/react-native/yarn.lock +++ b/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" +moment@2.29.1: + version "2.29.1" + resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.1.tgz#b2be769fa31940be9eeea6469c075e35006fa3d3" + integrity sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ== + ms@2.0.0: 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"