Moved useColorPicker to services (#3067)

* Moved useColorPicker from src-docs/src/views/color_picker/utils.js -> src/services * Updated CHANGELOG.md * Updated useColorStop to useColorStopState added initialColorStops param * Updated useColorStops -> useColorStopState Added initialColorStops as param * Update src/services/color_picker/color_picker.ts Co-Authored-By: Greg Thompson <thompsongl@users.noreply.github.com> * Update CHANGELOG.md Co-Authored-By: Greg Thompson <thompsongl@users.noreply.github.com> * Renamed useColorStopState to useColorStopsState * updated useColorStopsState * update CL Co-authored-by: Greg Thompson <thompsongl@users.noreply.github.com> Co-authored-by: Greg Thompson <thompson.glowe@gmail.com>
elastic · Mar 26, 2020 · 83fd6ea · 83fd6ea
1 parent 2bc9917
commit 83fd6ea
Show file tree

Hide file tree

Showing 14 changed files with 58 additions and 34 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,7 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
 - Added `delimiter` prop to `EuiComboBox` ([#3104](https://github.com/elastic/eui/pull/3104))
+- Added `useColorPickerState` and `useColorStopsState` utilities ([#3067](https://github.com/elastic/eui/pull/3067))
 
 ## [`22.0.0`](https://github.com/elastic/eui/tree/v22.0.0)
 

diff --git a/src-docs/src/views/color_picker/alpha.js b/src-docs/src/views/color_picker/alpha.js
@@ -1,11 +1,11 @@
 import React from 'react';
 
 import { EuiColorPicker, EuiFormRow } from '../../../../src/components';
-import { useColorPicker } from './utils';
+import { useColorPickerState } from '../../../../src/services';
 
 export const Alpha = () => {
- const [color, setColor, errors] = useColorPicker('#D36086');
- const [color2, setColor2, errors2] = useColorPicker('211, 96, 134');
+ const [color, setColor, errors] = useColorPickerState('#D36086');
+ const [color2, setColor2, errors2] = useColorPickerState('211, 96, 134');
 
  const customSwatches = [
  '#54B399',

diff --git a/src-docs/src/views/color_picker/color_picker.js b/src-docs/src/views/color_picker/color_picker.js
@@ -1,10 +1,10 @@
 import React from 'react';
 
 import { EuiColorPicker, EuiFormRow } from '../../../../src/components';
-import { useColorPicker } from './utils';
+import { useColorPickerState } from '../../../../src/services';
 
 export const ColorPicker = () => {
- const [color, setColor, errors] = useColorPicker('#D36086');
+ const [color, setColor, errors] = useColorPickerState('#D36086');
  return (
  <EuiFormRow label="Pick a color" isInvalid={!!errors} error={errors}>
  <EuiColorPicker onChange={setColor} color={color} isInvalid={!!errors} />

diff --git a/src-docs/src/views/color_picker/color_stops.js b/src-docs/src/views/color_picker/color_stops.js
@@ -2,10 +2,10 @@ import React, { useState } from 'react';
 
 import { EuiColorStops, EuiFormRow } from '../../../../src/components';
 
-import { useColorStop } from './utils';
+import { useColorStopsState } from '../../../../src/services';
 
 export const ColorStops = () => {
- const [colorStops, setColorStops, addColor] = useColorStop(true);
+ const [colorStops, setColorStops, addColor] = useColorStopsState(true);
 
  const [extendedColorStops, setExtendedColorStops] = useState([
  {

diff --git a/src-docs/src/views/color_picker/containers.js b/src-docs/src/views/color_picker/containers.js
@@ -14,11 +14,14 @@ import {
  EuiSpacer,
 } from '../../../../src/components';
 
-import { useColorPicker, useColorStop } from './utils';
+import {
+ useColorPickerState,
+ useColorStopsState,
+} from '../../../../src/services';
 
 export default () => {
- const [color, setColor] = useColorPicker('#FFF');
- const [colorStops, setColorStops] = useColorStop();
+ const [color, setColor] = useColorPickerState('#FFF');
+ const [colorStops, setColorStops] = useColorStopsState();
  const [isModalVisible, setIsModalVisible] = useState(false);
  const [isPopoverOpen, setIsPopoverOpen] = useState(false);
 

diff --git a/src-docs/src/views/color_picker/custom_button.js b/src-docs/src/views/color_picker/custom_button.js
@@ -8,10 +8,10 @@ import {
  EuiSpacer,
 } from '../../../../src/components';
 
-import { useColorPicker } from './utils';
+import { useColorPickerState } from '../../../../src/services';
 
 export const CustomButton = () => {
- const [color, setColor, errors] = useColorPicker('');
+ const [color, setColor, errors] = useColorPickerState('');
  const [selectedColor, setSelectedColor] = useState(color);
  const handleColorChange = (text, { hex, isValid }) => {
  setColor(text, { hex, isValid });

diff --git a/src-docs/src/views/color_picker/custom_swatches.js b/src-docs/src/views/color_picker/custom_swatches.js
@@ -7,11 +7,14 @@ import {
  EuiSpacer,
 } from '../../../../src/components';
 
-import { useColorPicker, useColorStop } from './utils';
+import {
+ useColorPickerState,
+ useColorStopsState,
+} from '../../../../src/services';
 
 export const CustomSwatches = () => {
- const [color, setColor, errors] = useColorPicker();
- const [colorStops, setColorStops] = useColorStop();
+ const [color, setColor, errors] = useColorPickerState();
+ const [colorStops, setColorStops] = useColorStopsState();
 
  const customSwatches = ['#333', '#666', '#999', '#CCC'];
 

diff --git a/src-docs/src/views/color_picker/formats.js b/src-docs/src/views/color_picker/formats.js
@@ -1,12 +1,12 @@
 import React from 'react';
 
 import { EuiColorPicker, EuiFormRow } from '../../../../src/components';
-import { useColorPicker } from './utils';
+import { useColorPickerState } from '../../../../src/services';
 
 export const Formats = () => {
- const [color, setColor, errors] = useColorPicker('#D36086');
- const [color2, setColor2, errors2] = useColorPicker('#D36086');
- const [color3, setColor3, errors3] = useColorPicker('211, 96, 134');
+ const [color, setColor, errors] = useColorPickerState('#D36086');
+ const [color2, setColor2, errors2] = useColorPickerState('#D36086');
+ const [color3, setColor3, errors3] = useColorPickerState('211, 96, 134');
  return (
  <>
  <EuiFormRow label="Auto format" isInvalid={!!errors} error={errors}>

diff --git a/src-docs/src/views/color_picker/inline.js b/src-docs/src/views/color_picker/inline.js
@@ -1,10 +1,10 @@
 import React from 'react';
 
 import { EuiColorPicker } from '../../../../src/components';
-import { useColorPicker } from './utils';
+import { useColorPickerState } from '../../../../src/services';
 
 export const Inline = () => {
- const [color, setColor, errors] = useColorPicker('#D36086');
+ const [color, setColor, errors] = useColorPickerState('#D36086');
  return (
  <EuiColorPicker
  onChange={setColor}

diff --git a/src-docs/src/views/color_picker/kitchen_sink.js b/src-docs/src/views/color_picker/kitchen_sink.js
@@ -7,11 +7,14 @@ import {
 } from '../../../../src/components';
 import { DisplayToggles } from '../form_controls/display_toggles';
 
-import { useColorPicker, useColorStop } from './utils';
+import {
+ useColorPickerState,
+ useColorStopsState,
+} from '../../../../src/services';
 
 export const KitchenSink = () => {
- const [color, setColor] = useColorPicker('#D36086');
- const [colorStops, setColorStops, addStop] = useColorStop(true);
+ const [color, setColor] = useColorPickerState('#D36086');
+ const [colorStops, setColorStops, addStop] = useColorStopsState(true);
 
  return (
  <React.Fragment>

diff --git a/src-docs/src/views/color_picker/modes.js b/src-docs/src/views/color_picker/modes.js
@@ -7,11 +7,14 @@ import {
  EuiSpacer,
 } from '../../../../src/components';
 
-import { useColorPicker, useColorStop } from './utils';
+import {
+ useColorPickerState,
+ useColorStopsState,
+} from '../../../../src/services';
 
 export const Modes = () => {
- const [color, setColor, errors] = useColorPicker('#D36086');
- const [colorStops, setColorStops] = useColorStop();
+ const [color, setColor, errors] = useColorPickerState('#D36086');
+ const [colorStops, setColorStops] = useColorStopsState();
 
  return (
  <React.Fragment>

diff --git a/src-docs/src/views/color_picker/utils.js → src/services/color_picker/color_picker.ts b/src-docs/src/views/color_picker/utils.js → src/services/color_picker/color_picker.ts
@@ -1,12 +1,17 @@
 import { useMemo, useState } from 'react';
 
+interface colorStopsType {
+ stop: number;
+ color: string;
+}
+
 const generateRandomColor = () =>
  // https://www.paulirish.com/2009/random-hex-color-code-snippets/
  `#${Math.floor(Math.random() * 16777215).toString(16)}`;
 
-export const useColorStop = (useRandomColor = false) => {
- const [addColor, setAddColor] = useState(generateRandomColor());
- const [colorStops, setColorStops] = useState([
+export const useColorStopsState = (
+ useRandomColor: boolean = false,
+ initialColorStops: colorStopsType[] = [
  {
  stop: 20,
  color: '#54B399',
@@ -19,9 +24,12 @@ export const useColorStop = (useRandomColor = false) => {
  stop: 65,
  color: '#9170B8',
  },
- ]);
+ ]
+) => {
+ const [addColor, setAddColor] = useState(generateRandomColor());
+ const [colorStops, setColorStops] = useState(initialColorStops);
 
- const updateColorStops = colorStops => {
+ const updateColorStops = (colorStops: colorStopsType[]) => {
  setColorStops(colorStops);
  if (useRandomColor) {
  setAddColor(generateRandomColor());
@@ -30,10 +38,10 @@ export const useColorStop = (useRandomColor = false) => {
  return [colorStops, updateColorStops, addColor];
 };
 
-export const useColorPicker = (initialColor = '') => {
+export const useColorPickerState = (initialColor = '') => {
  const [color, setColorValue] = useState(initialColor);
  const [isValid, setIsValid] = useState(true);
- const setColor = (text, { isValid }) => {
+ const setColor = (text: string, { isValid }: { isValid: boolean }) => {
  setColorValue(text);
  setIsValid(isValid);
  };

diff --git a/src/services/color_picker/index.ts b/src/services/color_picker/index.ts
@@ -0,0 +1 @@
+export { useColorPickerState, useColorStopsState } from './color_picker';
diff --git a/src/services/index.ts b/src/services/index.ts
@@ -45,6 +45,8 @@ export {
  HSV,
 } from './color';
 
+export { useColorPickerState, useColorStopsState } from './color_picker';
+
 export { copyToClipboard } from './copy_to_clipboard';
 
 export {