react-artasys-ui 0.1.9 → 0.1.12

package/lib/Form/Element/Element.d.ts

@@ -2,6 +2,7 @@ import { AllHTMLAttributes, ReactElement } from "react";
 export interface IElement<T = any> extends Omit<AllHTMLAttributes<T>, 'children'> {
     children?: ((props: AllHTMLAttributes<T>) => ReactElement) | AllHTMLAttributes<T>["children"];
     error?: string;
+    formValue?: string | number;
     disabled?: boolean;
     placeholder?: string;
     styleContainer?: React.HTMLAttributes<T>["style"];
@@ -10,5 +11,5 @@ export interface IElement<T = any> extends Omit<AllHTMLAttributes<T>, 'children'
     afterElement?: React.ReactElement;
     hiddenContainer?: boolean;
 }
-declare const Element: ({ children, beforeElement, afterElement, error, placeholder, styleContainer, classNameContainer, hiddenContainer, ...props }: IElement) => JSX.Element;
+declare const Element: ({ children, beforeElement, afterElement, error, placeholder, styleContainer, classNameContainer, hiddenContainer, formValue, ...props }: IElement) => JSX.Element;
 export default Element;

package/lib/Form/types.d.ts

@@ -1,4 +1,8 @@
-import type { FieldValues } from "react-hook-form";
+import type { FieldValues, UseFormRegisterReturn, FieldPath } from "react-hook-form";
+export type TUseFormRegisterReturn<TFieldValues extends FieldValues = FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = UseFormRegisterReturn<TFieldName> & {
+    error?: string;
+    formValue: TFieldValues;
+};
 export type TError<TFieldValues extends FieldValues> = {
     errors?: {
         [key in keyof TFieldValues]: string[];

package/lib/Input/Input.d.ts

@@ -1,7 +1,8 @@
-/// <reference types="react" />
+import { type HTMLInputTypeAttribute } from "react";
 import { IElement } from "../Form/Element";
 interface IInput extends IElement<HTMLInputElement> {
     onChangeText?: (text: string) => void;
+    type?: HTMLInputTypeAttribute;
 }
 declare const Input: import("react").ForwardRefExoticComponent<IInput & import("react").RefAttributes<HTMLInputElement>>;
 export default Input;

package/package.json

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

package/src/File/File.tsx

@@ -52,6 +52,7 @@ const File = ({onChange, children, multiple, accept, ...props}: TFile) => {
 	};
 
 	const handleDialog = (e: MouseEvent<HTMLDivElement>) => {
+		if (props.disabled) return;
 		selector.current!.click();
 		e.preventDefault();
 	};

package/src/Form/Element/Element.tsx

@@ -10,6 +10,7 @@ import styles from "./style.module.css";
 export interface IElement<T = any> extends Omit<AllHTMLAttributes<T>, 'children'> {
 	children?: ((props: AllHTMLAttributes<T>) => ReactElement) | AllHTMLAttributes<T>["children"];
 	error?: string;
+	formValue?: string | number;
 	disabled?: boolean;
 	placeholder?: string;
 	styleContainer?: React.HTMLAttributes<T>["style"];
@@ -19,7 +20,7 @@ export interface IElement<T = any> extends Omit<AllHTMLAttributes<T>, 'children'
 	hiddenContainer?: boolean;
 }
 
-const Element = ({children, beforeElement, afterElement, error, placeholder, styleContainer, classNameContainer, hiddenContainer, ...props}: IElement) => {
+const Element = ({children, beforeElement, afterElement, error, placeholder, styleContainer, classNameContainer, hiddenContainer, formValue, ...props}: IElement) => {
 	const [currentError, setCurrentError] = useState('');
 
 	useEffect(() => {

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

@@ -83,6 +83,20 @@
 	content: "*";
 }
 
+/* Date */
+.element > input[type="date"]::-webkit-calendar-picker-indicator {
+	cursor: pointer;
+	border-radius: 4px;
+	margin-right: 2px;
+	opacity: 0.7;
+	filter: invert(0.8);
+}
+
+.element > input[type="date"]::-webkit-calendar-picker-indicator:hover {
+	opacity: 1
+}
+
+.element > input[type="date"] ~ .placeholder,
 .element > input:focus ~ .placeholder,
 .element > textarea:focus ~ .placeholder,
 .element > input:not([value=""]) ~ .placeholder,

package/src/Form/types.ts

@@ -1,7 +1,14 @@
 import type {
 	FieldValues,
+	UseFormRegisterReturn,
+	FieldPath
 } from "react-hook-form";
 
+export type TUseFormRegisterReturn<TFieldValues extends FieldValues = FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = UseFormRegisterReturn<TFieldName> & {
+	error?: string;
+	formValue: TFieldValues;
+};
+
 export type TError<TFieldValues extends FieldValues> = {
 	errors?: {
 		[key in keyof TFieldValues]: string[];

package/src/Form/useForm.tsx

@@ -1,5 +1,5 @@
 import { useState, FunctionComponent } from "react";
-import type { TError } from "./types";
+import type { TError, TUseFormRegisterReturn } from "./types";
 import styles from "./style.module.css";
 
 import {
@@ -8,7 +8,8 @@ import {
 	RegisterOptions,
 	UseFormRegisterReturn,
 	FieldValues,
-	UseFormRegister,
+	SetValueConfig,
+	FieldPathValue,
 	FieldPath
 } from "react-hook-form";
 
@@ -24,7 +25,7 @@ const useForm = <TFieldValues extends FieldValues = FieldValues>(): TuseErrors<T
 		reValidateMode: 'onChange'
 	});
 
-	const register = <TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>(name: TFieldName, options?: RegisterOptions<TFieldValues, TFieldName>): UseFormRegisterReturn<TFieldName> => {
+	const register = <TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>(name: TFieldName, options?: RegisterOptions<TFieldValues, TFieldName>): TUseFormRegisterReturn<TFieldValues, TFieldName> => {
 		const inputRegister = form.register<TFieldName>(name, options);
 		const onChange = (e: {
 			target: any;
@@ -34,8 +35,15 @@ const useForm = <TFieldValues extends FieldValues = FieldValues>(): TuseErrors<T
 			form.clearErrors(name);
 			return inputRegister.onChange(e);
 		};
+		const formValue = form.watch(name);
 		const errors = form?.formState.errors;
-		return {...inputRegister, onChange, error: errors?.[name]?.message?.toString()} as UseFormRegisterReturn<TFieldName>;
+
+		return {
+			...inputRegister,
+			onChange,
+			formValue,
+			error: errors?.[name]?.message?.toString()
+		};
 	};
 
 	const setErrors = (e: TError<TFieldValues>) => {

package/src/Input/Input.tsx

@@ -2,7 +2,8 @@ import {
 	forwardRef,
 	useState,
 	ChangeEvent,
-	useEffect
+	useEffect,
+	type HTMLInputTypeAttribute
 } from "react";
 import Element,{
 	IElement
@@ -11,10 +12,11 @@ import Element,{
 
 interface IInput extends IElement<HTMLInputElement> {
 	onChangeText?: (text: string) => void;
+	type?: HTMLInputTypeAttribute;
 }
 
-const Input = forwardRef<HTMLInputElement, IInput>(({onChange, onInput, onChangeText, ...props}, ref) => {
-	const [currentValue, setCurrentValue] = useState<string | undefined>('');
+const Input = forwardRef<HTMLInputElement, IInput>(({onChange, onInput, onChangeText, formValue, ...props}, ref) => {
+	const [currentValue, setCurrentValue] = useState('');
 
 	const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
 		if (typeof onChange === 'function') {
@@ -35,9 +37,9 @@ const Input = forwardRef<HTMLInputElement, IInput>(({onChange, onInput, onChange
 	};
 
 	useEffect(() => {
-		if (typeof props.value === 'undefined') return;
-		setCurrentValue(String(props.value));
-	}, [props.value]);
+		const value = props.value ?? formValue;
+		setCurrentValue(value ? String(value) : '');
+	}, [props.value, formValue]);
 
 	return(<Element {...props}>
 		{ (props) => <input {...props} placeholder="" onChange={handleChange} value={currentValue} onInput={handleInput} ref={ref}/> }

package/src/Select/Select.tsx

@@ -32,7 +32,7 @@ export interface ISelect extends Omit<IElement, 'children'> {
 	onChangeSelect?: (value: string) => void;
 };
 
-const Select = forwardRef<HTMLInputElement, ISelect>(({children, onChangeSelect, value, ...props}, ref) => {
+const Select = forwardRef<HTMLInputElement, ISelect>(({children, onChangeSelect, value, formValue, ...props}, ref) => {
 	const containerRef = useRef<HTMLDivElement>(null);
 	const inputRef = useRef<HTMLInputElement>(null);
 	const emptyValue = useRef(false);
@@ -88,11 +88,10 @@ const Select = forwardRef<HTMLInputElement, ISelect>(({children, onChangeSelect,
 		if (!selected) return;
 		triggerNativeEvent(selected);
 	}, [selected]);
-
+	
 	useEffect(() => {
-		if (typeof value === 'undefined') return;
-		setSelected(String(value));
-	}, [value]);
+		setSelected(String(value ?? formValue));
+	}, [value, formValue]);
 
 	useEffect(() => {
 		const element = containerRef.current;

package/src/TextArea/TextArea.tsx

@@ -14,7 +14,7 @@ interface ITextArea extends IElement<HTMLTextAreaElement> {
 	onChangeText?: (text: string) => void;
 }
 
-const TextArea = forwardRef<HTMLTextAreaElement, ITextArea>(({onChange, onInput, onChangeText, ...props}, ref) => {
+const TextArea = forwardRef<HTMLTextAreaElement, ITextArea>(({onChange, onInput, onChangeText, formValue, ...props}, ref) => {
 	const textareaRef = useRef<HTMLTextAreaElement>(null);
 	const [currentValue, setCurrentValue] = useState(props.value);
 
@@ -44,8 +44,8 @@ const TextArea = forwardRef<HTMLTextAreaElement, ITextArea>(({onChange, onInput,
 	},[currentValue]);
 
 	useEffect(() => {
-		setCurrentValue(props.value);
-	}, [props.value]);
+		setCurrentValue(props.value ?? formValue);
+	}, [props.value, formValue]);
 
 	useImperativeHandle(ref, () => textareaRef.current as HTMLTextAreaElement);