Add margin modifiers support to Image component (#853)

Author: ethanshar

demo/src/screens/componentScreens/ImageScreen.tsx

@@ -1,6 +1,6 @@
 import React, {Component} from 'react';
 import {View, Text, Image, Colors} from 'react-native-ui-lib';
-import {renderBooleanOption, renderRadioGroup} from '../ExampleScreenPresenter';
+import {renderBooleanOption, renderRadioGroup, renderSliderOption} from '../ExampleScreenPresenter';
 
 import cameraIcon from '../../assets/icons/cameraSelected.png';
 
@@ -12,7 +12,8 @@ class ImageScreen extends Component {
   state = {
     cover: true,
     showOverlayContent: false,
-    overlayType: 'none'
+    overlayType: 'none',
+    margin: 0
   };
 
   renderOverlayContent() {
@@ -38,8 +39,9 @@ class ImageScreen extends Component {
       }
     }
   }
+
   render() {
-    const {cover, overlayType} = this.state;
+    const {cover, overlayType, margin} = this.state;
 
     return (
       <View flex>
@@ -50,6 +52,7 @@ class ImageScreen extends Component {
             overlayType={overlayType !== 'none' ? overlayType : undefined}
             style={!cover && {width: DEFAULT_SIZE, height: DEFAULT_SIZE}}
             customOverlayContent={this.renderOverlayContent()}
+            {...{[`margin-${margin}`]: true}}
           />
         </View>
         <View height={2} bg-grey60/>
@@ -59,6 +62,7 @@ class ImageScreen extends Component {
               {renderBooleanOption.call(this, 'Show as Cover Image', 'cover')}
               {renderBooleanOption.call(this, 'Show Overlay Content', 'showOverlayContent')}
               {renderRadioGroup.call(this, 'Overlay Type', 'overlayType', {none: 'none', ...Image.overlayTypes})}
+              {renderSliderOption.call(this, 'Margin(margin-XX)', 'margin', {step: 4, min: 0, max: 40})}
             </View>
             <Text text40>Image Screen</Text>
           </View>

generatedTypes/components/image/index.d.ts

@@ -1,8 +1,8 @@
 import React, { PureComponent } from 'react';
 import { ImageProps as RNImageProps, ImageSourcePropType } from 'react-native';
-import { ForwardRefInjectedProps } from '../../commons/new';
+import { ForwardRefInjectedProps, BaseComponentInjectedProps, MarginModifiers } from '../../commons/new';
 import { OverlayTypeType } from '../overlay';
-export declare type ImageProps = RNImageProps & {
+export declare type ImageProps = RNImageProps & MarginModifiers & {
     /**
      * custom source transform handler for manipulating the image source (great for size control)
      */
@@ -45,7 +45,7 @@ export declare type ImageProps = RNImageProps & {
      */
     customOverlayContent?: JSX.Element;
 };
-declare type Props = ImageProps & ForwardRefInjectedProps;
+declare type Props = ImageProps & ForwardRefInjectedProps & BaseComponentInjectedProps;
 /**
  * @description: Image wrapper with extra functionality like source transform and assets support
  * @extends: Image

src/components/image/index.tsx

@@ -4,12 +4,12 @@ import React, {PureComponent} from 'react';
 import hoistNonReactStatic from 'hoist-non-react-statics';
 import {Image as RNImage, ImageProps as RNImageProps, StyleSheet, ImageBackground, ImageSourcePropType} from 'react-native';
 import Constants from '../../helpers/Constants';
-import {asBaseComponent, ForwardRefInjectedProps} from '../../commons/new';
+import {asBaseComponent, ForwardRefInjectedProps, BaseComponentInjectedProps, MarginModifiers} from '../../commons/new';
 // @ts-ignore
 import Assets from '../../assets';
 import Overlay, {OverlayTypeType} from '../overlay';
 
-export type ImageProps = RNImageProps & {
+export type ImageProps = RNImageProps & MarginModifiers & {
   /**
    * custom source transform handler for manipulating the image source (great for size control)
    */
@@ -53,7 +53,7 @@ export type ImageProps = RNImageProps & {
   customOverlayContent?: JSX.Element;
 };
 
-type Props = ImageProps & ForwardRefInjectedProps;
+type Props = ImageProps & ForwardRefInjectedProps & BaseComponentInjectedProps;
 
 /**
  * @description: Image wrapper with extra functionality like source transform and assets support
@@ -122,10 +122,12 @@ class Image extends PureComponent<Props> {
       overlayType,
       overlayColor,
       customOverlayContent,
+      modifiers,
       ...others
     } = this.props;
     const shouldFlipRTL = supportRTL && Constants.isRTL;
     const ImageView = this.shouldUseImageBackground() ? ImageBackground : RNImage;
+    const {margins} = modifiers;
 
     return (
       // @ts-ignore
@@ -136,6 +138,7 @@ class Image extends PureComponent<Props> {
           cover && styles.coverImage,
           this.isGif() && styles.gifImage,
           aspectRatio && {aspectRatio},
+          margins,
           style
         ]}
         accessible={false}