@sphereon/ui-components.ssi-react 0.4.1-unstable.124 → 0.4.1-unstable.133
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/buttons/SSISwitchItem/index.js +4 -75
- package/dist/components/fields/JSONForms/ColorPickerControl/index.js +2 -2
- package/dist/components/views/SSITabView/index.js +4 -3
- package/dist/styles/components/components/SSISwitchItem/index.d.ts +4 -0
- package/dist/styles/components/components/SSISwitchItem/index.js +74 -0
- package/dist/styles/components/components/index.d.ts +1 -0
- package/dist/styles/components/components/index.js +1 -0
- package/package.json +3 -3
|
@@ -1,87 +1,16 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { useState } from 'react';
|
|
3
|
-
import {
|
|
4
|
-
import { styled } from '@mui/material/styles';
|
|
3
|
+
import { Tooltip } from '@mui/material';
|
|
5
4
|
import { parseColor } from '@sphereon/ui-components.core';
|
|
6
|
-
|
|
7
|
-
width: 52,
|
|
8
|
-
height: 32,
|
|
9
|
-
padding: 0,
|
|
10
|
-
'& .MuiSwitch-switchBase': {
|
|
11
|
-
padding: 4,
|
|
12
|
-
transitionDuration: '300ms',
|
|
13
|
-
'&.Mui-checked': {
|
|
14
|
-
transform: 'translateX(20px)',
|
|
15
|
-
color: 'var(--color-grey-50)',
|
|
16
|
-
'& + .MuiSwitch-track': {
|
|
17
|
-
backgroundColor: parseColor(color),
|
|
18
|
-
opacity: 1,
|
|
19
|
-
border: 0,
|
|
20
|
-
},
|
|
21
|
-
'&.Mui-disabled + .MuiSwitch-track': {
|
|
22
|
-
opacity: 0.5,
|
|
23
|
-
},
|
|
24
|
-
'& .MuiSwitch-thumb:before': {
|
|
25
|
-
backgroundImage: `url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 24 24"><path fill="${encodeURIComponent(parseColor(color))}" d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>')`,
|
|
26
|
-
},
|
|
27
|
-
},
|
|
28
|
-
'&.Mui-focusVisible .MuiSwitch-thumb': {
|
|
29
|
-
color: parseColor(color),
|
|
30
|
-
border: '6px solid var(--color-grey-50)',
|
|
31
|
-
},
|
|
32
|
-
'&.Mui-disabled .MuiSwitch-thumb': {
|
|
33
|
-
color: theme.palette.grey[100],
|
|
34
|
-
},
|
|
35
|
-
'&.Mui-disabled + .MuiSwitch-track': {
|
|
36
|
-
opacity: 0.3,
|
|
37
|
-
},
|
|
38
|
-
},
|
|
39
|
-
'& .MuiSwitch-thumb': {
|
|
40
|
-
boxSizing: 'border-box',
|
|
41
|
-
width: 24,
|
|
42
|
-
height: 24,
|
|
43
|
-
'&:before': {
|
|
44
|
-
content: "''",
|
|
45
|
-
position: 'absolute',
|
|
46
|
-
width: '100%',
|
|
47
|
-
height: '100%',
|
|
48
|
-
left: 0,
|
|
49
|
-
top: 0,
|
|
50
|
-
backgroundRepeat: 'no-repeat',
|
|
51
|
-
backgroundPosition: 'center',
|
|
52
|
-
},
|
|
53
|
-
},
|
|
54
|
-
'& .MuiSwitch-track': {
|
|
55
|
-
borderRadius: 16,
|
|
56
|
-
backgroundColor: 'var(--color-grey-300)',
|
|
57
|
-
opacity: 1,
|
|
58
|
-
transition: theme.transitions.create(['background-color'], {
|
|
59
|
-
duration: 300,
|
|
60
|
-
}),
|
|
61
|
-
},
|
|
62
|
-
}));
|
|
5
|
+
import { createMaterial3Switch, material3SwitchContainerStyle, material3SwitchLabelStyle } from '../../../styles';
|
|
63
6
|
const SSISwitchItem = (props) => {
|
|
64
7
|
const { label, checked, onChange, tooltip, disabled, labelPosition = false, color = 'var(--color-pending-500)' } = props;
|
|
65
8
|
const [showTooltip, setShowTooltip] = useState(false);
|
|
66
|
-
const MaterialSwitch =
|
|
9
|
+
const MaterialSwitch = createMaterial3Switch(parseColor(color));
|
|
67
10
|
const handleChange = (event) => {
|
|
68
11
|
onChange(event.target.checked);
|
|
69
12
|
};
|
|
70
|
-
const
|
|
71
|
-
display: 'flex',
|
|
72
|
-
flexDirection: 'row',
|
|
73
|
-
alignItems: 'center',
|
|
74
|
-
gap: '12px',
|
|
75
|
-
width: '100%',
|
|
76
|
-
};
|
|
77
|
-
const labelStyle = {
|
|
78
|
-
fontSize: '14px',
|
|
79
|
-
fontWeight: 400,
|
|
80
|
-
color: 'var(--color-grey-800)',
|
|
81
|
-
letterSpacing: '0.14px',
|
|
82
|
-
flex: 1,
|
|
83
|
-
};
|
|
84
|
-
const content = (_jsxs("div", { style: containerStyle, children: [(labelPosition === 'left' || !labelPosition) && _jsx("span", { style: labelStyle, children: label }), _jsx(MaterialSwitch, { checked: checked, onChange: handleChange, disabled: disabled }), labelPosition === 'right' && _jsx("span", { style: labelStyle, children: label })] }));
|
|
13
|
+
const content = (_jsxs("div", { style: material3SwitchContainerStyle, children: [(labelPosition === 'left' || !labelPosition) && _jsx("span", { style: material3SwitchLabelStyle, children: label }), _jsx(MaterialSwitch, { checked: checked, onChange: handleChange, disabled: disabled }), labelPosition === 'right' && _jsx("span", { style: material3SwitchLabelStyle, children: label })] }));
|
|
85
14
|
if (tooltip) {
|
|
86
15
|
return (_jsx(Tooltip, { title: tooltip, open: showTooltip, onOpen: () => setShowTooltip(true), onClose: () => setShowTooltip(false), arrow: true, children: _jsx("div", { onMouseEnter: () => setShowTooltip(true), onMouseLeave: () => setShowTooltip(false), children: content }) }));
|
|
87
16
|
}
|
|
@@ -5,7 +5,7 @@ import { elementColors } from '@sphereon/ui-components.core';
|
|
|
5
5
|
import { MuiColorInput, MuiColorInputButton } from 'mui-color-input';
|
|
6
6
|
import { JsonFormsCustomControlKey } from '../../../../types';
|
|
7
7
|
const ColorPickerControl = (props) => {
|
|
8
|
-
const { data, handleChange, path, format = 'hex', isAlphaHidden = true } = props;
|
|
8
|
+
const { data, handleChange, path, format = 'hex', isAlphaHidden = true, label } = props;
|
|
9
9
|
const onValueChange = async (value) => {
|
|
10
10
|
handleChange(path, value);
|
|
11
11
|
};
|
|
@@ -17,7 +17,7 @@ const ColorPickerControl = (props) => {
|
|
|
17
17
|
border: `1px solid ${elementColors.lightGrey}`
|
|
18
18
|
} });
|
|
19
19
|
};
|
|
20
|
-
return (_jsx(MuiColorInput, { format: format, value: data, onChange: onValueChange, isAlphaHidden: isAlphaHidden, Adornment: getAdornmentElement, style: { display: 'flex' } }));
|
|
20
|
+
return (_jsx(MuiColorInput, { label: label, format: format, value: data, onChange: onValueChange, isAlphaHidden: isAlphaHidden, Adornment: getAdornmentElement, style: { display: 'flex' } }));
|
|
21
21
|
};
|
|
22
22
|
export const colorPickerControlTester = rankWith(4, optionIs('type', JsonFormsCustomControlKey.COLOR_PICKER));
|
|
23
23
|
export default withJsonFormsControlProps(ColorPickerControl);
|
|
@@ -7,7 +7,7 @@ const Tab = (props) => {
|
|
|
7
7
|
};
|
|
8
8
|
const SSITabView = (props) => {
|
|
9
9
|
const { routes = [] } = props;
|
|
10
|
-
const [activeRoute, setActiveRoute] = useState(props.activeRoute ?? routes.length > 0 ? routes[0].key : "");
|
|
10
|
+
const [activeRoute, setActiveRoute] = useState(props.activeRoute ?? (routes.length > 0 ? routes[0].key : ""));
|
|
11
11
|
const [content, setContent] = useState();
|
|
12
12
|
useEffect(() => {
|
|
13
13
|
routes.forEach((route) => {
|
|
@@ -16,12 +16,13 @@ const SSITabView = (props) => {
|
|
|
16
16
|
}
|
|
17
17
|
});
|
|
18
18
|
}, [routes, activeRoute]);
|
|
19
|
-
const
|
|
19
|
+
const onRouteChange = async (key) => {
|
|
20
20
|
setActiveRoute(key);
|
|
21
|
+
props.onRouteChange?.(key);
|
|
21
22
|
};
|
|
22
23
|
return (_jsxs(Container, { children: [_jsx(SSITabViewHeader, { navigationState: {
|
|
23
24
|
routes,
|
|
24
25
|
activeRoute,
|
|
25
|
-
}, onRouteChange:
|
|
26
|
+
}, onRouteChange: onRouteChange }), _jsx(Tab, { children: content })] }));
|
|
26
27
|
};
|
|
27
28
|
export default SSITabView;
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export declare const createMaterial3Switch: (color: string) => import("@emotion/styled").StyledComponent<import("@mui/material").SwitchProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
|
|
3
|
+
export declare const material3SwitchContainerStyle: React.CSSProperties;
|
|
4
|
+
export declare const material3SwitchLabelStyle: React.CSSProperties;
|
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
import { parseColor } from '@sphereon/ui-components.core';
|
|
2
|
+
import { styled } from '@mui/material/styles';
|
|
3
|
+
import { Switch } from '@mui/material';
|
|
4
|
+
export const createMaterial3Switch = (color) => styled(Switch)(({ theme }) => ({
|
|
5
|
+
width: 52,
|
|
6
|
+
height: 32,
|
|
7
|
+
padding: 0,
|
|
8
|
+
'& .MuiSwitch-switchBase': {
|
|
9
|
+
padding: 4,
|
|
10
|
+
transitionDuration: '300ms',
|
|
11
|
+
'&.Mui-checked': {
|
|
12
|
+
transform: 'translateX(20px)',
|
|
13
|
+
color: 'var(--color-grey-50)',
|
|
14
|
+
'& + .MuiSwitch-track': {
|
|
15
|
+
backgroundColor: parseColor(color),
|
|
16
|
+
opacity: 1,
|
|
17
|
+
border: 0,
|
|
18
|
+
},
|
|
19
|
+
'&.Mui-disabled + .MuiSwitch-track': {
|
|
20
|
+
opacity: 0.5,
|
|
21
|
+
},
|
|
22
|
+
'& .MuiSwitch-thumb:before': {
|
|
23
|
+
backgroundImage: `url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 24 24"><path fill="${encodeURIComponent(parseColor(color))}" d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>')`,
|
|
24
|
+
},
|
|
25
|
+
},
|
|
26
|
+
'&.Mui-focusVisible .MuiSwitch-thumb': {
|
|
27
|
+
color: parseColor(color),
|
|
28
|
+
border: '6px solid var(--color-grey-50)',
|
|
29
|
+
},
|
|
30
|
+
'&.Mui-disabled .MuiSwitch-thumb': {
|
|
31
|
+
color: theme.palette.grey[100],
|
|
32
|
+
},
|
|
33
|
+
'&.Mui-disabled + .MuiSwitch-track': {
|
|
34
|
+
opacity: 0.3,
|
|
35
|
+
},
|
|
36
|
+
},
|
|
37
|
+
'& .MuiSwitch-thumb': {
|
|
38
|
+
boxSizing: 'border-box',
|
|
39
|
+
width: 24,
|
|
40
|
+
height: 24,
|
|
41
|
+
'&:before': {
|
|
42
|
+
content: "''",
|
|
43
|
+
position: 'absolute',
|
|
44
|
+
width: '100%',
|
|
45
|
+
height: '100%',
|
|
46
|
+
left: 0,
|
|
47
|
+
top: 0,
|
|
48
|
+
backgroundRepeat: 'no-repeat',
|
|
49
|
+
backgroundPosition: 'center',
|
|
50
|
+
},
|
|
51
|
+
},
|
|
52
|
+
'& .MuiSwitch-track': {
|
|
53
|
+
borderRadius: 16,
|
|
54
|
+
backgroundColor: 'var(--color-grey-300)',
|
|
55
|
+
opacity: 1,
|
|
56
|
+
transition: theme.transitions.create(['background-color'], {
|
|
57
|
+
duration: 300,
|
|
58
|
+
}),
|
|
59
|
+
},
|
|
60
|
+
}));
|
|
61
|
+
export const material3SwitchContainerStyle = {
|
|
62
|
+
display: 'flex',
|
|
63
|
+
flexDirection: 'row',
|
|
64
|
+
alignItems: 'center',
|
|
65
|
+
gap: '12px',
|
|
66
|
+
width: '100%',
|
|
67
|
+
};
|
|
68
|
+
export const material3SwitchLabelStyle = {
|
|
69
|
+
fontSize: '14px',
|
|
70
|
+
fontWeight: 400,
|
|
71
|
+
color: 'var(--color-grey-800)',
|
|
72
|
+
letterSpacing: '0.14px',
|
|
73
|
+
flex: 1,
|
|
74
|
+
};
|
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.4.1-unstable.
|
|
4
|
+
"version": "0.4.1-unstable.133+90bddc9",
|
|
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>",
|
|
@@ -50,7 +50,7 @@
|
|
|
50
50
|
"@mui/x-date-pickers": "^8.18.0",
|
|
51
51
|
"@sphereon/ssi-sdk.data-store": "0.34.1-feature.SSISDK.45.94",
|
|
52
52
|
"@sphereon/ssi-types": "0.34.1-feature.SSISDK.45.94",
|
|
53
|
-
"@sphereon/ui-components.core": "0.4.1-unstable.
|
|
53
|
+
"@sphereon/ui-components.core": "0.4.1-unstable.133+90bddc9",
|
|
54
54
|
"@tanstack/react-table": "^8.9.3",
|
|
55
55
|
"ajv": "^8.17.1",
|
|
56
56
|
"ajv-formats": "^3.0.1",
|
|
@@ -72,5 +72,5 @@
|
|
|
72
72
|
"peerDependencies": {
|
|
73
73
|
"react": ">= 18"
|
|
74
74
|
},
|
|
75
|
-
"gitHead": "
|
|
75
|
+
"gitHead": "90bddc958fb2625419be8cd9f38cf9f61ed750f7"
|
|
76
76
|
}
|