-
-
Notifications
You must be signed in to change notification settings - Fork 2.9k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'develop' into feat/normalize-db-errors
- Loading branch information
Showing
60 changed files
with
779 additions
and
300 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
135 changes: 135 additions & 0 deletions
135
packages/admin-next/dashboard/src/components/common/file-upload/file-upload.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,135 @@ | ||
| import { ArrowDownTray } from "@medusajs/icons" | ||
| import { Text, clx } from "@medusajs/ui" | ||
| import { ChangeEvent, DragEvent, useRef, useState } from "react" | ||
|
|
||
| export interface FileType { | ||
| id: string | ||
| url: string | ||
| file: File | ||
| } | ||
|
|
||
| export interface FileUploadProps { | ||
| label: string | ||
| hint?: string | ||
| hasError?: boolean | ||
| formats: string[] | ||
| onUploaded: (files: FileType[]) => void | ||
| } | ||
|
|
||
| export const FileUpload = ({ | ||
| label, | ||
| hint, | ||
| hasError, | ||
| formats, | ||
| onUploaded, | ||
| }: FileUploadProps) => { | ||
| const [isDragOver, setIsDragOver] = useState<boolean>(false) | ||
| const inputRef = useRef<HTMLInputElement>(null) | ||
| const dropZoneRef = useRef<HTMLButtonElement>(null) | ||
|
|
||
| const handleOpenFileSelector = () => { | ||
| inputRef.current?.click() | ||
| } | ||
|
|
||
| const handleDragEnter = (event: DragEvent) => { | ||
| event.preventDefault() | ||
| event.stopPropagation() | ||
|
|
||
| const files = event.dataTransfer?.files | ||
| if (!files) { | ||
| return | ||
| } | ||
|
|
||
| setIsDragOver(true) | ||
| } | ||
|
|
||
| const handleDragLeave = (event: DragEvent) => { | ||
| event.preventDefault() | ||
| event.stopPropagation() | ||
|
|
||
| if ( | ||
| !dropZoneRef.current || | ||
| dropZoneRef.current.contains(event.relatedTarget as Node) | ||
| ) { | ||
| return | ||
| } | ||
|
|
||
| setIsDragOver(false) | ||
| } | ||
|
|
||
| const handleUploaded = (files: FileList | null) => { | ||
| if (!files) { | ||
| return | ||
| } | ||
|
|
||
| const fileList = Array.from(files) | ||
| const fileObj = fileList.map((file) => { | ||
| const previewUrl = URL.createObjectURL(file) | ||
| return { | ||
| id: crypto.randomUUID(), | ||
| url: previewUrl, | ||
| file, | ||
| } | ||
| }) | ||
|
|
||
| onUploaded(fileObj) | ||
| } | ||
|
|
||
| const handleDrop = (event: DragEvent) => { | ||
| event.preventDefault() | ||
| event.stopPropagation() | ||
|
|
||
| setIsDragOver(false) | ||
|
|
||
| handleUploaded(event.dataTransfer?.files) | ||
| } | ||
|
|
||
| const handleFileChange = async (event: ChangeEvent<HTMLInputElement>) => { | ||
| handleUploaded(event.target.files) | ||
| } | ||
|
|
||
| return ( | ||
| <div> | ||
| <button | ||
| ref={dropZoneRef} | ||
| type="button" | ||
| onClick={handleOpenFileSelector} | ||
| onDrop={handleDrop} | ||
| onDragOver={(e) => e.preventDefault()} | ||
| onDragEnter={handleDragEnter} | ||
| onDragLeave={handleDragLeave} | ||
| className={clx( | ||
| "bg-ui-bg-component border-ui-border-strong transition-fg group flex w-full flex-col items-center gap-y-2 rounded-lg border border-dashed p-8", | ||
| "hover:border-ui-border-interactive focus:border-ui-border-interactive", | ||
| "focus:shadow-borders-focus outline-none focus:border-solid", | ||
| { | ||
| "!border-ui-border-error": hasError, | ||
| "!border-ui-border-interactive": isDragOver, | ||
| } | ||
| )} | ||
| > | ||
| <div className="text-ui-fg-subtle group-disabled:text-ui-fg-disabled flex items-center gap-x-2"> | ||
| <ArrowDownTray /> | ||
| <Text>{label}</Text> | ||
| </div> | ||
| {!!hint && ( | ||
| <Text | ||
| size="small" | ||
| leading="compact" | ||
| className="text-ui-fg-muted group-disabled:text-ui-fg-disabled" | ||
| > | ||
| {hint} | ||
| </Text> | ||
| )} | ||
| </button> | ||
| <input | ||
| hidden | ||
| ref={inputRef} | ||
| onChange={handleFileChange} | ||
| type="file" | ||
| accept={formats.join(",")} | ||
| multiple | ||
| /> | ||
| </div> | ||
| ) | ||
| } |
1 change: 1 addition & 0 deletions
1
packages/admin-next/dashboard/src/components/common/file-upload/index.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| export * from "./file-upload" |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.