generated from fahricansecer/boilerplate-fe
46 lines
1.4 KiB
TypeScript
46 lines
1.4 KiB
TypeScript
import { HStack, IconButton, NumberInput } from '@chakra-ui/react';
|
|
import * as React from 'react';
|
|
import { LuMinus, LuPlus } from 'react-icons/lu';
|
|
|
|
export interface StepperInputProps extends NumberInput.RootProps {
|
|
label?: React.ReactNode;
|
|
}
|
|
|
|
export const StepperInput = React.forwardRef<HTMLDivElement, StepperInputProps>(function StepperInput(props, ref) {
|
|
const { label, ...rest } = props;
|
|
return (
|
|
<NumberInput.Root {...rest} unstyled ref={ref}>
|
|
{label && <NumberInput.Label>{label}</NumberInput.Label>}
|
|
<HStack gap='2'>
|
|
<DecrementTrigger />
|
|
<NumberInput.ValueText textAlign='center' fontSize='lg' minW='3ch' />
|
|
<IncrementTrigger />
|
|
</HStack>
|
|
</NumberInput.Root>
|
|
);
|
|
});
|
|
|
|
const DecrementTrigger = React.forwardRef<HTMLButtonElement, NumberInput.DecrementTriggerProps>(
|
|
function DecrementTrigger(props, ref) {
|
|
return (
|
|
<NumberInput.DecrementTrigger {...props} asChild ref={ref}>
|
|
<IconButton variant='outline' size='sm'>
|
|
<LuMinus />
|
|
</IconButton>
|
|
</NumberInput.DecrementTrigger>
|
|
);
|
|
},
|
|
);
|
|
|
|
const IncrementTrigger = React.forwardRef<HTMLButtonElement, NumberInput.IncrementTriggerProps>(
|
|
function IncrementTrigger(props, ref) {
|
|
return (
|
|
<NumberInput.IncrementTrigger {...props} asChild ref={ref}>
|
|
<IconButton variant='outline' size='sm'>
|
|
<LuPlus />
|
|
</IconButton>
|
|
</NumberInput.IncrementTrigger>
|
|
);
|
|
},
|
|
);
|