Fader - move to design tokens (#1954)

* Fader - move to design tokens

* Change default to backgroundDefault

Author: M-i-k-e-l

demo/src/screens/componentScreens/FaderScreen.tsx

@@ -18,7 +18,7 @@ class FaderScreen extends Component<WithScrollReachedProps> {
   renderItem = (index: number) => {
     return (
       <View key={index} style={styles.item}>
-        <Text>{index + 1}</Text>
+        <Text $textDefault>{index + 1}</Text>
       </View>
     );
   };
@@ -31,7 +31,7 @@ class FaderScreen extends Component<WithScrollReachedProps> {
         : !scrollReachedProps.isScrollAtStart;
 
     return (
-      <View margin-10>
+      <View padding-10>
         {renderHeader('Fader', {'marginB-10': true})}
         <View center>
           <View style={styles.container}>
@@ -69,8 +69,8 @@ const styles = StyleSheet.create({
   item: {
     height: itemHeight,
     width: itemWidth,
-    backgroundColor: Colors.grey60,
-    borderColor: Colors.grey40,
+    backgroundColor: Colors.$backgroundDefault,
+    borderColor: Colors.$outlineNeutralMedium,
     borderWidth: 2,
     alignItems: 'center',
     justifyContent: 'center'

src/components/fader/index.tsx

@@ -1,8 +1,9 @@
 import _ from 'lodash';
-import React, {useCallback} from 'react';
+import React, {useMemo} from 'react';
 import {StyleSheet} from 'react-native';
 import View from '../view';
 import Image, {ImageProps} from '../image';
+import {Colors} from 'style';
 
 export enum FaderPosition {
   /**
@@ -33,7 +34,7 @@ export type FaderProps = Pick<ImageProps, 'supportRTL'> & {
    */
   size?: number;
   /**
-   * Change the default (white) tint color of the fade view.
+   * Change the default tint color of the fade view.
    */
   tintColor?: string;
 };
@@ -46,38 +47,39 @@ const DEFAULT_FADE_SIZE = 50;
  * @gif: https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Fader/Fader.gif?raw=true
  */
 function Fader(props: FaderProps) {
-  const getFadeSize = useCallback(() => {
-    return props.size || DEFAULT_FADE_SIZE;
-  }, [props.size]);
+  const {
+    size = DEFAULT_FADE_SIZE,
+    position = FaderPosition.END,
+    visible,
+    tintColor = Colors.$backgroundDefault
+  } = props;
 
-  const fadeSize = getFadeSize();
-  const getStyles = useCallback(() => {
-    const position = props.position || FaderPosition.END;
+  const styles = useMemo(() => {
     let containerStyle, imageStyle, imageSource;
     switch (position) {
       case FaderPosition.LEFT:
       case FaderPosition.START:
-        containerStyle = {...staticStyles.containerLeft, width: fadeSize};
-        imageStyle = {height: '100%', width: fadeSize};
+        containerStyle = {...staticStyles.containerLeft, width: size};
+        imageStyle = {height: '100%', width: size};
         imageSource = require('./gradientLeft.png');
         break;
       case FaderPosition.RIGHT:
       case FaderPosition.END:
-        containerStyle = {...staticStyles.containerRight, width: fadeSize};
-        imageStyle = {height: '100%', width: fadeSize};
+        containerStyle = {...staticStyles.containerRight, width: size};
+        imageStyle = {height: '100%', width: size};
         imageSource = require('./gradientRight.png');
         break;
       case FaderPosition.TOP:
-        containerStyle = {...staticStyles.containerTop, height: fadeSize};
-        imageStyle = {height: fadeSize, width: '100%'};
+        containerStyle = {...staticStyles.containerTop, height: size};
+        imageStyle = {height: size, width: '100%'};
         imageSource = require('./gradientTop.png');
         break;
       case FaderPosition.BOTTOM:
         containerStyle = {
           ...staticStyles.containerBottom,
-          height: fadeSize
+          height: size
         };
-        imageStyle = {height: fadeSize, width: '100%'};
+        imageStyle = {height: size, width: '100%'};
         imageSource = require('./gradientBottom.png');
         break;
     }
@@ -87,17 +89,15 @@ function Fader(props: FaderProps) {
       imageStyle,
       imageSource
     };
-  }, [fadeSize, props.position]);
-
-  const styles = getStyles();
+  }, [size, position]);
 
   return (
     <View pointerEvents={'none'} style={styles.containerStyle}>
-      {(props.visible || _.isUndefined(props.visible)) && (
+      {(visible || _.isUndefined(visible)) && (
         <Image
           supportRTL
           source={styles.imageSource}
-          tintColor={props.tintColor}
+          tintColor={tintColor}
           style={styles.imageStyle}
           resizeMode={'stretch'}
         />