@patternfly/react-core 4.206.3 → 4.206.4

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.
Files changed (3) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/package.json +5 -5
  3. package/src/demos/DateTimePicker.md +67 -51
package/CHANGELOG.md CHANGED
@@ -3,6 +3,17 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## 4.206.4 (2022-04-25)
7
+
8
+
9
+ ### Bug Fixes
10
+
11
+ * **DateTimePicker:** update date placeholder ([#7266](https://github.com/patternfly/patternfly-react/issues/7266)) ([4e9a73e](https://github.com/patternfly/patternfly-react/commit/4e9a73e8f7645b7a885d15754f99b9e078449806))
12
+
13
+
14
+
15
+
16
+
6
17
  ## 4.206.3 (2022-04-23)
7
18
 
8
19
  **Note:** Version bump only for package @patternfly/react-core
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@patternfly/react-core",
3
- "version": "4.206.3",
3
+ "version": "4.206.4",
4
4
  "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
5
5
  "main": "dist/js/index.js",
6
6
  "module": "dist/esm/index.js",
@@ -34,9 +34,9 @@
34
34
  "generate": "node scripts/copyStyles.js"
35
35
  },
36
36
  "dependencies": {
37
- "@patternfly/react-icons": "^4.57.3",
38
- "@patternfly/react-styles": "^4.56.3",
39
- "@patternfly/react-tokens": "^4.58.3",
37
+ "@patternfly/react-icons": "^4.57.4",
38
+ "@patternfly/react-styles": "^4.56.4",
39
+ "@patternfly/react-tokens": "^4.58.4",
40
40
  "focus-trap": "6.2.2",
41
41
  "react-dropzone": "9.0.0",
42
42
  "tippy.js": "5.1.2",
@@ -60,5 +60,5 @@
60
60
  "react": "^16.8.0 || ^17.0.0",
61
61
  "react-dom": "^16.8.0 || ^17.0.0"
62
62
  },
63
- "gitHead": "626f964eb2406efd476a85071138f088cad6b042"
63
+ "gitHead": "cc80f358e790331d92df19b49df25488b095265b"
64
64
  }
package/src/demos/DateTimePicker.md CHANGED
@@ -15,18 +15,28 @@ In this demo, learn how to use a [CalendarMonth](/components/calendar-month) com
15
15
 
16
16
  ```js
17
17
  import React from 'react';
18
- import { Dropdown, DropdownToggle, DropdownItem, CalendarMonth, InputGroup, TextInput, Button, Popover } from '@patternfly/react-core';
18
+ import {
19
+ Dropdown,
20
+ DropdownToggle,
21
+ DropdownItem,
22
+ CalendarMonth,
23
+ InputGroup,
24
+ TextInput,
25
+ Button,
26
+ Popover
27
+ } from '@patternfly/react-core';
19
28
  import OutlinedCalendarAltIcon from '@patternfly/react-icons/dist/esm/icons/outlined-calendar-alt-icon';
20
29
  import OutlinedClockIcon from '@patternfly/react-icons/dist/esm/icons/outlined-clock-icon';
21
30
 
22
31
  DateTimePicker = () => {
23
32
  const [isCalendarOpen, setIsCalendarOpen] = React.useState(false);
24
33
  const [isTimeOpen, setIsTimeOpen] = React.useState(false);
25
- const [valueDate, setValueDate] = React.useState("YYYY-MM-DD");
26
- const [valueTime, setValueTime] = React.useState("HH:MM");
34
+ const [valueDate, setValueDate] = React.useState('MM-DD-YYYY');
35
+ const [valueTime, setValueTime] = React.useState('HH:MM');
27
36
  const times = Array.from(new Array(10), (_, i) => i + 8);
28
- const defaultTime = "0:00";
29
- const dateFormat = date => date.toLocaleDateString('en-US', { year: 'numeric', month: '2-digit', day: '2-digit' }).replace(/\//g,'-');
37
+ const defaultTime = '0:00';
38
+ const dateFormat = date =>
39
+ date.toLocaleDateString('en-US', { year: 'numeric', month: '2-digit', day: '2-digit' }).replace(/\//g, '-');
30
40
 
31
41
  const onToggleCalendar = () => {
32
42
  setIsCalendarOpen(!isCalendarOpen);
@@ -34,69 +44,75 @@ DateTimePicker = () => {
34
44
  };
35
45
 
36
46
  const onToggleTime = ev => {
37
- setIsTimeOpen(!isTimeOpen);
38
- setIsCalendarOpen(false);
47
+ setIsTimeOpen(!isTimeOpen);
48
+ setIsCalendarOpen(false);
39
49
  };
40
50
 
41
51
  const onSelectCalendar = newValueDate => {
42
- const newValue = dateFormat(newValueDate);
43
- setValueDate(newValue);
44
- setIsCalendarOpen(!isCalendarOpen);
45
- // setting default time when it is not picked
46
- if (valueTime === "HH:MM") {
47
- setValueTime(defaultTime);
48
- }
52
+ const newValue = dateFormat(newValueDate);
53
+ setValueDate(newValue);
54
+ setIsCalendarOpen(!isCalendarOpen);
55
+ // setting default time when it is not picked
56
+ if (valueTime === 'HH:MM') {
57
+ setValueTime(defaultTime);
58
+ }
49
59
  };
50
60
 
51
61
  const onSelectTime = ev => {
52
- setValueTime(ev.target.value);
53
- setIsTimeOpen(!isTimeOpen);
62
+ setValueTime(ev.target.value);
63
+ setIsTimeOpen(!isTimeOpen);
54
64
  };
55
65
 
56
66
  const timeOptions = times.map(time => (
57
- <DropdownItem key={time} component="button" value={`${time}:00`}>
58
- {`${time}:00`}
59
- </DropdownItem>
67
+ <DropdownItem key={time} component="button" value={`${time}:00`}>
68
+ {`${time}:00`}
69
+ </DropdownItem>
60
70
  ));
61
- const calendar = (
62
- <CalendarMonth
63
- date={valueDate}
64
- onChange={onSelectCalendar}
65
- />
66
- );
71
+ const calendar = <CalendarMonth date={valueDate} onChange={onSelectCalendar} />;
67
72
  const time = (
68
- <Dropdown
69
- onSelect={onSelectTime}
70
- toggle={
71
- <DropdownToggle aria-label="Toggle the time picker menu" toggleIndicator={null} onToggle={onToggleTime} style={{ padding: '6px 16px' }}>
72
- <OutlinedClockIcon />
73
- </DropdownToggle>
74
- }
75
- isOpen={isTimeOpen}
76
- dropdownItems={timeOptions}
73
+ <Dropdown
74
+ onSelect={onSelectTime}
75
+ toggle={
76
+ <DropdownToggle
77
+ aria-label="Toggle the time picker menu"
78
+ toggleIndicator={null}
79
+ onToggle={onToggleTime}
80
+ style={{ padding: '6px 16px' }}
81
+ >
82
+ <OutlinedClockIcon />
83
+ </DropdownToggle>
84
+ }
85
+ isOpen={isTimeOpen}
86
+ dropdownItems={timeOptions}
77
87
  />
78
88
  );
79
89
  const calendarButton = (
80
- <Button variant="control" aria-label="Toggle the calendar" onClick={onToggleCalendar}>
81
- <OutlinedCalendarAltIcon />
82
- </Button>
90
+ <Button variant="control" aria-label="Toggle the calendar" onClick={onToggleCalendar}>
91
+ <OutlinedCalendarAltIcon />
92
+ </Button>
83
93
  );
84
94
  return (
85
95
  <div style={{ width: '300px' }}>
86
- <Popover
87
- position="bottom"
88
- bodyContent={calendar}
89
- showClose={false}
90
- isVisible={isCalendarOpen}
91
- hasNoPadding
92
- hasAutoWidth
93
- >
94
- <InputGroup>
95
- <TextInput type="'datetime-local" id="date-time" aria-label="date and time picker demo" value={valueDate + ' ' + valueTime} isReadOnly/>
96
- {calendarButton}
97
- {time}
98
- </InputGroup>
99
- </Popover>
96
+ <Popover
97
+ position="bottom"
98
+ bodyContent={calendar}
99
+ showClose={false}
100
+ isVisible={isCalendarOpen}
101
+ hasNoPadding
102
+ hasAutoWidth
103
+ >
104
+ <InputGroup>
105
+ <TextInput
106
+ type="'datetime-local"
107
+ id="date-time"
108
+ aria-label="date and time picker demo"
109
+ value={valueDate + ' ' + valueTime}
110
+ isReadOnly
111
+ />
112
+ {calendarButton}
113
+ {time}
114
+ </InputGroup>
115
+ </Popover>
100
116
  </div>
101
117
  );
102
118
  };