From 1c9e21a710353bb9a75bf519de1342bfa0b615b7 Mon Sep 17 00:00:00 2001
From: dmt0 <dmitry@plot.ly>
Date: Tue, 28 Feb 2023 22:50:30 -0500
Subject: [PATCH] Refactor

---
 src/components/widgets/ColorPicker.js | 107 +-------------------------
 src/lib/constants.js                  |  14 ++++
 2 files changed, 16 insertions(+), 105 deletions(-)

diff --git a/src/components/widgets/ColorPicker.js b/src/components/widgets/ColorPicker.js
index 5ed18c2c..0e1c56bb 100644
--- a/src/components/widgets/ColorPicker.js
+++ b/src/components/widgets/ColorPicker.js
@@ -4,6 +4,7 @@ import tinycolor from 'tinycolor2';
 import {CustomPicker as customPicker, CompactPicker} from 'react-color';
 import Fields from 'react-color/lib/components/sketch/SketchFields';
 import {Hue, Saturation} from 'react-color/lib/components/common';
+import {COLOR_PICKER_SWATCH} from 'lib/constants';
 
 // Utility functions for converting ColorPicker color objects or raw strings into TinyColor objects.
 const extractRGB = (c) => c.rgb || c;
@@ -26,111 +27,7 @@ const Custom = (props) => (
       <Fields {...props} onChange={props.onChangeComplete} />
     </div>
     <div className="colorpicker__swatches">
-      <CompactPicker
-        {...props}
-        colors={[
-          '#b71c1c',
-          '#d32f2f',
-          '#f44336',
-          '#e57373',
-          '#ffcdd2',
-          '#33691e',
-          '#689f38',
-          '#8bc34a',
-          '#aed581',
-          '#dcedc8',
-          '#880e4f',
-          '#c2185b',
-          '#e91e63',
-          '#f06292',
-          '#f8bbd0',
-          '#827717',
-          '#afb42b',
-          '#cddc39',
-          '#dce775',
-          '#f0f4c3',
-          '#4a148c',
-          '#7b1fa2',
-          '#9c27b0',
-          '#ba68c8',
-          '#e1bee7',
-          '#f57f17',
-          '#fbc02d',
-          '#ffeb3b',
-          '#fff176',
-          '#fff9c4',
-          '#311b92',
-          '#512da8',
-          '#673ab7',
-          '#9575cd',
-          '#d1c4e9',
-          '#ff6f00',
-          '#ffa000',
-          '#ffc107',
-          '#ffd54f',
-          '#ffecb3',
-          '#1a237e',
-          '#303f9f',
-          '#3f51b5',
-          '#7986cb',
-          '#c5cae9',
-          '#e65100',
-          '#f57c00',
-          '#ff9800',
-          '#ffb74d',
-          '#ffe0b2',
-          '#0d47a1',
-          '#1976d2',
-          '#2196f3',
-          '#64b5f6',
-          '#bbdefb',
-          '#bf360c',
-          '#e64a19',
-          '#ff5722',
-          '#ff8a65',
-          '#ffccbc',
-          '#01579b',
-          '#0288d1',
-          '#03a9f4',
-          '#4fc3f7',
-          '#b3e5fc',
-          '#3e2723',
-          '#5d4037',
-          '#795548',
-          '#a1887f',
-          '#d7ccc8',
-          '#006064',
-          '#0097a7',
-          '#00bcd4',
-          '#4dd0e1',
-          '#b2ebf2',
-          '#263238',
-          '#455a64',
-          '#607d8b',
-          '#90a4ae',
-          '#cfd8dc',
-          '#004d40',
-          '#00796b',
-          '#009688',
-          '#4db6ac',
-          '#b2dfdb',
-          '#000000',
-          '#1a1a1a',
-          '#333333',
-          '#4d4d4d',
-          '#666666',
-          '#194D33',
-          '#388e3c',
-          '#4caf50',
-          '#81c784',
-          '#c8e6c9',
-          '#7f7f7f',
-          '#999999',
-          '#b2b2b2',
-          '#cccccc',
-          '#ffffff',
-        ]}
-      />
+      <CompactPicker {...props} colors={COLOR_PICKER_SWATCH} />
     </div>
   </div>
 );
diff --git a/src/lib/constants.js b/src/lib/constants.js
index 0f00f036..f7d46537 100644
--- a/src/lib/constants.js
+++ b/src/lib/constants.js
@@ -143,4 +143,18 @@ export const COLORS = {
   black: '#000000',
 };
 
+// prettier-ignore
+export const COLOR_PICKER_SWATCH = [
+  '#b71c1c','#d32f2f','#f44336','#e57373','#ffcdd2','#33691e','#689f38','#8bc34a','#aed581','#dcedc8',
+  '#880e4f','#c2185b','#e91e63','#f06292','#f8bbd0','#827717','#afb42b','#cddc39','#dce775','#f0f4c3',
+  '#4a148c','#7b1fa2','#9c27b0','#ba68c8','#e1bee7','#f57f17','#fbc02d','#ffeb3b','#fff176','#fff9c4',
+  '#311b92','#512da8','#673ab7','#9575cd','#d1c4e9','#ff6f00','#ffa000','#ffc107','#ffd54f','#ffecb3',
+  '#1a237e','#303f9f','#3f51b5','#7986cb','#c5cae9','#e65100','#f57c00','#ff9800','#ffb74d','#ffe0b2',
+  '#0d47a1','#1976d2','#2196f3','#64b5f6','#bbdefb','#bf360c','#e64a19','#ff5722','#ff8a65','#ffccbc',
+  '#01579b','#0288d1','#03a9f4','#4fc3f7','#b3e5fc','#3e2723','#5d4037','#795548','#a1887f','#d7ccc8',
+  '#006064','#0097a7','#00bcd4','#4dd0e1','#b2ebf2','#263238','#455a64','#607d8b','#90a4ae','#cfd8dc',
+  '#004d40','#00796b','#009688','#4db6ac','#b2dfdb','#000000','#1a1a1a','#333333','#4d4d4d','#666666',
+  '#194D33','#388e3c','#4caf50','#81c784','#c8e6c9','#7f7f7f','#999999','#b2b2b2','#cccccc','#ffffff',
+];
+
 export const DEFAULT_COLORS = Object.values(COLORS);