All files / src/core/components/carbon controlled-number-input.component.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
 
 
 
 
 
 
 
 
 
 
 
 
 
1x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import React from 'react';
import { type Control, Controller, type FieldValues } from 'react-hook-form';
import { type NumberInputProps } from '@carbon/react/lib/components/NumberInput/NumberInput';
import { NumberInput } from '@carbon/react';
import { type StockItemPackagingUOMDTO } from '../../api/types/stockItem/StockItemPackagingUOM';
 
interface ControlledNumberInputProps<T> extends NumberInputProps {
  row?: StockItemPackagingUOMDTO;
  controllerName: string;
  name: string;
  control: Control<FieldValues, T>;
}
 
const ControlledNumberInput = <T,>(props: ControlledNumberInputProps<T>) => {
  const { controllerName, name, control, row, onChange: onChangeProp, id, ...numberInputProps } = props;
 
  return (
    <Controller
      name={controllerName}
      control={control}
      render={({ field: { onChange, value, ref } }) => (
        <NumberInput
          disableWheel
          {...numberInputProps}
          id={`${name}-${id}-${row?.uuid}`}
          value={row?.factor ?? value}
          ref={ref}
          onChange={(
            event: React.MouseEvent<HTMLButtonElement>,
            state: {
              value: number | string;
              direction: string;
            },
          ) => {
            onChange(state.value);
 
            if (onChangeProp) {
              onChangeProp(event, state);
            }
          }}
        />
      )}
    />
  );
};
 
export default ControlledNumberInput;