refactor: in place input division

src/components/ui/InPlaceInput/InPlaceInput.tsx

@@ -1,8 +1,8 @@
-import React, { FC, ReactNode, useEffect, useRef, useState } from "react";
+import React, { FC, ReactNode } from "react";
-import { TextInput } from "@mantine/core";
 import { Styles } from "@mantine/core/lib/core/styles-api/styles-api.types";
-import { modals } from "@mantine/modals";
 import useIsMobile from "@/hooks/useIsMobile";
+import InPlaceInputDesktop from "./InPlaceInputDesktop";
+import InPlaceInputMobile from "./InPlaceInputMobile";
 
 type Props = {
     defaultValue?: string;
@@ -13,90 +13,14 @@ type Props = {
     modalTitle?: string;
 };
 
-const InPlaceInput: FC<Props> = ({
+const InPlaceInput: FC<Props> = (props) => {
-    onComplete,
-    placeholder,
-    inputStyles,
-    getChildren,
-    modalTitle = "",
-    defaultValue = "",
-}) => {
-    const [isWriting, setIsWriting] = useState<boolean>(false);
-    const [value, setValue] = useState<string>(defaultValue);
-    const inputRef = useRef<HTMLInputElement>(null);
     const isMobile = useIsMobile();
 
-    useEffect(() => {
+    if (isMobile) {
-        if (isWriting && inputRef.current) {
+        return <InPlaceInputMobile {...props} />;
-            inputRef.current.focus();
-        }
-    }, [isWriting]);
-
-    useEffect(() => {
-        const handleClickOutside = (event: MouseEvent) => {
-            if (
-                isWriting &&
-                inputRef.current &&
-                !inputRef.current.contains(event.target as Node)
-            ) {
-                onCompleteCreating();
-            }
-        };
-
-        document.addEventListener("mousedown", handleClickOutside);
-        return () =>
-            document.removeEventListener("mousedown", handleClickOutside);
-    }, [isWriting, value]);
-
-    const onStartCreating = () => {
-        if (!isMobile) {
-            setValue(defaultValue);
-            setIsWriting(true);
-            return;
     }
 
-        modals.openContextModal({
+    return <InPlaceInputDesktop {...props} />;
-            modal: "enterNameModal",
-            title: modalTitle,
-            withCloseButton: true,
-            innerProps: {
-                onComplete,
-                defaultValue,
-            },
-        });
-    };
-
-    const onCancelCreating = () => {
-        setValue(defaultValue);
-        setIsWriting(false);
-    };
-
-    const onCompleteCreating = () => {
-        const localValue = value.trim();
-        if (localValue) {
-            onComplete(localValue);
-        }
-        setIsWriting(false);
-    };
-
-    if (isWriting) {
-        return (
-            <TextInput
-                ref={inputRef}
-                placeholder={placeholder}
-                variant={"unstyled"}
-                value={value}
-                onChange={e => setValue(e.target.value)}
-                onKeyDown={e => {
-                    if (e.key === "Enter") onCompleteCreating();
-                    if (e.key === "Escape") onCancelCreating();
-                }}
-                styles={inputStyles}
-            />
-        );
-    }
-
-    return getChildren(onStartCreating);
 };
 
 export default InPlaceInput;

src/components/ui/InPlaceInput/InPlaceInputDesktop.tsx

@@ -0,0 +1,84 @@
+import React, { FC, ReactNode, useEffect, useRef, useState } from "react";
+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;
+    placeholder?: string;
+    getChildren: (startEditing: () => void) => ReactNode;
+    inputStyles?: Styles<any>;
+};
+
+const InPlaceInputDesktop: FC<Props> = ({
+    onComplete,
+    placeholder,
+    inputStyles,
+    getChildren,
+    defaultValue = "",
+}) => {
+    const [isWriting, setIsWriting] = useState<boolean>(false);
+    const [value, setValue] = useState<string>(defaultValue);
+    const inputRef = useRef<HTMLInputElement>(null);
+
+    useEffect(() => {
+        if (isWriting && inputRef.current) {
+            inputRef.current.focus();
+        }
+    }, [isWriting]);
+
+    useEffect(() => {
+        const handleClickOutside = (event: MouseEvent) => {
+            if (
+                isWriting &&
+                inputRef.current &&
+                !inputRef.current.contains(event.target as Node)
+            ) {
+                onCompleteCreating();
+            }
+        };
+
+        document.addEventListener("mousedown", handleClickOutside);
+        return () =>
+            document.removeEventListener("mousedown", handleClickOutside);
+    }, [isWriting, value]);
+
+    const onStartCreating = () => {
+        setValue(defaultValue);
+        setIsWriting(true);
+    };
+
+    const onCancelCreating = () => {
+        setValue(defaultValue);
+        setIsWriting(false);
+    };
+
+    const onCompleteCreating = () => {
+        const localValue = value.trim();
+        if (localValue) {
+            onComplete(localValue);
+        }
+        setIsWriting(false);
+    };
+
+    if (isWriting) {
+        return (
+            <TextInput
+                ref={inputRef}
+                placeholder={placeholder}
+                variant={"unstyled"}
+                value={value}
+                onChange={e => setValue(e.target.value)}
+                onKeyDown={e => {
+                    if (e.key === "Enter") onCompleteCreating();
+                    if (e.key === "Escape") onCancelCreating();
+                }}
+                styles={inputStyles}
+            />
+        );
+    }
+
+    return getChildren(onStartCreating);
+};
+
+export default InPlaceInputDesktop;

src/components/ui/InPlaceInput/InPlaceInputMobile.tsx

@@ -0,0 +1,32 @@
+import { FC, ReactNode } from "react";
+import { modals } from "@mantine/modals";
+
+type Props = {
+    defaultValue?: string;
+    onComplete: (value: string) => void;
+    getChildren: (startEditing: () => void) => ReactNode;
+    modalTitle?: string;
+};
+
+const InPlaceInputMobile: FC<Props> = ({
+    onComplete,
+    getChildren,
+    modalTitle = "",
+    defaultValue = "",
+}) => {
+    const onStartCreating = () => {
+        modals.openContextModal({
+            modal: "enterNameModal",
+            title: modalTitle,
+            withCloseButton: true,
+            innerProps: {
+                onComplete,
+                defaultValue,
+            },
+        });
+    };
+
+    return getChildren(onStartCreating);
+};
+
+export default InPlaceInputMobile;