Polyfill array includes manually for IE11 (mui#1117)

* Polyfill array includes manually for IE11 * Make proper implementation of arrayIncludes 🙆‍♂️
mnajdova · Jun 14, 2019 · d61f288 · d61f288
1 parent 2aff556
commit d61f288
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 17 deletions.
diff --git a/lib/.size-snapshot.json b/lib/.size-snapshot.json
@@ -1,26 +1,26 @@
 {
   "build/dist/material-ui-pickers.esm.js": {
-    "bundled": 91969,
-    "minified": 52577,
-    "gzipped": 14251,
+    "bundled": 92431,
+    "minified": 52547,
+    "gzipped": 14144,
     "treeshaked": {
       "rollup": {
-        "code": 42666,
+        "code": 42634,
         "import_statements": 1355
       },
       "webpack": {
-        "code": 49454
+        "code": 49461
       }
     }
   },
   "build/dist/material-ui-pickers.umd.js": {
-    "bundled": 1107157,
-    "minified": 353214,
-    "gzipped": 98117
+    "bundled": 1108309,
+    "minified": 352732,
+    "gzipped": 98061
   },
   "build/dist/material-ui-pickers.umd.min.js": {
-    "bundled": 858507,
-    "minified": 298748,
-    "gzipped": 84257
+    "bundled": 859298,
+    "minified": 298250,
+    "gzipped": 84185
   }
 }
diff --git a/lib/src/TimePicker/TimePickerToolbar.tsx b/lib/src/TimePicker/TimePickerToolbar.tsx
@@ -4,6 +4,7 @@ import ClockType from '../constants/ClockType';
 import ToolbarText from '../_shared/ToolbarText';
 import ToolbarButton from '../_shared/ToolbarButton';
 import PickerToolbar from '../_shared/PickerToolbar';
+import { arrayIncludes } from '../_helpers/utils';
 import { useUtils } from '../_shared/hooks/useUtils';
 import { MaterialUiPickersDate } from '../typings/date';
 import { ToolbarComponentProps } from '../Picker/Picker';
@@ -93,7 +94,7 @@ const TimePickerToolbar: React.FC<ToolbarComponentProps> = ({
       })}
     >
       <div className={hourMinuteClassName}>
-        {views.includes('hours') && (
+        {arrayIncludes(views, 'hours') && (
           <>
             <ToolbarButton
               variant="h2"
@@ -105,7 +106,7 @@ const TimePickerToolbar: React.FC<ToolbarComponentProps> = ({
           </>
         )}
 
-        {views.includes('minutes') && (
+        {arrayIncludes(views, 'minutes') && (
           <ToolbarButton
             variant="h2"
             onClick={() => setOpenView(ClockType.MINUTES)}
@@ -114,7 +115,7 @@ const TimePickerToolbar: React.FC<ToolbarComponentProps> = ({
           />
         )}
 
-        {views.includes('seconds') && (
+        {arrayIncludes(views, 'seconds') && (
           <>
             <ToolbarText variant="h2" label=":" selected={false} className={classes.separator} />
 
@@ -131,7 +132,7 @@ const TimePickerToolbar: React.FC<ToolbarComponentProps> = ({
       {ampm && (
         <div
           className={clsx(classes.ampmSelection, {
-            [classes.ampmSelectionWithSeconds]: views.includes('seconds'),
+            [classes.ampmSelectionWithSeconds]: arrayIncludes(views, 'seconds'),
           })}
         >
           <ToolbarButton

diff --git a/lib/src/_helpers/date-utils.ts b/lib/src/_helpers/date-utils.ts
@@ -1,3 +1,4 @@
+import { arrayIncludes } from './utils';
 import { IUtils } from '@date-io/core/IUtils';
 import { MaterialUiPickersDate } from '../typings/date';
 import { DatePickerView } from '../DatePicker/DatePicker';
@@ -76,7 +77,7 @@ export const isYearOnlyView = (views: DatePickerView[]) =>
   views.length === 1 && views[0] === 'year';
 
 export const isYearAndMonthViews = (views: DatePickerView[]) =>
-  views.length === 2 && views.includes('month') && views.includes('year');
+  views.length === 2 && arrayIncludes(views, 'month') && arrayIncludes(views, 'year');
 
 export const getFormatByViews = (views: DatePickerView[], utils: IUtils<MaterialUiPickersDate>) => {
   if (isYearOnlyView(views)) {

diff --git a/lib/src/_helpers/utils.ts b/lib/src/_helpers/utils.ts
@@ -0,0 +1,4 @@
+/** Use it instead of .includes method for IE support */
+export function arrayIncludes<T>(array: T[], item: T) {
+  return array.indexOf(item) !== -1;
+}
diff --git a/lib/src/_shared/hooks/useViews.tsx b/lib/src/_shared/hooks/useViews.tsx
@@ -1,14 +1,15 @@
 import * as React from 'react';
 import { MaterialUiPickersDate } from '../..';
 import { PickerView } from '../../Picker/Picker';
+import { arrayIncludes } from '../../_helpers/utils';
 
 export function useViews(
   views: PickerView[],
   openTo: PickerView,
   onChange: (date: MaterialUiPickersDate, isFinish?: boolean) => void
 ) {
   const [openView, setOpenView] = React.useState(
-    openTo && views.includes(openTo) ? openTo : views[0]
+    openTo && arrayIncludes(views, openTo) ? openTo : views[0]
   );
 
   const handleChangeAndOpenNext = React.useCallback(