@springmicro/forms 0.6.4 → 0.7.0

package/src/widgets/FileWidget.tsx

@@ -1,144 +1,144 @@
-import React, { ChangeEvent, useCallback, useMemo, useState } from "react";
-
-import type { WidgetProps, GenericObjectType } from "@rjsf/utils";
-import { dataURItoBlob } from "@rjsf/utils";
-
-function addNameToDataURL(dataURL: string, name: string) {
-  if (dataURL === null) {
-    return null;
-  }
-  return dataURL.replace(";base64", `;name=${encodeURIComponent(name)};base64`);
-}
-
-type FileInfoType = {
-  dataURL?: string | null;
-  name: string;
-  size: number;
-  type: string;
-};
-
-function processFile(file: File): Promise<FileInfoType> {
-  const { name, size, type } = file;
-  return new Promise((resolve, reject) => {
-    const reader = new window.FileReader();
-    reader.onerror = reject;
-    reader.onload = (event) => {
-      if (typeof event.target?.result === "string") {
-        resolve({
-          dataURL: addNameToDataURL(event.target.result, name),
-          name,
-          size,
-          type,
-        });
-      } else {
-        resolve({
-          dataURL: null,
-          name,
-          size,
-          type,
-        });
-      }
-    };
-    reader.readAsDataURL(file);
-  });
-}
-
-function processFiles(files: FileList) {
-  return Promise.all(Array.from(files).map(processFile));
-}
-
-function FilesInfo({
-  filesInfo,
-}: {
-  filesInfo: { name: string; size: number; type: string }[];
-}) {
-  if (filesInfo.length === 0) {
-    return null;
-  }
-  return (
-    <ul className="file-info">
-      {filesInfo.map((fileInfo, key) => {
-        const { name, size, type } = fileInfo;
-        return (
-          <li key={key}>
-            <strong>{name}</strong> ({type}, {size} bytes)
-          </li>
-        );
-      })}
-    </ul>
-  );
-}
-
-function extractFileInfo(dataURLs: string[]) {
-  return dataURLs
-    .filter((dataURL) => typeof dataURL !== "undefined")
-    .map((dataURL) => {
-      const { blob, name } = dataURItoBlob(dataURL);
-      return {
-        name: name,
-        size: blob.size,
-        type: blob.type,
-      };
-    });
-}
-
-/**
- *  The `FileWidget` is a widget for rendering file upload fields.
- *  It is typically used with a string property with data-url format.
- */
-function FileWidget<T, F extends GenericObjectType = any>({
-  multiple,
-  id,
-  readonly,
-  disabled,
-  onChange,
-  value,
-  autofocus = false,
-  options,
-}: WidgetProps<T, F>) {
-  const extractedFilesInfo = useMemo(
-    () =>
-      Array.isArray(value) ? extractFileInfo(value) : extractFileInfo([value]),
-    [value]
-  );
-  const [filesInfo, setFilesInfo] =
-    useState<FileInfoType[]>(extractedFilesInfo);
-
-  const handleChange = useCallback(
-    (event: ChangeEvent<HTMLInputElement>) => {
-      if (!event.target.files) {
-        return;
-      }
-      processFiles(event.target.files).then((filesInfoEvent) => {
-        setFilesInfo(filesInfoEvent);
-        const newValue = filesInfoEvent.map((fileInfo) => fileInfo.dataURL);
-        if (multiple) {
-          onChange(newValue);
-        } else {
-          onChange(newValue[0]);
-        }
-      });
-    },
-    [multiple, onChange]
-  );
-
-  return (
-    <div>
-      <p>
-        <input
-          id={id}
-          type="file"
-          disabled={readonly || disabled}
-          onChange={handleChange}
-          defaultValue=""
-          autoFocus={autofocus}
-          multiple={multiple}
-          accept={options.accept ? String(options.accept) : undefined}
-        />
-      </p>
-      <FilesInfo filesInfo={filesInfo} />
-    </div>
-  );
-}
-
-export default FileWidget;
+import React, { ChangeEvent, useCallback, useMemo, useState } from "react";
+
+import type { WidgetProps, GenericObjectType } from "@rjsf/utils";
+import { dataURItoBlob } from "@rjsf/utils";
+
+function addNameToDataURL(dataURL: string, name: string) {
+  if (dataURL === null) {
+    return null;
+  }
+  return dataURL.replace(";base64", `;name=${encodeURIComponent(name)};base64`);
+}
+
+type FileInfoType = {
+  dataURL?: string | null;
+  name: string;
+  size: number;
+  type: string;
+};
+
+function processFile(file: File): Promise<FileInfoType> {
+  const { name, size, type } = file;
+  return new Promise((resolve, reject) => {
+    const reader = new window.FileReader();
+    reader.onerror = reject;
+    reader.onload = (event) => {
+      if (typeof event.target?.result === "string") {
+        resolve({
+          dataURL: addNameToDataURL(event.target.result, name),
+          name,
+          size,
+          type,
+        });
+      } else {
+        resolve({
+          dataURL: null,
+          name,
+          size,
+          type,
+        });
+      }
+    };
+    reader.readAsDataURL(file);
+  });
+}
+
+function processFiles(files: FileList) {
+  return Promise.all(Array.from(files).map(processFile));
+}
+
+function FilesInfo({
+  filesInfo,
+}: {
+  filesInfo: { name: string; size: number; type: string }[];
+}) {
+  if (filesInfo.length === 0) {
+    return null;
+  }
+  return (
+    <ul className="file-info">
+      {filesInfo.map((fileInfo, key) => {
+        const { name, size, type } = fileInfo;
+        return (
+          <li key={key}>
+            <strong>{name}</strong> ({type}, {size} bytes)
+          </li>
+        );
+      })}
+    </ul>
+  );
+}
+
+function extractFileInfo(dataURLs: string[]) {
+  return dataURLs
+    .filter((dataURL) => typeof dataURL !== "undefined")
+    .map((dataURL) => {
+      const { blob, name } = dataURItoBlob(dataURL);
+      return {
+        name: name,
+        size: blob.size,
+        type: blob.type,
+      };
+    });
+}
+
+/**
+ *  The `FileWidget` is a widget for rendering file upload fields.
+ *  It is typically used with a string property with data-url format.
+ */
+function FileWidget<T, F extends GenericObjectType = any>({
+  multiple,
+  id,
+  readonly,
+  disabled,
+  onChange,
+  value,
+  autofocus = false,
+  options,
+}: WidgetProps<T, F>) {
+  const extractedFilesInfo = useMemo(
+    () =>
+      Array.isArray(value) ? extractFileInfo(value) : extractFileInfo([value]),
+    [value]
+  );
+  const [filesInfo, setFilesInfo] =
+    useState<FileInfoType[]>(extractedFilesInfo);
+
+  const handleChange = useCallback(
+    (event: ChangeEvent<HTMLInputElement>) => {
+      if (!event.target.files) {
+        return;
+      }
+      processFiles(event.target.files).then((filesInfoEvent) => {
+        setFilesInfo(filesInfoEvent);
+        const newValue = filesInfoEvent.map((fileInfo) => fileInfo.dataURL);
+        if (multiple) {
+          onChange(newValue);
+        } else {
+          onChange(newValue[0]);
+        }
+      });
+    },
+    [multiple, onChange]
+  );
+
+  return (
+    <div>
+      <p>
+        <input
+          id={id}
+          type="file"
+          disabled={readonly || disabled}
+          onChange={handleChange}
+          defaultValue=""
+          autoFocus={autofocus}
+          multiple={multiple}
+          accept={options.accept ? String(options.accept) : undefined}
+        />
+      </p>
+      <FilesInfo filesInfo={filesInfo} />
+    </div>
+  );
+}
+
+export default FileWidget;

package/src/widgets/HiddenWidget.tsx

@@ -1,22 +1,22 @@
-import React from "react";
-import type { WidgetProps, GenericObjectType } from "@rjsf/utils";
-
-/** The `HiddenWidget` is a widget for rendering a hidden input field.
- *  It is typically used by setting type to "hidden".
- *
- * @param props - The `WidgetProps` for this component
- */
-function HiddenWidget<T = any, F extends GenericObjectType = any>({
-  id,
-  value,
-}: WidgetProps<T, F>) {
-  return (
-    <input
-      type="hidden"
-      id={id}
-      value={typeof value === "undefined" ? "" : value}
-    />
-  );
-}
-
-export default HiddenWidget;
+import React from "react";
+import type { WidgetProps, GenericObjectType } from "@rjsf/utils";
+
+/** The `HiddenWidget` is a widget for rendering a hidden input field.
+ *  It is typically used by setting type to "hidden".
+ *
+ * @param props - The `WidgetProps` for this component
+ */
+function HiddenWidget<T = any, F extends GenericObjectType = any>({
+  id,
+  value,
+}: WidgetProps<T, F>) {
+  return (
+    <input
+      type="hidden"
+      id={id}
+      value={typeof value === "undefined" ? "" : value}
+    />
+  );
+}
+
+export default HiddenWidget;

package/src/widgets/PasswordWidget.tsx

@@ -1,20 +1,20 @@
-import React from "react";
-import type { WidgetProps, GenericObjectType } from "@rjsf/utils";
-import { getTemplate } from "@rjsf/utils";
-
-/** The `PasswordWidget` component uses the `BaseInputTemplate` changing the type to `password`.
- *
- * @param props - The `WidgetProps` for this component
- */
-export default function PasswordWidget<
-  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="password" {...props} />;
-}
+import React from "react";
+import type { WidgetProps, GenericObjectType } from "@rjsf/utils";
+import { getTemplate } from "@rjsf/utils";
+
+/** The `PasswordWidget` component uses the `BaseInputTemplate` changing the type to `password`.
+ *
+ * @param props - The `WidgetProps` for this component
+ */
+export default function PasswordWidget<
+  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="password" {...props} />;
+}

package/src/widgets/RadioWidget.tsx

@@ -1,87 +1,87 @@
-import React, { FocusEvent, useCallback } from "react";
-import type { WidgetProps, GenericObjectType } from "@rjsf/utils";
-
-/** The `RadioWidget` is a widget for rendering a radio group.
- *  It is typically used with a string property constrained with enum options.
- *
- * @param props - The `WidgetProps` for this component
- */
-function RadioWidget<T = any, F extends GenericObjectType = any>({
-  options,
-  value,
-  required,
-  disabled,
-  readonly,
-  autofocus = false,
-  onBlur,
-  onFocus,
-  onChange,
-  id,
-}: WidgetProps<T, F>) {
-  // Generating a unique field name to identify this set of radio buttons
-  const name = Math.random().toString();
-  const { enumOptions, enumDisabled, inline } = options;
-  // checked={checked} has been moved above name={name}, As mentioned in #349;
-  // this is a temporary fix for radio button rendering bug in React, facebook/react#7630.
-
-  const handleBlur = useCallback(
-    (event: FocusEvent<HTMLInputElement>) => onBlur(id, event.target.value),
-    [onBlur, id]
-  );
-
-  const handleFocus = useCallback(
-    (event: FocusEvent<HTMLInputElement>) => onFocus(id, event.target.value),
-    [onFocus, id]
-  );
-
-  return (
-    <div
-      className={`flex field-radio-group ${
-        inline ? "flex-row gap-2" : "flex-col"
-      }`}
-      id={id}
-    >
-      {Array.isArray(enumOptions) &&
-        enumOptions.map((option, i) => {
-          const checked = option.value === value;
-          const itemDisabled =
-            enumDisabled && enumDisabled.indexOf(option.value) != -1;
-          const disabledCls =
-            disabled || itemDisabled || readonly ? "disabled" : "";
-
-          const handleChange = () => onChange(option.value);
-
-          const radio = (
-            <>
-              <input
-                type="radio"
-                className="radio radio-secondary"
-                id={`${id}_${i}`}
-                checked={checked}
-                name={id}
-                required={required}
-                value={option.value}
-                disabled={disabled || itemDisabled || readonly}
-                autoFocus={autofocus && i === 0}
-                onChange={handleChange}
-                onBlur={handleBlur}
-                onFocus={handleFocus}
-              />
-              <span className="label-text">{option.label}</span>
-            </>
-          );
-
-          return (
-            <label
-              key={i}
-              className={`label justify-start gap-2 ${disabledCls}`}
-            >
-              {radio}
-            </label>
-          );
-        })}
-    </div>
-  );
-}
-
-export default RadioWidget;
+import React, { FocusEvent, useCallback } from "react";
+import type { WidgetProps, GenericObjectType } from "@rjsf/utils";
+
+/** The `RadioWidget` is a widget for rendering a radio group.
+ *  It is typically used with a string property constrained with enum options.
+ *
+ * @param props - The `WidgetProps` for this component
+ */
+function RadioWidget<T = any, F extends GenericObjectType = any>({
+  options,
+  value,
+  required,
+  disabled,
+  readonly,
+  autofocus = false,
+  onBlur,
+  onFocus,
+  onChange,
+  id,
+}: WidgetProps<T, F>) {
+  // Generating a unique field name to identify this set of radio buttons
+  const name = Math.random().toString();
+  const { enumOptions, enumDisabled, inline } = options;
+  // checked={checked} has been moved above name={name}, As mentioned in #349;
+  // this is a temporary fix for radio button rendering bug in React, facebook/react#7630.
+
+  const handleBlur = useCallback(
+    (event: FocusEvent<HTMLInputElement>) => onBlur(id, event.target.value),
+    [onBlur, id]
+  );
+
+  const handleFocus = useCallback(
+    (event: FocusEvent<HTMLInputElement>) => onFocus(id, event.target.value),
+    [onFocus, id]
+  );
+
+  return (
+    <div
+      className={`flex field-radio-group ${
+        inline ? "flex-row gap-2" : "flex-col"
+      }`}
+      id={id}
+    >
+      {Array.isArray(enumOptions) &&
+        enumOptions.map((option, i) => {
+          const checked = option.value === value;
+          const itemDisabled =
+            enumDisabled && enumDisabled.indexOf(option.value) != -1;
+          const disabledCls =
+            disabled || itemDisabled || readonly ? "disabled" : "";
+
+          const handleChange = () => onChange(option.value);
+
+          const radio = (
+            <>
+              <input
+                type="radio"
+                className="radio radio-secondary"
+                id={`${id}_${i}`}
+                checked={checked}
+                name={id}
+                required={required}
+                value={option.value}
+                disabled={disabled || itemDisabled || readonly}
+                autoFocus={autofocus && i === 0}
+                onChange={handleChange}
+                onBlur={handleBlur}
+                onFocus={handleFocus}
+              />
+              <span className="label-text">{option.label}</span>
+            </>
+          );
+
+          return (
+            <label
+              key={i}
+              className={`label justify-start gap-2 ${disabledCls}`}
+            >
+              {radio}
+            </label>
+          );
+        })}
+    </div>
+  );
+}
+
+export default RadioWidget;

package/src/widgets/RangeWidget.tsx

@@ -1,24 +1,24 @@
-import React from "react";
-import type { WidgetProps, GenericObjectType } from "@rjsf/utils";
-
-/** The `RangeWidget` component uses the `BaseInputTemplate` changing the type to `range` and wrapping the result
- * in a div, with the value along side it.
- *
- * @param props - The `WidgetProps` for this component
- */
-export default function RangeWidget<T = any, F extends GenericObjectType = any>(
-  props: WidgetProps<T, F>
-) {
-  const {
-    value,
-    registry: {
-      templates: { BaseInputTemplate },
-    },
-  } = props;
-  return (
-    <div className="field-range-wrapper">
-      <BaseInputTemplate type="range" {...props} />
-      <span className="range-view">{value}</span>
-    </div>
-  );
-}
+import React from "react";
+import type { WidgetProps, GenericObjectType } from "@rjsf/utils";
+
+/** The `RangeWidget` component uses the `BaseInputTemplate` changing the type to `range` and wrapping the result
+ * in a div, with the value along side it.
+ *
+ * @param props - The `WidgetProps` for this component
+ */
+export default function RangeWidget<T = any, F extends GenericObjectType = any>(
+  props: WidgetProps<T, F>
+) {
+  const {
+    value,
+    registry: {
+      templates: { BaseInputTemplate },
+    },
+  } = props;
+  return (
+    <div className="field-range-wrapper">
+      <BaseInputTemplate type="range" {...props} />
+      <span className="range-view">{value}</span>
+    </div>
+  );
+}