legalgonews/legalgo-FE-reactrouter
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: update InputFile component to conditionally reset uploaded file state based on upload status

Browse Source
This commit is contained in:
Ardeman 2025-03-10 13:37:50 +08:00
parent c70aa86be6
commit ba83a6a025
2 changed files with 269 additions and 256 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

520
app/components/text-editor/editor-menubar.tsx
View File

@ -1,3 +1,4 @@
import { Input } from '@headlessui/react'
import { import {
ArrowUturnLeftIcon, ArrowUturnLeftIcon,
ArrowUturnRightIcon, ArrowUturnRightIcon,
@ -6,6 +7,7 @@ import {
Bars3Icon, Bars3Icon,
Bars4Icon, Bars4Icon,
BoldIcon, BoldIcon,
CloudArrowUpIcon,
CodeBracketIcon, CodeBracketIcon,
DocumentTextIcon, DocumentTextIcon,
H1Icon, H1Icon,
@ -27,9 +29,12 @@ import {
useState, useState,
useRef, useRef,
useCallback, useCallback,
useEffect,
} from 'react' } from 'react'
import { HexColorInput, HexColorPicker } from 'react-colorful' import { HexColorInput, HexColorPicker } from 'react-colorful'
import { Button } from '~/components/ui/button'
import { useAdminContext } from '~/contexts/admin'
import { useClickOutside } from '~/hooks/use-click-outside' import { useClickOutside } from '~/hooks/use-click-outside'
import { isHexCompatible, rgbToHex } from '~/utils/color' import { isHexCompatible, rgbToHex } from '~/utils/color'
@ -49,10 +54,27 @@ export const EditorMenuBar = (properties: TProperties) => {
// category, // category,
disabled = false, disabled = false,
} = properties } = properties
// const [isOpenImage, setIsOpenImage] = useState(false) const { setIsUploadOpen, uploadedFile, setUploadedFile } = useAdminContext()
const [isOpenImage, setIsOpenImage] = useState(false)
const [imageUrl, setImageUrl] = useState('')
const [isOpenColor, setIsOpenColor] = useState(false) const [isOpenColor, setIsOpenColor] = useState(false)
const popover = useRef<HTMLDivElement>(null) const popover = useRef<HTMLDivElement>(null)
const close = useCallback(() => setIsOpenColor(false), []) const close = useCallback(() => {
setIsOpenColor(false)
setIsOpenImage(false)
if (imageUrl) {
addImage(imageUrl)
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [])
useEffect(() => {
if (uploadedFile) {
addImage(uploadedFile)
setUploadedFile(undefined)
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [uploadedFile])
useClickOutside(popover, close) useClickOutside(popover, close)
@ -96,167 +118,150 @@ export const EditorMenuBar = (properties: TProperties) => {
} }
} }
const uploadEnabled = false
const toggleUpload = () => {
if (uploadEnabled) {
// setIsOpenImage(true)
} else {
const urlImage = globalThis.prompt('URL')
if (urlImage) {
addImage(urlImage)
}
}
}
return ( return (
<> <div className="flex items-start justify-between gap-4 px-4 py-3">
<div className="flex items-start justify-between gap-4 px-4 py-3"> <div className="flex divide-x">
<div className="flex divide-x"> <div className="flex max-w-[150px] flex-wrap items-start gap-1 px-1">
<div className="flex max-w-[150px] flex-wrap items-start gap-1 px-1"> <EditorButton
onClick={() => editor.chain().focus().toggleBold().run()}
disabled={
disabled || !editor.can().chain().focus().toggleBold().run()
}
isActive={editor.isActive('bold')}
title="Bold"
>
<BoldIcon />
</EditorButton>
<EditorButton
onClick={() => editor.chain().focus().toggleItalic().run()}
disabled={
disabled || !editor.can().chain().focus().toggleItalic().run()
}
isActive={editor.isActive('italic')}
title="Italic"
>
<ItalicIcon />
</EditorButton>
<EditorButton
onClick={() => editor.chain().focus().toggleStrike().run()}
disabled={
disabled || !editor.can().chain().focus().toggleStrike().run()
}
isActive={editor.isActive('strike')}
title="Strike"
>
<StrikethroughIcon />
</EditorButton>
<div className="relative">
<EditorButton <EditorButton
onClick={() => editor.chain().focus().toggleBold().run()} onClick={() => setIsOpenColor(true)}
disabled={ title="Text Color"
disabled || !editor.can().chain().focus().toggleBold().run() style={{
} color: rgbColor,
isActive={editor.isActive('bold')} }}
title="Bold" isActive={true}
disabled={disabled}
> >
<BoldIcon /> <SwatchIcon />
</EditorButton> </EditorButton>
<EditorButton {isOpenColor && (
onClick={() => editor.chain().focus().toggleItalic().run()} <div
disabled={ className="border-md absolute top-8 left-0"
disabled || !editor.can().chain().focus().toggleItalic().run() ref={popover}
}
isActive={editor.isActive('italic')}
title="Italic"
>
<ItalicIcon />
</EditorButton>
<EditorButton
onClick={() => editor.chain().focus().toggleStrike().run()}
disabled={
disabled || !editor.can().chain().focus().toggleStrike().run()
}
isActive={editor.isActive('strike')}
title="Strike"
>
<StrikethroughIcon />
</EditorButton>
<div className="relative">
<EditorButton
onClick={() => setIsOpenColor(true)}
title="Text Color"
style={{
color: rgbColor,
}}
isActive={true}
disabled={disabled}
> >
<SwatchIcon /> <HexColorPicker
</EditorButton> className="z-10 rounded-lg shadow"
{isOpenColor && ( color={rgbColor}
<div onChange={handleChangeColor}
className="border-md absolute top-8 left-0" />
ref={popover} <div className="">
> <HexColorInput
<HexColorPicker
className="z-10"
color={rgbColor} color={rgbColor}
onChange={handleChangeColor} onChange={handleChangeColor}
prefixed
className="relative z-10 mt-1 flex w-full rounded-lg border-0 bg-white px-3 py-2 text-sm shadow read-only:bg-gray-100 focus:ring-1 focus:ring-[#2E2F7C] focus:outline-none focus-visible:outline-0 disabled:bg-gray-100"
/> />
<div className="">
<HexColorInput
color={rgbColor}
onChange={handleChangeColor}
prefixed
className="relative z-10 mt-1 flex w-full rounded-lg border px-3 py-2 text-sm focus:ring-0 focus-visible:outline-0"
/>
</div>
</div> </div>
)} </div>
</div> )}
<EditorButton
onClick={() => editor.chain().focus().setTextAlign('left').run()}
disabled={
disabled ||
!editor.can().chain().focus().setTextAlign('left').run()
}
isActive={editor.isActive({ textAlign: 'left' })}
title="Align Left"
>
<Bars3BottomLeftIcon />
</EditorButton>
<EditorButton
onClick={() =>
editor.chain().focus().setTextAlign('center').run()
}
disabled={
disabled ||
!editor.can().chain().focus().setTextAlign('center').run()
}
isActive={editor.isActive({ textAlign: 'center' })}
title="Align Center"
>
<Bars3Icon />
</EditorButton>
<EditorButton
onClick={() => editor.chain().focus().setTextAlign('right').run()}
disabled={
disabled ||
!editor.can().chain().focus().setTextAlign('right').run()
}
isActive={editor.isActive({ textAlign: 'right' })}
title="Align Right"
>
<Bars3BottomRightIcon />
</EditorButton>
<EditorButton
onClick={() =>
editor.chain().focus().setTextAlign('justify').run()
}
disabled={
disabled ||
!editor.can().chain().focus().setTextAlign('justify').run()
}
isActive={editor.isActive({ textAlign: 'justify' })}
title="Align Justify"
>
<Bars4Icon />
</EditorButton>
</div> </div>
<div className="flex max-w-[150px] flex-wrap items-start gap-1 px-1"> <EditorButton
<EditorButton onClick={() => editor.chain().focus().setTextAlign('left').run()}
onClick={() => disabled={
editor.chain().focus().toggleHeading({ level: 1 }).run() disabled ||
} !editor.can().chain().focus().setTextAlign('left').run()
isActive={editor.isActive('heading', { level: 1 })} }
title="Heading 1" isActive={editor.isActive({ textAlign: 'left' })}
disabled={disabled} title="Align Left"
> >
<H1Icon /> <Bars3BottomLeftIcon />
</EditorButton> </EditorButton>
<EditorButton <EditorButton
onClick={() => onClick={() => editor.chain().focus().setTextAlign('center').run()}
editor.chain().focus().toggleHeading({ level: 2 }).run() disabled={
} disabled ||
isActive={editor.isActive('heading', { level: 2 })} !editor.can().chain().focus().setTextAlign('center').run()
title="Heading 2" }
disabled={disabled} isActive={editor.isActive({ textAlign: 'center' })}
> title="Align Center"
<H2Icon /> >
</EditorButton> <Bars3Icon />
<EditorButton </EditorButton>
onClick={() => <EditorButton
editor.chain().focus().toggleHeading({ level: 3 }).run() onClick={() => editor.chain().focus().setTextAlign('right').run()}
} disabled={
isActive={editor.isActive('heading', { level: 3 })} disabled ||
title="Heading 3" !editor.can().chain().focus().setTextAlign('right').run()
disabled={disabled} }
> isActive={editor.isActive({ textAlign: 'right' })}
<H3Icon /> title="Align Right"
</EditorButton> >
{/* <EditorButton <Bars3BottomRightIcon />
</EditorButton>
<EditorButton
onClick={() => editor.chain().focus().setTextAlign('justify').run()}
disabled={
disabled ||
!editor.can().chain().focus().setTextAlign('justify').run()
}
isActive={editor.isActive({ textAlign: 'justify' })}
title="Align Justify"
>
<Bars4Icon />
</EditorButton>
</div>
<div className="flex max-w-[150px] flex-wrap items-start gap-1 px-1">
<EditorButton
onClick={() =>
editor.chain().focus().toggleHeading({ level: 1 }).run()
}
isActive={editor.isActive('heading', { level: 1 })}
title="Heading 1"
disabled={disabled}
>
<H1Icon />
</EditorButton>
<EditorButton
onClick={() =>
editor.chain().focus().toggleHeading({ level: 2 }).run()
}
isActive={editor.isActive('heading', { level: 2 })}
title="Heading 2"
disabled={disabled}
>
<H2Icon />
</EditorButton>
<EditorButton
onClick={() =>
editor.chain().focus().toggleHeading({ level: 3 }).run()
}
isActive={editor.isActive('heading', { level: 3 })}
title="Heading 3"
disabled={disabled}
>
<H3Icon />
</EditorButton>
{/* <EditorButton
onClick={() => editor.chain().focus().setParagraph().run()} onClick={() => editor.chain().focus().setParagraph().run()}
isActive={editor.isActive('paragraph')} isActive={editor.isActive('paragraph')}
title="Paragraph" title="Paragraph"
@ -264,32 +269,32 @@ export const EditorMenuBar = (properties: TProperties) => {
> >
<RiParagraph /> <RiParagraph />
</EditorButton> */} </EditorButton> */}
<EditorButton <EditorButton
onClick={() => editor.chain().focus().toggleBulletList().run()} onClick={() => editor.chain().focus().toggleBulletList().run()}
isActive={editor.isActive('bulletList')} isActive={editor.isActive('bulletList')}
title="Bullet List" title="Bullet List"
disabled={disabled} disabled={disabled}
> >
<ListBulletIcon /> <ListBulletIcon />
</EditorButton> </EditorButton>
<EditorButton <EditorButton
onClick={() => editor.chain().focus().toggleOrderedList().run()} onClick={() => editor.chain().focus().toggleOrderedList().run()}
isActive={editor.isActive('orderedList')} isActive={editor.isActive('orderedList')}
title="Ordered List" title="Ordered List"
disabled={disabled} disabled={disabled}
> >
<NumberedListIcon /> <NumberedListIcon />
</EditorButton> </EditorButton>
<EditorButton <EditorButton
onClick={() => editor.chain().focus().toggleCodeBlock().run()} onClick={() => editor.chain().focus().toggleCodeBlock().run()}
isActive={editor.isActive('codeBlock')} isActive={editor.isActive('codeBlock')}
title="Code Block" title="Code Block"
disabled={disabled} disabled={disabled}
> >
<CodeBracketIcon /> <CodeBracketIcon />
</EditorButton> </EditorButton>
</div> </div>
{/* <div className="flex items-start gap-1 px-1"> {/* <div className="flex items-start gap-1 px-1">
<EditorButton <EditorButton
onClick={() => editor.chain().focus().toggleBlockquote().run()} onClick={() => editor.chain().focus().toggleBlockquote().run()}
isActive={editor.isActive('blockquote')} isActive={editor.isActive('blockquote')}
@ -306,7 +311,7 @@ export const EditorMenuBar = (properties: TProperties) => {
<RiSeparator /> <RiSeparator />
</EditorButton> </EditorButton>
</div> */} </div> */}
{/* <div className="flex items-start gap-1 px-1"> {/* <div className="flex items-start gap-1 px-1">
<EditorButton <EditorButton
onClick={() => editor.chain().focus().setHardBreak().run()} onClick={() => editor.chain().focus().setHardBreak().run()}
title="Hard Break" title="Hard Break"
@ -325,89 +330,96 @@ export const EditorMenuBar = (properties: TProperties) => {
<RiFormatClear /> <RiFormatClear />
</EditorButton> </EditorButton>
</div> */} </div> */}
<div className="flex items-start gap-1 px-1"> <div className="flex items-start gap-1 px-1">
<div className="relative">
<EditorButton <EditorButton
onClick={() => toggleUpload()} onClick={() => setIsOpenImage(true)}
title="Insert Image" title="Insert Image"
disabled={disabled} disabled={disabled}
> >
<PhotoIcon /> <PhotoIcon />
</EditorButton> </EditorButton>
<EditorButton {isOpenImage && (
onClick={() => setLink()} <div
disabled={ className="border-md absolute top-8 left-0 w-50"
disabled || ref={popover}
!editor >
.can() <div className="relative">
.chain() <Input
.focus() placeholder="Masukkan URL Gambar"
.extendMarkRange('link') color={rgbColor}
.setLink({ href: '' }) onChange={(event) => {
.run() setImageUrl(event.target.value)
} }}
isActive={editor.isActive('link')} className="z-10 flex h-[42px] w-full rounded-lg border-0 bg-white p-2 pr-8 text-sm shadow read-only:bg-gray-100 focus:ring-1 focus:ring-[#2E2F7C] focus:outline-none focus-visible:outline-0 disabled:bg-gray-100"
title="Set Link" />
> <Button
<LinkIcon /> type="button"
</EditorButton> variant="icon"
<EditorButton size="fit"
onClick={() => editor.chain().focus().unsetLink().run()} className="absolute top-0 right-3 h-[42px]"
disabled={disabled || !editor.isActive('link')} onClick={() => {
title="Unset Link" setIsUploadOpen('content')
> }}
<LinkSlashIcon /> >
</EditorButton> <CloudArrowUpIcon className="h-4 w-4 text-gray-500/50" />
</div> </Button>
<div className="flex items-start gap-1 px-1"> </div>
<EditorButton </div>
onClick={() => editor.chain().focus().undo().run()} )}
disabled={disabled || !editor.can().chain().focus().undo().run()}
title="Undo"
>
<ArrowUturnLeftIcon />
</EditorButton>
<EditorButton
onClick={() => editor.chain().focus().redo().run()}
disabled={disabled || !editor.can().chain().focus().redo().run()}
title="Redo"
>
<ArrowUturnRightIcon />
</EditorButton>
</div> </div>
<EditorButton
onClick={() => setLink()}
disabled={
disabled ||
!editor
.can()
.chain()
.focus()
.extendMarkRange('link')
.setLink({ href: '' })
.run()
}
isActive={editor.isActive('link')}
title="Set Link"
>
<LinkIcon />
</EditorButton>
<EditorButton
onClick={() => editor.chain().focus().unsetLink().run()}
disabled={disabled || !editor.isActive('link')}
title="Unset Link"
>
<LinkSlashIcon />
</EditorButton>
</div> </div>
<div> <div className="flex items-start gap-1 px-1">
<div className="flex gap-1 px-1"> <EditorButton
<EditorButton onClick={() => editor.chain().focus().undo().run()}
onClick={() => setIsPlainHTML(true)} disabled={disabled || !editor.can().chain().focus().undo().run()}
title="Switch to Plain Text" title="Undo"
> >
<DocumentTextIcon /> <ArrowUturnLeftIcon />
</EditorButton> </EditorButton>
</div> <EditorButton
onClick={() => editor.chain().focus().redo().run()}
disabled={disabled || !editor.can().chain().focus().redo().run()}
title="Redo"
>
<ArrowUturnRightIcon />
</EditorButton>
</div> </div>
</div> </div>
<div>
{/* <Dialog <div className="flex gap-1 px-1">
isOpen={isOpenImage} <EditorButton
setIsOpen={setIsOpenImage} onClick={() => setIsPlainHTML(true)}
title="Insert Image" title="Switch to Plain Text"
showCloseButton={true} >
> <DocumentTextIcon />
<UploadProvider </EditorButton>
data={{ </div>
onCancel: () => setIsOpenImage(false), </div>
onSave: (file) => { </div>
addImage(file)
setIsOpenImage(false)
},
category: category,
maxFileSize: 300,
selectedFile: '',
}}
>
<Upload />
</UploadProvider>
</Dialog> */}
</>
) )
} }

5
app/components/ui/input-file.tsx
View File

@ -42,7 +42,8 @@ export const InputFile = <TFormValues extends Record<string, unknown>>(
labelClassName, labelClassName,
...restProperties ...restProperties
} = properties } = properties
const { setIsUploadOpen, uploadedFile, setUploadedFile } = useAdminContext() const { setIsUploadOpen, uploadedFile, setUploadedFile, isUploadOpen } =
useAdminContext()
const { const {
register, register,
@ -53,7 +54,7 @@ export const InputFile = <TFormValues extends Record<string, unknown>>(
const error: FieldError = get(errors, name) const error: FieldError = get(errors, name)
useEffect(() => { useEffect(() => {
if (uploadedFile) { if (uploadedFile && isUploadOpen === name) {
setValue(name as string, uploadedFile) setValue(name as string, uploadedFile)
setUploadedFile(undefined) setUploadedFile(undefined)
} }