Migrate altdatewidget to functional component (rjsf-team#3013)

jimmycallin · web-flow · commit 9a4b6243ffea · 2022-08-21T20:08:04.000-07:00
* Migrate core widget folder to typescript

* Adressed PR feedback

* Addressed additional PR comments

* Migrate AltDateWidget to functional component

* Add types to DateElement
diff --git a/packages/core/src/components/widgets/AltDateTimeWidget.tsx b/packages/core/src/components/widgets/AltDateTimeWidget.tsx
@@ -11,12 +11,7 @@ function AltDateTimeWidget<T = any, F = any>({
   ...props
 }: WidgetProps<T, F>) {
   const { AltDateWidget } = props.registry.widgets;
-  const options = {
-    ...(AltDateWidget?.defaultProps?.options ?? {}),
-    ...props.options,
-  };
-
-  return <AltDateWidget time={time} {...props} options={options} />;
+  return <AltDateWidget time={time} {...props} />;
 }
 
 export default AltDateTimeWidget;
diff --git a/packages/core/src/components/widgets/AltDateWidget.tsx b/packages/core/src/components/widgets/AltDateWidget.tsx
@@ -1,7 +1,6 @@
-import React, { Component, MouseEvent } from "react";
+import React, { MouseEvent, useEffect, useReducer } from "react";
 
 import {
-  shouldRender,
   parseDateString,
   toDateString,
   pad,
@@ -17,23 +16,64 @@ function rangeOptions(start: number, stop: number) {
   return options;
 }
 
-function readyForChange(state: any) {
-  return Object.keys(state).every((key) => state[key] !== -1);
+function readyForChange(state: DateObject) {
+  return Object.values(state).every((value) => value !== -1);
 }
 
-function DateElement(props: any) {
-  const {
-    type,
-    range,
-    value,
-    select,
-    rootId,
-    disabled,
-    readonly,
-    autofocus,
-    registry,
-    onBlur,
-  } = props;
+function dateElementProps(
+  state: DateObject,
+  time: boolean,
+  yearsRange: [number, number] = [1900, new Date().getFullYear() + 2]
+) {
+  const { year, month, day, hour, minute, second } = state;
+  const data = [
+    {
+      type: "year",
+      range: yearsRange,
+      value: year,
+    },
+    { type: "month", range: [1, 12], value: month },
+    { type: "day", range: [1, 31], value: day },
+  ] as { type: string; range: [number, number]; value: number | undefined }[];
+  if (time) {
+    data.push(
+      { type: "hour", range: [0, 23], value: hour },
+      { type: "minute", range: [0, 59], value: minute },
+      { type: "second", range: [0, 59], value: second }
+    );
+  }
+  return data;
+}
+
+type DateElementProps<T, F> = Pick<
+  WidgetProps<T, F>,
+  | "value"
+  | "disabled"
+  | "readonly"
+  | "autofocus"
+  | "registry"
+  | "onBlur"
+  | "onFocus"
+> & {
+  rootId: string;
+  select: (property: keyof DateObject, value: any) => void;
+  type: string;
+  range: [number, number];
+};
+
+function DateElement<T, F>({
+  type,
+  range,
+  value,
+  select,
+  rootId,
+  disabled,
+  readonly,
+  autofocus,
+  registry,
+  onBlur,
+  onFocus,
+}: DateElementProps<T, F>) {
   const id = rootId + "_" + type;
   const { SelectWidget } = registry.widgets;
   return (
@@ -47,152 +87,118 @@ function DateElement(props: any) {
       disabled={disabled}
       readonly={readonly}
       autofocus={autofocus}
-      onChange={(value: any) => select(type, value)}
+      onChange={(value: any) => select(type as keyof DateObject, value)}
       onBlur={onBlur}
+      onFocus={onFocus}
+      registry={registry}
+      label=""
     />
   );
 }
 
-/** The `AltDateWidget` is an alternative widget for rendering date properties. */
-class AltDateWidget<T = any, F = any> extends Component<
-  WidgetProps<T, F>,
-  DateObject
-> {
-  static defaultProps = {
-    time: false,
-    disabled: false,
-    readonly: false,
-    autofocus: false,
-    options: {
-      yearsRange: [1900, new Date().getFullYear() + 2],
+/** The `AltDateWidget` is an alternative widget for rendering date properties.
+ * @param props - The `WidgetProps` for this component
+ */
+function AltDateWidget<T = any, F = any>({
+  time = false,
+  disabled = false,
+  readonly = false,
+  autofocus = false,
+  options,
+  id,
+  registry,
+  onBlur,
+  onFocus,
+  onChange,
+  value,
+}: WidgetProps<T, F>) {
+  const [state, setState] = useReducer(
+    (state: DateObject, action: Partial<DateObject>) => {
+      return { ...state, ...action };
     },
-  };
-
-  /**
-   *
-   * @param props - The `WidgetProps` for this component
-   */
-  constructor(props: WidgetProps<T, F>) {
-    super(props);
-    this.state = parseDateString(props.value, props.time);
-  }
+    parseDateString(value, time)
+  );
 
-  componentDidUpdate(prevProps: WidgetProps<T, F>) {
-    if (
-      prevProps.value &&
-      prevProps.value !== parseDateString(this.props.value, this.props.time)
-    ) {
-      this.setState(parseDateString(this.props.value, this.props.time));
+  useEffect(() => {
+    if (value && value !== toDateString(state, time)) {
+      setState(parseDateString(value, time));
     }
-  }
+  }, [value]);
 
-  shouldComponentUpdate(
-    nextProps: WidgetProps<T, F>,
-    nextState: DateObject
-  ): boolean {
-    return shouldRender(this, nextProps, nextState);
-  }
+  useEffect(() => {
+    if (readyForChange(state)) {
+      // Only propagate to parent state if we have a complete date{time}
+      onChange(toDateString(state, time));
+    }
+  }, [state, time]);
 
-  onChange = (property: keyof DateObject, value: any) => {
-    this.setState(
-      { [property]: typeof value === "undefined" ? -1 : value } as Pick<
-        DateObject,
-        keyof DateObject
-      >,
-      () => {
-        // Only propagate to parent state if we have a complete date{time}
-        if (readyForChange(this.state)) {
-          this.props.onChange(toDateString(this.state, this.props.time));
-        }
-      }
-    );
+  const handleChange = (property: keyof DateObject, value: string) => {
+    setState({ [property]: value });
   };
 
-  setNow = (event: MouseEvent<HTMLAnchorElement>) => {
+  const handleSetNow = (event: MouseEvent<HTMLAnchorElement>) => {
     event.preventDefault();
-    const { time, disabled, readonly, onChange } = this.props;
     if (disabled || readonly) {
       return;
     }
     const nowDateObj = parseDateString(new Date().toJSON(), time);
-    this.setState(nowDateObj, () => onChange(toDateString(this.state, time)));
+    setState(nowDateObj);
   };
 
-  clear = (event: MouseEvent<HTMLAnchorElement>) => {
+  const handleClear = (event: MouseEvent<HTMLAnchorElement>) => {
     event.preventDefault();
-    const { time, disabled, readonly, onChange } = this.props;
     if (disabled || readonly) {
       return;
     }
-    this.setState(parseDateString("", time), () => onChange(undefined));
+    setState(parseDateString("", time));
+    onChange(undefined);
   };
 
-  get dateElementProps() {
-    const { time, options } = this.props;
-    const { year, month, day, hour, minute, second } = this.state;
-    const data = [
-      {
-        type: "year",
-        range: options.yearsRange,
-        value: year,
-      },
-      { type: "month", range: [1, 12], value: month },
-      { type: "day", range: [1, 31], value: day },
-    ] as { type: string; range: [number, number]; value: number | undefined }[];
-    if (time) {
-      data.push(
-        { type: "hour", range: [0, 23], value: hour },
-        { type: "minute", range: [0, 59], value: minute },
-        { type: "second", range: [0, 59], value: second }
-      );
-    }
-    return data;
-  }
-
-  render() {
-    const { id, disabled, readonly, autofocus, registry, onBlur, options } =
-      this.props;
-    return (
-      <ul className="list-inline">
-        {this.dateElementProps.map((elemProps, i) => (
-          <li key={i}>
-            <DateElement
-              rootId={id}
-              select={this.onChange}
-              {...elemProps}
-              disabled={disabled}
-              readonly={readonly}
-              registry={registry}
-              onBlur={onBlur}
-              autofocus={autofocus && i === 0}
-            />
-          </li>
-        ))}
-        {(options.hideNowButton !== "undefined"
-          ? !options.hideNowButton
-          : true) && (
-          <li>
-            <a href="#" className="btn btn-info btn-now" onClick={this.setNow}>
-              Now
-            </a>
-          </li>
-        )}
-        {(options.hideClearButton !== "undefined"
-          ? !options.hideClearButton
-          : true) && (
-          <li>
-            <a
-              href="#"
-              className="btn btn-warning btn-clear"
-              onClick={this.clear}
-            >
-              Clear
-            </a>
-          </li>
-        )}
-      </ul>
-    );
-  }
+  return (
+    <ul className="list-inline">
+      {dateElementProps(
+        state,
+        time,
+        options.yearsRange as [number, number] | undefined
+      ).map((elemProps, i) => (
+        <li key={i}>
+          <DateElement
+            rootId={id}
+            select={handleChange}
+            {...elemProps}
+            disabled={disabled}
+            readonly={readonly}
+            registry={registry}
+            onBlur={onBlur}
+            onFocus={onFocus}
+            autofocus={autofocus && i === 0}
+          />
+        </li>
+      ))}
+      {(options.hideNowButton !== "undefined"
+        ? !options.hideNowButton
+        : true) && (
+        <li>
+          <a href="#" className="btn btn-info btn-now" onClick={handleSetNow}>
+            Now
+          </a>
+        </li>
+      )}
+      {(options.hideClearButton !== "undefined"
+        ? !options.hideClearButton
+        : true) && (
+        <li>
+          <a
+            href="#"
+            className="btn btn-warning btn-clear"
+            onClick={handleClear}
+          >
+            Clear
+          </a>
+        </li>
+      )}
+    </ul>
+  );
 }
 
 export default AltDateWidget;
diff --git a/packages/core/test/StringField_test.js b/packages/core/test/StringField_test.js
@@ -1069,7 +1069,9 @@ describe("StringField", () => {
           uiSchema,
         });
 
-        Simulate.click(node.querySelector("a.btn-now"));
+        act(() => {
+          Simulate.click(node.querySelector("a.btn-now"));
+        });
         const formValue = onChange.lastCall.args[0].formData;
         // Test that the two DATETIMEs are within 5 seconds of each other.
         const now = new Date().getTime();
@@ -1086,8 +1088,10 @@ describe("StringField", () => {
           uiSchema,
         });
 
-        Simulate.click(node.querySelector("a.btn-now"));
-        Simulate.click(node.querySelector("a.btn-clear"));
+        act(() => {
+          Simulate.click(node.querySelector("a.btn-now"));
+          Simulate.click(node.querySelector("a.btn-clear"));
+        });
 
         sinon.assert.calledWithMatch(onChange.lastCall, {
           formData: undefined,
@@ -1378,7 +1382,9 @@ describe("StringField", () => {
           uiSchema,
         });
 
-        Simulate.click(node.querySelector("a.btn-now"));
+        act(() => {
+          Simulate.click(node.querySelector("a.btn-now"));
+        });
 
         const expected = toDateString(
           parseDateString(new Date().toJSON()),
@@ -1399,8 +1405,10 @@ describe("StringField", () => {
           uiSchema,
         });
 
-        Simulate.click(node.querySelector("a.btn-now"));
-        Simulate.click(node.querySelector("a.btn-clear"));
+        act(() => {
+          Simulate.click(node.querySelector("a.btn-now"));
+          Simulate.click(node.querySelector("a.btn-clear"));
+        });
 
         sinon.assert.calledWithMatch(onChange.lastCall, {
           formData: undefined,
