Reverting changes to screens

Author: nitzanyiz

demo/src/screens/componentScreens/IconScreen.tsx

@@ -16,10 +16,11 @@ const IconScreen = () => {
         <Icon
           margin-30
           size={customSize ? size : undefined}
-          tintColor={customColor ? (color as string) : undefined}
+          tintColor={customColor ? color as string : undefined}
           source={Assets.icons.search}
         />
       </View>
+
       <View marginB-s3 row>
         <Text marginR-s2>Custom Size</Text>
         <Switch value={customSize} onValueChange={setCustomSize}/>
@@ -28,6 +29,7 @@ const IconScreen = () => {
       <Text marginB-50 marginT-s2>
         Custom size: {size}
       </Text>
+
       <View marginB-s3 row>
         <Text marginR-s2>Custom Color</Text>
         <Switch value={customColor} onValueChange={setCustomColor}/>

demo/src/screens/foundationScreens/ColorsScreen.js

@@ -11,8 +11,11 @@ import {
   Icon,
   Button,
   TextField,
-  Incubator
+  Incubator,
+  ColorPalette,
+  ColorPickerDialog
 } from 'react-native-ui-lib';
+import {renderBooleanOption} from '../ExampleScreenPresenter';
 
 const {Toast} = Incubator;
 
@@ -42,7 +45,14 @@ class ColorsScreen extends Component {
     searchValue: '',
     filteredTokens: [],
     showToast: false,
-    message: undefined
+    message: undefined,
+    currentColor: Colors.$textPrimary,
+    showPicker: false,
+    isDefaultOptions: false,
+    adjustLightness: false,
+    adjustSaturation: false,
+    addDarkestTints: true,
+    avoidReverseOnDark: true
   };
 
   scrollViewRef = React.createRef();
@@ -281,13 +291,102 @@ class ColorsScreen extends Component {
     );
   }
 
+  /** Color Palette */
+
+  showColorPicker = () => {
+    this.setState({showPicker: true});
+  };
+
+  onValueChange = (color) => {
+    this.setState({currentColor: color});
+  };
+
+  onSubmit = (color) => {
+    this.setState({currentColor: color});
+  };
+
+  onDismiss = () => {
+    this.setState({showPicker: false});
+  };
+
+  setDefaultOptions = () => {
+    const designKitsOptions = {adjustLightness: false, adjustSaturation: false, addDarkestTints: true, avoidReverseOnDark: true};
+    const defaultOptions = {adjustLightness: true, adjustSaturation: true, addDarkestTints: false, avoidReverseOnDark: false};
+    if (this.state.isDefaultOptions) {
+      this.setState({...designKitsOptions, isDefaultOptions: false});
+    } else {
+      this.setState({...defaultOptions, isDefaultOptions: true});
+    }
+  };
+
+  renderColorPicker = () => {
+    const {showPicker, currentColor} = this.state;
+    return (
+      <ColorPickerDialog
+        visible={showPicker}
+        initialColor={currentColor}
+        key={currentColor}
+        onDismiss={this.onDismiss}
+        onSubmit={this.onSubmit}
+      />
+    );
+  };
+
+  renderOptions = () => {
+    return (
+      <View padding-20>
+        {renderBooleanOption.call(this, 'adjustLightness', 'adjustLightness')}
+        {renderBooleanOption.call(this, 'adjustSaturation', 'adjustSaturation')}
+        {renderBooleanOption.call(this, 'addDarkestTints', 'addDarkestTints')}
+        {renderBooleanOption.call(this, 'avoidReverseOnDark', 'avoidReverseOnDark')}
+        <Button label={this.state.isDefaultOptions ? 'Reset example' : 'Set defaults'} onPress={this.setDefaultOptions}/>
+      </View>
+    );
+  };
+
+  renderColorPalette = () => {
+    const {currentColor, adjustLightness, adjustSaturation, addDarkestTints, avoidReverseOnDark} = this.state;
+    const paletteOptions = {adjustLightness, adjustSaturation, addDarkestTints, avoidReverseOnDark};
+    const palette = Colors.generateColorPalette(currentColor, paletteOptions);
+    return (
+      <View margin-12 br40 style={{borderWidth: 1}}>
+        {this.renderOptions()}
+        <View center row>
+          <TouchableOpacity
+            marginH-10 
+            style={[styles.colorBox, {backgroundColor: currentColor}]} 
+            onPress={this.showColorPicker}
+          />
+          <ColorPalette
+            colors={palette}
+            value={currentColor}
+            swatchStyle={styles.swatchStyle}
+            containerStyle={{marginLeft: -10}}
+            onValueChange={this.onValueChange}
+          />
+        </View>
+      </View>
+    );
+  };
+
+  renderColorPaletteExample = () => {
+    return (
+      <>
+        <Text text50 marginL-20>Generate Color Palette</Text>
+        {this.renderColorPalette()}
+        {this.renderColorPicker()}
+      </>
+    );
+  };
+
   render() {
     return (
       <>
         {this.renderSearch()}
         <ScrollView ref={this.scrollViewRef}>
           {this.renderDesignTokens()}
           {this.renderColors(SYSTEM_COLORS, 'SYSTEM COLORS')}
+          {this.renderColorPaletteExample()}
         </ScrollView>
         {this.renderToast()}
       </>
@@ -303,6 +402,19 @@ const styles = StyleSheet.create({
   searchField: {
     padding: Spacings.s3,
     borderRadius: 8
+  },
+  colorBox: {
+    width: 60,
+    height: 60,
+    borderWidth: 1,
+    borderRadius: 30
+  },
+  swatchStyle: {
+    width: 18,
+    height: 40,
+    borderRadius: 10,
+    marginLeft: 4, 
+    marginRight: 4
   }
 });
 

demo/src/screens/incubatorScreens/IncubatorSliderScreen.tsx

@@ -201,17 +201,14 @@ const IncubatorSliderScreen = () => {
           <Text text90 $textNeutral>
             DEFAULT
           </Text>
-          {
-            // @ts-ignore
-            <GradientSlider
-              color={color}
-              containerStyle={styles.gradientSliderContainer}
-              onValueChange={onGradientValueChange}
-              // @ts-expect-error
-              ref={this.gradientSlider}
-              migrate
-            />
-          }
+          <GradientSlider
+            color={color}
+            containerStyle={styles.gradientSliderContainer}
+            onValueChange={onGradientValueChange}
+            // @ts-expect-error
+            ref={this.gradientSlider}
+            migrate
+          />
           <View style={styles.box}>
             <View style={{flex: 1, backgroundColor: color, opacity: alpha}}/>
           </View>
@@ -220,16 +217,13 @@ const IncubatorSliderScreen = () => {
           <Text text90 $textNeutral>
             HUE
           </Text>
-          {
-            // @ts-ignore
-            <GradientSlider
-              type={GradientSlider.types.HUE}
-              color={COLOR}
-              containerStyle={styles.gradientSliderContainer}
-              onValueChange={onGradientValueChange}
-              migrate
-            />
-          }
+          <GradientSlider
+            type={GradientSlider.types.HUE}
+            color={COLOR}
+            containerStyle={styles.gradientSliderContainer}
+            onValueChange={onGradientValueChange}
+            migrate
+          />
           <View style={styles.box}>
             <View style={{flex: 1, backgroundColor: color}}/>
           </View>