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

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

{"version":3,"file":"InputColor.cjs","sources":["../../../../src/lib/InputColor/InputColor.tsx"],"sourcesContent":["import type {ChangeEvent, FocusEvent, InputHTMLAttributes} from 'react';\nimport {useMemo, useRef} from 'react';\nimport {forwardRef, useCallback} from 'react';\nimport classNames from 'classnames';\nimport {useLocalTheme} from 'css-vars-hook';\n\nimport {IconSwatches} from '@/internal/Icons';\nimport type {DataAttributes, LibraryProps} from '@/internal/LibraryAPI';\nimport type {\n    CallbackPropsTextual,\n    ValidationProps,\n    NativePropsInteractive,\n} from '@/internal/inputs';\nimport {useRevalidateOnFormChange} from '@/internal/inputs';\nimport {useExternalValidation, useValidation, useValidationIcon} from '@/internal/inputs';\nimport {useInternalId} from '@/internal/hooks/useInternalId.ts';\nimport {useInternalRef} from '@/internal/hooks/useInternalRef.ts';\n\nimport classes from './InputColor.module.css';\nimport {invertColor} from './invertColor.ts';\n\nexport type Props = DataAttributes &\n    LibraryProps &\n    NativePropsInteractive &\n    CallbackPropsTextual &\n    ValidationProps & {\n        /**\n         * Set text for placeholder.\n         * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#placeholder\n         */\n        placeholder?: InputHTMLAttributes<HTMLInputElement>['placeholder'];\n        /**\n         * Provide a list if predefined colors to show in a browser-provided interface. Colors have to be in HEX format #000000.\n         * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist#color_type\n         */\n        predefinedColors?: string[];\n    };\n\nexport const InputColor = forwardRef<HTMLInputElement, Props>(\n    (\n        {\n            className,\n            placeholder = '#??????',\n            disabled,\n            value,\n            onChange = () => {},\n            onFocus = () => {},\n            onBlur = () => {},\n            onKeyDown = () => {},\n            onKeyUp = () => {},\n            defaultValue,\n            id: idProp,\n            predefinedColors = [],\n            errorMessage,\n            revalidateOnFormChange,\n            validation,\n            displayIcon = true,\n            ...nativeProps\n        },\n        ref\n    ) => {\n        const hasValidators = Boolean(validation);\n\n        const {validity, setValidity, validateTextual} = useValidation({\n            validation,\n            hasValidators,\n        });\n        const id = useInternalId(idProp);\n\n        const inputRef = useInternalRef(ref);\n        useExternalValidation({errorMessage, inputRef, setValidity, validation});\n\n        useRevalidateOnFormChange(inputRef, validateTextual, revalidateOnFormChange);\n\n        const ValidationIcon = useValidationIcon(validity);\n\n        const {LocalRoot, setTheme} = useLocalTheme();\n        const displayValue = (value ?? defaultValue) as string;\n        const theme = useMemo(\n            () => ({\n                'selected-color': displayValue,\n                'inverted-color': invertColor(displayValue, true),\n            }),\n            [displayValue]\n        );\n\n        const handleFocus = useCallback(\n            (event: FocusEvent<HTMLInputElement>) => {\n                onFocus(event);\n                setTheme({\n                    'selected-color': event.target.value,\n                    'inverted-color': invertColor(event.target.value, true),\n                });\n            },\n            [onFocus, setTheme]\n        );\n\n        const labelRef = useRef<HTMLLabelElement>(null);\n\n        const handleBlur = useCallback(\n            (event: FocusEvent<HTMLInputElement>) => {\n                setTheme({\n                    'inverted-color': invertColor(event.target.value, true),\n                });\n\n                if (labelRef?.current) {\n                    labelRef.current.innerText = event.target.value;\n                }\n                onBlur(event);\n                onChange(event);\n            },\n            [setTheme, onBlur, onChange]\n        );\n\n        /* onChange callback makes color picker to lose focus. It triggered in onBlur instead. */\n        const handleChange = useCallback(\n            (event: ChangeEvent<HTMLInputElement>) => {\n                setTheme({\n                    'selected-color': event.target.value,\n                    'inverted-color': 'transparent',\n                });\n            },\n            [setTheme]\n        );\n\n        const hasPredefinedColors = predefinedColors.length > 0;\n        const predefinedColorsListId = `${id}_predefinedColors`;\n\n        return (\n            <LocalRoot theme={theme} className={classNames(classes.wrapper, className)}>\n                <div className={classes.toggle}>\n                    <input\n                        {...nativeProps}\n                        id={id}\n                        ref={inputRef}\n                        type=\"color\"\n                        disabled={disabled}\n                        defaultValue={displayValue}\n                        className={classes.input}\n                        onBlur={handleBlur}\n                        onKeyUp={onKeyUp}\n                        onKeyDown={onKeyDown}\n                        onFocus={handleFocus}\n                        onChange={handleChange}\n                        list={hasPredefinedColors ? predefinedColorsListId : undefined}\n                    />\n                    <IconSwatches className={classNames(classes.icon)} />\n                </div>\n                <label htmlFor={id} className={classes.label} ref={labelRef}>\n                    {displayValue.toLowerCase() || placeholder}\n                </label>\n                {displayIcon && validity && <ValidationIcon />}\n                {hasPredefinedColors && (\n                    <datalist id={predefinedColorsListId}>\n                        {predefinedColors.map(color => {\n                            return <option key={color} value={color} />;\n                        })}\n                    </datalist>\n                )}\n            </LocalRoot>\n        );\n    }\n);\n\nInputColor.displayName = 'InputColor';\n"],"names":["InputColor","forwardRef","className","placeholder","disabled","value","onChange","onFocus","onBlur","onKeyDown","onKeyUp","defaultValue","idProp","predefinedColors","errorMessage","revalidateOnFormChange","validation","displayIcon","nativeProps","ref","hasValidators","validity","setValidity","validateTextual","useValidation","id","useInternalId","inputRef","useInternalRef","useExternalValidation","useRevalidateOnFormChange","ValidationIcon","useValidationIcon","LocalRoot","setTheme","useLocalTheme","displayValue","theme","useMemo","invertColor","handleFocus","useCallback","event","labelRef","useRef","handleBlur","handleChange","hasPredefinedColors","predefinedColorsListId","jsxs","classNames","classes","jsx","IconSwatches","color"],"mappings":"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"}