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

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

{"version":3,"file":"EditDialog.cjs","sources":["../../../../../src/lib/DataTable/dialogs/EditDialog.tsx"],"sourcesContent":["import type {ComponentProps, FC, ChangeEvent, JSX} from 'react';\nimport {useMemo, useState, useCallback, useEffect, memo} from 'react';\nimport classNames from 'classnames';\n\nimport {Dialog, useDialogState} from '@/lib/Dialog';\nimport {FormField} from '@/lib/FormField';\nimport {InputText} from '@/lib/InputText';\nimport {InputNumeric} from '@/lib/InputNumeric';\nimport {InputDate} from '@/lib/InputDate';\nimport {Select} from '@/lib/Select';\nimport {IconEdit, IconClose, IconColumns} from '@/internal/Icons';\nimport {useBrowserLocale} from '@/internal/locale';\n\nimport classes from './Dialog.module.css';\nimport type {TableValue} from './../types.ts';\nimport {ColumnTypes} from './../types.ts';\nimport {PercentageInput} from './PercentageInput.tsx';\n\nexport type ColumnsConfig = {\n    id: string;\n    name: string;\n    type: keyof typeof ColumnTypes;\n};\n\nexport type Props = {\n    id: string;\n    columnsConfig?: ColumnsConfig[];\n    onEdit: (columnId: string, value: TableValue) => void;\n    selectionAmount?: number;\n};\n\nconst withValueMapping = <TProps extends JSX.IntrinsicAttributes>(Component: FC<TProps>) => {\n    const Wrapped: FC<\n        Omit<ComponentProps<typeof Component>, 'onChange'> & {onChange?: (value: string) => void}\n    > = ({onChange = () => {}, ...restProps}) => {\n        const handleChange = useCallback(\n            (event: ChangeEvent<HTMLInputElement>) => {\n                onChange(event.target?.value);\n            },\n            [onChange]\n        );\n        return <Component {...(restProps as TProps)} mode=\"floating\" onChange={handleChange} />;\n    };\n\n    Wrapped.displayName = Component.displayName;\n\n    return Wrapped;\n};\n\nconst valueInputMapping = {\n    [ColumnTypes.text]: withValueMapping(InputText),\n    [ColumnTypes.currency]: withValueMapping(InputNumeric),\n    [ColumnTypes.decimal]: withValueMapping(InputNumeric),\n    [ColumnTypes.unit]: withValueMapping(InputNumeric),\n    [ColumnTypes.percentage]: PercentageInput,\n    [ColumnTypes.select]: withValueMapping(InputText),\n    [ColumnTypes.date]: withValueMapping(InputDate),\n};\n\nexport const EditDialog: FC<Props> = memo(({id, columnsConfig = [], selectionAmount, onEdit}) => {\n    const {dialogParams, closeDialog} = useDialogState(id);\n\n    const [selectedColumn, setSelectedColumn] = useState(columnsConfig[0].id);\n\n    useEffect(() => {\n        dialogParams?.columnId && setSelectedColumn(dialogParams?.columnId as string);\n    }, [dialogParams?.columnId]);\n\n    const handleColumnSelect = useCallback((event: ChangeEvent<HTMLSelectElement>) => {\n        setSelectedColumn(event.target.value);\n    }, []);\n\n    const [selectedType, setSelectedType] = useState<keyof typeof ColumnTypes>(ColumnTypes.text);\n\n    useEffect(() => {\n        const nextType =\n            columnsConfig.find(({id}) => id === selectedColumn)?.type ||\n            (ColumnTypes.text as keyof typeof ColumnTypes);\n        setSelectedType(nextType);\n    }, [columnsConfig, selectedColumn, setSelectedType]);\n\n    const Input = useMemo(() => valueInputMapping[selectedType], [selectedType]);\n\n    const [selectionValue, setSelectionValue] = useState('');\n\n    useEffect(() => {\n        setSelectionValue('');\n    }, [selectedColumn]);\n\n    const handleEdit = useCallback(() => {\n        onEdit(selectedColumn || columnsConfig[0].id, selectionValue);\n        closeDialog();\n    }, [closeDialog, columnsConfig, onEdit, selectedColumn, selectionValue]);\n\n    const handleReset = useCallback(() => {\n        closeDialog();\n    }, [closeDialog]);\n\n    const actions = useMemo<ComponentProps<typeof Dialog>['actions']>(\n        () => [\n            [\n                {title: 'Cancel', onClick: handleReset, icon: IconClose},\n                {\n                    title: 'Apply change',\n                    icon: IconEdit,\n                    onClick: handleEdit,\n                    type: 'link' as const,\n                },\n            ] as const,\n        ],\n        [handleEdit, handleReset]\n    );\n\n    const userLocale = useBrowserLocale();\n\n    const amountFormatted = new Intl.NumberFormat(userLocale, {\n        style: 'decimal',\n    }).format(selectionAmount || 0);\n\n    return (\n        <Dialog\n            animation=\"scale-in\"\n            showCloseButton={false}\n            dialogTitle={`Edit ${amountFormatted} row(s)`}\n            id={id}\n            className={classes.dialog}\n            actions={actions}>\n            <div className={classes.fieldset}>\n                <FormField className={classes.field} label=\"Column:\">\n                    <Select\n                        prefix={IconColumns}\n                        value={selectedColumn}\n                        onChange={handleColumnSelect}>\n                        {columnsConfig.map(({id, name}) => (\n                            <option key={id} value={id}>\n                                {name}\n                            </option>\n                        ))}\n                    </Select>\n                </FormField>\n                <FormField\n                    className={classNames(classes.field, classes.valueField)}\n                    label=\"New value:\">\n                    <Input value={selectionValue} onChange={setSelectionValue} />\n                </FormField>\n            </div>\n        </Dialog>\n    );\n});\n\nEditDialog.displayName = 'EditDialog';\n"],"names":["withValueMapping","Component","Wrapped","onChange","restProps","handleChange","useCallback","event","_a","valueInputMapping","ColumnTypes","InputText","InputNumeric","PercentageInput","InputDate","EditDialog","memo","id","columnsConfig","selectionAmount","onEdit","dialogParams","closeDialog","useDialogState","selectedColumn","setSelectedColumn","useState","useEffect","handleColumnSelect","selectedType","setSelectedType","nextType","Input","useMemo","selectionValue","setSelectionValue","handleEdit","handleReset","actions","IconClose","IconEdit","userLocale","useBrowserLocale","amountFormatted","jsx","Dialog","classes","jsxs","FormField","Select","IconColumns","name","classNames"],"mappings":"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"}