react-artasys-ui 0.1.1 → 0.1.3

package/package.json

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

package/src/Form/Element/Element.tsx

@@ -2,7 +2,8 @@ import {
 	useState,
 	useEffect,
 	AllHTMLAttributes,
-	ReactElement
+	ReactElement,
+	cloneElement
 } from "react";
 import styles from "./style.module.css";
 
@@ -25,7 +26,7 @@ const Element = ({children, beforeElement, afterElement, error, placeholder, dis
 		setCurrentError(error ?? '');
 	},[error]);
 
-	const classes = ['ui-form-element'];
+	const classes = ['ui-form-element-container'];
 
 	classes.push(styles['container']);
 	if (currentError) classes.push(styles['error']);
@@ -38,14 +39,14 @@ const Element = ({children, beforeElement, afterElement, error, placeholder, dis
 			className={classes.join(' ')}
 			style={styleContainer}
 		>
-			{beforeElement}
-			<div className={styles['element']}>
+			{beforeElement ? cloneElement(beforeElement, {key: 'ui-before-element'}) : null}
+			<div className={'ui-form-element ' + styles['element']}>
 				{typeof children === 'function' ? children(props) : null}
-				{placeholder && <span className={styles['placeholder']}>{placeholder}</span>}
+				{placeholder && <span className={'ui-form-element-placeholder ' + styles['placeholder']}>{placeholder}</span>}
 			</div>
-			{afterElement}
+			{afterElement ? cloneElement(afterElement, {key: 'ui-after-element'}) : null}
 		</label>
-		{currentError && <div className={styles['error']}>{currentError}</div>}
+		{currentError && <div className={'ui-form-error ' + styles['error']}>{currentError}</div>}
 	</>);
 }
 

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

@@ -26,6 +26,7 @@
 	max-height: 500px;
 	max-height: 50dvh;
 	margin: 0;
+	padding: 10px;
     font-size: 20px;
 	border: 0;
 	box-sizing: border-box;

package/src/Input/Input.tsx

@@ -14,7 +14,7 @@ interface IInput extends IElement<HTMLInputElement> {
 }
 
 const Input = forwardRef<HTMLInputElement, IInput>(({onChange, onInput, onChangeText, ...props}, ref) => {
-	const [currentValue, setCurrentValue] = useState(props.value);
+	const [currentValue, setCurrentValue] = useState<string | undefined>('');
 
 	const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
 		if (typeof onChange === 'function') {
@@ -34,7 +34,8 @@ const Input = forwardRef<HTMLInputElement, IInput>(({onChange, onInput, onChange
 	};
 
 	useEffect(() => {
-		setCurrentValue(props.value);
+		if (typeof props.value === 'undefined') return;
+		setCurrentValue(String(props.value));
 	}, [props.value]);
 
 	return(<Element {...props}>