@pega/lists-react 9.0.0-build.20.13 → 9.0.0-build.20.15
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/lib/Core/Views/Gallery/GalleryContainer.d.ts +18 -0
- package/lib/Core/Views/Gallery/GalleryContainer.d.ts.map +1 -0
- package/lib/Core/Views/Gallery/GalleryContainer.js +61 -0
- package/lib/Core/Views/Gallery/GalleryContainer.js.map +1 -0
- package/lib/Core/Views/Gallery/index.d.ts.map +1 -1
- package/lib/Core/Views/Gallery/index.js +2 -3
- package/lib/Core/Views/Gallery/index.js.map +1 -1
- package/lib/Core/Views/Gallery/utils.d.ts +9 -8
- package/lib/Core/Views/Gallery/utils.d.ts.map +1 -1
- package/lib/Core/Views/Gallery/utils.js +6 -15
- package/lib/Core/Views/Gallery/utils.js.map +1 -1
- package/package.json +7 -7
- package/lib/Core/Views/Gallery/StyledGalleryContainer.d.ts +0 -16
- package/lib/Core/Views/Gallery/StyledGalleryContainer.d.ts.map +0 -1
- package/lib/Core/Views/Gallery/StyledGalleryContainer.js +0 -48
- package/lib/Core/Views/Gallery/StyledGalleryContainer.js.map +0 -1
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { type ReactNode } from 'react';
|
|
2
|
+
import type { RsCoreTypes } from 'pega-repeating-structures-core';
|
|
3
|
+
import type { ImageSize, WithAttributes } from '@pega/cosmos-react-core';
|
|
4
|
+
interface GalleryContainerProps {
|
|
5
|
+
children?: ReactNode;
|
|
6
|
+
view: RsCoreTypes.View;
|
|
7
|
+
isFullscreen: boolean;
|
|
8
|
+
className?: string;
|
|
9
|
+
image?: {
|
|
10
|
+
placement?: RsCoreTypes.HeroImagePlacement;
|
|
11
|
+
size?: ImageSize;
|
|
12
|
+
};
|
|
13
|
+
}
|
|
14
|
+
declare const GalleryContainer: import("react").ForwardRefExoticComponent<Omit<WithAttributes<"div", GalleryContainerProps>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
|
|
15
|
+
export default GalleryContainer;
|
|
16
|
+
declare const StyledVirtualizeContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
|
|
17
|
+
export { StyledVirtualizeContainer };
|
|
18
|
+
//# sourceMappingURL=GalleryContainer.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"GalleryContainer.d.ts","sourceRoot":"","sources":["../../../../Core/Views/Gallery/GalleryContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AASnD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAClE,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAYzE,UAAU,qBAAqB;IAC7B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,IAAI,EAAE,WAAW,CAAC,IAAI,CAAC;IACvB,YAAY,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE;QACN,SAAS,CAAC,EAAE,WAAW,CAAC,kBAAkB,CAAC;QAC3C,IAAI,CAAC,EAAE,SAAS,CAAC;KAClB,CAAC;CACH;AAwDD,QAAA,MAAM,gBAAgB,sJAkBrB,CAAC;AAIF,eAAe,gBAAgB,CAAC;AAEhC,QAAA,MAAM,yBAAyB,6NAG9B,CAAC;AAGF,OAAO,EAAE,yBAAyB,EAAE,CAAC"}
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { forwardRef } from 'react';
|
|
3
|
+
import styled, { css } from 'styled-components';
|
|
4
|
+
import { getBaseCardContainerStyles, getInlineImageCardContainerStyles, StyledHeader, StyledSelectionCard } from '@pega/cosmos-react-core/lib/components/SelectionCard/SelectionCard.styles';
|
|
5
|
+
import { defaultThemeProp } from '@pega/cosmos-react-core';
|
|
6
|
+
import { generateRSDataContainerHeightStyles, generateRSHeightStyles } from '../../Utils/styles';
|
|
7
|
+
import { DEFAULT_IMAGE_PLACEMENT, DEFAULT_IMAGE_SIZE, GALLERY_IMAGE_PLACEMENT_MAP, isInlinePlacement } from './utils';
|
|
8
|
+
const StyledGalleryContainer = styled.div(({ view, isFullscreen, theme }) => {
|
|
9
|
+
return css `
|
|
10
|
+
${generateRSHeightStyles({ view, isFullscreen })}
|
|
11
|
+
|
|
12
|
+
.grid-container {
|
|
13
|
+
position: absolute;
|
|
14
|
+
width: 100%;
|
|
15
|
+
padding: 0.2rem;
|
|
16
|
+
${getBaseCardContainerStyles(theme)}
|
|
17
|
+
|
|
18
|
+
${StyledSelectionCard} ${StyledHeader} {
|
|
19
|
+
min-height: auto;
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
`;
|
|
23
|
+
});
|
|
24
|
+
StyledGalleryContainer.defaultProps = defaultThemeProp;
|
|
25
|
+
const StyledInlineImageGalleryContainer = styled(StyledGalleryContainer)(({ theme, imageSize, imagePlacement }) => {
|
|
26
|
+
return css `
|
|
27
|
+
*:has(> .grid-container) {
|
|
28
|
+
container-type: inline-size;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.grid-container {
|
|
32
|
+
${getInlineImageCardContainerStyles(theme, {
|
|
33
|
+
placement: GALLERY_IMAGE_PLACEMENT_MAP[imagePlacement],
|
|
34
|
+
size: imageSize
|
|
35
|
+
})}
|
|
36
|
+
|
|
37
|
+
${StyledSelectionCard} ${StyledHeader} {
|
|
38
|
+
min-height: auto;
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
`;
|
|
42
|
+
});
|
|
43
|
+
StyledInlineImageGalleryContainer.defaultProps = defaultThemeProp;
|
|
44
|
+
const GalleryContainer = forwardRef(({ image, ...props }, ref) => {
|
|
45
|
+
if (image) {
|
|
46
|
+
const { placement = DEFAULT_IMAGE_PLACEMENT, size = DEFAULT_IMAGE_SIZE } = image;
|
|
47
|
+
if (isInlinePlacement(placement)) {
|
|
48
|
+
return (_jsx(StyledInlineImageGalleryContainer, { ref: ref, imageSize: size, imagePlacement: placement, ...props }));
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
return _jsx(StyledGalleryContainer, { ref: ref, ...props });
|
|
52
|
+
});
|
|
53
|
+
GalleryContainer.displayName = 'GalleryContainer';
|
|
54
|
+
export default GalleryContainer;
|
|
55
|
+
const StyledVirtualizeContainer = styled.div `
|
|
56
|
+
${generateRSDataContainerHeightStyles};
|
|
57
|
+
position: relative;
|
|
58
|
+
`;
|
|
59
|
+
StyledVirtualizeContainer.defaultProps = defaultThemeProp;
|
|
60
|
+
export { StyledVirtualizeContainer };
|
|
61
|
+
//# sourceMappingURL=GalleryContainer.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"GalleryContainer.js","sourceRoot":"","sources":["../../../../Core/Views/Gallery/GalleryContainer.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAkB,MAAM,OAAO,CAAC;AACnD,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,0BAA0B,EAC1B,iCAAiC,EACjC,YAAY,EACZ,mBAAmB,EACpB,MAAM,2EAA2E,CAAC;AAGnF,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAE3D,OAAO,EAAE,mCAAmC,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAEjG,OAAO,EACL,uBAAuB,EACvB,kBAAkB,EAClB,2BAA2B,EAC3B,iBAAiB,EAClB,MAAM,SAAS,CAAC;AAuBjB,MAAM,sBAAsB,GAAG,MAAM,CAAC,GAAG,CACvC,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,KAAK,EAAE,EAAE,EAAE;IAChC,OAAO,GAAG,CAAA;QACN,sBAAsB,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,CAAC;;;;;;UAM5C,0BAA0B,CAAC,KAAK,CAAC;;UAEjC,mBAAmB,IAAI,YAAY;;;;KAIxC,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,sBAAsB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEvD,MAAM,iCAAiC,GAAG,MAAM,CAAC,sBAAsB,CAAC,CAEtE,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,EAAE,EAAE;IACzC,OAAO,GAAG,CAAA;;;;;;QAMJ,iCAAiC,CAAC,KAAK,EAAE;QACzC,SAAS,EAAE,2BAA2B,CAAC,cAAc,CAAC;QACtD,IAAI,EAAE,SAAS;KAChB,CAAC;;QAEA,mBAAmB,IAAI,YAAY;;;;GAIxC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,iCAAiC,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAElE,MAAM,gBAAgB,GAAG,UAAU,CACjC,CAAC,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IAC3B,IAAI,KAAK,EAAE,CAAC;QACV,MAAM,EAAE,SAAS,GAAG,uBAAuB,EAAE,IAAI,GAAG,kBAAkB,EAAE,GAAG,KAAK,CAAC;QACjF,IAAI,iBAAiB,CAAC,SAAS,CAAC,EAAE,CAAC;YACjC,OAAO,CACL,KAAC,iCAAiC,IAChC,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAI,EACf,cAAc,EAAE,SAAS,KACrB,KAAK,GACT,CACH,CAAC;QACJ,CAAC;IACH,CAAC;IAED,OAAO,KAAC,sBAAsB,IAAC,GAAG,EAAE,GAAG,KAAM,KAAK,GAAI,CAAC;AACzD,CAAC,CACF,CAAC;AAEF,gBAAgB,CAAC,WAAW,GAAG,kBAAkB,CAAC;AAElD,eAAe,gBAAgB,CAAC;AAEhC,MAAM,yBAAyB,GAAG,MAAM,CAAC,GAAG,CAAA;IACxC,mCAAmC;;CAEtC,CAAC;AAEF,yBAAyB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAC1D,OAAO,EAAE,yBAAyB,EAAE,CAAC","sourcesContent":["import { forwardRef, type ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n getBaseCardContainerStyles,\n getInlineImageCardContainerStyles,\n StyledHeader,\n StyledSelectionCard\n} from '@pega/cosmos-react-core/lib/components/SelectionCard/SelectionCard.styles';\nimport type { RsCoreTypes } from 'pega-repeating-structures-core';\nimport type { ImageSize, WithAttributes } from '@pega/cosmos-react-core';\nimport { defaultThemeProp } from '@pega/cosmos-react-core';\n\nimport { generateRSDataContainerHeightStyles, generateRSHeightStyles } from '../../Utils/styles';\n\nimport {\n DEFAULT_IMAGE_PLACEMENT,\n DEFAULT_IMAGE_SIZE,\n GALLERY_IMAGE_PLACEMENT_MAP,\n isInlinePlacement\n} from './utils';\n\ninterface GalleryContainerProps {\n children?: ReactNode;\n view: RsCoreTypes.View;\n isFullscreen: boolean;\n className?: string;\n image?: {\n placement?: RsCoreTypes.HeroImagePlacement;\n size?: ImageSize;\n };\n}\n\ninterface StyledGalleryContainerProps {\n view: RsCoreTypes.View;\n isFullscreen: boolean;\n}\n\ninterface StyledInlineImageGalleryContainerProps extends StyledGalleryContainerProps {\n imagePlacement: Extract<RsCoreTypes.HeroImagePlacement, 'left' | 'right'>;\n imageSize: ImageSize;\n}\n\nconst StyledGalleryContainer = styled.div<StyledGalleryContainerProps>(\n ({ view, isFullscreen, theme }) => {\n return css`\n ${generateRSHeightStyles({ view, isFullscreen })}\n\n .grid-container {\n position: absolute;\n width: 100%;\n padding: 0.2rem;\n ${getBaseCardContainerStyles(theme)}\n\n ${StyledSelectionCard} ${StyledHeader} {\n min-height: auto;\n }\n }\n `;\n }\n);\n\nStyledGalleryContainer.defaultProps = defaultThemeProp;\n\nconst StyledInlineImageGalleryContainer = styled(StyledGalleryContainer)<\n Pick<StyledInlineImageGalleryContainerProps, 'imageSize' | 'imagePlacement'>\n>(({ theme, imageSize, imagePlacement }) => {\n return css`\n *:has(> .grid-container) {\n container-type: inline-size;\n }\n\n .grid-container {\n ${getInlineImageCardContainerStyles(theme, {\n placement: GALLERY_IMAGE_PLACEMENT_MAP[imagePlacement],\n size: imageSize\n })}\n\n ${StyledSelectionCard} ${StyledHeader} {\n min-height: auto;\n }\n }\n `;\n});\n\nStyledInlineImageGalleryContainer.defaultProps = defaultThemeProp;\n\nconst GalleryContainer = forwardRef<HTMLDivElement, WithAttributes<'div', GalleryContainerProps>>(\n ({ image, ...props }, ref) => {\n if (image) {\n const { placement = DEFAULT_IMAGE_PLACEMENT, size = DEFAULT_IMAGE_SIZE } = image;\n if (isInlinePlacement(placement)) {\n return (\n <StyledInlineImageGalleryContainer\n ref={ref}\n imageSize={size}\n imagePlacement={placement}\n {...props}\n />\n );\n }\n }\n\n return <StyledGalleryContainer ref={ref} {...props} />;\n }\n);\n\nGalleryContainer.displayName = 'GalleryContainer';\n\nexport default GalleryContainer;\n\nconst StyledVirtualizeContainer = styled.div`\n ${generateRSDataContainerHeightStyles};\n position: relative;\n`;\n\nStyledVirtualizeContainer.defaultProps = defaultThemeProp;\nexport { StyledVirtualizeContainer };\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../Core/Views/Gallery/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAa,KAAK,WAAW,EAAE,MAAM,gCAAgC,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../Core/Views/Gallery/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAa,KAAK,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAe7E,iBAAS,OAAO,CAAC,EAAE,IAAI,EAAE,EAAE;IAAE,IAAI,EAAE,WAAW,CAAC,IAAI,CAAA;CAAE,2CAsEpD;kBAtEQ,OAAO;;;AA0EhB,eAAe,OAAO,CAAC"}
|
|
@@ -11,8 +11,7 @@ import RsCardWrapper from '../RsCardWrapper';
|
|
|
11
11
|
import LoadingIndicator from '../../Components/LoadingIndicator';
|
|
12
12
|
import GalleryCard from './Components/GalleryCard';
|
|
13
13
|
import GalleryCheckboxCard from './Components/GalleryCheckboxCard';
|
|
14
|
-
import
|
|
15
|
-
import { isInlineImage } from './utils';
|
|
14
|
+
import GalleryContainer, { StyledVirtualizeContainer } from './GalleryContainer';
|
|
16
15
|
function Gallery({ view }) {
|
|
17
16
|
const isFullscreen = !!useFullscreenContext()?.[0];
|
|
18
17
|
const { columns = [], meta, rows } = view;
|
|
@@ -24,7 +23,7 @@ function Gallery({ view }) {
|
|
|
24
23
|
cols.sort((colA, colB) => (colA.order ?? 0) - (colB.order ?? 0));
|
|
25
24
|
return cols;
|
|
26
25
|
}, [columns]);
|
|
27
|
-
return (_jsx(RsCardWrapper, { children: _jsxs(
|
|
26
|
+
return (_jsx(RsCardWrapper, { children: _jsxs(GalleryContainer, { "data-test-id": 'gallery', "data-testid": 'gallery', view: view, isFullscreen: isFullscreen, image: heroImage, children: [_jsx(Toolbar, { view: view }), _jsx(RenderView, { view: view, type: EXTERNAL_FILTERS }), _jsxs(StyledVirtualizeContainer, { className: 'container', children: [_jsx(Virtualiser, { id: 'rootVirtualiser', rowContainerClass: 'grid-container', view: view, bufferMultiplier: 0.8, children: rows?.length
|
|
28
27
|
? rows.map(row => selectionMode === SELECTION_MODES.multi && selectionColumn ? (_jsx(GalleryCheckboxCard, { meta: meta, row: row, visibleColumns: visibleColumns, headerColumn: headerColumn, selectionColumn: selectionColumn }, row.reactKey)) : (_jsx(GalleryCard, { meta: meta, row: row, visibleColumns: visibleColumns, headerColumn: headerColumn }, row.reactKey)))
|
|
29
28
|
: [] }), _jsx(LoadingIndicator, { view: view, show: !rows || !!view.isLoading })] })] }) }));
|
|
30
29
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../Core/Views/Gallery/index.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAEhC,OAAO,EAAE,SAAS,EAAoB,MAAM,gCAAgC,CAAC;AAC7E,OAAO,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AAC/D,OAAO,EAAE,mBAAmB,EAAE,MAAM,uDAAuD,CAAC;AAE5F,OAAO,WAAW,MAAM,4BAA4B,CAAC;AACrD,OAAO,OAAO,MAAM,0BAA0B,CAAC;AAC/C,OAAO,UAAU,MAAM,6CAA6C,CAAC;AACrE,OAAO,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AACpE,OAAO,aAAa,MAAM,kBAAkB,CAAC;AAC7C,OAAO,gBAAgB,MAAM,mCAAmC,CAAC;AAEjE,OAAO,WAAW,MAAM,0BAA0B,CAAC;AACnD,OAAO,mBAAmB,MAAM,kCAAkC,CAAC;AACnE,OAAO,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../Core/Views/Gallery/index.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAEhC,OAAO,EAAE,SAAS,EAAoB,MAAM,gCAAgC,CAAC;AAC7E,OAAO,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AAC/D,OAAO,EAAE,mBAAmB,EAAE,MAAM,uDAAuD,CAAC;AAE5F,OAAO,WAAW,MAAM,4BAA4B,CAAC;AACrD,OAAO,OAAO,MAAM,0BAA0B,CAAC;AAC/C,OAAO,UAAU,MAAM,6CAA6C,CAAC;AACrE,OAAO,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AACpE,OAAO,aAAa,MAAM,kBAAkB,CAAC;AAC7C,OAAO,gBAAgB,MAAM,mCAAmC,CAAC;AAEjE,OAAO,WAAW,MAAM,0BAA0B,CAAC;AACnD,OAAO,mBAAmB,MAAM,kCAAkC,CAAC;AACnE,OAAO,gBAAgB,EAAE,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAEjF,SAAS,OAAO,CAAC,EAAE,IAAI,EAA8B;IACnD,MAAM,YAAY,GAAG,CAAC,CAAC,oBAAoB,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC;IAEnD,MAAM,EAAE,OAAO,GAAG,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC;IAC1C,MAAM,EAAE,aAAa,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,GAAG,EAAE,EAAE,aAAa,EAAE,GAAG,IAAI,CAAC;IAE1E,MAAM,YAAY,GAAG,OAAO,CAC1B,GAAG,EAAE,CAAC,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,KAAK,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,EACtF,CAAC,MAAM,EAAE,OAAO,CAAC,CAClB,CAAC;IAEF,MAAM,eAAe,GAAG,OAAO,CAC7B,GAAG,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,KAAK,mBAAmB,CAAC,KAAK,CAAC,EAAE,CAAC,EACxE,CAAC,OAAO,CAAC,CACV,CAAC;IAEF,MAAM,cAAc,GAAG,OAAO,CAAC,GAAG,EAAE;QAClC,MAAM,IAAI,GAAG,CAAC,GAAG,OAAO,CAAC,CAAC,MAAM,CAC9B,GAAG,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,MAAM,IAAI,GAAG,CAAC,KAAK,CAAC,IAAI,KAAK,SAAS,CAAC,iBAAiB,CACrE,CAAC;QACF,IAAI,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,CAAC,CAAC,CAAC;QACjE,OAAO,IAAI,CAAC;IACd,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,OAAO,CACL,KAAC,aAAa,cACZ,MAAC,gBAAgB,oBACF,SAAS,iBACV,SAAS,EACrB,IAAI,EAAE,IAAI,EACV,YAAY,EAAE,YAAY,EAC1B,KAAK,EAAE,SAAS,aAEhB,KAAC,OAAO,IAAC,IAAI,EAAE,IAAI,GAAI,EACvB,KAAC,UAAU,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,gBAAgB,GAAI,EAClD,MAAC,yBAAyB,IAAC,SAAS,EAAC,WAAW,aAC9C,KAAC,WAAW,IACV,EAAE,EAAC,iBAAiB,EACpB,iBAAiB,EAAC,gBAAgB,EAClC,IAAI,EAAE,IAAI,EACV,gBAAgB,EAAE,GAAG,YAEpB,IAAI,EAAE,MAAM;gCACX,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CACb,aAAa,KAAK,eAAe,CAAC,KAAK,IAAI,eAAe,CAAC,CAAC,CAAC,CAC3D,KAAC,mBAAmB,IAElB,IAAI,EAAE,IAAI,EACV,GAAG,EAAE,GAAG,EACR,cAAc,EAAE,cAAc,EAC9B,YAAY,EAAE,YAAY,EAC1B,eAAe,EAAE,eAAe,IAL3B,GAAG,CAAC,QAAQ,CAMjB,CACH,CAAC,CAAC,CAAC,CACF,KAAC,WAAW,IAEV,IAAI,EAAE,IAAI,EACV,GAAG,EAAE,GAAG,EACR,cAAc,EAAE,cAAc,EAC9B,YAAY,EAAE,YAAY,IAJrB,GAAG,CAAC,QAAQ,CAKjB,CACH,CACF;gCACH,CAAC,CAAC,EAAE,GACM,EACd,KAAC,gBAAgB,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,IAAI,IAAI,CAAC,CAAC,IAAI,CAAC,SAAS,GAAI,IACvC,IACX,GACL,CACjB,CAAC;AACJ,CAAC;AAED,OAAO,CAAC,WAAW,GAAG,SAAS,CAAC;AAEhC,eAAe,OAAO,CAAC","sourcesContent":["import { useMemo } from 'react';\n\nimport { FieldType, type RsCoreTypes } from 'pega-repeating-structures-core';\nimport { useFullscreenContext } from '@pega/cosmos-react-core';\nimport { rowSelectColumnMeta } from 'pega-repeating-structures-core/lib/src/core/constants';\n\nimport Virtualiser from '../Table/VirtualizeWrapper';\nimport Toolbar from '../../Components/Toolbar';\nimport RenderView from '../../Components/RenderingEngine/RenderView';\nimport { EXTERNAL_FILTERS, SELECTION_MODES } from '../../constants';\nimport RsCardWrapper from '../RsCardWrapper';\nimport LoadingIndicator from '../../Components/LoadingIndicator';\n\nimport GalleryCard from './Components/GalleryCard';\nimport GalleryCheckboxCard from './Components/GalleryCheckboxCard';\nimport GalleryContainer, { StyledVirtualizeContainer } from './GalleryContainer';\n\nfunction Gallery({ view }: { view: RsCoreTypes.View }) {\n const isFullscreen = !!useFullscreenContext()?.[0];\n\n const { columns = [], meta, rows } = view;\n const { galleryConfig: { heroImage, header } = {}, selectionMode } = meta;\n\n const headerColumn = useMemo(\n () => (header?.field ? columns.find(col => col.field.id === header.field) : undefined),\n [header, columns]\n );\n\n const selectionColumn = useMemo(\n () => columns.find(col => col.field.id === rowSelectColumnMeta.field.id),\n [columns]\n );\n\n const visibleColumns = useMemo(() => {\n const cols = [...columns].filter(\n col => !col.hidden && col.field.type !== FieldType.ACTION_FIELD_TYPE\n );\n cols.sort((colA, colB) => (colA.order ?? 0) - (colB.order ?? 0));\n return cols;\n }, [columns]);\n\n return (\n <RsCardWrapper>\n <GalleryContainer\n data-test-id='gallery'\n data-testid='gallery'\n view={view}\n isFullscreen={isFullscreen}\n image={heroImage}\n >\n <Toolbar view={view} />\n <RenderView view={view} type={EXTERNAL_FILTERS} />\n <StyledVirtualizeContainer className='container'>\n <Virtualiser\n id='rootVirtualiser'\n rowContainerClass='grid-container'\n view={view}\n bufferMultiplier={0.8}\n >\n {rows?.length\n ? rows.map(row =>\n selectionMode === SELECTION_MODES.multi && selectionColumn ? (\n <GalleryCheckboxCard\n key={row.reactKey}\n meta={meta}\n row={row}\n visibleColumns={visibleColumns}\n headerColumn={headerColumn}\n selectionColumn={selectionColumn}\n />\n ) : (\n <GalleryCard\n key={row.reactKey}\n meta={meta}\n row={row}\n visibleColumns={visibleColumns}\n headerColumn={headerColumn}\n />\n )\n )\n : []}\n </Virtualiser>\n <LoadingIndicator view={view} show={!rows || !!view.isLoading} />\n </StyledVirtualizeContainer>\n </GalleryContainer>\n </RsCardWrapper>\n );\n}\n\nGallery.displayName = 'Gallery';\n\nexport default Gallery;\n"]}
|
|
@@ -1,13 +1,14 @@
|
|
|
1
1
|
import { type RsCoreTypes } from 'pega-repeating-structures-core';
|
|
2
|
-
import type { SelectionCardDisplayProps } from '@pega/cosmos-react-core';
|
|
2
|
+
import type { ImageSize, SelectionCardDisplayProps } from '@pega/cosmos-react-core';
|
|
3
3
|
import type { GalleryCardProps } from './Gallery.types';
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
export declare
|
|
4
|
+
export declare const GALLERY_IMAGE_PLACEMENT_MAP: {
|
|
5
|
+
readonly left: "inline-start";
|
|
6
|
+
readonly right: "inline-end";
|
|
7
|
+
readonly top: "block-start";
|
|
8
|
+
};
|
|
9
|
+
export declare const DEFAULT_IMAGE_PLACEMENT: RsCoreTypes.HeroImagePlacement;
|
|
10
|
+
export declare const DEFAULT_IMAGE_SIZE: ImageSize;
|
|
11
|
+
export declare const isInlinePlacement: (placement: RsCoreTypes.HeroImagePlacement) => placement is Extract<RsCoreTypes.HeroImagePlacement, "left" | "right">;
|
|
11
12
|
/**
|
|
12
13
|
* Generates the data required to display a card in the gallery view.
|
|
13
14
|
*
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../Core/Views/Gallery/utils.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAW,KAAK,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAC3E,OAAO,KAAK,
|
|
1
|
+
{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../Core/Views/Gallery/utils.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAW,KAAK,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAC3E,OAAO,KAAK,EAAkB,SAAS,EAAE,yBAAyB,EAAE,MAAM,yBAAyB,CAAC;AAEpG,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAIxD,eAAO,MAAM,2BAA2B;;;;CAImC,CAAC;AAG5E,eAAO,MAAM,uBAAuB,EAAE,WAAW,CAAC,kBAA2B,CAAC;AAC9E,eAAO,MAAM,kBAAkB,EAAE,SAAsB,CAAC;AAExD,eAAO,MAAM,iBAAiB,GAC5B,WAAW,WAAW,CAAC,kBAAkB,KACxC,SAAS,IAAI,OAAO,CAAC,WAAW,CAAC,kBAAkB,EAAE,MAAM,GAAG,OAAO,CAEvE,CAAC;AAuCF;;;;;;;;;;GAUG;AACH,wBAAgB,WAAW,CAAC,EAC1B,GAAG,EACH,cAAc,EACd,IAAI,EACJ,YAAY,EACb,EAAE,gBAAgB,GAAG,IAAI,CAAC,yBAAyB,EAAE,OAAO,GAAG,OAAO,GAAG,QAAQ,GAAG,YAAY,CAAC,CAqBjG;AAED;;;;;;GAMG;AACH,wBAAgB,cAAc,CAAC,EAAE,GAAG,EAAE,EAAE;IAAE,GAAG,EAAE,WAAW,CAAC,GAAG,CAAA;CAAE;;;EAM/D"}
|
|
@@ -2,14 +2,17 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
2
2
|
import { isEmpty } from 'pega-repeating-structures-core';
|
|
3
3
|
import GalleryFieldValue from './Components/GalleryFieldValue';
|
|
4
4
|
import GalleryHeader from './Components/GalleryHeader';
|
|
5
|
-
const GALLERY_IMAGE_PLACEMENT_MAP = {
|
|
5
|
+
export const GALLERY_IMAGE_PLACEMENT_MAP = {
|
|
6
6
|
left: 'inline-start',
|
|
7
7
|
right: 'inline-end',
|
|
8
8
|
top: 'block-start'
|
|
9
9
|
};
|
|
10
10
|
const INLINE_PLACEMENTS = ['left', 'right'];
|
|
11
|
-
const DEFAULT_IMAGE_PLACEMENT = 'left';
|
|
12
|
-
const DEFAULT_IMAGE_SIZE = 'flexible';
|
|
11
|
+
export const DEFAULT_IMAGE_PLACEMENT = 'left';
|
|
12
|
+
export const DEFAULT_IMAGE_SIZE = 'flexible';
|
|
13
|
+
export const isInlinePlacement = (placement) => {
|
|
14
|
+
return INLINE_PLACEMENTS.includes(placement);
|
|
15
|
+
};
|
|
13
16
|
/**
|
|
14
17
|
* Extracts image data from the provided metadata and row context.
|
|
15
18
|
*
|
|
@@ -36,18 +39,6 @@ function getImageData(meta, row) {
|
|
|
36
39
|
const imageSize = size || DEFAULT_IMAGE_SIZE;
|
|
37
40
|
return { src: imageUrl, alt: altTextValue, placement: imagePlacement, size: imageSize };
|
|
38
41
|
}
|
|
39
|
-
/**
|
|
40
|
-
* Determines if the provided hero image should be displayed inline based on its placement.
|
|
41
|
-
*
|
|
42
|
-
* @param heroImage - The hero image object.
|
|
43
|
-
* @returns `true` if the image's placement is considered inline; otherwise, `false`.
|
|
44
|
-
*/
|
|
45
|
-
export function isInlineImage(heroImage) {
|
|
46
|
-
if (!heroImage?.source)
|
|
47
|
-
return false;
|
|
48
|
-
const placement = heroImage.placement ?? DEFAULT_IMAGE_PLACEMENT;
|
|
49
|
-
return INLINE_PLACEMENTS.includes(placement);
|
|
50
|
-
}
|
|
51
42
|
/**
|
|
52
43
|
* Generates the data required to display a card in the gallery view.
|
|
53
44
|
*
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../../Core/Views/Gallery/utils.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAoB,MAAM,gCAAgC,CAAC;AAI3E,OAAO,iBAAiB,MAAM,gCAAgC,CAAC;AAC/D,OAAO,aAAa,MAAM,4BAA4B,CAAC;AAEvD,MAAM,2BAA2B,
|
|
1
|
+
{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../../Core/Views/Gallery/utils.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAoB,MAAM,gCAAgC,CAAC;AAI3E,OAAO,iBAAiB,MAAM,gCAAgC,CAAC;AAC/D,OAAO,aAAa,MAAM,4BAA4B,CAAC;AAEvD,MAAM,CAAC,MAAM,2BAA2B,GAAG;IACzC,IAAI,EAAE,cAAc;IACpB,KAAK,EAAE,YAAY;IACnB,GAAG,EAAE,aAAa;CACuD,CAAC;AAE5E,MAAM,iBAAiB,GAAqC,CAAC,MAAM,EAAE,OAAO,CAAU,CAAC;AACvF,MAAM,CAAC,MAAM,uBAAuB,GAAmC,MAAM,CAAC;AAC9E,MAAM,CAAC,MAAM,kBAAkB,GAAc,UAAU,CAAC;AAExD,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAC/B,SAAyC,EAC+B,EAAE;IAC1E,OAAO,iBAAiB,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC;AAC/C,CAAC,CAAC;AAEF;;;;;;;;;;GAUG;AACH,SAAS,YAAY,CACnB,IAAsB,EACtB,GAAoB;IAOpB,MAAM,EAAE,aAAa,EAAE,EAAE,SAAS,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,GAAG,EAAE,EAAE,GAAG,EAAE,EAAE,GAAG,IAAI,CAAC;IAC9F,MAAM,OAAO,GAAG,GAAG,CAAC,UAAU,EAAE,CAAC,QAAQ,EAAE,CAAC;IAE5C,IAAI,YAAY,GAAG,EAAE,CAAC;IACtB,IAAI,OAAO,IAAI,OAAO,IAAI,OAAO,EAAE,CAAC;QAClC,YAAY,GAAG,OAAO,CAAC,KAAK,IAAI,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IAChF,CAAC;SAAM,IAAI,OAAO,IAAI,OAAO,IAAI,OAAO,EAAE,CAAC;QACzC,YAAY,GAAG,OAAO,CAAC,KAAK,CAAC;IAC/B,CAAC;IAED,MAAM,QAAQ,GAAG,MAAM,EAAE,KAAK,IAAI,MAAM,EAAE,KAAK,IAAI,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IAChG,MAAM,cAAc,GAAG,2BAA2B,CAAC,SAAS,IAAI,uBAAuB,CAAC,CAAC;IACzF,MAAM,SAAS,GAAG,IAAI,IAAI,kBAAkB,CAAC;IAE7C,OAAO,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,EAAE,YAAY,EAAE,SAAS,EAAE,cAAc,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;AAC1F,CAAC;AAED;;;;;;;;;;GAUG;AACH,MAAM,UAAU,WAAW,CAAC,EAC1B,GAAG,EACH,cAAc,EACd,IAAI,EACJ,YAAY,EACK;IACjB,MAAM,EAAE,aAAa,EAAE,EAAE,SAAS,EAAE,eAAe,GAAG,IAAI,EAAE,GAAG,EAAE,EAAE,GAAG,IAAI,CAAC;IAE3E,+EAA+E;IAC/E,cAAc,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,mBAAmB,CAAC,GAAG,CAAC,CAAC,CAAC;IAE5D,MAAM,MAAM,GAAG,cAAc,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;QACxC,EAAE,EAAE,GAAG,CAAC,KAAK,CAAC,EAAE;QAChB,KAAK,EAAE,KAAC,iBAAiB,IAAC,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,GAAI;QACnD,GAAG,CAAC,eAAe,IAAI,EAAE,IAAI,EAAE,GAAG,CAAC,UAAU,EAAE,EAAE,QAAQ,EAAE,EAAE,CAAC;QAC9D,GAAG,CAAC,GAAG,CAAC,KAAK,CAAC,UAAU,IAAI,EAAE,OAAO,EAAE,GAAG,CAAC,KAAK,CAAC,UAAU,EAAE,CAAC;KAC/D,CAAC,CAAC,CAAC;IAEJ,MAAM,KAAK,GAAG,SAAS,CAAC,CAAC,CAAC,YAAY,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;IAE9D,MAAM,KAAK,GAAG,KAAC,aAAa,IAAC,YAAY,EAAE,YAAY,EAAE,GAAG,EAAE,GAAG,GAAI,CAAC;IAEtE,MAAM,WAAW,GAAG,GAAG,CAAC,UAAU,EAAE,EAAE,YAAY,EAAE,EAAE,QAAQ,EAAE,CAAC;IACjE,MAAM,SAAS,GAAG,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;IAE1E,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,CAAC;AAC3D,CAAC;AAED;;;;;;GAMG;AACH,MAAM,UAAU,cAAc,CAAC,EAAE,GAAG,EAA4B;IAC9D,MAAM,OAAO,GAAG,GAAG,CAAC,UAAU,EAAE,CAAC;IACjC,OAAO;QACL,eAAe,EAAE,OAAO,CAAC,eAAe,CAAC;QACzC,UAAU,EAAE,OAAO,CAAC,UAAU,CAAC;KAChC,CAAC;AACJ,CAAC","sourcesContent":["import { isEmpty, type RsCoreTypes } from 'pega-repeating-structures-core';\nimport type { ImagePlacement, ImageSize, SelectionCardDisplayProps } from '@pega/cosmos-react-core';\n\nimport type { GalleryCardProps } from './Gallery.types';\nimport GalleryFieldValue from './Components/GalleryFieldValue';\nimport GalleryHeader from './Components/GalleryHeader';\n\nexport const GALLERY_IMAGE_PLACEMENT_MAP = {\n left: 'inline-start',\n right: 'inline-end',\n top: 'block-start'\n} as const satisfies Record<RsCoreTypes.HeroImagePlacement, ImagePlacement>;\n\nconst INLINE_PLACEMENTS: RsCoreTypes.HeroImagePlacement[] = ['left', 'right'] as const;\nexport const DEFAULT_IMAGE_PLACEMENT: RsCoreTypes.HeroImagePlacement = 'left';\nexport const DEFAULT_IMAGE_SIZE: ImageSize = 'flexible';\n\nexport const isInlinePlacement = (\n placement: RsCoreTypes.HeroImagePlacement\n): placement is Extract<RsCoreTypes.HeroImagePlacement, 'left' | 'right'> => {\n return INLINE_PLACEMENTS.includes(placement);\n};\n\n/**\n * Extracts image data from the provided metadata and row context.\n *\n * @param meta - The metadata object containing gallery configuration.\n * @param row - The row object providing context and data values.\n * @returns An object containing:\n * - `src`: The image source URL.\n * - `alt`: The alternative text for the image.\n * - `placement`: The placement of the image within the gallery.\n * - `size`: The size of the image.\n */\nfunction getImageData(\n meta: RsCoreTypes.Meta,\n row: RsCoreTypes.Row\n): {\n src: string;\n alt: string;\n placement: ImagePlacement;\n size: ImageSize;\n} {\n const { galleryConfig: { heroImage: { source, altText, placement, size } = {} } = {} } = meta;\n const rowData = row.getContext().getValue();\n\n let altTextValue = '';\n if (altText && 'field' in altText) {\n altTextValue = altText.field in rowData ? String(rowData[altText.field]) : '';\n } else if (altText && 'value' in altText) {\n altTextValue = altText.value;\n }\n\n const imageUrl = source?.field && source?.field in rowData ? String(rowData[source.field]) : '';\n const imagePlacement = GALLERY_IMAGE_PLACEMENT_MAP[placement ?? DEFAULT_IMAGE_PLACEMENT];\n const imageSize = size || DEFAULT_IMAGE_SIZE;\n\n return { src: imageUrl, alt: altTextValue, placement: imagePlacement, size: imageSize };\n}\n\n/**\n * Generates the data required to display a card in the gallery view.\n *\n * @param props - The properties required to generate the card data.\n * @param props.row - The data for the current row.\n * @param props.visibleColumns - The columns that are visible in the gallery.\n * @param props.meta - Metadata including gallery configuration.\n * @param props.headerColumn - The column used for the card header.\n * @param props.actionColumn - The column used for card actions.\n * @returns An object containing the card's label, image, and fields to be displayed.\n */\nexport function getCardData({\n row,\n visibleColumns,\n meta,\n headerColumn\n}: GalleryCardProps): Pick<SelectionCardDisplayProps, 'label' | 'image' | 'fields' | 'aria-label'> {\n const { galleryConfig: { heroImage, showFieldLabels = true } = {} } = meta;\n\n // Must set execution context for each column to ensure correct value retrieval\n visibleColumns.forEach(col => col.setExecutionContext(row));\n\n const fields = visibleColumns.map(col => ({\n id: col.field.id,\n value: <GalleryFieldValue column={col} row={row} />,\n ...(showFieldLabels && { name: col.getContext()?.getLabel() }),\n ...(col.field.layoutMode && { variant: col.field.layoutMode })\n }));\n\n const image = heroImage ? getImageData(meta, row) : undefined;\n\n const label = <GalleryHeader headerColumn={headerColumn} row={row} />;\n\n const headerValue = row.getContext()?.getRowHeader()?.getValue();\n const ariaLabel = !isEmpty(headerValue) ? String(headerValue) : undefined;\n\n return { fields, image, label, 'aria-label': ariaLabel };\n}\n\n/**\n * Extracts UI-related props from a row for card components.\n *\n * @param props - The properties containing the row.\n * @param props.row - The data row.\n * @returns An object containing aria-rowindex and data-key for the card.\n */\nexport function getCardUIProps({ row }: { row: RsCoreTypes.Row }) {\n const uiProps = row.getUIProps();\n return {\n 'aria-rowindex': uiProps['aria-rowindex'],\n 'data-key': uiProps['data-key']\n };\n}\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pega/lists-react",
|
|
3
|
-
"version": "9.0.0-build.20.
|
|
3
|
+
"version": "9.0.0-build.20.15",
|
|
4
4
|
"description": "Repeating view structures such as Table, Gallery(Repeating layouts), Kanban etc.",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE",
|
|
6
6
|
"author": "Pegasystems",
|
|
@@ -14,9 +14,9 @@
|
|
|
14
14
|
"build": "tsc -b tsconfig.build.json"
|
|
15
15
|
},
|
|
16
16
|
"dependencies": {
|
|
17
|
-
"@pega/cosmos-react-condition-builder": "9.0.0-build.20.
|
|
18
|
-
"@pega/cosmos-react-core": "9.0.0-build.20.
|
|
19
|
-
"@pega/cosmos-react-rte": "9.0.0-build.20.
|
|
17
|
+
"@pega/cosmos-react-condition-builder": "9.0.0-build.20.15",
|
|
18
|
+
"@pega/cosmos-react-core": "9.0.0-build.20.15",
|
|
19
|
+
"@pega/cosmos-react-rte": "9.0.0-build.20.15",
|
|
20
20
|
"@types/lodash-es": "^4.17.12",
|
|
21
21
|
"@types/react": "^17.0.62 || ^18.3.3",
|
|
22
22
|
"@types/react-dom": "^17.0.20 || ^18.3.0",
|
|
@@ -24,8 +24,8 @@
|
|
|
24
24
|
"dayjs": "^1.11.13",
|
|
25
25
|
"fast-deep-equal": "^3.1.3",
|
|
26
26
|
"lodash-es": "^4.17.23",
|
|
27
|
-
"pega-repeating-structures-core": "npm:@pega/lists-core@9.0.0-build.20.
|
|
28
|
-
"pega-ui-list-data-apis": "npm:@pega/lists-core-utils@9.0.0-build.20.
|
|
27
|
+
"pega-repeating-structures-core": "npm:@pega/lists-core@9.0.0-build.20.15",
|
|
28
|
+
"pega-ui-list-data-apis": "npm:@pega/lists-core-utils@9.0.0-build.20.15",
|
|
29
29
|
"polished": "^4.1.0",
|
|
30
30
|
"prop-types": "^15.8.1",
|
|
31
31
|
"react": "^17.0.0 || ^18.0.0",
|
|
@@ -44,7 +44,7 @@
|
|
|
44
44
|
"@testing-library/react": "^16.0.0",
|
|
45
45
|
"@testing-library/user-event": "^14.6.1",
|
|
46
46
|
"jest-axe": "^8.0.0",
|
|
47
|
-
"srs-utils": "9.0.0-build.20.
|
|
47
|
+
"srs-utils": "9.0.0-build.20.15",
|
|
48
48
|
"typescript": "~5.9.3"
|
|
49
49
|
}
|
|
50
50
|
}
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
import { type ReactNode } from 'react';
|
|
2
|
-
import type { RsCoreTypes } from 'pega-repeating-structures-core';
|
|
3
|
-
interface StyledGalleryContainerProps {
|
|
4
|
-
children?: ReactNode;
|
|
5
|
-
view: RsCoreTypes.View;
|
|
6
|
-
isFullscreen: boolean;
|
|
7
|
-
isInlineImage: boolean;
|
|
8
|
-
className?: string;
|
|
9
|
-
}
|
|
10
|
-
declare const StyledGalleryContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<StyledGalleryContainerProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
|
|
11
|
-
ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
|
|
12
|
-
}, Pick<StyledGalleryContainerProps, "view" | "isFullscreen">>> & string & Omit<import("react").ForwardRefExoticComponent<StyledGalleryContainerProps & import("react").RefAttributes<HTMLDivElement>>, keyof import("react").Component<any, {}, any>>;
|
|
13
|
-
export default StyledGalleryContainer;
|
|
14
|
-
declare const StyledVirtualizeContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
|
|
15
|
-
export { StyledVirtualizeContainer };
|
|
16
|
-
//# sourceMappingURL=StyledGalleryContainer.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"StyledGalleryContainer.d.ts","sourceRoot":"","sources":["../../../../Core/Views/Gallery/StyledGalleryContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAQnD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAIlE,UAAU,2BAA2B;IACnC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,IAAI,EAAE,WAAW,CAAC,IAAI,CAAC;IACvB,YAAY,EAAE,OAAO,CAAC;IACtB,aAAa,EAAE,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,sBAAsB;;sPAyC1B,CAAC;AAGH,eAAe,sBAAsB,CAAC;AAEtC,QAAA,MAAM,yBAAyB,6NAG9B,CAAC;AAGF,OAAO,EAAE,yBAAyB,EAAE,CAAC"}
|
|
@@ -1,48 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { forwardRef } from 'react';
|
|
3
|
-
import styled, { css } from 'styled-components';
|
|
4
|
-
import { defaultThemeProp } from '@pega/cosmos-react-core';
|
|
5
|
-
import { StyledSelectionCard, StyledHeader } from '@pega/cosmos-react-core/lib/components/SelectionCard/SelectionCard.styles';
|
|
6
|
-
import { generateRSDataContainerHeightStyles, generateRSHeightStyles } from '../../Utils/styles';
|
|
7
|
-
const StyledGalleryContainer = styled(forwardRef((props, ref) => (_jsx("div", { ref: ref, ...props }))))(({ theme, isInlineImage, view, isFullscreen }) => {
|
|
8
|
-
return css `
|
|
9
|
-
${generateRSHeightStyles({ view, isFullscreen })}
|
|
10
|
-
|
|
11
|
-
.grid-container {
|
|
12
|
-
position: absolute;
|
|
13
|
-
display: grid;
|
|
14
|
-
grid-gap: 1rem;
|
|
15
|
-
grid-template-columns: repeat(
|
|
16
|
-
auto-fit,
|
|
17
|
-
minmax(
|
|
18
|
-
min(
|
|
19
|
-
${isInlineImage
|
|
20
|
-
? theme?.base?.['content-width']?.md
|
|
21
|
-
: theme?.base?.['content-width']?.sm},
|
|
22
|
-
100%
|
|
23
|
-
),
|
|
24
|
-
1fr
|
|
25
|
-
)
|
|
26
|
-
);
|
|
27
|
-
width: 100%;
|
|
28
|
-
padding: 0.2rem;
|
|
29
|
-
|
|
30
|
-
${StyledSelectionCard} {
|
|
31
|
-
max-width: 100%;
|
|
32
|
-
|
|
33
|
-
${StyledHeader} {
|
|
34
|
-
min-height: auto;
|
|
35
|
-
}
|
|
36
|
-
}
|
|
37
|
-
}
|
|
38
|
-
`;
|
|
39
|
-
});
|
|
40
|
-
StyledGalleryContainer.defaultProps = defaultThemeProp;
|
|
41
|
-
export default StyledGalleryContainer;
|
|
42
|
-
const StyledVirtualizeContainer = styled.div `
|
|
43
|
-
${generateRSDataContainerHeightStyles};
|
|
44
|
-
position: relative;
|
|
45
|
-
`;
|
|
46
|
-
StyledVirtualizeContainer.defaultProps = defaultThemeProp;
|
|
47
|
-
export { StyledVirtualizeContainer };
|
|
48
|
-
//# sourceMappingURL=StyledGalleryContainer.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"StyledGalleryContainer.js","sourceRoot":"","sources":["../../../../Core/Views/Gallery/StyledGalleryContainer.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAkB,MAAM,OAAO,CAAC;AACnD,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAC3D,OAAO,EACL,mBAAmB,EACnB,YAAY,EACb,MAAM,2EAA2E,CAAC;AAGnF,OAAO,EAAE,mCAAmC,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAUjG,MAAM,sBAAsB,GAAG,MAAM,CACnC,UAAU,CAA8C,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE,CAAC,CACtE,cAAK,GAAG,EAAE,GAAG,KAAM,KAAK,GAAI,CAC7B,CAAC,CACH,CAA6D,CAAC,EAC7D,KAAK,EACL,aAAa,EACb,IAAI,EACJ,YAAY,EACb,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;MACN,sBAAsB,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,CAAC;;;;;;;;;;cAUtC,aAAa;QACb,CAAC,CAAC,KAAK,EAAE,IAAI,EAAE,CAAC,eAAe,CAAC,EAAE,EAAE;QACpC,CAAC,CAAC,KAAK,EAAE,IAAI,EAAE,CAAC,eAAe,CAAC,EAAE,EAAE;;;;;;;;;QAS1C,mBAAmB;;;UAGjB,YAAY;;;;;GAKnB,CAAC;AACJ,CAAC,CAAC,CAAC;AACH,sBAAsB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEvD,eAAe,sBAAsB,CAAC;AAEtC,MAAM,yBAAyB,GAAG,MAAM,CAAC,GAAG,CAAA;IACxC,mCAAmC;;CAEtC,CAAC;AAEF,yBAAyB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAC1D,OAAO,EAAE,yBAAyB,EAAE,CAAC","sourcesContent":["import { forwardRef, type ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '@pega/cosmos-react-core';\nimport {\n StyledSelectionCard,\n StyledHeader\n} from '@pega/cosmos-react-core/lib/components/SelectionCard/SelectionCard.styles';\nimport type { RsCoreTypes } from 'pega-repeating-structures-core';\n\nimport { generateRSDataContainerHeightStyles, generateRSHeightStyles } from '../../Utils/styles';\n\ninterface StyledGalleryContainerProps {\n children?: ReactNode;\n view: RsCoreTypes.View;\n isFullscreen: boolean;\n isInlineImage: boolean;\n className?: string;\n}\n\nconst StyledGalleryContainer = styled(\n forwardRef<HTMLDivElement, StyledGalleryContainerProps>((props, ref) => (\n <div ref={ref} {...props} />\n ))\n)<Pick<StyledGalleryContainerProps, 'view' | 'isFullscreen'>>(({\n theme,\n isInlineImage,\n view,\n isFullscreen\n}) => {\n return css`\n ${generateRSHeightStyles({ view, isFullscreen })}\n\n .grid-container {\n position: absolute;\n display: grid;\n grid-gap: 1rem;\n grid-template-columns: repeat(\n auto-fit,\n minmax(\n min(\n ${isInlineImage\n ? theme?.base?.['content-width']?.md\n : theme?.base?.['content-width']?.sm},\n 100%\n ),\n 1fr\n )\n );\n width: 100%;\n padding: 0.2rem;\n\n ${StyledSelectionCard} {\n max-width: 100%;\n\n ${StyledHeader} {\n min-height: auto;\n }\n }\n }\n `;\n});\nStyledGalleryContainer.defaultProps = defaultThemeProp;\n\nexport default StyledGalleryContainer;\n\nconst StyledVirtualizeContainer = styled.div`\n ${generateRSDataContainerHeightStyles};\n position: relative;\n`;\n\nStyledVirtualizeContainer.defaultProps = defaultThemeProp;\nexport { StyledVirtualizeContainer };\n"]}
|