Hide color fields

src/components/ColorPicker/ColorPicker.component.tsx

@@ -4,12 +4,21 @@ import { Hue } from "../Hue";
 import { Fields } from "../Fields";
 import "./styles.css";
 
-const ColorPicker = ({ width, height = width, color, onChange, dark = false }: ColorPickerProps): JSX.Element => (
+const ColorPicker = ({
+  width,
+  height = width,
+  color,
+  onChange,
+  hideHEX = false,
+  hideRGB = false,
+  hideHSB = false,
+  dark = false,
+}: ColorPickerProps): JSX.Element => (
   <div className={`rcp ${dark ? "rcp-dark" : "rcp-light"}`}>
     <Saturation width={width} height={height} color={color} onChange={onChange} />
     <div className="rcp-body" style={{ width: width - 32 }}>
       <Hue width={width - 32} color={color} onChange={onChange} />
-      <Fields color={color} onChange={onChange} />
+      <Fields color={color} hideHEX={hideHEX} hideRGB={hideRGB} hideHSB={hideHSB} onChange={onChange} />
     </div>
   </div>
 );

src/components/ColorPicker/ColorPicker.types.ts

@@ -19,6 +19,18 @@ export interface ColorPickerProps {
    * @see [WHAT IS "COLOR"?](https://github.com/Wondermarin/react-color-palette#color)
    */
   readonly onChange: (color: Color) => void;
+  /**
+   * Hide HEX field
+   */
+  readonly hideHEX?: boolean;
+  /**
+   * Hide RGB field
+   */
+  readonly hideRGB?: boolean;
+  /**
+   * Hide HSB field
+   */
+  readonly hideHSB?: boolean;
   /**
    * Color theme.
    */

src/components/Fields/Fields.component.tsx

@@ -1,24 +1,52 @@
-import { FieldsProps } from "./Fields.types";
+import { UpperFloorProps, LowerFloorProps, FieldsProps } from "./Fields.types";
 import { useCallback, useState, useEffect } from "react";
 import { toColor, isValidHEX, toValidRGB, toValidHSB } from "../../utils";
 
-export const Fields = ({ color, onChange }: FieldsProps): JSX.Element => {
-  const getValueHEX = useCallback(
-    () => ({
-      value: color.hex,
-      inputted: false,
-    }),
-    [color.hex]
+const UpperFloor = ({ color, hideHEX, onChange }: UpperFloorProps): JSX.Element => {
+  const getValueHEX = useCallback(() => ({ value: color.hex, inputted: false }), [color.hex]);
+
+  const [valueHEX, setValueHEX] = useState(getValueHEX);
+
+  useEffect(() => {
+    if (!valueHEX.inputted) {
+      setValueHEX(getValueHEX);
+    }
+  }, [valueHEX.inputted, getValueHEX]);
+
+  const changeHEX = (e: React.ChangeEvent<HTMLInputElement>): void => {
+    const value = e.target.value;
+
+    if (isValidHEX(value)) {
+      onChange(toColor("hex", value));
+      setValueHEX({ ...valueHEX, value });
+    }
+  };
+
+  return (
+    <>
+      {!hideHEX && (
+        <div className="rcp-fields-floor">
+          <div className="rcp-fields-element">
+            <input
+              className="rcp-fields-element-input"
+              value={valueHEX.value}
+              onFocus={(): void => setValueHEX({ ...valueHEX, inputted: true })}
+              onChange={changeHEX}
+              onBlur={(): void => setValueHEX({ ...valueHEX, inputted: false })}
+            />
+            <label className="rcp-fields-element-label">HEX</label>
+          </div>
+        </div>
+      )}
+    </>
   );
+};
 
+const LowerFloor = ({ color, hideRGB, hideHSB, onChange }: LowerFloorProps): JSX.Element => {
   const getValueRGB = useCallback(
-    () => ({
-      value: `${color.rgb.r}, ${color.rgb.g}, ${color.rgb.b}`,
-      inputted: false,
-    }),
+    () => ({ value: `${color.rgb.r}, ${color.rgb.g}, ${color.rgb.b}`, inputted: false }),
     [color.rgb]
   );
-
   const getValueHSB = useCallback(
     () => ({
       value: `${Math.round(color.hsb.h)}°, ${Math.round(color.hsb.s)}%, ${Math.round(color.hsb.b)}%`,
@@ -27,16 +55,9 @@ export const Fields = ({ color, onChange }: FieldsProps): JSX.Element => {
     [color.hsb]
   );
 
-  const [valueHEX, setValueHEX] = useState(getValueHEX);
   const [valueRGB, setValueRGB] = useState(getValueRGB);
   const [valueHSB, setValueHSB] = useState(getValueHSB);
 
-  useEffect(() => {
-    if (!valueHEX.inputted) {
-      setValueHEX(getValueHEX);
-    }
-  }, [valueHEX.inputted, getValueHEX]);
-
   useEffect(() => {
     if (!valueRGB.inputted) {
       setValueRGB(getValueRGB);
@@ -49,15 +70,6 @@ export const Fields = ({ color, onChange }: FieldsProps): JSX.Element => {
     }
   }, [valueHSB.inputted, getValueHSB]);
 
-  const changeHEX = (e: React.ChangeEvent<HTMLInputElement>): void => {
-    const value = e.target.value;
-
-    if (isValidHEX(value)) {
-      onChange(toColor("hex", value));
-      setValueHEX({ ...valueHEX, value });
-    }
-  };
-
   const changeRGB = (e: React.ChangeEvent<HTMLInputElement>): void => {
     const value = e.target.value.match(/\d+/g);
 
@@ -83,41 +95,48 @@ export const Fields = ({ color, onChange }: FieldsProps): JSX.Element => {
   };
 
   return (
-    <div className="rcp-fields">
-      <div className="rcp-fields-floor">
-        <div className="rcp-fields-element">
-          <input
-            className="rcp-fields-element-input"
-            value={valueHEX.value}
-            onFocus={(): void => setValueHEX({ ...valueHEX, inputted: true })}
-            onChange={changeHEX}
-            onBlur={(): void => setValueHEX({ ...valueHEX, inputted: false })}
-          />
-          <label className="rcp-fields-element-label">HEX</label>
-        </div>
-      </div>
-      <div className="rcp-fields-floor">
-        <div className="rcp-fields-element">
-          <input
-            className="rcp-fields-element-input"
-            value={valueRGB.value}
-            onFocus={(): void => setValueRGB({ ...valueRGB, inputted: true })}
-            onChange={changeRGB}
-            onBlur={(): void => setValueRGB({ ...valueRGB, inputted: false })}
-          />
-          <label className="rcp-fields-element-label">RGB</label>
+    <>
+      {(!hideRGB || !hideHSB) && (
+        <div className="rcp-fields-floor">
+          {!hideRGB && (
+            <div className="rcp-fields-element">
+              <input
+                className="rcp-fields-element-input"
+                value={valueRGB.value}
+                onFocus={(): void => setValueRGB({ ...valueRGB, inputted: true })}
+                onChange={changeRGB}
+                onBlur={(): void => setValueRGB({ ...valueRGB, inputted: false })}
+              />
+              <label className="rcp-fields-element-label">RGB</label>
+            </div>
+          )}
+          {!hideHSB && (
+            <div className="rcp-fields-element">
+              <input
+                className="rcp-fields-element-input"
+                value={valueHSB.value}
+                onFocus={(): void => setValueHSB({ ...valueHSB, inputted: true })}
+                onChange={changeHSB}
+                onBlur={(): void => setValueHSB({ ...valueHSB, inputted: false })}
+              />
+              <label className="rcp-fields-element-label">HSB</label>
+            </div>
+          )}
         </div>
-        <div className="rcp-fields-element">
-          <input
-            className="rcp-fields-element-input"
-            value={valueHSB.value}
-            onFocus={(): void => setValueHSB({ ...valueHSB, inputted: true })}
-            onChange={changeHSB}
-            onBlur={(): void => setValueHSB({ ...valueHSB, inputted: false })}
-          />
-          <label className="rcp-fields-element-label">HSB</label>
+      )}
+    </>
+  );
+};
+
+export const Fields = ({ color, hideHEX, hideRGB, hideHSB, onChange }: FieldsProps): JSX.Element => {
+  return (
+    <>
+      {(!hideHEX || !hideRGB || !hideHSB) && (
+        <div className="rcp-fields">
+          <UpperFloor color={color} hideHEX={hideHEX} onChange={onChange} />
+          <LowerFloor color={color} hideRGB={hideRGB} hideHSB={hideHSB} onChange={onChange} />
         </div>
-      </div>
-    </div>
+      )}
+    </>
   );
 };

src/components/Fields/Fields.types.ts

@@ -1,6 +1,22 @@
 import { Color } from "../../utils/toColor";
 
+export interface UpperFloorProps {
+  readonly color: Color;
+  readonly hideHEX: boolean;
+  readonly onChange: (color: Color) => void;
+}
+
+export interface LowerFloorProps {
+  readonly color: Color;
+  readonly hideRGB: boolean;
+  readonly hideHSB: boolean;
+  readonly onChange: (color: Color) => void;
+}
+
 export interface FieldsProps {
   readonly color: Color;
+  readonly hideHEX: boolean;
+  readonly hideRGB: boolean;
+  readonly hideHSB: boolean;
   readonly onChange: (color: Color) => void;
 }