From 9eabdbd8c55db139792e454d1d144788c0db400b Mon Sep 17 00:00:00 2001
From: Austin Sullivan <ausulliv@redhat.com>
Date: Tue, 19 Apr 2022 14:09:08 -0400
Subject: [PATCH] chore(DateTimePicker): convert demo to typescript

---
 .../react-core/src/demos/DateTimePicker.md    | 104 +----------------
 .../DateTimePicker/DateTimePicker.tsx         | 106 ++++++++++++++++++
 2 files changed, 107 insertions(+), 103 deletions(-)
 create mode 100644 packages/react-core/src/demos/examples/DateTimePicker/DateTimePicker.tsx

diff --git a/packages/react-core/src/demos/DateTimePicker.md b/packages/react-core/src/demos/DateTimePicker.md
index 95ebcb91af2..41621df306f 100644
--- a/packages/react-core/src/demos/DateTimePicker.md
+++ b/packages/react-core/src/demos/DateTimePicker.md
@@ -13,107 +13,5 @@ In this demo, learn how to use a [CalendarMonth](/components/calendar-month) com
 
 ### Date and time picker
 
-```js
-import React from 'react';
-import {
-  Dropdown,
-  DropdownToggle,
-  DropdownItem,
-  CalendarMonth,
-  InputGroup,
-  TextInput,
-  Button,
-  Popover
-} from '@patternfly/react-core';
-import OutlinedCalendarAltIcon from '@patternfly/react-icons/dist/esm/icons/outlined-calendar-alt-icon';
-import OutlinedClockIcon from '@patternfly/react-icons/dist/esm/icons/outlined-clock-icon';
-
-DateTimePicker = () => {
-  const [isCalendarOpen, setIsCalendarOpen] = React.useState(false);
-  const [isTimeOpen, setIsTimeOpen] = React.useState(false);
-  const [valueDate, setValueDate] = React.useState('MM-DD-YYYY');
-  const [valueTime, setValueTime] = React.useState('HH:MM');
-  const times = Array.from(new Array(10), (_, i) => i + 8);
-  const defaultTime = '0:00';
-  const dateFormat = date =>
-    date.toLocaleDateString('en-US', { year: 'numeric', month: '2-digit', day: '2-digit' }).replace(/\//g, '-');
-
-  const onToggleCalendar = () => {
-    setIsCalendarOpen(!isCalendarOpen);
-    setIsTimeOpen(false);
-  };
-
-  const onToggleTime = ev => {
-    setIsTimeOpen(!isTimeOpen);
-    setIsCalendarOpen(false);
-  };
-
-  const onSelectCalendar = newValueDate => {
-    const newValue = dateFormat(newValueDate);
-    setValueDate(newValue);
-    setIsCalendarOpen(!isCalendarOpen);
-    // setting default time when it is not picked
-    if (valueTime === 'HH:MM') {
-      setValueTime(defaultTime);
-    }
-  };
-
-  const onSelectTime = ev => {
-    setValueTime(ev.target.value);
-    setIsTimeOpen(!isTimeOpen);
-  };
-
-  const timeOptions = times.map(time => (
-    <DropdownItem key={time} component="button" value={`${time}:00`}>
-      {`${time}:00`}
-    </DropdownItem>
-  ));
-  const calendar = <CalendarMonth date={valueDate} onChange={onSelectCalendar} />;
-  const time = (
-    <Dropdown
-      onSelect={onSelectTime}
-      toggle={
-        <DropdownToggle
-          aria-label="Toggle the time picker menu"
-          toggleIndicator={null}
-          onToggle={onToggleTime}
-          style={{ padding: '6px 16px' }}
-        >
-          <OutlinedClockIcon />
-        </DropdownToggle>
-      }
-      isOpen={isTimeOpen}
-      dropdownItems={timeOptions}
-    />
-  );
-  const calendarButton = (
-    <Button variant="control" aria-label="Toggle the calendar" onClick={onToggleCalendar}>
-      <OutlinedCalendarAltIcon />
-    </Button>
-  );
-  return (
-    <div style={{ width: '300px' }}>
-      <Popover
-        position="bottom"
-        bodyContent={calendar}
-        showClose={false}
-        isVisible={isCalendarOpen}
-        hasNoPadding
-        hasAutoWidth
-      >
-        <InputGroup>
-          <TextInput
-            type="'datetime-local"
-            id="date-time"
-            aria-label="date and time picker demo"
-            value={valueDate + ' ' + valueTime}
-            isReadOnly
-          />
-          {calendarButton}
-          {time}
-        </InputGroup>
-      </Popover>
-    </div>
-  );
-};
+```ts file="./examples/DateTimePicker/DateTimePicker.tsx"
 ```
diff --git a/packages/react-core/src/demos/examples/DateTimePicker/DateTimePicker.tsx b/packages/react-core/src/demos/examples/DateTimePicker/DateTimePicker.tsx
new file mode 100644
index 00000000000..9517d1253bc
--- /dev/null
+++ b/packages/react-core/src/demos/examples/DateTimePicker/DateTimePicker.tsx
@@ -0,0 +1,106 @@
+import React from 'react';
+import {
+  Dropdown,
+  DropdownToggle,
+  DropdownItem,
+  CalendarMonth,
+  InputGroup,
+  TextInput,
+  Button,
+  Popover
+} from '@patternfly/react-core';
+import OutlinedCalendarAltIcon from '@patternfly/react-icons/dist/esm/icons/outlined-calendar-alt-icon';
+import OutlinedClockIcon from '@patternfly/react-icons/dist/esm/icons/outlined-clock-icon';
+
+export const DateTimePicker: React.FunctionComponent = () => {
+  const [isCalendarOpen, setIsCalendarOpen] = React.useState(false);
+  const [isTimeOpen, setIsTimeOpen] = React.useState(false);
+  const [valueDate, setValueDate] = React.useState('MM-DD-YYYY');
+  const [valueTime, setValueTime] = React.useState('HH:MM');
+  const times = Array.from(new Array(10), (_, i) => i + 8);
+  const defaultTime = '0:00';
+  const dateFormat = (date: Date) =>
+    date.toLocaleDateString('en-US', { year: 'numeric', month: '2-digit', day: '2-digit' }).replace(/\//g, '-');
+
+  const onToggleCalendar = () => {
+    setIsCalendarOpen(!isCalendarOpen);
+    setIsTimeOpen(false);
+  };
+
+  const onToggleTime = (_value: boolean, _event: any) => {
+    setIsTimeOpen(!isTimeOpen);
+    setIsCalendarOpen(false);
+  };
+
+  const onSelectCalendar = (newValueDate: Date) => {
+    const newValue = dateFormat(newValueDate);
+    setValueDate(newValue);
+    setIsCalendarOpen(!isCalendarOpen);
+    // setting default time when it is not picked
+    if (valueTime === 'HH:MM') {
+      setValueTime(defaultTime);
+    }
+  };
+
+  const onSelectTime = (ev: React.SyntheticEvent<HTMLDivElement>) => {
+    setValueTime(ev.currentTarget.textContent);
+    setIsTimeOpen(!isTimeOpen);
+  };
+
+  const timeOptions = times.map(time => (
+    <DropdownItem key={time} component="button" value={`${time}:00`}>
+      {`${time}:00`}
+    </DropdownItem>
+  ));
+
+  const calendar = <CalendarMonth date={new Date(valueDate)} onChange={onSelectCalendar} />;
+
+  const time = (
+    <Dropdown
+      onSelect={onSelectTime}
+      toggle={
+        <DropdownToggle
+          aria-label="Toggle the time picker menu"
+          toggleIndicator={null}
+          onToggle={onToggleTime}
+          style={{ padding: '6px 16px' }}
+        >
+          <OutlinedClockIcon />
+        </DropdownToggle>
+      }
+      isOpen={isTimeOpen}
+      dropdownItems={timeOptions}
+    />
+  );
+
+  const calendarButton = (
+    <Button variant="control" aria-label="Toggle the calendar" onClick={onToggleCalendar}>
+      <OutlinedCalendarAltIcon />
+    </Button>
+  );
+
+  return (
+    <div style={{ width: '300px' }}>
+      <Popover
+        position="bottom"
+        bodyContent={calendar}
+        showClose={false}
+        isVisible={isCalendarOpen}
+        hasNoPadding
+        hasAutoWidth
+      >
+        <InputGroup>
+          <TextInput
+            type="text"
+            id="date-time"
+            aria-label="date and time picker demo"
+            value={valueDate + ' ' + valueTime}
+            isReadOnly
+          />
+          {calendarButton}
+          {time}
+        </InputGroup>
+      </Popover>
+    </div>
+  );
+};