@commercetools-uikit/date-time-field 18.2.0 → 18.3.0
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 +26 -25
- package/dist/commercetools-uikit-date-time-field.cjs.dev.js +5 -3
- package/dist/commercetools-uikit-date-time-field.cjs.prod.js +3 -2
- package/dist/commercetools-uikit-date-time-field.esm.js +5 -3
- package/dist/declarations/src/date-time-field.d.ts +1 -0
- package/package.json +9 -9
package/README.md
CHANGED
|
@@ -45,31 +45,32 @@ export default Example;
|
|
|
45
45
|
|
|
46
46
|
## Properties
|
|
47
47
|
|
|
48
|
-
| Props
|
|
49
|
-
|
|
|
50
|
-
| `id`
|
|
51
|
-
| `horizontalConstraint`
|
|
52
|
-
| `errors`
|
|
53
|
-
| `renderError`
|
|
54
|
-
| `warnings`
|
|
55
|
-
| `renderWarning`
|
|
56
|
-
| `isRequired`
|
|
57
|
-
| `touched`
|
|
58
|
-
| `name`
|
|
59
|
-
| `value`
|
|
60
|
-
| `onChange`
|
|
61
|
-
| `onBlur`
|
|
62
|
-
| `onFocus`
|
|
63
|
-
| `isDisabled`
|
|
64
|
-
| `isReadOnly`
|
|
65
|
-
| `placeholder`
|
|
66
|
-
| `timeZone`
|
|
67
|
-
| `title`
|
|
68
|
-
| `hint`
|
|
69
|
-
| `description`
|
|
70
|
-
| `onInfoButtonClick`
|
|
71
|
-
| `hintIcon`
|
|
72
|
-
| `badge`
|
|
48
|
+
| Props | Type | Required | Default | Description |
|
|
49
|
+
| ------------------------- | -------------------------------------------------------------------------------------------- | :------: | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
50
|
+
| `id` | `string` | | | Used as HTML id property. An id is auto-generated when it is not specified. |
|
|
51
|
+
| `horizontalConstraint` | `union`<br/>Possible values:<br/>`, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto'` | | `'scale'` | Horizontal size limit of the input fields. |
|
|
52
|
+
| `errors` | `Record` | | | A map of errors. Error messages for known errors are rendered automatically.
<br />
Unknown errors will be forwarded to `renderError` |
|
|
53
|
+
| `renderError` | `Function`<br/>[See signature.](#signature-renderError) | | | Called with custom errors. This function can return a message which will be wrapped in an ErrorMessage. It can also return null to show no error. |
|
|
54
|
+
| `warnings` | `Record` | | | A map of warnings. Warning messages for known warnings are rendered automatically.
<br/>
Unknown warnings will be forwarded to renderWarning. |
|
|
55
|
+
| `renderWarning` | `Function`<br/>[See signature.](#signature-renderWarning) | | | Called with custom warnings, as renderWarning(key, warning). This function can return a message which will be wrapped in a WarningMessage.
<br />
It can also return null to show no warning. |
|
|
56
|
+
| `isRequired` | `boolean` | | | Indicates if the value is required. Shows an the "required asterisk" if so. |
|
|
57
|
+
| `touched` | `boolean` | | | Indicates whether the field was touched. Errors will only be shown when the field was touched. |
|
|
58
|
+
| `name` | `string` | | | Used as HTML name of the input component. |
|
|
59
|
+
| `value` | `string` | ✅ | | Value of the input |
|
|
60
|
+
| `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`- |
|
|
61
|
+
| `onBlur` | `Function`<br/>[See signature.](#signature-onBlur) | | | Called when input is blurred |
|
|
62
|
+
| `onFocus` | `FocusEventHandler` | | | Called when input is focused |
|
|
63
|
+
| `isDisabled` | `boolean` | | | Indicates that the input cannot be modified (e.g not authorized, or changes currently saving). |
|
|
64
|
+
| `isReadOnly` | `boolean` | | | Indicates that the field is displaying read-only content |
|
|
65
|
+
| `placeholder` | `string` | | | Placeholder text for the input |
|
|
66
|
+
| `timeZone` | `string` | ✅ | | Specifies the time zone in which the calendar and selected values are shown. It also influences how entered dates and times are parsed.
<br />
See the `DateTimeInput` docs for more information. |
|
|
67
|
+
| `title` | `ReactNode` | ✅ | | Title of the label |
|
|
68
|
+
| `hint` | `ReactNode` | | | Hint for the label. Provides a supplementary but important information regarding the behaviour of the input (e.g warn about uniqueness of a field, when it can only be set once), whereas `description` can describe it in more depth. Can also receive a `hintIcon`. |
|
|
69
|
+
| `description` | `ReactNode` | | | Provides a description for the title. |
|
|
70
|
+
| `onInfoButtonClick` | `Function`<br/>[See signature.](#signature-onInfoButtonClick) | | | Function called when info button is pressed.
<br />
Info button will only be visible when this prop is passed. |
|
|
71
|
+
| `hintIcon` | `ReactElement` | | | Icon to be displayed beside the hint text.
<br />
Will only get rendered when `hint` is passed as well. |
|
|
72
|
+
| `badge` | `ReactNode` | | | Badge to be displayed beside the label.
<br />
Might be used to display additional information about the content of the field (E.g verified email) |
|
|
73
|
+
| `defaultDaySelectionTime` | `string` | | | The time that will be used by default when a user selects a calendar day. It must follow the “HH:mm” pattern (eg: 04:30, 13:25, 23:59) |
|
|
73
74
|
|
|
74
75
|
## Signatures
|
|
75
76
|
|
|
@@ -122,7 +122,8 @@ let DateTimeField = /*#__PURE__*/function (_Component) {
|
|
|
122
122
|
horizontalConstraint: "scale"
|
|
123
123
|
}, utils.filterDataAttributes(this.props)), {}, {
|
|
124
124
|
"aria-invalid": hasError,
|
|
125
|
-
"aria-errormessage": sequentialErrorsId
|
|
125
|
+
"aria-errormessage": sequentialErrorsId,
|
|
126
|
+
defaultDaySelectionTime: this.props.defaultDaySelectionTime
|
|
126
127
|
})), jsxRuntime.jsx(FieldErrors__default["default"], {
|
|
127
128
|
id: sequentialErrorsId,
|
|
128
129
|
errors: this.props.errors,
|
|
@@ -181,12 +182,13 @@ DateTimeField.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
181
182
|
description: _pt__default["default"].node,
|
|
182
183
|
onInfoButtonClick: _pt__default["default"].func,
|
|
183
184
|
hintIcon: _pt__default["default"].element,
|
|
184
|
-
badge: _pt__default["default"].node
|
|
185
|
+
badge: _pt__default["default"].node,
|
|
186
|
+
defaultDaySelectionTime: _pt__default["default"].string
|
|
185
187
|
} : {};
|
|
186
188
|
var DateTimeField$1 = DateTimeField;
|
|
187
189
|
|
|
188
190
|
// NOTE: This string will be replaced on build time with the package version.
|
|
189
|
-
var version = "18.
|
|
191
|
+
var version = "18.3.0";
|
|
190
192
|
|
|
191
193
|
exports["default"] = DateTimeField$1;
|
|
192
194
|
exports.version = version;
|
|
@@ -117,7 +117,8 @@ let DateTimeField = /*#__PURE__*/function (_Component) {
|
|
|
117
117
|
horizontalConstraint: "scale"
|
|
118
118
|
}, utils.filterDataAttributes(this.props)), {}, {
|
|
119
119
|
"aria-invalid": hasError,
|
|
120
|
-
"aria-errormessage": sequentialErrorsId
|
|
120
|
+
"aria-errormessage": sequentialErrorsId,
|
|
121
|
+
defaultDaySelectionTime: this.props.defaultDaySelectionTime
|
|
121
122
|
})), jsxRuntime.jsx(FieldErrors__default["default"], {
|
|
122
123
|
id: sequentialErrorsId,
|
|
123
124
|
errors: this.props.errors,
|
|
@@ -157,7 +158,7 @@ DateTimeField.propTypes = {};
|
|
|
157
158
|
var DateTimeField$1 = DateTimeField;
|
|
158
159
|
|
|
159
160
|
// NOTE: This string will be replaced on build time with the package version.
|
|
160
|
-
var version = "18.
|
|
161
|
+
var version = "18.3.0";
|
|
161
162
|
|
|
162
163
|
exports["default"] = DateTimeField$1;
|
|
163
164
|
exports.version = version;
|
|
@@ -97,7 +97,8 @@ let DateTimeField = /*#__PURE__*/function (_Component) {
|
|
|
97
97
|
horizontalConstraint: "scale"
|
|
98
98
|
}, filterDataAttributes(this.props)), {}, {
|
|
99
99
|
"aria-invalid": hasError,
|
|
100
|
-
"aria-errormessage": sequentialErrorsId
|
|
100
|
+
"aria-errormessage": sequentialErrorsId,
|
|
101
|
+
defaultDaySelectionTime: this.props.defaultDaySelectionTime
|
|
101
102
|
})), jsx(FieldErrors, {
|
|
102
103
|
id: sequentialErrorsId,
|
|
103
104
|
errors: this.props.errors,
|
|
@@ -156,11 +157,12 @@ DateTimeField.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
156
157
|
description: _pt.node,
|
|
157
158
|
onInfoButtonClick: _pt.func,
|
|
158
159
|
hintIcon: _pt.element,
|
|
159
|
-
badge: _pt.node
|
|
160
|
+
badge: _pt.node,
|
|
161
|
+
defaultDaySelectionTime: _pt.string
|
|
160
162
|
} : {};
|
|
161
163
|
var DateTimeField$1 = DateTimeField;
|
|
162
164
|
|
|
163
165
|
// NOTE: This string will be replaced on build time with the package version.
|
|
164
|
-
var version = "18.
|
|
166
|
+
var version = "18.3.0";
|
|
165
167
|
|
|
166
168
|
export { DateTimeField$1 as default, version };
|
|
@@ -36,6 +36,7 @@ export type TDateTimeFieldProps = {
|
|
|
36
36
|
onInfoButtonClick?: (event: MouseEvent<HTMLButtonElement> | KeyboardEvent<HTMLButtonElement>) => void;
|
|
37
37
|
hintIcon?: ReactElement;
|
|
38
38
|
badge?: ReactNode;
|
|
39
|
+
defaultDaySelectionTime?: string;
|
|
39
40
|
};
|
|
40
41
|
type TDateTimeFieldState = Pick<TDateTimeFieldProps, 'id'>;
|
|
41
42
|
declare class DateTimeField extends Component<TDateTimeFieldProps, TDateTimeFieldState> {
|
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": "18.
|
|
4
|
+
"version": "18.3.0",
|
|
5
5
|
"bugs": "https://github.com/commercetools/ui-kit/issues",
|
|
6
6
|
"repository": {
|
|
7
7
|
"type": "git",
|
|
@@ -21,14 +21,14 @@
|
|
|
21
21
|
"dependencies": {
|
|
22
22
|
"@babel/runtime": "^7.20.13",
|
|
23
23
|
"@babel/runtime-corejs3": "^7.20.13",
|
|
24
|
-
"@commercetools-uikit/constraints": "18.
|
|
25
|
-
"@commercetools-uikit/date-time-input": "18.
|
|
26
|
-
"@commercetools-uikit/design-system": "18.
|
|
27
|
-
"@commercetools-uikit/field-errors": "18.
|
|
28
|
-
"@commercetools-uikit/field-label": "18.
|
|
29
|
-
"@commercetools-uikit/field-warnings": "18.
|
|
30
|
-
"@commercetools-uikit/spacings": "18.
|
|
31
|
-
"@commercetools-uikit/utils": "18.
|
|
24
|
+
"@commercetools-uikit/constraints": "18.3.0",
|
|
25
|
+
"@commercetools-uikit/date-time-input": "18.3.0",
|
|
26
|
+
"@commercetools-uikit/design-system": "18.3.0",
|
|
27
|
+
"@commercetools-uikit/field-errors": "18.3.0",
|
|
28
|
+
"@commercetools-uikit/field-label": "18.3.0",
|
|
29
|
+
"@commercetools-uikit/field-warnings": "18.3.0",
|
|
30
|
+
"@commercetools-uikit/spacings": "18.3.0",
|
|
31
|
+
"@commercetools-uikit/utils": "18.3.0",
|
|
32
32
|
"@emotion/react": "^11.10.5",
|
|
33
33
|
"@emotion/styled": "^11.10.5",
|
|
34
34
|
"prop-types": "15.8.1",
|