refactor: modals refactored

src/components/ui/InPlaceInput/InPlaceInput.tsx

@@ -5,8 +5,8 @@ import InPlaceInputDesktop from "./InPlaceInputDesktop";
 import InPlaceInputMobile from "./InPlaceInputMobile";
 
 type Props = {
-    defaultValue?: string;
-    onComplete: (value: string) => void;
+    value?: string;
+    onChange: (value: string) => void;
     placeholder?: string;
     getChildren: (startEditing: () => void) => ReactNode;
     inputStyles?: Styles<any>;

src/components/ui/InPlaceInput/InPlaceInputDesktop.tsx

@@ -3,22 +3,22 @@ import { TextInput } from "@mantine/core";
 import { Styles } from "@mantine/core/lib/core/styles-api/styles-api.types";
 
 type Props = {
-    defaultValue?: string;
-    onComplete: (value: string) => void;
+    value?: string;
+    onChange: (value: string) => void;
     placeholder?: string;
     getChildren: (startEditing: () => void) => ReactNode;
     inputStyles?: Styles<any>;
 };
 
 const InPlaceInputDesktop: FC<Props> = ({
-    onComplete,
+    onChange,
     placeholder,
     inputStyles,
     getChildren,
-    defaultValue = "",
+    value = "",
 }) => {
     const [isWriting, setIsWriting] = useState<boolean>(false);
-    const [value, setValue] = useState<string>(defaultValue);
+    const [localValue, setLocalValue] = useState<string>(value);
     const inputRef = useRef<HTMLInputElement>(null);
 
     useEffect(() => {
@@ -41,22 +41,22 @@ const InPlaceInputDesktop: FC<Props> = ({
         document.addEventListener("mousedown", handleClickOutside);
         return () =>
             document.removeEventListener("mousedown", handleClickOutside);
-    }, [isWriting, value]);
+    }, [isWriting, localValue]);
 
     const onStartCreating = () => {
-        setValue(defaultValue);
+        setLocalValue(localValue);
         setIsWriting(true);
     };
 
     const onCancelCreating = () => {
-        setValue(defaultValue);
+        setLocalValue(localValue);
         setIsWriting(false);
     };
 
     const onCompleteCreating = () => {
-        const localValue = value.trim();
-        if (localValue) {
-            onComplete(localValue);
+        const val = localValue.trim();
+        if (val) {
+            onChange(val);
         }
         setIsWriting(false);
     };
@@ -67,8 +67,8 @@ const InPlaceInputDesktop: FC<Props> = ({
                 ref={inputRef}
                 placeholder={placeholder}
                 variant={"unstyled"}
-                value={value}
-                onChange={e => setValue(e.target.value)}
+                value={localValue}
+                onChange={e => setLocalValue(e.target.value)}
                 onKeyDown={e => {
                     e.stopPropagation();
                     if (e.key === "Enter") onCompleteCreating();

src/components/ui/InPlaceInput/InPlaceInputMobile.tsx

@@ -2,17 +2,17 @@ import { FC, ReactNode } from "react";
 import { modals } from "@mantine/modals";
 
 type Props = {
-    defaultValue?: string;
-    onComplete: (value: string) => void;
+    value?: string;
+    onChange: (value: string) => void;
     getChildren: (startEditing: () => void) => ReactNode;
     modalTitle?: string;
 };
 
 const InPlaceInputMobile: FC<Props> = ({
-    onComplete,
+    onChange,
     getChildren,
     modalTitle = "",
-    defaultValue = "",
+    value = "",
 }) => {
     const onStartCreating = () => {
         modals.openContextModal({
@@ -20,8 +20,8 @@ const InPlaceInputMobile: FC<Props> = ({
             title: modalTitle,
             withCloseButton: true,
             innerProps: {
-                onComplete,
-                defaultValue,
+                onChange: values => onChange(values.name),
+                value: { name: value },
             },
         });
     };