@scality/core-ui 0.122.0 → 0.123.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.
- package/.storybook/preview.js +28 -8
- package/dist/components/constrainedtext/Constrainedtext.component.d.ts.map +1 -1
- package/dist/components/constrainedtext/Constrainedtext.component.js +1 -4
- package/dist/components/emptystate/Emptystate.component.d.ts +11 -1
- package/dist/components/emptystate/Emptystate.component.d.ts.map +1 -1
- package/dist/components/emptystate/Emptystate.component.js +9 -4
- package/dist/components/icon/Icon.component.d.ts +2 -2
- package/dist/components/icon/Icon.component.d.ts.map +1 -1
- package/dist/components/infomessage/InfoMessageUtils.d.ts +1 -1
- package/dist/components/infomessage/InfoMessageUtils.d.ts.map +1 -1
- package/dist/components/infomessage/InfoMessageUtils.js +5 -4
- package/dist/components/navbar/Navbar.component.d.ts.map +1 -1
- package/dist/components/navbar/Navbar.component.js +1 -0
- package/dist/components/searchinput/SearchInput.component.d.ts +2 -1
- package/dist/components/searchinput/SearchInput.component.d.ts.map +1 -1
- package/dist/components/selectv2/Selectv2.component.d.ts +1 -1
- package/dist/components/selectv2/Selectv2.component.d.ts.map +1 -1
- package/dist/components/sidebar/Sidebar.component.d.ts.map +1 -1
- package/dist/components/sidebar/Sidebar.component.js +2 -1
- package/dist/components/tablev2/MultiSelectableContent.d.ts +1 -2
- package/dist/components/tablev2/MultiSelectableContent.d.ts.map +1 -1
- package/dist/components/tablev2/MultiSelectableContent.js +9 -24
- package/dist/components/tablev2/Search.d.ts +0 -6
- package/dist/components/tablev2/Search.d.ts.map +1 -1
- package/dist/components/tablev2/Search.js +3 -4
- package/dist/components/tablev2/SingleSelectableContent.d.ts +4 -5
- package/dist/components/tablev2/SingleSelectableContent.d.ts.map +1 -1
- package/dist/components/tablev2/SingleSelectableContent.js +9 -23
- package/dist/components/tablev2/TableCommon.d.ts +15 -3
- package/dist/components/tablev2/TableCommon.d.ts.map +1 -1
- package/dist/components/tablev2/TableCommon.js +37 -2
- package/dist/components/tablev2/TableUtils.d.ts +11 -0
- package/dist/components/tablev2/TableUtils.d.ts.map +1 -1
- package/dist/components/tablev2/TableUtils.js +23 -0
- package/dist/components/tablev2/Tablestyle.d.ts +6 -3
- package/dist/components/tablev2/Tablestyle.d.ts.map +1 -1
- package/dist/components/tablev2/Tablestyle.js +29 -36
- package/dist/components/tablev2/Tablev2.component.d.ts +24 -3
- package/dist/components/tablev2/Tablev2.component.d.ts.map +1 -1
- package/dist/components/tablev2/Tablev2.component.js +3 -1
- package/dist/components/tabsv2/StyledTabs.d.ts.map +1 -1
- package/dist/components/tabsv2/StyledTabs.js +14 -14
- package/dist/components/toast/Toast.component.d.ts.map +1 -1
- package/dist/components/toast/Toast.component.js +1 -1
- package/dist/components/toast/useMutationsHandler.d.ts +1 -1
- package/dist/components/toast/useMutationsHandler.d.ts.map +1 -1
- package/dist/components/toast/useMutationsHandler.js +8 -6
- package/dist/organisms/attachments/AttachmentConfirmationModal.d.ts.map +1 -1
- package/dist/organisms/attachments/AttachmentConfirmationModal.js +1 -1
- package/dist/organisms/attachments/AttachmentTable.d.ts.map +1 -1
- package/dist/organisms/attachments/AttachmentTable.js +15 -12
- package/package.json +1 -1
- package/src/lib/components/constrainedtext/Constrainedtext.component.tsx +1 -4
- package/src/lib/components/emptystate/Emptystate.component.tsx +34 -10
- package/src/lib/components/icon/Icon.component.tsx +2 -2
- package/src/lib/components/infomessage/InfoMessageUtils.ts +39 -33
- package/src/lib/components/navbar/Navbar.component.tsx +1 -0
- package/src/lib/components/searchinput/SearchInput.component.tsx +1 -0
- package/src/lib/components/selectv2/Selectv2.component.tsx +1 -1
- package/src/lib/components/sidebar/Sidebar.component.tsx +3 -2
- package/src/lib/components/tablev2/MultiSelectableContent.tsx +13 -63
- package/src/lib/components/tablev2/Search.tsx +13 -24
- package/src/lib/components/tablev2/SingleSelectableContent.tsx +18 -71
- package/src/lib/components/tablev2/TableCommon.tsx +100 -1
- package/src/lib/components/tablev2/TableUtils.ts +37 -0
- package/src/lib/components/tablev2/Tablestyle.tsx +30 -37
- package/src/lib/components/tablev2/Tablev2.component.tsx +14 -0
- package/src/lib/components/tablev2/Tablev2.test.tsx +0 -3
- package/src/lib/components/tabsv2/StyledTabs.ts +16 -14
- package/src/lib/components/toast/Toast.component.tsx +1 -0
- package/src/lib/components/toast/useMutationsHandler.ts +4 -2
- package/src/lib/organisms/attachments/AttachmentConfirmationModal.tsx +0 -1
- package/src/lib/organisms/attachments/AttachmentTable.tsx +25 -16
- package/stories/Hooks/useMutationsHandler.mdx +121 -0
- package/stories/attachment.stories.tsx +78 -0
- package/stories/common.tsx +12 -6
- package/stories/emptystate.stories.tsx +1 -2
- package/stories/form.stories.tsx +1 -3
- package/stories/modal.stories.tsx +0 -2
- package/stories/tablev2.stories.tsx +131 -52
package/.storybook/preview.js
CHANGED
|
@@ -3,7 +3,7 @@ import { QueryClient, QueryClientProvider } from 'react-query';
|
|
|
3
3
|
import { CoreUiThemeProvider } from '../src/lib/next';
|
|
4
4
|
import { brand, coreUIAvailableThemes } from '../src/lib/style/theme';
|
|
5
5
|
import { Wrapper } from '../stories/common';
|
|
6
|
-
import { ToastProvider } from '../src/lib';
|
|
6
|
+
import { ScrollbarWrapper, ToastProvider } from '../src/lib';
|
|
7
7
|
|
|
8
8
|
export const globalTypes = {
|
|
9
9
|
theme: {
|
|
@@ -12,27 +12,47 @@ export const globalTypes = {
|
|
|
12
12
|
defaultValue: 'darkRebrand',
|
|
13
13
|
toolbar: {
|
|
14
14
|
title: 'Preview Theme',
|
|
15
|
-
dynamicTitle:
|
|
15
|
+
dynamicTitle: true,
|
|
16
16
|
// array of plain string values or MenuItem shape (see below)
|
|
17
17
|
items: [
|
|
18
|
-
{ value: 'darkRebrand', title: 'Dark', icon: 'moon' },
|
|
19
|
-
{ value: 'artescaLight', title: 'Light', icon: 'sun' },
|
|
20
|
-
{ value: 'ring9dark', title: '
|
|
18
|
+
{ value: 'darkRebrand', title: ' A-Dark', icon: 'moon' },
|
|
19
|
+
{ value: 'artescaLight', title: 'A-Light', icon: 'sun' },
|
|
20
|
+
{ value: 'ring9dark', title: 'R-Dark', icon: 'moon' },
|
|
21
21
|
],
|
|
22
22
|
},
|
|
23
23
|
},
|
|
24
|
+
background: {
|
|
25
|
+
name: 'Background Level',
|
|
26
|
+
description: 'Background for the wrapper',
|
|
27
|
+
toolbar: {
|
|
28
|
+
title: 'Background Level',
|
|
29
|
+
items: [
|
|
30
|
+
{ value: 'backgroundLevel1', title: 'backgroundLevel 1' },
|
|
31
|
+
{ value: 'backgroundLevel2', title: 'backgroundLevel 2' },
|
|
32
|
+
{ value: 'backgroundLevel3', title: 'backgroundLevel 3' },
|
|
33
|
+
{ value: 'backgroundLevel4', title: 'backgroundLevel 4' },
|
|
34
|
+
],
|
|
35
|
+
dynamicTitle: true,
|
|
36
|
+
},
|
|
37
|
+
},
|
|
24
38
|
};
|
|
25
|
-
|
|
26
39
|
const withThemeProvider = (Story, context) => {
|
|
27
40
|
const theme = coreUIAvailableThemes[context.globals.theme];
|
|
41
|
+
const { background } = context.globals;
|
|
28
42
|
const { viewMode } = context;
|
|
29
43
|
return (
|
|
30
44
|
<QueryClientProvider client={new QueryClient()}>
|
|
31
45
|
<CoreUiThemeProvider theme={theme}>
|
|
32
46
|
{/* Wrapper to make the stories take the full screen but not in docs */}
|
|
33
|
-
<div
|
|
47
|
+
<div
|
|
48
|
+
style={
|
|
49
|
+
viewMode === 'story'
|
|
50
|
+
? { height: 100 + 'vh', overflow: 'scroll' }
|
|
51
|
+
: null
|
|
52
|
+
}
|
|
53
|
+
>
|
|
34
54
|
<ToastProvider>
|
|
35
|
-
<Wrapper>
|
|
55
|
+
<Wrapper style={{ backgroundColor: background }}>
|
|
36
56
|
<Story {...context} />
|
|
37
57
|
</Wrapper>
|
|
38
58
|
</ToastProvider>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Constrainedtext.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/constrainedtext/Constrainedtext.component.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAK9C,OAAO,EAAE,KAAK,IAAI,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAErE,KAAK,KAAK,GAAG;IACX,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,GAAG,CAAC,OAAO,GAAG,GAAG,CAAC,OAAO,EAAE,CAAC;IACpD,YAAY,CAAC,EAAE,aAAa,CAAC,YAAY,EAAE,cAAc,CAAC,CAAC;IAC3D,gBAAgB,CAAC,EAAE,aAAa,CAAC,YAAY,EAAE,WAAW,CAAC,CAAC;IAC5D,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;
|
|
1
|
+
{"version":3,"file":"Constrainedtext.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/constrainedtext/Constrainedtext.component.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAK9C,OAAO,EAAE,KAAK,IAAI,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAErE,KAAK,KAAK,GAAG;IACX,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,GAAG,CAAC,OAAO,GAAG,GAAG,CAAC,OAAO,EAAE,CAAC;IACpD,YAAY,CAAC,EAAE,aAAa,CAAC,YAAY,EAAE,cAAc,CAAC,CAAC;IAC3D,gBAAgB,CAAC,EAAE,aAAa,CAAC,YAAY,EAAE,WAAW,CAAC,CAAC;IAC5D,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AA8CF,iBAAS,eAAe,CAAC,EACvB,IAAI,EACJ,YAAY,EACZ,gBAAgB,EAChB,SAAa,GACd,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAuBrB;AAED,OAAO,EAAE,eAAe,EAAE,CAAC"}
|
|
@@ -1,10 +1,20 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { IconName } from '../icon/Icon.component';
|
|
3
|
+
import { CoreUITheme } from '../../style/theme';
|
|
3
4
|
type Props = {
|
|
4
|
-
|
|
5
|
+
listedResource: {
|
|
6
|
+
singular: string;
|
|
7
|
+
plural: string;
|
|
8
|
+
};
|
|
5
9
|
icon: IconName;
|
|
6
10
|
link?: string;
|
|
7
11
|
history?: Record<string, any>;
|
|
12
|
+
backgroundColor?: keyof CoreUITheme;
|
|
13
|
+
/**
|
|
14
|
+
* The resource to create before browsing the listed resource
|
|
15
|
+
* Only used when resource to create is different from listed resource
|
|
16
|
+
*/
|
|
17
|
+
resourceToCreate?: string;
|
|
8
18
|
};
|
|
9
19
|
export declare const EmptyStateRow: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
10
20
|
export declare const ActionWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Emptystate.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/emptystate/Emptystate.component.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAQ,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAExD,KAAK,KAAK,GAAG;IACX,
|
|
1
|
+
{"version":3,"file":"Emptystate.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/emptystate/Emptystate.component.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAQ,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAExD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,KAAK,KAAK,GAAG;IACX,cAAc,EAAE;QACd,QAAQ,EAAE,MAAM,CAAC;QACjB,MAAM,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,IAAI,EAAE,QAAQ,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC9B,eAAe,CAAC,EAAE,MAAM,WAAW,CAAC;IACpC;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B,CAAC;AAgBF,eAAO,MAAM,aAAa,yGAIzB,CAAC;AACF,eAAO,MAAM,aAAa,yGAGzB,CAAC;AAEF,iBAAS,UAAU,CAAC,KAAK,EAAE,KAAK,eAwC/B;AAED,OAAO,EAAE,UAAU,EAAE,CAAC"}
|
|
@@ -6,9 +6,12 @@ import { Icon } from '../icon/Icon.component';
|
|
|
6
6
|
import { LargeText } from '../text/Text.component';
|
|
7
7
|
const EmptystateContainer = styled.div `
|
|
8
8
|
${(props) => {
|
|
9
|
-
const
|
|
9
|
+
const { theme, backgroundColor } = props;
|
|
10
10
|
return css `
|
|
11
|
-
color: ${
|
|
11
|
+
color: ${theme.textSecondary};
|
|
12
|
+
background-color: ${backgroundColor
|
|
13
|
+
? theme[backgroundColor]
|
|
14
|
+
: 'transparent'};
|
|
12
15
|
`;
|
|
13
16
|
}}
|
|
14
17
|
display: flex;
|
|
@@ -26,7 +29,9 @@ export const ActionWrapper = styled.div `
|
|
|
26
29
|
justify-content: space-around;
|
|
27
30
|
`;
|
|
28
31
|
function EmptyState(props) {
|
|
29
|
-
const { icon,
|
|
30
|
-
return (_jsxs(EmptystateContainer, { className: "sc-emptystate", children: [_jsx(EmptyStateRow, { children: _jsx(Icon, { name: icon, color: "infoPrimary", size: "5x", withWrapper: true }) }), _jsx(EmptyStateRow, { children:
|
|
32
|
+
const { icon, listedResource, link, history, resourceToCreate, backgroundColor, } = props;
|
|
33
|
+
return (_jsxs(EmptystateContainer, { className: "sc-emptystate", backgroundColor: backgroundColor, children: [_jsx(EmptyStateRow, { children: _jsx(Icon, { name: icon, color: "infoPrimary", size: "5x", withWrapper: true }) }), _jsx(EmptyStateRow, { children: _jsx(LargeText, { children: `A list of ${listedResource.plural} will appear here.` }) }), _jsx(EmptyStateRow, { children: _jsx(LargeText, { children: !resourceToCreate
|
|
34
|
+
? `There are no ${listedResource.plural} created yet, let's create your first ${listedResource.singular}.`
|
|
35
|
+
: `Before browsing your ${listedResource.plural}, create your first ${resourceToCreate}.` }) }), history && (_jsx(ActionWrapper, { children: _jsx(Button, { label: `Create ${resourceToCreate || listedResource.singular}`, icon: _jsx(Icon, { name: "Create-add" }), type: "button", variant: "primary", onClick: () => history.push(link) }) }))] }));
|
|
31
36
|
}
|
|
32
37
|
export { EmptyState };
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { CSSProperties } from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import { CoreUITheme } from '../../style/theme';
|
|
3
3
|
import { SizeProp } from '@fortawesome/fontawesome-svg-core';
|
|
4
4
|
export declare const iconTable: {
|
|
5
5
|
Account: string;
|
|
@@ -118,7 +118,7 @@ export declare const iconTable: {
|
|
|
118
118
|
Setting: string;
|
|
119
119
|
};
|
|
120
120
|
export type IconName = keyof typeof iconTable;
|
|
121
|
-
export type IconColor = keyof
|
|
121
|
+
export type IconColor = keyof CoreUITheme;
|
|
122
122
|
type Props = {
|
|
123
123
|
name: IconName;
|
|
124
124
|
size?: SizeProp;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Icon.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/icon/Icon.component.tsx"],"names":[],"mappings":"AAAA,OAAc,EACZ,aAAa,EAKd,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"Icon.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/icon/Icon.component.tsx"],"names":[],"mappings":"AAAA,OAAc,EACZ,aAAa,EAKd,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAIhD,OAAO,EAAE,QAAQ,EAAE,MAAM,mCAAmC,CAAC;AAG7D,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmHrB,CAAC;AAaF,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,SAAS,CAAC;AAC9C,MAAM,MAAM,SAAS,GAAG,MAAM,WAAW,CAAC;AAC1C,KAAK,KAAK,GAAG;IACX,IAAI,EAAE,QAAQ,CAAC;IACf,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,KAAK,CAAC,EAAE,SAAS,GAAG,aAAa,CAAC,OAAO,CAAC,CAAC;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAiBF,eAAO,MAAM,WAAW;UAAsB,QAAQ;SAiCrD,CAAC;AAkEF,iBAAS,IAAI,CAAC,EAAE,WAAW,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,eAU7C;AAED,OAAO,EAAE,IAAI,EAAE,CAAC"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import { DefaultTheme } from
|
|
2
|
+
import { DefaultTheme } from 'styled-components';
|
|
3
3
|
export declare const useComputeBackgroundColor: () => {
|
|
4
4
|
containerRef: import("react").MutableRefObject<HTMLDivElement | null>;
|
|
5
5
|
backgroundColor: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InfoMessageUtils.d.ts","sourceRoot":"","sources":["../../../src/lib/components/infomessage/InfoMessageUtils.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAY,MAAM,mBAAmB,CAAC;AAI3D,eAAO,MAAM,yBAAyB;;;
|
|
1
|
+
{"version":3,"file":"InfoMessageUtils.d.ts","sourceRoot":"","sources":["../../../src/lib/components/infomessage/InfoMessageUtils.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAY,MAAM,mBAAmB,CAAC;AAI3D,eAAO,MAAM,yBAAyB;;;CAcrC,CAAC;AAEF,eAAO,MAAM,kBAAkB,YACpB,WAAW,SACb,YAAY,QAsBpB,CAAC"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { useTheme } from
|
|
2
|
-
import { hex2RGB } from
|
|
3
|
-
import { useEffect, useRef, useState } from
|
|
1
|
+
import { useTheme } from 'styled-components';
|
|
2
|
+
import { hex2RGB } from '../../utils';
|
|
3
|
+
import { useEffect, useRef, useState } from 'react';
|
|
4
4
|
export const useComputeBackgroundColor = () => {
|
|
5
5
|
const theme = useTheme();
|
|
6
6
|
const containerRef = useRef(null);
|
|
@@ -17,7 +17,8 @@ export const useComputeBackgroundColor = () => {
|
|
|
17
17
|
export const getBackgroundColor = (element, theme) => {
|
|
18
18
|
if (element.parentElement) {
|
|
19
19
|
const parentElementBackgroundColor = window.getComputedStyle(element.parentElement)['background-color'];
|
|
20
|
-
if (/rgba\([0-9]+, [0-9]+, [0-9]+, 0\)/.test(parentElementBackgroundColor) ||
|
|
20
|
+
if (/rgba\([0-9]+, [0-9]+, [0-9]+, 0\)/.test(parentElementBackgroundColor) ||
|
|
21
|
+
!window.getComputedStyle(element.parentElement)['background-color']) {
|
|
21
22
|
return getBackgroundColor(element.parentElement, theme);
|
|
22
23
|
}
|
|
23
24
|
else {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Navbar.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/navbar/Navbar.component.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAY,IAAI,EAAE,MAAM,gCAAgC,CAAC;AAGhE,KAAK,MAAM,GAAG;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC;CACrB,CAAC;AACF,KAAK,OAAO,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;AAC7B,KAAK,GAAG,GAAG;IACT,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,IAAI,CAAC;IAC9B,IAAI,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;CACtB,CAAC;AACF,MAAM,MAAM,KAAK,GAAG;IAClB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,YAAY,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;CACnB,CAAC;
|
|
1
|
+
{"version":3,"file":"Navbar.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/navbar/Navbar.component.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAY,IAAI,EAAE,MAAM,gCAAgC,CAAC;AAGhE,KAAK,MAAM,GAAG;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC;CACrB,CAAC;AACF,KAAK,OAAO,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;AAC7B,KAAK,GAAG,GAAG;IACT,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,IAAI,CAAC;IAC9B,IAAI,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;CACtB,CAAC;AACF,MAAM,MAAM,KAAK,GAAG;IAClB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,YAAY,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;CACnB,CAAC;AA4JF,iBAAS,MAAM,CAAC,EACd,aAAa,EACb,IAAI,EACJ,IAAS,EACT,YAAiB,EACjB,GAAG,IAAI,EACR,EAAE,KAAK,eAwDP;AAED,eAAO,MAAM,MAAM,eAAS,CAAC"}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import React from 'react';
|
|
1
2
|
import { ChangeEvent } from 'react';
|
|
2
3
|
import { InputSize } from '../inputv2/inputv2';
|
|
3
4
|
export type Props = {
|
|
@@ -10,6 +11,6 @@ export type Props = {
|
|
|
10
11
|
id?: string;
|
|
11
12
|
size?: InputSize;
|
|
12
13
|
};
|
|
13
|
-
declare const SearchInput:
|
|
14
|
+
declare const SearchInput: React.ForwardRefExoticComponent<Props & React.RefAttributes<unknown>>;
|
|
14
15
|
export { SearchInput };
|
|
15
16
|
//# sourceMappingURL=SearchInput.component.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SearchInput.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/searchinput/SearchInput.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAA2C,MAAM,OAAO,CAAC;AAG7E,OAAO,EAAS,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAGtD,MAAM,MAAM,KAAK,GAAG;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACrD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,aAAa,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB,CAAC;AAuCF,QAAA,MAAM,WAAW,
|
|
1
|
+
{"version":3,"file":"SearchInput.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/searchinput/SearchInput.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,WAAW,EAA2C,MAAM,OAAO,CAAC;AAG7E,OAAO,EAAS,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAGtD,MAAM,MAAM,KAAK,GAAG;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACrD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,aAAa,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB,CAAC;AAuCF,QAAA,MAAM,WAAW,uEAsFhB,CAAC;AAEF,OAAO,EAAE,WAAW,EAAE,CAAC"}
|
|
@@ -5,7 +5,7 @@ export type OptionProps = {
|
|
|
5
5
|
icon?: React.ReactNode;
|
|
6
6
|
children?: React.ReactNode;
|
|
7
7
|
value: string;
|
|
8
|
-
disabledReason?:
|
|
8
|
+
disabledReason?: React.ReactNode;
|
|
9
9
|
};
|
|
10
10
|
export declare function Option({ value, children, disabled, icon, disabledReason, ...rest }: OptionProps): JSX.Element;
|
|
11
11
|
export type SelectProps = {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Selectv2.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/selectv2/Selectv2.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAMN,MAAM,OAAO,CAAC;AAcf,MAAM,MAAM,WAAW,GAAG;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,cAAc,CAAC,EAAE,
|
|
1
|
+
{"version":3,"file":"Selectv2.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/selectv2/Selectv2.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAMN,MAAM,OAAO,CAAC;AAcf,MAAM,MAAM,WAAW,GAAG;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAClC,CAAC;AAkBF,wBAAgB,MAAM,CAAC,EACrB,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,IAAI,EACJ,cAAc,EACd,GAAG,IAAI,EACR,EAAE,WAAW,GAAG,GAAG,CAAC,OAAO,CA0B3B;AA6ND,MAAM,MAAM,WAAW,GAAG;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACtC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACrC,QAAQ,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAChC,IAAI,CAAC,EAAE,GAAG,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC;CACrC,CAAC;AAgBF,iBAAS,uBAAuB,CAAC,KAAK,EAAE,WAAW,eAyBlD;kBAzBQ,uBAAuB;;;AAiKhC,eAAO,MAAM,MAAM,gCAA0B,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Sidebar.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/sidebar/Sidebar.component.tsx"],"names":[],"mappings":";AAaA,KAAK,IAAI,GAAG;IACV,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,IAAI,CAAC;IAC7B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;CACpB,CAAC;AACF,KAAK,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC;AACzB,MAAM,MAAM,KAAK,GAAG;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,KAAK,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;CAC5B,CAAC;AACF,MAAM,MAAM,YAAY,GAAG;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;
|
|
1
|
+
{"version":3,"file":"Sidebar.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/sidebar/Sidebar.component.tsx"],"names":[],"mappings":";AAaA,KAAK,IAAI,GAAG;IACV,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,IAAI,CAAC;IAC7B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;CACpB,CAAC;AACF,KAAK,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC;AACzB,MAAM,MAAM,KAAK,GAAG;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,KAAK,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;CAC5B,CAAC;AACF,MAAM,MAAM,YAAY,GAAG;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAyIF,iBAAS,OAAO,CAAC,EACf,QAAQ,EACR,OAAO,EACP,aAAa,EACb,SAAS,EACT,GAAG,IAAI,EACR,EAAE,KAAK,eA8DP;AAED,OAAO,EAAE,OAAO,EAAE,CAAC"}
|
|
@@ -7,6 +7,7 @@ import { Icon } from '../icon/Icon.component';
|
|
|
7
7
|
import { spacing } from '../../spacing';
|
|
8
8
|
import { FocusVisibleStyle } from '../buttonv2/Buttonv2.component';
|
|
9
9
|
const Wrapper = styled.div `
|
|
10
|
+
margin-top: 1px;
|
|
10
11
|
flex-shrink: 0;
|
|
11
12
|
${(props) => {
|
|
12
13
|
const { backgroundLevel1, textPrimary } = props.theme;
|
|
@@ -18,7 +19,6 @@ const Wrapper = styled.div `
|
|
|
18
19
|
}
|
|
19
20
|
`;
|
|
20
21
|
}}
|
|
21
|
-
margin-top: 1px;
|
|
22
22
|
border-right: 1px solid ${(props) => props.theme.backgroundLevel3};
|
|
23
23
|
${(props) => {
|
|
24
24
|
if (props.expanded) {
|
|
@@ -41,6 +41,7 @@ const Wrapper = styled.div `
|
|
|
41
41
|
height: 100%;
|
|
42
42
|
background-color: ${backgroundLevel1};
|
|
43
43
|
z-index: ${zIndex.sidebar};
|
|
44
|
+
border-right: 1px solid ${(props) => props.theme.backgroundLevel3};
|
|
44
45
|
}
|
|
45
46
|
`;
|
|
46
47
|
}
|
|
@@ -7,7 +7,6 @@ type MultiSelectableContentProps<DATA_ROW extends Record<string, unknown> = Reco
|
|
|
7
7
|
onToggleAll?: (selected: boolean) => void;
|
|
8
8
|
rowHeight?: TableHeightKeyType;
|
|
9
9
|
separationLineVariant?: TableVariantType;
|
|
10
|
-
backgroundVariant?: TableVariantType;
|
|
11
10
|
locale?: TableLocalType;
|
|
12
11
|
customItemKey?: (index: number, data: DATA_ROW) => string;
|
|
13
12
|
hasScrollbar?: boolean;
|
|
@@ -17,6 +16,6 @@ type MultiSelectableContentProps<DATA_ROW extends Record<string, unknown> = Reco
|
|
|
17
16
|
/**
|
|
18
17
|
* FIXME Need to spend time to change the type to something like this
|
|
19
18
|
*/
|
|
20
|
-
export declare const MultiSelectableContent: <DATA_ROW extends Record<string, unknown> = Record<string, unknown>>({ onMultiSelectionChanged, onSingleRowSelected, onToggleAll, rowHeight, separationLineVariant,
|
|
19
|
+
export declare const MultiSelectableContent: <DATA_ROW extends Record<string, unknown> = Record<string, unknown>>({ onMultiSelectionChanged, onSingleRowSelected, onToggleAll, rowHeight, separationLineVariant, locale, customItemKey, isLoadingMoreItems, children, }: MultiSelectableContentProps<DATA_ROW>) => JSX.Element;
|
|
21
20
|
export {};
|
|
22
21
|
//# sourceMappingURL=MultiSelectableContent.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MultiSelectableContent.d.ts","sourceRoot":"","sources":["../../../src/lib/components/tablev2/MultiSelectableContent.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;
|
|
1
|
+
{"version":3,"file":"MultiSelectableContent.d.ts","sourceRoot":"","sources":["../../../src/lib/components/tablev2/MultiSelectableContent.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAUlC,OAAO,EACL,kBAAkB,EAClB,cAAc,EACd,gBAAgB,EACjB,MAAM,cAAc,CAAC;AAOtB,KAAK,2BAA2B,CAC9B,QAAQ,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,IAChE;IACF,uBAAuB,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,CAAC,QAAQ,CAAC,EAAE,KAAK,IAAI,CAAC;IAC1D,mBAAmB,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,CAAC,QAAQ,CAAC,KAAK,IAAI,CAAC;IACnD,WAAW,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IAC1C,SAAS,CAAC,EAAE,kBAAkB,CAAC;IAC/B,qBAAqB,CAAC,EAAE,gBAAgB,CAAC;IAEzC,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,KAAK,MAAM,CAAC;IAC1D,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,CAAC,OAAO,KAAK,GAAG,CAAC,OAAO,CAAC;CAC/C,CAAC;AAEF;;GAEG;AAaH,eAAO,MAAM,sBAAsB,mRAsOlC,CAAC"}
|
|
@@ -2,20 +2,12 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
|
|
|
2
2
|
import { useEffect, memo } from 'react';
|
|
3
3
|
import { areEqual } from 'react-window';
|
|
4
4
|
import { useTableContext } from './Tablev2.component';
|
|
5
|
-
import { HeadRow,
|
|
6
|
-
import {
|
|
5
|
+
import { HeadRow, SortCaret, TableBody, TableHeader, TableRowMultiSelectable, } from './Tablestyle';
|
|
6
|
+
import { TableRows, useTableScrollbar } from './TableCommon';
|
|
7
7
|
import useSyncedScroll from './useSyncedScroll';
|
|
8
8
|
import { Box } from '../box/Box';
|
|
9
9
|
import { Loader } from '../loader/Loader.component';
|
|
10
10
|
import { spacing } from '../../spacing';
|
|
11
|
-
const translations = {
|
|
12
|
-
en: {
|
|
13
|
-
noResult: 'No results found',
|
|
14
|
-
},
|
|
15
|
-
fr: {
|
|
16
|
-
noResult: `Aucun résultat`,
|
|
17
|
-
},
|
|
18
|
-
};
|
|
19
11
|
/**
|
|
20
12
|
* FIXME Need to spend time to change the type to something like this
|
|
21
13
|
*/
|
|
@@ -23,15 +15,14 @@ const translations = {
|
|
|
23
15
|
// onMultiSelectionChanged: (rows: Row<ENTRY>[]) => void;
|
|
24
16
|
// rowHeight?: TableHeightKeyType;
|
|
25
17
|
// separationLineVariant?: TableVariantType;
|
|
26
|
-
// backgroundVariant?: TableVariantType;
|
|
27
18
|
// customItemKey?: (index: Number, data: ENTRY) => string;
|
|
28
19
|
// } & ({
|
|
29
20
|
// locale: TableLocalType;
|
|
30
21
|
// } | {
|
|
31
22
|
// children: (rows: JSX.Element) => JSX.Element;
|
|
32
23
|
// });
|
|
33
|
-
export const MultiSelectableContent = ({ onMultiSelectionChanged, onSingleRowSelected, onToggleAll, rowHeight = 'h40', separationLineVariant = 'backgroundLevel3',
|
|
34
|
-
const { headerGroups, prepareRow, rows, setRowHeight, setHiddenColumns, selectedRowIds,
|
|
24
|
+
export const MultiSelectableContent = ({ onMultiSelectionChanged, onSingleRowSelected, onToggleAll, rowHeight = 'h40', separationLineVariant = 'backgroundLevel3', locale = 'en', customItemKey, isLoadingMoreItems, children, }) => {
|
|
25
|
+
const { headerGroups, prepareRow, rows, setRowHeight, setHiddenColumns, selectedRowIds, isAllRowsSelected, toggleAllRowsSelected, } = useTableContext();
|
|
35
26
|
useEffect(() => {
|
|
36
27
|
setRowHeight(rowHeight);
|
|
37
28
|
}, [rowHeight, setRowHeight]);
|
|
@@ -57,14 +48,8 @@ export const MultiSelectableContent = ({ onMultiSelectionChanged, onSingleRowSel
|
|
|
57
48
|
}
|
|
58
49
|
currentRow.toggleRowSelected(!currentRow.isSelected);
|
|
59
50
|
};
|
|
60
|
-
const { hasScrollbar,
|
|
61
|
-
const
|
|
62
|
-
if (typeof customItemKey === 'function') {
|
|
63
|
-
return customItemKey(index, data);
|
|
64
|
-
}
|
|
65
|
-
return index;
|
|
66
|
-
};
|
|
67
|
-
const { bodyRef, headerRef } = useSyncedScroll();
|
|
51
|
+
const { hasScrollbar, scrollBarWidth, handleScrollbarWidth } = useTableScrollbar();
|
|
52
|
+
const { headerRef } = useSyncedScroll();
|
|
68
53
|
const RenderRow = memo(({ index, style }) => {
|
|
69
54
|
const row = rows[index];
|
|
70
55
|
prepareRow(row);
|
|
@@ -85,7 +70,7 @@ export const MultiSelectableContent = ({ onMultiSelectionChanged, onSingleRowSel
|
|
|
85
70
|
}
|
|
86
71
|
: () => handleMultipleSelectedRows(selectedRowIds, rows, row, index),
|
|
87
72
|
};
|
|
88
|
-
return (_jsx(TableRowMultiSelectable, { ...rowProps, isSelected: row.isSelected, separationLineVariant: separationLineVariant,
|
|
73
|
+
return (_jsx(TableRowMultiSelectable, { ...rowProps, isSelected: row.isSelected, separationLineVariant: separationLineVariant, className: "tr", children: row.cells.map((cell) => {
|
|
89
74
|
const cellProps = cell.getCellProps({
|
|
90
75
|
style: {
|
|
91
76
|
...cell.column.cellStyle,
|
|
@@ -107,7 +92,7 @@ export const MultiSelectableContent = ({ onMultiSelectionChanged, onSingleRowSel
|
|
|
107
92
|
return (_jsx("div", { ...cellProps, className: "td", children: cell.render('Cell') }));
|
|
108
93
|
}) }));
|
|
109
94
|
}, areEqual);
|
|
110
|
-
return (_jsxs(_Fragment, { children: [_jsx("div", { children: headerGroups.map((headerGroup) => (_jsx(HeadRow, { ...headerGroup.getHeaderGroupProps(), hasScrollBar: hasScrollbar, scrollBarWidth: scrollBarWidth, rowHeight: rowHeight, ref: headerRef, children: headerGroup.headers.map((column) => {
|
|
95
|
+
return (_jsxs(_Fragment, { children: [_jsx("div", { children: headerGroups.map((headerGroup) => (_jsx(HeadRow, { ...headerGroup.getHeaderGroupProps(), hasScrollBar: hasScrollbar, scrollBarWidth: scrollBarWidth, rowHeight: rowHeight, separationLineVariant: separationLineVariant, ref: headerRef, children: headerGroup.headers.map((column) => {
|
|
111
96
|
const headerStyleProps = column.getHeaderProps(Object.assign(column.getSortByToggleProps(), {
|
|
112
97
|
style: { ...column === null || column === void 0 ? void 0 : column.cellStyle, position: 'relative' },
|
|
113
98
|
}));
|
|
@@ -134,5 +119,5 @@ export const MultiSelectableContent = ({ onMultiSelectionChanged, onSingleRowSel
|
|
|
134
119
|
}
|
|
135
120
|
}
|
|
136
121
|
}, children: column.render('Header') })) : (column.render('Header')), _jsx(SortCaret, { column: column })] }) }));
|
|
137
|
-
}) }))) }), _jsx(TableBody, { role: "rowgroup", className: "tbody", ref: handleScrollbarWidth, children:
|
|
122
|
+
}) }))) }), _jsx(TableBody, { role: "rowgroup", className: "tbody", ref: handleScrollbarWidth, children: _jsx(TableRows, { locale: locale, children: children, customItemKey: customItemKey, RenderRow: RenderRow }) }), isLoadingMoreItems && (_jsx(Box, { display: "flex", justifyContent: "center", marginTop: spacing.r16, marginBottom: spacing.r16, children: _jsx(Loader, { size: "large" }) }))] }));
|
|
138
123
|
};
|
|
@@ -8,12 +8,6 @@ export type DisplayedName = {
|
|
|
8
8
|
export type SearchProps = {
|
|
9
9
|
onChange: (arg0: string) => void;
|
|
10
10
|
value?: string;
|
|
11
|
-
/**
|
|
12
|
-
* @deprecated
|
|
13
|
-
* All the Table should display the Total Number of Entity.
|
|
14
|
-
*/
|
|
15
|
-
displayTotalOf?: boolean;
|
|
16
|
-
displayedName: DisplayedName;
|
|
17
11
|
locale?: TableLocalType;
|
|
18
12
|
totalCount?: number;
|
|
19
13
|
} & Omit<Props, 'disableToggle' | 'onChange'>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Search.d.ts","sourceRoot":"","sources":["../../../src/lib/components/tablev2/Search.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,KAAK,EAAE,MAAM,sCAAsC,CAAC;AAE7D,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAG9C,MAAM,MAAM,aAAa,GAAG;IAC1B,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG;IACxB,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf
|
|
1
|
+
{"version":3,"file":"Search.d.ts","sourceRoot":"","sources":["../../../src/lib/components/tablev2/Search.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,KAAK,EAAE,MAAM,sCAAsC,CAAC;AAE7D,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAG9C,MAAM,MAAM,aAAa,GAAG;IAC1B,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG;IACxB,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,GAAG,IAAI,CAAC,KAAK,EAAE,eAAe,GAAG,UAAU,CAAC,CAAC;AA0B9C,eAAO,MAAM,cAAc;YAKjB;QAAE,QAAQ,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE;WACrC,MAAM;YACL,IAAI,GAAG,IAAI;iBAapB,CAAC;AAEF,wBAAgB,WAAW,CAAC,KAAK,EAAE,WAAW,eAkC7C"}
|
|
@@ -34,15 +34,14 @@ export const TableItemCount = ({ entity, count, locale, }) => {
|
|
|
34
34
|
: (count === 1 || count === 0) && entity.singular] })] }));
|
|
35
35
|
};
|
|
36
36
|
export function TableSearch(props) {
|
|
37
|
-
const { onChange, value = '',
|
|
38
|
-
const { setGlobalFilter, rows, preGlobalFilteredRows } = useTableContext();
|
|
37
|
+
const { onChange, value = '', locale = 'en', totalCount, ...rest } = props;
|
|
38
|
+
const { setGlobalFilter, rows, preGlobalFilteredRows, entityName = { en: { singular: 'result', plural: 'results' } }, } = useTableContext();
|
|
39
39
|
const totalDispayedRows = totalCount ? totalCount : rows.length;
|
|
40
40
|
React.useEffect(() => {
|
|
41
41
|
setGlobalFilter(value);
|
|
42
42
|
}, [value, setGlobalFilter, preGlobalFilteredRows]);
|
|
43
|
-
return (_jsxs(SearchContainer, { children: [
|
|
43
|
+
return (_jsxs(SearchContainer, { children: [_jsx(TableItemCount, { entity: entityName[locale] || entityName.en, count: totalDispayedRows, locale: locale }), _jsx(SearchInput, { value: value, placeholder: translations[locale].search, disableToggle: true, size: "1", onChange: (evt) => {
|
|
44
44
|
if (typeof onChange === 'function') {
|
|
45
|
-
// @ts-ignore
|
|
46
45
|
onChange(evt.target.value);
|
|
47
46
|
}
|
|
48
47
|
}, ...rest })] }));
|
|
@@ -1,17 +1,16 @@
|
|
|
1
|
-
|
|
1
|
+
import React from 'react';
|
|
2
2
|
import { Row } from 'react-table';
|
|
3
3
|
import { TableHeightKeyType, TableLocalType, TableVariantType } from './TableUtils';
|
|
4
4
|
export type SingleSelectableContentProps<DATA_ROW extends Record<string, unknown> = Record<string, unknown>> = {
|
|
5
5
|
rowHeight: TableHeightKeyType;
|
|
6
6
|
separationLineVariant: TableVariantType;
|
|
7
|
-
backgroundVariant: TableVariantType;
|
|
8
7
|
onRowSelected?: (row: Row<DATA_ROW>) => void;
|
|
9
8
|
selectedId?: string;
|
|
10
9
|
locale?: TableLocalType;
|
|
11
|
-
customItemKey?: (index:
|
|
10
|
+
customItemKey?: (index: number, data: DATA_ROW) => string;
|
|
12
11
|
hasScrollbar?: boolean;
|
|
13
12
|
isLoadingMoreItems?: boolean;
|
|
14
|
-
children?: (rows: JSX.Element) => JSX.Element;
|
|
13
|
+
children?: (rows: React.JSX.Element) => React.JSX.Element;
|
|
15
14
|
};
|
|
16
|
-
export declare function SingleSelectableContent<DATA_ROW extends Record<string, unknown> = Record<string, unknown>>({ rowHeight, separationLineVariant,
|
|
15
|
+
export declare function SingleSelectableContent<DATA_ROW extends Record<string, unknown> = Record<string, unknown>>({ rowHeight, separationLineVariant, locale, selectedId, isLoadingMoreItems, onRowSelected, customItemKey, children, }: SingleSelectableContentProps<DATA_ROW>): JSX.Element;
|
|
17
16
|
//# sourceMappingURL=SingleSelectableContent.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SingleSelectableContent.d.ts","sourceRoot":"","sources":["../../../src/lib/components/tablev2/SingleSelectableContent.tsx"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"SingleSelectableContent.d.ts","sourceRoot":"","sources":["../../../src/lib/components/tablev2/SingleSelectableContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0B,MAAM,OAAO,CAAC;AAE/C,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AASlC,OAAO,EACL,kBAAkB,EAClB,cAAc,EACd,gBAAgB,EACjB,MAAM,cAAc,CAAC;AAOtB,MAAM,MAAM,4BAA4B,CACtC,QAAQ,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,IAChE;IACF,SAAS,EAAE,kBAAkB,CAAC;IAC9B,qBAAqB,EAAE,gBAAgB,CAAC;IAExC,aAAa,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,CAAC,QAAQ,CAAC,KAAK,IAAI,CAAC;IAC7C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,KAAK,MAAM,CAAC;IAC1D,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,KAAK,CAAC,GAAG,CAAC,OAAO,KAAK,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC;CAC3D,CAAC;AAEF,wBAAgB,uBAAuB,CACrC,QAAQ,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAClE,EACA,SAAiB,EACjB,qBAA0C,EAE1C,MAAa,EACb,UAAU,EACV,kBAAkB,EAClB,aAAa,EACb,aAAa,EACb,QAAQ,GACT,EAAE,4BAA4B,CAAC,QAAQ,CAAC,eAmJxC"}
|
|
@@ -2,26 +2,18 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
|
|
|
2
2
|
import { memo, useEffect } from 'react';
|
|
3
3
|
import { areEqual } from 'react-window';
|
|
4
4
|
import { useTableContext } from './Tablev2.component';
|
|
5
|
-
import { HeadRow, TableRow, TableBody, TableHeader,
|
|
6
|
-
import {
|
|
5
|
+
import { HeadRow, TableRow, TableBody, TableHeader, SortCaret, } from './Tablestyle';
|
|
6
|
+
import { TableRows, useTableScrollbar } from './TableCommon';
|
|
7
7
|
import useSyncedScroll from './useSyncedScroll';
|
|
8
8
|
import { Loader } from '../loader/Loader.component';
|
|
9
9
|
import { Box } from '../box/Box';
|
|
10
10
|
import { spacing } from '../../spacing';
|
|
11
|
-
|
|
12
|
-
en: {
|
|
13
|
-
noResult: 'No results found',
|
|
14
|
-
},
|
|
15
|
-
fr: {
|
|
16
|
-
noResult: `Aucun résultat`,
|
|
17
|
-
},
|
|
18
|
-
};
|
|
19
|
-
export function SingleSelectableContent({ rowHeight = 'h40', separationLineVariant = 'backgroundLevel3', backgroundVariant = 'backgroundLevel1', locale = 'en', selectedId, isLoadingMoreItems, onRowSelected, customItemKey, children, }) {
|
|
11
|
+
export function SingleSelectableContent({ rowHeight = 'h40', separationLineVariant = 'backgroundLevel3', locale = 'en', selectedId, isLoadingMoreItems, onRowSelected, customItemKey, children, }) {
|
|
20
12
|
if (selectedId && !onRowSelected) {
|
|
21
13
|
console.error('Please specify the onRowSelected function.');
|
|
22
14
|
}
|
|
23
|
-
const {
|
|
24
|
-
const { headerGroups, prepareRow, rows,
|
|
15
|
+
const { headerRef } = useSyncedScroll();
|
|
16
|
+
const { headerGroups, prepareRow, rows, setRowHeight } = useTableContext();
|
|
25
17
|
useEffect(() => {
|
|
26
18
|
setRowHeight(rowHeight);
|
|
27
19
|
}, [rowHeight, setRowHeight]);
|
|
@@ -55,7 +47,7 @@ export function SingleSelectableContent({ rowHeight = 'h40', separationLineVaria
|
|
|
55
47
|
},
|
|
56
48
|
},
|
|
57
49
|
};
|
|
58
|
-
return (_jsx(TableRow, { ...rowProps, isSelected: selectedId === row.id, "aria-selected": selectedId === row.id ? 'true' : 'false', separationLineVariant: separationLineVariant,
|
|
50
|
+
return (_jsx(TableRow, { ...rowProps, isSelected: selectedId === row.id, "aria-selected": selectedId === row.id ? 'true' : 'false', separationLineVariant: separationLineVariant, selectedId: selectedId, className: "tr", children: row.cells.map((cell) => {
|
|
59
51
|
let cellProps = cell.getCellProps({
|
|
60
52
|
style: {
|
|
61
53
|
...cell.column.cellStyle,
|
|
@@ -69,14 +61,8 @@ export function SingleSelectableContent({ rowHeight = 'h40', separationLineVaria
|
|
|
69
61
|
return (_jsx("div", { ...cellProps, className: "td", children: cell.render('Cell') }));
|
|
70
62
|
}) }));
|
|
71
63
|
}, areEqual);
|
|
72
|
-
const { hasScrollbar,
|
|
73
|
-
|
|
74
|
-
if (typeof customItemKey === 'function') {
|
|
75
|
-
return customItemKey(index, data);
|
|
76
|
-
}
|
|
77
|
-
return index;
|
|
78
|
-
}
|
|
79
|
-
return (_jsxs(_Fragment, { children: [_jsx("div", { className: "thead", role: "rowgroup", children: headerGroups.map((headerGroup) => (_jsx(HeadRow, { ...headerGroup.getHeaderGroupProps(), ref: headerRef, hasScrollBar: hasScrollbar, scrollBarWidth: scrollBarWidth, rowHeight: rowHeight, style: { overflow: 'hidden' }, children: headerGroup.headers.map((column) => {
|
|
64
|
+
const { hasScrollbar, scrollBarWidth, handleScrollbarWidth } = useTableScrollbar();
|
|
65
|
+
return (_jsxs(_Fragment, { children: [_jsx("div", { className: "thead", role: "rowgroup", children: headerGroups.map((headerGroup) => (_jsx(HeadRow, { ...headerGroup.getHeaderGroupProps(), ref: headerRef, separationLineVariant: separationLineVariant, hasScrollBar: hasScrollbar, scrollBarWidth: scrollBarWidth, rowHeight: rowHeight, style: { overflow: 'hidden' }, children: headerGroup.headers.map((column) => {
|
|
80
66
|
const headerStyleProps = column.getHeaderProps(Object.assign(column.getSortByToggleProps(), {
|
|
81
67
|
style: { ...column.cellStyle, position: 'relative' },
|
|
82
68
|
}));
|
|
@@ -90,5 +76,5 @@ export function SingleSelectableContent({ rowHeight = 'h40', separationLineVaria
|
|
|
90
76
|
headerStyleProps.onClick(event);
|
|
91
77
|
}
|
|
92
78
|
}, children: _jsxs("div", { children: [column.render('Header'), _jsx(SortCaret, { column: column })] }) }));
|
|
93
|
-
}) }))) }), _jsx(TableBody, { role: "rowgroup", className: "tbody", ref: handleScrollbarWidth, children:
|
|
79
|
+
}) }))) }), _jsx(TableBody, { role: "rowgroup", className: "tbody", ref: handleScrollbarWidth, children: _jsx(TableRows, { locale: locale, children: children, customItemKey: customItemKey, RenderRow: RenderRow }) }), isLoadingMoreItems && (_jsx(Box, { display: "flex", justifyContent: "center", marginTop: spacing.r16, marginBottom: spacing.r16, children: _jsx(Loader, { size: "large" }) }))] }));
|
|
94
80
|
}
|
|
@@ -1,7 +1,8 @@
|
|
|
1
|
-
import { ComponentType, LegacyRef } from 'react';
|
|
1
|
+
import React, { ComponentType, LegacyRef } from 'react';
|
|
2
2
|
import { Row } from 'react-table';
|
|
3
3
|
import { FixedSizeList, ListChildComponentProps, ListItemKeySelector } from 'react-window';
|
|
4
|
-
import { TableHeightKeyType } from './TableUtils';
|
|
4
|
+
import { TableHeightKeyType, TableLocalType } from './TableUtils';
|
|
5
|
+
import { CSSProperties } from 'styled-components';
|
|
5
6
|
type VirtualizedRowsType<DATA_ROW extends Record<string, unknown> = Record<string, unknown>> = {
|
|
6
7
|
rows: Row<DATA_ROW>[];
|
|
7
8
|
RenderRow: ComponentType<ListChildComponentProps<Row<DATA_ROW>[]>>;
|
|
@@ -16,9 +17,20 @@ type VirtualizedRowsType<DATA_ROW extends Record<string, unknown> = Record<strin
|
|
|
16
17
|
export declare const VirtualizedRows: <DATA_ROW extends Record<string, unknown> = Record<string, unknown>>({ rows, rowHeight, setHasScrollbar, onBottom, onBottomOffset, RenderRow, listRef, itemKey, }: VirtualizedRowsType<DATA_ROW>) => JSX.Element;
|
|
17
18
|
export declare const useTableScrollbar: () => {
|
|
18
19
|
hasScrollbar: boolean;
|
|
19
|
-
setHasScrollbar:
|
|
20
|
+
setHasScrollbar: React.Dispatch<React.SetStateAction<boolean>>;
|
|
20
21
|
scrollBarWidth: number;
|
|
21
22
|
handleScrollbarWidth: (node: any) => void;
|
|
22
23
|
};
|
|
24
|
+
export type RenderRowType = {
|
|
25
|
+
index: number;
|
|
26
|
+
style: CSSProperties;
|
|
27
|
+
};
|
|
28
|
+
type TableRowsProps<DATA_ROW extends Record<string, unknown> = Record<string, unknown>> = {
|
|
29
|
+
locale?: TableLocalType;
|
|
30
|
+
children?: (children: JSX.Element) => JSX.Element;
|
|
31
|
+
customItemKey?: (index: number, data: DATA_ROW) => string;
|
|
32
|
+
RenderRow: React.MemoExoticComponent<({ index, style }: RenderRowType) => JSX.Element>;
|
|
33
|
+
};
|
|
34
|
+
export declare function TableRows<DATA_ROW extends Record<string, unknown> = Record<string, unknown>>({ locale, children, customItemKey, RenderRow }: TableRowsProps<DATA_ROW>): JSX.Element | null;
|
|
23
35
|
export {};
|
|
24
36
|
//# sourceMappingURL=TableCommon.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableCommon.d.ts","sourceRoot":"","sources":["../../../src/lib/components/tablev2/TableCommon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,SAAS,EAAyB,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"TableCommon.d.ts","sourceRoot":"","sources":["../../../src/lib/components/tablev2/TableCommon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,SAAS,EAAyB,MAAM,OAAO,CAAC;AAC/E,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC,OAAO,EACL,aAAa,EAEb,uBAAuB,EACvB,mBAAmB,EACpB,MAAM,cAAc,CAAC;AACtB,OAAO,EAGL,kBAAkB,EAClB,cAAc,EAEf,MAAM,cAAc,CAAC;AAOtB,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAElD,KAAK,mBAAmB,CACtB,QAAQ,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,IAChE;IACF,IAAI,EAAE,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC;IACtB,SAAS,EAAE,aAAa,CAAC,uBAAuB,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,CAAC;IACnE,SAAS,EAAE,kBAAkB,CAAC;IAC9B,eAAe,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;IAC/D,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,OAAO,CAAC,EAAE,mBAAmB,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;IAC/C,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,OAAO,CAAC,EAAE,SAAS,CAAC,aAAa,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,CAAC;CACrD,CAAC;AAEF,eAAO,MAAM,eAAe,kNA8C3B,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;;;CAwB7B,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,aAAa,CAAC;CACtB,CAAC;AAEF,KAAK,cAAc,CACjB,QAAQ,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,IAChE;IACF,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,GAAG,CAAC,OAAO,KAAK,GAAG,CAAC,OAAO,CAAC;IAClD,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,KAAK,MAAM,CAAC;IAC1D,SAAS,EAAE,KAAK,CAAC,mBAAmB,CAClC,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,aAAa,KAAK,GAAG,CAAC,OAAO,CACjD,CAAC;CACH,CAAC;AACF,wBAAgB,SAAS,CACvB,QAAQ,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAClE,EAAE,MAAM,EAAE,QAAQ,EAAE,aAAa,EAAE,SAAS,EAAE,EAAE,cAAc,CAAC,QAAQ,CAAC,sBAuEzE"}
|