Fix/skeleton types (#1998)

* Skeleton related types fixes

* Prettify

* Add relevant modifiers to SkeletonViewProps

* Revert default type

Author: M-i-k-e-l

demo/src/screens/ExampleScreenPresenter.tsx

@@ -22,7 +22,7 @@ interface RadioGroupOptions {
   useValueAsLabel?: boolean;
 }
 
-export function renderHeader(title: string, others: TextProps) {
+export function renderHeader(title: string, others?: TextProps) {
   return (
     <Text text30 $textDefault {...others}>
       {title}

demo/src/screens/componentScreens/SkeletonViewScreen.tsx

@@ -14,7 +14,6 @@ import {
   View,
   Colors
 } from 'react-native-ui-lib';
-// @ts-expect-error
 import * as ExampleScreenPresenter from '../ExampleScreenPresenter';
 
 const AVATAR_SIZE = 48;
@@ -153,7 +152,7 @@ export default class SkeletonViewScreen extends Component {
         <Text>Verified</Text>
       </View>
     );
-  }
+  };
 
   renderListItemsData = (customValue?: any) => {
     const {isLarge, showEndContent} = this.state;
@@ -163,13 +162,7 @@ export default class SkeletonViewScreen extends Component {
       <React.Fragment>
         {_.times(NUMBER_OF_ITEMS_TO_SHOW, index => {
           return (
-            <ListItem
-              key={index}
-              activeBackgroundColor={Colors.grey60}
-              activeOpacity={0.3}
-              height={90}
-              onPress={() => Alert.alert(`pressed on order #${index + 1}`)}
-            >
+            <ListItem key={index} height={90} onPress={() => Alert.alert(`pressed on order #${index + 1}`)}>
               {hasAvatar && this.renderAvatar()}
               {hasThumbnail && this.renderThumbnail()}
               <ListItem.Part middle column containerStyle={[styles.border, {marginLeft: 18}]}>
@@ -248,16 +241,17 @@ export default class SkeletonViewScreen extends Component {
     const imageSize = this.getImageSize();
 
     return (
-      <View row spread margin-page>
-        <SkeletonView
-          width={imageSize}
-          height={imageSize}
-          showContent={isDataAvailable}
-          renderContent={this.renderImagesData}
-          accessibilityLabel={'Loading image'}
-          times={IMAGE_URIS.length}
-        />
-      </View>
+      <SkeletonView
+        row
+        spread
+        margin-page
+        width={imageSize}
+        height={imageSize}
+        showContent={isDataAvailable}
+        renderContent={this.renderImagesData}
+        accessibilityLabel={'Loading image'}
+        times={IMAGE_URIS.length}
+      />
     );
   };
 
@@ -337,11 +331,11 @@ export default class SkeletonViewScreen extends Component {
             borderRadius={5}
             style={{marginTop: 5}}
             showContent={isDataAvailable}
-            renderContent={() => <Button label='Info' size={'small'} link/>}
+            renderContent={() => <Button label={'Info'} size={Button.sizes.small} link/>}
           />
         </View>
         <SkeletonView
-          shimmerStyle={{width: '100%'/* , height: 30 */}}
+          shimmerStyle={{width: '100%' /* , height: 30 */}}
           height={10}
           borderRadius={5}
           showContent={isDataAvailable}
@@ -350,7 +344,7 @@ export default class SkeletonViewScreen extends Component {
         />
       </View>
     );
-  }
+  };
 
   renderContent = () => {
     const {isDataAvailable} = this.state;

src/commons/new.ts

@@ -9,6 +9,7 @@ export {default as Config} from './Config';
 
 export {
   ContainerModifiers,
+  AlignmentModifiers,
   MarginModifiers,
   PaddingModifiers,
   TypographyModifiers,

src/components/listItem/types.tsx

@@ -1,5 +1,5 @@
 import {PureComponent} from 'react';
-import {ViewStyle} from 'react-native';
+import {StyleProp, ViewStyle} from 'react-native';
 import {TouchableOpacityProps} from '../touchableOpacity';
 
 export type ListItemProps = {
@@ -59,7 +59,7 @@ export type ListItemPartProps = {
   /**
    * container style
    */
-  containerStyle?: ViewStyle;
+  containerStyle?: StyleProp<ViewStyle>;
 };
 
 /**

src/components/skeletonView/index.tsx

@@ -4,7 +4,14 @@ import {StyleSheet, Animated, Easing, StyleProp, ViewStyle, AccessibilityProps}
 import {BorderRadiuses, Colors, Dividers, Spacings} from '../../style';
 import {createShimmerPlaceholder, LinearGradientPackage} from 'optionalDeps';
 import View from '../view';
-import {Constants, asBaseComponent, BaseComponentInjectedProps, MarginModifiers} from '../../commons/new';
+import {
+  Constants,
+  asBaseComponent,
+  BaseComponentInjectedProps,
+  AlignmentModifiers,
+  PaddingModifiers,
+  MarginModifiers
+} from '../../commons/new';
 import {extractAccessibilityProps} from '../../commons/modifiers';
 
 const LinearGradient = LinearGradientPackage?.default;
@@ -53,7 +60,7 @@ export interface SkeletonListProps {
   renderEndContent?: () => React.ReactElement | undefined;
 }
 
-export interface SkeletonViewProps extends AccessibilityProps, MarginModifiers {
+export interface SkeletonViewProps extends AccessibilityProps, AlignmentModifiers, PaddingModifiers, MarginModifiers {
   /**
    * The content has been loaded, start fading out the skeleton and fading in the content
    */
@@ -132,7 +139,7 @@ export interface SkeletonViewProps extends AccessibilityProps, MarginModifiers {
    * The colors of the skeleton view, the array length has to be >=2
    * default: [Colors.grey70, Colors.grey60, Colors.grey70]
    */
-  colors?: string[]
+  colors?: string[];
   /**
    * The border radius of the skeleton view
    */
@@ -141,7 +148,7 @@ export interface SkeletonViewProps extends AccessibilityProps, MarginModifiers {
    * Whether the skeleton is a circle (will override the borderRadius)
    */
   circle?: boolean;
-  /** 
+  /**
    * Additional style to the skeleton view
    */
   shimmerStyle?: StyleProp<ViewStyle>;
@@ -245,7 +252,7 @@ class SkeletonView extends Component<InternalSkeletonViewProps, SkeletonState> {
     if (circle || circleOverride) {
       borderRadius = BorderRadiuses.br100;
       size = Math.max(width || 0, height);
-    } 
+    }
 
     return {
       shimmerColors: colors || [Colors.$backgroundNeutral, Colors.$backgroundNeutralMedium, Colors.$backgroundNeutral],
@@ -366,7 +373,7 @@ class SkeletonView extends Component<InternalSkeletonViewProps, SkeletonState> {
   renderAdvanced = () => {
     const {children, renderContent, showContent, style, ...others} = this.props;
     const data = showContent && _.isFunction(renderContent) ? renderContent(this.props) : children;
-    
+
     return (
       <View style={style} {...this.getAccessibilityProps('Loading content')} {...others}>
         <ShimmerPlaceholder {...this.getDefaultSkeletonProps()} {...others}>