feat(core): multiple v5 issue fixes (#1165)

* feat(components): enhance known type definitions * feat(components): view-pager - handle optional children * fix(components): autocomplete - toggle visibility when on data change * fix(components): input - handle outer touches
akveo · Mar 26, 2021 · ab5cac7 · ab5cac7
1 parent 862a12f
commit ab5cac7
Show file tree

Hide file tree

Showing 31 changed files with 120 additions and 109 deletions.
diff --git a/src/components/devsupport/typings.ts b/src/components/devsupport/typings.ts
@@ -3,9 +3,15 @@ import { ReactElement } from 'react';
 export type ChildrenProp<Element extends ReactElement = ReactElement> = Element | Element[];
 export type ChildrenWithProps<Props = {}> = ChildrenProp<ReactElement<Props>>;
 
-export type EvaStatus = 'basic' | 'primary' | 'success' | 'info' | 'warning' | 'danger' | 'control' | string;
-export type EvaSize = 'tiny' | 'small' | 'medium' | 'large' | 'giant' | string;
-export type EvaInputSize = 'small' | 'medium' | 'large' | string;
+
+/*
+ * https://github.com/microsoft/TypeScript/issues/29729#issuecomment-505826972
+ */
+export type LiteralUnion<T extends U, U = string> = T | (U & {});
+
+export type EvaStatus = LiteralUnion<'basic' | 'primary' | 'success' | 'info' | 'warning' | 'danger' | 'control'>;
+export type EvaSize = LiteralUnion<'tiny' | 'small' | 'medium' | 'large' | 'giant'>;
+export type EvaInputSize = LiteralUnion<'small' | 'medium' | 'large'>;
 
 export class IndexPath {
 

diff --git a/src/components/ui/autocomplete/autocomplete.component.tsx b/src/components/ui/autocomplete/autocomplete.component.tsx
@@ -149,6 +149,13 @@ export class Autocomplete extends React.Component<AutocompleteProps, State> {
     this.inputRef.current?.clear();
   };
 
+  public componentDidUpdate(prevProps: AutocompleteProps): void {
+    const isChildCountChanged: boolean = this.data.length !== React.Children.count(prevProps.children);
+    const shouldBecomeVisible: boolean = !this.state.listVisible && this.isFocused() && isChildCountChanged;
+
+    shouldBecomeVisible && this.setState({ listVisible: shouldBecomeVisible });
+  }
+
   private onInputFocus = (event: NativeSyntheticEvent<TextInputFocusEventData>): void => {
     this.setOptionsListVisible();
     this.props.onFocus && this.props.onFocus(event);
@@ -159,7 +166,6 @@ export class Autocomplete extends React.Component<AutocompleteProps, State> {
     this.props.onSubmitEditing && this.props.onSubmitEditing(e);
   };
 
-
   private onBackdropPress = (): void => {
     this.blur();
     this.setOptionsListInvisible();

diff --git a/src/components/ui/autocomplete/autocomplete.spec.tsx b/src/components/ui/autocomplete/autocomplete.spec.tsx
@@ -31,6 +31,7 @@ import {
   AutocompleteItem,
   AutocompleteItemProps,
 } from './autocompleteItem.component';
+import { TouchableWithoutFeedback } from '../../devsupport';
 
 /*
  * Mock UIManager since Autocomplete relies on native measurements
@@ -198,16 +199,6 @@ describe('@autocomplete: component checks', () => {
     );
   });
 
-  /*
-   * In this test:
-   * [0] for modal backdrop
-   * ...rest for options
-   */
-  const touchables = {
-    findBackdropTouchable: (api: RenderAPI) => api.queryAllByType(TouchableOpacity)[0],
-    findOptionTouchable: (api: RenderAPI, index: number) => api.queryAllByType(TouchableOpacity)[index + 1],
-  };
-
   it('should render TextInput', () => {
     const component = render(
       <TestAutocomplete/>,
@@ -281,7 +272,7 @@ describe('@autocomplete: component checks', () => {
     fireEvent(component.queryByType(TextInput), 'focus');
     await waitForElement(() => null);
 
-    fireEvent.press(touchables.findOptionTouchable(component, 1));
+    fireEvent.press(component.queryAllByType(TouchableWithoutFeedback)[2]);
     expect(onSelect).toBeCalledWith(1);
   });
 
@@ -292,10 +283,10 @@ describe('@autocomplete: component checks', () => {
 
     fireEvent(component.queryByType(TextInput), 'focus');
 
-    const backdrop = await waitForElement(() => touchables.findBackdropTouchable(component));
+    const backdrop = await waitForElement(() => component.queryAllByType(TouchableWithoutFeedback)[1]);
     fireEvent.press(backdrop);
 
-    const firstOption = await waitForElement(() => touchables.findOptionTouchable(component, 0));
+    const firstOption = await waitForElement(() => component.queryAllByType(TouchableWithoutFeedback)[2]);
     const secondOption = component.queryByText('Option 2');
 
     expect(firstOption).toBeFalsy();

diff --git a/src/components/ui/avatar/avatar.component.tsx b/src/components/ui/avatar/avatar.component.tsx
@@ -14,6 +14,7 @@ import {
 import {
   EvaSize,
   Overwrite,
+  LiteralUnion,
 } from '../../devsupport';
 import {
   styled,
@@ -22,7 +23,7 @@ import {
 } from '../../theme';
 
 type AvatarStyledProps = Overwrite<StyledComponentProps, {
-  appearance?: 'default' | string;
+  appearance?: LiteralUnion<'default'>;
 }>;
 
 export type AvatarProps<P = ImageProps> = AvatarStyledProps & P & {

diff --git a/src/components/ui/bottomNavigation/bottomNavigation.component.tsx b/src/components/ui/bottomNavigation/bottomNavigation.component.tsx
@@ -15,6 +15,7 @@ import {
 import {
   ChildrenWithProps,
   Overwrite,
+  LiteralUnion,
 } from '../../devsupport';
 import {
   styled,
@@ -31,7 +32,7 @@ import {
 } from '../shared/tabIndicator.component';
 
 type BottomNavigationStyledProps = Overwrite<StyledComponentProps, {
-  appearance?: 'default' | 'noIndicator' | string;
+  appearance?: LiteralUnion<'default' | 'noIndicator'>;
 }>;
 
 export interface BottomNavigationProps extends ViewProps, BottomNavigationStyledProps {

diff --git a/src/components/ui/bottomNavigation/bottomNavigationTab.component.tsx b/src/components/ui/bottomNavigation/bottomNavigationTab.component.tsx
@@ -19,6 +19,7 @@ import {
   TouchableWebElement,
   TouchableWebProps,
   Overwrite,
+  LiteralUnion,
 } from '../../devsupport';
 import {
   Interaction,
@@ -29,7 +30,7 @@ import {
 import { TextProps } from '../text/text.component';
 
 type BottomNavigationTabStyledProps = Overwrite<StyledComponentProps, {
-  appearance?: 'default' | string;
+  appearance?: LiteralUnion<'default' | string>;
 }>;
 
 export interface BottomNavigationTabProps extends TouchableWebProps, BottomNavigationTabStyledProps {

diff --git a/src/components/ui/button/button.component.tsx b/src/components/ui/button/button.component.tsx
@@ -22,6 +22,7 @@ import {
   TouchableWebElement,
   TouchableWebProps,
   Overwrite,
+  LiteralUnion,
 } from '../../devsupport';
 import {
   Interaction,
@@ -32,7 +33,7 @@ import {
 import { TextProps } from '../text/text.component';
 
 type ButtonStyledProps = Overwrite<StyledComponentProps, {
-  appearance?: 'filled' | 'outline' | 'ghost' | string;
+  appearance?: LiteralUnion<'filled' | 'outline' | 'ghost'>;
 }>;
 
 export interface ButtonProps extends TouchableWebProps, ButtonStyledProps {

diff --git a/src/components/ui/buttonGroup/buttonGroup.component.tsx b/src/components/ui/buttonGroup/buttonGroup.component.tsx
@@ -16,6 +16,7 @@ import {
   EvaSize,
   EvaStatus,
   Overwrite,
+  LiteralUnion,
 } from '../../devsupport';
 import {
   styled,
@@ -28,7 +29,7 @@ import {
 } from '../button/button.component';
 
 type ButtonGroupStyledProps = Overwrite<StyledComponentProps, {
-  appearance?: 'filled' | 'outline' | string;
+  appearance?: LiteralUnion<'filled' | 'outline'>;
 }>;
 
 export interface ButtonGroupProps extends ViewProps, ButtonGroupStyledProps {

diff --git a/src/components/ui/card/card.component.tsx b/src/components/ui/card/card.component.tsx
@@ -19,6 +19,7 @@ import {
   TouchableWebElement,
   TouchableWebProps,
   Overwrite,
+  LiteralUnion,
 } from '../../devsupport';
 import {
   Interaction,
@@ -29,7 +30,7 @@ import {
 import { Divider } from '../divider/divider.component';
 
 type CardStyledProps = Overwrite<StyledComponentProps, {
-  appearance?: 'filled' | 'outline' | string;
+  appearance?: LiteralUnion<'filled' | 'outline'>;
 }>;
 
 export interface CardProps extends TouchableWebProps, CardStyledProps {
@@ -126,7 +127,7 @@ export class Card extends React.Component<CardProps> {
 
   private renderStatusAccent = (evaStyle): React.ReactElement => {
     return (
-      <View style={evaStyle}/>
+      <View style={evaStyle} />
     );
   };
 
@@ -149,11 +150,11 @@ export class Card extends React.Component<CardProps> {
           style={[styles.transparent, evaStyle.header]}
           component={header}
         />
-        {header && <Divider/>}
+        {header && <Divider />}
         <View style={evaStyle.body}>
           {children}
         </View>
-        {footer && <Divider/>}
+        {footer && <Divider />}
         <FalsyFC
           style={[styles.transparent, evaStyle.footer]}
           component={footer}

diff --git a/src/components/ui/checkbox/checkbox.component.tsx b/src/components/ui/checkbox/checkbox.component.tsx
@@ -21,6 +21,7 @@ import {
   TouchableWebElement,
   TouchableWebProps,
   Overwrite,
+  LiteralUnion,
 } from '../../devsupport';
 import {
   Interaction,
@@ -39,7 +40,7 @@ import {
 } from '../shared/minus.component';
 
 type CheckBoxStyledProps = Overwrite<StyledComponentProps, {
-  appearance?: 'default' | string;
+  appearance?: LiteralUnion<'default' | string>;
 }>;
 
 export interface CheckBoxProps extends TouchableWebProps, CheckBoxStyledProps {
@@ -211,7 +212,7 @@ export class CheckBox extends React.Component<CheckBoxProps> {
         onPressIn={this.onPressIn}
         onPressOut={this.onPressOut}>
         <View style={styles.highlightContainer}>
-          <View style={[evaStyle.highlight, styles.highlight]}/>
+          <View style={[evaStyle.highlight, styles.highlight]} />
           <View style={[evaStyle.selectContainer, styles.selectContainer]}>
             {this.renderIconElement(evaStyle.icon)}
           </View>

diff --git a/src/components/ui/divider/divider.component.tsx b/src/components/ui/divider/divider.component.tsx
@@ -9,14 +9,14 @@ import {
   View,
   ViewProps,
 } from 'react-native';
-import { Overwrite } from '../../devsupport';
+import { Overwrite, LiteralUnion } from '../../devsupport';
 import {
   styled,
   StyledComponentProps,
 } from '../../theme';
 
 type DividerStyledProps = Overwrite<StyledComponentProps, {
-  appearance?: 'default' | string;
+  appearance?: LiteralUnion<'default'>;
 }>;
 
 export type DividerProps = ViewProps & DividerStyledProps;

diff --git a/src/components/ui/drawer/drawer.component.tsx b/src/components/ui/drawer/drawer.component.tsx
@@ -9,23 +9,17 @@ import { ViewProps } from 'react-native';
 import {
   FalsyFC,
   RenderProp,
-  Overwrite,
 } from '../../devsupport';
 import {
   styled,
-  StyledComponentProps,
   StyleType,
 } from '../../theme';
 import {
   Menu,
   MenuProps,
 } from '../menu/menu.component';
 
-type DrawerStyledProps = Overwrite<StyledComponentProps, {
-  appearance?: 'default' | 'noDivider' | string;
-}>;
-
-export interface DrawerProps extends MenuProps, DrawerStyledProps {
+export interface DrawerProps extends MenuProps {
   header?: RenderProp<ViewProps>;
   footer?: RenderProp<ViewProps>;
 }

diff --git a/src/components/ui/input/input.component.tsx b/src/components/ui/input/input.component.tsx
@@ -31,6 +31,8 @@ import {
   WebEventResponderCallbacks,
   WebEventResponderInstance,
   Overwrite,
+  LiteralUnion,
+  TouchableWithoutFeedback,
 } from '../../devsupport';
 import {
   Interaction,
@@ -41,7 +43,7 @@ import {
 import { TextProps } from '../text/text.component';
 
 type InputStyledProps = Overwrite<StyledComponentProps, {
-  appearance?: 'default' | string;
+  appearance?: LiteralUnion<'default'>;
 }>;
 
 export interface InputProps extends TextInputProps, InputStyledProps {
@@ -257,7 +259,9 @@ export class Input extends React.Component<InputProps> implements WebEventRespon
     const evaStyle = this.getComponentStyle(eva.style);
 
     return (
-      <View style={evaStyle.container}>
+      <TouchableWithoutFeedback
+        style={evaStyle.container}
+        onPress={this.focus}>
         <FalsyText
           style={[evaStyle.label, styles.label]}
           component={label}
@@ -286,7 +290,7 @@ export class Input extends React.Component<InputProps> implements WebEventRespon
           style={[evaStyle.captionLabel, styles.captionLabel]} 
           component={caption}
         />
-      </View>
+      </TouchableWithoutFeedback>
     );
   }
 }

diff --git a/src/components/ui/layout/layout.component.tsx b/src/components/ui/layout/layout.component.tsx
@@ -9,19 +9,19 @@ import {
   View,
   ViewProps,
 } from 'react-native';
-import { Overwrite } from '../../devsupport';
+import { Overwrite, LiteralUnion } from '../../devsupport';
 import {
   styled,
   StyledComponentProps,
 } from '../../theme';
 
 type LayoutStyledProps = Overwrite<StyledComponentProps, {
-  appearance?: 'default' | string;
+  appearance?: LiteralUnion<'default'>;
 }>;
 
 export interface LayoutProps extends ViewProps, LayoutStyledProps {
   children?: React.ReactNode;
-  level?: '1' | '2' | '3' | '4' | string;
+  level?: LiteralUnion<'1' | '2' | '3' | '4'>;
 }
 
 export type LayoutElement = React.ReactElement<LayoutProps>;

diff --git a/src/components/ui/list/list.component.tsx b/src/components/ui/list/list.component.tsx
@@ -9,14 +9,14 @@ import {
   FlatList,
   FlatListProps,
 } from 'react-native';
-import { Overwrite } from '../../devsupport';
+import { Overwrite, LiteralUnion } from '../../devsupport';
 import {
   styled,
   StyledComponentProps,
 } from '../../theme';
 
 type ListStyledProps = Overwrite<StyledComponentProps, {
-  appearance?: 'default' | string;
+  appearance?: LiteralUnion<'default'>;
 }>;
 
 export type ListProps<ItemT = any> = FlatListProps<ItemT> & ListStyledProps;

diff --git a/src/components/ui/list/listItem.component.tsx b/src/components/ui/list/listItem.component.tsx
@@ -21,6 +21,7 @@ import {
   TouchableWebElement,
   TouchableWebProps,
   Overwrite,
+  LiteralUnion,
 } from '../../devsupport';
 import {
   Interaction,
@@ -31,7 +32,7 @@ import {
 import { TextProps } from '../text/text.component';
 
 type ListItemStyledProps = Overwrite<StyledComponentProps, {
-  appearance?: 'default' | string;
+  appearance?: LiteralUnion<'default'>;
 }>;
 
 export interface ListItemProps extends TouchableWebProps, ListItemStyledProps {