diff --git a/package.json b/package.json index c63c68c6..acb24480 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "tksui-components", - "version": "0.7.14", + "version": "0.7.17", "private": false, "type": "module", "module": "lib/esm/index.js", diff --git a/src/components/index.ts b/src/components/index.ts index 8c20cf7d..8842dd5c 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -39,7 +39,6 @@ export * from './input/number-field'; export * from './input/radio'; export * from './input/radio-group'; export * from './input/switch'; -export * from './input/text-area'; export * from './input/text-array-field'; export * from './input/text-field'; export * from './input/date-picker'; diff --git a/src/components/input/text-area/TTextArea.interface.ts b/src/components/input/text-area/TTextArea.interface.ts deleted file mode 100644 index 4ddc6280..00000000 --- a/src/components/input/text-area/TTextArea.interface.ts +++ /dev/null @@ -1,35 +0,0 @@ -import {KeyboardEvent} from 'react'; -import {TValidatorProps} from '@/common/validator/TValidator.interface'; -import {TBaseProps} from '@/common/base/TBase.interface'; - -const textFieldType = ['outline', 'underline'] as const; -type textFieldType = typeof textFieldType[number]; - -export interface TTextAreaProps extends TValidatorProps, TBaseProps { - - type?: textFieldType, - - disabled?: boolean, - required?: boolean, - - placeholder?: string, - label?: string, - counter?: number, - - value: string, - width?: string, - rows?: number, - - - onChange(value: string): void, - onKeyDown?: (event: KeyboardEvent) => void, - onKeyDownEnter?: (event: KeyboardEvent) => void, - -} - - -export interface TTextAreaRef { - focus(): void, - validate(): true | string, - scrollToComponent(): void, -} diff --git a/src/components/input/text-area/TTextArea.tsx b/src/components/input/text-area/TTextArea.tsx deleted file mode 100644 index 35979e0c..00000000 --- a/src/components/input/text-area/TTextArea.tsx +++ /dev/null @@ -1,178 +0,0 @@ -import {CSSProperties, forwardRef, KeyboardEvent, Ref, useCallback, useImperativeHandle, useMemo, useRef, useState} from 'react'; -import useValidator from '@/common/hook/UseValidator'; -import {TTextAreaProps, TTextAreaRef} from './TTextArea.interface'; - -const TTextArea = forwardRef((props: TTextAreaProps, ref: Ref) => { - - // region [Hooks] - - const [hasFocus, setHasFocus] = useState(false); - - const validator = useValidator(props.value, props.rules, props.successMessage); - - const textareaRef = useRef(null); - - useImperativeHandle(ref, () => ({ - focus() { - textareaRef?.current?.focus(); - }, - validate() { - return validator.validate(); - }, - scrollToComponent(options: ScrollIntoViewOptions = {behavior: 'smooth', block: 'center'}) { - textareaRef?.current?.scrollIntoView(options); - }, - - })); - - // endregion - - - // region [Events] - - const onChange = useCallback((event): void => { - - if (props.counter) { - if (event.target.value.length > props.counter) { - props.onChange(event.target.value.substring(0, props.counter)); - return; - } - } - props.onChange(event.target.value); - }, [props]); - - const onFocus = useCallback((): void => { - validator.clearValidation(); - setHasFocus(true); - }, [validator]); - - const onBlur = useCallback((): void => { - if (!props.lazy) { validator.validate(); } - - setHasFocus(false); - }, [props.lazy, validator]); - - - const onKeyDown = useCallback((event: KeyboardEvent): void => { - if (event.key === 'Enter' && props.onKeyDownEnter) { - props.onKeyDownEnter(event); - } - - if (props.onKeyDown) { - props.onKeyDown(event); - } - }, [props]); - - - // endregion - - - // region [Templates] - - const rootClass = useMemo((): string => { - const clazz: string[] = []; - - if (props.className) { clazz.push(props.className); } - - if (props.disabled) { clazz.push('t-text-area--disabled'); } - if (!validator.result) { clazz.push('t-text-area--failure'); } - if (hasFocus) { clazz.push('t-text-area--focused'); } - if (validator.result && validator.message) { clazz.push('t-text-area--success'); } - - clazz.push(`t-text-area--${props.type}`); - - return clazz.join(' '); - }, [props.className, props.disabled, props.type, validator.result, validator.message, hasFocus]); - - const labelClass = useMemo((): string => { - const clazz: string[] = []; - - if (props.required) { clazz.push('t-text-area__label--required'); } - - return clazz.join(' '); - }, [props.required]); - - const rootStyle = useMemo((): CSSProperties => { - let style: CSSProperties = {}; - - if (props.style) { style = {...props.style}; } - if (props.width) { style = {...style, width: props.width}; } - - return style; - }, [props.style, props.width]); - - - const textAreaClass = useMemo((): string => { - const clazz: string[] = []; - - if (props.disabled) { clazz.push('t-text-area__container__input--disabled'); } - - return clazz.join(' '); - }, [props.disabled]); - - const inputPlaceholder = useMemo((): string => { - if (props.label && !hasFocus) { return ''; } - if (props.disabled) { return ''; } - - return props.placeholder; - - }, [props.label, hasFocus, props.disabled, props.placeholder]); - - // endregion - - - return ( -
- { - props.label && ( - - ) - } -
-