@deviceinsight/ng-ui-components 6.23.0 → 6.25.0

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 (36) hide show
  1. package/lib/cjs/assets/style.css +1 -1
  2. package/lib/cjs/components/input/DateTimeInput.d.ts.map +1 -1
  3. package/lib/cjs/components/input/DateTimeInput.js +35 -5
  4. package/lib/cjs/components/input/__tests__/DateTimeInput.spec.js +21 -0
  5. package/lib/cjs/components/reactable/helpers/ReactableTable.d.ts.map +1 -1
  6. package/lib/cjs/components/reactable/helpers/ReactableTable.js +22 -10
  7. package/lib/cjs/components/upload/FileUpload.d.ts +23 -9
  8. package/lib/cjs/components/upload/FileUpload.d.ts.map +1 -1
  9. package/lib/cjs/components/upload/FileUpload.js +32 -24
  10. package/lib/cjs/components/upload/ImageUpload.d.ts +3 -2
  11. package/lib/cjs/components/upload/ImageUpload.d.ts.map +1 -1
  12. package/lib/cjs/components/upload/ImageUpload.js +13 -6
  13. package/lib/esm/assets/style.css +1 -1
  14. package/lib/esm/components/input/DateTimeInput.d.ts.map +1 -1
  15. package/lib/esm/components/input/DateTimeInput.js +35 -5
  16. package/lib/esm/components/input/__tests__/DateTimeInput.spec.js +22 -1
  17. package/lib/esm/components/reactable/helpers/ReactableTable.d.ts.map +1 -1
  18. package/lib/esm/components/reactable/helpers/ReactableTable.js +22 -10
  19. package/lib/esm/components/upload/FileUpload.d.ts +23 -9
  20. package/lib/esm/components/upload/FileUpload.d.ts.map +1 -1
  21. package/lib/esm/components/upload/FileUpload.js +32 -24
  22. package/lib/esm/components/upload/ImageUpload.d.ts +3 -2
  23. package/lib/esm/components/upload/ImageUpload.d.ts.map +1 -1
  24. package/lib/esm/components/upload/ImageUpload.js +13 -6
  25. package/lib/esm/src/components/input/DateTimeInput.d.ts.map +1 -1
  26. package/lib/esm/src/components/input/DateTimeInput.js +35 -5
  27. package/lib/esm/src/components/input/__tests__/DateTimeInput.spec.js +22 -1
  28. package/lib/esm/src/components/reactable/helpers/ReactableTable.d.ts.map +1 -1
  29. package/lib/esm/src/components/reactable/helpers/ReactableTable.js +22 -10
  30. package/lib/esm/src/components/upload/FileUpload.d.ts +23 -9
  31. package/lib/esm/src/components/upload/FileUpload.d.ts.map +1 -1
  32. package/lib/esm/src/components/upload/FileUpload.js +32 -24
  33. package/lib/esm/src/components/upload/ImageUpload.d.ts +3 -2
  34. package/lib/esm/src/components/upload/ImageUpload.d.ts.map +1 -1
  35. package/lib/esm/src/components/upload/ImageUpload.js +13 -6
  36. package/package.json +24 -24
package/lib/esm/components/upload/FileUpload.d.ts CHANGED
@@ -10,12 +10,8 @@ export declare type PreviewComponentProps = {
10
10
  export declare type Props = {
11
11
  /** (Optional) string for accepting files */
12
12
  accept?: string;
13
- /** Function, executed when a file gets removed */
14
- onRemoveFile: () => void;
15
13
  /** Optional Function, executed to download the file */
16
- onDownloadFile?: () => void;
17
- /** Function, executed when a file gets selected */
18
- onSelectFile: (file: DropzoneFile) => void;
14
+ onDownloadFile?: (file: DropzoneFile) => void;
19
15
  /** (Optional) function, executed when a file gets dragged into the upload field and accepted */
20
16
  onDropAccepted?: () => void;
21
17
  /** (Optional) function, executed when a file gets dragged into the upload field and rejected */
@@ -32,9 +28,27 @@ export declare type Props = {
32
28
  previewComponent?: React.ComponentType<PreviewComponentProps>;
33
29
  /** (Optional) Maximum upload size */
34
30
  maxSize?: number;
35
- };
31
+ } & ({
32
+ /** (Optional) accept multiple files */
33
+ multiple?: false;
34
+ /** Function, executed when files get added or removed */
35
+ onChange?: (files: DropzoneFile[]) => void;
36
+ /** Function, executed when a file gets removed */
37
+ onRemoveFile: (file: DropzoneFile) => void;
38
+ /** Function, executed when a file gets selected */
39
+ onSelectFile: (file: DropzoneFile) => void;
40
+ } | {
41
+ /** (Optional) accept multiple files */
42
+ multiple: true;
43
+ /** Function, executed when files get added or removed */
44
+ onChange: (files: DropzoneFile[]) => void;
45
+ /** Function, executed when a file gets removed */
46
+ onRemoveFile?: (file: DropzoneFile) => void;
47
+ /** Function, executed when a file gets selected */
48
+ onSelectFile?: (file: DropzoneFile) => void;
49
+ });
36
50
  export declare type State = {
37
- file: DropzoneFile | null | undefined;
51
+ files: DropzoneFile[];
38
52
  };
39
53
  /**
40
54
  * FileUpload enables the possibility to upload files conveniently
@@ -60,8 +74,8 @@ export default class FileUpload extends React.Component<Props, State> {
60
74
  };
61
75
  state: State;
62
76
  handleDrop: (accepted: Array<DropzoneFile>, rejected: Array<DropzoneFile>) => void;
63
- selectFile: (arg0: DropzoneFile) => void;
64
- handleRemoveFile: () => void;
77
+ selectFile: (files: DropzoneFile[]) => void;
78
+ handleRemoveFile: (file: DropzoneFile) => void;
65
79
  render(): React.JSX.Element;
66
80
  }
67
81
  //# sourceMappingURL=FileUpload.d.ts.map
package/lib/esm/components/upload/FileUpload.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"FileUpload.d.ts","sourceRoot":"","sources":["../../../../src/components/upload/FileUpload.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAC,qBAAqB,EAAC,MAAM,kBAAkB,CAAC;AAEvD,oBAAY,YAAY,GAAG,IAAI,GAAG;IACjC,OAAO,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,oBAAY,qBAAqB,GAAG;IACnC,IAAI,EAAE,YAAY,GAAG,IAAI,CAAC;IAC1B,YAAY,EAAE,MAAM,IAAI,CAAC;CACzB,CAAC;AAEF,oBAAY,KAAK,GAAG;IACnB,4CAA4C;IAC5C,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,kDAAkD;IAClD,YAAY,EAAE,MAAM,IAAI,CAAC;IAEzB,uDAAuD;IACvD,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAE5B,mDAAmD;IACnD,YAAY,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,IAAI,CAAC;IAE3C,gGAAgG;IAChG,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAE5B,gGAAgG;IAChG,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,EAAE,KAAK,IAAI,CAAC;IAEjD,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,qBAAqB,CAAC;IAEjC,qDAAqD;IACrD,SAAS,CAAC,EAAE,qBAAqB,CAAC;IAElC,wDAAwD;IACxD,UAAU,CAAC,EAAE,qBAAqB,CAAC;IAEnC,wDAAwD;IACxD,UAAU,CAAC,EAAE,qBAAqB,CAAC;IAEnC,gEAAgE;IAChE,gBAAgB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,qBAAqB,CAAC,CAAC;IAE9D,qCAAqC;IACrC,OAAO,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,oBAAY,KAAK,GAAG;IACnB,IAAI,EAAE,YAAY,GAAG,IAAI,GAAG,SAAS,CAAC;CACtC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,OAAO,OAAO,UAAW,SAAQ,KAAK,CAAC,SAAS,CAAC,KAAK,EAAE,KAAK,CAAC;IACpE,MAAM,CAAC,YAAY,EAAE;QACpB,UAAU,EAAE;YACX,YAAY,EAAE,MAAM,CAAC;YACrB,EAAE,EAAE,MAAM,CAAC;SACX,CAAC;QACF,QAAQ,EAAE;YACT,YAAY,EAAE,MAAM,CAAC;YACrB,EAAE,EAAE,MAAM,CAAC;SACX,CAAC;QACF,SAAS,EAAE;YACV,YAAY,EAAE,MAAM,CAAC;YACrB,EAAE,EAAE,MAAM,CAAC;SACX,CAAC;QACF,UAAU,EAAE;YACX,YAAY,EAAE,MAAM,CAAC;YACrB,EAAE,EAAE,MAAM,CAAC;SACX,CAAC;KACF,CAiBC;IAEF,KAAK,EAAE,KAAK,CAEV;IAEF,UAAU,EAAE,CAAC,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,EAAE,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,KAAK,IAAI,CAgBhF;IAEF,UAAU,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,IAAI,CAMtC;IAEF,gBAAgB,EAAE,MAAM,IAAI,CAW1B;IAEF,MAAM;CAqEN"}
1
+ {"version":3,"file":"FileUpload.d.ts","sourceRoot":"","sources":["../../../../src/components/upload/FileUpload.tsx"],"names":[],"mappings":"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"}
package/lib/esm/components/upload/FileUpload.js CHANGED
@@ -10,58 +10,66 @@ export default class FileUpload extends React.Component {
10
10
  constructor() {
11
11
  super(...arguments);
12
12
  this.state = {
13
- file: null
13
+ files: []
14
14
  };
15
15
  this.handleDrop = (accepted, rejected) => {
16
- if (accepted.length > 1) {
16
+ if (!this.props.multiple && accepted.length > 1) {
17
17
  return;
18
18
  }
19
19
  if (rejected.length > 0) {
20
20
  return;
21
21
  }
22
- const file = accepted[0];
23
22
  /** Prevent console error on <Dropzone /> component */
24
- setTimeout(() => this.selectFile(file), 100);
23
+ setTimeout(() => this.selectFile(accepted), 100);
25
24
  };
26
- this.selectFile = (file) => {
27
- file.preview = URL.createObjectURL(file);
28
- this.setState({
29
- file
25
+ this.selectFile = (files) => {
26
+ const { onSelectFile, onChange } = this.props;
27
+ files.forEach((file) => {
28
+ file.preview = URL.createObjectURL(file);
30
29
  });
31
- this.props.onSelectFile(file);
30
+ const newFiles = [...this.state.files, ...files];
31
+ this.setState({ files: newFiles });
32
+ onChange?.(newFiles);
33
+ if (onSelectFile) {
34
+ files.forEach((file) => {
35
+ onSelectFile(file);
36
+ });
37
+ }
32
38
  };
33
- this.handleRemoveFile = () => {
34
- const { file } = this.state;
35
- const { onRemoveFile } = this.props;
39
+ this.handleRemoveFile = (file) => {
40
+ const { files } = this.state;
36
41
  if (file) {
37
42
  if (file.preview)
38
43
  window.URL.revokeObjectURL(file.preview);
39
- onRemoveFile();
40
- this.setState({
41
- file: null
42
- });
44
+ const newFiles = files.filter((f) => f !== file);
45
+ this.setState({ files: newFiles });
46
+ this.props.onChange?.(newFiles);
47
+ this.props.onRemoveFile?.(file);
43
48
  }
44
49
  };
45
50
  }
46
51
  render() {
47
- const { file } = this.state;
52
+ const { files } = this.state;
48
53
  const { accept, previewComponent: Preview, dropHint, hoverHint, acceptHint, rejectHint,
49
54
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
55
+ onChange,
56
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
50
57
  onRemoveFile, onDownloadFile,
51
58
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
52
- onSelectFile, onDropRejected, onDropAccepted, maxSize, ...otherProps } = this.props;
59
+ onSelectFile, onDropRejected, onDropAccepted, maxSize, multiple, ...otherProps } = this.props;
53
60
  const dropHintOrDefault = dropHint || FileUpload.defaultProps.dropHint;
54
61
  const hoverHintOrDefault = hoverHint || FileUpload.defaultProps.hoverHint;
55
62
  const acceptHintOrDefault = acceptHint || FileUpload.defaultProps.acceptHint;
56
63
  const rejectHintOrDefault = rejectHint || FileUpload.defaultProps.rejectHint;
57
64
  return (React.createElement("div", { ...otherProps, className: classNames('di upload', {
58
- clickable: !file,
59
- hasContent: !!file
65
+ clickable: !files.length,
66
+ hasContent: !!files.length
60
67
  }) },
61
- !!file && !!Preview && (
62
- // @ts-ignore
63
- React.createElement(Preview, { file: file, onRemoveFile: this.handleRemoveFile, onDownloadFile: onDownloadFile })),
64
- !file && (React.createElement(Dropzone, { accept: accept, multiple: false, style: {
68
+ !!Preview &&
69
+ files.map((file, i) => (React.createElement(Preview, { key: i, file: file, onRemoveFile: () => this.handleRemoveFile(file),
70
+ // @ts-ignore
71
+ onDownloadFile: onDownloadFile && (() => onDownloadFile(file)) }))),
72
+ (multiple || !files.length) && (React.createElement(Dropzone, { accept: accept, multiple: multiple ?? false, style: {
65
73
  border: 'none'
66
74
  }, onDrop: this.handleDrop, onDropRejected: onDropRejected, onDropAccepted: onDropAccepted, activeClassName: "active", acceptClassName: "accept", rejectClassName: "reject", maxSize: maxSize || Infinity },
67
75
  React.createElement("div", { className: "drag-drop-text-container" },
package/lib/esm/components/upload/ImageUpload.d.ts CHANGED
@@ -1,12 +1,13 @@
1
1
  import * as React from 'react';
2
- import { Props as FileUploadProps } from './FileUpload';
3
- export declare type Props = FileUploadProps & {
2
+ import { DropzoneFile, Props as FileUploadProps } from './FileUpload';
3
+ export declare type Props = Omit<FileUploadProps, 'multiple'> & {
4
4
  /** (Optional) Url for the image preview */
5
5
  imageUrl: string | null | undefined;
6
6
  imageSize?: 'contain' | 'cover';
7
7
  };
8
8
  declare type ImageUploadState = {
9
9
  dragOverPreview: boolean;
10
+ file: DropzoneFile | null;
10
11
  };
11
12
  /**
12
13
  * ImageUpload enables the possibility to upload images conveniently
package/lib/esm/components/upload/ImageUpload.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ImageUpload.d.ts","sourceRoot":"","sources":["../../../../src/components/upload/ImageUpload.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAmB,EAAC,KAAK,IAAI,eAAe,EAAC,MAAM,cAAc,CAAC;AA+BlE,oBAAY,KAAK,GAAG,eAAe,GAAG;IACrC,2CAA2C;IAC3C,QAAQ,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IACpC,SAAS,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;CAChC,CAAC;AAEF,aAAK,gBAAgB,GAAG;IACvB,eAAe,EAAE,OAAO,CAAC;CACzB,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,OAAO,OAAO,WAAY,SAAQ,KAAK,CAAC,SAAS,CAAC,KAAK,EAAE,gBAAgB,CAAC;IAChF,KAAK,EAAE,gBAAgB,CAErB;IAEF,kBAAkB,CAAC,SAAS,EAAE,KAAK,GAAG,IAAI;IAQ1C,cAAc,EAAE,MAAM,IAAI,CAIxB;IAEF,MAAM;CAkBN"}
1
+ {"version":3,"file":"ImageUpload.d.ts","sourceRoot":"","sources":["../../../../src/components/upload/ImageUpload.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAmB,EAAC,YAAY,EAAE,KAAK,IAAI,eAAe,EAAC,MAAM,cAAc,CAAC;AA+BhF,oBAAY,KAAK,GAAG,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC,GAAG;IACvD,2CAA2C;IAC3C,QAAQ,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IACpC,SAAS,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;CAChC,CAAC;AAEF,aAAK,gBAAgB,GAAG;IACvB,eAAe,EAAE,OAAO,CAAC;IACzB,IAAI,EAAE,YAAY,GAAG,IAAI,CAAC;CAC1B,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,OAAO,OAAO,WAAY,SAAQ,KAAK,CAAC,SAAS,CAAC,KAAK,EAAE,gBAAgB,CAAC;IAChF,KAAK,EAAE,gBAAgB,CAGrB;IAEF,kBAAkB,CAAC,SAAS,EAAE,KAAK,GAAG,IAAI;IAQ1C,cAAc,EAAE,MAAM,IAAI,CAIxB;IAEF,MAAM;CA+BN"}
package/lib/esm/components/upload/ImageUpload.js CHANGED
@@ -17,7 +17,8 @@ export default class ImageUpload extends React.Component {
17
17
  constructor() {
18
18
  super(...arguments);
19
19
  this.state = {
20
- dragOverPreview: false
20
+ dragOverPreview: false,
21
+ file: null
21
22
  };
22
23
  this.handleDragOver = () => {
23
24
  this.setState({
@@ -33,13 +34,19 @@ export default class ImageUpload extends React.Component {
33
34
  }
34
35
  }
35
36
  render() {
36
- const { accept, imageUrl, imageSize, ...otherProps } = this.props;
37
- const { dragOverPreview } = this.state;
38
- if (imageUrl && !dragOverPreview) {
39
- return (React.createElement(PreviewImage, { url: imageUrl, imageSize: imageSize, onRemoveFile: otherProps.onRemoveFile, onDownloadFile: otherProps.onDownloadFile, onDragOver: this.handleDragOver }));
37
+ const { accept, imageUrl, imageSize, onSelectFile, onRemoveFile, ...otherProps } = this.props;
38
+ const { dragOverPreview, file } = this.state;
39
+ if (imageUrl && !dragOverPreview && file) {
40
+ return (React.createElement(PreviewImage, { url: imageUrl, imageSize: imageSize, onRemoveFile: () => onRemoveFile?.(file), onDownloadFile: () => otherProps.onDownloadFile?.(file), onDragOver: this.handleDragOver }));
40
41
  }
41
42
  else {
42
- return React.createElement(FileUpload, { ...otherProps, accept: accept || 'image/jpeg, image/png' });
43
+ return (React.createElement(FileUpload, { ...otherProps, onRemoveFile: (file) => {
44
+ this.setState({ file: null });
45
+ onRemoveFile?.(file);
46
+ }, onSelectFile: (file) => {
47
+ this.setState({ file });
48
+ onSelectFile?.(file);
49
+ }, accept: accept || 'image/jpeg, image/png' }));
43
50
  }
44
51
  }
45
52
  }
package/lib/esm/src/components/input/DateTimeInput.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"DateTimeInput.d.ts","sourceRoot":"","sources":["../../../../../src/components/input/DateTimeInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAejD,oBAAY,KAAK,GAAG;IACnB,kDAAkD;IAClD,SAAS,EAAE,MAAM,CAAC;IAElB,oEAAoE;IACpE,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,EAAE,aAAa,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAE7E,yDAAyD;IACzD,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,+DAA+D;IAC/D,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,IAAI,CAAC;IACjB,OAAO,CAAC,EAAE,IAAI,CAAC;IAEf,mEAAmE;IACnE,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACrC,SAAS,EACT,QAAQ,EACR,OAAO,EACP,QAAgB,EAChB,QAAQ,EACR,GAAG,UAAU,EACb,EAAE,KAAK,qBAwDP"}
1
+ {"version":3,"file":"DateTimeInput.d.ts","sourceRoot":"","sources":["../../../../../src/components/input/DateTimeInput.tsx"],"names":[],"mappings":"AACA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAwBjD,oBAAY,KAAK,GAAG;IACnB,kDAAkD;IAClD,SAAS,EAAE,MAAM,CAAC;IAElB,oEAAoE;IACpE,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,EAAE,aAAa,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAE7E,yDAAyD;IACzD,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,+DAA+D;IAC/D,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,IAAI,CAAC;IACjB,OAAO,CAAC,EAAE,IAAI,CAAC;IAEf,mEAAmE;IACnE,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACrC,SAAS,EACT,QAAQ,EACR,OAAO,EACP,QAAgB,EAChB,QAAQ,EACR,GAAG,UAAU,EACb,EAAE,KAAK,qBAgFP"}
package/lib/esm/src/components/input/DateTimeInput.js CHANGED
@@ -1,7 +1,9 @@
1
+ import dayjs from 'dayjs';
1
2
  import React, { useEffect, useState } from 'react';
2
3
  import { dayjsTz } from '../periodpicker/periods';
3
4
  import DateInput from './DateInput';
4
5
  import ValidatedTextInput from './ValidatedTextInput';
6
+ import { toInteger } from 'lodash';
5
7
  const extractTime = (timezone, date) => {
6
8
  try {
7
9
  return dayjsTz(timezone, date).format('HH:mm');
@@ -11,6 +13,15 @@ const extractTime = (timezone, date) => {
11
13
  return '00:00';
12
14
  }
13
15
  };
16
+ const extractDate = (timezone, date) => {
17
+ try {
18
+ return dayjs(dayjsTz(timezone, date).format('YYYY-MM-DD'));
19
+ }
20
+ catch (error) {
21
+ console.error('DateTimeInput: Error while extracting time from date', error);
22
+ return dayjs(new Date());
23
+ }
24
+ };
14
25
  /**
15
26
  * Extends DateInput but also displaying the current time.
16
27
  * Usually the user's locale is used for displaying the correct date format.
@@ -23,17 +34,36 @@ export default function DateTimeInput({ timestamp, timezone, warning, readOnly =
23
34
  }, [timezone, timestamp]);
24
35
  function handleChangeDate(date, fromTextField) {
25
36
  const oldDate = dayjsTz(timezone, timestamp);
26
- onChange(dayjsTz(timezone, date).set('hour', oldDate.get('hour')).set('minute', oldDate.get('minute')).valueOf(), fromTextField);
37
+ const dateFix = dayjs(date);
38
+ let newDate = dayjsTz(timezone, date)
39
+ .set('day', dateFix.day())
40
+ .set('month', dateFix.month())
41
+ .set('year', dateFix.year())
42
+ .set('hour', toInteger(oldDate.hour()))
43
+ .set('minute', toInteger(oldDate.minute()));
44
+ const dstOffset = getLocalDstOffset(newDate);
45
+ newDate = newDate.subtract(dstOffset, 'minutes');
46
+ onChange(newDate.valueOf(), fromTextField);
47
+ }
48
+ function getMaxUtcOffset(year) {
49
+ const jan = new Date(`${year}-01-01`).getTimezoneOffset();
50
+ const jul = new Date(`${year}-07-01`).getTimezoneOffset();
51
+ return Math.min(jan, jul);
52
+ }
53
+ function getLocalDstOffset(newDate) {
54
+ return newDate.toDate().getTimezoneOffset() - getMaxUtcOffset(newDate.year());
27
55
  }
28
56
  function handleChangeTime(time, valid) {
29
57
  if (valid) {
30
58
  const [hours, minutes] = time.split(':');
31
- onChange(dayjsTz(timezone, timestamp)
59
+ const date = extractDate(timezone, timestamp);
60
+ const dateTime = dayjsTz(timezone, timestamp)
61
+ .set('date', date.date())
32
62
  .set('hour', parseInt(hours, 10))
33
63
  .set('minute', parseInt(minutes, 10))
34
64
  .set('second', 0)
35
- .set('millisecond', 0)
36
- .valueOf());
65
+ .set('millisecond', 0);
66
+ onChange(dateTime.valueOf());
37
67
  }
38
68
  setTime(time);
39
69
  }
@@ -43,7 +73,7 @@ export default function DateTimeInput({ timestamp, timezone, warning, readOnly =
43
73
  }
44
74
  }
45
75
  return (React.createElement("span", { className: `di date-time-input ${warning ? 'with-warning' : ''}` },
46
- React.createElement(DateInput, { ...otherProps, value: timestamp, onChange: handleChangeDate, readOnly: readOnly }),
76
+ React.createElement(DateInput, { ...otherProps, value: extractDate(timezone, timestamp).valueOf(), onChange: handleChangeDate, readOnly: readOnly }),
47
77
  React.createElement(ValidatedTextInput, { "data-testid": "time-input", value: timeValue, onChange: handleChangeTime, pattern: /^(([01][0-9])|2[0-3]):[0-5][0-9]$/, required: true, invalidStyle: {
48
78
  borderColor: 'red'
49
79
  }, placeholder: "00:00", className: "time", onBlur: tryFixTime, disabled: readOnly })));
package/lib/esm/src/components/input/__tests__/DateTimeInput.spec.js CHANGED
@@ -1,7 +1,8 @@
1
1
  import React from 'react';
2
2
  import { describe, expect, it } from 'vitest';
3
3
  import DateTimeInput from '../DateTimeInput';
4
- import { render, screen } from '@testing-library/react';
4
+ import { act, render, screen } from '@testing-library/react';
5
+ import { userEvent } from '@storybook/testing-library';
5
6
  describe('DateTimeInput.js', () => {
6
7
  it('should update time when timestamp has changed', () => {
7
8
  const { rerender } = render(React.createElement(DateTimeInput, { timestamp: new Date('2019-02-01T11:11:00').getTime(), onChange: () => { } }));
@@ -10,4 +11,24 @@ describe('DateTimeInput.js', () => {
10
11
  rerender(React.createElement(DateTimeInput, { timestamp: new Date('2019-02-02T03:24:00').getTime(), onChange: () => { } }));
11
12
  expect(timeElement).toHaveDisplayValue('03:24');
12
13
  });
14
+ it('should display the time and date as timezone date', async () => {
15
+ const { rerender } = render(React.createElement(DateTimeInput, { timestamp: new Date('2019-02-01T11:11:00Z').getTime(), onChange: () => { }, timezone: "America/Vancouver" }));
16
+ const timeElementUtm = screen.queryByDisplayValue('11:11');
17
+ expect(timeElementUtm).not.toBeInTheDocument();
18
+ const timeElement = screen.queryByDisplayValue('03:11');
19
+ expect(timeElement).toBeInTheDocument();
20
+ const dateElement = screen.queryByDisplayValue('01.02.2019');
21
+ expect(dateElement).toBeInTheDocument();
22
+ rerender(React.createElement(DateTimeInput, { timestamp: new Date('2019-02-02T03:24:00Z').getTime(), onChange: () => { }, timezone: "America/Vancouver" }));
23
+ expect(timeElement).toHaveDisplayValue('19:24');
24
+ expect(dateElement).toHaveDisplayValue('01.02.2019');
25
+ await act(async () => {
26
+ dateElement?.click();
27
+ timeElement?.click();
28
+ userEvent.clear(timeElement);
29
+ userEvent.type(timeElement, '10:24');
30
+ });
31
+ expect(timeElement).toHaveDisplayValue('10:24');
32
+ expect(dateElement).toHaveDisplayValue('01.02.2019');
33
+ });
13
34
  });
package/lib/esm/src/components/reactable/helpers/ReactableTable.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ReactableTable.d.ts","sourceRoot":"","sources":["../../../../../../src/components/reactable/helpers/ReactableTable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AAQzD,OAAO,EAAC,kBAAkB,EAAE,eAAe,EAAE,uBAAuB,EAAC,MAAM,UAAU,CAAC;AACtF,OAAO,EAAC,QAAQ,EAAE,kBAAkB,EAAE,aAAa,EAAC,MAAM,2BAA2B,CAAC;AAGtF,aAAK,KAAK,CAAC,CAAC,EAAE,EAAE,SAAS,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,IAAI,IAAI;IAC9D,UAAU,EAAE,kBAAkB,CAAC,CAAC,CAAC,EAAE,CAAC;IACpC,aAAa,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,EAAE,CAAC;IAC/B,kBAAkB,EAAE,kBAAkB,CAAC;IACvC,MAAM,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,aAAa,KAAK,IAAI,CAAC;IAC7D,QAAQ,CAAC,EAAE,CAAC,cAAc,EAAE,uBAAuB,KAAK,IAAI,CAAC;IAC7D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC;IAC9B,SAAS,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC;IAC5B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,aAAa,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,CAAC,EAAE,EAAE,SAAS,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,IAAI,EAAE,EACxF,UAAU,EACV,aAAa,EACb,kBAAkB,EAClB,MAAM,EACN,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,SAAS,EACT,MAAM,EACN,SAAS,EACT,gBAAgB,EAChB,aAAa,EAAE,MAAM,EACrB,EAAE,KAAK,CAAC,CAAC,EAAE,EAAE,CAAC,qBAwHd"}
1
+ {"version":3,"file":"ReactableTable.d.ts","sourceRoot":"","sources":["../../../../../../src/components/reactable/helpers/ReactableTable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AAQzD,OAAO,EAAC,kBAAkB,EAAE,eAAe,EAAE,uBAAuB,EAAC,MAAM,UAAU,CAAC;AACtF,OAAO,EAAC,QAAQ,EAAE,kBAAkB,EAAE,aAAa,EAAC,MAAM,2BAA2B,CAAC;AAGtF,aAAK,KAAK,CAAC,CAAC,EAAE,EAAE,SAAS,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,IAAI,IAAI;IAC9D,UAAU,EAAE,kBAAkB,CAAC,CAAC,CAAC,EAAE,CAAC;IACpC,aAAa,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,EAAE,CAAC;IAC/B,kBAAkB,EAAE,kBAAkB,CAAC;IACvC,MAAM,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,aAAa,KAAK,IAAI,CAAC;IAC7D,QAAQ,CAAC,EAAE,CAAC,cAAc,EAAE,uBAAuB,KAAK,IAAI,CAAC;IAC7D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC;IAC9B,SAAS,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC;IAC5B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,aAAa,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,CAAC,EAAE,EAAE,SAAS,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,IAAI,EAAE,EACxF,UAAU,EACV,aAAa,EACb,kBAAkB,EAClB,MAAM,EACN,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,SAAS,EACT,MAAM,EACN,SAAS,EACT,gBAAgB,EAChB,aAAa,EAAE,MAAM,EACrB,EAAE,KAAK,CAAC,CAAC,EAAE,EAAE,CAAC,qBAmId"}
package/lib/esm/src/components/reactable/helpers/ReactableTable.js CHANGED
@@ -10,7 +10,8 @@ export default function ReactableTable({ columnDefs, uniqueItemKey, paginationSe
10
10
  const containerRef = useRef(null);
11
11
  const tableRef = useRef(null);
12
12
  const [showScrollingAdvice, setShowScrollingAdvice] = useState(false);
13
- const [neverShowScrollingAdvice, setNeverShowScrollingAdvice] = useState(false);
13
+ const [neverShowScrollingAdvice, setNeverShowScrollingAdvice] = useState(true);
14
+ const [hasInitialized, setHasInitialized] = useState(false);
14
15
  const HIDE_SCROLLING_ADVICE_PATH = 'uiConfigurations/nevershowscrollingadvice';
15
16
  const neverShowScrollingAdviceRef = useRef(neverShowScrollingAdvice);
16
17
  useEffect(() => {
@@ -22,14 +23,25 @@ export default function ReactableTable({ columnDefs, uniqueItemKey, paginationSe
22
23
  }
23
24
  };
24
25
  useEffect(() => {
25
- readAccountObject(HIDE_SCROLLING_ADVICE_PATH).then((value) => {
26
- const neverShow = value === undefined ? false : value;
27
- setNeverShowScrollingAdvice(neverShow);
28
- neverShowScrollingAdviceRef.current = neverShow;
29
- if (containerRef.current && tableRef.current) {
30
- updateScrollingAdvice();
31
- }
32
- });
26
+ setTimeout(() => {
27
+ (async () => {
28
+ try {
29
+ const value = await readAccountObject(HIDE_SCROLLING_ADVICE_PATH);
30
+ const neverShow = value === true;
31
+ setNeverShowScrollingAdvice(neverShow);
32
+ neverShowScrollingAdviceRef.current = neverShow;
33
+ if (!neverShow) {
34
+ updateScrollingAdvice();
35
+ }
36
+ }
37
+ catch (error) {
38
+ setNeverShowScrollingAdvice(false);
39
+ neverShowScrollingAdviceRef.current = false;
40
+ updateScrollingAdvice();
41
+ }
42
+ setHasInitialized(true);
43
+ })();
44
+ }, 0);
33
45
  }, []);
34
46
  useEffect(() => {
35
47
  updateScrollingAdvice();
@@ -39,7 +51,7 @@ export default function ReactableTable({ columnDefs, uniqueItemKey, paginationSe
39
51
  const showFilterRow = columnDefs.some((col) => col.filterable);
40
52
  return (React.createElement(SpinnerContainer, { show: isLoading },
41
53
  React.createElement("div", { ref: containerRef, className: "di reactable scroll-x" },
42
- showScrollingAdvice && !isLoading && (React.createElement(Modal, { className: "scroll-horizontally-advice", content: React.createElement("div", null,
54
+ hasInitialized && showScrollingAdvice && !isLoading && (React.createElement(Modal, { className: "scroll-horizontally-advice", content: React.createElement("div", null,
43
55
  React.createElement(Trans, { i18nKey: "reactable.scrollHorizontally.advice" }, "SHIFT + mouse wheel to scroll horizontally"),
44
56
  React.createElement("div", { className: "scroll-horizontally-advice-buttons" },
45
57
  React.createElement(Button, { primary: true, onClick: async () => {
package/lib/esm/src/components/upload/FileUpload.d.ts CHANGED
@@ -10,12 +10,8 @@ export declare type PreviewComponentProps = {
10
10
  export declare type Props = {
11
11
  /** (Optional) string for accepting files */
12
12
  accept?: string;
13
- /** Function, executed when a file gets removed */
14
- onRemoveFile: () => void;
15
13
  /** Optional Function, executed to download the file */
16
- onDownloadFile?: () => void;
17
- /** Function, executed when a file gets selected */
18
- onSelectFile: (file: DropzoneFile) => void;
14
+ onDownloadFile?: (file: DropzoneFile) => void;
19
15
  /** (Optional) function, executed when a file gets dragged into the upload field and accepted */
20
16
  onDropAccepted?: () => void;
21
17
  /** (Optional) function, executed when a file gets dragged into the upload field and rejected */
@@ -32,9 +28,27 @@ export declare type Props = {
32
28
  previewComponent?: React.ComponentType<PreviewComponentProps>;
33
29
  /** (Optional) Maximum upload size */
34
30
  maxSize?: number;
35
- };
31
+ } & ({
32
+ /** (Optional) accept multiple files */
33
+ multiple?: false;
34
+ /** Function, executed when files get added or removed */
35
+ onChange?: (files: DropzoneFile[]) => void;
36
+ /** Function, executed when a file gets removed */
37
+ onRemoveFile: (file: DropzoneFile) => void;
38
+ /** Function, executed when a file gets selected */
39
+ onSelectFile: (file: DropzoneFile) => void;
40
+ } | {
41
+ /** (Optional) accept multiple files */
42
+ multiple: true;
43
+ /** Function, executed when files get added or removed */
44
+ onChange: (files: DropzoneFile[]) => void;
45
+ /** Function, executed when a file gets removed */
46
+ onRemoveFile?: (file: DropzoneFile) => void;
47
+ /** Function, executed when a file gets selected */
48
+ onSelectFile?: (file: DropzoneFile) => void;
49
+ });
36
50
  export declare type State = {
37
- file: DropzoneFile | null | undefined;
51
+ files: DropzoneFile[];
38
52
  };
39
53
  /**
40
54
  * FileUpload enables the possibility to upload files conveniently
@@ -60,8 +74,8 @@ export default class FileUpload extends React.Component<Props, State> {
60
74
  };
61
75
  state: State;
62
76
  handleDrop: (accepted: Array<DropzoneFile>, rejected: Array<DropzoneFile>) => void;
63
- selectFile: (arg0: DropzoneFile) => void;
64
- handleRemoveFile: () => void;
77
+ selectFile: (files: DropzoneFile[]) => void;
78
+ handleRemoveFile: (file: DropzoneFile) => void;
65
79
  render(): React.JSX.Element;
66
80
  }
67
81
  //# sourceMappingURL=FileUpload.d.ts.map
package/lib/esm/src/components/upload/FileUpload.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"FileUpload.d.ts","sourceRoot":"","sources":["../../../../../src/components/upload/FileUpload.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAC,qBAAqB,EAAC,MAAM,kBAAkB,CAAC;AAEvD,oBAAY,YAAY,GAAG,IAAI,GAAG;IACjC,OAAO,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,oBAAY,qBAAqB,GAAG;IACnC,IAAI,EAAE,YAAY,GAAG,IAAI,CAAC;IAC1B,YAAY,EAAE,MAAM,IAAI,CAAC;CACzB,CAAC;AAEF,oBAAY,KAAK,GAAG;IACnB,4CAA4C;IAC5C,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,kDAAkD;IAClD,YAAY,EAAE,MAAM,IAAI,CAAC;IAEzB,uDAAuD;IACvD,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAE5B,mDAAmD;IACnD,YAAY,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,IAAI,CAAC;IAE3C,gGAAgG;IAChG,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAE5B,gGAAgG;IAChG,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,EAAE,KAAK,IAAI,CAAC;IAEjD,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,qBAAqB,CAAC;IAEjC,qDAAqD;IACrD,SAAS,CAAC,EAAE,qBAAqB,CAAC;IAElC,wDAAwD;IACxD,UAAU,CAAC,EAAE,qBAAqB,CAAC;IAEnC,wDAAwD;IACxD,UAAU,CAAC,EAAE,qBAAqB,CAAC;IAEnC,gEAAgE;IAChE,gBAAgB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,qBAAqB,CAAC,CAAC;IAE9D,qCAAqC;IACrC,OAAO,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,oBAAY,KAAK,GAAG;IACnB,IAAI,EAAE,YAAY,GAAG,IAAI,GAAG,SAAS,CAAC;CACtC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,OAAO,OAAO,UAAW,SAAQ,KAAK,CAAC,SAAS,CAAC,KAAK,EAAE,KAAK,CAAC;IACpE,MAAM,CAAC,YAAY,EAAE;QACpB,UAAU,EAAE;YACX,YAAY,EAAE,MAAM,CAAC;YACrB,EAAE,EAAE,MAAM,CAAC;SACX,CAAC;QACF,QAAQ,EAAE;YACT,YAAY,EAAE,MAAM,CAAC;YACrB,EAAE,EAAE,MAAM,CAAC;SACX,CAAC;QACF,SAAS,EAAE;YACV,YAAY,EAAE,MAAM,CAAC;YACrB,EAAE,EAAE,MAAM,CAAC;SACX,CAAC;QACF,UAAU,EAAE;YACX,YAAY,EAAE,MAAM,CAAC;YACrB,EAAE,EAAE,MAAM,CAAC;SACX,CAAC;KACF,CAiBC;IAEF,KAAK,EAAE,KAAK,CAEV;IAEF,UAAU,EAAE,CAAC,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,EAAE,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,KAAK,IAAI,CAgBhF;IAEF,UAAU,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,IAAI,CAMtC;IAEF,gBAAgB,EAAE,MAAM,IAAI,CAW1B;IAEF,MAAM;CAqEN"}
1
+ {"version":3,"file":"FileUpload.d.ts","sourceRoot":"","sources":["../../../../../src/components/upload/FileUpload.tsx"],"names":[],"mappings":"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"}
package/lib/esm/src/components/upload/FileUpload.js CHANGED
@@ -10,58 +10,66 @@ export default class FileUpload extends React.Component {
10
10
  constructor() {
11
11
  super(...arguments);
12
12
  this.state = {
13
- file: null
13
+ files: []
14
14
  };
15
15
  this.handleDrop = (accepted, rejected) => {
16
- if (accepted.length > 1) {
16
+ if (!this.props.multiple && accepted.length > 1) {
17
17
  return;
18
18
  }
19
19
  if (rejected.length > 0) {
20
20
  return;
21
21
  }
22
- const file = accepted[0];
23
22
  /** Prevent console error on <Dropzone /> component */
24
- setTimeout(() => this.selectFile(file), 100);
23
+ setTimeout(() => this.selectFile(accepted), 100);
25
24
  };
26
- this.selectFile = (file) => {
27
- file.preview = URL.createObjectURL(file);
28
- this.setState({
29
- file
25
+ this.selectFile = (files) => {
26
+ const { onSelectFile, onChange } = this.props;
27
+ files.forEach((file) => {
28
+ file.preview = URL.createObjectURL(file);
30
29
  });
31
- this.props.onSelectFile(file);
30
+ const newFiles = [...this.state.files, ...files];
31
+ this.setState({ files: newFiles });
32
+ onChange?.(newFiles);
33
+ if (onSelectFile) {
34
+ files.forEach((file) => {
35
+ onSelectFile(file);
36
+ });
37
+ }
32
38
  };
33
- this.handleRemoveFile = () => {
34
- const { file } = this.state;
35
- const { onRemoveFile } = this.props;
39
+ this.handleRemoveFile = (file) => {
40
+ const { files } = this.state;
36
41
  if (file) {
37
42
  if (file.preview)
38
43
  window.URL.revokeObjectURL(file.preview);
39
- onRemoveFile();
40
- this.setState({
41
- file: null
42
- });
44
+ const newFiles = files.filter((f) => f !== file);
45
+ this.setState({ files: newFiles });
46
+ this.props.onChange?.(newFiles);
47
+ this.props.onRemoveFile?.(file);
43
48
  }
44
49
  };
45
50
  }
46
51
  render() {
47
- const { file } = this.state;
52
+ const { files } = this.state;
48
53
  const { accept, previewComponent: Preview, dropHint, hoverHint, acceptHint, rejectHint,
49
54
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
55
+ onChange,
56
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
50
57
  onRemoveFile, onDownloadFile,
51
58
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
52
- onSelectFile, onDropRejected, onDropAccepted, maxSize, ...otherProps } = this.props;
59
+ onSelectFile, onDropRejected, onDropAccepted, maxSize, multiple, ...otherProps } = this.props;
53
60
  const dropHintOrDefault = dropHint || FileUpload.defaultProps.dropHint;
54
61
  const hoverHintOrDefault = hoverHint || FileUpload.defaultProps.hoverHint;
55
62
  const acceptHintOrDefault = acceptHint || FileUpload.defaultProps.acceptHint;
56
63
  const rejectHintOrDefault = rejectHint || FileUpload.defaultProps.rejectHint;
57
64
  return (React.createElement("div", { ...otherProps, className: classNames('di upload', {
58
- clickable: !file,
59
- hasContent: !!file
65
+ clickable: !files.length,
66
+ hasContent: !!files.length
60
67
  }) },
61
- !!file && !!Preview && (
62
- // @ts-ignore
63
- React.createElement(Preview, { file: file, onRemoveFile: this.handleRemoveFile, onDownloadFile: onDownloadFile })),
64
- !file && (React.createElement(Dropzone, { accept: accept, multiple: false, style: {
68
+ !!Preview &&
69
+ files.map((file, i) => (React.createElement(Preview, { key: i, file: file, onRemoveFile: () => this.handleRemoveFile(file),
70
+ // @ts-ignore
71
+ onDownloadFile: onDownloadFile && (() => onDownloadFile(file)) }))),
72
+ (multiple || !files.length) && (React.createElement(Dropzone, { accept: accept, multiple: multiple ?? false, style: {
65
73
  border: 'none'
66
74
  }, onDrop: this.handleDrop, onDropRejected: onDropRejected, onDropAccepted: onDropAccepted, activeClassName: "active", acceptClassName: "accept", rejectClassName: "reject", maxSize: maxSize || Infinity },
67
75
  React.createElement("div", { className: "drag-drop-text-container" },
package/lib/esm/src/components/upload/ImageUpload.d.ts CHANGED
@@ -1,12 +1,13 @@
1
1
  import * as React from 'react';
2
- import { Props as FileUploadProps } from './FileUpload';
3
- export declare type Props = FileUploadProps & {
2
+ import { DropzoneFile, Props as FileUploadProps } from './FileUpload';
3
+ export declare type Props = Omit<FileUploadProps, 'multiple'> & {
4
4
  /** (Optional) Url for the image preview */
5
5
  imageUrl: string | null | undefined;
6
6
  imageSize?: 'contain' | 'cover';
7
7
  };
8
8
  declare type ImageUploadState = {
9
9
  dragOverPreview: boolean;
10
+ file: DropzoneFile | null;
10
11
  };
11
12
  /**
12
13
  * ImageUpload enables the possibility to upload images conveniently
package/lib/esm/src/components/upload/ImageUpload.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ImageUpload.d.ts","sourceRoot":"","sources":["../../../../../src/components/upload/ImageUpload.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAmB,EAAC,KAAK,IAAI,eAAe,EAAC,MAAM,cAAc,CAAC;AA+BlE,oBAAY,KAAK,GAAG,eAAe,GAAG;IACrC,2CAA2C;IAC3C,QAAQ,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IACpC,SAAS,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;CAChC,CAAC;AAEF,aAAK,gBAAgB,GAAG;IACvB,eAAe,EAAE,OAAO,CAAC;CACzB,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,OAAO,OAAO,WAAY,SAAQ,KAAK,CAAC,SAAS,CAAC,KAAK,EAAE,gBAAgB,CAAC;IAChF,KAAK,EAAE,gBAAgB,CAErB;IAEF,kBAAkB,CAAC,SAAS,EAAE,KAAK,GAAG,IAAI;IAQ1C,cAAc,EAAE,MAAM,IAAI,CAIxB;IAEF,MAAM;CAkBN"}
1
+ {"version":3,"file":"ImageUpload.d.ts","sourceRoot":"","sources":["../../../../../src/components/upload/ImageUpload.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAmB,EAAC,YAAY,EAAE,KAAK,IAAI,eAAe,EAAC,MAAM,cAAc,CAAC;AA+BhF,oBAAY,KAAK,GAAG,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC,GAAG;IACvD,2CAA2C;IAC3C,QAAQ,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IACpC,SAAS,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;CAChC,CAAC;AAEF,aAAK,gBAAgB,GAAG;IACvB,eAAe,EAAE,OAAO,CAAC;IACzB,IAAI,EAAE,YAAY,GAAG,IAAI,CAAC;CAC1B,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,OAAO,OAAO,WAAY,SAAQ,KAAK,CAAC,SAAS,CAAC,KAAK,EAAE,gBAAgB,CAAC;IAChF,KAAK,EAAE,gBAAgB,CAGrB;IAEF,kBAAkB,CAAC,SAAS,EAAE,KAAK,GAAG,IAAI;IAQ1C,cAAc,EAAE,MAAM,IAAI,CAIxB;IAEF,MAAM;CA+BN"}
package/lib/esm/src/components/upload/ImageUpload.js CHANGED
@@ -17,7 +17,8 @@ export default class ImageUpload extends React.Component {
17
17
  constructor() {
18
18
  super(...arguments);
19
19
  this.state = {
20
- dragOverPreview: false
20
+ dragOverPreview: false,
21
+ file: null
21
22
  };
22
23
  this.handleDragOver = () => {
23
24
  this.setState({
@@ -33,13 +34,19 @@ export default class ImageUpload extends React.Component {
33
34
  }
34
35
  }
35
36
  render() {
36
- const { accept, imageUrl, imageSize, ...otherProps } = this.props;
37
- const { dragOverPreview } = this.state;
38
- if (imageUrl && !dragOverPreview) {
39
- return (React.createElement(PreviewImage, { url: imageUrl, imageSize: imageSize, onRemoveFile: otherProps.onRemoveFile, onDownloadFile: otherProps.onDownloadFile, onDragOver: this.handleDragOver }));
37
+ const { accept, imageUrl, imageSize, onSelectFile, onRemoveFile, ...otherProps } = this.props;
38
+ const { dragOverPreview, file } = this.state;
39
+ if (imageUrl && !dragOverPreview && file) {
40
+ return (React.createElement(PreviewImage, { url: imageUrl, imageSize: imageSize, onRemoveFile: () => onRemoveFile?.(file), onDownloadFile: () => otherProps.onDownloadFile?.(file), onDragOver: this.handleDragOver }));
40
41
  }
41
42
  else {
42
- return React.createElement(FileUpload, { ...otherProps, accept: accept || 'image/jpeg, image/png' });
43
+ return (React.createElement(FileUpload, { ...otherProps, onRemoveFile: (file) => {
44
+ this.setState({ file: null });
45
+ onRemoveFile?.(file);
46
+ }, onSelectFile: (file) => {
47
+ this.setState({ file });
48
+ onSelectFile?.(file);
49
+ }, accept: accept || 'image/jpeg, image/png' }));
43
50
  }
44
51
  }
45
52
  }