Allow single child element in list view and narrowing typing (#40)

Co-authored-by: Arseniy Zuev <[email protected]>

src/utils/types.ts

@@ -0,0 +1,3 @@
+import { ReactElement } from "react";
+
+export type ReactElements = ReactElement | ReactElement[];

src/views/HorizontalListView/HorizontalListView.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { ReactElement, useCallback, useEffect, useState } from 'react';
 import ReactDOM from 'react-dom';
 import './HorizontalListView.scss';
 import classNames from 'classnames';
@@ -88,7 +88,7 @@ const HorizontalListView = React.memo<any>(
 
     const renderChildren = () => {
       let index = -1;
-      return React.Children.map(children, child => {
+      return React.Children.map(children, (child:ReactElement) => {
         // Don't focus on separators
         if (!child || child.props.separatorText != null) {
           return child;

src/views/ListView/ListView.tsx

@@ -1,11 +1,12 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { ReactElement, useCallback, useEffect, useState } from 'react';
+import { ReactElements } from './../../utils/types'
 import ReactDOM from 'react-dom';
 import './ListView.scss';
 import classNames from 'classnames';
 
 interface LocalProps {
   isActive?: boolean;
-  children: any[];
+  children: ReactElements;
   onChangeIndex?: (index: number) => void;
   className?: string;
 }
@@ -89,7 +90,7 @@ const ListView = React.memo<LocalProps>(
 
     const renderChildren = () => {
       let index = -1;
-      return React.Children.map(children, child => {
+      return React.Children.map(children, (child:ReactElement) => {
         // Don't focus on separators
         if (!child || child.props.separatorText != null) {
           return child;

src/views/ScrollingListView/ScrollingListView.tsx

@@ -1,12 +1,13 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { ReactElement, useCallback, useEffect, useState } from 'react';
 import './ScrollingListView.scss';
 import classNames from 'classnames';
 import BodyTextListItem from '../../components/BodyTextListItem/BodyTextListItem';
+import { ReactElements } from '../../utils/types';
 
 const prefixCls = 'kai-scroll-list-view';
 
 interface LocalProps {
-  children: any[];
+  children: ReactElements;
   onChangeIndex?: (index: number) => void;
   isActive: boolean;
   className?: string;
@@ -16,13 +17,14 @@ interface LocalProps {
 const ScrollingListView = React.memo<LocalProps>(
   (props) => {
     const {
-      children,
       onChangeIndex,
       isActive,
       className,
       initialSelectedIndex
     } = props;
 
+    const children:ReactElement[] = [].concat(props.children);
+
     const [activeItem, setActiveItem] = useState(initialSelectedIndex === undefined ? 1 : initialSelectedIndex);
 
     const handleChangeIndex = itemIndex => {

src/views/TabView/TabView.tsx

@@ -1,17 +1,18 @@
-import React, { useState } from 'react';
+import React, { ReactElement, ReactEventHandler, useState } from 'react';
 import SwipeableViews from 'react-swipeable-views';
 import Tabs from '../../components/Tabs/Tabs';
 import Tab from '../../components/Tab/Tab';
 import colors from '../../theme/colors.scss';
 import './TabView.scss';
+import { ReactElements } from '../../utils/types';
 
 const prefixCls = 'kai-tab-view';
 
 interface LocalProps {
   tabLabels: string[],
   onChangeIndex?: (index: number) => void,
   focusColor?: string,
-  children: any[]
+  children: ReactElements
 }
 
 const TabView = React.memo<LocalProps>(
@@ -54,7 +55,7 @@ const TabView = React.memo<LocalProps>(
     };
 
     const renderChildren = () => {
-      return React.Children.map(children, (child:any, i) => {
+      return React.Children.map(children, (child:ReactElement, i) => {
         return React.cloneElement(child, {
           isActive: activeTab === i && isTransitionDone,
         });

src/views/TriColumnListView/TriColumnListView.tsx

@@ -1,16 +1,16 @@
-import React, { useState, useEffect, useCallback } from 'react';
+import React, { useState, useEffect, useCallback, ReactElement } from 'react';
 import './TriColumnListView.scss';
-import ListView from '../ListView/ListView';
 import ScrollingListView from '../ScrollingListView/ScrollingListView';
+import { ReactElements } from '../../utils/types';
 
 const prefixCls = 'kai-tricol-view';
 
 interface LocalProps {
   onChangeIndex?: (index: number) => void,
   focusColor?: string,
-  col1Children: any[],
-  col2Children: any[],
-  col3Children: any[],
+  col1Children: ReactElements,
+  col2Children: ReactElements,
+  col3Children: ReactElements,
   onCol1ChangeIndex?: (index: number) => void,
   onCol2ChangeIndex?: (index: number) => void,
   onCol3ChangeIndex?: (index: number) => void,
@@ -75,8 +75,8 @@ const TriColListView = React.memo<LocalProps>(
       [handleKeyDown]
     );
 
-    const renderChildren = (children) => {
-      return React.Children.map(children, (child:any, i) => {
+    const renderChildren = (children: ReactElements) => {
+      return React.Children.map(children, (child:ReactElement, i) => {
         return React.cloneElement(child, {
           isActive: activeTab === i && isTransitionDone,
           onFocusChange: handleChangeIndex,