Typescript/list item (#1460)

* index.js -> index.tsx

* migrate ListItem to typescript

* ListItemPart.js -> ListItemPart.tsx

* ListItemPart migrated to ts

* fix typing error

* BasicListScreen.js -> BasicListScreen.tsx

* docs to point to tsx file

* orders to ts

* export listitem + prop + passing list-item touchable props instead of view's

* orders data to type

* testid should be optional

* listItem typings

* use uilib touchable-opacity props

* animatable types

* BasicListScreen - demo screen typescript

* @ts-expect-error until we merge the fix

* remove old typings, export type from generatedTypes

Author: mendyEdri

demo/src/data/orders.js renamed to demo/src/data/orders.ts

@@ -1,4 +1,17 @@
-const orders = [
+type InventoryType = {
+  trackingMethod: string;
+  status: string;
+  quantity: number;
+}
+
+export type OrderType = {
+  name: string;
+  formattedPrice: string;
+  inventory: InventoryType
+  mediaUrl: string;
+}
+
+const orders: Array<OrderType> = [
   {
     name: '#100201',
     formattedPrice: '$19.99',

demo/src/screens/componentScreens/BasicListScreen.js renamed to demo/src/screens/componentScreens/BasicListScreen.tsx

@@ -1,13 +1,17 @@
 import React, {Component} from 'react';
 import {StyleSheet, Alert, FlatList} from 'react-native';
 import * as Animatable from 'react-native-animatable';
-import {AnimatableManager, Colors, BorderRadiuses, ListItem, Text} from 'react-native-ui-lib'; //eslint-disable-line
-import orders from '../../data/orders';
+import {AnimatableManager, Colors, BorderRadiuses, ListItem, Text} from 'react-native-ui-lib';
+import orders, {OrderType} from '../../data/orders';
 
+type BasicListScreenState = {
+  onEdit: boolean;
+  updating: boolean;
+}
 
-export default class BasicListScreen extends Component {
+export default class BasicListScreen extends Component<{}, BasicListScreenState> {
 
-  constructor(props) {
+  constructor(props: any) {
     super(props);
 
     this.state = {
@@ -16,36 +20,44 @@ export default class BasicListScreen extends Component {
     };
   }
 
-  keyExtractor = item => item.name;
+  keyExtractor = (item: OrderType) => item.name;
 
-  renderRow(row, id) {
+  renderRow(row: OrderType, id: number) {
     const statusColor = row.inventory.status === 'Paid' ? Colors.green30 : Colors.red30;
     const animationProps = AnimatableManager.presets.fadeInRight;
-    const imageAnimationProps = AnimatableManager.getRandomDelay();
+    const imageAnimationProps = AnimatableManager.getRandomDelay(undefined, undefined);
 
     return (
       <Animatable.View {...animationProps}>
         <ListItem
+          // @ts-expect-error
           activeBackgroundColor={Colors.dark60}
           activeOpacity={0.3}
           height={77.5}
           onPress={() => Alert.alert(`pressed on order #${id + 1}`)}
         >
           <ListItem.Part left>
-            <Animatable.Image
-              source={{uri: row.mediaUrl}}
-              style={styles.image}
-              {...imageAnimationProps}
-            />
+            <Animatable.Image source={{uri: row.mediaUrl}} style={styles.image} {...imageAnimationProps} />
           </ListItem.Part>
           <ListItem.Part middle column containerStyle={[styles.border, {paddingRight: 17}]}>
             <ListItem.Part containerStyle={{marginBottom: 3}}>
-              <Text dark10 text70 style={{flex: 1, marginRight: 10}} numberOfLines={1}>{row.name}</Text>
-              <Text dark10 text70 style={{marginTop: 2}}>{row.formattedPrice}</Text>
+              <Text dark10 text70 style={{flex: 1, marginRight: 10}} numberOfLines={1}>
+                {row.name}
+              </Text>
+              <Text dark10 text70 style={{marginTop: 2}}>
+                {row.formattedPrice}
+              </Text>
             </ListItem.Part>
             <ListItem.Part>
-              <Text style={{flex: 1, marginRight: 10}} text90 dark40 numberOfLines={1}>{`${row.inventory.quantity} item`}</Text>
-              <Text text90 color={statusColor} numberOfLines={1}>{row.inventory.status}</Text>
+              <Text
+                style={{flex: 1, marginRight: 10}}
+                text90
+                dark40
+                numberOfLines={1}
+              >{`${row.inventory.quantity} item`}</Text>
+              <Text text90 color={statusColor} numberOfLines={1}>
+                {row.inventory.status}
+              </Text>
             </ListItem.Part>
           </ListItem.Part>
         </ListItem>

generatedTypes/components/listItem/ListItemPart.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { ListItemPartProps } from './types';
+export { ListItemPartProps };
+declare const _default: React.ComponentClass<ListItemPartProps & {
+    useCustomTheme?: boolean | undefined;
+}, any>;
+export default _default;

generatedTypes/components/listItem/index.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { ListItemProps } from './types';
+export { ListItemProps };
+declare const _default: React.ComponentClass<ListItemProps & {
+    useCustomTheme?: boolean | undefined;
+}, any>;
+export default _default;

generatedTypes/components/listItem/types.d.ts

@@ -0,0 +1,60 @@
+/// <reference types="react" />
+import { ViewStyle } from 'react-native';
+import { TouchableOpacityProps } from '../touchableOpacity';
+export declare type ListItemProps = {
+    /**
+     * the list item height
+     */
+    height?: ViewStyle['height'];
+    /**
+     * action for when pressing the item
+     */
+    onPress?: () => void;
+    /**
+     * action for when long pressing the item
+     */
+    onLongPress?: () => void;
+    /**
+     * Additional styles for the top container
+     */
+    containerStyle?: ViewStyle;
+    /**
+     * The container element to wrap the ListItem
+     */
+    containerElement?: React.ComponentType<ListItemProps | TouchableOpacityProps>;
+    /**
+     * The inner element style
+     */
+    style?: ViewStyle;
+    /**
+     * The inner element pressed backgroundColor
+     */
+    underlayColor?: string;
+    testID?: string;
+};
+export declare type ListItemPartProps = {
+    /**
+     * this part content will be aligned to left
+     */
+    left?: boolean;
+    /**
+     * this part content will be aligned to spreaded
+     */
+    middle?: boolean;
+    /**
+     * this part content will be aligned to right
+     */
+    right?: boolean;
+    /**
+     * this part content direction will be row (default)
+     */
+    row?: boolean;
+    /**
+     * this part content direction will be column
+     */
+    column?: boolean;
+    /**
+     * container style
+     */
+    containerStyle?: ViewStyle;
+};

generatedTypes/index.d.ts

@@ -80,6 +80,7 @@ export {default as PageControl, PageControlProps} from './components/pageControl
 export {default as Carousel, CarouselProps, PageControlPosition} from './components/carousel';
 export {default as ActionSheet} from './components/actionSheet';
 export {default as Wizard, WizardProps, WizardStepProps, WizardStepStates, WizardStepConfig, WizardStepsConfig} from './components/wizard';
+export {default as ListItem, ListItemProps} from './components/listItem';
 export {default as StateScreen, StateScreenProps} from './components/stateScreen';
 export {default as LoaderScreen, LoaderScreenProps} from './components/loaderScreen';
 
@@ -88,7 +89,6 @@ export {
   BaseInput,
   TextArea,
   MaskedInput,
-  ListItem,
   ProgressBar,
   ColorSliderGroup,
   Stepper,

generatedTypes/style/animatableManager.d.ts

@@ -1,40 +1,25 @@
+import * as Animatable from 'react-native-animatable';
+declare type AnimationType = {
+    animation: Animatable.Animation;
+    easing?: Animatable.Easing;
+    duration: number;
+    useNativeDriver?: boolean;
+};
+declare type AnimationPresets = {
+    slideInUp: AnimationType;
+    slideInDown: AnimationType;
+    fadeIn: AnimationType;
+    fadeOut: AnimationType;
+    fadeInRight: AnimationType;
+};
 /**
  * @description: Animatable animations and presets
  * @extendsnotes: To have access to uilib's animations, and load your custom animations (optional), call:
  * 'Animatable.initializeRegistryWithDefinitions(AnimatableManager.loadAnimationDefinitions(<OPTIONAL_CUSTOM_ANIMATION>));'
  * in your app entry point
  */
 export declare class AnimatableManager {
-    presets: {
-        slideInUp: {
-            animation: string;
-            easing: string;
-            duration: number;
-            useNativeDriver: boolean;
-        };
-        slideInDown: {
-            animation: string;
-            easing: string;
-            duration: number;
-            useNativeDriver: boolean;
-        };
-        fadeIn: {
-            animation: string;
-            duration: number;
-            useNativeDriver: boolean;
-        };
-        fadeOut: {
-            animation: string;
-            duration: number;
-            useNativeDriver: boolean;
-        };
-        fadeInRight: {
-            animation: string;
-            easing: string;
-            duration: number;
-            useNativeDriver: boolean;
-        };
-    };
+    presets: AnimationPresets;
     animations: any;
     constructor();
     loadAnimationPresets(animationPresets: Dictionary<any>): void;

src/components/actionSheet/index.tsx

@@ -164,6 +164,7 @@ class ActionSheet extends Component<ActionSheetProps> {
         key={index}
         testID={option.testID}
         onPress={() => this.onOptionPress(index)}
+        // @ts-expect-error
         activeBackgroundColor={Colors.dark80}
       >
         <View row paddingL-16 flex centerV>

src/components/listItem/ListItemPart.js

@@ -0,0 +1,50 @@
+import React, {Component} from 'react';
+import {StyleSheet, ViewStyle} from 'react-native';
+import {asBaseComponent} from '../../commons/new';
+import View from '../view';
+import {ListItemPartProps} from './types';
+
+class ListItemPart extends Component<ListItemPartProps> {
+  static displayName = 'ListItem.Part';
+
+  styles = createStyles(this.props);
+
+  render() {
+    const {containerStyle, ...others} = this.props;
+    return (
+      <View style={[this.styles.container, containerStyle]} {...others}>
+        {this.props.children}
+      </View>
+    );
+  }
+}
+
+export {ListItemPartProps};
+export default asBaseComponent<ListItemPartProps>(ListItemPart);
+
+function createStyles({left, right, middle, column}: ListItemPartProps) {
+  let justifyContent: ViewStyle['justifyContent'];
+  if (!column) {
+    justifyContent = 'space-between';
+    if (left) {
+      justifyContent = 'flex-start';
+    }
+    if (right) {
+      justifyContent = 'flex-end';
+    }
+    if (middle) {
+      justifyContent = 'space-between';
+    }
+  } else {
+    justifyContent = 'center';
+  }
+
+  return StyleSheet.create({
+    container: {
+      flexDirection: column ? undefined : 'row',
+      flex: middle ? 1 : 0,
+      justifyContent,
+      alignItems: column ? undefined : 'center'
+    }
+  });
+}