[TimePicker] Properly hide separator if views not included (#1161)

Author: dmtrKovalenko

lib/src/TimePicker/TimePickerToolbar.tsx

@@ -95,15 +95,16 @@ const TimePickerToolbar: React.FC<ToolbarComponentProps> = ({
     >
       <div className={hourMinuteClassName}>
         {arrayIncludes(views, 'hours') && (
-          <>
-            <ToolbarButton
-              variant="h2"
-              onClick={() => setOpenView(ClockType.HOURS)}
-              selected={openView === ClockType.HOURS}
-              label={utils.getHourText(date, Boolean(ampm))}
-            />
-            <ToolbarText variant="h2" label=":" selected={false} className={classes.separator} />
-          </>
+          <ToolbarButton
+            variant="h2"
+            onClick={() => setOpenView(ClockType.HOURS)}
+            selected={openView === ClockType.HOURS}
+            label={utils.getHourText(date, Boolean(ampm))}
+          />
+        )}
+
+        {arrayIncludes(views, ['hours', 'minutes']) && (
+          <ToolbarText variant="h2" label=":" selected={false} className={classes.separator} />
         )}
 
         {arrayIncludes(views, 'minutes') && (
@@ -115,17 +116,17 @@ const TimePickerToolbar: React.FC<ToolbarComponentProps> = ({
           />
         )}
 
-        {arrayIncludes(views, 'seconds') && (
-          <>
-            <ToolbarText variant="h2" label=":" selected={false} className={classes.separator} />
+        {arrayIncludes(views, ['minutes', 'seconds']) && (
+          <ToolbarText variant="h2" label=":" selected={false} className={classes.separator} />
+        )}
 
-            <ToolbarButton
-              variant="h2"
-              onClick={() => setOpenView(ClockType.SECONDS)}
-              selected={openView === ClockType.SECONDS}
-              label={utils.getSecondText(date)}
-            />
-          </>
+        {arrayIncludes(views, 'seconds') && (
+          <ToolbarButton
+            variant="h2"
+            onClick={() => setOpenView(ClockType.SECONDS)}
+            selected={openView === ClockType.SECONDS}
+            label={utils.getSecondText(date)}
+          />
         )}
       </div>
 

lib/src/_helpers/utils.ts

@@ -1,4 +1,8 @@
 /** Use it instead of .includes method for IE support */
-export function arrayIncludes<T>(array: T[], item: T) {
-  return array.indexOf(item) !== -1;
+export function arrayIncludes<T>(array: T[], itemOrItems: T | T[]) {
+  if (Array.isArray(itemOrItems)) {
+    return itemOrItems.every(item => array.indexOf(item) !== -1);
+  }
+
+  return array.indexOf(itemOrItems) !== -1;
 }