|
1 | 1 | import React from 'react';
|
2 | 2 | import { NumberInput } from '@carbon/react';
|
3 |
| -import { CssClasses } from '../types'; |
| 3 | +import { CssClasses, SendSignal } from '../types'; |
4 | 4 | import { stringToCssClassName } from '../utils';
|
5 | 5 | import { commonSlots, slotsDisabled } from '../common-slots';
|
6 | 6 |
|
@@ -34,16 +34,31 @@ export interface NumberInputState {
|
34 | 34 |
|
35 | 35 | export const type = 'number-input';
|
36 | 36 |
|
| 37 | +export const signals = ['change']; |
| 38 | + |
37 | 39 | export const slots = {
|
38 | 40 | ...commonSlots,
|
39 |
| - ...slotsDisabled |
| 41 | + ...slotsDisabled, |
| 42 | + value: 'number', |
| 43 | + min: 'number', |
| 44 | + max: 'number', |
| 45 | + step: 'number', |
| 46 | + label: 'string', |
| 47 | + warnText: 'string', |
| 48 | + warn: 'boolean', |
| 49 | + hideLavel: 'boolean', |
| 50 | + hideSteppers: 'boolean', |
| 51 | + readOnly: 'boolean', |
| 52 | + invalid: 'boolean', |
| 53 | + invalidText: 'string', |
| 54 | + allowEmpty: 'boolean' |
40 | 55 | };
|
41 | 56 |
|
42 |
| -export const UINumberInput = ({ state, setState }: { |
| 57 | +export const UINumberInput = ({ state, sendSignal }: { |
43 | 58 | state: NumberInputState;
|
44 | 59 | setState: (state: any) => void;
|
45 | 60 | setGlobalState: (state: any) => void;
|
46 |
| - sendSignal: (id: number | string, signal: string) => void; |
| 61 | + sendSignal: SendSignal; |
47 | 62 | }) => {
|
48 | 63 | if (state.type !== 'number-input') {
|
49 | 64 | // eslint-disable-next-line react/jsx-no-useless-fragment
|
@@ -79,6 +94,6 @@ export const UINumberInput = ({ state, setState }: {
|
79 | 94 | invalidText={state.invalidText}
|
80 | 95 | light={state.light}
|
81 | 96 | allowEmpty={state.allowEmpty}
|
82 |
| - onChange={(_: any, { value }: any) => setState({ ...state, value })} |
| 97 | + onChange={(_: any, { value }: any) => sendSignal(state.id, 'change', [value], { ...state, value })} |
83 | 98 | className={cssClasses} />;
|
84 | 99 | };
|
0 commit comments