perf(limel-date-picker): on window resize, redraw picker instead of c…

…reating a new instance
Lundalogik · Sep 10, 2019 · 88aa280 · 88aa280
1 parent 6b6f0ee
commit 88aa280
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 4 deletions.
diff --git a/src/components/date-picker/date-picker.tsx b/src/components/date-picker/date-picker.tsx
@@ -95,7 +95,6 @@ export class DatePicker {
 
     private picker: Picker;
 
-    private container: HTMLElement;
     private input: HTMLElement;
 
     constructor() {
@@ -170,9 +169,9 @@ export class DatePicker {
             'limel-input-field'
         );
         this.input = textfield.shadowRoot.querySelector('input');
-        this.container = this.host.shadowRoot.querySelector('.container');
+        const container: HTMLElement = this.host.shadowRoot.querySelector('.container');
 
-        this.picker.init(this.input, this.container, this.value);
+        this.picker.init(this.input, container, this.value);
         this.formattedValue = this.picker.formatDate(this.value);
     }
 
@@ -197,7 +196,7 @@ export class DatePicker {
 
     @Listen('window:resize')
     public resizeEvent() {
-        this.picker.init(this.input, this.container, this.value);
+        this.picker.redraw();
     }
 
     private handleChange(event) {

diff --git a/src/components/date-picker/pickers/Picker.ts b/src/components/date-picker/pickers/Picker.ts
@@ -56,6 +56,10 @@ export abstract class Picker {
         this.flatpickr = flatpickr(element, config) as flatpickr.Instance; // tslint:disable-line:no-useless-cast
     }
 
+    public redraw() {
+        this.flatpickr.redraw();
+    }
+
     public destroy() {
         if (!this.flatpickr) {
             return;