@manuscripts/style-guide 1.1.15-LEAN-2651 → 1.1.15-LEAN-2669
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.
- package/dist/cjs/components/FileManager/FileSectionItem/FileInfo.js +22 -3
- package/dist/cjs/components/FileManager/FileSectionItem/FileSectionItem.js +1 -1
- package/dist/es/components/FileManager/FileSectionItem/FileInfo.js +21 -2
- package/dist/es/components/FileManager/FileSectionItem/FileSectionItem.js +1 -1
- package/dist/types/components/FileManager/FileSectionItem/FileInfo.d.ts +3 -0
- package/dist/types/components/FileManager/FileSectionItem/FileSectionItem.d.ts +1 -0
- package/package.json +3 -2
|
@@ -26,11 +26,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
26
26
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
27
27
|
};
|
|
28
28
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
29
|
-
exports.FileDescription = exports.FileName = exports.FileNameContainer = exports.FileTitle = exports.FileNameTitleContainer = exports.FileInfoContainer = exports.FileInfo = void 0;
|
|
29
|
+
exports.FileDescription = exports.FileDate = exports.FileName = exports.FileNameContainer = exports.FileTitle = exports.FileNameTitleContainer = exports.FileInfoContainer = exports.FileDateContainer = exports.FileInfo = void 0;
|
|
30
30
|
const react_1 = __importStar(require("react"));
|
|
31
31
|
const styled_components_1 = __importDefault(require("styled-components"));
|
|
32
32
|
const FileManager_1 = require("../FileManager");
|
|
33
|
-
const FileInfo = ({ showAttachmentName, title, fileAttachmentName, fileExtension, attachmentId, dispatch, }) => {
|
|
33
|
+
const FileInfo = ({ showAttachmentName, title, fileAttachmentName, fileExtension, attachmentId, dispatch, fileCreatedDate, }) => {
|
|
34
34
|
const fileName = fileAttachmentName.substring(0, fileAttachmentName.lastIndexOf('.'));
|
|
35
35
|
const can = (0, react_1.useContext)(FileManager_1.PermissionsContext);
|
|
36
36
|
return (react_1.default.createElement(exports.FileInfoContainer, null,
|
|
@@ -42,9 +42,18 @@ const FileInfo = ({ showAttachmentName, title, fileAttachmentName, fileExtension
|
|
|
42
42
|
react_1.default.createElement(exports.FileName, null, fileName),
|
|
43
43
|
react_1.default.createElement("div", null,
|
|
44
44
|
".",
|
|
45
|
-
fileExtension)))
|
|
45
|
+
fileExtension))),
|
|
46
|
+
fileCreatedDate && (react_1.default.createElement(exports.FileDateContainer, null,
|
|
47
|
+
react_1.default.createElement(exports.FileDate, null, fileCreatedDate)))),
|
|
48
|
+
' '));
|
|
46
49
|
};
|
|
47
50
|
exports.FileInfo = FileInfo;
|
|
51
|
+
exports.FileDateContainer = styled_components_1.default.div `
|
|
52
|
+
line-height: 20px;
|
|
53
|
+
overflow: hidden;
|
|
54
|
+
width: 100%;
|
|
55
|
+
display: none;
|
|
56
|
+
`;
|
|
48
57
|
exports.FileInfoContainer = styled_components_1.default.div `
|
|
49
58
|
margin-left: 8px;
|
|
50
59
|
overflow: hidden;
|
|
@@ -53,10 +62,15 @@ exports.FileInfoContainer = styled_components_1.default.div `
|
|
|
53
62
|
justify-content: center;
|
|
54
63
|
align-items: start;
|
|
55
64
|
width: 100%;
|
|
65
|
+
|
|
66
|
+
&:hover ${exports.FileDateContainer} {
|
|
67
|
+
display: flex;
|
|
68
|
+
}
|
|
56
69
|
`;
|
|
57
70
|
exports.FileNameTitleContainer = styled_components_1.default.div `
|
|
58
71
|
display: flex;
|
|
59
72
|
width: 100%;
|
|
73
|
+
align-items: baseline;
|
|
60
74
|
`;
|
|
61
75
|
exports.FileTitle = styled_components_1.default.div `
|
|
62
76
|
color: ${(props) => props.theme.colors.text.primary};
|
|
@@ -79,6 +93,11 @@ exports.FileName = styled_components_1.default.div `
|
|
|
79
93
|
text-overflow: ellipsis;
|
|
80
94
|
white-space: nowrap;
|
|
81
95
|
overflow: hidden;
|
|
96
|
+
width: 50px;
|
|
97
|
+
`;
|
|
98
|
+
exports.FileDate = styled_components_1.default.div `
|
|
99
|
+
color: '#6E6E6E';
|
|
100
|
+
font-size: 12px;
|
|
82
101
|
`;
|
|
83
102
|
exports.FileDescription = styled_components_1.default.div `
|
|
84
103
|
color: ${(props) => props.theme.colors.text.secondary};
|
|
@@ -27,7 +27,7 @@ const FileSectionItem = ({ fileSection, externalFile, title, showAttachmentName
|
|
|
27
27
|
}
|
|
28
28
|
} },
|
|
29
29
|
react_1.default.createElement(FileTypeIcon_1.FileTypeIcon, { withDot: isMainManuscript, fileExtension: fileExtension, alt: externalFile.name }),
|
|
30
|
-
react_1.default.createElement(FileInfo_1.FileInfo, { fileExtension: fileExtension, showAttachmentName: showAttachmentName, fileAttachmentName: externalFile.name, title: title, attachmentId: externalFile.id, dispatch: dispatch })),
|
|
30
|
+
react_1.default.createElement(FileInfo_1.FileInfo, { fileExtension: fileExtension, fileCreatedDate: externalFile.createdDate, showAttachmentName: showAttachmentName, fileAttachmentName: externalFile.name, title: title, attachmentId: externalFile.id, dispatch: dispatch })),
|
|
31
31
|
onClose && (react_1.default.createElement(IconCloseButton, { onClick: (e) => {
|
|
32
32
|
e.preventDefault();
|
|
33
33
|
onClose();
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React, { useContext } from 'react';
|
|
2
2
|
import styled from 'styled-components';
|
|
3
3
|
import { PermissionsContext } from '../FileManager';
|
|
4
|
-
export const FileInfo = ({ showAttachmentName, title, fileAttachmentName, fileExtension, attachmentId, dispatch, }) => {
|
|
4
|
+
export const FileInfo = ({ showAttachmentName, title, fileAttachmentName, fileExtension, attachmentId, dispatch, fileCreatedDate, }) => {
|
|
5
5
|
const fileName = fileAttachmentName.substring(0, fileAttachmentName.lastIndexOf('.'));
|
|
6
6
|
const can = useContext(PermissionsContext);
|
|
7
7
|
return (React.createElement(FileInfoContainer, null,
|
|
@@ -13,8 +13,17 @@ export const FileInfo = ({ showAttachmentName, title, fileAttachmentName, fileEx
|
|
|
13
13
|
React.createElement(FileName, null, fileName),
|
|
14
14
|
React.createElement("div", null,
|
|
15
15
|
".",
|
|
16
|
-
fileExtension)))
|
|
16
|
+
fileExtension))),
|
|
17
|
+
fileCreatedDate && (React.createElement(FileDateContainer, null,
|
|
18
|
+
React.createElement(FileDate, null, fileCreatedDate)))),
|
|
19
|
+
' '));
|
|
17
20
|
};
|
|
21
|
+
export const FileDateContainer = styled.div `
|
|
22
|
+
line-height: 20px;
|
|
23
|
+
overflow: hidden;
|
|
24
|
+
width: 100%;
|
|
25
|
+
display: none;
|
|
26
|
+
`;
|
|
18
27
|
export const FileInfoContainer = styled.div `
|
|
19
28
|
margin-left: 8px;
|
|
20
29
|
overflow: hidden;
|
|
@@ -23,10 +32,15 @@ export const FileInfoContainer = styled.div `
|
|
|
23
32
|
justify-content: center;
|
|
24
33
|
align-items: start;
|
|
25
34
|
width: 100%;
|
|
35
|
+
|
|
36
|
+
&:hover ${FileDateContainer} {
|
|
37
|
+
display: flex;
|
|
38
|
+
}
|
|
26
39
|
`;
|
|
27
40
|
export const FileNameTitleContainer = styled.div `
|
|
28
41
|
display: flex;
|
|
29
42
|
width: 100%;
|
|
43
|
+
align-items: baseline;
|
|
30
44
|
`;
|
|
31
45
|
export const FileTitle = styled.div `
|
|
32
46
|
color: ${(props) => props.theme.colors.text.primary};
|
|
@@ -49,6 +63,11 @@ export const FileName = styled.div `
|
|
|
49
63
|
text-overflow: ellipsis;
|
|
50
64
|
white-space: nowrap;
|
|
51
65
|
overflow: hidden;
|
|
66
|
+
width: 50px;
|
|
67
|
+
`;
|
|
68
|
+
export const FileDate = styled.div `
|
|
69
|
+
color: '#6E6E6E';
|
|
70
|
+
font-size: 12px;
|
|
52
71
|
`;
|
|
53
72
|
export const FileDescription = styled.div `
|
|
54
73
|
color: ${(props) => props.theme.colors.text.secondary};
|
|
@@ -21,7 +21,7 @@ export const FileSectionItem = ({ fileSection, externalFile, title, showAttachme
|
|
|
21
21
|
}
|
|
22
22
|
} },
|
|
23
23
|
React.createElement(FileTypeIcon, { withDot: isMainManuscript, fileExtension: fileExtension, alt: externalFile.name }),
|
|
24
|
-
React.createElement(FileInfo, { fileExtension: fileExtension, showAttachmentName: showAttachmentName, fileAttachmentName: externalFile.name, title: title, attachmentId: externalFile.id, dispatch: dispatch })),
|
|
24
|
+
React.createElement(FileInfo, { fileExtension: fileExtension, fileCreatedDate: externalFile.createdDate, showAttachmentName: showAttachmentName, fileAttachmentName: externalFile.name, title: title, attachmentId: externalFile.id, dispatch: dispatch })),
|
|
25
25
|
onClose && (React.createElement(IconCloseButton, { onClick: (e) => {
|
|
26
26
|
e.preventDefault();
|
|
27
27
|
onClose();
|
|
@@ -6,11 +6,14 @@ export declare const FileInfo: React.FC<{
|
|
|
6
6
|
fileAttachmentName: string;
|
|
7
7
|
fileExtension: string;
|
|
8
8
|
attachmentId: string;
|
|
9
|
+
fileCreatedDate: Date;
|
|
9
10
|
dispatch?: Dispatch<Action>;
|
|
10
11
|
}>;
|
|
12
|
+
export declare const FileDateContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
11
13
|
export declare const FileInfoContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
12
14
|
export declare const FileNameTitleContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
13
15
|
export declare const FileTitle: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
14
16
|
export declare const FileNameContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
15
17
|
export declare const FileName: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
18
|
+
export declare const FileDate: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
16
19
|
export declare const FileDescription: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@manuscripts/style-guide",
|
|
3
3
|
"description": "Shared components for Manuscripts applications",
|
|
4
|
-
"version": "1.1.15-LEAN-
|
|
4
|
+
"version": "1.1.15-LEAN-2669",
|
|
5
5
|
"repository": "github:Atypon-OpenSource/manuscripts-style-guide",
|
|
6
6
|
"license": "Apache-2.0",
|
|
7
7
|
"main": "dist/cjs",
|
|
@@ -36,7 +36,7 @@
|
|
|
36
36
|
"@formatjs/intl-relativetimeformat": "^4.5.9",
|
|
37
37
|
"@formatjs/intl-utils": "^2.2.0",
|
|
38
38
|
"@manuscripts/assets": "^0.6.2",
|
|
39
|
-
"@manuscripts/transform": "1.3.
|
|
39
|
+
"@manuscripts/transform": "^1.3.4",
|
|
40
40
|
"@manuscripts/json-schema": "^2.1.0",
|
|
41
41
|
"@manuscripts/title-editor": "^1.1.0",
|
|
42
42
|
"@manuscripts/comment-editor": "^1.0.3",
|
|
@@ -75,6 +75,7 @@
|
|
|
75
75
|
"@babel/preset-react": "^7.18.6",
|
|
76
76
|
"@babel/preset-typescript": "^7.18.6",
|
|
77
77
|
"@inline-svg-unique-id/react": "^1.2.3",
|
|
78
|
+
"@manuscripts/data": "^1.0.2",
|
|
78
79
|
"@manuscripts/eslint-config": "^0.5.1",
|
|
79
80
|
"@manuscripts/examples": "^0.0.7",
|
|
80
81
|
"@storybook/addon-actions": "^6.5.15",
|