Extract dropdown options from render method

Based on pnp#240 by @AJIXuMuK
SherpasGroup · Mar 20, 2019 · 6be21f9 · 6be21f9
1 parent 79d8d14
commit 6be21f9
Show file tree

Hide file tree

Showing 3 changed files with 79 additions and 56 deletions.
diff --git a/src/controls/dateTimePicker/HoursComponent.tsx b/src/controls/dateTimePicker/HoursComponent.tsx
@@ -10,29 +10,48 @@ import {
  * Hours component, this renders the hours dropdown
  */
 export default class HoursComponent extends React.Component<IHoursComponentProps, {}> {
+  private _hours: IDropdownOption[];
+
+  constructor(props: IHoursComponentProps) {
+    super(props);
+    this._initHoursOptions('am', 'pm');
+  }
+
   public render(): JSX.Element {
-    // Constructs a Date type object from the initalDate string property
-    let hours: IDropdownOption[] = [];
+    return (
+      <Dropdown
+        key={this.props.value}
+        disabled={this.props.disabled}
+        label=""
+        options={this._hours}
+        onChanged={this.props.onChange}
+        dropdownWidth={110}
+      />
+    );
+  }
+
+  private _initHoursOptions(amDesignator: string, pmDesignator: string) {
+    const hours: IDropdownOption[] = [];
     for (let i = 0; i < 24; i++) {
       let digit: string;
       if (this.props.timeConvention === TimeConvention.Hours24) {
         // 24 hours time convention
         if (i < 10) {
-          digit = '0' + i;
+          digit = `0${i}`;
         } else {
           digit = i.toString();
         }
       } else {
         // 12 hours time convention
         if (i === 0) {
-          digit = '12 am';
+          digit = `12 ${amDesignator}`;
         } else if (i < 12) {
-          digit = i + ' am';
+          digit = `${i} ${amDesignator}`;
         } else {
           if (i === 12) {
-            digit = '12 pm';
+            digit = `12 ${pmDesignator}`;
           } else {
-            digit = (i % 12) + ' pm';
+            digit = `${(i % 12)} ${pmDesignator}`;
           }
         }
       }
@@ -44,16 +63,6 @@ export default class HoursComponent extends React.Component<IHoursComponentProps
 
       hours.push({ key: i, text: digit, isSelected: selected });
     }
-
-    return (
-      <Dropdown
-        key={this.props.value}
-        disabled={this.props.disabled}
-        label=""
-        options={hours}
-        onChanged={this.props.onChange}
-        dropdownWidth={110}
-      />
-    );
+    this._hours = hours;
   }
 }
diff --git a/src/controls/dateTimePicker/MinutesComponent.tsx b/src/controls/dateTimePicker/MinutesComponent.tsx
@@ -1,23 +1,39 @@
-import * as React from "react";
-import { ITimeComponentProps } from "./ITimeComponentProps";
+import * as React from 'react';
+import { ITimeComponentProps } from './ITimeComponentProps';
 import {
   Dropdown,
   IDropdownOption
-} from "office-ui-fabric-react/lib/components/Dropdown";
+} from 'office-ui-fabric-react/lib/components/Dropdown';
 
 /**
  * Minutes component, renders the minutes dropdown
  */
-export default class MinutesComponent extends React.Component<
-  ITimeComponentProps,
-  {}
-  > {
+export default class MinutesComponent extends React.Component<ITimeComponentProps, {}> {
+  private _minutes: IDropdownOption[];
+
+  constructor(props: ITimeComponentProps) {
+    super(props);
+    this._initMinutesOptions();
+  }
+
   public render(): JSX.Element {
-    let minutes: IDropdownOption[] = [];
+    return (
+      <Dropdown
+        key={this.props.value}
+        disabled={this.props.disabled}
+        label=""
+        options={this._minutes}
+        onChanged={this.props.onChange}
+      />
+    );
+  }
+
+  private _initMinutesOptions() {
+    const minutes: IDropdownOption[] = [];
     for (let j = 0; j < 60; j++) {
       let digitMin: string;
       if (j < 10) {
-        digitMin = "0" + j;
+        digitMin = `0${j}`;
       } else {
         digitMin = j.toString();
       }
@@ -27,15 +43,6 @@ export default class MinutesComponent extends React.Component<
       }
       minutes.push({ key: j, text: digitMin, isSelected: selected });
     }
-
-    return (
-      <Dropdown
-        key={this.props.value}
-        disabled={this.props.disabled}
-        label=""
-        options={minutes}
-        onChanged={this.props.onChange}
-      />
-    );
+    this._minutes = minutes;
   }
 }
diff --git a/src/controls/dateTimePicker/SecondsComponent.tsx b/src/controls/dateTimePicker/SecondsComponent.tsx
@@ -1,23 +1,39 @@
-import * as React from "react";
-import { ITimeComponentProps } from "./ITimeComponentProps";
+import * as React from 'react';
+import { ITimeComponentProps } from './ITimeComponentProps';
 import {
   Dropdown,
   IDropdownOption
-} from "office-ui-fabric-react/lib/components/Dropdown";
+} from 'office-ui-fabric-react/lib/components/Dropdown';
 
 /**
  * Seconds component, renders the seconds dropdown
  */
-export default class SecondsComponent extends React.Component<
-  ITimeComponentProps,
-  {}
-  > {
+export default class SecondsComponent extends React.Component<ITimeComponentProps, {}> {
+  private _seconds: IDropdownOption[];
+
+  constructor(props: ITimeComponentProps) {
+    super(props);
+    this._initSecondsOptions();
+  }
+
   public render(): JSX.Element {
-    let seconds: IDropdownOption[] = [];
+    return (
+      <Dropdown
+        key={this.props.value}
+        disabled={this.props.disabled}
+        label=""
+        options={this._seconds}
+        onChanged={this.props.onChange}
+      />
+    );
+  }
+
+  private _initSecondsOptions() {
+    const seconds: IDropdownOption[] = [];
     for (let k = 0; k < 60; k++) {
       let digitSec: string;
       if (k < 10) {
-        digitSec = "0" + k;
+        digitSec = `0${k}`;
       } else {
         digitSec = k.toString();
       }
@@ -27,15 +43,6 @@ export default class SecondsComponent extends React.Component<
       }
       seconds.push({ key: k, text: digitSec, isSelected: selected });
     }
-
-    return (
-      <Dropdown
-        key={this.props.value}
-        disabled={this.props.disabled}
-        label=""
-        options={seconds}
-        onChanged={this.props.onChange}
-      />
-    );
+    this._seconds = seconds;
   }
 }