From f8a4fb1b0e578a9147805632e8bc3adc5bda0cb6 Mon Sep 17 00:00:00 2001
From: BafS <fabacrans@gmail.com>
Date: Mon, 17 Jan 2022 23:49:09 +0100
Subject: [PATCH] Add color formaters

---
 src/ColorsPanel.js |  9 +++++----
 src/Settings.js    | 18 ++++++++++++++++++
 src/atoms.js       |  1 +
 src/utils.js       | 29 +++++++++++++++++++++++++++++
 4 files changed, 53 insertions(+), 4 deletions(-)
 create mode 100644 src/utils.js

diff --git a/src/ColorsPanel.js b/src/ColorsPanel.js
index 88670ad..a04ad15 100644
--- a/src/ColorsPanel.js
+++ b/src/ColorsPanel.js
@@ -7,9 +7,7 @@ import {
   TouchableOpacity,
   ScrollView,
 } from 'react-native';
-
-const luminosity = hexStr =>
-  parseInt(hexStr[0], 16) + parseInt(hexStr[2], 16) + parseInt(hexStr[4], 16);
+import {getFormater, luminosity} from './utils';
 
 /**
  * @param {{name: string, color: string, formatter: (color: string) => string}} param0
@@ -55,6 +53,9 @@ const ColorBox = ({name, color, formatter}) => {
   );
 };
 
+/**
+ * @param {{style: any, palette: {[name: string]: {hex: string}}, name: string, colorFormat: string}} param0
+ */
 export default ({style, palette, name, colorFormat}) => {
   const [isScroll, setIsScroll] = useState(false);
   const springAnim = useRef(new Animated.Value(0)).current;
@@ -79,7 +80,7 @@ export default ({style, palette, name, colorFormat}) => {
   const getColorItemSize = e =>
     e.nativeEvent.layout.height / paletteKeys.length;
 
-  const formatter = hex => `#${hex}`;
+  const formatter = getFormater(colorFormat);
 
   const inner = (
     <Animated.View
diff --git a/src/Settings.js b/src/Settings.js
index d0e7685..5ad37ab 100644
--- a/src/Settings.js
+++ b/src/Settings.js
@@ -37,6 +37,24 @@ export default ({onDonePress}) => {
         ))}
       </Picker>
 
+      <Text
+        style={{
+          fontSize: 15,
+          marginTop: 8,
+          marginBottom: 6,
+          marginLeft: 3,
+        }}>
+        Color format
+      </Text>
+      <Picker
+        selectedValue={settings.colorTheme}
+        onValueChange={colorFormat => setSettings({...settings, colorFormat})}>
+        <Picker.Item label="Hexadecimal (#ab12ef)" value="#hex" />
+        <Picker.Item label="Hexadecimal (ab12ef)" value="hex" />
+        <Picker.Item label="RGB (171, 18, 239)" value="rgb-simple" />
+        <Picker.Item label="RGB (rgb(171, 18, 239))" value="rgb" />
+      </Picker>
+
       <Button title="Done" onPress={onDonePress} />
     </View>
   );
diff --git a/src/atoms.js b/src/atoms.js
index 48c51ba..4d6b695 100644
--- a/src/atoms.js
+++ b/src/atoms.js
@@ -4,5 +4,6 @@ export const settingsState = atom({
   key: 'settingsState',
   default: {
     colorTheme: 'material',
+    colorFormat: '#hex',
   },
 });
diff --git a/src/utils.js b/src/utils.js
new file mode 100644
index 0000000..4c924e1
--- /dev/null
+++ b/src/utils.js
@@ -0,0 +1,29 @@
+/**
+ * @param {string} hexStr
+ * @returns string `r,g,b` format
+ */
+const hexToRgb = hexStr => {
+  const aRgbHex = hexStr.replace(/^#/, '').match(/.{1,2}/g);
+
+  const aRgb = [
+    parseInt(aRgbHex[0], 16),
+    parseInt(aRgbHex[1], 16),
+    parseInt(aRgbHex[2], 16),
+  ];
+
+  return aRgb.join(',');
+};
+
+export const luminosity = hexStr =>
+  parseInt(hexStr[0], 16) + parseInt(hexStr[2], 16) + parseInt(hexStr[4], 16);
+
+export const getFormater = format => {
+  const formats = {
+    'rgb-simple': hex => 'rgb(' + hexToRgb(hex) + ')',
+    rgb: hex => 'rgb(' + hexToRgb(hex) + ')',
+    hex: hex => hex,
+    '#hex': hex => `#${hex}`,
+  };
+
+  return formats[format] ?? null;
+};