Add yet-another-react-lightbox package and update .gitignore to exclude node_modules

This commit is contained in:
IGNY8 VPS (Salman)
2025-11-12 18:50:30 +00:00
parent bd2a5570a9
commit c92f4a5edd
9304 changed files with 29 additions and 2008667 deletions

View File

@@ -1,28 +0,0 @@
{
"root": true,
"parser": "@typescript-eslint/parser",
"env": {
"es6": true,
"browser": true
},
"plugins": [
"import",
"prettier",
"react",
"react-hooks",
"@typescript-eslint"
],
"extends": [
"eslint:recommended",
"plugin:@typescript-eslint/recommended",
"plugin:prettier/recommended"
],
"settings": {
"react": {
"version": "detect"
}
},
"rules": {
"@typescript-eslint/no-explicit-any": "off"
}
}

View File

@@ -1,100 +0,0 @@
import * as React from "react";
import { FileWithPath } from "file-selector";
export { FileWithPath };
export default function Dropzone(
props: DropzoneProps & React.RefAttributes<DropzoneRef>
): JSX.Element;
export function useDropzone(options?: DropzoneOptions): DropzoneState;
export interface DropzoneProps extends DropzoneOptions {
children?(state: DropzoneState): JSX.Element;
}
export enum ErrorCode {
FileInvalidType = "file-invalid-type",
FileTooLarge = "file-too-large",
FileTooSmall = "file-too-small",
TooManyFiles = "too-many-files",
}
export interface FileError {
message: string;
code: ErrorCode | string;
}
export interface FileRejection {
file: FileWithPath;
errors: readonly FileError[];
}
export type DropzoneOptions = Pick<React.HTMLProps<HTMLElement>, PropTypes> & {
accept?: Accept;
minSize?: number;
maxSize?: number;
maxFiles?: number;
preventDropOnDocument?: boolean;
noClick?: boolean;
noKeyboard?: boolean;
noDrag?: boolean;
noDragEventsBubbling?: boolean;
disabled?: boolean;
onDrop?: <T extends File>(
acceptedFiles: T[],
fileRejections: FileRejection[],
event: DropEvent
) => void;
onDropAccepted?: <T extends File>(files: T[], event: DropEvent) => void;
onDropRejected?: (fileRejections: FileRejection[], event: DropEvent) => void;
getFilesFromEvent?: (
event: DropEvent
) => Promise<Array<File | DataTransferItem>>;
onFileDialogCancel?: () => void;
onFileDialogOpen?: () => void;
onError?: (err: Error) => void;
validator?: <T extends File>(
file: T
) => FileError | readonly FileError[] | null;
useFsAccessApi?: boolean;
autoFocus?: boolean;
};
export type DropEvent =
| React.DragEvent<HTMLElement>
| React.ChangeEvent<HTMLInputElement>
| DragEvent
| Event;
export type DropzoneState = DropzoneRef & {
isFocused: boolean;
isDragActive: boolean;
isDragAccept: boolean;
isDragReject: boolean;
isFileDialogActive: boolean;
acceptedFiles: readonly FileWithPath[];
fileRejections: readonly FileRejection[];
rootRef: React.RefObject<HTMLElement>;
inputRef: React.RefObject<HTMLInputElement>;
getRootProps: <T extends DropzoneRootProps>(props?: T) => T;
getInputProps: <T extends DropzoneInputProps>(props?: T) => T;
};
export interface DropzoneRef {
open: () => void;
}
export interface DropzoneRootProps extends React.HTMLAttributes<HTMLElement> {
refKey?: string;
[key: string]: any;
}
export interface DropzoneInputProps
extends React.InputHTMLAttributes<HTMLInputElement> {
refKey?: string;
}
type PropTypes = "multiple" | "onDragEnter" | "onDragOver" | "onDragLeave";
export interface Accept {
[key: string]: readonly string[];
}

View File

@@ -1,54 +0,0 @@
import React from "react";
import Dropzone from "../../";
export default class Accept extends React.Component {
state = {
accepted: [],
rejected: [],
};
render() {
return (
<section>
<div className="dropzone">
<Dropzone
accept={{
"image/*": [".jpeg", ".png"],
}}
onDrop={(accepted, rejected) => {
this.setState({ accepted, rejected });
}}
>
{({ getRootProps }) => (
<div {...getRootProps()}>
<p>
Try dropping some files here, or click to select files to
upload.
</p>
<p>Only *.jpeg and *.png images will be accepted</p>
</div>
)}
</Dropzone>
</div>
<aside>
<h2>Accepted files</h2>
<ul>
{this.state.accepted.map((f) => (
<li key={f.name}>
{f.name} - {f.size} bytes
</li>
))}
</ul>
<h2>Rejected files</h2>
<ul>
{this.state.rejected.map((f) => (
<li key={f.name}>
{f.name} - {f.size} bytes
</li>
))}
</ul>
</aside>
</section>
);
}
}

View File

@@ -1,46 +0,0 @@
import React from "react";
import Dropzone from "../../";
export default class Test extends React.Component {
render() {
return (
<div>
<Dropzone
onDrop={(acceptedFiles, fileRejections, event) =>
console.log(acceptedFiles, fileRejections, event)
}
onDragEnter={(event) => console.log(event)}
onDragOver={(event) => console.log(event)}
onDragLeave={(event) => console.log(event)}
onDropAccepted={(files, event) => console.log(files, event)}
onDropRejected={(files, event) => console.log(files, event)}
onFileDialogCancel={() => console.log("onFileDialogCancel invoked")}
onFileDialogOpen={() => console.log("onFileDialogOpen invoked")}
onError={(e) => console.log(e)}
validator={(f) => ({ message: f.name, code: "" })}
minSize={2000}
maxSize={Infinity}
maxFiles={100}
preventDropOnDocument
noClick={false}
noKeyboard={false}
noDrag={false}
noDragEventsBubbling={false}
disabled
multiple={false}
accept={{
"image/*": [".png"],
}}
useFsAccessApi={false}
autoFocus
>
{({ getRootProps, getInputProps }) => (
<div {...getRootProps()}>
<input {...getInputProps()} />
</div>
)}
</Dropzone>
</div>
);
}
}

View File

@@ -1,53 +0,0 @@
import React from "react";
import Dropzone from "../../";
import { FileWithPath } from "file-selector";
export default class Basic extends React.Component {
state = { files: [] };
onDrop = (files: FileWithPath[]) => {
this.setState({
files,
});
};
render() {
return (
<section>
<div className="dropzone">
<Dropzone onDrop={this.onDrop}>
{({ getRootProps, getInputProps }) => (
<div {...getRootProps()}>
<input {...getInputProps()} />
<p>
Try dropping some files here, or click to select files to
upload.
</p>
</div>
)}
</Dropzone>
</div>
<aside>
<h2>Dropped files</h2>
<ul>
{this.state.files.map((f) => (
<li key={f.name}>
{f.name} - {f.size} bytes
</li>
))}
</ul>
</aside>
</section>
);
}
}
export const optional = (
<Dropzone>
{({ getRootProps, getInputProps }) => (
<div {...getRootProps()}>
<input {...getInputProps()} />
</div>
)}
</Dropzone>
);

View File

@@ -1,31 +0,0 @@
import React from "react";
import Dropzone from "../../";
export class Events extends React.Component {
render() {
return (
<section>
<div className="dropzone">
<Dropzone
onDrop={(acceptedFiles, fileRejections, event) =>
console.log(acceptedFiles, fileRejections, event)
}
onDragEnter={(event) => console.log(event)}
onDragOver={(event) => console.log(event)}
onDragLeave={(event) => console.log(event)}
>
{({ getRootProps, getInputProps }) => (
<div {...getRootProps()}>
<input {...getInputProps()} />
<p>
Try dropping some files here, or click to select files to
upload.
</p>
</div>
)}
</Dropzone>
</div>
</section>
);
}
}

View File

@@ -1,20 +0,0 @@
import React from "react";
import Dropzone from "../../";
export const dropzone = (
<Dropzone
onDrop={(files) => console.log(files)}
onFileDialogCancel={() => console.log("onFileDialogCancel invoked")}
onFileDialogOpen={() => console.log("onFileDialogOpen invoked")}
>
{({ getRootProps, getInputProps, open }) => (
<div {...getRootProps()}>
<input {...getInputProps()} />
<p>Drop some files here.</p>
<button type="button" onClick={open}>
Open file dialog
</button>
</div>
)}
</Dropzone>
);

View File

@@ -1,15 +0,0 @@
import React from "react";
import { useDropzone, DropzoneProps } from "../../";
export const Dropzone = ({ children, ...opts }: DropzoneProps) => {
const { ...state } = useDropzone(opts);
return children(state);
};
<Dropzone>
{({ getRootProps, getInputProps }) => (
<div {...getRootProps()}>
<input {...getInputProps()} />
</div>
)}
</Dropzone>;

View File

@@ -1,87 +0,0 @@
import React, { Component } from "react";
import Dropzone from "../../";
export class TestReactDragEvt extends Component {
getFiles = async (event: React.DragEvent<HTMLDivElement>) => {
const files = Array.from(event.dataTransfer.files);
return files;
};
render() {
return (
<div>
<Dropzone getFilesFromEvent={this.getFiles}>
{({ getRootProps }) => <div {...getRootProps()} />}
</Dropzone>
</div>
);
}
}
export class TestDataTransferItems extends Component {
getFiles = async (event: React.DragEvent<HTMLDivElement>) => {
const items = Array.from(event.dataTransfer.items);
return items;
};
render() {
return (
<div>
<Dropzone getFilesFromEvent={this.getFiles}>
{({ getRootProps }) => <div {...getRootProps()} />}
</Dropzone>
</div>
);
}
}
export class TestNativeDragEventEvt extends Component {
getFiles = async (event: DragEvent) => {
const files = Array.from(event.dataTransfer.files);
return files;
};
render() {
return (
<div>
<Dropzone getFilesFromEvent={this.getFiles}>
{({ getRootProps }) => <div {...getRootProps()} />}
</Dropzone>
</div>
);
}
}
export class TestChangeEvt extends Component {
getFiles = async (event: React.ChangeEvent<HTMLInputElement>) => {
const files = Array.from(event.target.files);
return files;
};
render() {
return (
<div>
<Dropzone getFilesFromEvent={this.getFiles}>
{({ getRootProps }) => <div {...getRootProps()} />}
</Dropzone>
</div>
);
}
}
export class TestNativeEvt extends Component {
getFiles = async (event: Event) => {
const files = Array.from((event.target as HTMLInputElement).files);
return files;
};
render() {
return (
<div>
<Dropzone getFilesFromEvent={this.getFiles}>
{({ getRootProps }) => <div {...getRootProps()} />}
</Dropzone>
</div>
);
}
}

View File

@@ -1,18 +0,0 @@
import React, { createRef } from "react";
import Dropzone, { DropzoneRef } from "../../";
const ref = createRef<DropzoneRef>();
export const dropzone = (
<Dropzone ref={ref}>
{({ getRootProps, getInputProps }) => (
<div {...getRootProps()}>
<input {...getInputProps()} />
<p>Drop some files here.</p>
<button type="button" onClick={ref.current.open}>
Open file dialog
</button>
</div>
)}
</Dropzone>
);

View File

@@ -1,22 +0,0 @@
{
"compilerOptions": {
"baseUrl": ".",
"allowSyntheticDefaultImports": true,
"declaration": true,
"noEmit": true,
"jsx": "react",
"moduleResolution": "node",
"module": "es2015",
"target": "esnext",
"typeRoots": [
"node_modules/@types"
],
"lib": [
"es2015",
"dom"
]
},
"include": [
"./*.tsx"
]
}