STSMACOM-827b - vanilla version...

lib/ChangeDueDateDialog/DueDatePickerForm.js

@@ -1,43 +1,36 @@
-import React from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import { Field } from 'redux-form';
-
-import stripesForm from '@folio/stripes-form';
 import { Col, Datepicker, Row, Timepicker } from '@folio/stripes-components';
 
-class DueDatePickerForm extends React.Component {
-  static propTypes = {
-    dateProps: PropTypes.object,
-    timeProps: PropTypes.object,
-  }
+const DueDatePickerForm = ({ initialValues, onChange, dateProps, timeProps }) => {
+  const [dateTime, updateDateTime] = useState({ ...initialValues });
+
+  React.useEffect(() => onChange(dateTime), [dateTime.date, dateTime.time, onChange]); // eslint-disable-line
+
+  const handleChange = (e, _value, formattedValue) => {
+    updateDateTime((cur) => {
+      return { ...cur, [e.target.name]: formattedValue };
+    });
+  };
+
+  return (
+    <Row>
+      <Col xs={12} sm={6} md={3}>
+        <Datepicker {...dateProps} name="date" onChange={handleChange} value={dateTime.date} />
+      </Col>
+      <Col xs={12} sm={6} md={3}>
+        <Timepicker {...timeProps} name="time" onChange={handleChange} value={dateTime.time} timeZone="UTC" />
+      </Col>
+    </Row>
+  );
+};
 
-  render() {
-    const { dateProps, timeProps } = this.props;
+DueDatePickerForm.propTypes = {
+  dateProps: PropTypes.object,
+  timeProps: PropTypes.object,
+  initialValues: PropTypes.object,
+  onChange: PropTypes.func,
+};
 
-    return (
-      <Row>
-        <Col xs={12} sm={6} md={3}>
-          <Field
-            name="date"
-            component={Datepicker}
-            timeZone="UTC"
-            {...dateProps}
-          />
-        </Col>
-        <Col xs={12} sm={6} md={3}>
-          <Field
-            name="time"
-            component={Timepicker}
-            timeZone="UTC"
-            {...timeProps}
-          />
-        </Col>
-      </Row>
-    );
-  }
-}
+export default DueDatePickerForm;
 
-export default stripesForm({
-  form: 'dueDatePickerForm',
-  navigationCheck: false,
-})(DueDatePickerForm);