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>
     );

src/components/overlay/assets/GradientOverlayHigh.png

@@ -1,9 +1,12 @@
+import {isUndefined} from 'lodash';
 import React, {PureComponent} from 'react';
 import {StyleSheet, Image, ImageSourcePropType} from 'react-native';
 import {Colors} from '../../style';
 import View from '../view';
 
-const gradientImage = require('./assets/GradientOverlay.png');
+const gradientImageLow = require('./assets/GradientOverlayLow.png');
+const gradientImageMed = require('./assets/GradientOverlayMedium.png');
+const gradientImageHigh = require('./assets/GradientOverlayHigh.png');
 
 const OVERLY_TYPES = {
   VERTICAL: 'vertical',
@@ -12,13 +15,23 @@ const OVERLY_TYPES = {
   SOLID: 'solid'
 };
 
+export enum OverlayIntensityType {
+  LOW = 'low',
+  MEDIUM = 'medium',
+  HIGH = 'high'
+}
+
 export type OverlayTypeType = typeof OVERLY_TYPES[keyof typeof OVERLY_TYPES];
 
 export 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
    */
@@ -37,17 +50,29 @@ export type OverlayTypes = {
 class Overlay extends PureComponent<OverlayTypes> {
   static displayName = 'Overlay';
   static overlayTypes = OVERLY_TYPES;
+  static intensityTypes = OverlayIntensityType;
 
   getStyleByType(type = this.props.type) {
-    const {color} = this.props;
+    const {color, intensity} = this.props;
 
     switch (type) {
       case OVERLY_TYPES.TOP:
         return [styles.top, color && {tintColor: color}];
       case OVERLY_TYPES.BOTTOM:
         return [styles.bottom, color && {tintColor: color}];
-      case OVERLY_TYPES.SOLID:
-        return [styles.solid, color && {backgroundColor: color}];
+      case OVERLY_TYPES.SOLID: {
+        if (isUndefined(color)) {
+          const opacity =
+            intensity === OverlayIntensityType.HIGH ? 0.75 : intensity === OverlayIntensityType.MEDIUM ? 0.55 : 0.4;
+          return {backgroundColor: Colors.rgba(Colors.grey10, opacity)};
+        } else if (color === Colors.white) {
+          const opacity =
+            intensity === OverlayIntensityType.HIGH ? 0.85 : intensity === OverlayIntensityType.MEDIUM ? 0.7 : 0.45;
+          return {backgroundColor: Colors.rgba(Colors.white, opacity)};
+        } else {
+          return {backgroundColor: color};
+        }
+      }
       default:
         break;
     }
@@ -66,23 +91,35 @@ class Overlay extends PureComponent<OverlayTypes> {
     return <Image style={[styles.container, style]} resizeMode={'stretch'} source={source}/>;
   };
 
+  getImageSource = (type?: OverlayTypeType, intensity?: OverlayIntensityType) => {
+    if (type !== OVERLY_TYPES.SOLID) {
+      if (intensity === OverlayIntensityType.MEDIUM) {
+        return gradientImageMed;
+      } else if (intensity === OverlayIntensityType.HIGH) {
+        return gradientImageHigh;
+      } else {
+        return gradientImageLow;
+      }
+    }
+  };
+
   render() {
-    const {type, customContent} = this.props;
-    const image = type !== OVERLY_TYPES.SOLID ? gradientImage : undefined;
+    const {type, intensity, customContent} = this.props;
+    const imageSource = this.getImageSource(type, intensity);
 
     if (type === OVERLY_TYPES.VERTICAL) {
       return (
         <>
-          {this.renderImage([this.getStyleByType(OVERLY_TYPES.TOP), styles.vertical], image)}
-          {this.renderImage([this.getStyleByType(OVERLY_TYPES.BOTTOM), styles.vertical], image)}
+          {this.renderImage([this.getStyleByType(OVERLY_TYPES.TOP), styles.vertical], imageSource)}
+          {this.renderImage([this.getStyleByType(OVERLY_TYPES.BOTTOM), styles.vertical], imageSource)}
           {customContent && this.renderCustomContent()}
         </>
       );
     }
 
     return (
       <>
-        {type && this.renderImage(this.getStyleByType(), image)}
+        {type && this.renderImage(this.getStyleByType(), imageSource)}
         {customContent && this.renderCustomContent()}
       </>
     );
@@ -108,9 +145,6 @@ const styles = StyleSheet.create({
   vertical: {
     height: '40%'
   },
-  solid: {
-    backgroundColor: Colors.rgba(Colors.grey10, 0.4)
-  },
   customContent: {
     ...StyleSheet.absoluteFillObject
   }