@adcops/autocore-react 3.0.19 → 3.0.20
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,5 +1,52 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
/** @file
|
|
2
|
+
* `ValueInput` is a React component for number input that encapsulates various features
|
|
3
|
+
* such as custom numeric formatting, optional currency formatting, increment and decrement
|
|
4
|
+
* buttons, and validation. This component uses the PrimeReact `InputNumber` control
|
|
5
|
+
* to provide a rich input experience, including handling both decimal and currency modes,
|
|
6
|
+
* with configurable precision and optional prefix/suffix text.
|
|
7
|
+
*
|
|
8
|
+
* Properties:
|
|
9
|
+
* - `label`: Label text displayed on the input field.
|
|
10
|
+
* - `value`: Current numeric value of the input field.
|
|
11
|
+
* - `min`: Minimum allowable value.
|
|
12
|
+
* - `max`: Maximum allowable value.
|
|
13
|
+
* - `minPrecision`: Minimum number of decimal places to display.
|
|
14
|
+
* - `maxPrecision`: Maximum number of decimal places allowed.
|
|
15
|
+
* - `mode`: Determines whether the input is treated as a plain decimal or currency. Defaults to "decimal".
|
|
16
|
+
* - `currency`: ISO 4217 currency code for formatting the value as currency.
|
|
17
|
+
* - `prefix`: String to display before the value.
|
|
18
|
+
* - `suffix`: String to display after the value.
|
|
19
|
+
* - `showButtons`: Whether to display increment and decrement buttons.
|
|
20
|
+
* - `step`: The amount by which the value should be incremented or decremented.
|
|
21
|
+
* - `locale`: Locale code for formatting the value.
|
|
22
|
+
* - `description`: Additional descriptive text to display below the input.
|
|
23
|
+
* - `disabled`: Whether the input is disabled.
|
|
24
|
+
* - `dispatchTopic`: Event topic to dispatch on value change.
|
|
25
|
+
* - `placeholder`: Placeholder text when the input is empty.
|
|
26
|
+
* - `onValueChanged`: Callback function that is called when the user accepts a new value.
|
|
27
|
+
*
|
|
28
|
+
* Example Usage:
|
|
29
|
+
* ```tsx
|
|
30
|
+
* <ValueInput
|
|
31
|
+
* label="Quantity"
|
|
32
|
+
* value={10}
|
|
33
|
+
* min={1}
|
|
34
|
+
* max={100}
|
|
35
|
+
* minPrecision={0}
|
|
36
|
+
* maxPrecision={2}
|
|
37
|
+
* mode="decimal"
|
|
38
|
+
* showButtons={true}
|
|
39
|
+
* step={1}
|
|
40
|
+
* locale="en-US"
|
|
41
|
+
* onValueChanged={(newValue) => console.log("New Value:", newValue)}
|
|
42
|
+
* />
|
|
43
|
+
* ```
|
|
44
|
+
*
|
|
45
|
+
* This example creates a `ValueInput` component for entering quantities, with values ranging from 1 to 100,
|
|
46
|
+
* allowing up to 2 decimal places. Increment and decrement buttons are visible, and the new value is logged
|
|
47
|
+
* to the console when accepted.
|
|
48
|
+
*/
|
|
49
|
+
import React from 'react';
|
|
3
50
|
/**
|
|
4
51
|
* Properties of the ValueInput component.
|
|
5
52
|
*/
|
|
@@ -15,11 +62,11 @@ interface ValueInputProps {
|
|
|
15
62
|
/**
|
|
16
63
|
* Minimum value for the field.
|
|
17
64
|
*/
|
|
18
|
-
min
|
|
65
|
+
min?: number | undefined;
|
|
19
66
|
/**
|
|
20
67
|
* Minimum value for the field.
|
|
21
68
|
*/
|
|
22
|
-
max
|
|
69
|
+
max?: number | undefined;
|
|
23
70
|
/**
|
|
24
71
|
* Minimum number of decimal points. The user will not
|
|
25
72
|
* be required to type the decimal values, but this minimum
|
|
@@ -28,21 +75,21 @@ interface ValueInputProps {
|
|
|
28
75
|
* the component will throw an error.
|
|
29
76
|
* @default 0
|
|
30
77
|
*/
|
|
31
|
-
minPrecision
|
|
78
|
+
minPrecision?: number | undefined;
|
|
32
79
|
/**
|
|
33
80
|
* Maximum number of decimal points.
|
|
34
81
|
* Set to 0 for integer-only. Must be greater or equal to than minPrecision, or
|
|
35
82
|
* the component will throw an error.
|
|
36
83
|
* @default 3
|
|
37
84
|
*/
|
|
38
|
-
maxPrecision
|
|
85
|
+
maxPrecision?: number | undefined;
|
|
39
86
|
/**
|
|
40
87
|
* Defines the behavior of the component.
|
|
41
88
|
* If set to "currency", then you need to specify the
|
|
42
89
|
* currency type using the currency property.
|
|
43
90
|
* @default "decimal"
|
|
44
91
|
*/
|
|
45
|
-
mode
|
|
92
|
+
mode?: "currency" | "decimal" | undefined;
|
|
46
93
|
/**
|
|
47
94
|
* The currency to use in currency formatting. Possible values are the
|
|
48
95
|
* [ISO 4217 currency codes](https://www.six-group.com/en/products-services/financial-information/data-standards.html#scrollTo=maintenance-agency),
|
|
@@ -51,117 +98,59 @@ interface ValueInputProps {
|
|
|
51
98
|
*
|
|
52
99
|
* @default "USD"
|
|
53
100
|
*/
|
|
54
|
-
currency
|
|
101
|
+
currency?: string;
|
|
55
102
|
/**
|
|
56
103
|
* An optional prefix before the value of the field.
|
|
57
104
|
* Unlike the TextInput control, this prefix is internal to the field.
|
|
58
105
|
*/
|
|
59
|
-
prefix
|
|
106
|
+
prefix?: string | undefined;
|
|
60
107
|
/**
|
|
61
108
|
* An optional suffix after the value of the field.
|
|
62
109
|
* Unlike the TextInput control, this prefix is internal to the field.
|
|
63
110
|
*/
|
|
64
|
-
suffix
|
|
111
|
+
suffix?: string | undefined;
|
|
65
112
|
/**
|
|
66
113
|
* Set true to display buttons to increment/decrement the value.
|
|
67
114
|
* Use the step property to adjust the amount that the value will change.
|
|
68
115
|
*
|
|
69
116
|
* @default false
|
|
70
117
|
*/
|
|
71
|
-
showButtons
|
|
118
|
+
showButtons?: boolean;
|
|
72
119
|
/**
|
|
73
120
|
* The amount clicking an increment/decrement buttion will change the value.
|
|
74
121
|
*/
|
|
75
|
-
step
|
|
122
|
+
step?: number | undefined;
|
|
76
123
|
/**
|
|
77
124
|
* Locale to be used in formatting. Changes how the numbers/separators are displayed
|
|
78
125
|
* for international users. The typical locale codes are used.
|
|
79
126
|
*
|
|
80
127
|
* @default "en-US"
|
|
81
128
|
*/
|
|
82
|
-
locale
|
|
129
|
+
locale?: string | undefined;
|
|
83
130
|
/**
|
|
84
131
|
* A small, advisory text below the field.
|
|
85
132
|
*/
|
|
86
|
-
description
|
|
133
|
+
description?: React.ReactNode | undefined;
|
|
87
134
|
/**
|
|
88
135
|
* If true, all functions of the field will be disabled.
|
|
89
136
|
*/
|
|
90
|
-
disabled
|
|
137
|
+
disabled?: boolean | undefined;
|
|
91
138
|
/** Topic on which the value will be dispatched through the user interfave on successful data entry. */
|
|
92
|
-
dispatchTopic
|
|
139
|
+
dispatchTopic?: string | undefined;
|
|
93
140
|
/**
|
|
94
141
|
* Placeholder string to display if the value is empty.
|
|
95
142
|
*/
|
|
96
|
-
placeholder
|
|
143
|
+
placeholder?: string | undefined;
|
|
97
144
|
/**
|
|
98
145
|
* The user has accepted a new value.
|
|
99
146
|
* @param newValue New value accepted by the user.
|
|
100
147
|
*/
|
|
101
148
|
onValueChanged?(newValue: number): void;
|
|
102
149
|
}
|
|
103
|
-
/**
|
|
104
|
-
* State variables of the ValueInput component.
|
|
105
|
-
*/
|
|
106
|
-
interface ValueInputState {
|
|
107
|
-
entryValue: number | null;
|
|
108
|
-
currentValue: number | null;
|
|
109
|
-
editing: boolean;
|
|
110
|
-
}
|
|
111
150
|
/**
|
|
112
151
|
* A convenient field with all the usual features of inputing numbers.
|
|
113
152
|
* Wraps the common features of use of a InputNumber, p-inputgroup, some icon buttons,
|
|
114
153
|
* accepting and rejecting values and keyboard management.
|
|
115
154
|
*/
|
|
116
|
-
export declare
|
|
117
|
-
|
|
118
|
-
context: React.ContextType<typeof EventEmitterContext>;
|
|
119
|
-
/**
|
|
120
|
-
* Default properties for the component.
|
|
121
|
-
*/
|
|
122
|
-
static defaultProps: {
|
|
123
|
-
label: string;
|
|
124
|
-
value: undefined;
|
|
125
|
-
keyFilter: undefined;
|
|
126
|
-
writeTopic: undefined;
|
|
127
|
-
onValueChanged: undefined;
|
|
128
|
-
description: undefined;
|
|
129
|
-
prefix: undefined;
|
|
130
|
-
suffix: undefined;
|
|
131
|
-
disabled: boolean;
|
|
132
|
-
dispatchTopic: undefined;
|
|
133
|
-
placeholder: undefined;
|
|
134
|
-
validator: undefined;
|
|
135
|
-
min: undefined;
|
|
136
|
-
max: undefined;
|
|
137
|
-
minPrecision: number;
|
|
138
|
-
maxPrecision: number;
|
|
139
|
-
mode: string;
|
|
140
|
-
showButtons: boolean;
|
|
141
|
-
step: number;
|
|
142
|
-
locale: string;
|
|
143
|
-
currency: string;
|
|
144
|
-
};
|
|
145
|
-
inputRef: React.RefObject<HTMLInputElement>;
|
|
146
|
-
/**
|
|
147
|
-
*
|
|
148
|
-
* @param {FooterViewProps} props
|
|
149
|
-
*/
|
|
150
|
-
constructor(props: ValueInputProps);
|
|
151
|
-
/**
|
|
152
|
-
* The component has been loaded into the DOM.
|
|
153
|
-
*/
|
|
154
|
-
componentDidMount(): void;
|
|
155
|
-
componentDidUpdate(prevProps: ValueInputProps): void;
|
|
156
|
-
private onBufferValue;
|
|
157
|
-
/**
|
|
158
|
-
* The user has elected to accept the input value. Validate and store, if valid.
|
|
159
|
-
*/
|
|
160
|
-
private onAcceptValue;
|
|
161
|
-
/**
|
|
162
|
-
* The user wishes to reset/cancel the previous value.
|
|
163
|
-
*/
|
|
164
|
-
private onResetValue;
|
|
165
|
-
render(): import("react/jsx-runtime").JSX.Element;
|
|
166
|
-
}
|
|
167
|
-
export {};
|
|
155
|
+
export declare const ValueInput: React.FC<ValueInputProps>;
|
|
156
|
+
export default ValueInput;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import
|
|
1
|
+
import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import{useState,useRef,useEffect,useContext}from"react";import{InputNumber}from"primereact/inputnumber";import{EventEmitterContext}from"../core/EventEmitterContext";import{Button}from"primereact/button";export const ValueInput=({label:e="",value:t=null,min:s,max:i,minPrecision:n=0,maxPrecision:o=3,mode:a="decimal",currency:u="USD",prefix:l,suffix:r,showButtons:c=!1,step:p=1,locale:m="en-US",description:d,disabled:x=!1,dispatchTopic:f,placeholder:v,onValueChanged:b})=>{const[h,j]=useState(t),[C,E]=useState(t),[_,S]=useState(t),[g,y]=useState(!1),[N,k]=useState(!1),B=useRef(null),D=useContext(EventEmitterContext);useEffect((()=>{null!==_?(E(_),S(null),k(!1)):t!==C&&(E(t),j(t),y(!1),k(!1))}),[t,C]);const F=()=>{var e;g&&null!==h&&(e=h,void 0!==i&&e>i||void 0!==s&&e<s?k(!0):(E(h),y(!1),b?.(h),k(!1),f&&D.dispatch({topic:f,payload:h})))},I=()=>{g&&(j(null),E(null),y(!1),k(!1))};return _jsxs("div",{children:[_jsxs("div",{className:"p-inputgroup flex-1",children:[_jsx("span",{className:"p-inputgroup-addon",children:e}),_jsx(InputNumber,{ref:B,invalid:N,min:s,max:i,minFractionDigits:n,maxFractionDigits:o,mode:a,prefix:l,suffix:r,showButtons:c,step:p,placeholder:v,value:C,onChange:e=>{return t=e.value,g||(S(C),y(!0)),void j(t);var t},locale:m,currency:u,onKeyDown:e=>{"Enter"===e.key?F():"Escape"===e.key&&I()},disabled:x}),_jsx(Button,{icon:"pi pi-check",disabled:x||!g,className:"p-button-success",onClick:()=>F(),visible:g,size:"small",autoFocus:!1}),_jsx(Button,{icon:"pi pi-times",disabled:x||!g,className:"p-button-danger",onClickCapture:()=>I(),visible:g,size:"small",autoFocus:!1})]}),d&&_jsx("small",{children:d})]})};export default ValueInput;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@adcops/autocore-react",
|
|
3
|
-
"version": "3.0.
|
|
3
|
+
"version": "3.0.20",
|
|
4
4
|
"description": "A React component library for industrial user interfaces.",
|
|
5
5
|
"private": false,
|
|
6
6
|
"type": "module",
|
|
@@ -50,7 +50,7 @@
|
|
|
50
50
|
"@types/react-transition-group": "^4.4.1",
|
|
51
51
|
"clsx": "^2.1.0",
|
|
52
52
|
"numerable": "^0.3.15",
|
|
53
|
-
"primereact": "^10.3
|
|
53
|
+
"primereact": "^10.6.3",
|
|
54
54
|
"react-blockly": "^8.1.1",
|
|
55
55
|
"react-simple-keyboard": "^3.7.65",
|
|
56
56
|
"react-transition-group": "^4.4.1",
|
|
@@ -2,18 +2,65 @@
|
|
|
2
2
|
* Copyright (C) 2024 Automated Design Corp.. All Rights Reserved.
|
|
3
3
|
* Created Date: 2024-03-20 13:05:42
|
|
4
4
|
* -----
|
|
5
|
-
* Last Modified: 2024-04-
|
|
5
|
+
* Last Modified: 2024-04-30 08:33:37
|
|
6
6
|
* -----
|
|
7
7
|
*
|
|
8
8
|
*/
|
|
9
9
|
|
|
10
|
+
/** @file
|
|
11
|
+
* `ValueInput` is a React component for number input that encapsulates various features
|
|
12
|
+
* such as custom numeric formatting, optional currency formatting, increment and decrement
|
|
13
|
+
* buttons, and validation. This component uses the PrimeReact `InputNumber` control
|
|
14
|
+
* to provide a rich input experience, including handling both decimal and currency modes,
|
|
15
|
+
* with configurable precision and optional prefix/suffix text.
|
|
16
|
+
*
|
|
17
|
+
* Properties:
|
|
18
|
+
* - `label`: Label text displayed on the input field.
|
|
19
|
+
* - `value`: Current numeric value of the input field.
|
|
20
|
+
* - `min`: Minimum allowable value.
|
|
21
|
+
* - `max`: Maximum allowable value.
|
|
22
|
+
* - `minPrecision`: Minimum number of decimal places to display.
|
|
23
|
+
* - `maxPrecision`: Maximum number of decimal places allowed.
|
|
24
|
+
* - `mode`: Determines whether the input is treated as a plain decimal or currency. Defaults to "decimal".
|
|
25
|
+
* - `currency`: ISO 4217 currency code for formatting the value as currency.
|
|
26
|
+
* - `prefix`: String to display before the value.
|
|
27
|
+
* - `suffix`: String to display after the value.
|
|
28
|
+
* - `showButtons`: Whether to display increment and decrement buttons.
|
|
29
|
+
* - `step`: The amount by which the value should be incremented or decremented.
|
|
30
|
+
* - `locale`: Locale code for formatting the value.
|
|
31
|
+
* - `description`: Additional descriptive text to display below the input.
|
|
32
|
+
* - `disabled`: Whether the input is disabled.
|
|
33
|
+
* - `dispatchTopic`: Event topic to dispatch on value change.
|
|
34
|
+
* - `placeholder`: Placeholder text when the input is empty.
|
|
35
|
+
* - `onValueChanged`: Callback function that is called when the user accepts a new value.
|
|
36
|
+
*
|
|
37
|
+
* Example Usage:
|
|
38
|
+
* ```tsx
|
|
39
|
+
* <ValueInput
|
|
40
|
+
* label="Quantity"
|
|
41
|
+
* value={10}
|
|
42
|
+
* min={1}
|
|
43
|
+
* max={100}
|
|
44
|
+
* minPrecision={0}
|
|
45
|
+
* maxPrecision={2}
|
|
46
|
+
* mode="decimal"
|
|
47
|
+
* showButtons={true}
|
|
48
|
+
* step={1}
|
|
49
|
+
* locale="en-US"
|
|
50
|
+
* onValueChanged={(newValue) => console.log("New Value:", newValue)}
|
|
51
|
+
* />
|
|
52
|
+
* ```
|
|
53
|
+
*
|
|
54
|
+
* This example creates a `ValueInput` component for entering quantities, with values ranging from 1 to 100,
|
|
55
|
+
* allowing up to 2 decimal places. Increment and decrement buttons are visible, and the new value is logged
|
|
56
|
+
* to the console when accepted.
|
|
57
|
+
*/
|
|
10
58
|
|
|
11
|
-
import React, { createRef } from "react";
|
|
12
59
|
|
|
60
|
+
import React, { useState, useRef, useEffect, useContext } from 'react';
|
|
13
61
|
import { InputNumber } from 'primereact/inputnumber';
|
|
14
|
-
import { Button } from "primereact/button";
|
|
15
|
-
|
|
16
62
|
import { EventEmitterContext } from "../core/EventEmitterContext";
|
|
63
|
+
import { Button } from 'primereact/button';
|
|
17
64
|
|
|
18
65
|
/**
|
|
19
66
|
* Properties of the ValueInput component.
|
|
@@ -34,12 +81,12 @@ interface ValueInputProps {
|
|
|
34
81
|
/**
|
|
35
82
|
* Minimum value for the field.
|
|
36
83
|
*/
|
|
37
|
-
min
|
|
84
|
+
min?: number | undefined;
|
|
38
85
|
|
|
39
86
|
/**
|
|
40
87
|
* Minimum value for the field.
|
|
41
88
|
*/
|
|
42
|
-
max
|
|
89
|
+
max?: number | undefined;
|
|
43
90
|
|
|
44
91
|
/**
|
|
45
92
|
* Minimum number of decimal points. The user will not
|
|
@@ -49,7 +96,7 @@ interface ValueInputProps {
|
|
|
49
96
|
* the component will throw an error.
|
|
50
97
|
* @default 0
|
|
51
98
|
*/
|
|
52
|
-
minPrecision
|
|
99
|
+
minPrecision?: number | undefined;
|
|
53
100
|
|
|
54
101
|
|
|
55
102
|
/**
|
|
@@ -58,7 +105,7 @@ interface ValueInputProps {
|
|
|
58
105
|
* the component will throw an error.
|
|
59
106
|
* @default 3
|
|
60
107
|
*/
|
|
61
|
-
maxPrecision
|
|
108
|
+
maxPrecision?: number | undefined;
|
|
62
109
|
|
|
63
110
|
|
|
64
111
|
/**
|
|
@@ -67,7 +114,7 @@ interface ValueInputProps {
|
|
|
67
114
|
* currency type using the currency property.
|
|
68
115
|
* @default "decimal"
|
|
69
116
|
*/
|
|
70
|
-
mode
|
|
117
|
+
mode?: "currency" | "decimal" | undefined;
|
|
71
118
|
|
|
72
119
|
|
|
73
120
|
/**
|
|
@@ -78,19 +125,19 @@ interface ValueInputProps {
|
|
|
78
125
|
*
|
|
79
126
|
* @default "USD"
|
|
80
127
|
*/
|
|
81
|
-
currency
|
|
128
|
+
currency?: string;
|
|
82
129
|
|
|
83
130
|
/**
|
|
84
131
|
* An optional prefix before the value of the field.
|
|
85
132
|
* Unlike the TextInput control, this prefix is internal to the field.
|
|
86
133
|
*/
|
|
87
|
-
prefix
|
|
134
|
+
prefix?: string | undefined;
|
|
88
135
|
|
|
89
136
|
/**
|
|
90
137
|
* An optional suffix after the value of the field.
|
|
91
138
|
* Unlike the TextInput control, this prefix is internal to the field.
|
|
92
139
|
*/
|
|
93
|
-
suffix
|
|
140
|
+
suffix?: string | undefined;
|
|
94
141
|
|
|
95
142
|
/**
|
|
96
143
|
* Set true to display buttons to increment/decrement the value.
|
|
@@ -98,12 +145,12 @@ interface ValueInputProps {
|
|
|
98
145
|
*
|
|
99
146
|
* @default false
|
|
100
147
|
*/
|
|
101
|
-
showButtons
|
|
148
|
+
showButtons?: boolean;
|
|
102
149
|
|
|
103
150
|
/**
|
|
104
151
|
* The amount clicking an increment/decrement buttion will change the value.
|
|
105
152
|
*/
|
|
106
|
-
step
|
|
153
|
+
step?: number | undefined;
|
|
107
154
|
|
|
108
155
|
|
|
109
156
|
/**
|
|
@@ -112,25 +159,25 @@ interface ValueInputProps {
|
|
|
112
159
|
*
|
|
113
160
|
* @default "en-US"
|
|
114
161
|
*/
|
|
115
|
-
locale
|
|
162
|
+
locale?: string | undefined;
|
|
116
163
|
|
|
117
164
|
/**
|
|
118
165
|
* A small, advisory text below the field.
|
|
119
166
|
*/
|
|
120
|
-
description
|
|
167
|
+
description?: React.ReactNode | undefined;
|
|
121
168
|
|
|
122
169
|
/**
|
|
123
170
|
* If true, all functions of the field will be disabled.
|
|
124
171
|
*/
|
|
125
|
-
disabled
|
|
172
|
+
disabled?: boolean | undefined;
|
|
126
173
|
|
|
127
174
|
/** Topic on which the value will be dispatched through the user interfave on successful data entry. */
|
|
128
|
-
dispatchTopic
|
|
175
|
+
dispatchTopic?: string | undefined;
|
|
129
176
|
|
|
130
177
|
/**
|
|
131
178
|
* Placeholder string to display if the value is empty.
|
|
132
179
|
*/
|
|
133
|
-
placeholder
|
|
180
|
+
placeholder?: string | undefined;
|
|
134
181
|
|
|
135
182
|
/**
|
|
136
183
|
* The user has accepted a new value.
|
|
@@ -139,229 +186,182 @@ interface ValueInputProps {
|
|
|
139
186
|
onValueChanged?(newValue: number): void;
|
|
140
187
|
}
|
|
141
188
|
|
|
142
|
-
/**
|
|
143
|
-
* State variables of the ValueInput component.
|
|
144
|
-
*/
|
|
145
|
-
interface ValueInputState {
|
|
146
|
-
|
|
147
|
-
entryValue: number | null;
|
|
148
|
-
currentValue: number | null;
|
|
149
|
-
editing: boolean;
|
|
150
|
-
}
|
|
151
|
-
|
|
152
|
-
|
|
153
189
|
/**
|
|
154
190
|
* A convenient field with all the usual features of inputing numbers.
|
|
155
191
|
* Wraps the common features of use of a InputNumber, p-inputgroup, some icon buttons,
|
|
156
192
|
* accepting and rejecting values and keyboard management.
|
|
157
193
|
*/
|
|
158
|
-
export
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
194
|
+
export const ValueInput: React.FC<ValueInputProps> = ({
|
|
195
|
+
label = '',
|
|
196
|
+
value = null,
|
|
197
|
+
min = undefined,
|
|
198
|
+
max = undefined,
|
|
199
|
+
minPrecision = 0,
|
|
200
|
+
maxPrecision = 3,
|
|
201
|
+
mode = "decimal",
|
|
202
|
+
currency = "USD",
|
|
203
|
+
prefix = undefined,
|
|
204
|
+
suffix = undefined,
|
|
205
|
+
showButtons = false,
|
|
206
|
+
step = 1,
|
|
207
|
+
locale = "en-US",
|
|
208
|
+
description = undefined,
|
|
209
|
+
disabled = false,
|
|
210
|
+
dispatchTopic = undefined,
|
|
211
|
+
placeholder = undefined,
|
|
212
|
+
onValueChanged = undefined
|
|
213
|
+
}) => {
|
|
214
|
+
const [entryValue, setEntryValue] = useState<number | null>(value);
|
|
215
|
+
const [currentValue, setCurrentValue] = useState<number | null>(value);
|
|
216
|
+
const [bufferedValue, setBufferedValue] = useState<number | null>(value);
|
|
217
|
+
const [editing, setEditing] = useState<boolean>(false);
|
|
218
|
+
const [invalidValue, setInvalidValue] = useState<boolean>(false);
|
|
219
|
+
const inputRef = useRef<InputNumber>(null);
|
|
220
|
+
const eventEmitter = useContext(EventEmitterContext);
|
|
221
|
+
|
|
222
|
+
useEffect(() => {
|
|
223
|
+
|
|
224
|
+
if (bufferedValue !== null) {
|
|
225
|
+
setCurrentValue(bufferedValue);
|
|
226
|
+
setBufferedValue(null);
|
|
227
|
+
setInvalidValue(false);
|
|
228
|
+
}
|
|
229
|
+
else if (value !== currentValue) {
|
|
230
|
+
setCurrentValue(value);
|
|
231
|
+
setEntryValue(value);
|
|
232
|
+
setEditing(false);
|
|
233
|
+
setInvalidValue(false);
|
|
234
|
+
}
|
|
235
|
+
|
|
170
236
|
|
|
171
|
-
|
|
172
|
-
* Default properties for the component.
|
|
173
|
-
*/
|
|
174
|
-
static defaultProps = {
|
|
175
|
-
label: '',
|
|
176
|
-
value: undefined,
|
|
177
|
-
keyFilter: undefined,
|
|
178
|
-
writeTopic: undefined,
|
|
179
|
-
onValueChanged: undefined,
|
|
180
|
-
description: undefined,
|
|
181
|
-
prefix: undefined,
|
|
182
|
-
suffix: undefined,
|
|
183
|
-
disabled: false,
|
|
184
|
-
dispatchTopic: undefined,
|
|
185
|
-
placeholder: undefined,
|
|
186
|
-
validator: undefined,
|
|
187
|
-
min: undefined,
|
|
188
|
-
max: undefined,
|
|
189
|
-
minPrecision: 0,
|
|
190
|
-
maxPrecision: 3,
|
|
191
|
-
mode: "decimal",
|
|
192
|
-
showButtons: false,
|
|
193
|
-
step: 1,
|
|
194
|
-
locale: "en-US",
|
|
195
|
-
currency: "USD"
|
|
196
|
-
};
|
|
197
|
-
inputRef: React.RefObject<HTMLInputElement>;
|
|
237
|
+
}, [value, currentValue]);
|
|
198
238
|
|
|
199
239
|
/**
|
|
240
|
+
* Buffers the original value, if editing just starting,
|
|
241
|
+
* and updates the entry value.
|
|
200
242
|
*
|
|
201
|
-
* @param
|
|
243
|
+
* @param val New value being entered.
|
|
202
244
|
*/
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
this.inputRef = createRef();
|
|
212
|
-
}
|
|
245
|
+
const handleBufferValue = (val: number | null) => {
|
|
246
|
+
if (!editing) {
|
|
247
|
+
setBufferedValue(currentValue);
|
|
248
|
+
setEditing(true);
|
|
249
|
+
}
|
|
250
|
+
setEntryValue(val);
|
|
251
|
+
};
|
|
213
252
|
|
|
214
253
|
/**
|
|
215
|
-
*
|
|
254
|
+
* Returns true if the new value falls within specified parameters.
|
|
255
|
+
* @param val The new value.
|
|
256
|
+
* @returns
|
|
216
257
|
*/
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
if (prevProps.value !== this.props.value) {
|
|
223
|
-
this.setState({
|
|
224
|
-
currentValue: this.props.value,
|
|
225
|
-
entryValue: this.props.value,
|
|
226
|
-
editing: false // Consider whether you want to reset editing state here
|
|
227
|
-
});
|
|
228
|
-
}
|
|
229
|
-
}
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
private onBufferValue(val: number | null) {
|
|
233
|
-
if (val === null)
|
|
234
|
-
return;
|
|
235
|
-
|
|
236
|
-
if (!this.state.editing) {
|
|
237
|
-
this.setState({
|
|
238
|
-
entryValue: val, //this.state.currentValue,
|
|
239
|
-
editing: true
|
|
240
|
-
}, () => {
|
|
241
|
-
|
|
242
|
-
setTimeout(() => {
|
|
243
|
-
if (this.inputRef.current) {
|
|
244
|
-
this.inputRef.current.focus();
|
|
245
|
-
}
|
|
246
|
-
|
|
247
|
-
}, 0);
|
|
248
|
-
|
|
258
|
+
const validateValue = (val : number) : boolean => {
|
|
259
|
+
|
|
260
|
+
if (max !== undefined) {
|
|
261
|
+
if (val > max) {
|
|
262
|
+
return false;
|
|
249
263
|
}
|
|
250
|
-
);
|
|
251
264
|
}
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
}
|
|
265
|
+
if (min !== undefined) {
|
|
266
|
+
if (val < min) {
|
|
267
|
+
return false;
|
|
268
|
+
}
|
|
256
269
|
}
|
|
270
|
+
|
|
271
|
+
return true;
|
|
257
272
|
}
|
|
258
273
|
|
|
259
274
|
/**
|
|
260
275
|
* The user has elected to accept the input value. Validate and store, if valid.
|
|
261
276
|
*/
|
|
262
|
-
|
|
263
|
-
if (
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
277
|
+
const handleAcceptValue = () => {
|
|
278
|
+
if (editing && entryValue !== null ) {
|
|
279
|
+
|
|
280
|
+
if (validateValue(entryValue)) {
|
|
281
|
+
setCurrentValue(entryValue);
|
|
282
|
+
setEditing(false);
|
|
283
|
+
onValueChanged?.(entryValue);
|
|
284
|
+
setInvalidValue(false);
|
|
285
|
+
|
|
286
|
+
if (dispatchTopic) {
|
|
287
|
+
eventEmitter.dispatch({ topic: dispatchTopic, payload: entryValue });
|
|
288
|
+
}
|
|
289
|
+
}
|
|
290
|
+
else {
|
|
291
|
+
setInvalidValue(true);
|
|
271
292
|
}
|
|
272
293
|
|
|
273
294
|
}
|
|
274
|
-
}
|
|
295
|
+
};
|
|
275
296
|
|
|
276
297
|
/**
|
|
277
|
-
* The user wishes to reset
|
|
298
|
+
* The user wishes to cancel/reset to the previous value.
|
|
278
299
|
*/
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
});
|
|
288
|
-
}
|
|
289
|
-
}
|
|
290
|
-
|
|
300
|
+
const handleResetValue = () => {
|
|
301
|
+
if (editing) {
|
|
302
|
+
setEntryValue(null);
|
|
303
|
+
setCurrentValue(null);
|
|
304
|
+
setEditing(false);
|
|
305
|
+
setInvalidValue(false);
|
|
306
|
+
}
|
|
307
|
+
};
|
|
291
308
|
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
<
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
size="small"
|
|
343
|
-
autoFocus={false}
|
|
344
|
-
/>
|
|
345
|
-
|
|
346
|
-
<Button
|
|
347
|
-
icon="pi pi-times"
|
|
348
|
-
disabled={this.props.disabled || !this.state.editing}
|
|
349
|
-
className="p-button-danger"
|
|
350
|
-
onClickCapture={() => this.onResetValue()}
|
|
351
|
-
visible={this.state.editing}
|
|
352
|
-
size="small"
|
|
353
|
-
autoFocus={false}
|
|
354
|
-
/>
|
|
355
|
-
</div>
|
|
356
|
-
|
|
357
|
-
{this.props.description !== undefined &&
|
|
358
|
-
<small>{this.props.description}</small>
|
|
359
|
-
}
|
|
309
|
+
return (
|
|
310
|
+
<div>
|
|
311
|
+
<div className="p-inputgroup flex-1">
|
|
312
|
+
<span className="p-inputgroup-addon">{label}</span>
|
|
313
|
+
<InputNumber
|
|
314
|
+
ref={inputRef}
|
|
315
|
+
invalid={invalidValue}
|
|
316
|
+
min={min}
|
|
317
|
+
max={max}
|
|
318
|
+
minFractionDigits={minPrecision}
|
|
319
|
+
maxFractionDigits={maxPrecision}
|
|
320
|
+
mode={mode}
|
|
321
|
+
prefix={prefix}
|
|
322
|
+
suffix={suffix}
|
|
323
|
+
showButtons={showButtons}
|
|
324
|
+
step={step}
|
|
325
|
+
placeholder={placeholder}
|
|
326
|
+
value={currentValue}
|
|
327
|
+
onChange={(e) => handleBufferValue(e.value)}
|
|
328
|
+
locale={locale}
|
|
329
|
+
currency={currency}
|
|
330
|
+
onKeyDown={(e) => {
|
|
331
|
+
if (e.key === 'Enter') {
|
|
332
|
+
handleAcceptValue();
|
|
333
|
+
} else if (e.key === 'Escape') {
|
|
334
|
+
handleResetValue();
|
|
335
|
+
}
|
|
336
|
+
}}
|
|
337
|
+
disabled={disabled}
|
|
338
|
+
/>
|
|
339
|
+
|
|
340
|
+
<Button
|
|
341
|
+
icon="pi pi-check"
|
|
342
|
+
disabled={disabled || !editing}
|
|
343
|
+
className="p-button-success"
|
|
344
|
+
onClick={() => handleAcceptValue()}
|
|
345
|
+
visible={editing}
|
|
346
|
+
size="small"
|
|
347
|
+
autoFocus={false}
|
|
348
|
+
/>
|
|
349
|
+
|
|
350
|
+
<Button
|
|
351
|
+
icon="pi pi-times"
|
|
352
|
+
disabled={disabled || !editing}
|
|
353
|
+
className="p-button-danger"
|
|
354
|
+
onClickCapture={() => handleResetValue()}
|
|
355
|
+
visible={editing}
|
|
356
|
+
size="small"
|
|
357
|
+
autoFocus={false}
|
|
358
|
+
/>
|
|
360
359
|
|
|
361
360
|
|
|
362
361
|
</div>
|
|
362
|
+
{description && <small>{description}</small>}
|
|
363
|
+
</div>
|
|
364
|
+
);
|
|
365
|
+
};
|
|
363
366
|
|
|
364
|
-
|
|
365
|
-
}
|
|
366
|
-
|
|
367
|
-
}
|
|
367
|
+
export default ValueInput;
|