@springmicro/forms 0.7.0 → 0.7.2

package/src/widgets/CheckboxWidget.tsx

@@ -1,80 +1,80 @@
-import React, { useCallback } from "react";
-import type { GenericObjectType, WidgetProps } from "@rjsf/utils";
-import { getTemplate, schemaRequiresTrueValue } from "@rjsf/utils";
-
-/** The `CheckBoxWidget` is a widget for rendering boolean properties.
- *  It is typically used to represent a boolean.
- *
- * @param props - The `WidgetProps` for this component
- */
-function CheckboxWidget<T = any, F extends GenericObjectType = any>({
-  schema,
-  options,
-  id,
-  value,
-  disabled,
-  readonly,
-  label,
-  autofocus = false,
-  onBlur,
-  onFocus,
-  onChange,
-  registry,
-}: WidgetProps<T, F>) {
-  const DescriptionFieldTemplate = getTemplate<
-    "DescriptionFieldTemplate",
-    T,
-    F
-  >("DescriptionFieldTemplate", registry, options);
-  // Because an unchecked checkbox will cause html5 validation to fail, only add
-  // the "required" attribute if the field value must be "true", due to the
-  // "const" or "enum" keywords
-  const required = schemaRequiresTrueValue(schema);
-
-  const handleChange = useCallback(
-    (event: React.ChangeEvent<HTMLInputElement>) =>
-      onChange(event.target.checked),
-    [onChange]
-  );
-
-  const handleBlur = useCallback(
-    (event: React.FocusEvent<HTMLInputElement>) =>
-      onBlur(id, event.target.checked),
-    [onBlur, id]
-  );
-
-  const handleFocus = useCallback(
-    (event: React.FocusEvent<HTMLInputElement>) =>
-      onFocus(id, event.target.checked),
-    [onFocus, id]
-  );
-
-  return (
-    <div className={`checkbox ${disabled || readonly ? "disabled" : ""}`}>
-      {schema.description && (
-        <DescriptionFieldTemplate
-          schema={schema}
-          id={id + "__description"}
-          description={schema.description}
-          registry={registry}
-        />
-      )}
-      <label>
-        <input
-          type="checkbox"
-          id={id}
-          checked={typeof value === "undefined" ? false : value}
-          required={required}
-          disabled={disabled || readonly}
-          autoFocus={autofocus}
-          onChange={handleChange}
-          onBlur={handleBlur}
-          onFocus={handleFocus}
-        />
-        <span>{label}</span>
-      </label>
-    </div>
-  );
-}
-
-export default CheckboxWidget;
+import React, { useCallback } from "react";
+import type { GenericObjectType, WidgetProps } from "@rjsf/utils";
+import { getTemplate, schemaRequiresTrueValue } from "@rjsf/utils";
+
+/** The `CheckBoxWidget` is a widget for rendering boolean properties.
+ *  It is typically used to represent a boolean.
+ *
+ * @param props - The `WidgetProps` for this component
+ */
+function CheckboxWidget<T = any, F extends GenericObjectType = any>({
+  schema,
+  options,
+  id,
+  value,
+  disabled,
+  readonly,
+  label,
+  autofocus = false,
+  onBlur,
+  onFocus,
+  onChange,
+  registry,
+}: WidgetProps<T, F>) {
+  const DescriptionFieldTemplate = getTemplate<
+    "DescriptionFieldTemplate",
+    T,
+    F
+  >("DescriptionFieldTemplate", registry, options);
+  // Because an unchecked checkbox will cause html5 validation to fail, only add
+  // the "required" attribute if the field value must be "true", due to the
+  // "const" or "enum" keywords
+  const required = schemaRequiresTrueValue(schema);
+
+  const handleChange = useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) =>
+      onChange(event.target.checked),
+    [onChange]
+  );
+
+  const handleBlur = useCallback(
+    (event: React.FocusEvent<HTMLInputElement>) =>
+      onBlur(id, event.target.checked),
+    [onBlur, id]
+  );
+
+  const handleFocus = useCallback(
+    (event: React.FocusEvent<HTMLInputElement>) =>
+      onFocus(id, event.target.checked),
+    [onFocus, id]
+  );
+
+  return (
+    <div className={`checkbox ${disabled || readonly ? "disabled" : ""}`}>
+      {schema.description && (
+        <DescriptionFieldTemplate
+          schema={schema}
+          id={id + "__description"}
+          description={schema.description}
+          registry={registry}
+        />
+      )}
+      <label>
+        <input
+          type="checkbox"
+          id={id}
+          checked={typeof value === "undefined" ? false : value}
+          required={required}
+          disabled={disabled || readonly}
+          autoFocus={autofocus}
+          onChange={handleChange}
+          onBlur={handleBlur}
+          onFocus={handleFocus}
+        />
+        <span>{label}</span>
+      </label>
+    </div>
+  );
+}
+
+export default CheckboxWidget;

package/src/widgets/CheckboxesWidget.tsx

@@ -1,74 +1,74 @@
-import React, { ChangeEvent } from "react";
-import { WidgetProps, GenericObjectType } from "@rjsf/utils";
-
-function selectValue(value: any, selected: any[], all: any[]) {
-  const at = all.indexOf(value);
-  const updated = selected.slice(0, at).concat(value, selected.slice(at));
-  // As inserting values at predefined index positions doesn't work with empty
-  // arrays, we need to reorder the updated selection to match the initial order
-  return updated.sort((a, b) => Number(all.indexOf(a) > all.indexOf(b)));
-}
-
-function deselectValue(value: any, selected: any[]) {
-  return selected.filter((v) => v !== value);
-}
-
-/** The `CheckboxesWidget` is a widget for rendering checkbox groups.
- *  It is typically used to represent an array of enums.
- *
- * @param props - The `WidgetProps` for this component
- */
-function CheckboxesWidget<T = any, F extends GenericObjectType = any>({
-  id,
-  disabled,
-  options: { inline = false, enumOptions, enumDisabled },
-  value,
-  autofocus = false,
-  readonly,
-  onChange,
-}: WidgetProps<T, F>) {
-  return (
-    <div
-      className={`flex checkboxes ${inline ? "flex-row gap-2" : "flex-col"}`}
-      id={id}
-    >
-      {Array.isArray(enumOptions) &&
-        enumOptions.map((option, index) => {
-          const checked = value.indexOf(option.value) !== -1;
-          const itemDisabled =
-            enumDisabled && enumDisabled.indexOf(option.value) != -1;
-          const disabledCls =
-            disabled || itemDisabled || readonly ? "disabled" : "";
-
-          const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
-            const all = enumOptions.map(({ value }) => value);
-            if (event.target.checked) {
-              onChange(selectValue(option.value, value, all));
-            } else {
-              onChange(deselectValue(option.value, value));
-            }
-          };
-
-          return (
-            <div key={`${id}_${index}_container`} className="form-control">
-              <label className="justify-start gap-2 cursor-pointer label">
-                <input
-                  key={`${id}_${index}`}
-                  className="checkbox checkbox-primary"
-                  type="checkbox"
-                  id={`${id}_${index}`}
-                  checked={checked}
-                  disabled={disabled || itemDisabled || readonly}
-                  autoFocus={autofocus && index === 0}
-                  onChange={handleChange}
-                />
-                <span className="label-text">{option.label}</span>
-              </label>
-            </div>
-          );
-        })}
-    </div>
-  );
-}
-
-export default CheckboxesWidget;
+import React, { ChangeEvent } from "react";
+import { WidgetProps, GenericObjectType } from "@rjsf/utils";
+
+function selectValue(value: any, selected: any[], all: any[]) {
+  const at = all.indexOf(value);
+  const updated = selected.slice(0, at).concat(value, selected.slice(at));
+  // As inserting values at predefined index positions doesn't work with empty
+  // arrays, we need to reorder the updated selection to match the initial order
+  return updated.sort((a, b) => Number(all.indexOf(a) > all.indexOf(b)));
+}
+
+function deselectValue(value: any, selected: any[]) {
+  return selected.filter((v) => v !== value);
+}
+
+/** The `CheckboxesWidget` is a widget for rendering checkbox groups.
+ *  It is typically used to represent an array of enums.
+ *
+ * @param props - The `WidgetProps` for this component
+ */
+function CheckboxesWidget<T = any, F extends GenericObjectType = any>({
+  id,
+  disabled,
+  options: { inline = false, enumOptions, enumDisabled },
+  value,
+  autofocus = false,
+  readonly,
+  onChange,
+}: WidgetProps<T, F>) {
+  return (
+    <div
+      className={`flex checkboxes ${inline ? "flex-row gap-2" : "flex-col"}`}
+      id={id}
+    >
+      {Array.isArray(enumOptions) &&
+        enumOptions.map((option, index) => {
+          const checked = value.indexOf(option.value) !== -1;
+          const itemDisabled =
+            enumDisabled && enumDisabled.indexOf(option.value) != -1;
+          const disabledCls =
+            disabled || itemDisabled || readonly ? "disabled" : "";
+
+          const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+            const all = enumOptions.map(({ value }) => value);
+            if (event.target.checked) {
+              onChange(selectValue(option.value, value, all));
+            } else {
+              onChange(deselectValue(option.value, value));
+            }
+          };
+
+          return (
+            <div key={`${id}_${index}_container`} className="form-control">
+              <label className="justify-start gap-2 cursor-pointer label">
+                <input
+                  key={`${id}_${index}`}
+                  className="checkbox checkbox-primary"
+                  type="checkbox"
+                  id={`${id}_${index}`}
+                  checked={checked}
+                  disabled={disabled || itemDisabled || readonly}
+                  autoFocus={autofocus && index === 0}
+                  onChange={handleChange}
+                />
+                <span className="label-text">{option.label}</span>
+              </label>
+            </div>
+          );
+        })}
+    </div>
+  );
+}
+
+export default CheckboxesWidget;

package/src/widgets/ColorWidget.tsx

@@ -1,26 +1,26 @@
-import React from "react";
-import type { WidgetProps, GenericObjectType } from "@rjsf/utils";
-import { getTemplate } from "@rjsf/utils";
-
-/** The `ColorWidget` component uses the `BaseInputTemplate` changing the type to `color` and disables it when it is
- * either disabled or readonly.
- *
- * @param props - The `WidgetProps` for this component
- */
-export default function ColorWidget<T = any, F extends GenericObjectType = any>(
-  props: WidgetProps<T, F>
-) {
-  const { disabled, readonly, options, registry } = props;
-  const BaseInputTemplate = getTemplate<"BaseInputTemplate", T, F>(
-    "BaseInputTemplate",
-    registry,
-    options
-  );
-  return (
-    <BaseInputTemplate
-      type="color"
-      {...props}
-      disabled={disabled || readonly}
-    />
-  );
-}
+import React from "react";
+import type { WidgetProps, GenericObjectType } from "@rjsf/utils";
+import { getTemplate } from "@rjsf/utils";
+
+/** The `ColorWidget` component uses the `BaseInputTemplate` changing the type to `color` and disables it when it is
+ * either disabled or readonly.
+ *
+ * @param props - The `WidgetProps` for this component
+ */
+export default function ColorWidget<T = any, F extends GenericObjectType = any>(
+  props: WidgetProps<T, F>
+) {
+  const { disabled, readonly, options, registry } = props;
+  const BaseInputTemplate = getTemplate<"BaseInputTemplate", T, F>(
+    "BaseInputTemplate",
+    registry,
+    options
+  );
+  return (
+    <BaseInputTemplate
+      type="color"
+      {...props}
+      disabled={disabled || readonly}
+    />
+  );
+}

package/src/widgets/DateTimeWidget.tsx

@@ -1,28 +1,28 @@
-import React from "react";
-import type { WidgetProps, GenericObjectType } from "@rjsf/utils";
-import { getTemplate, localToUTC, utcToLocal } from "@rjsf/utils";
-
-/** The `DateTimeWidget` component uses the `BaseInputTemplate` changing the type to `datetime-local` and transforms
- * the value to/from utc using the appropriate utility functions.
- *
- * @param props - The `WidgetProps` for this component
- */
-export default function DateTimeWidget<
-  T = any,
-  F extends GenericObjectType = any
->(props: WidgetProps<T, F>) {
-  const { onChange, value, options, registry } = props;
-  const BaseInputTemplate = getTemplate<"BaseInputTemplate", T, F>(
-    "BaseInputTemplate",
-    registry,
-    options
-  );
-  return (
-    <BaseInputTemplate
-      type="datetime-local"
-      {...props}
-      value={utcToLocal(value)}
-      onChange={(value) => onChange(localToUTC(value))}
-    />
-  );
-}
+import React from "react";
+import type { WidgetProps, GenericObjectType } from "@rjsf/utils";
+import { getTemplate, localToUTC, utcToLocal } from "@rjsf/utils";
+
+/** The `DateTimeWidget` component uses the `BaseInputTemplate` changing the type to `datetime-local` and transforms
+ * the value to/from utc using the appropriate utility functions.
+ *
+ * @param props - The `WidgetProps` for this component
+ */
+export default function DateTimeWidget<
+  T = any,
+  F extends GenericObjectType = any
+>(props: WidgetProps<T, F>) {
+  const { onChange, value, options, registry } = props;
+  const BaseInputTemplate = getTemplate<"BaseInputTemplate", T, F>(
+    "BaseInputTemplate",
+    registry,
+    options
+  );
+  return (
+    <BaseInputTemplate
+      type="datetime-local"
+      {...props}
+      value={utcToLocal(value)}
+      onChange={(value) => onChange(localToUTC(value))}
+    />
+  );
+}

package/src/widgets/DateWidget.tsx

@@ -1,36 +1,36 @@
-import React, { useCallback, useEffect } from "react";
-import type { WidgetProps, GenericObjectType } from "@rjsf/utils";
-
-// @ts-ignore
-import DatePicker from "react-datepicker";
-
-/** The `DateWidget` component uses the `BaseInputTemplate` changing the type to `date` and transforms
- * the value to undefined when it is falsy during the `onChange` handling.
- *
- * @param props - The `WidgetProps` for this component
- */
-export default function DateWidget<T = any, F extends GenericObjectType = any>(
-  props: WidgetProps<T, F>
-) {
-  const { onChange } = props;
-
-  const handleChange = useCallback(
-    (selectedDate: Date) => {
-      onChange(selectedDate?.toISOString().split("T")[0] || undefined);
-    },
-    [onChange]
-  );
-
-  const getValue = () => {
-    const offset = new Date().getTimezoneOffset();
-    return props.value ? new Date(`${props.value}T19:00:00.${offset}Z`) : null;
-  };
-
-  return (
-    <DatePicker
-      selected={getValue()}
-      className="w-full input input-bordered"
-      onChange={handleChange}
-    />
-  );
-}
+import React, { useCallback, useEffect } from "react";
+import type { WidgetProps, GenericObjectType } from "@rjsf/utils";
+
+// @ts-ignore
+import DatePicker from "react-datepicker";
+
+/** The `DateWidget` component uses the `BaseInputTemplate` changing the type to `date` and transforms
+ * the value to undefined when it is falsy during the `onChange` handling.
+ *
+ * @param props - The `WidgetProps` for this component
+ */
+export default function DateWidget<T = any, F extends GenericObjectType = any>(
+  props: WidgetProps<T, F>
+) {
+  const { onChange } = props;
+
+  const handleChange = useCallback(
+    (selectedDate: Date) => {
+      onChange(selectedDate?.toISOString().split("T")[0] || undefined);
+    },
+    [onChange]
+  );
+
+  const getValue = () => {
+    const offset = new Date().getTimezoneOffset();
+    return props.value ? new Date(`${props.value}T19:00:00.${offset}Z`) : null;
+  };
+
+  return (
+    <DatePicker
+      selected={getValue()}
+      className="w-full input input-bordered"
+      onChange={handleChange}
+    />
+  );
+}

package/src/widgets/EmailWidget.tsx

@@ -1,19 +1,19 @@
-import React from "react";
-import type { WidgetProps, GenericObjectType } from "@rjsf/utils";
-import { getTemplate } from "@rjsf/utils";
-
-/** The `EmailWidget` component uses the `BaseInputTemplate` changing the type to `email`.
- *
- * @param props - The `WidgetProps` for this component
- */
-export default function EmailWidget<T = any, F extends GenericObjectType = any>(
-  props: WidgetProps<T, F>
-) {
-  const { options, registry } = props;
-  const BaseInputTemplate = getTemplate<"BaseInputTemplate", T, F>(
-    "BaseInputTemplate",
-    registry,
-    options
-  );
-  return <BaseInputTemplate type="email" {...props} />;
-}
+import React from "react";
+import type { WidgetProps, GenericObjectType } from "@rjsf/utils";
+import { getTemplate } from "@rjsf/utils";
+
+/** The `EmailWidget` component uses the `BaseInputTemplate` changing the type to `email`.
+ *
+ * @param props - The `WidgetProps` for this component
+ */
+export default function EmailWidget<T = any, F extends GenericObjectType = any>(
+  props: WidgetProps<T, F>
+) {
+  const { options, registry } = props;
+  const BaseInputTemplate = getTemplate<"BaseInputTemplate", T, F>(
+    "BaseInputTemplate",
+    registry,
+    options
+  );
+  return <BaseInputTemplate type="email" {...props} />;
+}