Add more translatable strings

maplibre · Aug 15, 2024 · 0970145 · 0970145
1 parent 52ccd77
commit 0970145
Show file tree

Hide file tree

Showing 5 changed files with 122 additions and 51 deletions.
diff --git a/src/components/ModalSourcesTypeEditor.tsx b/src/components/ModalSourcesTypeEditor.tsx
@@ -8,6 +8,7 @@ import FieldDynamicArray from './FieldDynamicArray'
 import FieldArray from './FieldArray'
 import FieldJson from './FieldJson'
 import FieldCheckbox from './FieldCheckbox'
+import { WithTranslation, withTranslation } from 'react-i18next';
 
 export type EditorMode = "video" | "image" | "tilejson_vector" | "tilexyz_raster" | "tilejson_raster" | "tilexyz_raster-dem" | "tilejson_raster-dem" | "tilexyz_vector" | "geojson_url" | "geojson_json" | null;
 
@@ -17,14 +18,15 @@ type TileJSONSourceEditorProps = {
   }
   onChange(...args: unknown[]): unknown
   children?: React.ReactNode
-};
+} & WithTranslation;
 
 
 class TileJSONSourceEditor extends React.Component<TileJSONSourceEditorProps> {
   render() {
+    const t = this.props.t;
     return <div>
       <FieldUrl
-        label={"TileJSON URL"}
+        label={t("TileJSON URL")}
         fieldSpec={latest.source_vector.url}
         value={this.props.source.url}
         onChange={url => this.props.onChange({
@@ -45,7 +47,7 @@ type TileURLSourceEditorProps = {
   }
   onChange(...args: unknown[]): unknown
   children?: React.ReactNode
-};
+} & WithTranslation;
 
 class TileURLSourceEditor extends React.Component<TileURLSourceEditorProps> {
   changeTileUrls(tiles: string[]) {
@@ -58,7 +60,7 @@ class TileURLSourceEditor extends React.Component<TileURLSourceEditorProps> {
   renderTileUrls() {
     const tiles = this.props.source.tiles || [];
     return <FieldDynamicArray
-      label={"Tile URL"}
+      label={this.props.t("Tile URL")}
       fieldSpec={latest.source_vector.tiles}
       type="url"
       value={tiles}
@@ -67,10 +69,11 @@ class TileURLSourceEditor extends React.Component<TileURLSourceEditorProps> {
   }
 
   render() {
+    const t = this.props.t;
     return <div>
       {this.renderTileUrls()}
       <FieldNumber
-        label={"Min Zoom"}
+        label={t("Min Zoom")}
         fieldSpec={latest.source_vector.minzoom}
         value={this.props.source.minzoom || 0}
         onChange={minzoom => this.props.onChange({
@@ -79,7 +82,7 @@ class TileURLSourceEditor extends React.Component<TileURLSourceEditorProps> {
         })}
       />
       <FieldNumber
-        label={"Max Zoom"}
+        label={t("Max Zoom")}
         fieldSpec={latest.source_vector.maxzoom}
         value={this.props.source.maxzoom || 22}
         onChange={maxzoom => this.props.onChange({
@@ -99,10 +102,11 @@ type ImageSourceEditorProps = {
     url: string
   }
   onChange(...args: unknown[]): unknown
-};
+} & WithTranslation;
 
 class ImageSourceEditor extends React.Component<ImageSourceEditorProps> {
   render() {
+    const t = this.props.t;
     const changeCoord = (idx: number, val: [number, number]) => {
       const coordinates = this.props.source.coordinates.slice(0);
       coordinates[idx] = val;
@@ -113,21 +117,28 @@ class ImageSourceEditor extends React.Component<ImageSourceEditorProps> {
       });
     }
 
+    const cornerLabels: { label: string, key: string }[] = [
+      { label: t("Coord top left"), key: "top left" },
+      { label: t("Coord top right"), key: "top right" },
+      { label: t("Coord bottom right"), key: "bottom right" },
+      { label: t("Coord bottom left"), key: "bottom left" },
+    ];
+
     return <div>
       <FieldUrl
-        label={"Image URL"}
+        label={t("Image URL")}
         fieldSpec={latest.source_image.url}
         value={this.props.source.url}
         onChange={url => this.props.onChange({
           ...this.props.source,
           url,
         })}
       />
-      {["top left", "top right", "bottom right", "bottom left"].map((label, idx) => {
+      {cornerLabels.map(({label, key}, idx) => {
         return (
           <FieldArray
-            label={`Coord ${label}`}
-            key={label}
+            label={label}
+            key={key}
             length={2}
             type="number"
             value={this.props.source.coordinates[idx]}
@@ -146,10 +157,11 @@ type VideoSourceEditorProps = {
     urls: string[]
   }
   onChange(...args: unknown[]): unknown
-};
+} & WithTranslation;
 
 class VideoSourceEditor extends React.Component<VideoSourceEditorProps> {
   render() {
+    const t = this.props.t;
     const changeCoord = (idx: number, val: [number, number]) => {
       const coordinates = this.props.source.coordinates.slice(0);
       coordinates[idx] = val;
@@ -167,20 +179,27 @@ class VideoSourceEditor extends React.Component<VideoSourceEditorProps> {
       });
     }
 
+    const cornerLabels: { label: string, key: string }[] = [
+      { label: t("Coord top left"), key: "top left" },
+      { label: t("Coord top right"), key: "top right" },
+      { label: t("Coord bottom right"), key: "bottom right" },
+      { label: t("Coord bottom left"), key: "bottom left" },
+    ];
+
     return <div>
       <FieldDynamicArray
-        label={"Video URL"}
+        label={t("Video URL")}
         fieldSpec={latest.source_video.urls}
         type="string"
         value={this.props.source.urls}
         default={[]}
         onChange={changeUrls}
       />
-      {["top left", "top right", "bottom right", "bottom left"].map((label, idx) => {
+      {cornerLabels.map(({label, key}, idx) => {
         return (
           <FieldArray
-            label={`Coord ${label}`}
-            key={label}
+            label={label}
+            key={key}
             length={2}
             type="number"
             value={this.props.source.coordinates[idx]}
@@ -198,12 +217,13 @@ type GeoJSONSourceUrlEditorProps = {
     data: string
   }
   onChange(...args: unknown[]): unknown
-};
+} & WithTranslation;
 
 class GeoJSONSourceUrlEditor extends React.Component<GeoJSONSourceUrlEditorProps> {
   render() {
+    const t = this.props.t;
     return <FieldUrl
-      label={"GeoJSON URL"}
+      label={t("GeoJSON URL")}
       fieldSpec={latest.source_geojson.data}
       value={this.props.source.data}
       onChange={data => this.props.onChange({
@@ -220,12 +240,13 @@ type GeoJSONSourceFieldJsonEditorProps = {
     cluster: boolean
   }
   onChange(...args: unknown[]): unknown
-};
+} & WithTranslation;
 
 class GeoJSONSourceFieldJsonEditor extends React.Component<GeoJSONSourceFieldJsonEditorProps> {
   render() {
+    const t = this.props.t;
     return <div>
-      <Block label={"GeoJSON"} fieldSpec={latest.source_geojson.data}>
+      <Block label={t("GeoJSON")} fieldSpec={latest.source_geojson.data}>
         <FieldJson
           layer={this.props.source.data}
           maxHeight={200}
@@ -243,7 +264,7 @@ class GeoJSONSourceFieldJsonEditor extends React.Component<GeoJSONSourceFieldJso
         />
       </Block>
       <FieldCheckbox
-        label={'Cluster'}
+        label={t('Cluster')}
         value={this.props.source.cluster}
         onChange={cluster => {
           this.props.onChange({
@@ -256,18 +277,22 @@ class GeoJSONSourceFieldJsonEditor extends React.Component<GeoJSONSourceFieldJso
   }
 }
 
-type ModalSourcesTypeEditorProps = {
+type ModalSourcesTypeEditorInternalProps = {
   mode: EditorMode
   source: any
   onChange(...args: unknown[]): unknown
-};
+} & WithTranslation;
 
-export default class ModalSourcesTypeEditor extends React.Component<ModalSourcesTypeEditorProps> {
+class ModalSourcesTypeEditorInternal extends React.Component<ModalSourcesTypeEditorInternalProps> {
   render() {
+    const t = this.props.t;
     const commonProps = {
       source: this.props.source,
       onChange: this.props.onChange,
-    }
+      t: this.props.t,
+      i18n: this.props.i18n,
+      tReady: this.props.tReady,
+    };
     switch(this.props.mode) {
     case 'geojson_url': return <GeoJSONSourceUrlEditor {...commonProps} />
     case 'geojson_json': return <GeoJSONSourceFieldJsonEditor {...commonProps} />
@@ -278,7 +303,7 @@ export default class ModalSourcesTypeEditor extends React.Component<ModalSources
     case 'tilejson_raster-dem': return <TileJSONSourceEditor {...commonProps} />
     case 'tilexyz_raster-dem': return <TileURLSourceEditor {...commonProps}>
       <FieldSelect
-        label={"Encoding"}
+        label={t("Encoding")}
         fieldSpec={latest.source_raster_dem.encoding}
         options={Object.keys(latest.source_raster_dem.encoding.values)}
         onChange={encoding => this.props.onChange({
@@ -295,3 +320,5 @@ export default class ModalSourcesTypeEditor extends React.Component<ModalSources
   }
 }
 
+const ModalSourcesTypeEditor = withTranslation()(ModalSourcesTypeEditorInternal);
+export default ModalSourcesTypeEditor;
diff --git a/src/components/ModalSurvey.tsx b/src/components/ModalSurvey.tsx
@@ -1,38 +1,42 @@
 import React from 'react'
+import { WithTranslation, withTranslation } from 'react-i18next';
 
 import InputButton from './InputButton'
 import Modal from './Modal'
 
 // @ts-ignore
 import logoImage from 'maputnik-design/logos/logo-color.svg'
 
-type ModalSurveyProps = {
+type ModalSurveyInternalProps = {
   isOpen: boolean
   onOpenToggle(...args: unknown[]): unknown
-};
+} & WithTranslation;
 
-export default class ModalSurvey extends React.Component<ModalSurveyProps> {
+class ModalSurveyInternal extends React.Component<ModalSurveyInternalProps> {
   onClick = () => {
     window.open('https://gregorywolanski.typeform.com/to/cPgaSY', '_blank');
 
     this.props.onOpenToggle();
   }
 
   render() {
+    const t = this.props.t;
     return <Modal
       data-wd-key="modal:survey"
       isOpen={this.props.isOpen}
       onOpenToggle={this.props.onOpenToggle}
-      title="Maputnik Survey"
+      title={t("Maputnik Survey")}
     >
       <div className="maputnik-modal-survey">
         <img src={logoImage} className="maputnik-modal-survey__logo" />
-        <h1>You + Maputnik = Maputnik better for you</h1>
-        <p className="maputnik-modal-survey__description">We don’t track you, so we don’t know how you use Maputnik. Help us make Maputnik better for you by completing a 7–minute survey carried out by our contributing designer.</p>
-        <InputButton onClick={this.onClick} className="maputnik-big-button maputnik-white-button maputnik-wide-button">Take the Maputnik Survey</InputButton>
-        <p className="maputnik-modal-survey__footnote">It takes 7 minutes, tops! Every question is optional.</p>
+        <h1>{t("You + Maputnik = Maputnik better for you")}</h1>
+        <p className="maputnik-modal-survey__description">{t("We don’t track you, so we don’t know how you use Maputnik. Help us make Maputnik better for you by completing a 7–minute survey carried out by our contributing designer.")}</p>
+        <InputButton onClick={this.onClick} className="maputnik-big-button maputnik-white-button maputnik-wide-button">{t("Take the Maputnik Survey")}</InputButton>
+        <p className="maputnik-modal-survey__footnote">{t("It takes 7 minutes, tops! Every question is optional.")}</p>
       </div>
     </Modal>
   }
 }
 
+const ModalSurvey = withTranslation()(ModalSurveyInternal);
+export default ModalSurvey;
diff --git a/src/components/SmallError.tsx b/src/components/SmallError.tsx
@@ -1,18 +1,22 @@
 import React from 'react'
+import { WithTranslation, withTranslation } from 'react-i18next';
 import './SmallError.scss';
 
 
-type SmallErrorProps = {
+type SmallErrorInternalProps = {
   children?: React.ReactNode
-};
+} & WithTranslation;
 
-
-export default class SmallError extends React.Component<SmallErrorProps> {
+class SmallErrorInternal extends React.Component<SmallErrorInternalProps> {
   render () {
+    const t = this.props.t;
     return (
       <div className="SmallError">
-        Error: {this.props.children}
+        {t("Error:")} {this.props.children}
       </div>
     );
   }
-}
+}
+
+const SmallError = withTranslation()(SmallErrorInternal);
+export default SmallError;
diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json
@@ -171,6 +171,24 @@
   "Add one of the publicly available sources to your style.": "Add one of the publicly available sources to your style.",
   "Add New Source": "Add New Source",
   "Add a new source to your style. You can only choose the source type and id at creation time!": "Add a new source to your style. You can only choose the source type and id at creation time!",
+  "TileJSON URL": "TileJSON URL",
+  "Tile URL": "Tile URL",
+  "Coord top left": "Coord top left",
+  "Coord top right": "Coord top right",
+  "Coord bottom right": "Coord bottom right",
+  "Coord bottom left": "Coord bottom left",
+  "Image URL": "Image URL",
+  "Video URL": "Video URL",
+  "GeoJSON URL": "GeoJSON URL",
+  "GeoJSON": "GeoJSON",
+  "Cluster": "Cluster",
+  "Encoding": "Encoding",
+  "Maputnik Survey": "Maputnik Survey",
+  "You + Maputnik = Maputnik better for you": "You + Maputnik = Maputnik better for you",
+  "We don’t track you, so we don’t know how you use Maputnik. Help us make Maputnik better for you by completing a 7–minute survey carried out by our contributing designer.": "We don’t track you, so we don’t know how you use Maputnik. Help us make Maputnik better for you by completing a 7–minute survey carried out by our contributing designer.",
+  "Take the Maputnik Survey": "Take the Maputnik Survey",
+  "It takes 7 minutes, tops! Every question is optional.": "It takes 7 minutes, tops! Every question is optional.",
+  "Error:": "Error:",
   "Zoom: {{zoom}}": "Zoom: {{zoom}}",
   "ID": "ID",
   "Nested filters are not supported": "Nested filters are not supported."