react-artasys-ui 0.0.2 → 0.0.4

package/lib/Button/Button.d.ts

@@ -1,6 +1,8 @@
 import React from "react";
 interface IButton extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     wait?: boolean;
+    classNameContainer?: string;
+    styleContainer?: React.HTMLAttributes<HTMLDivElement>['style'];
 }
-declare const Button: ({ children, wait, ...props }: IButton) => JSX.Element;
+declare const Button: ({ children, className, classNameContainer, styleContainer, wait, ...props }: IButton) => JSX.Element;
 export default Button;

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.4",
   "description": "",
   "main": "dist/index.js",
   "types": "lib/index.d.ts",

package/src/Button/Button.tsx

@@ -3,15 +3,17 @@ import styles from "./style.module.css";
 import Spinner from "../Spinner";
 
 interface IButton extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-	wait?: boolean
+	wait?: boolean;
+	classNameContainer?: string;
+	styleContainer?: React.HTMLAttributes<HTMLDivElement>['style'];
 }
 
-const Button = ({children, wait = false, ...props}: IButton) => {
+const Button = ({children, className, classNameContainer, styleContainer, wait = false, ...props}: IButton) => {
 
-	return(<div className={styles['container']}>
-		<button {...props}>{children}</button>
+	return(<div className={styles['container'] + (classNameContainer ? ' ' + classNameContainer : '')} style={styleContainer}>
+		<button {...props} className={className}>{children}</button>
 		<div className={styles['wait-indicator'] + (wait ? ' ' + styles['active'] : '')}>
-			<Spinner size="middle"/>
+			<Spinner size="small" color="contrast"/>
 		</div>
 	</div>)
 };

package/src/Form/Element/Element.tsx

@@ -31,9 +31,11 @@ const Element = ({children, beforeElement, afterElement, error, placeholder, dis
 			style={styleContainer}
 		>
 			{beforeElement}
-			{typeof children === 'function' ? children(props) : null}
+			<div className={styles['element']}>
+				{typeof children === 'function' ? children(props) : null}
+				{placeholder && <span className={styles['placeholder']}>{placeholder}</span>}
+			</div>
 			{afterElement}
-			{placeholder && <span className={styles['placeholder']}>{placeholder}</span>}
 		</label>
 		{currentError && <div className={styles['error']}>{currentError}</div>}
 	</>);

package/src/Form/Element/style.module.css

@@ -4,21 +4,27 @@
 	display: flex;
     align-items: center;
 	width: 100%;
-	min-height: 50px;
+	min-height: 45px;
 	position: relative;
     border: 1px solid #CCCCCC;
     border-radius: 3px;
 	z-index: 0;
 }
 
-.container > input, .container > textarea {
+.element {
+	align-self: stretch;
+	width: 100%;
+	min-height: 100%;
+}
+
+.element > input, .element > textarea {
 	width: 100% !important;
+	height: 100% !important;
 	min-height: 100% !important;
 	max-height: 500px !important;
 	max-height: 50dvh !important;
-	padding: 10px 5px !important;
 	margin: 0 !important;
-    font-size: 1.3em !important;
+    font-size: 1.3em;
 	border: 0 !important;
 	box-sizing: border-box !important;
 	background-color: transparent !important;
@@ -30,24 +36,25 @@
 	background-color: #EFEFEF;
 }
 
-.container > input:-webkit-autofill,
-.container > input:-webkit-autofill:hover, 
-.container > input:-webkit-autofill:focus, 
-.container > input:-webkit-autofill:active{
+.element > input:-webkit-autofill,
+.element > input:-webkit-autofill:hover, 
+.element > input:-webkit-autofill:focus, 
+.element > input:-webkit-autofill:active{
 	-webkit-background-clip: text;
 }
 
-.container > input:focus {
+.element > input:focus {
 	outline: none;
 }
 
-.container > .placeholder {
+.element > .placeholder {
 	position: absolute;
 	display: flex;
 	justify-content: center;
 	align-items: center;
 	top: 0;
-	left: 5px;
+	margin-left: 5px;
+	height: 100%;
 	color: #7A7A73;
 	font-size: 1.2em;
 	z-index: -1;
@@ -55,7 +62,11 @@
 	transition: transform 0.3s;
 }
 
-.container > .placeholder::before {
+.element > textarea ~ .placeholder {
+	max-height: 2em;
+}
+
+.element > .placeholder::before {
 	content: "";
 	position: absolute;
 	display: block;
@@ -65,16 +76,16 @@
 	z-index: -1;
 }
 
-.container > input:required ~ .placeholder::after {
+.element > input:required ~ .placeholder::after {
 	content: "*";
 }
 
-.container > input:focus ~ .placeholder,
-.container > textarea:focus ~ .placeholder,
-.container > input:not([value=""]) ~ .placeholder,
-.container > textarea:not(:empty) ~ .placeholder,
-.container > input:not(:empty) ~ .placeholder {
-	transform: translate(-10%, -55%) scale(0.8);
+.element > input:focus ~ .placeholder,
+.element > textarea:focus ~ .placeholder,
+.element > input:not([value=""]) ~ .placeholder,
+.element > textarea:not(:empty) ~ .placeholder,
+.element > input:not(:empty) ~ .placeholder {
+	transform: translate(-10%, -50%) scale(0.8);
 	z-index: 0;
 }
 
@@ -82,7 +93,7 @@
 	border-color: #FF6D6D;
 }
 
-.container.error > .placeholder {
+.container.error .placeholder {
 	color: #FF6D6D;
 }
 

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: {