ColorSwatch new unavailable mode (#2425)

* ColorSwatch new unavilable mode

* new size prop for color swatch

* Fixed review notes

* Size prop added to the api.json

* Removed diagonalLine from ColorSwatch index

Author: adids1221

demo/src/screens/componentScreens/ColorSwatchScreen.tsx

@@ -51,6 +51,10 @@ export default class ColorSwatchScreen extends Component {
     this.setState({color2: value});
   };
 
+  unavailableOnPress = () => {
+    console.log(`Pressed on unavailable color swatch!`);
+  };
+
   render() {
     const {color, color1, color2, selected} = this.state;
 
@@ -61,10 +65,16 @@ export default class ColorSwatchScreen extends Component {
             Single ColorSwatch
           </Text>
           <View row>
-            <ColorSwatch selected={selected} onPress={this.onPress}/>
             <View>
-              <ColorSwatch selected color={Colors.$backgroundMajorLight}/>
-              <Text>Disabled</Text>
+              <ColorSwatch selected={selected} onPress={this.onPress}/>
+            </View>
+            <View>
+              <ColorSwatch color={Colors.$backgroundMajorLight}/>
+              <Text text90R>Disabled</Text>
+            </View>
+            <View>
+              <ColorSwatch unavailable onPress={this.unavailableOnPress} color={Colors.yellow10}/>
+              <Text text90R>Unavailable</Text>
             </View>
           </View>
 

src/components/colorSwatch/colorSwatch.api.json

@@ -19,9 +19,9 @@
     {"name": "onPress", "type": "(value: string, options: object) => void", "description": "Callback from press event"},
     {"name": "index", "type": "number", "description": "The index of the Swatch if in array"},
     {"name": "style", "type": "ViewStyle", "description": "Component's style"},
-    {"name": "testID", "type": "string", "description": "The test id for e2e tests"}
+    {"name": "testID", "type": "string", "description": "The test id for e2e tests"},
+    {"name": "unavailable", "type": "boolean", "description": "Is the initial state is unavailable"},
+    {"name": "size", "type": "number", "description": "Color Swatch size"}
   ],
-  "snippet": [
-    "<ColorSwatch color={Colors.red30$1} selected={true$2} onPress={() => console.log('pressed')$3}/>"
-  ]
+  "snippet": ["<ColorSwatch color={Colors.red30$1} selected={true$2} onPress={() => console.log('pressed')$3}/>"]
 }

src/components/colorSwatch/index.tsx

@@ -21,6 +21,10 @@ interface Props {
    * Is the initial state is selected
    */
   selected?: boolean;
+  /**
+   * Is the initial state is unavailable
+   */
+  unavailable?: boolean;
   /**
    * Is first render should be animated
    */
@@ -32,6 +36,10 @@ interface Props {
   index?: number;
   style?: StyleProp<ViewStyle>;
   testID?: string;
+  /**
+   * Color swatch size
+   */
+  size?: number;
 }
 export type ColorSwatchProps = Props;
 
@@ -133,7 +141,7 @@ class ColorSwatch extends PureComponent<Props> {
   };
 
   renderContent() {
-    const {style, color, onPress, ...others} = this.props;
+    const {style, color, onPress, unavailable, size = DEFAULT_SIZE, ...others} = this.props;
     const {isSelected} = this.state;
     const Container = onPress ? TouchableOpacity : View;
     const tintColor = this.getTintColor(color);
@@ -147,21 +155,25 @@ class ColorSwatch extends PureComponent<Props> {
         throttleTime={0}
         hitSlop={{top: 10, bottom: 10, left: 10, right: 10}}
         onPress={this.onPress}
-        style={[this.styles.container, style]}
+        style={[this.styles.container, {width: size, height: size, borderRadius: size / 2}, style]}
         onLayout={this.onLayout}
         {...accessibilityInfo}
       >
         {Colors.isTransparent(color) && (
           <Image source={transparentImage} style={this.styles.transparentImage} resizeMode={'cover'}/>
         )}
-        <Animated.Image
-          source={Assets.icons.check}
-          style={{
-            tintColor,
-            opacity: isSelected,
-            transform: [{scaleX: isSelected}, {scaleY: isSelected}]
-          }}
-        />
+        {unavailable ? (
+          <View style={[this.styles.unavailable, {backgroundColor: tintColor}]}/>
+        ) : (
+          <Animated.Image
+            source={Assets.icons.check}
+            style={{
+              tintColor,
+              opacity: isSelected,
+              transform: [{scaleX: isSelected}, {scaleY: isSelected}]
+            }}
+          />
+        )}
       </Container>
     );
   }
@@ -196,12 +208,9 @@ function createStyles({color = Colors.grey30}) {
   return StyleSheet.create({
     container: {
       backgroundColor: color,
-      width: DEFAULT_SIZE,
-      height: DEFAULT_SIZE,
-      borderRadius: DEFAULT_SIZE / 2,
-      margin: SWATCH_MARGIN,
       borderWidth: color === 'transparent' ? undefined : 1,
-      borderColor: Colors.rgba(Colors.$outlineDisabledHeavy, 0.2)
+      borderColor: Colors.rgba(Colors.$outlineDisabledHeavy, 0.2),
+      margin: SWATCH_MARGIN
     },
     transparentImage: {
       ...StyleSheet.absoluteFillObject,
@@ -210,6 +219,12 @@ function createStyles({color = Colors.grey30}) {
       borderWidth: 1,
       borderRadius: BorderRadiuses.br100,
       borderColor: Colors.rgba(Colors.$outlineDisabledHeavy, 0.2)
+    },
+    unavailable: {
+      height: '100%',
+      width: 3,
+      transform: [{rotate: '45deg'}],
+      opacity: 0.7
     }
   });
 }