Remove HSL input, add option to hide slider, update rgb input (#189)

vimeo · Oct 19, 2022 · 5ce0782 · 5ce0782
1 parent 97507ec
commit 5ce0782
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 52 deletions.
diff --git a/src/components/inputs/ColorSelect/ColorSelect.tsx b/src/components/inputs/ColorSelect/ColorSelect.tsx
@@ -53,6 +53,7 @@ function ColorSelectComponent({
   value,
   width = 360,
   attach = 'bottom',
+  showHueSlider = true,
   ...props
 }: Props) {
   const childrenRef = useRef();
@@ -128,16 +129,17 @@ function ColorSelectComponent({
             {...state}
             {...props}
           />
-
-          <HueSlider
-            dragging={dragging}
-            onChange={setHue}
-            onMouseDown={onMouseDown}
-            onMouseUp={onMouseUp}
-            value={HSL.hue * 100}
-            width={width}
-            {...state}
-          />
+          {showHueSlider && (
+            <HueSlider
+              dragging={dragging}
+              onChange={setHue}
+              onMouseDown={onMouseDown}
+              onMouseUp={onMouseUp}
+              value={HSL.hue * 100}
+              width={width}
+              {...state}
+            />
+          )}
           <ColorInputs
             dispatch={dispatch}
             onChange={onChange}

diff --git a/src/components/inputs/ColorSelect/ColorSelect.types.ts b/src/components/inputs/ColorSelect/ColorSelect.types.ts
@@ -71,4 +71,8 @@ export type Props = IrisInputProps<{
    * [default = 'bottom']
    */
   attach?: Attach | AttachAlias;
+  /**
+   * Shows hue slider, default = true
+   */
+  showHueSlider?: boolean;
 }>;
diff --git a/src/components/inputs/ColorSelect/Inputs.tsx b/src/components/inputs/ColorSelect/Inputs.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useRef } from 'react';
 import styled from 'styled-components';
-import { grayscale, parseToHsl, parseToRgb } from 'polished';
+import { grayscale, parseToRgb } from 'polished';
 
 import { Input } from '../Input/Input';
 import { Button } from '../../Button/Button';
@@ -17,7 +17,7 @@ export function ColorInputs({
   ...props
 }) {
   const ref = useRef<HTMLInputElement>();
-  const { HEX, HSL, RGB } = colorMeta;
+  const { HEX, RGB } = colorMeta;
 
   useEffect(() => {
     if (editing) ref?.current?.focus();
@@ -28,14 +28,12 @@ export function ColorInputs({
   function cycle() {
     const type = 'SET_COLORSPACE';
     if (colorSpace === 'HEX') dispatch({ type, payload: 'RGB' });
-    if (colorSpace === 'RGB') dispatch({ type, payload: 'HSL' });
-    if (colorSpace === 'HSL') dispatch({ type, payload: 'HEX' });
+    if (colorSpace === 'RGB') dispatch({ type, payload: 'HEX' });
   }
 
   let value;
   if (colorSpace === 'HEX') value = HEX;
   if (colorSpace === 'RGB') value = toRGBString(RGB);
-  if (colorSpace === 'HSL') value = toHSLString(HSL);
 
   const propsInput = { colorMeta, onClick: edit };
 
@@ -65,7 +63,6 @@ export function ColorInputs({
           <>
             {colorSpace === 'HEX' && <InputHEX {...propsInput} />}
             {colorSpace === 'RGB' && <InputRGB {...propsInput} />}
-            {colorSpace === 'HSL' && <InputHSL {...propsInput} />}
           </>
         )}
       </Wrapper>
@@ -103,7 +100,6 @@ function InputEdit({ value, dispatch, error, forwardRef, onChange }) {
       let payload;
       if (color.type === 'HEX') payload = color.value;
       if (color.type === 'RGB') payload = parseToRgb(color.value);
-      if (color.type === 'HSL') payload = parseToHsl(color.value);
 
       const type = 'SET_' + color.type;
       dispatch({ type, payload });
@@ -150,9 +146,7 @@ function InputHEX({ colorMeta, onClick }) {
 }
 
 function InputRGB({ colorMeta, onClick }) {
-  const {
-    RGB: { red, blue, green },
-  } = colorMeta;
+  const { RGB } = colorMeta;
 
   const props = {
     onClick,
@@ -164,54 +158,24 @@ function InputRGB({ colorMeta, onClick }) {
 
   return (
     <>
-      <ColorInput value={red} {...props} readOnly />
-      <ColorInput value={green} {...props} readOnly />
-      <ColorInput value={blue} {...props} readOnly />
+      <ColorInput value={toRGBString(RGB)} {...props} readOnly />
     </>
   );
 }
 
-function InputHSL({ colorMeta, onClick }) {
-  const {
-    HSL: { hue, saturation, lightness },
-  } = colorMeta;
-
-  const props = {
-    onClick,
-    type: 'text',
-    min: 0,
-    max: 100,
-    readOnly: true,
-  } as const;
-
-  return (
-    <>
-      <ColorInput value={hue} max={360} {...props} />
-      <ColorInput value={saturation * 100} {...props} />
-      <ColorInput value={lightness * 100} {...props} />
-    </>
-  );
-}
-
-function toHSLString(HSL) {
-  const [hue, saturation, lightness] = roundValues(HSL);
-  return `hsl(${hue}, ${saturation}, ${lightness})`;
-}
-
 function toRGBString(RGB) {
   const [red, green, blue] = roundValues(RGB);
   return `rgb(${red}, ${green}, ${blue})`;
 }
 
 function validate(color) {
-  let type: 'HEX' | 'HSL' | 'RGB';
+  let type: 'HEX' | 'RGB';
   let valid = false;
 
   const value = color.replace(/\s+/g, '').replace(';', '');
 
   if (value.startsWith('#')) type = 'HEX';
   if (value.startsWith('rgb')) type = 'RGB';
-  if (value.startsWith('hsl')) type = 'HSL';
 
   try {
     grayscale(value);