Add wheel color picker (#236)

* Add wheel color picker * Create new tab for wheel picker * Update ColorPickerModal.js with TODO comment --------- Co-authored-by: Diego Rios <[email protected]> Co-authored-by: Kamal Kishor Joshi <[email protected]>
croma-app · May 23, 2024 · 0892d14 · 0892d14
1 parent 7722770
commit 0892d14
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 1 deletion.
diff --git a/components/ColorPickerModal.js b/components/ColorPickerModal.js
@@ -4,10 +4,11 @@ import Clipboard from '@react-native-clipboard/clipboard';
 import { logEvent, notifyMessage } from '../libs/Helpers';
 import SliderColorPicker from './SliderColorPicker';
 import AIColorPicker from './AIColorPicker';
-import Colors from '../constants/Styles';
 import { CromaColorPicker } from './CromaColorPicker';
+import Colors from '../constants/Styles';
 import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
 import HexKeyboard from './HexKeyboard';
+import WheelColorPicker from './WheelColorPicker';
 
 export default function ColorPickerModal({ initialColor, onColorSelected, onClose }) {
   const [color, setColor] = useState(initialColor || '#db0a5b');
@@ -53,6 +54,11 @@ export default function ColorPickerModal({ initialColor, onColorSelected, onClos
         />
       )
     },
+    {
+      key: 'wheel',
+      title: 'Color Wheel',
+      component: <WheelColorPicker color={color} onColorChange={(color) => setColor(color)} />
+    },
     {
       key: 'HSB',
       title: 'HSB',
@@ -92,6 +98,7 @@ export default function ColorPickerModal({ initialColor, onColorSelected, onClos
       </View>
       <ScrollView
         contentContainerStyle={styles.scrollViewContent}
+        scrollEnabled={activeTab !== 'wheel'} // TODO: find if there is some other way to solve this issue. - https://github.com/croma-app/huehive-mobile-app/pull/236/files#r1609216412
         showsVerticalScrollIndicator={false}>
         <View style={styles.colorPickerContainer}>
           {tabs.find((tab) => tab.key === activeTab)?.component}

diff --git a/components/WheelColorPicker.js b/components/WheelColorPicker.js
@@ -0,0 +1,28 @@
+import React from 'react';
+import { ActivityIndicator } from 'react-native';
+import ColorPicker from 'react-native-wheel-color-picker';
+
+function WheelColorPicker({ color, onColorChange }) {
+  return (
+    <ColorPicker
+      style={[{ height: 300 }]}
+      color={color}
+      swatchesOnly={false}
+      onColorChange={onColorChange}
+      onColorChangeComplete={onColorChange}
+      thumbSize={40}
+      sliderSize={40}
+      noSnap={true}
+      row={false}
+      swatchesLast={true}
+      swatches={true}
+      discrete={true}
+      wheelLodingIndicator={<ActivityIndicator size={40} />}
+      sliderLodingIndicator={<ActivityIndicator size={20} />}
+      useNativeDriver={false}
+      useNativeLayout={true}
+    />
+  );
+}
+
+export default WheelColorPicker;
diff --git a/package.json b/package.json
@@ -57,6 +57,7 @@
     "react-native-unimodules": "^0.14.10",
     "react-native-vector-icons": "^9.0.0",
     "react-native-view-shot": "^3.5.0",
+    "react-native-wheel-color-picker": "^1.3.1",
     "rn-fetch-blob": "^0.12.0",
     "styled-components": "^5.3.9",
     "tinycolor2": "^1.6.0",

diff --git a/yarn.lock b/yarn.lock
@@ -7425,6 +7425,11 @@ react-native-element-dropdown@^2.9.0:
   dependencies:
     lodash "^4.17.21"
 
+react-native-elevation@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/react-native-elevation/-/react-native-elevation-1.0.0.tgz#2a091c688290ac9b08b5842d1a8e8a00fc84233e"
+  integrity sha512-BWIKcEYtzjRV6GpkX0Km5/w2E7fgIcywiQOT7JZTc5NSbv/YI9kpFinB9lRFsOoRVGmiqq/O3VfP/oH2clIiBA==
+
 react-native-encrypted-storage@^4.0.3:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/react-native-encrypted-storage/-/react-native-encrypted-storage-4.0.3.tgz#2a4d65459870511e8f4ccd22f02433dab7fa5e91"
@@ -7587,6 +7592,13 @@ react-native-view-shot@^3.5.0:
   resolved "https://registry.yarnpkg.com/react-native-view-shot/-/react-native-view-shot-3.5.0.tgz#129e92b893aca25918c6ecddc08ff44f29d70c27"
   integrity sha512-+/a0zcEcCzAwuzQTU7CmwR1/bDcuy3Yj7093xI3Dhcjccb3FwxNiRyIBonsMSj3fQMmBcqV5d8DGCAeOJ5Ij3A==
 
+react-native-wheel-color-picker@^1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/react-native-wheel-color-picker/-/react-native-wheel-color-picker-1.3.1.tgz#378cb00d045823a8a24838408a83f6387ff87a23"
+  integrity sha512-ojuajzwEkgIHa4Iw94K9FlwA1iifslMo+HDrOFQMBTMCXm1HaFhtQpDZ5upV9y8vujviDko3hDkVqB7/eV0dzg==
+  dependencies:
+    react-native-elevation "^1.0.0"
+
 react-native@^0.66.0:
   version "0.66.5"
   resolved "https://registry.yarnpkg.com/react-native/-/react-native-0.66.5.tgz#9056a2f7ad04d5e75b3a00dab847b3366d69f26a"