73 lines
2.6 KiB
TypeScript
73 lines
2.6 KiB
TypeScript
import { ActionIcon, Badge, Box, Flex, Text, useMantineTheme } from '@mantine/core';
|
|
import { useCounter, useDisclosure } from '@mantine/hooks';
|
|
import { IconMinus, IconPlus, IconX } from '@tabler/icons-react';
|
|
import InputModal from '../InputModal';
|
|
import { v4 as uuidv4 } from 'uuid'
|
|
import { useEffect } from 'react';
|
|
|
|
interface RowCounterProps {
|
|
counter?: number
|
|
setValue?(value: number): void,
|
|
showDelete?: boolean
|
|
onDelete?(): void
|
|
}
|
|
|
|
const RowCounter = ({ counter, setValue, showDelete, onDelete }: RowCounterProps) => {
|
|
const [opened, { open, close }] = useDisclosure(false)
|
|
// const [count, handlers] = useCounter(counter, { min: 0 })
|
|
const count = counter || 0
|
|
|
|
const handleSetValue = (value: number) => {
|
|
if (setValue) setValue(value)
|
|
// else handlers.set(value)
|
|
}
|
|
|
|
const handleOpen = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
|
|
e.stopPropagation()
|
|
open()
|
|
}
|
|
|
|
const handleInrease = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
|
|
e.stopPropagation()
|
|
handleSetValue(count + 1)
|
|
}
|
|
|
|
const handleDerease = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
|
|
e.stopPropagation()
|
|
handleSetValue(count - 1)
|
|
}
|
|
|
|
const handleDelete = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
|
|
e.stopPropagation()
|
|
if (onDelete) onDelete()
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<InputModal key={uuidv4()} inValue={counter ? counter : count} putValue={handleSetValue} opened={opened} open={open} close={close} />
|
|
<Flex direction="row">
|
|
<ActionIcon onClick={handleDerease} mt="0.1rem" color="red.3" size="md" radius="xl" variant="filled">
|
|
<IconMinus size="1.125rem" />
|
|
</ActionIcon>
|
|
<Box w="3rem">
|
|
<Badge size="xl" pl="0.2rem" pr="0.2rem" fullWidth onClick={handleOpen}>
|
|
{count}
|
|
</Badge>
|
|
</Box>
|
|
<ActionIcon onClick={handleInrease} mt="0.1rem" color="blue.6" size="md" radius="xl" variant="filled">
|
|
<IconPlus size="1.125rem" />
|
|
</ActionIcon>
|
|
{
|
|
showDelete ?
|
|
<ActionIcon onClick={handleDelete} ml='0.1rem' mt="0.1rem" color="red" size="md" radius="xl" variant="filled">
|
|
<IconX size="1.125rem" />
|
|
</ActionIcon>
|
|
:
|
|
<></>
|
|
}
|
|
</Flex>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default RowCounter; |