koval-ui/dist/src/lib/InputDateTime/InputDateTime.cjs.map

React components collection with minimalistic design. Supports theming, layout, and input validation.

{"version":3,"file":"InputDateTime.cjs","sources":["../../../../src/lib/InputDateTime/InputDateTime.tsx"],"sourcesContent":["import type {ChangeEvent, FC} from 'react';\nimport {forwardRef, useCallback, Fragment, useEffect, useState} from 'react';\nimport classNames from 'classnames';\n\nimport type {DataAttributes, LibraryProps} from '@/internal/LibraryAPI';\nimport type {NativePropsTextual, CallbackPropsTextual, ValidationProps} from '@/internal/inputs';\nimport {\n    useRevalidateOnFormChange,\n    useExternalValidation,\n    ValidationState,\n    useValidation,\n} from '@/internal/inputs';\nimport {useInternalRef} from '@/internal/hooks/useInternalRef.ts';\nimport {InputDate, InputTime} from '@/lib';\n\nimport classes from './InputDateTime.module.css';\n\nexport type Props = DataAttributes &\n    LibraryProps &\n    Omit<NativePropsTextual, 'maxLength' | 'minLength' | 'autoComplete' | 'inputMode' | 'pattern'> &\n    Omit<CallbackPropsTextual, 'defaultValue'> &\n    ValidationProps & {\n        prefix?: FC;\n    };\n\nconst noOp = () => {};\n\nexport const InputDateTime = forwardRef<HTMLInputElement, Props>(\n    (\n        {\n            prefix: Prefix,\n            className,\n            placeholder = '',\n            disabled,\n            value,\n            onChange = () => {},\n            onFocus = () => {},\n            onBlur = () => {},\n            onKeyDown = () => {},\n            onKeyUp = () => {},\n            // TODO: enable controlled/non-controlled mode\n            // defaultValue,\n            validation,\n            errorMessage,\n            revalidateOnFormChange,\n            ...nativeProps\n        },\n        ref\n    ) => {\n        const inputRef = useInternalRef(ref);\n\n        const hasValidators = Boolean(validation);\n\n        const {validateTextual, validity, setValidity} = useValidation({validation, hasValidators});\n\n        useRevalidateOnFormChange(inputRef, validateTextual, revalidateOnFormChange);\n        useExternalValidation({errorMessage, inputRef, setValidity, validation});\n\n        const handleInvalid = useCallback(() => {\n            setValidity(ValidationState.error);\n        }, [setValidity]);\n\n        const [date, setDate] = useState('');\n        const [time, setTime] = useState('00:00');\n        const [combined, setCombined] = useState(value || 'T00:00');\n\n        useEffect(() => {\n            setCombined(value || 'T00:00');\n            if (value !== undefined && value !== 'T00:00') {\n                const [nextDate, nextTime] = (value as string).split('T');\n                setDate(nextDate);\n                setTime(nextTime);\n            } else {\n                setDate('');\n                setTime('00:00');\n            }\n        }, [value]);\n\n        const handleSetDate = useCallback((event: ChangeEvent<HTMLInputElement>) => {\n            setDate(event.target.value);\n        }, []);\n\n        const handleSetTime = useCallback((event: ChangeEvent<HTMLInputElement>) => {\n            setTime(event.target.value);\n        }, []);\n\n        useEffect(() => {\n            setCombined(`${date}T${time}`);\n        }, [date, time]);\n\n        useEffect(() => {\n            inputRef.current?.dispatchEvent(new Event('change', {bubbles: true}));\n        }, [combined, inputRef]);\n\n        useEffect(() => {\n            inputRef.current?.addEventListener('change', event => {\n                // TODO: improve type\n                validateTextual(event as unknown as ChangeEvent<HTMLInputElement>);\n                onChange(event as unknown as ChangeEvent<HTMLInputElement>);\n            });\n        }, [inputRef, onChange, validateTextual]);\n\n        return (\n            <Fragment>\n                <div className={classNames(classes.wrapper, className)}>\n                    <input\n                        {...nativeProps}\n                        type=\"text\"\n                        placeholder={placeholder}\n                        className={classes.inputMarionette}\n                        ref={inputRef}\n                        disabled={disabled}\n                        value={combined}\n                        onChange={noOp}\n                        onBlur={onBlur}\n                        onFocus={onFocus}\n                        onKeyUp={onKeyUp}\n                        onKeyDown={onKeyDown}\n                        onInvalid={handleInvalid}\n                    />\n                    <InputDate\n                        value={date}\n                        onChange={handleSetDate}\n                        validation={validity}\n                        displayIcon={false}\n                    />\n                    <InputTime value={time} onChange={handleSetTime} validation={validity} />\n                </div>\n            </Fragment>\n        );\n    }\n);\n\nInputDateTime.displayName = 'InputDateTime';\n"],"names":["noOp","InputDateTime","forwardRef","Prefix","className","placeholder","disabled","value","onChange","onFocus","onBlur","onKeyDown","onKeyUp","validation","errorMessage","revalidateOnFormChange","nativeProps","ref","inputRef","useInternalRef","hasValidators","validateTextual","validity","setValidity","useValidation","useRevalidateOnFormChange","useExternalValidation","handleInvalid","useCallback","ValidationState","date","setDate","useState","time","setTime","combined","setCombined","useEffect","nextDate","nextTime","handleSetDate","event","handleSetTime","jsx","Fragment","jsxs","classNames","classes","InputDate","InputTime"],"mappings":"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"}