@reykjavik/hanna-react 0.10.64 → 0.10.65

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/CHANGELOG.md +3 -1
  2. package/FileInput.js +33 -22
  3. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -4,7 +4,7 @@
4
4
 
5
5
  - ... <!-- Add new lines here. -->
6
6
 
7
- ## 0.10.63 – 0.10.64
7
+ ## 0.10.63 – 0.10.65
8
8
 
9
9
  _2022-08-29_
10
10
 
@@ -14,6 +14,8 @@ _2022-08-29_
14
14
  - feat: Deprecate prop `dropzoneProps`
15
15
  - fix: report deleted when adding files in single-file mode
16
16
  - fix: Make `dropZoneProps` optional, as originally indented
17
+ - fix: Re-populate the file input on `value` prop change
18
+ - feat: Explicitly skip rendering input element when `name` is missing
17
19
  - fix: Hide `Carousel` mouse-cursor scroll controls at start/end positions
18
20
  - fix: Pass `id` and other HTML props to static (span) `TagPill`s
19
21
 
package/FileInput.js CHANGED
@@ -28,7 +28,8 @@ const FileInput = (props) => {
28
28
  (0, _FileInput_utils_1.addPreview)(file);
29
29
  return file;
30
30
  });
31
- addFiles(acceptedFiles); // eslint-disable-line
31
+ // eslint-disable-next-line @typescript-eslint/no-use-before-define
32
+ addFiles(acceptedFiles);
32
33
  setIsHover(false);
33
34
  },
34
35
  onDropRejected: (rejectedFiles) => {
@@ -56,45 +57,55 @@ const FileInput = (props) => {
56
57
  multiple,
57
58
  accept,
58
59
  });
59
- // Add previews on incoming files
60
+ // Synchronoyusly add previews on incoming files
60
61
  // (NOTE: `addPreview` ignores files that already have preview.)
61
62
  files.forEach(_FileInput_utils_1.addPreview);
62
- (0, react_1.useEffect)(() => () => {
63
- // Make sure to revoke the data uris on unmount to avoid memory leaks
64
- files.forEach(_FileInput_utils_1.releasePreview);
63
+ (0, react_1.useEffect)(() => {
64
+ if (fileInput.current) {
65
+ fileInput.current.files = arrayToFileList(files);
66
+ }
67
+ return () => {
68
+ // Make sure to revoke the data uris on unmount to avoid memory leaks
69
+ files.forEach(_FileInput_utils_1.releasePreview);
70
+ };
65
71
  }, [files]);
66
72
  const removeFile = (removeTarget) => {
73
+ const deleted = [];
74
+ const targetName = typeof removeTarget !== 'string' ? removeTarget.name : removeTarget;
75
+ const fileList = files.filter((file) => {
76
+ if (file.name !== targetName) {
77
+ return true;
78
+ }
79
+ deleted.push(file);
80
+ (0, _FileInput_utils_1.releasePreview)(file);
81
+ return false;
82
+ });
67
83
  if (fileInput.current) {
68
- const deleted = [];
69
- const targetName = typeof removeTarget !== 'string' ? removeTarget.name : removeTarget;
70
- const newFileList = files.filter((file) => {
71
- if (file.name !== targetName) {
72
- return true;
73
- }
74
- deleted.push(file);
75
- (0, _FileInput_utils_1.releasePreview)(file);
76
- return false;
77
- });
78
- fileInput.current.files = arrayToFileList(newFileList);
79
- onFilesUpdated(newFileList, { deleted });
84
+ fileInput.current.files = arrayToFileList(fileList);
80
85
  }
86
+ onFilesUpdated(fileList, { deleted });
81
87
  };
82
88
  const addFiles = (added) => {
89
+ const { fileList, diff } = (0, _FileInput_utils_1.getFileListUpdate)(files, added, !multiple);
83
90
  if (fileInput.current) {
84
- const { fileList, diff } = (0, _FileInput_utils_1.getFileListUpdate)(files, added, !multiple);
85
91
  fileInput.current.files = arrayToFileList(fileList);
86
- onFilesUpdated(fileList, diff);
87
92
  }
88
93
  if (inputRef.current) {
89
94
  // Empty on every add
90
95
  inputRef.current.files = arrayToFileList([]);
91
96
  }
97
+ onFilesUpdated(fileList, diff);
92
98
  };
93
99
  return (react_1.default.createElement(FormField_1.default, { className: (0, getBemClass_1.default)('FileInput', [multiple && 'multi'], className), label: label, id: domid + '-fake', LabelTag: "h4", assistText: assistText, hideLabel: hideLabel, disabled: disabled, invalid: invalid, errorMessage: errorMessage, required: required, reqText: reqText, renderInput: (className, inputProps /* , addFocusProps */) => {
94
100
  return (react_1.default.createElement("div", { className: className.control, ref: fileInputWrapper },
95
- react_1.default.createElement("input", { className: "FileInput__input", name: inputElementProps.name, id: domid, ref: fileInput, type: "file", style: { display: 'none' }, multiple: multiple || undefined, required: inputProps.required }),
96
- ' ',
97
- react_1.default.createElement("input", Object.assign({ className: "FileInput__input--fake" }, getInputProps(), { tabIndex: undefined, style: undefined, multiple: multiple || undefined }, inputProps, { required: undefined })),
101
+ // Explicitly skip rendering of input element if no
102
+ // name prop is provided. This is implicitly what the
103
+ // browser does on form submit.
104
+ // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name
105
+ inputElementProps.name ? (react_1.default.createElement("input", { className: "FileInput__input", name: inputElementProps.name, id: domid, ref: fileInput, type: "file", style: { display: 'none' }, multiple: multiple || undefined, required: inputProps.required })) : null,
106
+ react_1.default.createElement("input", Object.assign({
107
+ // fa
108
+ className: "FileInput__input--fake" }, getInputProps(), { tabIndex: undefined, style: undefined, multiple: multiple || undefined }, inputProps, { required: undefined })),
98
109
  ' ',
99
110
  react_1.default.createElement("div", Object.assign({ className: (0, getBemClass_1.default)('FileInput__dropzone', [isHover && 'highlight']) }, getRootProps({ isDragReject }), { tabIndex: undefined }),
100
111
  react_1.default.createElement("p", { className: "FileInput__droptext" }, dropzoneText)),
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@reykjavik/hanna-react",
3
- "version": "0.10.64",
3
+ "version": "0.10.65",
4
4
  "author": "Reykjavík (http://www.reykjavik.is)",
5
5
  "contributors": [
6
6
  "Hugsmiðjan ehf (http://www.hugsmidjan.is)",