fix: Fixed FileWidget to work across all themes

Fixes rjsf-team#2095 by making `FileWidget` use the `BaseInputTemplate` for rendering the file input - Updated `@rjsf/utils` to fix two small bugs found while fixing the issue: - `dataURItoBlob()` was updated to deal with parsing errors in `atob()` with malformed URL and to decode the name to a human-readable string - Added additional tests to verify the fixes - `replaceStringParameters()` was updated to split using a regex to deal with situations where the params themselves contain replaceable character identifiers - Added an additional test to verify the bug was fixed - Updated `@rjsf/core` to switch `FileWidget` so that it uses the `BaseInputTemplate` to render the input, passing a new `onChangeOverride` function to deal with file events - Updated `BaseInputTemplate` to favor `onChangeOverride` rather than the default `onChange` handler it builds - Updated the `BaseInputTemplate` in all of the themes to also favor `onChangeOverride` if specified over the default `onChange` handler - Updated the snapshots in all themes to reflect the improved `FileWidget` use of `BaseInputTemplate` in all themes - Updated `@rjsf/bootstrap-4` to delete the `FileWidget` in favor of the improved `core` one - Updated `@rjsf/material-ui` and `@rjsf/mui` to have the `BaseInputTemplate` support the automatic `shrink` of the label when the `type` of the input is `date`, `datetime-local` and `file` - Also removed the `DateWidget` and `DateTimeWidget` in both themes since they were only providing the `shrink` behavior which is now encapsulated in `BaseInputTemplate` - Updated the `CHANGELOG.md` file accordingly
heath-freenome · Mar 6, 2023 · 5e88e6c · 5e88e6c
1 parent adcb14f
commit 5e88e6c
Show file tree

Hide file tree

Showing 34 changed files with 559 additions and 384 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -17,11 +17,37 @@ should change the heading of the (upcoming) version to include a major version b
 -->
 # 5.2.1
 
+## @rjsf/antd
+- Updated `BaseInputTemplate` to favor the special `onChangeOverride` provided by the `core` `FileWidget`
+
+## @rjsf/bootstrap-4
+- Updated `BaseInputTemplate` to favor the special `onChangeOverride` provided by the `core` `FileWidget`, deleting the theme's `FileWidget`, fixing [#2095](https://github.com/rjsf-team/react-jsonschema-form/issues/2095)
+
+## @rjsf/chakra-ui
+- Updated `BaseInputTemplate` to favor the special `onChangeOverride` provided by the `core` `FileWidget`
+
 ## @rjsf/core
 - Ensure that `name` is consistently passed to all `Widgets` through the field components, fixing [#1763](https://github.com/rjsf-team/react-jsonschema-form/issues/1763)
+- Updated the `FileWidget` to render the input using the `BaseInputTemplate` passing a special `onChangeOverride` function to deal with the file events, fixing [#2095](https://github.com/rjsf-team/react-jsonschema-form/issues/2095)
+
+## @rjsf/fluent-ui
+- Updated `BaseInputTemplate` to favor the special `onChangeOverride` provided by the `core` `FileWidget`
+
+## @rjsf/material-ui
+- Updated `BaseInputTemplate` to favor the special `onChangeOverride` provided by the `core` `FileWidget` and to support automatically shrinking the label for the `date`, `datetime-local` and `file` types
+  - Removed the `DateWidget` and `DateTimeWidget` since they were only created to provide the label shrinking property
+
+## @rjsf/mui
+- Updated `BaseInputTemplate` to favor the special `onChangeOverride` provided by the `core` `FileWidget` and to support automatically shrinking the label for the `date`, `datetime-local` and `file` types
+  - Removed the `DateWidget` and `DateTimeWidget` since they were only created to provide the label shrinking property
+
+## @rjsf/semantic-ui
+- Updated `BaseInputTemplate` to favor the special `onChangeOverride` provided by the `core` `FileWidget`
 
 ## @rjsf/utils
 - Added the `name` prop to the `WidgetProps` type, fixing [#1763](https://github.com/rjsf-team/react-jsonschema-form/issues/1763)
+- Fixed `dataURItoBlob()` to handle the exception thrown by `atob()` when it is passed a malformed URL, returning an `blob` that indicates the error in the `type` prop
+- Fixed `replaceStringParameters()` to improve the replaceable parameters logic so that it works properly when a parameter also contains a replaceable parameter identifier
 
 ## Dev / docs / playground
 - Updated the `custom-widgets-fields` documentation to ensure the new `WidgetProps` `name` prop is documented

diff --git a/packages/antd/src/templates/BaseInputTemplate/index.tsx b/packages/antd/src/templates/BaseInputTemplate/index.tsx
@@ -32,6 +32,7 @@ export default function BaseInputTemplate<
     id,
     onBlur,
     onChange,
+    onChangeOverride,
     onFocus,
     options,
     placeholder,
@@ -45,8 +46,10 @@ export default function BaseInputTemplate<
 
   const handleNumberChange = (nextValue: number | null) => onChange(nextValue);
 
-  const handleTextChange = ({ target }: React.ChangeEvent<HTMLInputElement>) =>
-    onChange(target.value === "" ? options.emptyValue : target.value);
+  const handleTextChange = onChangeOverride
+    ? onChangeOverride
+    : ({ target }: React.ChangeEvent<HTMLInputElement>) =>
+        onChange(target.value === "" ? options.emptyValue : target.value);
 
   const handleBlur = ({ target }: React.FocusEvent<HTMLInputElement>) =>
     onBlur(id, target.value);

diff --git a/packages/antd/test/__snapshots__/Form.test.tsx.snap b/packages/antd/test/__snapshots__/Form.test.tsx.snap
@@ -1602,18 +1602,24 @@ exports[`single fields string field format data-url 1`] = `
     className="form-group field field-string"
   >
     <div>
-      <p>
-        <input
-          aria-describedby="root__error root__description root__help"
-          autoFocus={false}
-          defaultValue=""
-          disabled={false}
-          id="root"
-          name="root"
-          onChange={[Function]}
-          type="file"
-        />
-      </p>
+      <input
+        aria-describedby="root__error root__description root__help"
+        className="ant-input"
+        id="root"
+        name="root"
+        onBlur={[Function]}
+        onChange={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        placeholder=""
+        style={
+          Object {
+            "width": "100%",
+          }
+        }
+        type="file"
+        value=""
+      />
     </div>
   </div>
   <button

diff --git a/packages/bootstrap-4/src/BaseInputTemplate/BaseInputTemplate.tsx b/packages/bootstrap-4/src/BaseInputTemplate/BaseInputTemplate.tsx
@@ -22,6 +22,7 @@ export default function BaseInputTemplate<
   type,
   value,
   onChange,
+  onChangeOverride,
   onBlur,
   onFocus,
   autofocus,
@@ -60,7 +61,7 @@ export default function BaseInputTemplate<
         list={schema.examples ? examplesId<T>(id) : undefined}
         {...inputProps}
         value={value || value === 0 ? value : ""}
-        onChange={_onChange}
+        onChange={onChangeOverride || _onChange}
         onBlur={_onBlur}
         onFocus={_onFocus}
         aria-describedby={ariaDescribedByIds<T>(id, !!schema.examples)}

diff --git a/packages/bootstrap-4/src/FileWidget/FileWidget.tsx b/packages/bootstrap-4/src/FileWidget/FileWidget.tsx
diff --git a/packages/bootstrap-4/src/FileWidget/index.ts b/packages/bootstrap-4/src/FileWidget/index.ts
diff --git a/packages/bootstrap-4/src/Widgets/Widgets.ts b/packages/bootstrap-4/src/Widgets/Widgets.ts
@@ -4,7 +4,6 @@ import RadioWidget from "../RadioWidget/RadioWidget";
 import RangeWidget from "../RangeWidget/RangeWidget";
 import SelectWidget from "../SelectWidget/SelectWidget";
 import TextareaWidget from "../TextareaWidget/TextareaWidget";
-import FileWidget from "../FileWidget/FileWidget";
 import {
   FormContextType,
   RegistryWidgetsType,
@@ -24,7 +23,6 @@ export function generateWidgets<
     RangeWidget,
     SelectWidget,
     TextareaWidget,
-    FileWidget,
   };
 }
 

diff --git a/packages/bootstrap-4/test/__snapshots__/Form.test.tsx.snap b/packages/bootstrap-4/test/__snapshots__/Form.test.tsx.snap
@@ -1211,21 +1211,23 @@ exports[`single fields string field format data-url 1`] = `
       >
         
       </label>
-      <input
-        aria-describedby="root__error root__description root__help"
-        autoFocus={false}
-        className="form-control-file"
-        disabled={false}
-        id="root"
-        name="root"
-        onBlur={[Function]}
-        onChange={[Function]}
-        onFocus={[Function]}
-        placeholder=""
-        readOnly={false}
-        type="file"
-        value=""
-      />
+      <div>
+        <input
+          aria-describedby="root__error root__description root__help"
+          autoFocus={false}
+          className="form-control-file"
+          disabled={false}
+          id="root"
+          name="root"
+          onBlur={[Function]}
+          onChange={[Function]}
+          onFocus={[Function]}
+          placeholder=""
+          readOnly={false}
+          type="file"
+          value=""
+        />
+      </div>
       
     </div>
   </div>

diff --git a/packages/chakra-ui/src/BaseInputTemplate/BaseInputTemplate.tsx b/packages/chakra-ui/src/BaseInputTemplate/BaseInputTemplate.tsx
@@ -23,6 +23,7 @@ export default function BaseInputTemplate<
     schema,
     uiSchema,
     onChange,
+    onChangeOverride,
     onBlur,
     onFocus,
     options,
@@ -70,7 +71,7 @@ export default function BaseInputTemplate<
         id={id}
         name={id}
         value={value || value === 0 ? value : ""}
-        onChange={_onChange}
+        onChange={onChangeOverride || _onChange}
         onBlur={_onBlur}
         onFocus={_onFocus}
         autoFocus={autofocus}

diff --git a/packages/chakra-ui/test/__snapshots__/Form.test.tsx.snap b/packages/chakra-ui/test/__snapshots__/Form.test.tsx.snap
@@ -4778,10 +4778,14 @@ exports[`single fields slider field 1`] = `
 
 exports[`single fields string field format data-url 1`] = `
 .emotion-1 {
+  margin-bottom: 1px;
+}
+
+.emotion-3 {
   margin-top: 3px;
 }
 
-.emotion-2 {
+.emotion-4 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -4823,26 +4827,35 @@ exports[`single fields string field format data-url 1`] = `
       role="group"
     >
       <div>
-        <p>
+        <div
+          className="chakra-form-control emotion-1"
+          role="group"
+        >
           <input
             aria-describedby="root__error root__description root__help"
             autoFocus={false}
-            defaultValue=""
+            className="chakra-input emotion-0"
             disabled={false}
             id="root"
             name="root"
+            onBlur={[Function]}
             onChange={[Function]}
+            onFocus={[Function]}
+            placeholder=""
+            readOnly={false}
+            required={false}
             type="file"
+            value=""
           />
-        </p>
+        </div>
       </div>
     </div>
   </div>
   <div
-    className="emotion-1"
+    className="emotion-3"
   >
     <button
-      className="chakra-button emotion-2"
+      className="chakra-button emotion-4"
       disabled={false}
       type="submit"
     >

diff --git a/packages/core/src/components/templates/BaseInputTemplate.tsx b/packages/core/src/components/templates/BaseInputTemplate.tsx
@@ -30,6 +30,7 @@ export default function BaseInputTemplate<
     onBlur,
     onFocus,
     onChange,
+    onChangeOverride,
     options,
     schema,
     uiSchema,
@@ -86,7 +87,7 @@ export default function BaseInputTemplate<
         value={inputValue}
         {...inputProps}
         list={schema.examples ? examplesId<T>(id) : undefined}
-        onChange={_onChange}
+        onChange={onChangeOverride || _onChange}
         onBlur={_onBlur}
         onFocus={_onFocus}
         aria-describedby={ariaDescribedByIds<T>(id, !!schema.examples)}

diff --git a/packages/core/src/components/widgets/FileWidget.tsx b/packages/core/src/components/widgets/FileWidget.tsx
@@ -1,7 +1,7 @@
 import { ChangeEvent, useCallback, useMemo, useState } from "react";
 import {
-  ariaDescribedByIds,
   dataURItoBlob,
+  getTemplate,
   FormContextType,
   Registry,
   RJSFSchema,
@@ -92,7 +92,7 @@ function FilesInfo<
 
 function extractFileInfo(dataURLs: string[]) {
   return dataURLs
-    .filter((dataURL) => typeof dataURL !== "undefined")
+    .filter((dataURL) => dataURL)
     .map((dataURL) => {
       const { blob, name } = dataURItoBlob(dataURL);
       return {
@@ -111,17 +111,14 @@ function FileWidget<
   T = any,
   S extends StrictRJSFSchema = RJSFSchema,
   F extends FormContextType = any
->({
-  multiple,
-  id,
-  readonly,
-  disabled,
-  onChange,
-  value,
-  autofocus = false,
-  options,
-  registry,
-}: WidgetProps<T, S, F>) {
+>(props: WidgetProps<T, S, F>) {
+  const { disabled, readonly, multiple, onChange, value, options, registry } =
+    props;
+  const BaseInputTemplate = getTemplate<"BaseInputTemplate", T, S, F>(
+    "BaseInputTemplate",
+    registry,
+    options
+  );
   const extractedFilesInfo = useMemo(
     () =>
       Array.isArray(value) ? extractFileInfo(value) : extractFileInfo([value]),
@@ -150,20 +147,14 @@ function FileWidget<
 
   return (
     <div>
-      <p>
-        <input
-          id={id}
-          name={id}
-          type="file"
-          disabled={readonly || disabled}
-          onChange={handleChange}
-          defaultValue=""
-          autoFocus={autofocus}
-          multiple={multiple}
-          accept={options.accept ? String(options.accept) : undefined}
-          aria-describedby={ariaDescribedByIds<T>(id)}
-        />
-      </p>
+      <BaseInputTemplate
+        {...props}
+        disabled={disabled || readonly}
+        type="file"
+        onChangeOverride={handleChange}
+        value=""
+        accept={options.accept ? String(options.accept) : undefined}
+      />
       <FilesInfo<T, S, F> filesInfo={filesInfo} registry={registry} />
     </div>
   );

diff --git a/packages/fluent-ui/src/BaseInputTemplate/BaseInputTemplate.tsx b/packages/fluent-ui/src/BaseInputTemplate/BaseInputTemplate.tsx
@@ -64,6 +64,7 @@ export default function BaseInputTemplate<
   label,
   value,
   onChange,
+  onChangeOverride,
   onBlur,
   onFocus,
   autofocus,
@@ -102,7 +103,7 @@ export default function BaseInputTemplate<
         // name={name}
         {...inputProps}
         value={value || value === 0 ? value : ""}
-        onChange={_onChange as any}
+        onChange={onChangeOverride || _onChange}
         onBlur={_onBlur}
         onFocus={_onFocus}
         errorMessage={(rawErrors || []).join("\n")}