Feat/skeleton view full width (#1950)

* SkeletonView - adding 'fullWidth' prop

* SkeletonView - support width as string

* rename const

* types

* merge fix

* Skeleton - expose ShimmerStyle to allow full width

* Adding new prop to api

* fix

* removing d.ts

Author: Inbal-Tish

demo/src/screens/componentScreens/SkeletonViewScreen.tsx

@@ -29,9 +29,10 @@ const NUMBER_OF_ITEMS_TO_SHOW = 10;
 
 const DATA_TYPE = {
   List: 'list',
+  Content: 'content',
   Images: 'images',
   Avatars: 'avatars',
-  Content: 'content'
+  Custom: 'custom'
 };
 
 const LIST_TYPE = {
@@ -317,6 +318,40 @@ export default class SkeletonViewScreen extends Component {
     );
   };
 
+  renderCustom = () => {
+    const {isDataAvailable} = this.state;
+
+    return (
+      <View margin-20>
+        <View row spread marginB-8>
+          <SkeletonView
+            width={120}
+            height={20}
+            borderRadius={5}
+            showContent={isDataAvailable}
+            renderContent={() => <Text text60BO>Lorem Ipsum</Text>}
+          />
+          <SkeletonView
+            width={40}
+            height={10}
+            borderRadius={5}
+            style={{marginTop: 5}}
+            showContent={isDataAvailable}
+            renderContent={() => <Button label='Info' size={'small'} link/>}
+          />
+        </View>
+        <SkeletonView
+          shimmerStyle={{width: '100%'/* , height: 30 */}}
+          height={10}
+          borderRadius={5}
+          showContent={isDataAvailable}
+          renderContent={() => <Text>Lorem Ipsum is simply dummy text of the industry.</Text>}
+          colors={[Colors.red70, Colors.red50, Colors.red70]}
+        />
+      </View>
+    );
+  }
+
   renderContent = () => {
     const {isDataAvailable} = this.state;
     return (
@@ -345,12 +380,14 @@ export default class SkeletonViewScreen extends Component {
           case LIST_TYPE.Thumbnail:
             return this.renderListItemsWithThumbnail();
         }
+      case DATA_TYPE.Content:
+        return this.renderContent();
       case DATA_TYPE.Images:
         return this.renderImages();
       case DATA_TYPE.Avatars:
         return this.renderAvatarStrip();
-      case DATA_TYPE.Content:
-        return this.renderContent();
+      case DATA_TYPE.Custom:
+        return this.renderCustom();
     }
   };
 
@@ -385,7 +422,7 @@ const styles = StyleSheet.create({
     paddingLeft: Spacings.s5
   },
   avatar: {
-    marginHorizontal: 14
+    marginVertical: 8
   },
   image: {
     flex: 1,

generatedTypes/src/components/skeletonView/index.d.ts

@@ -141,6 +141,10 @@ 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>;
   /**
    * Override container styles
    */
@@ -234,20 +238,22 @@ class SkeletonView extends Component<InternalSkeletonViewProps, SkeletonState> {
 
   getDefaultSkeletonProps = (input?: {circleOverride: boolean; style: StyleProp<ViewStyle>}) => {
     const {circleOverride, style} = input || {};
-    const {circle, colors, width = 0, height = 0} = this.props;
+    const {circle, colors, width, height = 0, shimmerStyle} = this.props;
     let {borderRadius} = this.props;
     let size;
+
     if (circle || circleOverride) {
       borderRadius = BorderRadiuses.br100;
-      size = Math.max(width, height);
-    }
+      size = Math.max(width || 0, height);
+    } 
 
     return {
       shimmerColors: colors || [Colors.$backgroundNeutral, Colors.$backgroundNeutralMedium, Colors.$backgroundNeutral],
       isReversed: Constants.isRTL,
       style: [{borderRadius}, style],
       width: size || width,
-      height: size || height
+      height: size || height,
+      shimmerStyle
     };
   };
 
@@ -360,6 +366,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')}>
         <ShimmerPlaceholder {...this.getDefaultSkeletonProps()} {...others}>

src/components/skeletonView/index.tsx

@@ -49,6 +49,7 @@
       "type": "boolean",
       "description": "Whether the skeleton is a circle (will override the borderRadius)"
     },
+    {"name": "shimmerStyle", "type": "ViewStyle", "description": "Additional style to the skeleton view"},
     {"name": "style", "type": "ViewStyle", "description": "Override container styles"},
     {"name": "testID", "type": "string", "description": "The component test id"}
   ],