@commercetools-uikit/date-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 +21 -3
- package/dist/commercetools-uikit-date-time-field.cjs.dev.js +14 -3
- package/dist/commercetools-uikit-date-time-field.cjs.prod.js +12 -1
- package/dist/commercetools-uikit-date-time-field.esm.js +14 -3
- package/dist/declarations/src/date-time-field.d.ts +7 -3
- package/package.json +11 -11
package/README.md
CHANGED
|
@@ -55,7 +55,7 @@ export default Example;
|
|
|
55
55
|
| `touched` | `boolean` | | | Indicates whether the field was touched. Errors will only be shown when the field was touched. |
|
|
56
56
|
| `name` | `string` | | | Used as HTML name of the input component. |
|
|
57
57
|
| `value` | `string` | ✅ | | Value of the input |
|
|
58
|
-
| `onChange` | `Function`<br/>[See signature.](#signature-onChange) |
|
|
58
|
+
| `onChange` | `Function`<br/>[See signature.](#signature-onChange) | | | Called with an event holding the new value.
<br/>
Required when input is not read only. Parent should pass it back as `value`- |
|
|
59
59
|
| `onBlur` | `Function`<br/>[See signature.](#signature-onBlur) | | | Called when input is blurred |
|
|
60
60
|
| `onFocus` | `FocusEventHandler` | | | Called when input is focused |
|
|
61
61
|
| `isDisabled` | `boolean` | | | Indicates that the input cannot be modified (e.g not authorized, or changes currently saving). |
|
|
@@ -80,13 +80,13 @@ export default Example;
|
|
|
80
80
|
### Signature `onChange`
|
|
81
81
|
|
|
82
82
|
```ts
|
|
83
|
-
(event:
|
|
83
|
+
(event: TCustomEvent) => void
|
|
84
84
|
```
|
|
85
85
|
|
|
86
86
|
### Signature `onBlur`
|
|
87
87
|
|
|
88
88
|
```ts
|
|
89
|
-
(event:
|
|
89
|
+
(event: TCustomEvent) => void
|
|
90
90
|
```
|
|
91
91
|
|
|
92
92
|
### Signature `onInfoButtonClick`
|
|
@@ -116,3 +116,21 @@ Known error keys are:
|
|
|
116
116
|
## Main Functions and use cases are:
|
|
117
117
|
|
|
118
118
|
- Input field for a single date
|
|
119
|
+
|
|
120
|
+
## Static methods
|
|
121
|
+
|
|
122
|
+
### `DateTimeField.toFieldErrors`
|
|
123
|
+
|
|
124
|
+
Use this function to convert the Formik `errors` object type to our custom field errors type. This is primarily useful when using TypeScript.
|
|
125
|
+
|
|
126
|
+
```ts
|
|
127
|
+
type FormValues = {
|
|
128
|
+
myField: string;
|
|
129
|
+
};
|
|
130
|
+
|
|
131
|
+
<DateTimeField
|
|
132
|
+
// ...
|
|
133
|
+
name="my-field"
|
|
134
|
+
errors={DateTimeField.toFieldErrors<FormValues>(formik.errors).myField}
|
|
135
|
+
/>;
|
|
136
|
+
```
|
|
@@ -96,7 +96,7 @@ var DateTimeField = /*#__PURE__*/function (_Component) {
|
|
|
96
96
|
key: "render",
|
|
97
97
|
value: function render() {
|
|
98
98
|
if (!this.props.isReadOnly) {
|
|
99
|
-
process.env.NODE_ENV !== "production" ? utils.warning(typeof this.props.onChange === 'function', 'DateTimeField: `onChange` is required when
|
|
99
|
+
process.env.NODE_ENV !== "production" ? utils.warning(typeof this.props.onChange === 'function', 'DateTimeField: `onChange` is required when field is not read only.') : void 0;
|
|
100
100
|
}
|
|
101
101
|
|
|
102
102
|
if (this.props.hintIcon) {
|
|
@@ -142,6 +142,17 @@ var DateTimeField = /*#__PURE__*/function (_Component) {
|
|
|
142
142
|
})
|
|
143
143
|
});
|
|
144
144
|
}
|
|
145
|
+
}], [{
|
|
146
|
+
key: "toFieldErrors",
|
|
147
|
+
value:
|
|
148
|
+
/**
|
|
149
|
+
* Use this function to convert the Formik `errors` object type to
|
|
150
|
+
* our custom field errors type.
|
|
151
|
+
* This is primarly useful when using TypeScript.
|
|
152
|
+
*/
|
|
153
|
+
function toFieldErrors(errors) {
|
|
154
|
+
return errors;
|
|
155
|
+
}
|
|
145
156
|
}]);
|
|
146
157
|
|
|
147
158
|
return DateTimeField;
|
|
@@ -167,7 +178,7 @@ DateTimeField.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
167
178
|
touched: _pt__default["default"].bool,
|
|
168
179
|
name: _pt__default["default"].string,
|
|
169
180
|
value: _pt__default["default"].string.isRequired,
|
|
170
|
-
onChange: _pt__default["default"].func
|
|
181
|
+
onChange: _pt__default["default"].func,
|
|
171
182
|
onBlur: _pt__default["default"].func,
|
|
172
183
|
onFocus: _pt__default["default"].func,
|
|
173
184
|
isDisabled: _pt__default["default"].bool,
|
|
@@ -184,7 +195,7 @@ DateTimeField.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
184
195
|
var DateTimeField$1 = DateTimeField;
|
|
185
196
|
|
|
186
197
|
// NOTE: This string will be replaced on build time with the package version.
|
|
187
|
-
var version = "
|
|
198
|
+
var version = "14.0.2";
|
|
188
199
|
|
|
189
200
|
exports["default"] = DateTimeField$1;
|
|
190
201
|
exports.version = version;
|
|
@@ -137,6 +137,17 @@ var DateTimeField = /*#__PURE__*/function (_Component) {
|
|
|
137
137
|
})
|
|
138
138
|
});
|
|
139
139
|
}
|
|
140
|
+
}], [{
|
|
141
|
+
key: "toFieldErrors",
|
|
142
|
+
value:
|
|
143
|
+
/**
|
|
144
|
+
* Use this function to convert the Formik `errors` object type to
|
|
145
|
+
* our custom field errors type.
|
|
146
|
+
* This is primarly useful when using TypeScript.
|
|
147
|
+
*/
|
|
148
|
+
function toFieldErrors(errors) {
|
|
149
|
+
return errors;
|
|
150
|
+
}
|
|
140
151
|
}]);
|
|
141
152
|
|
|
142
153
|
return DateTimeField;
|
|
@@ -157,7 +168,7 @@ DateTimeField.propTypes = {};
|
|
|
157
168
|
var DateTimeField$1 = DateTimeField;
|
|
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
|
exports["default"] = DateTimeField$1;
|
|
163
174
|
exports.version = version;
|
|
@@ -71,7 +71,7 @@ var DateTimeField = /*#__PURE__*/function (_Component) {
|
|
|
71
71
|
key: "render",
|
|
72
72
|
value: function render() {
|
|
73
73
|
if (!this.props.isReadOnly) {
|
|
74
|
-
process.env.NODE_ENV !== "production" ? warning(typeof this.props.onChange === 'function', 'DateTimeField: `onChange` is required when
|
|
74
|
+
process.env.NODE_ENV !== "production" ? warning(typeof this.props.onChange === 'function', 'DateTimeField: `onChange` is required when field is not read only.') : void 0;
|
|
75
75
|
}
|
|
76
76
|
|
|
77
77
|
if (this.props.hintIcon) {
|
|
@@ -117,6 +117,17 @@ var DateTimeField = /*#__PURE__*/function (_Component) {
|
|
|
117
117
|
})
|
|
118
118
|
});
|
|
119
119
|
}
|
|
120
|
+
}], [{
|
|
121
|
+
key: "toFieldErrors",
|
|
122
|
+
value:
|
|
123
|
+
/**
|
|
124
|
+
* Use this function to convert the Formik `errors` object type to
|
|
125
|
+
* our custom field errors type.
|
|
126
|
+
* This is primarly useful when using TypeScript.
|
|
127
|
+
*/
|
|
128
|
+
function toFieldErrors(errors) {
|
|
129
|
+
return errors;
|
|
130
|
+
}
|
|
120
131
|
}]);
|
|
121
132
|
|
|
122
133
|
return DateTimeField;
|
|
@@ -142,7 +153,7 @@ DateTimeField.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
142
153
|
touched: _pt.bool,
|
|
143
154
|
name: _pt.string,
|
|
144
155
|
value: _pt.string.isRequired,
|
|
145
|
-
onChange: _pt.func
|
|
156
|
+
onChange: _pt.func,
|
|
146
157
|
onBlur: _pt.func,
|
|
147
158
|
onFocus: _pt.func,
|
|
148
159
|
isDisabled: _pt.bool,
|
|
@@ -159,6 +170,6 @@ DateTimeField.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
159
170
|
var DateTimeField$1 = DateTimeField;
|
|
160
171
|
|
|
161
172
|
// NOTE: This string will be replaced on build time with the package version.
|
|
162
|
-
var version = "
|
|
173
|
+
var version = "14.0.2";
|
|
163
174
|
|
|
164
175
|
export { DateTimeField$1 as default, version };
|
|
@@ -1,7 +1,10 @@
|
|
|
1
1
|
import { Component, type FocusEventHandler, type ReactNode, type MouseEvent, type KeyboardEvent, type ReactElement } from 'react';
|
|
2
2
|
declare type TErrorRenderer = (key: string, error?: boolean) => ReactNode;
|
|
3
3
|
declare type TFieldErrors = Record<string, boolean>;
|
|
4
|
-
declare type
|
|
4
|
+
declare type TCustomFormErrors<Values> = {
|
|
5
|
+
[K in keyof Values]?: TFieldErrors;
|
|
6
|
+
};
|
|
7
|
+
declare type TCustomEvent = {
|
|
5
8
|
target: {
|
|
6
9
|
id?: string;
|
|
7
10
|
name?: string;
|
|
@@ -17,8 +20,8 @@ declare type TDateTimeFieldProps = {
|
|
|
17
20
|
touched?: boolean;
|
|
18
21
|
name?: string;
|
|
19
22
|
value: string;
|
|
20
|
-
onChange
|
|
21
|
-
onBlur?: (event:
|
|
23
|
+
onChange?: (event: TCustomEvent) => void;
|
|
24
|
+
onBlur?: (event: TCustomEvent) => void;
|
|
22
25
|
onFocus?: FocusEventHandler;
|
|
23
26
|
isDisabled?: boolean;
|
|
24
27
|
isReadOnly?: boolean;
|
|
@@ -41,6 +44,7 @@ declare class DateTimeField extends Component<TDateTimeFieldProps, TDateTimeFiel
|
|
|
41
44
|
static getDerivedStateFromProps: (props: TDateTimeFieldProps, state: TDateTimeFieldState) => {
|
|
42
45
|
id: string;
|
|
43
46
|
};
|
|
47
|
+
static toFieldErrors<FormValues>(errors: unknown): TCustomFormErrors<FormValues>;
|
|
44
48
|
render(): import("@emotion/react/jsx-runtime").JSX.Element;
|
|
45
49
|
}
|
|
46
50
|
export default DateTimeField;
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@commercetools-uikit/date-time-field",
|
|
3
3
|
"description": "A controlled date time input component for single date, with validation states and a label.",
|
|
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/date-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-date-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/date-time-input": "
|
|
26
|
-
"@commercetools-uikit/design-system": "
|
|
27
|
-
"@commercetools-uikit/field-errors": "
|
|
28
|
-
"@commercetools-uikit/field-label": "
|
|
29
|
-
"@commercetools-uikit/spacings": "
|
|
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/date-time-input": "14.0.2",
|
|
26
|
+
"@commercetools-uikit/design-system": "14.0.0",
|
|
27
|
+
"@commercetools-uikit/field-errors": "14.0.1",
|
|
28
|
+
"@commercetools-uikit/field-label": "14.0.2",
|
|
29
|
+
"@commercetools-uikit/spacings": "14.0.1",
|
|
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",
|