@springmicro/forms 0.6.4 → 0.7.0

package/src/utils/processSelectValue.ts

@@ -1,50 +1,50 @@
-import type { GenericObjectType, RJSFSchema, UIOptionsType } from "@rjsf/utils";
-import { asNumber, guessType } from "@rjsf/utils";
-import get from "lodash/get";
-
-const nums = new Set<any>(["number", "integer"]);
-
-/** DEPRECATED in V5, copied from V4.
- * https://raw.githubusercontent.com/rjsf-team/react-jsonschema-form/97bda160aeca8684770da6f3fed5b01b3828a1fa/packages/utils/src/processSelectValue.ts
- * Returns the real value for a select widget due to a silly limitation in the DOM which causes option change event
- * values to always be retrieved as strings. Uses the `schema` to help determine the value's true type. If the value is
- * an empty string, then the `emptyValue` from the `options` is returned, falling back to undefined.
- *
- * @param schema - The schema to used to determine the value's true type
- * @param [value] - The value to convert
- * @param [options] - The UIOptionsType from which to potentially extract the emptyValue
- * @returns - The `value` converted to the proper type
- */
-export default function processSelectValue<
-  T = any,
-  F extends GenericObjectType = any
->(schema: RJSFSchema, value?: any, options?: UIOptionsType<T, F>) {
-  const { enum: schemaEnum, type, items } = schema;
-  if (value === "") {
-    return options && options.emptyValue !== undefined
-      ? options.emptyValue
-      : undefined;
-  }
-  if (type === "array" && items && nums.has(get(items, "type"))) {
-    return value.map(asNumber);
-  }
-  if (type === "boolean") {
-    return value === "true";
-  }
-  if (nums.has(type)) {
-    return asNumber(value);
-  }
-
-  // If type is undefined, but an enum is present, try and infer the type from
-  // the enum values
-  if (Array.isArray(schemaEnum)) {
-    if (schemaEnum.every((x: any) => nums.has(guessType(x)))) {
-      return asNumber(value);
-    }
-    if (schemaEnum.every((x: any) => guessType(x) === "boolean")) {
-      return value === "true";
-    }
-  }
-
-  return value;
-}
+import type { GenericObjectType, RJSFSchema, UIOptionsType } from "@rjsf/utils";
+import { asNumber, guessType } from "@rjsf/utils";
+import get from "lodash/get";
+
+const nums = new Set<any>(["number", "integer"]);
+
+/** DEPRECATED in V5, copied from V4.
+ * https://raw.githubusercontent.com/rjsf-team/react-jsonschema-form/97bda160aeca8684770da6f3fed5b01b3828a1fa/packages/utils/src/processSelectValue.ts
+ * Returns the real value for a select widget due to a silly limitation in the DOM which causes option change event
+ * values to always be retrieved as strings. Uses the `schema` to help determine the value's true type. If the value is
+ * an empty string, then the `emptyValue` from the `options` is returned, falling back to undefined.
+ *
+ * @param schema - The schema to used to determine the value's true type
+ * @param [value] - The value to convert
+ * @param [options] - The UIOptionsType from which to potentially extract the emptyValue
+ * @returns - The `value` converted to the proper type
+ */
+export default function processSelectValue<
+  T = any,
+  F extends GenericObjectType = any
+>(schema: RJSFSchema, value?: any, options?: UIOptionsType<T, F>) {
+  const { enum: schemaEnum, type, items } = schema;
+  if (value === "") {
+    return options && options.emptyValue !== undefined
+      ? options.emptyValue
+      : undefined;
+  }
+  if (type === "array" && items && nums.has(get(items, "type"))) {
+    return value.map(asNumber);
+  }
+  if (type === "boolean") {
+    return value === "true";
+  }
+  if (nums.has(type)) {
+    return asNumber(value);
+  }
+
+  // If type is undefined, but an enum is present, try and infer the type from
+  // the enum values
+  if (Array.isArray(schemaEnum)) {
+    if (schemaEnum.every((x: any) => nums.has(guessType(x)))) {
+      return asNumber(value);
+    }
+    if (schemaEnum.every((x: any) => guessType(x) === "boolean")) {
+      return value === "true";
+    }
+  }
+
+  return value;
+}

package/src/widgets/AltDateTimeWidget.tsx

@@ -1,17 +1,17 @@
-import { WidgetProps, GenericObjectType } from "@rjsf/utils";
-import React from "react";
-
-/** The `AltDateTimeWidget` is an alternative widget for rendering datetime properties.
- *  It uses the AltDateWidget for rendering, with the `time` prop set to true by default.
- *
- * @param props - The `WidgetProps` for this component
- */
-function AltDateTimeWidget<T = any, F extends GenericObjectType = any>({
-  time = true,
-  ...props
-}: WidgetProps<T, F>) {
-  const { AltDateWidget } = props.registry.widgets;
-  return <AltDateWidget time={time} {...props} />;
-}
-
-export default AltDateTimeWidget;
+import { WidgetProps, GenericObjectType } from "@rjsf/utils";
+import React from "react";
+
+/** The `AltDateTimeWidget` is an alternative widget for rendering datetime properties.
+ *  It uses the AltDateWidget for rendering, with the `time` prop set to true by default.
+ *
+ * @param props - The `WidgetProps` for this component
+ */
+function AltDateTimeWidget<T = any, F extends GenericObjectType = any>({
+  time = true,
+  ...props
+}: WidgetProps<T, F>) {
+  const { AltDateWidget } = props.registry.widgets;
+  return <AltDateWidget time={time} {...props} />;
+}
+
+export default AltDateTimeWidget;

package/src/widgets/AltDateWidget.tsx

@@ -1,216 +1,216 @@
-import React, { MouseEvent, useCallback, useEffect, useReducer } from "react";
-import { parseDateString, toDateString, pad } from "@rjsf/utils";
-import type { WidgetProps, DateObject, GenericObjectType } from "@rjsf/utils";
-
-function rangeOptions(start: number, stop: number) {
-  const options = [];
-  for (let i = start; i <= stop; i++) {
-    options.push({ value: i, label: pad(i, 2) });
-  }
-  return options;
-}
-
-function readyForChange(state: DateObject) {
-  return Object.values(state).every((value) => value !== -1);
-}
-
-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 extends GenericObjectType = any> = Pick<
-  WidgetProps<T, F>,
-  | "value"
-  | "disabled"
-  | "readonly"
-  | "autofocus"
-  | "registry"
-  | "onBlur"
-  | "onFocus"
-> & {
-  name: string;
-  rootId: string;
-  select: (property: keyof DateObject, value: any) => void;
-  type: string;
-  range: [number, number];
-};
-
-function DateElement<T, F extends GenericObjectType = any>({
-  type,
-  range,
-  name,
-  value,
-  select,
-  rootId,
-  disabled,
-  readonly,
-  autofocus,
-  registry,
-  onBlur,
-  onFocus,
-}: DateElementProps<T, F>) {
-  const id = rootId + "_" + type;
-  const { SelectWidget } = registry.widgets;
-  return (
-    <SelectWidget
-      schema={{ type: "integer" } as unknown as F}
-      name={name}
-      id={id}
-      className="form-control"
-      options={{ enumOptions: rangeOptions(range[0], range[1]) }}
-      placeholder={type}
-      value={value}
-      disabled={disabled}
-      readonly={readonly}
-      autofocus={autofocus}
-      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.
- * @param props - The `WidgetProps` for this component
- */
-function AltDateWidget<T = any, F extends GenericObjectType = any>({
-  time = false,
-  disabled = false,
-  readonly = false,
-  autofocus = false,
-  options,
-  id,
-  name,
-  registry,
-  onBlur,
-  onFocus,
-  onChange,
-  value,
-}: WidgetProps<T, F>) {
-  const [state, setState] = useReducer(
-    (state: DateObject, action: Partial<DateObject>) => {
-      return { ...state, ...action };
-    },
-    parseDateString(value, time)
-  );
-
-  useEffect(() => {
-    if (value && value !== toDateString(state, time)) {
-      setState(parseDateString(value, time));
-    }
-  }, [value, state, time]);
-
-  useEffect(() => {
-    if (readyForChange(state)) {
-      // Only propagate to parent state if we have a complete date{time}
-      onChange(toDateString(state, time));
-    }
-  }, [state, time, onChange]);
-
-  const handleChange = useCallback(
-    (property: keyof DateObject, value: string) => {
-      setState({ [property]: value });
-    },
-    []
-  );
-
-  const handleSetNow = useCallback(
-    (event: MouseEvent<HTMLAnchorElement>) => {
-      event.preventDefault();
-      if (disabled || readonly) {
-        return;
-      }
-      const nowDateObj = parseDateString(new Date().toJSON(), time);
-      setState(nowDateObj);
-    },
-    [disabled, readonly, time]
-  );
-
-  const handleClear = useCallback(
-    (event: MouseEvent<HTMLAnchorElement>) => {
-      event.preventDefault();
-      if (disabled || readonly) {
-        return;
-      }
-      setState(parseDateString("", time));
-      onChange(undefined);
-    },
-    [disabled, readonly, time, onChange]
-  );
-
-  return (
-    <ul className="list-inline">
-      {dateElementProps(
-        state,
-        time,
-        options.yearsRange as [number, number] | undefined
-      ).map((elemProps, i) => (
-        <li key={i}>
-          <DateElement
-            name={name}
-            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-primary 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;
+import React, { MouseEvent, useCallback, useEffect, useReducer } from "react";
+import { parseDateString, toDateString, pad } from "@rjsf/utils";
+import type { WidgetProps, DateObject, GenericObjectType } from "@rjsf/utils";
+
+function rangeOptions(start: number, stop: number) {
+  const options = [];
+  for (let i = start; i <= stop; i++) {
+    options.push({ value: i, label: pad(i, 2) });
+  }
+  return options;
+}
+
+function readyForChange(state: DateObject) {
+  return Object.values(state).every((value) => value !== -1);
+}
+
+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 extends GenericObjectType = any> = Pick<
+  WidgetProps<T, F>,
+  | "value"
+  | "disabled"
+  | "readonly"
+  | "autofocus"
+  | "registry"
+  | "onBlur"
+  | "onFocus"
+> & {
+  name: string;
+  rootId: string;
+  select: (property: keyof DateObject, value: any) => void;
+  type: string;
+  range: [number, number];
+};
+
+function DateElement<T, F extends GenericObjectType = any>({
+  type,
+  range,
+  name,
+  value,
+  select,
+  rootId,
+  disabled,
+  readonly,
+  autofocus,
+  registry,
+  onBlur,
+  onFocus,
+}: DateElementProps<T, F>) {
+  const id = rootId + "_" + type;
+  const { SelectWidget } = registry.widgets;
+  return (
+    <SelectWidget
+      schema={{ type: "integer" } as unknown as F}
+      name={name}
+      id={id}
+      className="form-control"
+      options={{ enumOptions: rangeOptions(range[0], range[1]) }}
+      placeholder={type}
+      value={value}
+      disabled={disabled}
+      readonly={readonly}
+      autofocus={autofocus}
+      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.
+ * @param props - The `WidgetProps` for this component
+ */
+function AltDateWidget<T = any, F extends GenericObjectType = any>({
+  time = false,
+  disabled = false,
+  readonly = false,
+  autofocus = false,
+  options,
+  id,
+  name,
+  registry,
+  onBlur,
+  onFocus,
+  onChange,
+  value,
+}: WidgetProps<T, F>) {
+  const [state, setState] = useReducer(
+    (state: DateObject, action: Partial<DateObject>) => {
+      return { ...state, ...action };
+    },
+    parseDateString(value, time)
+  );
+
+  useEffect(() => {
+    if (value && value !== toDateString(state, time)) {
+      setState(parseDateString(value, time));
+    }
+  }, [value, state, time]);
+
+  useEffect(() => {
+    if (readyForChange(state)) {
+      // Only propagate to parent state if we have a complete date{time}
+      onChange(toDateString(state, time));
+    }
+  }, [state, time, onChange]);
+
+  const handleChange = useCallback(
+    (property: keyof DateObject, value: string) => {
+      setState({ [property]: value });
+    },
+    []
+  );
+
+  const handleSetNow = useCallback(
+    (event: MouseEvent<HTMLAnchorElement>) => {
+      event.preventDefault();
+      if (disabled || readonly) {
+        return;
+      }
+      const nowDateObj = parseDateString(new Date().toJSON(), time);
+      setState(nowDateObj);
+    },
+    [disabled, readonly, time]
+  );
+
+  const handleClear = useCallback(
+    (event: MouseEvent<HTMLAnchorElement>) => {
+      event.preventDefault();
+      if (disabled || readonly) {
+        return;
+      }
+      setState(parseDateString("", time));
+      onChange(undefined);
+    },
+    [disabled, readonly, time, onChange]
+  );
+
+  return (
+    <ul className="list-inline">
+      {dateElementProps(
+        state,
+        time,
+        options.yearsRange as [number, number] | undefined
+      ).map((elemProps, i) => (
+        <li key={i}>
+          <DateElement
+            name={name}
+            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-primary 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;