koval-ui/dist/src/lib/DataTable/dialogs/NumberRangeField.cjs.map

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

{"version":3,"file":"NumberRangeField.cjs","sources":["../../../../../src/lib/DataTable/dialogs/NumberRangeField.tsx"],"sourcesContent":["import type {FC, ChangeEvent} from 'react';\nimport {useEffect} from 'react';\nimport {useCallback, useState} from 'react';\n\nimport {FormField, InputNumeric} from '@/lib';\n\nimport classes from './Dialog.module.css';\nimport type {ColumnFormatOptions, FilterValue} from './../types.ts';\n\nexport type Props = {\n    value: FilterValue;\n    onChange: (value: FilterValue) => void;\n    cellProps?: ColumnFormatOptions;\n    step?: number;\n};\n\nconst normalizeValue = (value: FilterValue) => {\n    if (!Array.isArray(value)) {\n        return ['', ''];\n    } else {\n        return value.map(filter => String(filter));\n    }\n};\n\nconst valueToNumber = (value: string[]) => {\n    return value.map(filter => Number(filter));\n};\n\nexport const NumberRangeField: FC<Props> = ({value: valueProp, onChange}) => {\n    const [value, setValue] = useState(normalizeValue(valueProp));\n\n    const [from, to] = value;\n\n    const handleMinChange = useCallback(\n        (event: ChangeEvent<HTMLInputElement>) => {\n            const nextValue = [event.target.value, to];\n            setValue(nextValue);\n        },\n        [to]\n    );\n    const handleMaxChange = useCallback(\n        (event: ChangeEvent<HTMLInputElement>) => {\n            const nextValue = [from, event.target.value];\n            setValue(nextValue);\n        },\n        [from]\n    );\n\n    useEffect(() => {\n        onChange(valueToNumber(value));\n    }, [onChange, value]);\n    return (\n        <div className={classes.numberRange}>\n            <FormField className={classes.numberField} label=\"From:\">\n                <InputNumeric mode=\"floating\" value={from} onChange={handleMinChange} />\n            </FormField>\n            <FormField className={classes.numberField} label=\"To:\">\n                <InputNumeric mode=\"floating\" value={to} onChange={handleMaxChange} />\n            </FormField>\n        </div>\n    );\n};\n"],"names":["normalizeValue","value","filter","valueToNumber","NumberRangeField","valueProp","onChange","setValue","useState","from","to","handleMinChange","useCallback","event","nextValue","handleMaxChange","useEffect","jsxs","classes","jsx","FormField","InputNumeric"],"mappings":"gUAgBMA,EAAkBC,GACf,MAAM,QAAQA,CAAK,EAGbA,EAAM,IAAcC,GAAA,OAAOA,CAAM,CAAC,EAFlC,CAAC,GAAI,EAAE,EAMhBC,EAAiBF,GACZA,EAAM,IAAcC,GAAA,OAAOA,CAAM,CAAC,EAGhCE,EAA8B,CAAC,CAAC,MAAOC,EAAW,SAAAC,KAAc,CACzE,KAAM,CAACL,EAAOM,CAAQ,EAAIC,EAAAA,SAASR,EAAeK,CAAS,CAAC,EAEtD,CAACI,EAAMC,CAAE,EAAIT,EAEbU,EAAkBC,EAAA,YACnBC,GAAyC,CACtC,MAAMC,EAAY,CAACD,EAAM,OAAO,MAAOH,CAAE,EACzCH,EAASO,CAAS,CACtB,EACA,CAACJ,CAAE,CACP,EACMK,EAAkBH,EAAA,YACnBC,GAAyC,CACtC,MAAMC,EAAY,CAACL,EAAMI,EAAM,OAAO,KAAK,EAC3CN,EAASO,CAAS,CACtB,EACA,CAACL,CAAI,CACT,EAEAO,OAAAA,EAAAA,UAAU,IAAM,CACHV,EAAAH,EAAcF,CAAK,CAAC,CAAA,EAC9B,CAACK,EAAUL,CAAK,CAAC,EAEfgB,EAAAA,KAAA,MAAA,CAAI,UAAWC,EAAA,QAAQ,YACpB,SAAA,CAAAC,MAACC,EAAAA,UAAU,CAAA,UAAWF,EAAAA,QAAQ,YAAa,MAAM,QAC7C,SAAAC,EAAAA,IAACE,EAAAA,aAAa,CAAA,KAAK,WAAW,MAAOZ,EAAM,SAAUE,CAAiB,CAAA,EAC1E,EACCQ,EAAA,IAAAC,EAAA,UAAA,CAAU,UAAWF,EAAA,QAAQ,YAAa,MAAM,MAC7C,SAACC,EAAA,IAAAE,eAAA,CAAa,KAAK,WAAW,MAAOX,EAAI,SAAUK,EAAiB,CACxE,CAAA,CAAA,EACJ,CAER"}