feat: add i18n support to YearMonthField

Close #64

Author: Felipe Lang

src/main/java/com/flowingcode/addons/ycalendar/YearMonthField.java

@@ -22,9 +22,12 @@
 import com.vaadin.flow.component.AbstractSinglePropertyField;
 import com.vaadin.flow.component.HasTheme;
 import com.vaadin.flow.component.Tag;
+import com.vaadin.flow.component.datepicker.DatePicker.DatePickerI18n;
 import com.vaadin.flow.component.dependency.JsModule;
 import com.vaadin.flow.function.SerializableFunction;
+import com.vaadin.flow.internal.JsonSerializer;
 import java.time.YearMonth;
+import java.util.Objects;
 import java.util.Optional;
 
 @SuppressWarnings("serial")
@@ -43,5 +46,15 @@ public <P> YearMonthField() {
     super(VALUE_PROPERTY, null, String.class, map(YearMonth::parse), map(YearMonth::toString));
     setValue(YearMonth.now());
   }  
-
+  
+  /**
+   * Sets the i18n object.
+   *
+   * @param i18n the DatepickerI18n object used to initialize i18n
+   */
+  public void setI18n(DatePickerI18n i18n) {
+    Objects.requireNonNull(i18n, "The I18N properties object should not be null");
+    getElement().setPropertyJson("i18n", JsonSerializer.toJson(i18n));
+  }
+  
 }

src/main/resources/META-INF/frontend/fc-year-month-field/fc-year-month-field.js

@@ -35,24 +35,26 @@ export class YearMonthField extends LitElement {
 
   constructor() {
     super();
-    this.i18n = {
-        formatTitle : (monthName, fullYear) => monthName + ' ' + fullYear,
-        monthNames: [
-            'January',
-            'February',
-            'March',
-            'April',
-            'May',
-            'June',
-            'July',
-            'August',
-            'September',
-            'October',
-            'November',
-            'December'
-        ],
-      };
+    
+    this._i18n = {};
+    this.__setDefaultFormatTitle(this._i18n);
+	this.__setDefaultMonthNames(this._i18n);
   }
+  
+  set i18n(value) {
+    let oldValue = this._i18n;
+    this._i18n = value;
+	  
+    if(!this._i18n.formatTitle){
+      this.__setDefaultFormatTitle(this._i18n);
+    }
+    if(!this._i18n.monthNames){
+      this.__setDefaultMonthNames(this._i18n);
+    }
+    this.requestUpdate('i18n', oldValue);
+  }
+  
+  get i18n() { return this._i18n; }
 
   willUpdate(changedProperties) {
     if (changedProperties.has('value')) {
@@ -128,7 +130,15 @@ export class YearMonthField extends LitElement {
   __incMonth() {
     this.__addMonths(1); 
   }
- 
+
+  __setDefaultFormatTitle(obj){
+    obj.formatTitle = (monthName, fullYear) => monthName + ' ' + fullYear;
+  }
+
+  __setDefaultMonthNames(obj){
+    obj.monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
+  }
+
 }
 
 customElements.define(YearMonthField.is, YearMonthField);

src/test/java/com/flowingcode/addons/ycalendar/YearMonthFieldDemo.java

@@ -20,24 +20,48 @@
 package com.flowingcode.addons.ycalendar;
 
 import com.flowingcode.vaadin.addons.demo.DemoSource;
-import com.vaadin.flow.component.dependency.CssImport;
+import com.vaadin.flow.component.datepicker.DatePicker.DatePickerI18n;
 import com.vaadin.flow.component.html.Div;
-import com.vaadin.flow.component.html.Span;
-import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
+import com.vaadin.flow.component.radiobutton.RadioButtonGroup;
 import com.vaadin.flow.router.PageTitle;
 import com.vaadin.flow.router.Route;
-import java.time.DayOfWeek;
+import java.util.List;
 
 @DemoSource
 @PageTitle("Year-Month Field")
 @Route(value = "year-month-calendar/year-month-field", layout = YearMonthCalendarDemoView.class)
 public class YearMonthFieldDemo extends Div {
 
-  public YearMonthFieldDemo() {
+  private static final String FRENCH = "French";
+  private static final String SPANISH = "Spanish";
+  private static final String ENGLISH = "English";
 
+  public YearMonthFieldDemo() {
     YearMonthField field = new YearMonthField();
-
     add(field);
+
+    RadioButtonGroup<String> languageSelector = new RadioButtonGroup<>("Choose language:");
+    languageSelector.setItems(ENGLISH, SPANISH, FRENCH);
+    languageSelector.setValue(ENGLISH);
+    languageSelector.addValueChangeListener(e -> {
+      DatePickerI18n i18n = new DatePickerI18n();
+      switch (e.getValue()) {
+        case SPANISH:
+          i18n.setMonthNames(List.of("Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio",
+              "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"));
+          break;
+        case FRENCH:
+          i18n.setMonthNames(
+              List.of("janvier", "février", "mars", "avril", "mai", "juin", "juillet",
+                  "août", "septembre", "octobre", "novembre", "décembre"));
+          break;
+        default:
+          // english
+      }
+      field.setI18n(i18n);
+    });
+
+    add(languageSelector);
   }
 
 }