@commercetools-uikit/time-field 13.0.4 → 14.0.2
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.
package/README.md
CHANGED
|
@@ -56,9 +56,9 @@ export default Example;
|
|
|
56
56
|
| `name` | `string` | | | Used as HTML name of the input component. |
|
|
57
57
|
| `autoComplete` | `string` | | | Used as HTML autocomplete of the input component. |
|
|
58
58
|
| `value` | `string` | ✅ | | Value of the input |
|
|
59
|
-
| `onChange` | `
|
|
60
|
-
| `onBlur` | `
|
|
61
|
-
| `onFocus` | `
|
|
59
|
+
| `onChange` | `ChangeEventHandler` | | | Called with an event holding the new value. |
|
|
60
|
+
| `onBlur` | `FocusEventHandler` | | | Called when input is blurred |
|
|
61
|
+
| `onFocus` | `FocusEventHandler` | | | Called when input is focused |
|
|
62
62
|
| `isAutofocussed` | `boolean` | | | Focus the input on initial render |
|
|
63
63
|
| `isDisabled` | `boolean` | | | Indicates that the input cannot be modified (e.g not authorized, or changes currently saving). |
|
|
64
64
|
| `isReadOnly` | `boolean` | | | Indicates that the input is read only (no changes allowed). |
|
|
@@ -78,24 +78,6 @@ export default Example;
|
|
|
78
78
|
(key: string, error?: boolean) => ReactNode;
|
|
79
79
|
```
|
|
80
80
|
|
|
81
|
-
### Signature `onChange`
|
|
82
|
-
|
|
83
|
-
```ts
|
|
84
|
-
(event: TEvent) => void
|
|
85
|
-
```
|
|
86
|
-
|
|
87
|
-
### Signature `onBlur`
|
|
88
|
-
|
|
89
|
-
```ts
|
|
90
|
-
(event: TEvent) => void
|
|
91
|
-
```
|
|
92
|
-
|
|
93
|
-
### Signature `onFocus`
|
|
94
|
-
|
|
95
|
-
```ts
|
|
96
|
-
(event: TEvent) => void
|
|
97
|
-
```
|
|
98
|
-
|
|
99
81
|
### Signature `onInfoButtonClick`
|
|
100
82
|
|
|
101
83
|
```ts
|
|
@@ -123,3 +105,21 @@ Known error keys are:
|
|
|
123
105
|
## Main Functions and use cases are:
|
|
124
106
|
|
|
125
107
|
- Input field for a single date
|
|
108
|
+
|
|
109
|
+
## Static methods
|
|
110
|
+
|
|
111
|
+
### `TimeField.toFieldErrors`
|
|
112
|
+
|
|
113
|
+
Use this function to convert the Formik `errors` object type to our custom field errors type. This is primarily useful when using TypeScript.
|
|
114
|
+
|
|
115
|
+
```ts
|
|
116
|
+
type FormValues = {
|
|
117
|
+
myField: string;
|
|
118
|
+
};
|
|
119
|
+
|
|
120
|
+
<TimeField
|
|
121
|
+
// ...
|
|
122
|
+
name="my-field"
|
|
123
|
+
errors={TimeField.toFieldErrors<FormValues>(formik.errors).myField}
|
|
124
|
+
/>;
|
|
125
|
+
```
|
|
@@ -97,7 +97,7 @@ var TimeField = /*#__PURE__*/function (_Component) {
|
|
|
97
97
|
var hasError = this.props.touched && hasErrors(this.props.errors);
|
|
98
98
|
|
|
99
99
|
if (!this.props.isReadOnly) {
|
|
100
|
-
process.env.NODE_ENV !== "production" ? utils.warning(typeof this.props.onChange === 'function', 'TimeField: `onChange` is required when is not read only.') : void 0;
|
|
100
|
+
process.env.NODE_ENV !== "production" ? utils.warning(typeof this.props.onChange === 'function', 'TimeField: `onChange` is required when field is not read only.') : void 0;
|
|
101
101
|
}
|
|
102
102
|
|
|
103
103
|
if (this.props.hintIcon) {
|
|
@@ -139,6 +139,17 @@ var TimeField = /*#__PURE__*/function (_Component) {
|
|
|
139
139
|
})
|
|
140
140
|
});
|
|
141
141
|
}
|
|
142
|
+
}], [{
|
|
143
|
+
key: "toFieldErrors",
|
|
144
|
+
value:
|
|
145
|
+
/**
|
|
146
|
+
* Use this function to convert the Formik `errors` object type to
|
|
147
|
+
* our custom field errors type.
|
|
148
|
+
* This is primarily useful when using TypeScript.
|
|
149
|
+
*/
|
|
150
|
+
function toFieldErrors(errors) {
|
|
151
|
+
return errors;
|
|
152
|
+
}
|
|
142
153
|
}]);
|
|
143
154
|
|
|
144
155
|
return TimeField;
|
|
@@ -165,7 +176,7 @@ TimeField.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
165
176
|
name: _pt__default["default"].string,
|
|
166
177
|
autoComplete: _pt__default["default"].string,
|
|
167
178
|
value: _pt__default["default"].string.isRequired,
|
|
168
|
-
onChange: _pt__default["default"].func
|
|
179
|
+
onChange: _pt__default["default"].func,
|
|
169
180
|
onBlur: _pt__default["default"].func,
|
|
170
181
|
onFocus: _pt__default["default"].func,
|
|
171
182
|
isAutofocussed: _pt__default["default"].bool,
|
|
@@ -182,7 +193,7 @@ TimeField.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
182
193
|
var TimeField$1 = TimeField;
|
|
183
194
|
|
|
184
195
|
// NOTE: This string will be replaced on build time with the package version.
|
|
185
|
-
var version = "
|
|
196
|
+
var version = "14.0.2";
|
|
186
197
|
|
|
187
198
|
exports["default"] = TimeField$1;
|
|
188
199
|
exports.version = version;
|
|
@@ -134,6 +134,17 @@ var TimeField = /*#__PURE__*/function (_Component) {
|
|
|
134
134
|
})
|
|
135
135
|
});
|
|
136
136
|
}
|
|
137
|
+
}], [{
|
|
138
|
+
key: "toFieldErrors",
|
|
139
|
+
value:
|
|
140
|
+
/**
|
|
141
|
+
* Use this function to convert the Formik `errors` object type to
|
|
142
|
+
* our custom field errors type.
|
|
143
|
+
* This is primarily useful when using TypeScript.
|
|
144
|
+
*/
|
|
145
|
+
function toFieldErrors(errors) {
|
|
146
|
+
return errors;
|
|
147
|
+
}
|
|
137
148
|
}]);
|
|
138
149
|
|
|
139
150
|
return TimeField;
|
|
@@ -154,7 +165,7 @@ TimeField.propTypes = {};
|
|
|
154
165
|
var TimeField$1 = TimeField;
|
|
155
166
|
|
|
156
167
|
// NOTE: This string will be replaced on build time with the package version.
|
|
157
|
-
var version = "
|
|
168
|
+
var version = "14.0.2";
|
|
158
169
|
|
|
159
170
|
exports["default"] = TimeField$1;
|
|
160
171
|
exports.version = version;
|
|
@@ -72,7 +72,7 @@ var TimeField = /*#__PURE__*/function (_Component) {
|
|
|
72
72
|
var hasError = this.props.touched && hasErrors(this.props.errors);
|
|
73
73
|
|
|
74
74
|
if (!this.props.isReadOnly) {
|
|
75
|
-
process.env.NODE_ENV !== "production" ? warning(typeof this.props.onChange === 'function', 'TimeField: `onChange` is required when is not read only.') : void 0;
|
|
75
|
+
process.env.NODE_ENV !== "production" ? warning(typeof this.props.onChange === 'function', 'TimeField: `onChange` is required when field is not read only.') : void 0;
|
|
76
76
|
}
|
|
77
77
|
|
|
78
78
|
if (this.props.hintIcon) {
|
|
@@ -114,6 +114,17 @@ var TimeField = /*#__PURE__*/function (_Component) {
|
|
|
114
114
|
})
|
|
115
115
|
});
|
|
116
116
|
}
|
|
117
|
+
}], [{
|
|
118
|
+
key: "toFieldErrors",
|
|
119
|
+
value:
|
|
120
|
+
/**
|
|
121
|
+
* Use this function to convert the Formik `errors` object type to
|
|
122
|
+
* our custom field errors type.
|
|
123
|
+
* This is primarily useful when using TypeScript.
|
|
124
|
+
*/
|
|
125
|
+
function toFieldErrors(errors) {
|
|
126
|
+
return errors;
|
|
127
|
+
}
|
|
117
128
|
}]);
|
|
118
129
|
|
|
119
130
|
return TimeField;
|
|
@@ -140,7 +151,7 @@ TimeField.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
140
151
|
name: _pt.string,
|
|
141
152
|
autoComplete: _pt.string,
|
|
142
153
|
value: _pt.string.isRequired,
|
|
143
|
-
onChange: _pt.func
|
|
154
|
+
onChange: _pt.func,
|
|
144
155
|
onBlur: _pt.func,
|
|
145
156
|
onFocus: _pt.func,
|
|
146
157
|
isAutofocussed: _pt.bool,
|
|
@@ -157,6 +168,6 @@ TimeField.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
157
168
|
var TimeField$1 = TimeField;
|
|
158
169
|
|
|
159
170
|
// NOTE: This string will be replaced on build time with the package version.
|
|
160
|
-
var version = "
|
|
171
|
+
var version = "14.0.2";
|
|
161
172
|
|
|
162
173
|
export { TimeField$1 as default, version };
|
|
@@ -1,13 +1,8 @@
|
|
|
1
|
-
import { Component, type KeyboardEvent, type MouseEvent, type ReactElement, type ReactNode } from 'react';
|
|
2
|
-
declare type TEvent = {
|
|
3
|
-
target: {
|
|
4
|
-
id?: string;
|
|
5
|
-
name?: string;
|
|
6
|
-
value?: unknown;
|
|
7
|
-
};
|
|
8
|
-
persist?: () => void;
|
|
9
|
-
};
|
|
1
|
+
import { Component, type ChangeEventHandler, type FocusEventHandler, type KeyboardEvent, type MouseEvent, type ReactElement, type ReactNode } from 'react';
|
|
10
2
|
declare type TFieldErrors = Record<string, boolean>;
|
|
3
|
+
declare type TCustomFormErrors<Values> = {
|
|
4
|
+
[K in keyof Values]?: TFieldErrors;
|
|
5
|
+
};
|
|
11
6
|
declare type TTimeFieldProps = {
|
|
12
7
|
id?: string;
|
|
13
8
|
horizontalConstraint?: 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 'scale' | 'auto';
|
|
@@ -18,9 +13,9 @@ declare type TTimeFieldProps = {
|
|
|
18
13
|
name?: string;
|
|
19
14
|
autoComplete?: string;
|
|
20
15
|
value: string;
|
|
21
|
-
onChange
|
|
22
|
-
onBlur?:
|
|
23
|
-
onFocus?:
|
|
16
|
+
onChange?: ChangeEventHandler<HTMLInputElement>;
|
|
17
|
+
onBlur?: FocusEventHandler<HTMLInputElement>;
|
|
18
|
+
onFocus?: FocusEventHandler<HTMLInputElement>;
|
|
24
19
|
isAutofocussed?: boolean;
|
|
25
20
|
isDisabled?: boolean;
|
|
26
21
|
isReadOnly?: boolean;
|
|
@@ -42,6 +37,7 @@ declare class TimeField extends Component<TTimeFieldProps, TTimeFieldState> {
|
|
|
42
37
|
static getDerivedStateFromProps: (props: TTimeFieldProps, state: TTimeFieldState) => {
|
|
43
38
|
id: string;
|
|
44
39
|
};
|
|
40
|
+
static toFieldErrors<FormValues>(errors: unknown): TCustomFormErrors<FormValues>;
|
|
45
41
|
render(): import("@emotion/react/jsx-runtime").JSX.Element;
|
|
46
42
|
}
|
|
47
43
|
export default TimeField;
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@commercetools-uikit/time-field",
|
|
3
3
|
"description": "A controlled date input component for single date.",
|
|
4
|
-
"version": "
|
|
4
|
+
"version": "14.0.2",
|
|
5
5
|
"bugs": "https://github.com/commercetools/ui-kit/issues",
|
|
6
6
|
"repository": {
|
|
7
7
|
"type": "git",
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
"directory": "packages/components/fields/time-field"
|
|
10
10
|
},
|
|
11
11
|
"homepage": "https://uikit.commercetools.com",
|
|
12
|
-
"keywords": ["javascript", "design
|
|
12
|
+
"keywords": ["javascript", "typescript", "design-system", "react", "uikit"],
|
|
13
13
|
"license": "MIT",
|
|
14
14
|
"publishConfig": {
|
|
15
15
|
"access": "public"
|
|
@@ -19,15 +19,15 @@
|
|
|
19
19
|
"module": "dist/commercetools-uikit-time-field.esm.js",
|
|
20
20
|
"files": ["dist"],
|
|
21
21
|
"dependencies": {
|
|
22
|
-
"@babel/runtime": "7.17.2",
|
|
23
|
-
"@babel/runtime-corejs3": "7.17.2",
|
|
24
|
-
"@commercetools-uikit/constraints": "
|
|
25
|
-
"@commercetools-uikit/design-system": "
|
|
26
|
-
"@commercetools-uikit/field-errors": "
|
|
27
|
-
"@commercetools-uikit/field-label": "
|
|
28
|
-
"@commercetools-uikit/spacings-stack": "
|
|
29
|
-
"@commercetools-uikit/time-input": "
|
|
30
|
-
"@commercetools-uikit/utils": "
|
|
22
|
+
"@babel/runtime": "^7.17.2",
|
|
23
|
+
"@babel/runtime-corejs3": "^7.17.2",
|
|
24
|
+
"@commercetools-uikit/constraints": "14.0.1",
|
|
25
|
+
"@commercetools-uikit/design-system": "14.0.0",
|
|
26
|
+
"@commercetools-uikit/field-errors": "14.0.1",
|
|
27
|
+
"@commercetools-uikit/field-label": "14.0.2",
|
|
28
|
+
"@commercetools-uikit/spacings-stack": "14.0.1",
|
|
29
|
+
"@commercetools-uikit/time-input": "14.0.2",
|
|
30
|
+
"@commercetools-uikit/utils": "14.0.1",
|
|
31
31
|
"@emotion/react": "^11.4.0",
|
|
32
32
|
"@emotion/styled": "^11.3.0",
|
|
33
33
|
"prop-types": "15.8.1",
|