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","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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"}