@alfalab/core-components-file-upload-item 6.2.6 → 6.3.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 (99) hide show
  1. package/Component.js +6 -2
  2. package/actions-control.module-4114c202.js +6 -0
  3. package/components/actions-control/actions-control.css +19 -12
  4. package/components/actions-control/actions.js +7 -2
  5. package/components/actions-control/components/delete-button/delete-button.js +1 -1
  6. package/components/actions-control/components/download-button/download-button.js +1 -1
  7. package/components/actions-control/components/restore-button/restore-button.js +1 -1
  8. package/components/content/components/content-error/content-error.css +2 -2
  9. package/components/content/components/content-error/content-error.js +1 -1
  10. package/components/content/components/content-subtitle/content-subtitle.css +5 -5
  11. package/components/content/components/content-subtitle/content-subtitle.js +1 -1
  12. package/components/content/content.css +11 -10
  13. package/components/content/content.js +3 -2
  14. package/components/status-control/components/status-control-icon/status-control-icon.css +7 -7
  15. package/components/status-control/components/status-control-icon/status-control-icon.js +1 -1
  16. package/components/status-control/status-control.css +14 -13
  17. package/components/status-control/status-control.js +17 -15
  18. package/context/file-upload-item-context.d.ts +3 -0
  19. package/context/file-upload-item-context.js +3 -0
  20. package/cssm/Component.js +5 -1
  21. package/cssm/components/actions-control/actions-control.module.css +15 -8
  22. package/cssm/components/actions-control/actions.js +6 -1
  23. package/cssm/components/content/components/content-subtitle/content-subtitle.module.css +1 -1
  24. package/cssm/components/content/content.js +2 -1
  25. package/cssm/components/content/content.module.css +5 -4
  26. package/cssm/components/status-control/components/status-control-icon/status-control-icon.module.css +1 -1
  27. package/cssm/components/status-control/status-control.js +16 -14
  28. package/cssm/components/status-control/status-control.module.css +5 -4
  29. package/cssm/context/file-upload-item-context.d.ts +3 -0
  30. package/cssm/context/file-upload-item-context.js +3 -0
  31. package/cssm/index.module.css +1 -1
  32. package/cssm/types/file-upload-item-props.d.ts +4 -0
  33. package/esm/Component.js +7 -3
  34. package/esm/actions-control.module-cc662da0.js +4 -0
  35. package/esm/components/actions-control/actions-control.css +19 -12
  36. package/esm/components/actions-control/actions.js +8 -3
  37. package/esm/components/actions-control/components/delete-button/delete-button.js +1 -1
  38. package/esm/components/actions-control/components/download-button/download-button.js +1 -1
  39. package/esm/components/actions-control/components/restore-button/restore-button.js +1 -1
  40. package/esm/components/content/components/content-error/content-error.css +2 -2
  41. package/esm/components/content/components/content-error/content-error.js +1 -1
  42. package/esm/components/content/components/content-subtitle/content-subtitle.css +5 -5
  43. package/esm/components/content/components/content-subtitle/content-subtitle.js +1 -1
  44. package/esm/components/content/content.css +11 -10
  45. package/esm/components/content/content.js +3 -2
  46. package/esm/components/status-control/components/status-control-icon/status-control-icon.css +7 -7
  47. package/esm/components/status-control/components/status-control-icon/status-control-icon.js +1 -1
  48. package/esm/components/status-control/status-control.css +14 -13
  49. package/esm/components/status-control/status-control.js +17 -15
  50. package/esm/context/file-upload-item-context.d.ts +3 -0
  51. package/esm/context/file-upload-item-context.js +3 -0
  52. package/esm/index.css +4 -4
  53. package/esm/types/file-upload-item-props.d.ts +4 -0
  54. package/index.css +4 -4
  55. package/modern/Component.js +36 -30
  56. package/modern/actions-control.module-3ddc9e8e.js +4 -0
  57. package/modern/components/actions-control/actions-control.css +19 -12
  58. package/modern/components/actions-control/actions.js +8 -3
  59. package/modern/components/actions-control/components/delete-button/delete-button.js +1 -1
  60. package/modern/components/actions-control/components/download-button/download-button.js +1 -1
  61. package/modern/components/actions-control/components/restore-button/restore-button.js +1 -1
  62. package/modern/components/content/components/content-error/content-error.css +2 -2
  63. package/modern/components/content/components/content-error/content-error.js +1 -1
  64. package/modern/components/content/components/content-subtitle/content-subtitle.css +5 -5
  65. package/modern/components/content/components/content-subtitle/content-subtitle.js +1 -1
  66. package/modern/components/content/content.css +11 -10
  67. package/modern/components/content/content.js +3 -2
  68. package/modern/components/status-control/components/status-control-icon/status-control-icon.css +7 -7
  69. package/modern/components/status-control/components/status-control-icon/status-control-icon.js +1 -1
  70. package/modern/components/status-control/status-control.css +14 -13
  71. package/modern/components/status-control/status-control.js +5 -3
  72. package/modern/context/file-upload-item-context.d.ts +3 -0
  73. package/modern/context/file-upload-item-context.js +3 -0
  74. package/modern/index.css +4 -4
  75. package/modern/types/file-upload-item-props.d.ts +4 -0
  76. package/moderncssm/Component.js +35 -29
  77. package/moderncssm/components/actions-control/actions-control.module.css +15 -3
  78. package/moderncssm/components/actions-control/actions.js +7 -2
  79. package/moderncssm/components/content/content.js +2 -1
  80. package/moderncssm/components/content/content.module.css +5 -2
  81. package/moderncssm/components/status-control/status-control.js +4 -2
  82. package/moderncssm/components/status-control/status-control.module.css +5 -2
  83. package/moderncssm/context/file-upload-item-context.d.ts +3 -0
  84. package/moderncssm/context/file-upload-item-context.js +3 -0
  85. package/moderncssm/types/file-upload-item-props.d.ts +4 -0
  86. package/package.json +3 -3
  87. package/src/Component.tsx +48 -40
  88. package/src/components/actions-control/actions-control.module.css +12 -0
  89. package/src/components/actions-control/actions.tsx +9 -2
  90. package/src/components/content/content.module.css +4 -1
  91. package/src/components/content/content.tsx +3 -0
  92. package/src/components/status-control/status-control.module.css +4 -1
  93. package/src/components/status-control/status-control.tsx +12 -2
  94. package/src/context/file-upload-item-context.tsx +6 -0
  95. package/src/types/file-upload-item-props.ts +5 -0
  96. package/types/file-upload-item-props.d.ts +4 -0
  97. package/actions-control.module-abc8f125.js +0 -6
  98. package/esm/actions-control.module-7305124e.js +0 -4
  99. package/modern/actions-control.module-0da6088b.js +0 -4
package/modern/components/status-control/status-control.js CHANGED
@@ -7,17 +7,19 @@ import { isUploadingStatus, isSuccessStatus, isErrorStatus } from '../../utils.j
7
7
  import { StatusControlIcon } from './components/status-control-icon/status-control-icon.js';
8
8
  import { StatusControlProgressBar } from './components/status-control-progress-bar/status-control-progress-bar.js';
9
9
 
10
- const styles = {"container":"file-upload-item__container_1rl0y","progress":"file-upload-item__progress_1rl0y","uploading":"file-upload-item__uploading_1rl0y","success":"file-upload-item__success_1rl0y","error":"file-upload-item__error_1rl0y","progressBarTransparent":"file-upload-item__progressBarTransparent_1rl0y","progressBarUploading":"file-upload-item__progressBarUploading_1rl0y","progressBarSuccess":"file-upload-item__progressBarSuccess_1rl0y","progressBarError":"file-upload-item__progressBarError_1rl0y"};
10
+ const styles = {"container":"file-upload-item__container_1ocsp","clickable":"file-upload-item__clickable_1ocsp","progress":"file-upload-item__progress_1ocsp","uploading":"file-upload-item__uploading_1ocsp","success":"file-upload-item__success_1ocsp","error":"file-upload-item__error_1ocsp","progressBarTransparent":"file-upload-item__progressBarTransparent_1ocsp","progressBarUploading":"file-upload-item__progressBarUploading_1ocsp","progressBarSuccess":"file-upload-item__progressBarSuccess_1ocsp","progressBarError":"file-upload-item__progressBarError_1ocsp"};
11
11
  require('./status-control.css')
12
12
 
13
13
  const StatusControl = () => {
14
- const { uploadStatus = 'INITIAL', progressBar, imageUrl } = useContext(FileUploadItemContext);
14
+ const { uploadStatus = 'INITIAL', progressBar, imageUrl, actionsPresent, isClickable, } = useContext(FileUploadItemContext);
15
15
  const progressRef = useRef(null);
16
16
  if (progressRef.current && progressBar) {
17
17
  progressRef.current.style.maskImage = `conic-gradient(red ${(RADIUS / MAX_PROGRESS_BAR_VALUE) * progressBar}deg, transparent 0)`;
18
18
  }
19
19
  const isTransparentProgressBar = () => uploadStatus === 'INITIAL' || uploadStatus === 'UPLOADED' || uploadStatus === 'DELETED';
20
- return (React.createElement("div", { className: styles.container },
20
+ return (React.createElement("div", { className: cn(styles.container, {
21
+ [styles.clickable]: !actionsPresent && isClickable,
22
+ }) },
21
23
  React.createElement(SuperEllipse, { size: 48, ...(imageUrl && { imageUrl }) },
22
24
  React.createElement(StatusControlIcon, null)),
23
25
  React.createElement("div", { ref: progressRef, className: cn(styles.progress, {
package/modern/context/file-upload-item-context.d.ts CHANGED
@@ -16,6 +16,7 @@ type TFileUploadItemContext = {
16
16
  downloadLink?: string;
17
17
  download?: string | true;
18
18
  disableButtons?: boolean;
19
+ isClickable?: boolean;
19
20
  target?: HTMLAttributeAnchorTarget;
20
21
  showDelete?: boolean;
21
22
  customIcon?: ElementType<{
@@ -26,6 +27,8 @@ type TFileUploadItemContext = {
26
27
  customContent?: ElementType;
27
28
  truncate?: boolean;
28
29
  imageUrl?: string;
30
+ actionsPresent?: boolean;
31
+ setActionsPresent?: (present: boolean) => void;
29
32
  };
30
33
  declare const FileUploadItemContext: import("react").Context<TFileUploadItemContext>;
31
34
  export { FileUploadItemContext };
package/modern/context/file-upload-item-context.js CHANGED
@@ -15,6 +15,7 @@ const FileUploadItemContext = createContext({
15
15
  downloadLink: '',
16
16
  download: '',
17
17
  disableButtons: false,
18
+ isClickable: true,
18
19
  target: undefined,
19
20
  showDelete: false,
20
21
  iconStyle: 'gray',
@@ -23,6 +24,8 @@ const FileUploadItemContext = createContext({
23
24
  customContent: undefined,
24
25
  truncate: false,
25
26
  imageUrl: undefined,
27
+ actionsPresent: false,
28
+ setActionsPresent: undefined,
26
29
  });
27
30
 
28
31
  export { FileUploadItemContext };
package/modern/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: p2owp */
1
+ /* hash: 73a7t */
2
2
  :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
3
3
  } /* deprecated */ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
4
4
  } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -24,14 +24,14 @@
24
24
  --gap-2: var(--gap-3xs);
25
25
  --gap-12: var(--gap-s);
26
26
  } :root {
27
- } :root {
28
- } /* сбрасывает синюю подсветку при нажатии */ .file-upload-item__component_1iwkv {
27
+ } /* @deprecated */ /* @deprecated */ /* @deprecated */ /* @deprecated */ /* @deprecated */ :root {
28
+ } /* сбрасывает синюю подсветку при нажатии */ .file-upload-item__component_1h9tv {
29
29
  box-sizing: border-box;
30
30
  display: flex;
31
31
  align-items: flex-start;
32
32
  width: 100%;
33
33
  min-height: 48px;
34
- } .file-upload-item__restore_1iwkv {
34
+ } .file-upload-item__restore_1h9tv {
35
35
  margin-left: var(--gap-12);
36
36
  margin-top: var(--gap-2);
37
37
  }
package/modern/types/file-upload-item-props.d.ts CHANGED
@@ -72,6 +72,10 @@ type FileUploadItemProps = {
72
72
  * Управление активностью кнопок
73
73
  */
74
74
  disableButtons?: boolean;
75
+ /**
76
+ * Управление отображением кликабельности элемента Content
77
+ */
78
+ isClickable?: boolean;
75
79
  /**
76
80
  * Указывает, где открыть скачиваемый документ
77
81
  */
package/moderncssm/Component.js CHANGED
@@ -1,4 +1,4 @@
1
- import React from 'react';
1
+ import React, { useState } from 'react';
2
2
  import cn from 'classnames';
3
3
  import { Actions } from './components/actions-control/actions.js';
4
4
  import { Content } from './components/content/content.js';
@@ -6,35 +6,41 @@ import { StatusControl } from './components/status-control/status-control.js';
6
6
  import { FileUploadItemContext } from './context/file-upload-item-context.js';
7
7
  import styles from './index.module.css';
8
8
 
9
- const FileUploadItemComponent = ({ className, children, id = '0', title = '', subtitle, size, uploadDate, downloadLink, download, uploadStatus, error, showDelete, showRestore, onDelete, onDownload, onRestore, disableButtons, target, dataTestId, customIcon, iconStyle = 'gray', progressBar = 0, customContent, truncate, imageUrl, }) => (React.createElement("div", { className: cn(className, styles.component, uploadStatus && styles[uploadStatus.toLocaleLowerCase()]), "data-test-id": dataTestId },
10
- React.createElement(FileUploadItemContext.Provider
11
- // eslint-disable-next-line react/jsx-no-constructed-context-values
12
- , {
9
+ const FileUploadItemComponent = ({ className, children, id = '0', title = '', subtitle, size, uploadDate, downloadLink, download, uploadStatus, error, showDelete, showRestore, onDelete, onDownload, onRestore, disableButtons, isClickable = true, target, dataTestId, customIcon, iconStyle = 'gray', progressBar = 0, customContent, truncate, imageUrl, }) => {
10
+ const [actionsPresent, setActionsPresent] = useState(false);
11
+ return (React.createElement("div", { className: cn(className, styles.component, uploadStatus && styles[uploadStatus.toLocaleLowerCase()]), "data-test-id": dataTestId },
12
+ React.createElement(FileUploadItemContext.Provider
13
13
  // eslint-disable-next-line react/jsx-no-constructed-context-values
14
- value: {
15
- showRestore,
16
- uploadStatus,
17
- error,
18
- title,
19
- subtitle,
20
- uploadDate,
21
- size,
22
- id,
23
- onDownload,
24
- onDelete,
25
- onRestore,
26
- downloadLink,
27
- download,
28
- disableButtons,
29
- target,
30
- showDelete,
31
- customIcon,
32
- iconStyle,
33
- progressBar,
34
- customContent,
35
- truncate,
36
- imageUrl,
37
- } }, children)));
14
+ , {
15
+ // eslint-disable-next-line react/jsx-no-constructed-context-values
16
+ value: {
17
+ showRestore,
18
+ uploadStatus,
19
+ error,
20
+ title,
21
+ subtitle,
22
+ uploadDate,
23
+ size,
24
+ id,
25
+ onDownload,
26
+ onDelete,
27
+ onRestore,
28
+ downloadLink,
29
+ download,
30
+ disableButtons,
31
+ isClickable,
32
+ target,
33
+ showDelete,
34
+ customIcon,
35
+ iconStyle,
36
+ progressBar,
37
+ customContent,
38
+ truncate,
39
+ imageUrl,
40
+ actionsPresent,
41
+ setActionsPresent,
42
+ } }, children)));
43
+ };
38
44
  const FileUploadItem = Object.assign(FileUploadItemComponent, {
39
45
  StatusControl,
40
46
  Content,
package/moderncssm/components/actions-control/actions-control.module.css CHANGED
@@ -11,13 +11,25 @@
11
11
  }
12
12
 
13
13
  .deleteIconColor {
14
- fill: var(--color-light-text-tertiary);
14
+ fill: var(--color-light-text-tertiary)
15
15
  }
16
16
 
17
+ .deleteIconColor:hover {
18
+ fill: var(--color-light-text-tertiary-hover);
19
+ }
20
+
17
21
  .downloadIconColor {
18
- fill: var(--color-light-text-tertiary);
22
+ fill: var(--color-light-text-tertiary)
19
23
  }
20
24
 
25
+ .downloadIconColor:hover {
26
+ fill: var(--color-light-text-tertiary-hover);
27
+ }
28
+
21
29
  .restoreIconColor {
22
- fill: var(--color-light-text-tertiary);
30
+ fill: var(--color-light-text-tertiary)
23
31
  }
32
+
33
+ .restoreIconColor:hover {
34
+ fill: var(--color-light-text-tertiary-hover);
35
+ }
package/moderncssm/components/actions-control/actions.js CHANGED
@@ -1,4 +1,4 @@
1
- import React, { useContext } from 'react';
1
+ import React, { useContext, useEffect } from 'react';
2
2
  import { FileUploadItemContext } from '../../context/file-upload-item-context.js';
3
3
  import { DeleteButton } from './components/delete-button/delete-button.js';
4
4
  import { DownloadButton } from './components/download-button/download-button.js';
@@ -6,7 +6,12 @@ import { RestoreButton } from './components/restore-button/restore-button.js';
6
6
  import styles from './actions-control.module.css';
7
7
 
8
8
  const Actions = () => {
9
- const { showRestore, downloadLink, showDelete } = useContext(FileUploadItemContext);
9
+ const { showRestore, downloadLink, showDelete, setActionsPresent } = useContext(FileUploadItemContext);
10
+ useEffect(() => {
11
+ if (setActionsPresent) {
12
+ setActionsPresent(!!(showRestore || downloadLink || showDelete));
13
+ }
14
+ }, [showRestore, downloadLink, showDelete, setActionsPresent]);
10
15
  return (React.createElement("div", { className: styles.container },
11
16
  showRestore && React.createElement(RestoreButton, null),
12
17
  Boolean(downloadLink) && !showRestore && React.createElement(DownloadButton, null),
package/moderncssm/components/content/content.js CHANGED
@@ -6,12 +6,13 @@ import { ContentSubtitle } from './components/content-subtitle/content-subtitle.
6
6
  import styles from './content.module.css';
7
7
 
8
8
  const Content = () => {
9
- const { title, customContent: CustomContent, truncate, subtitle, showRestore, } = useContext(FileUploadItemContext);
9
+ const { title, customContent: CustomContent, truncate, subtitle, showRestore, actionsPresent, isClickable, } = useContext(FileUploadItemContext);
10
10
  if (CustomContent) {
11
11
  return React.createElement(CustomContent, null);
12
12
  }
13
13
  return (React.createElement("div", { className: cn(styles.container, {
14
14
  [styles.single]: !subtitle,
15
+ [styles.clickable]: !actionsPresent && isClickable,
15
16
  }) },
16
17
  title && (React.createElement(Text, { className: cn(styles.title, {
17
18
  [styles.truncate]: truncate,
package/moderncssm/components/content/content.module.css CHANGED
@@ -3,10 +3,13 @@
3
3
  .container {
4
4
  padding: var(--gap-2) 0 0 var(--gap-16);
5
5
  flex-grow: 1;
6
- min-width: 0;
7
- cursor: pointer
6
+ min-width: 0
8
7
  }
9
8
 
9
+ .container.clickable {
10
+ cursor: pointer;
11
+ }
12
+
10
13
  .container.single {
11
14
  display: flex;
12
15
  flex-direction: column;
package/moderncssm/components/status-control/status-control.js CHANGED
@@ -9,13 +9,15 @@ import { StatusControlProgressBar } from './components/status-control-progress-b
9
9
  import styles from './status-control.module.css';
10
10
 
11
11
  const StatusControl = () => {
12
- const { uploadStatus = 'INITIAL', progressBar, imageUrl } = useContext(FileUploadItemContext);
12
+ const { uploadStatus = 'INITIAL', progressBar, imageUrl, actionsPresent, isClickable, } = useContext(FileUploadItemContext);
13
13
  const progressRef = useRef(null);
14
14
  if (progressRef.current && progressBar) {
15
15
  progressRef.current.style.maskImage = `conic-gradient(red ${(RADIUS / MAX_PROGRESS_BAR_VALUE) * progressBar}deg, transparent 0)`;
16
16
  }
17
17
  const isTransparentProgressBar = () => uploadStatus === 'INITIAL' || uploadStatus === 'UPLOADED' || uploadStatus === 'DELETED';
18
- return (React.createElement("div", { className: styles.container },
18
+ return (React.createElement("div", { className: cn(styles.container, {
19
+ [styles.clickable]: !actionsPresent && isClickable,
20
+ }) },
19
21
  React.createElement(SuperEllipse, { size: 48, ...(imageUrl && { imageUrl }) },
20
22
  React.createElement(StatusControlIcon, null)),
21
23
  React.createElement("div", { ref: progressRef, className: cn(styles.progress, {
package/moderncssm/components/status-control/status-control.module.css CHANGED
@@ -1,10 +1,13 @@
1
1
  /* */
2
2
 
3
3
  .container {
4
- position: relative;
5
- cursor: pointer
4
+ position: relative
6
5
  }
7
6
 
7
+ .container.clickable {
8
+ cursor: pointer;
9
+ }
10
+
8
11
  .container .progress {
9
12
  position: absolute;
10
13
  top: var(--gap-4-neg);
package/moderncssm/context/file-upload-item-context.d.ts CHANGED
@@ -16,6 +16,7 @@ type TFileUploadItemContext = {
16
16
  downloadLink?: string;
17
17
  download?: string | true;
18
18
  disableButtons?: boolean;
19
+ isClickable?: boolean;
19
20
  target?: HTMLAttributeAnchorTarget;
20
21
  showDelete?: boolean;
21
22
  customIcon?: ElementType<{
@@ -26,6 +27,8 @@ type TFileUploadItemContext = {
26
27
  customContent?: ElementType;
27
28
  truncate?: boolean;
28
29
  imageUrl?: string;
30
+ actionsPresent?: boolean;
31
+ setActionsPresent?: (present: boolean) => void;
29
32
  };
30
33
  declare const FileUploadItemContext: import("react").Context<TFileUploadItemContext>;
31
34
  export { FileUploadItemContext };
package/moderncssm/context/file-upload-item-context.js CHANGED
@@ -15,6 +15,7 @@ const FileUploadItemContext = createContext({
15
15
  downloadLink: '',
16
16
  download: '',
17
17
  disableButtons: false,
18
+ isClickable: true,
18
19
  target: undefined,
19
20
  showDelete: false,
20
21
  iconStyle: 'gray',
@@ -23,6 +24,8 @@ const FileUploadItemContext = createContext({
23
24
  customContent: undefined,
24
25
  truncate: false,
25
26
  imageUrl: undefined,
27
+ actionsPresent: false,
28
+ setActionsPresent: undefined,
26
29
  });
27
30
 
28
31
  export { FileUploadItemContext };
package/moderncssm/types/file-upload-item-props.d.ts CHANGED
@@ -72,6 +72,10 @@ type FileUploadItemProps = {
72
72
  * Управление активностью кнопок
73
73
  */
74
74
  disableButtons?: boolean;
75
+ /**
76
+ * Управление отображением кликабельности элемента Content
77
+ */
78
+ isClickable?: boolean;
75
79
  /**
76
80
  * Указывает, где открыть скачиваемый документ
77
81
  */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alfalab/core-components-file-upload-item",
3
- "version": "6.2.6",
3
+ "version": "6.3.0",
4
4
  "description": "",
5
5
  "keywords": [],
6
6
  "license": "MIT",
@@ -18,10 +18,10 @@
18
18
  "@alfalab/core-components-icon-button": "^6.11.10",
19
19
  "@alfalab/core-components-icon-view": "^3.10.1",
20
20
  "@alfalab/icons-glyph": "^2.210.0",
21
- "@alfalab/core-components-typography": "^4.12.0",
21
+ "@alfalab/core-components-typography": "^4.13.0",
22
22
  "classnames": "^2.5.1",
23
23
  "tslib": "^2.4.0"
24
24
  },
25
25
  "themesVersion": "13.7.2",
26
- "varsVersion": "9.19.0"
26
+ "varsVersion": "9.20.0"
27
27
  }
package/src/Component.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import React from 'react';
1
+ import React, { useState } from 'react';
2
2
  import cn from 'classnames';
3
3
 
4
4
  import { Actions } from './components/actions-control';
@@ -27,6 +27,7 @@ export const FileUploadItemComponent: React.FC<FileUploadItemProps> = ({
27
27
  onDownload,
28
28
  onRestore,
29
29
  disableButtons,
30
+ isClickable = true,
30
31
  target,
31
32
  dataTestId,
32
33
  customIcon,
@@ -35,46 +36,53 @@ export const FileUploadItemComponent: React.FC<FileUploadItemProps> = ({
35
36
  customContent,
36
37
  truncate,
37
38
  imageUrl,
38
- }) => (
39
- <div
40
- className={cn(
41
- className,
42
- styles.component,
43
- uploadStatus && styles[uploadStatus.toLocaleLowerCase()],
44
- )}
45
- data-test-id={dataTestId}
46
- >
47
- <FileUploadItemContext.Provider
48
- // eslint-disable-next-line react/jsx-no-constructed-context-values
49
- value={{
50
- showRestore,
51
- uploadStatus,
52
- error,
53
- title,
54
- subtitle,
55
- uploadDate,
56
- size,
57
- id,
58
- onDownload,
59
- onDelete,
60
- onRestore,
61
- downloadLink,
62
- download,
63
- disableButtons,
64
- target,
65
- showDelete,
66
- customIcon,
67
- iconStyle,
68
- progressBar,
69
- customContent,
70
- truncate,
71
- imageUrl,
72
- }}
39
+ }) => {
40
+ const [actionsPresent, setActionsPresent] = useState(false);
41
+
42
+ return (
43
+ <div
44
+ className={cn(
45
+ className,
46
+ styles.component,
47
+ uploadStatus && styles[uploadStatus.toLocaleLowerCase()],
48
+ )}
49
+ data-test-id={dataTestId}
73
50
  >
74
- {children}
75
- </FileUploadItemContext.Provider>
76
- </div>
77
- );
51
+ <FileUploadItemContext.Provider
52
+ // eslint-disable-next-line react/jsx-no-constructed-context-values
53
+ value={{
54
+ showRestore,
55
+ uploadStatus,
56
+ error,
57
+ title,
58
+ subtitle,
59
+ uploadDate,
60
+ size,
61
+ id,
62
+ onDownload,
63
+ onDelete,
64
+ onRestore,
65
+ downloadLink,
66
+ download,
67
+ disableButtons,
68
+ isClickable,
69
+ target,
70
+ showDelete,
71
+ customIcon,
72
+ iconStyle,
73
+ progressBar,
74
+ customContent,
75
+ truncate,
76
+ imageUrl,
77
+ actionsPresent,
78
+ setActionsPresent,
79
+ }}
80
+ >
81
+ {children}
82
+ </FileUploadItemContext.Provider>
83
+ </div>
84
+ );
85
+ };
78
86
 
79
87
  export const FileUploadItem = Object.assign(FileUploadItemComponent, {
80
88
  StatusControl,
package/src/components/actions-control/actions-control.module.css CHANGED
@@ -12,12 +12,24 @@
12
12
 
13
13
  .deleteIconColor {
14
14
  fill: var(--color-light-text-tertiary);
15
+
16
+ &:hover {
17
+ fill: var(--color-light-text-tertiary-hover);
18
+ }
15
19
  }
16
20
 
17
21
  .downloadIconColor {
18
22
  fill: var(--color-light-text-tertiary);
23
+
24
+ &:hover {
25
+ fill: var(--color-light-text-tertiary-hover);
26
+ }
19
27
  }
20
28
 
21
29
  .restoreIconColor {
22
30
  fill: var(--color-light-text-tertiary);
31
+
32
+ &:hover {
33
+ fill: var(--color-light-text-tertiary-hover);
34
+ }
23
35
  }
package/src/components/actions-control/actions.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import React, { useContext } from 'react';
1
+ import React, { useContext, useEffect } from 'react';
2
2
 
3
3
  import { FileUploadItemContext } from '../../context/file-upload-item-context';
4
4
 
@@ -9,7 +9,14 @@ import { RestoreButton } from './components/restore-button';
9
9
  import styles from './actions-control.module.css';
10
10
 
11
11
  export const Actions = () => {
12
- const { showRestore, downloadLink, showDelete } = useContext(FileUploadItemContext);
12
+ const { showRestore, downloadLink, showDelete, setActionsPresent } =
13
+ useContext(FileUploadItemContext);
14
+
15
+ useEffect(() => {
16
+ if (setActionsPresent) {
17
+ setActionsPresent(!!(showRestore || downloadLink || showDelete));
18
+ }
19
+ }, [showRestore, downloadLink, showDelete, setActionsPresent]);
13
20
 
14
21
  return (
15
22
  <div className={styles.container}>
package/src/components/content/content.module.css CHANGED
@@ -4,7 +4,10 @@
4
4
  padding: var(--gap-2) 0 0 var(--gap-16);
5
5
  flex-grow: 1;
6
6
  min-width: 0;
7
- cursor: pointer;
7
+
8
+ &.clickable {
9
+ cursor: pointer;
10
+ }
8
11
 
9
12
  &.single {
10
13
  display: flex;
package/src/components/content/content.tsx CHANGED
@@ -16,6 +16,8 @@ export const Content = () => {
16
16
  truncate,
17
17
  subtitle,
18
18
  showRestore,
19
+ actionsPresent,
20
+ isClickable,
19
21
  } = useContext(FileUploadItemContext);
20
22
 
21
23
  if (CustomContent) {
@@ -26,6 +28,7 @@ export const Content = () => {
26
28
  <div
27
29
  className={cn(styles.container, {
28
30
  [styles.single]: !subtitle,
31
+ [styles.clickable]: !actionsPresent && isClickable,
29
32
  })}
30
33
  >
31
34
  {title && (
package/src/components/status-control/status-control.module.css CHANGED
@@ -2,7 +2,10 @@
2
2
 
3
3
  .container {
4
4
  position: relative;
5
- cursor: pointer;
5
+
6
+ &.clickable {
7
+ cursor: pointer;
8
+ }
6
9
 
7
10
  & .progress {
8
11
  position: absolute;
package/src/components/status-control/status-control.tsx CHANGED
@@ -13,7 +13,13 @@ import { StatusControlProgressBar } from './components/status-control-progress-b
13
13
  import styles from './status-control.module.css';
14
14
 
15
15
  export const StatusControl = () => {
16
- const { uploadStatus = 'INITIAL', progressBar, imageUrl } = useContext(FileUploadItemContext);
16
+ const {
17
+ uploadStatus = 'INITIAL',
18
+ progressBar,
19
+ imageUrl,
20
+ actionsPresent,
21
+ isClickable,
22
+ } = useContext(FileUploadItemContext);
17
23
  const progressRef = useRef<HTMLDivElement>(null);
18
24
 
19
25
  if (progressRef.current && progressBar) {
@@ -26,7 +32,11 @@ export const StatusControl = () => {
26
32
  uploadStatus === 'INITIAL' || uploadStatus === 'UPLOADED' || uploadStatus === 'DELETED';
27
33
 
28
34
  return (
29
- <div className={styles.container}>
35
+ <div
36
+ className={cn(styles.container, {
37
+ [styles.clickable]: !actionsPresent && isClickable,
38
+ })}
39
+ >
30
40
  <SuperEllipse size={48} {...(imageUrl && { imageUrl })}>
31
41
  <StatusControlIcon />
32
42
  </SuperEllipse>