feat: boards and statuses editing and creating for mobiles

src/components/ui/InPlaceInput/InPlaceInput.tsx

@@ -1,6 +1,8 @@
 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";
+import { isMobile } from "react-device-detect";
+import { modals } from "@mantine/modals";
 
 type Props = {
     defaultValue?: string;
@@ -8,6 +10,7 @@ type Props = {
     placeholder?: string;
     getChildren: (startEditing: () => void) => ReactNode;
     inputStyles?: Styles<any>;
+    modalTitle?: string;
 };
 
 const InPlaceInput: FC<Props> = ({
@@ -15,11 +18,11 @@ const InPlaceInput: FC<Props> = ({
     placeholder,
     inputStyles,
     getChildren,
+    modalTitle = "",
     defaultValue = "",
 }) => {
     const [isWriting, setIsWriting] = useState<boolean>(false);
     const [value, setValue] = useState<string>(defaultValue);
-    console.log(value);
     const inputRef = useRef<HTMLInputElement>(null);
 
     useEffect(() => {
@@ -45,8 +48,21 @@ const InPlaceInput: FC<Props> = ({
     }, [isWriting, value]);
 
     const onStartCreating = () => {
-        setValue(defaultValue);
-        setIsWriting(true);
+        if (!isMobile) {
+            setValue(defaultValue);
+            setIsWriting(true);
+            return;
+        }
+
+        modals.openContextModal({
+            modal: "enterNameModal",
+            title: modalTitle,
+            withCloseButton: true,
+            innerProps: {
+                onComplete,
+                defaultValue,
+            },
+        });
     };
 
     const onCancelCreating = () => {