From a0ca9bb6245408a4ff59b13c0fa9d310ec498004 Mon Sep 17 00:00:00 2001
From: diyanqi <60802943+diyanqi@users.noreply.github.com>
Date: Sat, 5 Aug 2023 15:06:34 +0800
Subject: [PATCH] fix: the closing button and text overlap in announcement

- Fix the issue of the closing button and text overlap
- Select the basename when rename
---
 src/components/ModalInput.tsx     | 65 ++++++++++++++++++++++++-------
 src/pages/home/toolbar/Rename.tsx |  1 +
 src/utils/notify.tsx              | 28 +++++++------
 3 files changed, 69 insertions(+), 25 deletions(-)

diff --git a/src/components/ModalInput.tsx b/src/components/ModalInput.tsx
index 2f59d0241..07c157cee 100644
--- a/src/components/ModalInput.tsx
+++ b/src/components/ModalInput.tsx
@@ -10,13 +10,14 @@ import {
   Textarea,
   FormHelperText,
 } from "@hope-ui/solid"
-import { createSignal, JSXElement, Show } from "solid-js"
+import { createSignal, JSXElement, Show, createEffect, onCleanup } from "solid-js"
 import { useT } from "~/hooks"
 import { notify } from "~/utils"
 export type ModalInputProps = {
   opened: boolean
   onClose: () => void
   title: string
+  isRenamingFile?: boolean
   onSubmit?: (text: string) => void
   type?: string
   defaultValue?: string
@@ -25,16 +26,50 @@ export type ModalInputProps = {
   topSlot?: JSXElement
 }
 export const ModalInput = (props: ModalInputProps) => {
-  const [value, setValue] = createSignal(props.defaultValue ?? "")
-  const t = useT()
+  const [value, setValue] = createSignal(props.defaultValue ?? "");
+  const t = useT();
+
+  let inputRef: HTMLInputElement | HTMLTextAreaElement;
+
+  const handleFocus = () => {
+    // Find the position of the first dot (".") in the value
+    const dotIndex = value().lastIndexOf(".");
+
+    setTimeout(() => {
+      // If a dot exists and it is not the first character, select from start to dotIndex
+      // And it must be a file, not a folder
+      if (dotIndex > 0 && props.isRenamingFile) {
+        inputRef.setSelectionRange(0, dotIndex);
+      } else {
+        // If there's no dot or it's the first character, select the entire value
+        inputRef.select();
+      }
+    }, 10); // To prevent default select behavior from interfering
+  };
+
+  createEffect(() => {
+    if (inputRef) {
+      inputRef.focus();
+      handleFocus();
+    }
+
+    // Cleanup function to clear the selection range before unmounting
+    onCleanup(() => {
+      if (inputRef) {
+        inputRef.setSelectionRange(0, 0);
+      }
+    });
+  });
+
   const submit = () => {
     if (!value()) {
-      notify.warning(t("global.empty_input"))
-      return
+      notify.warning(t("global.empty_input"));
+      return;
     }
-    props.onSubmit?.(value())
-    setValue("")
-  }
+    props.onSubmit?.(value());
+    setValue("");
+  };
+
   return (
     <Modal
       blockScrollOnMount={false}
@@ -55,12 +90,14 @@ export const ModalInput = (props: ModalInputProps) => {
                 id="modal-input"
                 type={props.type}
                 value={value()}
+                ref={(el) => (inputRef = el)}
                 onInput={(e) => {
-                  setValue(e.currentTarget.value)
+                  setValue(e.currentTarget.value);
                 }}
+                onFocus={handleFocus}
                 onKeyDown={(e) => {
                   if (e.key === "Enter") {
-                    submit()
+                    submit();
                   }
                 }}
               />
@@ -69,9 +106,11 @@ export const ModalInput = (props: ModalInputProps) => {
             <Textarea
               id="modal-input"
               value={value()}
+              ref={(el) => (inputRef = el)}
               onInput={(e) => {
-                setValue(e.currentTarget.value)
+                setValue(e.currentTarget.value);
               }}
+              onFocus={handleFocus}
             />
           </Show>
           <Show when={props.tips}>
@@ -88,5 +127,5 @@ export const ModalInput = (props: ModalInputProps) => {
         </ModalFooter>
       </ModalContent>
     </Modal>
-  )
-}
+  );
+};
diff --git a/src/pages/home/toolbar/Rename.tsx b/src/pages/home/toolbar/Rename.tsx
index 24abefb49..4cf353c2e 100644
--- a/src/pages/home/toolbar/Rename.tsx
+++ b/src/pages/home/toolbar/Rename.tsx
@@ -34,6 +34,7 @@ export const Rename = () => {
     <Show when={isOpen()}>
       <ModalInput
         title="home.toolbar.input_new_name"
+        isRenamingFile={!selectedObjs()[0].is_dir}
         opened={isOpen()}
         onClose={onClose}
         defaultValue={selectedObjs()[0]?.name ?? ""}
diff --git a/src/utils/notify.tsx b/src/utils/notify.tsx
index e9788b850..dcfae463b 100644
--- a/src/utils/notify.tsx
+++ b/src/utils/notify.tsx
@@ -17,22 +17,26 @@ const notify = {
       render: (props) => {
         return (
           <Box
-            class="notify-render"
             css={{
+              display: "flex",
               backdropFilter: "blur(8px)",
+              backgroundColor: alphaBgColor(),
+              boxShadow: "$md",
+              borderRadius: "$lg",
+              padding: "$3",
             }}
-            bgColor={alphaBgColor()}
-            shadow="$md"
-            rounded="$lg"
-            p="$3"
           >
-            <CloseButton
-              pos="absolute"
-              right="$2"
-              top="$2"
-              onClick={props.close}
-            />
-            {element}
+            <div style={{ flexGrow: 1, display: "flex", alignItems: "center" }}>
+              <div style={{ margin: "auto" }}>{element}</div>
+            </div>
+            <div style={{ display: "inline-block", padding: "5px" }}>
+              <CloseButton
+                style={{ float: "right" }}
+                right="$2"
+                top="$2"
+                onClick={props.close}
+              />
+            </div>
           </Box>
         )
       },