remove private modules of eui and the custom color swatches

elastic · Jun 15, 2020 · b4c2559 · b4c2559
1 parent 28f63fc
commit b4c2559
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 69 deletions.
diff --git a/src/plugins/vis_type_timeseries/public/application/components/color_picker.tsx b/src/plugins/vis_type_timeseries/public/application/components/color_picker.tsx
@@ -21,11 +21,13 @@
 // The color picker is not yet accessible.
 
 import React, { useState } from 'react';
-import { EuiIconTip, EuiColorPicker, EuiColorPickerSwatch } from '@elastic/eui';
-// @ts-ignore
-import { useColorPickerState, EuiColorPickerOutput } from '@elastic/eui/lib/services';
+import {
+  EuiIconTip,
+  EuiColorPicker,
+  EuiColorPickerProps,
+  EuiColorPickerSwatch,
+} from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import { COLOR_SWATCHES } from './custom_color_swatches';
 
 const COMMAS_NUMS_ONLY_RE = /[^0-9,]/g;
 
@@ -42,12 +44,13 @@ export interface ColorPickerProps {
 
 export function ColorPicker({ name, value, disableTrash = false, onChange }: ColorPickerProps) {
   const initialColorValue = value ? value.replace(COMMAS_NUMS_ONLY_RE, '') : '';
-  const [color, setColor] = useColorPickerState(initialColorValue);
-  const [selectedColor, setSelectedColor] = useState(color);
+  const [color, setColor] = useState(initialColorValue);
 
-  const handleColorChange = (text: string, { rgba, hex, isValid }: EuiColorPickerOutput) => {
-    setColor(text, { hex, isValid });
-    setSelectedColor(hex);
+  const handleColorChange: EuiColorPickerProps['onChange'] = (
+    text: string,
+    { rgba, hex, isValid }
+  ) => {
+    setColor(text);
     const part: ColorProps = {};
     part[name] = hex ? `rgba(${rgba.join(',')})` : '';
     onChange(part);
@@ -57,7 +60,6 @@ export function ColorPicker({ name, value, disableTrash = false, onChange }: Col
     const part: ColorProps = {};
     part[name] = null;
     onChange(part);
-    setSelectedColor('');
   };
 
   const label = value
@@ -76,8 +78,7 @@ export function ColorPicker({ name, value, disableTrash = false, onChange }: Col
         color={color}
         secondaryInputDisplay="top"
         showAlpha
-        swatches={COLOR_SWATCHES}
-        button={<EuiColorPickerSwatch color={selectedColor} aria-label={label} />}
+        button={<EuiColorPickerSwatch color={color} aria-label={label} />}
       />
       {!disableTrash && (
         <div className="tvbColorPicker__clear" onClick={handleClear}>

diff --git a/src/plugins/vis_type_timeseries/public/application/components/custom_color_swatches.ts b/src/plugins/vis_type_timeseries/public/application/components/custom_color_swatches.ts