Image - add OverlayIntensity (#1584)

* Image - add OverlayIntensity

* Remove unused code

* Modify opacity according to intensity and color

* Fix typings

Author: M-i-k-e-l

demo/src/screens/componentScreens/ImageScreen.tsx

@@ -1,6 +1,6 @@
 import React, {Component} from 'react';
 import {ScrollView} from 'react-native';
-import {View, Text, Image, Colors, Assets} from 'react-native-ui-lib';
+import {View, Text, Image, Colors, Assets, OverlayTypes} from 'react-native-ui-lib';
 import {renderBooleanOption, renderRadioGroup, renderSliderOption} from '../ExampleScreenPresenter';
 
 const IMAGE_URL =
@@ -38,11 +38,24 @@ enum SizeType {
   Percentage = '50%'
 }
 
-class ImageScreen extends Component {
+interface State {
+  cover: boolean;
+  showOverlayContent: boolean;
+  overlayType: 'none' | OverlayTypes['type'];
+  overlayIntensity: OverlayTypes['intensity'];
+  margin: number;
+  showErrorImage: boolean;
+  showSvg: boolean;
+  isFile: boolean;
+  sizeType: SizeType;
+}
+
+class ImageScreen extends Component<{}, State> {
   state = {
     cover: true,
     showOverlayContent: false,
     overlayType: 'none',
+    overlayIntensity: Image.overlayIntensityType.LOW,
     margin: 0,
     showErrorImage: false,
     showSvg: false,
@@ -75,13 +88,15 @@ class ImageScreen extends Component {
   }
 
   renderImage() {
-    const {cover, overlayType, margin, showErrorImage} = this.state;
+    const {cover, overlayType, overlayIntensity, margin, showErrorImage} = this.state;
     return (
       <Image
+        key={`${overlayType}-${overlayIntensity}`}
         source={{uri: showErrorImage ? BROKEN_URL : IMAGE_URL}}
         errorSource={Assets.images.demo.brokenImage}
         cover={cover}
         overlayType={overlayType !== 'none' ? overlayType : undefined}
+        overlayIntensity={overlayIntensity}
         style={!cover && {width: DEFAULT_SIZE, height: DEFAULT_SIZE}}
         customOverlayContent={this.renderOverlayContent()}
         {...{[`margin-${margin}`]: true}}
@@ -109,7 +124,10 @@ class ImageScreen extends Component {
         {renderBooleanOption.call(this, 'Show as Cover Image', 'cover')}
         {renderBooleanOption.call(this, 'Show Overlay Content', 'showOverlayContent')}
         {renderBooleanOption.call(this, 'Show Error Image', 'showErrorImage')}
-        {renderRadioGroup.call(this, 'Overlay Type', 'overlayType', {none: 'none', ...Image.overlayTypes})}
+        <View row spread>
+          {renderRadioGroup.call(this, 'Overlay Type', 'overlayType', {none: 'none', ...Image.overlayTypes})}
+          {renderRadioGroup.call(this, 'Overlay Intensity', 'overlayIntensity', Image.overlayIntensityType)}
+        </View>
         {renderSliderOption.call(this, 'Margin(margin-XX)', 'margin', {step: 4, min: 0, max: 40})}
       </>
     );

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

@@ -1,7 +1,7 @@
 import React, { PureComponent } from 'react';
 import { ImageProps as RNImageProps, ImageSourcePropType, NativeSyntheticEvent, ImageErrorEventData } from 'react-native';
 import { ForwardRefInjectedProps, BaseComponentInjectedProps, MarginModifiers } from '../../commons/new';
-import { OverlayTypeType } from '../overlay';
+import { OverlayTypeType, OverlayIntensityType } from '../overlay';
 export declare type ImageProps = RNImageProps & MarginModifiers & {
     /**
      * custom source transform handler for manipulating the image source (great for size control)
@@ -36,6 +36,10 @@ export declare type ImageProps = RNImageProps & MarginModifiers & {
      * https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/OverlaysScreen.tsx
      */
     overlayType?: OverlayTypeType;
+    /**
+     * The intensity of the overlay ('LOW' | 'MEDIUM' | 'HIGH'), default is 'LOW'.
+     */
+    overlayIntensity?: OverlayIntensityType;
     /**
      * Pass a custom color for the overlay
      */
@@ -73,6 +77,7 @@ declare class Image extends PureComponent<Props, State> {
         BOTTOM: string;
         SOLID: string;
     };
+    static overlayIntensityType: typeof OverlayIntensityType;
     sourceTransformer?: (props: any) => ImageSourcePropType;
     constructor(props: Props);
     static getDerivedStateFromProps(nextProps: Partial<Props>, prevState: State): {
@@ -123,6 +128,10 @@ declare const _default: React.ComponentClass<RNImageProps & Partial<Record<"marg
      * https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/OverlaysScreen.tsx
      */
     overlayType?: string | undefined;
+    /**
+     * The intensity of the overlay ('LOW' | 'MEDIUM' | 'HIGH'), default is 'LOW'.
+     */
+    overlayIntensity?: OverlayIntensityType | undefined;
     /**
      * Pass a custom color for the overlay
      */

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

@@ -6,12 +6,21 @@ declare const OVERLY_TYPES: {
     BOTTOM: string;
     SOLID: string;
 };
+export declare enum OverlayIntensityType {
+    LOW = "low",
+    MEDIUM = "medium",
+    HIGH = "high"
+}
 export declare type OverlayTypeType = typeof OVERLY_TYPES[keyof typeof OVERLY_TYPES];
 export declare type OverlayTypes = {
     /**
      * The type of overlay to set on top of the image
      */
     type?: OverlayTypeType;
+    /**
+     * The intensity of the gradient, default is 'LOW'.
+     */
+    intensity?: OverlayIntensityType;
     /**
      * The overlay color
      */
@@ -34,9 +43,8 @@ declare class Overlay extends PureComponent<OverlayTypes> {
         BOTTOM: string;
         SOLID: string;
     };
+    static intensityTypes: typeof OverlayIntensityType;
     getStyleByType(type?: string | undefined): ("" | {
-        backgroundColor: string;
-    } | undefined)[] | ("" | {
         bottom: undefined;
         top: number;
         height: string;
@@ -51,9 +59,12 @@ declare class Overlay extends PureComponent<OverlayTypes> {
         }[];
     } | {
         tintColor: string;
-    } | undefined)[] | undefined;
+    } | undefined)[] | {
+        backgroundColor: string;
+    } | undefined;
     renderCustomContent: () => JSX.Element;
     renderImage: (style: any, source: ImageSourcePropType) => JSX.Element;
+    getImageSource: (type?: string | undefined, intensity?: OverlayIntensityType | undefined) => any;
     render(): JSX.Element;
 }
 export default Overlay;

src/components/image/index.tsx

@@ -14,7 +14,7 @@ import Constants from '../../helpers/Constants';
 import {asBaseComponent, ForwardRefInjectedProps, BaseComponentInjectedProps, MarginModifiers} from '../../commons/new';
 // @ts-ignore
 import Assets from '../../assets';
-import Overlay, {OverlayTypeType} from '../overlay';
+import Overlay, {OverlayTypeType, OverlayIntensityType} from '../overlay';
 import SvgImage from './SvgImage';
 
 
@@ -52,6 +52,10 @@ export type ImageProps = RNImageProps & MarginModifiers & {
    * https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/OverlaysScreen.tsx
    */
   overlayType?: OverlayTypeType;
+  /**
+   * The intensity of the overlay ('LOW' | 'MEDIUM' | 'HIGH'), default is 'LOW'.
+   */
+   overlayIntensity?: OverlayIntensityType;
   /**
    * Pass a custom color for the overlay
    */
@@ -89,6 +93,7 @@ class Image extends PureComponent<Props, State> {
   };
 
   public static overlayTypes = Overlay.overlayTypes;
+  public static overlayIntensityType = Overlay.intensityTypes;
 
   sourceTransformer?: (props: any) => ImageSourcePropType;
 
@@ -171,6 +176,7 @@ class Image extends PureComponent<Props, State> {
       cover,
       aspectRatio,
       overlayType,
+      overlayIntensity,
       overlayColor,
       customOverlayContent,
       modifiers,
@@ -199,7 +205,12 @@ class Image extends PureComponent<Props, State> {
         source={source}
       >
         {(overlayType || customOverlayContent) && (
-          <Overlay type={overlayType} color={overlayColor} customContent={customOverlayContent}/>
+          <Overlay
+            type={overlayType}
+            intensity={overlayIntensity}
+            color={overlayColor}
+            customContent={customOverlayContent}
+          />
         )}
       </ImageView>
     );