@centreon/ui 25.5.8 → 25.6.1
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/package.json +15 -6
- package/src/Dashboard/Dashboard.styles.ts +1 -1
- package/src/Dashboard/Layout.tsx +1 -1
- package/src/Graph/BarChart/BarChart.cypress.spec.tsx +0 -2
- package/src/Listing/ActionBar/Pagination.tsx +10 -23
- package/src/Listing/ActionBar/PaginationActions.tsx +1 -10
- package/src/Listing/Cell/DataCell.tsx +6 -6
- package/src/Listing/Cell/EllipsisTypography.tsx +10 -32
- package/src/Listing/Cell/index.tsx +37 -76
- package/src/Listing/Checkbox.tsx +8 -20
- package/src/Listing/Header/Cell/ListingHeaderCell.tsx +17 -14
- package/src/Listing/Header/Cell/SelectActionListingHeaderCell.tsx +5 -9
- package/src/Listing/Header/ListingHeader.tsx +2 -5
- package/src/Listing/Header/_internals/Label.tsx +1 -17
- package/src/Listing/Row/EmptyRow.tsx +2 -6
- package/src/Listing/Row/Row.tsx +7 -36
- package/src/Listing/index.stories.tsx +1 -0
- package/src/Listing/index.tsx +20 -22
- package/src/StoryBookThemeProvider/index.tsx +3 -1
- package/src/ThemeProvider/index.tsx +3 -1
- package/src/ThemeProvider/tailwindcss.css +202 -0
- package/src/components/Avatar/Avatar.stories.tsx +1 -0
- package/src/components/Button/Button.module.css +38 -0
- package/src/components/Button/Button.stories.tsx +25 -0
- package/src/components/Button/Button.tsx +2 -5
- package/src/components/CrudPage/CrudPageRoot.tsx +1 -1
- package/src/components/DataTable/EmptyState/DataTableEmptyState.tsx +4 -1
- package/src/components/Layout/AreaIndicator.tsx +4 -6
- package/src/Listing/Cell/DataCell.styles.ts +0 -27
- package/src/Listing/Header/Cell/ListingHeaderCell.styles.ts +0 -71
- package/src/Listing/Header/Cell/SelectActionListingHeaderCell.styles.ts +0 -26
- package/src/Listing/Header/ListingHeader.styles.ts +0 -16
- package/src/Listing/Listing.styles.ts +0 -78
- package/src/Listing/Row/EmptyRow.styles.ts +0 -14
- package/src/components/Button/Button.styles.ts +0 -44
- package/src/components/Layout/AreaIndicator.styles.ts +0 -33
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
import { makeStyles } from 'tss-react/mui';
|
|
2
|
-
|
|
3
|
-
const useStyles = makeStyles()((theme) => ({
|
|
4
|
-
cell: {
|
|
5
|
-
alignItems: 'center',
|
|
6
|
-
display: 'flex',
|
|
7
|
-
height: '100%',
|
|
8
|
-
overflow: 'hidden',
|
|
9
|
-
whiteSpace: 'nowrap'
|
|
10
|
-
},
|
|
11
|
-
clickable: {
|
|
12
|
-
cursor: 'default'
|
|
13
|
-
},
|
|
14
|
-
componentColumn: {
|
|
15
|
-
width: theme.spacing(2.75)
|
|
16
|
-
},
|
|
17
|
-
rowNotHovered: {
|
|
18
|
-
color: theme.palette.text.secondary
|
|
19
|
-
},
|
|
20
|
-
text: {
|
|
21
|
-
overflow: 'hidden',
|
|
22
|
-
textOverflow: 'ellipsis',
|
|
23
|
-
whiteSpace: 'nowrap'
|
|
24
|
-
}
|
|
25
|
-
}));
|
|
26
|
-
|
|
27
|
-
export { useStyles };
|
|
@@ -1,71 +0,0 @@
|
|
|
1
|
-
import { makeStyles } from 'tss-react/mui';
|
|
2
|
-
|
|
3
|
-
import { ListingVariant } from '@centreon/ui-context';
|
|
4
|
-
|
|
5
|
-
import { getTextStyleByViewMode } from '../../useStyleTable';
|
|
6
|
-
|
|
7
|
-
interface StylesProps {
|
|
8
|
-
isDragging?: boolean;
|
|
9
|
-
isInDragOverlay?: boolean;
|
|
10
|
-
listingVariant?: ListingVariant;
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
const useStyles = makeStyles<StylesProps>()(
|
|
14
|
-
(theme, { isDragging, isInDragOverlay, listingVariant }) => ({
|
|
15
|
-
active: {
|
|
16
|
-
'&, &:hover, &:focus': {
|
|
17
|
-
color: theme.palette.common.white
|
|
18
|
-
},
|
|
19
|
-
'&.Mui-active': {
|
|
20
|
-
'& .MuiTableSortLabel-icon': {
|
|
21
|
-
color: theme.palette.common.white
|
|
22
|
-
},
|
|
23
|
-
color: theme.palette.common.white
|
|
24
|
-
}
|
|
25
|
-
},
|
|
26
|
-
content: {
|
|
27
|
-
alignItems: 'center',
|
|
28
|
-
borderRadius: isDragging && isInDragOverlay ? theme.spacing(0.5) : 0,
|
|
29
|
-
color: theme.palette.common.white,
|
|
30
|
-
display: 'flex',
|
|
31
|
-
height: '100%',
|
|
32
|
-
justifyContent: 'space-between'
|
|
33
|
-
},
|
|
34
|
-
dragHandle: {
|
|
35
|
-
'&, &.Mui-focus, &:focus': {
|
|
36
|
-
color: theme.palette.common.white
|
|
37
|
-
},
|
|
38
|
-
color: theme.palette.common.white,
|
|
39
|
-
|
|
40
|
-
cursor: isDragging ? 'grabbing' : 'grab',
|
|
41
|
-
opacity: 0,
|
|
42
|
-
padding: 0
|
|
43
|
-
},
|
|
44
|
-
simpleHeaderCellContent: {
|
|
45
|
-
alignItems: 'center',
|
|
46
|
-
display: 'inline-flex',
|
|
47
|
-
marginRight: theme.spacing(2),
|
|
48
|
-
userSelect: 'none'
|
|
49
|
-
},
|
|
50
|
-
tableCell: {
|
|
51
|
-
backgroundColor: isInDragOverlay
|
|
52
|
-
? 'transparent'
|
|
53
|
-
: theme.palette.background.listingHeader,
|
|
54
|
-
borderBottom: 'none',
|
|
55
|
-
height: 'inherit',
|
|
56
|
-
padding: theme.spacing(0, 1),
|
|
57
|
-
...getTextStyleByViewMode({ listingVariant, theme }),
|
|
58
|
-
'&:hover, &:focus-within, &[data-isdragging=true]': {
|
|
59
|
-
'& .dragHandle': {
|
|
60
|
-
opacity: 1
|
|
61
|
-
}
|
|
62
|
-
},
|
|
63
|
-
'&[data-isindragoverlay=true]': {
|
|
64
|
-
display: 'block',
|
|
65
|
-
opacity: 0.7
|
|
66
|
-
}
|
|
67
|
-
}
|
|
68
|
-
})
|
|
69
|
-
);
|
|
70
|
-
|
|
71
|
-
export { useStyles, type StylesProps };
|
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
import { makeStyles } from 'tss-react/mui';
|
|
2
|
-
|
|
3
|
-
const useStyles = makeStyles()((theme) => ({
|
|
4
|
-
checkbox: {
|
|
5
|
-
'&.Mui-checked': {
|
|
6
|
-
color: theme.palette.common.white
|
|
7
|
-
},
|
|
8
|
-
'&.MuiCheckbox-indeterminate': {
|
|
9
|
-
color: theme.palette.common.white
|
|
10
|
-
},
|
|
11
|
-
color: theme.palette.common.white
|
|
12
|
-
},
|
|
13
|
-
checkboxHeaderCell: {
|
|
14
|
-
alignItems: 'center',
|
|
15
|
-
backgroundColor: theme.palette.background.listingHeader,
|
|
16
|
-
borderBottom: 'none',
|
|
17
|
-
display: 'flex',
|
|
18
|
-
justifyContent: 'start',
|
|
19
|
-
lineHeight: 'inherit'
|
|
20
|
-
},
|
|
21
|
-
predefinedRowsMenu: {
|
|
22
|
-
color: theme.palette.common.white
|
|
23
|
-
}
|
|
24
|
-
}));
|
|
25
|
-
|
|
26
|
-
export { useStyles };
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
import { makeStyles } from 'tss-react/mui';
|
|
2
|
-
|
|
3
|
-
const useStyles = makeStyles()((theme) => ({
|
|
4
|
-
headerLabelDragging: {
|
|
5
|
-
cursor: 'grabbing'
|
|
6
|
-
},
|
|
7
|
-
root: {
|
|
8
|
-
height: '100%',
|
|
9
|
-
padding: theme.spacing(0, 1)
|
|
10
|
-
},
|
|
11
|
-
row: {
|
|
12
|
-
display: 'contents'
|
|
13
|
-
}
|
|
14
|
-
}));
|
|
15
|
-
|
|
16
|
-
export { useStyles };
|
|
@@ -1,78 +0,0 @@
|
|
|
1
|
-
import { makeStyles } from 'tss-react/mui';
|
|
2
|
-
|
|
3
|
-
import { TableStyleAtom as TableStyle } from './models';
|
|
4
|
-
|
|
5
|
-
const loadingIndicatorHeight = 3;
|
|
6
|
-
|
|
7
|
-
interface StylesProps {
|
|
8
|
-
dataStyle: TableStyle;
|
|
9
|
-
gridTemplateColumn: string;
|
|
10
|
-
isResponsive: string;
|
|
11
|
-
rows: Array<unknown>;
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
const useListingStyles = makeStyles<StylesProps>()(
|
|
15
|
-
(theme, { dataStyle, gridTemplateColumn, rows, isResponsive }) => ({
|
|
16
|
-
actionBar: {
|
|
17
|
-
alignItems: 'center',
|
|
18
|
-
display: 'flex'
|
|
19
|
-
},
|
|
20
|
-
checkbox: {
|
|
21
|
-
justifyContent: 'start'
|
|
22
|
-
},
|
|
23
|
-
container: {
|
|
24
|
-
background: 'none',
|
|
25
|
-
display: 'flex',
|
|
26
|
-
flexDirection: 'column',
|
|
27
|
-
height: '100%',
|
|
28
|
-
width: '100%'
|
|
29
|
-
},
|
|
30
|
-
listingContainer: {
|
|
31
|
-
height: '100%',
|
|
32
|
-
overflow: 'hidden',
|
|
33
|
-
width: '100%'
|
|
34
|
-
},
|
|
35
|
-
loadingIndicator: {
|
|
36
|
-
height: loadingIndicatorHeight,
|
|
37
|
-
width: '100%'
|
|
38
|
-
},
|
|
39
|
-
table: {
|
|
40
|
-
'.listingHeader': {
|
|
41
|
-
backgroundColor: theme.palette.background.listingHeader,
|
|
42
|
-
padding: theme.spacing(0, 1)
|
|
43
|
-
},
|
|
44
|
-
'.listingHeader > div > div': {
|
|
45
|
-
backgroundColor: theme.palette.background.listingHeader,
|
|
46
|
-
height: theme.spacing(dataStyle.header.height / 8)
|
|
47
|
-
},
|
|
48
|
-
'.listingHeader > div > div:first-of-type': {
|
|
49
|
-
height: '100%',
|
|
50
|
-
padding: theme.spacing(0, 0.5, 0, 1.5)
|
|
51
|
-
},
|
|
52
|
-
alignItems: 'center',
|
|
53
|
-
display: 'grid',
|
|
54
|
-
gridTemplateColumns: gridTemplateColumn,
|
|
55
|
-
gridTemplateRows: `${theme.spacing(dataStyle.header.height / 8)} repeat(${
|
|
56
|
-
rows?.length || 1
|
|
57
|
-
}, ${isResponsive ? 'auto' : `${dataStyle.body.height}px`})`,
|
|
58
|
-
position: 'relative'
|
|
59
|
-
},
|
|
60
|
-
tableBody: {
|
|
61
|
-
'.MuiTableRow-root > div:first-of-type': {
|
|
62
|
-
paddingLeft: theme.spacing(1.5)
|
|
63
|
-
},
|
|
64
|
-
|
|
65
|
-
display: 'contents',
|
|
66
|
-
'div:first-of-type': {
|
|
67
|
-
gridColumnStart: 1
|
|
68
|
-
},
|
|
69
|
-
position: 'relative'
|
|
70
|
-
},
|
|
71
|
-
tableWrapper: {
|
|
72
|
-
borderBottom: 'none',
|
|
73
|
-
overflow: 'auto'
|
|
74
|
-
}
|
|
75
|
-
})
|
|
76
|
-
);
|
|
77
|
-
|
|
78
|
-
export { useListingStyles, loadingIndicatorHeight };
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import { makeStyles } from 'tss-react/mui';
|
|
2
|
-
|
|
3
|
-
const useStyles = makeStyles()(() => ({
|
|
4
|
-
emptyDataCell: {
|
|
5
|
-
flexDirection: 'column',
|
|
6
|
-
gridColumn: 'auto / -1',
|
|
7
|
-
justifyContent: 'center'
|
|
8
|
-
},
|
|
9
|
-
emptyDataRow: {
|
|
10
|
-
display: 'contents'
|
|
11
|
-
}
|
|
12
|
-
}));
|
|
13
|
-
|
|
14
|
-
export { useStyles };
|
|
@@ -1,44 +0,0 @@
|
|
|
1
|
-
import { makeStyles } from 'tss-react/mui';
|
|
2
|
-
|
|
3
|
-
const useStyles = makeStyles()((theme) => ({
|
|
4
|
-
button: {
|
|
5
|
-
'&[data-size="medium"]': {
|
|
6
|
-
fontSize: '16px',
|
|
7
|
-
height: 'unset',
|
|
8
|
-
lineHeight: '24px'
|
|
9
|
-
},
|
|
10
|
-
|
|
11
|
-
'&[data-size="small"]': {
|
|
12
|
-
'&[data-variant="primary"], &[data-variant="secondary"]': {
|
|
13
|
-
paddingLeft: theme.spacing(2),
|
|
14
|
-
paddingRight: theme.spacing(2)
|
|
15
|
-
},
|
|
16
|
-
fontSize: '14px',
|
|
17
|
-
height: 'unset',
|
|
18
|
-
lineHeight: '22px'
|
|
19
|
-
},
|
|
20
|
-
|
|
21
|
-
'&[data-variant="primary"]:not(:disabled)': {
|
|
22
|
-
'&[data-is-danger="true"]': {
|
|
23
|
-
backgroundColor: theme.palette.error.main
|
|
24
|
-
},
|
|
25
|
-
|
|
26
|
-
backgroundColor: theme.palette.primary.main
|
|
27
|
-
},
|
|
28
|
-
|
|
29
|
-
'&[data-variant="secondary"]:not(:disabled)': {
|
|
30
|
-
'&[data-is-danger="true"]': {
|
|
31
|
-
borderColor: theme.palette.error.main,
|
|
32
|
-
color: theme.palette.error.main
|
|
33
|
-
},
|
|
34
|
-
|
|
35
|
-
borderColor: theme.palette.primary.main,
|
|
36
|
-
color: theme.palette.primary.main
|
|
37
|
-
},
|
|
38
|
-
|
|
39
|
-
textWrap: 'noWrap',
|
|
40
|
-
transition: 'unset'
|
|
41
|
-
}
|
|
42
|
-
}));
|
|
43
|
-
|
|
44
|
-
export { useStyles };
|
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
import { makeStyles } from 'tss-react/mui';
|
|
2
|
-
|
|
3
|
-
export const useStyles = makeStyles()((theme) => ({
|
|
4
|
-
areaIndicator: {
|
|
5
|
-
'& .areaIndicator': {
|
|
6
|
-
left: theme.spacing(10)
|
|
7
|
-
},
|
|
8
|
-
'& label:first-of-type': {
|
|
9
|
-
border: '1px dashed #9747FF7F',
|
|
10
|
-
borderRadius: '4px',
|
|
11
|
-
color: '#9747FFFF',
|
|
12
|
-
fontSize: '0.75rem',
|
|
13
|
-
fontWeight: 500,
|
|
14
|
-
left: theme.spacing(1),
|
|
15
|
-
padding: theme.spacing(0.125, 1),
|
|
16
|
-
position: 'absolute',
|
|
17
|
-
top: theme.spacing(0.75)
|
|
18
|
-
},
|
|
19
|
-
'&[data-depth="1"]': {
|
|
20
|
-
'& label:first-of-type': {
|
|
21
|
-
'&:before': {
|
|
22
|
-
content: '"+ "'
|
|
23
|
-
},
|
|
24
|
-
left: theme.spacing(10)
|
|
25
|
-
}
|
|
26
|
-
},
|
|
27
|
-
|
|
28
|
-
backgroundColor: '#9747FF19',
|
|
29
|
-
minHeight: theme.spacing(4),
|
|
30
|
-
|
|
31
|
-
position: 'relative'
|
|
32
|
-
}
|
|
33
|
-
}));
|