[WIP]

Author: 1aurend

client/package.json

@@ -58,6 +58,7 @@
     "@emotion/server": "^11.11.0",
     "@emotion/styled": "^11.14.1",
     "@loadable/component": "^5.16.7",
+    "@melloware/coloris": "^0.25.0",
     "@vidstack/react": "^1.12.13",
     "ace-builds": "^1.x",
     "actioncable": "~5.0.7",

client/src/global/components/form/BaseInput/index.js

@@ -119,6 +119,7 @@ export class FormBaseInput extends PureComponent {
       <InputComponent
         ref={input => {
           this.inputElement = input;
+          if (this.props.colorRef) this.props.colorRef.current = input;
         }}
         id={id}
         name={this.props.name}

client/src/global/components/form/ColorInput/index.js

@@ -1,21 +1,60 @@
-import { useId } from "react";
-import PropTypes from "prop-types";
+import { useId, useEffect, useRef, useState } from "react";
+import Coloris from "@melloware/coloris";
+import setter from "../setter";
 import * as Styled from "./styles";
 
-export default function ColorInput({ defaultValue, ...props }) {
+function ColorInput({ defaultValue, ...props }) {
   const id = useId();
+  const inputRef = useRef();
+  const colorRef = useRef(props.value || defaultValue);
 
-  const renderValue = value => value ?? defaultValue;
+  const inputId = `color-input-${id}`;
+
+  useEffect(() => {
+    Coloris.init();
+
+    document.addEventListener("coloris:pick", event => {
+      const isTarget = event.detail.currentEl.id === inputId;
+      if (isTarget) colorRef.current = event.detail.color;
+    });
+  }, [inputId]);
+
+  useEffect(() => {
+    if (inputRef.current) {
+      Coloris({
+        el: inputRef.current,
+        format: "mixed",
+        formatToggle: true,
+        themeMode: "dark",
+        clearButton: true,
+        closeButton: true,
+        defaultColor: defaultValue,
+        margin: 5
+      });
+
+      inputRef.current.addEventListener("close", () => {
+        props.onChange({ target: { value: colorRef.current } });
+      });
+    }
+  }, [inputRef, defaultValue, colorRef, props.onChange]);
+
+  console.log(props.placeholder);
+
+  const renderValue = () => colorRef.current || defaultValue;
   return (
     <Styled.ColorInput
-      inputType="color"
-      id={`color-input-${id}`}
+      id={inputId}
+      colorRef={inputRef}
       idForError={`color-input-error-${id}`}
       idForInstructions={`color-input-instructions-${id}`}
-      renderValue={renderValue}
+      placeholder={defaultValue}
+      // renderValue={renderValue}
       {...props}
+      $defaultColor={defaultValue}
     />
   );
 }
 
+export default setter(ColorInput);
+
 ColorInput.displayName = "Form.ColorInput";

client/src/global/components/form/ColorInput/styles.js

@@ -1,7 +1,9 @@
 import styled from "@emotion/styled";
-import BaseInput from "../BaseInput";
+import { FormBaseInput } from "../BaseInput";
+
+export const ColorInput = styled(FormBaseInput)`
+  --ColorInput-default-color: ${({ $defaultColor }) => $defaultColor};
 
-export const ColorInput = styled(BaseInput)`
   input[type="color"] {
     width: 24px;
     height: 24px;