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

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

{"version":3,"file":"DateRangeField.cjs","sources":["../../../../../src/lib/DataTable/dialogs/DateRangeField.tsx"],"sourcesContent":["import type {FC, ChangeEvent} from 'react';\nimport {useEffect} from 'react';\nimport {useCallback, useState} from 'react';\n\nimport {FormField, InputDate} from '@/lib';\n\nimport classes from './Dialog.module.css';\nimport type {ColumnFormatOptions, FilterValue, DateRangeFilterValue} from './../types.ts';\n\nexport type Props = {\n    value: FilterValue;\n    onChange: (value: FilterValue) => void;\n    cellProps?: ColumnFormatOptions;\n};\n\nexport const DateRangeField: FC<Props> = ({value: valueProp, onChange}) => {\n    const [value, setValue] = useState(valueProp as DateRangeFilterValue);\n\n    useEffect(() => {\n        setValue(valueProp as DateRangeFilterValue);\n    }, [valueProp]);\n\n    const [from, to] = value as DateRangeFilterValue;\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(value);\n    }, [onChange, value]);\n    return (\n        <div className={classes.numberRange}>\n            <FormField className={classes.numberField} label=\"From:\">\n                <InputDate value={from ?? ''} onChange={handleMinChange} />\n            </FormField>\n            <FormField className={classes.numberField} label=\"To:\">\n                <InputDate value={to || ''} onChange={handleMaxChange} />\n            </FormField>\n        </div>\n    );\n};\n"],"names":["DateRangeField","valueProp","onChange","value","setValue","useState","useEffect","from","to","handleMinChange","useCallback","event","nextValue","handleMaxChange","jsxs","classes","jsx","FormField","InputDate"],"mappings":"0TAeaA,EAA4B,CAAC,CAAC,MAAOC,EAAW,SAAAC,KAAc,CACvE,KAAM,CAACC,EAAOC,CAAQ,EAAIC,EAAAA,SAASJ,CAAiC,EAEpEK,EAAAA,UAAU,IAAM,CACZF,EAASH,CAAiC,CAAA,EAC3C,CAACA,CAAS,CAAC,EAER,KAAA,CAACM,EAAMC,CAAE,EAAIL,EACbM,EAAkBC,EAAA,YACnBC,GAAyC,CACtC,MAAMC,EAAY,CAACD,EAAM,OAAO,MAAOH,CAAE,EACzCJ,EAASQ,CAAS,CACtB,EACA,CAACJ,CAAE,CACP,EACMK,EAAkBH,EAAA,YACnBC,GAAyC,CACtC,MAAMC,EAAY,CAACL,EAAMI,EAAM,OAAO,KAAK,EAC3CP,EAASQ,CAAS,CACtB,EACA,CAACL,CAAI,CACT,EAEAD,OAAAA,EAAAA,UAAU,IAAM,CACZJ,EAASC,CAAK,CAAA,EACf,CAACD,EAAUC,CAAK,CAAC,EAEfW,EAAAA,KAAA,MAAA,CAAI,UAAWC,EAAA,QAAQ,YACpB,SAAA,CAAAC,EAAA,IAACC,EAAU,UAAA,CAAA,UAAWF,EAAQ,QAAA,YAAa,MAAM,QAC7C,SAACC,EAAA,IAAAE,EAAA,UAAA,CAAU,MAAOX,GAAQ,GAAI,SAAUE,CAAiB,CAAA,EAC7D,EACCO,EAAA,IAAAC,EAAA,UAAA,CAAU,UAAWF,EAAA,QAAQ,YAAa,MAAM,MAC7C,SAACC,EAAAA,IAAAE,EAAAA,UAAA,CAAU,MAAOV,GAAM,GAAI,SAAUK,EAAiB,CAC3D,CAAA,CAAA,EACJ,CAER"}