@rjsf/utils 6.0.0-beta.22 → 6.0.0-beta.23

package/dist/index.cjs

@@ -41,6 +41,7 @@ __export(index_exports, {
   DEFINITIONS_KEY: () => DEFINITIONS_KEY,
   DEPENDENCIES_KEY: () => DEPENDENCIES_KEY,
   DISCRIMINATOR_PATH: () => DISCRIMINATOR_PATH,
+  DateElement: () => DateElement,
   ENUM_KEY: () => ENUM_KEY,
   ERRORS_KEY: () => ERRORS_KEY,
   ErrorSchemaBuilder: () => ErrorSchemaBuilder,
@@ -153,7 +154,9 @@ __export(index_exports, {
   toFieldPathId: () => toFieldPathId,
   toPathSchema: () => toPathSchema,
   unwrapErrorHandler: () => unwrapErrorHandler,
+  useAltDateWidgetProps: () => useAltDateWidgetProps,
   useDeepCompareMemo: () => useDeepCompareMemo,
+  useFileWidgetProps: () => useFileWidgetProps,
   utcToLocal: () => utcToLocal,
   validationDataMerge: () => validationDataMerge,
   withIdRefPrefix: () => withIdRefPrefix
@@ -3414,17 +3417,209 @@ function unwrapErrorHandler(errorHandler) {
   }, {});
 }
 
-// src/useDeepCompareMemo.ts
+// src/useAltDateWidgetProps.tsx
 var import_react2 = require("react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function readyForChange(state) {
+  return Object.values(state).every((value) => value !== -1);
+}
+function DateElement(props) {
+  const {
+    className = "form-control",
+    type,
+    range,
+    value,
+    select,
+    rootId,
+    name,
+    disabled,
+    readonly,
+    autofocus,
+    registry,
+    onBlur,
+    onFocus
+  } = props;
+  const id = `${rootId}_${type}`;
+  const { SelectWidget } = registry.widgets;
+  const onChange = (0, import_react2.useCallback)((value2) => select(type, value2), [select, type]);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    SelectWidget,
+    {
+      schema: { type: "integer" },
+      id,
+      name,
+      className,
+      options: { enumOptions: dateRangeOptions(range[0], range[1]) },
+      placeholder: type,
+      value,
+      disabled,
+      readonly,
+      autofocus,
+      onChange,
+      onBlur,
+      onFocus,
+      registry,
+      label: "",
+      "aria-describedby": ariaDescribedByIds(rootId)
+    }
+  );
+}
+function useAltDateWidgetProps(props) {
+  const { time = false, disabled = false, readonly = false, options, onChange, value } = props;
+  const [state, setState] = (0, import_react2.useState)(parseDateString(value, time));
+  (0, import_react2.useEffect)(() => {
+    setState(parseDateString(value, time));
+  }, [time, value]);
+  const handleChange = (0, import_react2.useCallback)(
+    (property, value2) => {
+      const nextState = {
+        ...state,
+        [property]: typeof value2 === "undefined" ? -1 : value2
+      };
+      if (readyForChange(nextState)) {
+        onChange(toDateString(nextState, time));
+      } else {
+        setState(nextState);
+      }
+    },
+    [state, onChange, time]
+  );
+  const handleClear = (0, import_react2.useCallback)(
+    (event) => {
+      event.preventDefault();
+      if (disabled || readonly) {
+        return;
+      }
+      onChange(void 0);
+    },
+    [disabled, readonly, onChange]
+  );
+  const handleSetNow = (0, import_react2.useCallback)(
+    (event) => {
+      event.preventDefault();
+      if (disabled || readonly) {
+        return;
+      }
+      const nextState = parseDateString((/* @__PURE__ */ new Date()).toJSON(), time);
+      onChange(toDateString(nextState, time));
+    },
+    [disabled, readonly, time, onChange]
+  );
+  const elements = (0, import_react2.useMemo)(
+    () => getDateElementProps(
+      state,
+      time,
+      options.yearsRange,
+      options.format
+    ),
+    [state, time, options.yearsRange, options.format]
+  );
+  return { elements, handleChange, handleClear, handleSetNow };
+}
+
+// src/useDeepCompareMemo.ts
+var import_react3 = require("react");
 var import_isEqual3 = __toESM(require("lodash/isEqual"), 1);
 function useDeepCompareMemo(newValue) {
-  const valueRef = (0, import_react2.useRef)(newValue);
+  const valueRef = (0, import_react3.useRef)(newValue);
   if (!(0, import_isEqual3.default)(newValue, valueRef.current)) {
     valueRef.current = newValue;
   }
   return valueRef.current;
 }
 
+// src/useFileWidgetProps.ts
+var import_react4 = require("react");
+function addNameToDataURL(dataURL, name) {
+  return dataURL.replace(";base64", `;name=${encodeURIComponent(name)};base64`);
+}
+function processFile(file) {
+  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) {
+  return Promise.all(Array.from(files).map(processFile));
+}
+function extractFileInfo(dataURLs) {
+  return dataURLs.reduce((acc, dataURL) => {
+    if (!dataURL) {
+      return acc;
+    }
+    try {
+      const { blob, name } = dataURItoBlob(dataURL);
+      return [
+        ...acc,
+        {
+          dataURL,
+          name,
+          size: blob.size,
+          type: blob.type
+        }
+      ];
+    } catch {
+      return acc;
+    }
+  }, []);
+}
+function useFileWidgetProps(value, onChange, multiple = false) {
+  const values = (0, import_react4.useMemo)(() => {
+    if (multiple && value) {
+      return Array.isArray(value) ? value : [value];
+    }
+    return [];
+  }, [value, multiple]);
+  const filesInfo = (0, import_react4.useMemo)(
+    () => Array.isArray(value) ? extractFileInfo(value) : extractFileInfo([value || ""]),
+    [value]
+  );
+  const handleChange = (0, import_react4.useCallback)(
+    (files) => {
+      processFiles(files).then((filesInfoEvent) => {
+        const newValue = filesInfoEvent.map((fileInfo) => fileInfo.dataURL || null);
+        if (multiple) {
+          onChange(values.concat(...newValue));
+        } else {
+          onChange(newValue[0]);
+        }
+      });
+    },
+    [values, multiple, onChange]
+  );
+  const handleRemove = (0, import_react4.useCallback)(
+    (index) => {
+      if (multiple) {
+        const newValue = values.filter((_, i) => i !== index);
+        onChange(newValue);
+      } else {
+        onChange(void 0);
+      }
+    },
+    [values, multiple, onChange]
+  );
+  return { filesInfo, handleChange, handleRemove };
+}
+
 // src/utcToLocal.ts
 function utcToLocal(jsonDate) {
   if (!jsonDate) {
@@ -3536,6 +3731,8 @@ var TranslatableString = /* @__PURE__ */ ((TranslatableString2) => {
   TranslatableString2["OptionalObjectAdd"] = "Add data for optional field";
   TranslatableString2["OptionalObjectRemove"] = "Remove data for optional field";
   TranslatableString2["OptionalObjectEmptyMsg"] = "No data for optional field";
+  TranslatableString2["Type"] = "Type";
+  TranslatableString2["Value"] = "Value";
   TranslatableString2["UnknownFieldType"] = "Unknown field type %1";
   TranslatableString2["OptionPrefix"] = "Option %1";
   TranslatableString2["TitleOptionPrefix"] = "%1 option %2";