From 38c16fe8398f83675c0afdde83ffc54ec4fca34b Mon Sep 17 00:00:00 2001 From: "Anh (Daniel) Le" Date: Wed, 17 Jul 2024 14:59:16 +0700 Subject: [PATCH 1/4] feat: add copy function to visibility input --- components/shared/toggle-visibility-input.tsx | 56 ++++++++++++------- 1 file changed, 37 insertions(+), 19 deletions(-) diff --git a/components/shared/toggle-visibility-input.tsx b/components/shared/toggle-visibility-input.tsx index aef09880..078a2f26 100644 --- a/components/shared/toggle-visibility-input.tsx +++ b/components/shared/toggle-visibility-input.tsx @@ -1,26 +1,44 @@ -import { EyeIcon, EyeOffIcon } from "lucide-react"; -import { useState } from "react"; +import { EyeIcon, EyeOffIcon, Clipboard } from "lucide-react"; +import { useRef, useState } from "react"; import { Button } from "../ui/button"; import { Input, type InputProps } from "../ui/input"; +import { toast } from "sonner"; export const ToggleVisibilityInput = ({ ...props }: InputProps) => { - const [isPasswordVisible, setIsPasswordVisible] = useState(false); + const [isPasswordVisible, setIsPasswordVisible] = useState(false); + const inputRef = useRef(null) - const togglePasswordVisibility = () => { - setIsPasswordVisible((prevVisibility) => !prevVisibility); - }; + const togglePasswordVisibility = () => { + setIsPasswordVisible((prevVisibility) => !prevVisibility); + }; - const inputType = isPasswordVisible ? "text" : "password"; - return ( -
- - -
- ); + const copyToClipboard = () => { + if (!inputRef.current) return; + + const inputElement = inputRef.current; + const text = inputElement.value; + + inputElement.select(); + inputElement.setSelectionRange(0, 99999); + navigator.clipboard.writeText(text); + + toast.success("Value is copied to clipboard"); + } + + const inputType = isPasswordVisible ? "text" : "password"; + return ( +
+ + + +
+ ); }; From c3bca21d144fc73dd13e347f364a9924d8cd52c4 Mon Sep 17 00:00:00 2001 From: "Anh (Daniel) Le" Date: Wed, 17 Jul 2024 18:55:40 +0700 Subject: [PATCH 2/4] fix: remove redundant selection api --- components/shared/toggle-visibility-input.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/components/shared/toggle-visibility-input.tsx b/components/shared/toggle-visibility-input.tsx index 078a2f26..bda228bc 100644 --- a/components/shared/toggle-visibility-input.tsx +++ b/components/shared/toggle-visibility-input.tsx @@ -19,7 +19,6 @@ export const ToggleVisibilityInput = ({ ...props }: InputProps) => { const text = inputElement.value; inputElement.select(); - inputElement.setSelectionRange(0, 99999); navigator.clipboard.writeText(text); toast.success("Value is copied to clipboard"); From e4c243d7a696dc1c8256b9f0c36b507c56640499 Mon Sep 17 00:00:00 2001 From: "Anh (Daniel) Le" Date: Thu, 18 Jul 2024 00:15:43 +0700 Subject: [PATCH 3/4] fix: format toggle visibility input --- components/shared/toggle-visibility-input.tsx | 58 +++++++++---------- 1 file changed, 29 insertions(+), 29 deletions(-) diff --git a/components/shared/toggle-visibility-input.tsx b/components/shared/toggle-visibility-input.tsx index bda228bc..04cebaad 100644 --- a/components/shared/toggle-visibility-input.tsx +++ b/components/shared/toggle-visibility-input.tsx @@ -5,39 +5,39 @@ import { Input, type InputProps } from "../ui/input"; import { toast } from "sonner"; export const ToggleVisibilityInput = ({ ...props }: InputProps) => { - const [isPasswordVisible, setIsPasswordVisible] = useState(false); - const inputRef = useRef(null) + const [isPasswordVisible, setIsPasswordVisible] = useState(false); + const inputRef = useRef(null); - const togglePasswordVisibility = () => { - setIsPasswordVisible((prevVisibility) => !prevVisibility); - }; + const togglePasswordVisibility = () => { + setIsPasswordVisible((prevVisibility) => !prevVisibility); + }; - const copyToClipboard = () => { - if (!inputRef.current) return; + const copyToClipboard = () => { + if (!inputRef.current) return; - const inputElement = inputRef.current; - const text = inputElement.value; + const inputElement = inputRef.current; + const text = inputElement.value; - inputElement.select(); - navigator.clipboard.writeText(text); + inputElement.select(); + navigator.clipboard.writeText(text); - toast.success("Value is copied to clipboard"); - } + toast.success("Value is copied to clipboard"); + }; - const inputType = isPasswordVisible ? "text" : "password"; - return ( -
- - - -
- ); + const inputType = isPasswordVisible ? "text" : "password"; + return ( +
+ + + +
+ ); }; From 87e90cb30b976ae91752db5a71777afeca4641af Mon Sep 17 00:00:00 2001 From: "Anh (Daniel) Le" Date: Thu, 18 Jul 2024 09:44:45 +0700 Subject: [PATCH 4/4] fix: use copy-to-clipboard for visibility input --- components/shared/toggle-visibility-input.tsx | 25 ++++++++----------- 1 file changed, 10 insertions(+), 15 deletions(-) diff --git a/components/shared/toggle-visibility-input.tsx b/components/shared/toggle-visibility-input.tsx index 04cebaad..bb11eeae 100644 --- a/components/shared/toggle-visibility-input.tsx +++ b/components/shared/toggle-visibility-input.tsx @@ -1,8 +1,9 @@ -import { EyeIcon, EyeOffIcon, Clipboard } from "lucide-react"; +import copy from "copy-to-clipboard"; +import { Clipboard, EyeIcon, EyeOffIcon } from "lucide-react"; import { useRef, useState } from "react"; +import { toast } from "sonner"; import { Button } from "../ui/button"; import { Input, type InputProps } from "../ui/input"; -import { toast } from "sonner"; export const ToggleVisibilityInput = ({ ...props }: InputProps) => { const [isPasswordVisible, setIsPasswordVisible] = useState(false); @@ -12,23 +13,17 @@ export const ToggleVisibilityInput = ({ ...props }: InputProps) => { setIsPasswordVisible((prevVisibility) => !prevVisibility); }; - const copyToClipboard = () => { - if (!inputRef.current) return; - - const inputElement = inputRef.current; - const text = inputElement.value; - - inputElement.select(); - navigator.clipboard.writeText(text); - - toast.success("Value is copied to clipboard"); - }; - const inputType = isPasswordVisible ? "text" : "password"; return (
-