react-artasys-ui 0.0.2 → 0.0.3

package/lib/UploadImages/Image.d.ts

@@ -1,7 +1,16 @@
-import { TFileData } from "../File";
-import { TUploadImageData } from "./UploadImages";
+import type { TFileData } from "../File";
 export type TImageData = TFileData & {
+    id?: string | number;
     setWait: (status: boolean) => void;
+    setId: (id: string | number) => void;
 };
-declare const Image: ({ onChange, onClick, ...props }: TUploadImageData) => JSX.Element;
+export interface IImage extends TFileData {
+    onChange?: (data: TImageData) => void;
+    onId?: (id: string | number) => void;
+    onRemove?: () => void;
+    onClick?: (data: TImageData) => void;
+    id?: string | number;
+    src?: string;
+}
+declare const Image: ({ onChange, onClick, onId, onRemove, ...props }: IImage) => JSX.Element;
 export default Image;

package/lib/UploadImages/UploadImages.d.ts

@@ -1,9 +1,9 @@
-import { TFileData } from "../File";
-import { TImageData } from "./Image";
+import { TImageData, IImage } from "./Image";
 export interface IUploadImages {
     onChange?: (data: TImageData) => void;
+    onChangeArray?: (data: IImage[]) => void;
     onClick?: (data: TImageData) => void;
+    imagesArray?: TImageData[];
 }
-export type TUploadImageData = TFileData & IUploadImages & {};
-declare const UploadImages: ({ onChange, onClick }: IUploadImages) => JSX.Element;
+declare const UploadImages: ({ imagesArray, onChange, onChangeArray, onClick }: IUploadImages) => JSX.Element;
 export default UploadImages;

package/lib/UploadImages/index.d.ts

@@ -1,4 +1,5 @@
-import UploadImages, { TUploadImageData, IUploadImages } from "./UploadImages";
+import UploadImages, { IUploadImages } from "./UploadImages";
+import type { IImage } from "./Image";
 import { TImageData } from "./Image";
-export type { TUploadImageData, IUploadImages, TImageData };
+export type { IUploadImages, TImageData, IImage };
 export default UploadImages;

package/lib/index.d.ts

@@ -5,8 +5,8 @@ import TextArea from "./TextArea";
 import Spinner from "./Spinner";
 import File, { TFileData, TFileMime } from "./File";
 import Button from "./Button";
-import UploadImages, { TUploadImageData, IUploadImages, TImageData } from "./UploadImages";
+import UploadImages, { IUploadImages, TImageData, IImage } from "./UploadImages";
 declare const UI: {};
 export { Form, FormElement, Element, useForm, Input, TextArea, Spinner, File, Button, UploadImages };
-export type { TFileData, TFileMime, TUploadImageData, IUploadImages, TImageData, IElement };
+export type { TFileData, TFileMime, IUploadImages, IImage, TImageData, IElement };
 export default UI;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-artasys-ui",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "",
   "main": "dist/index.js",
   "types": "lib/index.d.ts",

package/src/Button/Button.tsx

@@ -11,7 +11,7 @@ const Button = ({children, wait = false, ...props}: IButton) => {
 	return(<div className={styles['container']}>
 		<button {...props}>{children}</button>
 		<div className={styles['wait-indicator'] + (wait ? ' ' + styles['active'] : '')}>
-			<Spinner size="middle"/>
+			<Spinner size="small" color="contrast"/>
 		</div>
 	</div>)
 };

package/src/UploadImages/Image.tsx

@@ -1,37 +1,82 @@
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import Spinner from "../Spinner";
-import { TFileData } from "../File";
+import type { TFileData } from "../File";
 import styles from "./style.module.css";
 
-import { TUploadImageData } from "./UploadImages";
-
 export type TImageData = TFileData & {
+	id?: string | number;
 	setWait: (status: boolean) => void;
+	setId: (id: string | number) => void;
+};
+
+export interface IImage extends TFileData {
+	onChange?: (data: TImageData) => void;
+	onId?: (id: string | number) => void;
+	onRemove?: () => void;
+	onClick?: (data: TImageData) => void;
+	id?: string | number;
+	src?: string;
 };
 
-const Image = ({onChange, onClick, ...props}: TUploadImageData) => {
-	const { base64 } = props;
+const Image = ({onChange, onClick, onId, onRemove, ...props}: IImage) => {
+	const { base64, src } = props;
 	const [wait, setWait] = useState(true);
+	const confirmRemove = useRef(false);
+	const currentId = useRef<string | number | undefined>();
+	const setId = (id: string | number) => {
+		currentId.current = id;
+		if (typeof onId !== 'function') return;
+		onId(id);
+	};
 
 	const handleClick = () => {
 		if (typeof onClick === 'function') {
 			onClick({
 				...props,
-				setWait
+				setWait,
+				setId,
+				id: currentId.current
 			});
 		}
 	};
 
+	const handleLoad = () => {
+		setWait(false);
+	};
+
+	const handleRemove = (e: React.MouseEvent<HTMLSpanElement>) => {
+		if (!e.target) return;
+		const element = (e.target as HTMLSpanElement);
+		
+		const remove = () => {
+			if (!confirmRemove.current) return;
+			confirmRemove.current = false;
+			element.blur();
+			if (typeof onRemove === 'function') {
+				onRemove();
+			}
+		};
+		remove();
+		confirmRemove.current = true;
+	};
+
+	const handleCancelRemove = () => {
+		confirmRemove.current = false;
+	};
+
 	useEffect(() => {
-		if (typeof onChange !== 'function') return;
+		if (typeof onChange !== 'function' || src) return;
 		onChange({
 			...props,
-			setWait
+			setWait,
+			setId,
+			id: currentId.current
 		});
 	}, []);
 
 	return(<span className={styles['image']} onClick={handleClick}>
-		<img src={base64 as string}/>
+		<span className={styles['close']} onClick={handleRemove} onBlur={handleCancelRemove} tabIndex={1}/>
+		<img src={src ?? base64?.toString()} onLoad={handleLoad}/>
 		{wait && <span className={styles['wait']}>
 			<Spinner size="small" color="contrast"/>
 		</span>}

package/src/UploadImages/UploadImages.tsx

@@ -1,29 +1,55 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import File,{
 	TFileData
 } from "../File";
 import styles from "./style.module.css";
 
 import Image,{
-	TImageData
+	TImageData,
+	IImage
 } from "./Image";
 
 export interface IUploadImages {
 	onChange?: (data: TImageData) => void;
+	onChangeArray?: (data: IImage[]) => void;
 	onClick?: (data: TImageData) => void;
+	imagesArray?: TImageData[];
 };
 
-export type TUploadImageData = TFileData & IUploadImages & {};
-
-const UploadImages = ({onChange, onClick}: IUploadImages) => {
-	const [images, setImages] = useState<TUploadImageData[]>([]);
+const UploadImages = ({imagesArray, onChange, onChangeArray, onClick}: IUploadImages) => {
+	const [images, setImages] = useState<IImage[]>([]);
 
 	const handleChange = (image: TFileData) => {
-		setImages((images) => [...images, {...image, onChange, onClick}]);
+		setImages((images) => [...images, {...image}]);
+	};
+
+	const handleChangeId = (image: IImage) => {
+		return (id: string | number) => {
+			setImages((images) => images.map((currentImage) => {
+				if (image === currentImage) {
+					currentImage.id = id;
+				}
+				return currentImage;
+			}));
+		}
 	};
+
+	const handleRemove = (image: IImage) => {
+		return () => setImages((images) => images.filter((currentImage) => currentImage !== image));
+	};
+
+	useEffect(() => {
+		if (typeof onChangeArray !== 'function') return;
+		onChangeArray(images);
+	}, [images]);
+
+	useEffect(() => {
+		if (!imagesArray) return;
+		setImages(imagesArray);
+	}, [imagesArray]);
 	
 	return(<div className={styles['container']}>
-		{images.map((image, index) => <Image key={(image.name + index)} {...image} />)}
+		{images.map((image, index) => <Image key={(image.name + index)} {...image} onChange={onChange} onClick={onClick} onRemove={handleRemove(image)} onId={handleChangeId(image)}/>)}
 		<File onChange={handleChange} accept={['image/png']} className={styles['new']} multiple/>
 	</div>);
 };

package/src/UploadImages/index.tsx

@@ -1,13 +1,13 @@
 import UploadImages,{
-	TUploadImageData,
 	IUploadImages
 } from "./UploadImages";
+import type { IImage } from "./Image";
 import {
 	TImageData
 } from "./Image";
 export type {
-	TUploadImageData,
 	IUploadImages,
-	TImageData
+	TImageData,
+	IImage
 };
 export default UploadImages;

package/src/UploadImages/style.module.css

@@ -38,6 +38,49 @@
 	object-fit: cover;
 }
 
+/* Close */
+.image .close {
+	display: flex;
+	position: absolute;
+	top: 0;
+	right: 0;
+	justify-content: center;
+	align-items: center;
+	width: 20px;
+	height: 20px;
+	cursor: pointer;
+	opacity: 0.7;
+	transition: transform 0.3s, opacity 0.3s;
+}
+
+.image .close::before, .image .close::after {
+	content: "";
+    display: block;
+    position: absolute;
+    width: 100%;
+    height: 3px;
+    background-color: #1D1D1B;
+}
+
+.image .close::before {
+	transform: rotate(45deg);
+}
+
+.image .close::after {
+	transform: rotate(-45deg);
+}
+
+.image .close:focus {
+	background-color: red;
+	width: 100%;
+	height: 100%;
+	transition: width 0.1s, height 0.3s;
+}
+
+.image .close:focus::before, .image .close:focus::after {
+	background-color: #FFFFFF;
+}
+
 .new {
 	display: flex;
 	justify-content: center;

package/src/index.ts

@@ -14,9 +14,9 @@ import File,{
 } from "./File";
 import Button from "./Button";
 import UploadImages,{
-	TUploadImageData,
 	IUploadImages,
-	TImageData
+	TImageData,
+	IImage
 } from "./UploadImages";
 
 const UI = {
@@ -38,8 +38,8 @@ export {
 export type {
 	TFileData,
 	TFileMime,
-	TUploadImageData,
 	IUploadImages,
+	IImage,
 	TImageData,
 	IElement
 };

package/webpack.config.js

@@ -2,7 +2,7 @@ const path = require('path');
 
 module.exports = {
   entry: {
-	index: '/src/index.ts',
+	index: '/src/index.ts'
   },
   target: 'web',
   mode: 'production', //production | development
@@ -46,7 +46,6 @@ module.exports = {
     path: path.resolve(__dirname, 'dist'),
 	library: 'UI',
 	libraryTarget: 'umd',
-	chunkFilename: '[name].chunk.js',
 	auxiliaryComment: 'Arta System UI'
   },
   externals: {