fix(ui): connect color input to parent record

lies-exposed · Nov 1, 2023 · f6bd9e5 · f6bd9e5
1 parent 8cfcab5
commit f6bd9e5
Showing 1 changed file with 13 additions and 11 deletions.
diff --git a/packages/@liexp/ui/src/components/admin/common/inputs/ColorInput.tsx b/packages/@liexp/ui/src/components/admin/common/inputs/ColorInput.tsx
@@ -4,7 +4,12 @@ import {
 } from "@liexp/shared/lib/utils/colors";
 import get from "lodash/get";
 import * as React from "react";
-import { Button, useRecordContext, type TextInputProps } from "react-admin";
+import {
+  Button,
+  useRecordContext,
+  type TextInputProps,
+  useInput,
+} from "react-admin";
 import { Box, TextField, FormControl } from "../../../mui";
 
 export const ColorInput: React.FC<TextInputProps> = ({
@@ -13,10 +18,9 @@ export const ColorInput: React.FC<TextInputProps> = ({
   ...props
 }) => {
   const record = useRecordContext();
-  const _color = get(record, source) ?? value;
-
-  const [{ color }, setColor] = React.useState({
-    color: _color ?? generateRandomColor(),
+  const { field } = useInput({
+    source,
+    defaultValue: value ?? get(record, source) ?? generateRandomColor(),
   });
 
   return (
@@ -26,7 +30,7 @@ export const ColorInput: React.FC<TextInputProps> = ({
         style={{
           alignItems: "center",
           justifyContent: "center",
-          border: `2px solid ${toColorHash(color)}`,
+          border: `2px solid ${toColorHash(field.value)}`,
           padding: "10px 20px",
         }}
       >
@@ -36,18 +40,16 @@ export const ColorInput: React.FC<TextInputProps> = ({
           variant="contained"
           onClick={() => {
             const color = generateRandomColor();
-            setColor({ color });
-            props.onChange?.({ target: { value: color } });
+            field.onChange({ target: { value: color } });
           }}
         />
         <TextField
           size="small"
           label={props.label ?? "color"}
-          value={color}
+          value={field.value}
           style={{ width: 80 }}
           onChange={(e: any) => {
-            setColor({ color: e.target.value });
-            props.onChange?.(e);
+            field.onChange({ target: { value: e.target.value } });
           }}
         />
       </Box>