@sphereon/ui-components.ssi-react 0.1.3-unstable.173 → 0.1.3-unstable.174
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/components/fields/ComboBox/index.js +1 -1
- package/dist/components/indicators/SSIActivityIndicator/index.js +1 -1
- package/dist/components/views/CredentialViewItem/index.js +2 -5
- package/dist/components/views/JSONDataView/index.js +21 -25
- package/dist/components/views/SSITableView/index.js +5 -5
- package/dist/index.d.ts +1 -1
- package/dist/index.js +1 -1
- package/dist/styles/components/components/SSITableView/index.js +5 -5
- package/package.json +4 -4
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import { elementColors } from '@sphereon/ui-components.core';
|
|
3
|
-
import { Oval } from
|
|
3
|
+
import { Oval } from 'react-loader-spinner';
|
|
4
4
|
const SSIActivityIndicator = (props) => {
|
|
5
5
|
const { size = 80, color = elementColors.blue, style } = props;
|
|
6
6
|
return (_jsx(Oval, { width: size, height: size, color: color, secondaryColor: color, strokeWidth: 5, strokeWidthSecondary: 5, visible: true, wrapperStyle: style }));
|
|
@@ -7,11 +7,8 @@ const CredentialViewItem = (props) => {
|
|
|
7
7
|
const { credentialStatus, credentialTitle, issuerName, showTime = false, showCard = true, credentialBranding, style } = props;
|
|
8
8
|
const issueDate = showTime ? toLocalDateTimeString(props.issueDate) : toLocalDateString(props.issueDate);
|
|
9
9
|
const expirationDate = props.expirationDate
|
|
10
|
-
? `${Localization.translate('credentials_view_item_expires_on')} ${showTime
|
|
11
|
-
? toLocalDateTimeString(props.expirationDate)
|
|
12
|
-
: toLocalDateString(props.expirationDate)}`
|
|
10
|
+
? `${Localization.translate('credentials_view_item_expires_on')} ${showTime ? toLocalDateTimeString(props.expirationDate) : toLocalDateString(props.expirationDate)}`
|
|
13
11
|
: Localization.translate('credential_status_never_expires_date_label');
|
|
14
|
-
return (_jsxs(Container, { style: { ...style }, children: [showCard &&
|
|
15
|
-
_jsx(CredentialMiniCardView, { ...credentialBranding }), _jsxs(DetailsContainer, { children: [_jsxs(ContentRowContainer, { children: [_jsxs("div", { children: [_jsx(TitleCaption, { children: credentialTitle }), _jsx(IssuerCaption, { children: issuerName })] }), _jsx(StatusContainer, { children: _jsx(SSIStatusLabel, { status: credentialStatus }) })] }), _jsxs(ContentRowContainer, { children: [_jsx(IssueDateCaption, { children: issueDate }), _jsx(ExpirationDateCaption, { children: expirationDate })] })] })] }));
|
|
12
|
+
return (_jsxs(Container, { style: { ...style }, children: [showCard && _jsx(CredentialMiniCardView, { ...credentialBranding }), _jsxs(DetailsContainer, { children: [_jsxs(ContentRowContainer, { children: [_jsxs("div", { children: [_jsx(TitleCaption, { children: credentialTitle }), _jsx(IssuerCaption, { children: issuerName })] }), _jsx(StatusContainer, { children: _jsx(SSIStatusLabel, { status: credentialStatus }) })] }), _jsxs(ContentRowContainer, { children: [_jsx(IssueDateCaption, { children: issueDate }), _jsx(ExpirationDateCaption, { children: expirationDate })] })] })] }));
|
|
16
13
|
};
|
|
17
14
|
export default CredentialViewItem;
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import React, { useEffect } from 'react';
|
|
3
3
|
import { JSONTree } from 'react-json-tree';
|
|
4
|
-
import { backgroundColors, calculateAspectRatio, fontColors, isBase64ImageUri, isBoolean, Localization, parseToBoolean } from '@sphereon/ui-components.core';
|
|
4
|
+
import { backgroundColors, calculateAspectRatio, fontColors, isBase64ImageUri, isBoolean, Localization, parseToBoolean, } from '@sphereon/ui-components.core';
|
|
5
5
|
import SSICheckmarkBadge from '../../assets/badges/SSICheckmarkBadge/index.js';
|
|
6
6
|
import SSIExclamationMarkBadge from '../../assets/badges/SSIExclamationMarkBadge/index.js';
|
|
7
7
|
import { getImageSize } from '../../../utils/index.js';
|
|
8
|
-
import { JSONDataViewContainerStyled as Container, JSONDataViewHeaderContainerStyled as HeaderContainer, JSONDataViewColumnHeaderCaptionStyled as ColumnHeaderCaption, JSONDataViewDataContainerCaptionStyled as ContainerCaption, JSONDataViewDataImageValueStyled as ImageValue, JSONDataViewDataTextValueStyled as TextValue, JSONDataViewDataLabelStyled as Label } from '../../../styles/index.js';
|
|
8
|
+
import { JSONDataViewContainerStyled as Container, JSONDataViewHeaderContainerStyled as HeaderContainer, JSONDataViewColumnHeaderCaptionStyled as ColumnHeaderCaption, JSONDataViewDataContainerCaptionStyled as ContainerCaption, JSONDataViewDataImageValueStyled as ImageValue, JSONDataViewDataTextValueStyled as TextValue, JSONDataViewDataLabelStyled as Label, } from '../../../styles/index.js';
|
|
9
9
|
const JSONDataView = (props) => {
|
|
10
10
|
const { showHeader = true, shouldExpandNodeInitially = () => false } = props;
|
|
11
11
|
const expandNodeInitially = typeof shouldExpandNodeInitially === 'function' ? shouldExpandNodeInitially : () => shouldExpandNodeInitially;
|
|
@@ -28,8 +28,8 @@ const JSONDataView = (props) => {
|
|
|
28
28
|
dimensions: {
|
|
29
29
|
height: dimensions.height,
|
|
30
30
|
width: dimensions.width,
|
|
31
|
-
aspectRatio: calculateAspectRatio(dimensions.width, dimensions.height)
|
|
32
|
-
}
|
|
31
|
+
aspectRatio: calculateAspectRatio(dimensions.width, dimensions.height),
|
|
32
|
+
},
|
|
33
33
|
};
|
|
34
34
|
}
|
|
35
35
|
else {
|
|
@@ -48,14 +48,12 @@ const JSONDataView = (props) => {
|
|
|
48
48
|
if (isBoolean(value)) {
|
|
49
49
|
return parseToBoolean(value) ? _jsx(SSICheckmarkBadge, {}) : _jsx(SSIExclamationMarkBadge, {});
|
|
50
50
|
}
|
|
51
|
-
if (typeof value === 'object'
|
|
52
|
-
&& value !== null
|
|
53
|
-
&& 'uri' in value) {
|
|
51
|
+
if (typeof value === 'object' && value !== null && 'uri' in value) {
|
|
54
52
|
const imageData = value;
|
|
55
|
-
return _jsx(ImageValue, { style: {
|
|
53
|
+
return (_jsx(ImageValue, { style: {
|
|
56
54
|
aspectRatio: imageData.dimensions?.aspectRatio,
|
|
57
55
|
backgroundImage: `url(${imageData.uri})`,
|
|
58
|
-
} });
|
|
56
|
+
} }));
|
|
59
57
|
}
|
|
60
58
|
return _jsx(TextValue, { children: value?.toString() });
|
|
61
59
|
};
|
|
@@ -65,21 +63,19 @@ const JSONDataView = (props) => {
|
|
|
65
63
|
const isCustomNode = (value) => {
|
|
66
64
|
return typeof value === 'object' && value !== null && 'uri' in value && 'dimensions' in value;
|
|
67
65
|
};
|
|
68
|
-
return (_jsxs(Container, { children: [showHeader &&
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
},
|
|
83
|
-
}, hideRoot: true, shouldExpandNodeInitially: expandNodeInitially, getItemString: getItemString, labelRenderer: labelRenderer, valueRenderer: valueRenderer, isCustomNode: isCustomNode, data: data }) })] }));
|
|
66
|
+
return (_jsxs(Container, { children: [showHeader && (_jsxs(HeaderContainer, { children: [_jsx(ColumnHeaderCaption, { children: Localization.translate('json_data_view_attribute_column_label') }), _jsx(ColumnHeaderCaption, { children: Localization.translate('json_data_view_value_column_label') })] })), _jsx(ContainerCaption, { onMouseEnter: () => setFocused(true), onMouseLeave: () => setFocused(false), children: data && (_jsx(JSONTree, { theme: {
|
|
67
|
+
base0D: fontColors.dark,
|
|
68
|
+
tree: {
|
|
69
|
+
margin: 0,
|
|
70
|
+
backgroundColor: backgroundColors.primaryLight,
|
|
71
|
+
},
|
|
72
|
+
arrowContainer: {
|
|
73
|
+
paddingRight: 6,
|
|
74
|
+
},
|
|
75
|
+
arrow: {
|
|
76
|
+
fontSize: 10,
|
|
77
|
+
...(!focused && { display: 'none' }),
|
|
78
|
+
},
|
|
79
|
+
}, hideRoot: true, shouldExpandNodeInitially: expandNodeInitially, getItemString: getItemString, labelRenderer: labelRenderer, valueRenderer: valueRenderer, isCustomNode: isCustomNode, data: data })) })] }));
|
|
84
80
|
};
|
|
85
81
|
export default JSONDataView;
|
|
@@ -9,10 +9,10 @@ import SSIStatusLabel from '../../labels/SSIStatusLabel/index.js';
|
|
|
9
9
|
import CredentialMiniCardView from '../CredentialMiniCardView/index.js';
|
|
10
10
|
import DropDownList from '../../lists/DropDownList/index.js';
|
|
11
11
|
import { SSITableViewCellContainerStyled as CellContainer, SSITableViewContainerStyled as Container, SSITableViewHeaderCellContainerStyled as HeaderCellContainer, SSITableViewLabelCellStyled as LabelCell, SSITableViewResultCountCaptionStyled as ResultCountCaption, SSITableViewHeaderRowContainerStyled as HeaderRowContainer, SSITableViewRowContainerStyled as RowContainer, SSITableViewTableContainerStyled as TableContainer, TableViewRowSelectionCheckboxContainerStyled as RowSelectionCheckboxContainer, } from '../../../styles/index.js';
|
|
12
|
-
import { TableCellType } from '../../../types/index.js';
|
|
12
|
+
import { TableCellType, } from '../../../types/index.js';
|
|
13
13
|
import PaginationControls from './PaginationControls/index.js';
|
|
14
|
-
import ComboBox from
|
|
15
|
-
import CredentialDetailsView from
|
|
14
|
+
import ComboBox from '../../fields/ComboBox/index.js';
|
|
15
|
+
import CredentialDetailsView from '../CredentialViewItem/index.js';
|
|
16
16
|
function IndeterminateCheckbox({ indeterminate, className = '', ...rest }) {
|
|
17
17
|
const ref = React.useRef(null);
|
|
18
18
|
React.useEffect(() => {
|
|
@@ -86,14 +86,14 @@ const SSITableView = (props) => {
|
|
|
86
86
|
checked: table.getIsAllRowsSelected(),
|
|
87
87
|
indeterminate: table.getIsSomeRowsSelected(),
|
|
88
88
|
onChange: table.getToggleAllRowsSelectedHandler(),
|
|
89
|
-
columnMaxWidth: 50
|
|
89
|
+
columnMaxWidth: 50,
|
|
90
90
|
} })),
|
|
91
91
|
cell: ({ row }) => (_jsx(RowSelectionCheckboxContainer, { children: (row.id === focusedRowId || rowSelection.length > 0) && (_jsx(IndeterminateCheckbox, { ...{
|
|
92
92
|
checked: row.getIsSelected(),
|
|
93
93
|
disabled: !row.getCanSelect(),
|
|
94
94
|
indeterminate: row.getIsSomeSelected(),
|
|
95
95
|
onChange: row.getToggleSelectedHandler(),
|
|
96
|
-
columnMaxWidth: 50
|
|
96
|
+
columnMaxWidth: 50,
|
|
97
97
|
} })) })),
|
|
98
98
|
},
|
|
99
99
|
...availableColumns,
|
package/dist/index.d.ts
CHANGED
|
@@ -43,4 +43,4 @@ export * from './styles/fonts/index.js';
|
|
|
43
43
|
export * from './types/index.js';
|
|
44
44
|
export * from './helpers/index.js';
|
|
45
45
|
export * from './utils/index.js';
|
|
46
|
-
export { SSICredentialCardView, CredentialMiniCardView, CredentialMiniCardViewProps, SSIStatusLabel, SSICheckmarkBadge, SSIExclamationMarkBadge, SSIPlaceholderLogo, SSILogo, SSIAddIcon, SSIFilterIcon, SSIArrowDownIcon, SSITypeLabel, SSIIconButton, SSIPrimaryButton, SSISecondaryButton, DropDownList, SSITableView, SSITableViewHeader, SSITabView, SSITabViewHeader, SSIProfileIcon, SSIToastContainer, SSICheckbox, SSIActivityIndicator, SSIHoverText, StepMarker, ProgressStepIndicator, PaginationControls, PaginationControlsProps, Row, DocumentIcon, CrossIcon, ImageIcon, FileSelection, ComboBox, DragAndDropBox, PersonPlaceholder, PassportPhotoControl, passportPhotoControlTester, CredentialIssuanceWizardView, CredentialViewItem, JSONDataView };
|
|
46
|
+
export { SSICredentialCardView, CredentialMiniCardView, CredentialMiniCardViewProps, SSIStatusLabel, SSICheckmarkBadge, SSIExclamationMarkBadge, SSIPlaceholderLogo, SSILogo, SSIAddIcon, SSIFilterIcon, SSIArrowDownIcon, SSITypeLabel, SSIIconButton, SSIPrimaryButton, SSISecondaryButton, DropDownList, SSITableView, SSITableViewHeader, SSITabView, SSITabViewHeader, SSIProfileIcon, SSIToastContainer, SSICheckbox, SSIActivityIndicator, SSIHoverText, StepMarker, ProgressStepIndicator, PaginationControls, PaginationControlsProps, Row, DocumentIcon, CrossIcon, ImageIcon, FileSelection, ComboBox, DragAndDropBox, PersonPlaceholder, PassportPhotoControl, passportPhotoControlTester, CredentialIssuanceWizardView, CredentialViewItem, JSONDataView, };
|
package/dist/index.js
CHANGED
|
@@ -41,4 +41,4 @@ export * from './styles/fonts/index.js';
|
|
|
41
41
|
export * from './types/index.js';
|
|
42
42
|
export * from './helpers/index.js';
|
|
43
43
|
export * from './utils/index.js';
|
|
44
|
-
export { SSICredentialCardView, CredentialMiniCardView, SSIStatusLabel, SSICheckmarkBadge, SSIExclamationMarkBadge, SSIPlaceholderLogo, SSILogo, SSIAddIcon, SSIFilterIcon, SSIArrowDownIcon, SSITypeLabel, SSIIconButton, SSIPrimaryButton, SSISecondaryButton, DropDownList, SSITableView, SSITableViewHeader, SSITabView, SSITabViewHeader, SSIProfileIcon, SSIToastContainer, SSICheckbox, SSIActivityIndicator, SSIHoverText, StepMarker, ProgressStepIndicator, PaginationControls, PaginationControlsProps, DocumentIcon, CrossIcon, ImageIcon, FileSelection, ComboBox, DragAndDropBox, PersonPlaceholder, PassportPhotoControl, passportPhotoControlTester, CredentialIssuanceWizardView, CredentialViewItem, JSONDataView };
|
|
44
|
+
export { SSICredentialCardView, CredentialMiniCardView, SSIStatusLabel, SSICheckmarkBadge, SSIExclamationMarkBadge, SSIPlaceholderLogo, SSILogo, SSIAddIcon, SSIFilterIcon, SSIArrowDownIcon, SSITypeLabel, SSIIconButton, SSIPrimaryButton, SSISecondaryButton, DropDownList, SSITableView, SSITableViewHeader, SSITabView, SSITabViewHeader, SSIProfileIcon, SSIToastContainer, SSICheckbox, SSIActivityIndicator, SSIHoverText, StepMarker, ProgressStepIndicator, PaginationControls, PaginationControlsProps, DocumentIcon, CrossIcon, ImageIcon, FileSelection, ComboBox, DragAndDropBox, PersonPlaceholder, PassportPhotoControl, passportPhotoControlTester, CredentialIssuanceWizardView, CredentialViewItem, JSONDataView, };
|
|
@@ -27,13 +27,13 @@ export const SSITableViewRowContainerStyled = styled.tr `
|
|
|
27
27
|
&:not(:last-child) {
|
|
28
28
|
border-bottom: 1px solid ${borderColors.lightGrey};
|
|
29
29
|
}
|
|
30
|
-
|
|
30
|
+
|
|
31
31
|
${props => props.enableHover &&
|
|
32
32
|
css `
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
33
|
+
&:hover {
|
|
34
|
+
background-color: #ececec; // TODO
|
|
35
|
+
}
|
|
36
|
+
`}
|
|
37
37
|
`;
|
|
38
38
|
export const SSITableViewCellContainerStyled = styled.td `
|
|
39
39
|
${SSITextH3Css};
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sphereon/ui-components.ssi-react",
|
|
3
3
|
"private": false,
|
|
4
|
-
"version": "0.1.3-unstable.
|
|
4
|
+
"version": "0.1.3-unstable.174+58cab48",
|
|
5
5
|
"description": "SSI UI components for React",
|
|
6
6
|
"repository": "git@github.com:Sphereon-Opensource/UI-Components.git",
|
|
7
7
|
"author": "Sphereon <dev@sphereon.com>",
|
|
@@ -41,10 +41,10 @@
|
|
|
41
41
|
"@mui/styled-engine-sc": "^5.14.12",
|
|
42
42
|
"@mui/system": "^5.15.12",
|
|
43
43
|
"@mui/x-date-pickers": "^6.19.5",
|
|
44
|
-
"@sphereon/ui-components.core": "0.1.3-unstable.
|
|
44
|
+
"@sphereon/ui-components.core": "0.1.3-unstable.174+58cab48",
|
|
45
45
|
"@tanstack/react-table": "^8.9.3",
|
|
46
46
|
"react-json-tree": "^0.18.0",
|
|
47
|
-
"react-loader-spinner": "^
|
|
47
|
+
"react-loader-spinner": "^6.1.6",
|
|
48
48
|
"react-select": "^5.8.0",
|
|
49
49
|
"react-toastify": "^9.1.3",
|
|
50
50
|
"uint8arrays": "^3.1.1"
|
|
@@ -59,5 +59,5 @@
|
|
|
59
59
|
"react": ">= 18",
|
|
60
60
|
"styled-components": "^6.1.8"
|
|
61
61
|
},
|
|
62
|
-
"gitHead": "
|
|
62
|
+
"gitHead": "58cab483e859578515255bf5e0ff44cf7a2df743"
|
|
63
63
|
}
|