Skip to content

Commit 9fbd9ad

Browse files
author
manasa
committed
Merge branch 'master' of https://github.com/pegasystems/react-sdk-components into mod/tor/themeColor
2 parents 17cc77e + 6e55ebf commit 9fbd9ad

File tree

6 files changed

+169
-171
lines changed

6 files changed

+169
-171
lines changed

‎packages/react-sdk-components/src/components/designSystemExtension/Banner/Banner.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,10 @@ export default function Banner(props: BannerProps) {
3838
</div>
3939
</div>
4040
<Grid2 container size={12} className='banner-layout' spacing={1}>
41-
<Grid2 size={{ xs: variantMap[variant][0] }} style={{ padding: '1em' }}>
41+
<Grid2
42+
size={{ xs: variantMap[variant][0] }}
43+
style={{ padding: '1em', backgroundColor: 'var(--app-form-bg-color)', borderRadius: '16px', height: 'fit-content' }}
44+
>
4245
{a}
4346
</Grid2>
4447
<Grid2 size={{ xs: variantMap[variant][1] }} style={{ padding: '1em' }}>

‎packages/react-sdk-components/src/components/infra/View/View.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,8 @@ const NO_HEADER_TEMPLATES = [
3838
'WideNarrowDetails',
3939
'Confirmation',
4040
'DynamicTabs',
41-
'DetailsSubTabs'
41+
'DetailsSubTabs',
42+
'ListView'
4243
];
4344

4445
export default function View(props: PropsWithChildren<ViewProps>) {

‎packages/react-sdk-components/src/components/template/AppShell/AppShell.tsx‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,7 @@ export default function AppShell(props: PropsWithChildren<AppShellProps>) {
8181
const classes = useStyles();
8282
const actionsAPI = pConn.getActionsApi();
8383
const localeReference = pConn.getValue('.pyLocaleReference', ''); // 2nd arg empty string until typedef marked correctly
84-
const [imageBlobUrl, setImageBlobUrl] = useState<string | null>(null);
84+
const [imageBlobUrl, setImageBlobUrl] = useState<string | Blob | null>(null);
8585
// useState for appName and mapChildren - note these are ONLY updated once (on component mount!)
8686
// eslint-disable-next-line @typescript-eslint/no-unused-vars
8787
const [appName, setAppName] = useState('');
@@ -133,8 +133,8 @@ export default function AppShell(props: PropsWithChildren<AppShellProps>) {
133133
}
134134
}, []);
135135

136-
const [iconURL, setIconURL] = useState('');
137-
const [fullIconURL, setFullIconURL] = useState('');
136+
const [iconURL, setIconURL] = useState<string | Blob>('');
137+
const [fullIconURL, setFullIconURL] = useState<string | Blob>('');
138138
useEffect(() => {
139139
// using the default icon then fetch it from the static folder (not auth involved)
140140
if (
@@ -150,8 +150,7 @@ export default function AppShell(props: PropsWithChildren<AppShellProps>) {
150150
// not using default icon to fetch it using the way which uses authentication
151151
else {
152152
PCore.getAssetLoader()
153-
.getSvcImage(portalLogo)
154-
.then(blob => window.URL.createObjectURL(blob))
153+
.getSvcImageUrl(portalLogo)
155154
.then(data => {
156155
setIconURL(data);
157156
setFullIconURL(data);
@@ -165,8 +164,7 @@ export default function AppShell(props: PropsWithChildren<AppShellProps>) {
165164
useEffect(() => {
166165
if (imageKey && portalTemplate === 'wss') {
167166
PCore.getAssetLoader()
168-
.getSvcImage(imageKey)
169-
.then(blob => window.URL.createObjectURL(blob))
167+
.getSvcImageUrl(imageKey)
170168
.then(imagePath => setImageBlobUrl(imagePath));
171169
}
172170
}, []);

‎packages/react-sdk-components/src/components/template/ListView/ListView.tsx‎

Lines changed: 152 additions & 157 deletions
Original file line numberDiff line numberDiff line change
@@ -157,10 +157,9 @@ export default function ListView(props: ListViewProps) {
157157
width: '100%',
158158
marginTop: theme.spacing(2),
159159
marginBottom: theme.spacing(2),
160-
display: 'grid'
161-
},
162-
search: {
163-
padding: '5px 5px'
160+
display: 'grid',
161+
borderRadius: 16,
162+
padding: 20
164163
},
165164
table: {
166165
minWidth: 750
@@ -189,10 +188,6 @@ export default function ListView(props: ListViewProps) {
189188
position: 'absolute',
190189
top: 20,
191190
width: 1
192-
},
193-
title: {
194-
marginTop: theme.spacing(1),
195-
marginLeft: theme.spacing(1)
196191
}
197192
})
198193
);
@@ -1065,162 +1060,162 @@ export default function ListView(props: ListViewProps) {
10651060
<>
10661061
{arColumns && arColumns.length > 0 && (
10671062
<Paper className={classes.paper}>
1068-
<Typography className={classes.title} variant='h6' color='textPrimary' gutterBottom>
1069-
{_listTitle()}
1070-
</Typography>
1071-
{globalSearch && (
1072-
<Grid2 container spacing={1} alignItems='flex-end' className={classes.search}>
1073-
<Grid2>
1074-
<SearchIcon />
1075-
</Grid2>
1076-
<Grid2>
1077-
<TextField
1078-
label={PCore.getLocaleUtils().getLocaleValue('Search', 'Search')}
1079-
fullWidth
1080-
variant='outlined'
1081-
placeholder=''
1082-
size='small'
1083-
id='search'
1084-
onChange={_onSearch}
1085-
/>
1063+
<Grid2 container justifyContent='space-between'>
1064+
<Typography variant='h6' color='textPrimary' gutterBottom>
1065+
{_listTitle()}
1066+
</Typography>
1067+
{globalSearch && (
1068+
<Grid2 container spacing={1} alignItems='flex-end'>
1069+
<Grid2>
1070+
<SearchIcon />
1071+
</Grid2>
1072+
<Grid2>
1073+
<TextField
1074+
label={PCore.getLocaleUtils().getLocaleValue('Search', 'Search')}
1075+
fullWidth
1076+
variant='outlined'
1077+
placeholder=''
1078+
size='small'
1079+
id='search'
1080+
onChange={_onSearch}
1081+
/>
1082+
</Grid2>
10861083
</Grid2>
1087-
</Grid2>
1088-
)}
1089-
<>
1090-
{!bInForm ? (
1091-
<TableContainer id='list-view' className={classes.tableInForm}>
1092-
<Table stickyHeader aria-label='sticky table'>
1093-
<TableHead>
1094-
<TableRow>
1095-
{arColumns.map(column => {
1084+
)}
1085+
</Grid2>
1086+
{!bInForm ? (
1087+
<TableContainer id='list-view' className={classes.tableInForm}>
1088+
<Table stickyHeader aria-label='sticky table'>
1089+
<TableHead>
1090+
<TableRow>
1091+
{arColumns.map(column => {
1092+
return (
1093+
<TableCell className={classes.cell} key={column.id} sortDirection={orderBy === column.id ? order : false}>
1094+
<TableSortLabel
1095+
active={orderBy === column.id}
1096+
direction={orderBy === column.id ? order : 'asc'}
1097+
onClick={createSortHandler(column.id)}
1098+
>
1099+
{column.label}
1100+
{_showFilteredIcon(column.id) && <FilterListIcon className={classes.filteredIcon} />}
1101+
{orderBy === column.id ? (
1102+
<span className={classes.visuallyHidden}>{order === 'desc' ? 'sorted descending' : 'sorted ascending'}</span>
1103+
) : null}
1104+
</TableSortLabel>
1105+
<MoreIcon
1106+
className={classes.moreIcon}
1107+
onClick={event => {
1108+
_menuClick(event, column.id, column.type, column.label);
1109+
}}
1110+
/>
1111+
</TableCell>
1112+
);
1113+
})}
1114+
</TableRow>
1115+
</TableHead>
1116+
<TableBody>
1117+
{arRows &&
1118+
stableSort(arRows, getComparator(order, orderBy))
1119+
.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
1120+
.map(row => {
10961121
return (
1097-
<TableCell className={classes.cell} key={column.id} sortDirection={orderBy === column.id ? order : false}>
1098-
<TableSortLabel
1099-
active={orderBy === column.id}
1100-
direction={orderBy === column.id ? order : 'asc'}
1101-
onClick={createSortHandler(column.id)}
1102-
>
1103-
{column.label}
1104-
{_showFilteredIcon(column.id) && <FilterListIcon className={classes.filteredIcon} />}
1105-
{orderBy === column.id ? (
1106-
<span className={classes.visuallyHidden}>{order === 'desc' ? 'sorted descending' : 'sorted ascending'}</span>
1107-
) : null}
1108-
</TableSortLabel>
1109-
<MoreIcon
1110-
className={classes.moreIcon}
1111-
onClick={event => {
1112-
_menuClick(event, column.id, column.type, column.label);
1113-
}}
1114-
/>
1115-
</TableCell>
1122+
<TableRow key={row.pxRefObjectInsName || row.pyID}>
1123+
{arColumns.map(column => {
1124+
const value = row[column.id];
1125+
return (
1126+
<TableCell key={column.id} align={column.align} className={classes.cell}>
1127+
{_showButton(column.id, row) || column.displayAsLink ? (
1128+
<Link
1129+
component='button'
1130+
onClick={() => {
1131+
_listViewClick(row, column);
1132+
}}
1133+
underline='hover'
1134+
>
1135+
{column.format && typeof value === 'number' ? column.format(value) : value}
1136+
</Link>
1137+
) : (
1138+
<>{column.format && typeof value === 'number' ? column.format(value) : value || '---'}</>
1139+
)}
1140+
</TableCell>
1141+
);
1142+
})}
1143+
</TableRow>
11161144
);
11171145
})}
1118-
</TableRow>
1119-
</TableHead>
1120-
<TableBody>
1121-
{arRows &&
1122-
stableSort(arRows, getComparator(order, orderBy))
1123-
.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
1124-
.map(row => {
1125-
return (
1126-
<TableRow key={row.pxRefObjectInsName || row.pyID}>
1127-
{arColumns.map(column => {
1128-
const value = row[column.id];
1129-
return (
1130-
<TableCell key={column.id} align={column.align} className={classes.cell}>
1131-
{_showButton(column.id, row) || column.displayAsLink ? (
1132-
<Link
1133-
component='button'
1134-
onClick={() => {
1135-
_listViewClick(row, column);
1136-
}}
1137-
underline='hover'
1138-
>
1139-
{column.format && typeof value === 'number' ? column.format(value) : value}
1140-
</Link>
1141-
) : (
1142-
<>{column.format && typeof value === 'number' ? column.format(value) : value || '---'}</>
1143-
)}
1144-
</TableCell>
1145-
);
1146-
})}
1147-
</TableRow>
1148-
);
1149-
})}
1150-
</TableBody>
1151-
</Table>
1152-
</TableContainer>
1153-
) : (
1154-
<TableContainer id='list-view'>
1155-
<Table>
1156-
<TableHead>
1157-
<TableRow>
1158-
{(selectionMode === SELECTION_MODE.SINGLE || selectionMode === SELECTION_MODE.MULTI) && <TableCell />}
1159-
{arColumns.map(column => {
1146+
</TableBody>
1147+
</Table>
1148+
</TableContainer>
1149+
) : (
1150+
<TableContainer id='list-view'>
1151+
<Table>
1152+
<TableHead>
1153+
<TableRow>
1154+
{(selectionMode === SELECTION_MODE.SINGLE || selectionMode === SELECTION_MODE.MULTI) && <TableCell />}
1155+
{arColumns.map(column => {
1156+
return (
1157+
<TableCell className={classes.cell} key={column.id} sortDirection={orderBy === column.id ? order : false}>
1158+
<TableSortLabel
1159+
active={orderBy === column.id}
1160+
direction={orderBy === column.id ? order : 'asc'}
1161+
onClick={createSortHandler(column.id)}
1162+
>
1163+
{column.label}
1164+
{orderBy === column.id ? (
1165+
<span className={classes.visuallyHidden}>{order === 'desc' ? 'sorted descending' : 'sorted ascending'}</span>
1166+
) : null}
1167+
</TableSortLabel>
1168+
</TableCell>
1169+
);
1170+
})}
1171+
</TableRow>
1172+
</TableHead>
1173+
<TableBody>
1174+
{arRows &&
1175+
arRows.length > 0 &&
1176+
stableSort(arRows, getComparator(order, orderBy))
1177+
.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
1178+
.map(row => {
11601179
return (
1161-
<TableCell className={classes.cell} key={column.id} sortDirection={orderBy === column.id ? order : false}>
1162-
<TableSortLabel
1163-
active={orderBy === column.id}
1164-
direction={orderBy === column.id ? order : 'asc'}
1165-
onClick={createSortHandler(column.id)}
1166-
>
1167-
{column.label}
1168-
{orderBy === column.id ? (
1169-
<span className={classes.visuallyHidden}>{order === 'desc' ? 'sorted descending' : 'sorted ascending'}</span>
1170-
) : null}
1171-
</TableSortLabel>
1172-
</TableCell>
1180+
<TableRow key={row[rowID]}>
1181+
{selectionMode === SELECTION_MODE.SINGLE && (
1182+
<TableCell>
1183+
<Radio
1184+
onChange={handleChange}
1185+
value={row[rowID]}
1186+
name='radio-buttons'
1187+
inputProps={{ 'aria-label': 'A' }}
1188+
checked={selectedValue === row[rowID]}
1189+
/>
1190+
</TableCell>
1191+
)}
1192+
{selectionMode === SELECTION_MODE.MULTI && (
1193+
<TableCell>
1194+
<Checkbox
1195+
onChange={onCheckboxClick}
1196+
checked={selectedValues.some(selectedValue => selectedValue[rowID] === row[rowID])}
1197+
value={row[rowID]}
1198+
/>
1199+
</TableCell>
1200+
)}
1201+
{arColumns.map(column => {
1202+
const value = row[column.id];
1203+
return (
1204+
<TableCell className={classes.cell} key={column.id} align={column.align}>
1205+
{processColumnValue(column, value)}
1206+
</TableCell>
1207+
);
1208+
})}
1209+
</TableRow>
11731210
);
11741211
})}
1175-
</TableRow>
1176-
</TableHead>
1177-
<TableBody>
1178-
{arRows &&
1179-
arRows.length > 0 &&
1180-
stableSort(arRows, getComparator(order, orderBy))
1181-
.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
1182-
.map(row => {
1183-
return (
1184-
<TableRow key={row[rowID]}>
1185-
{selectionMode === SELECTION_MODE.SINGLE && (
1186-
<TableCell>
1187-
<Radio
1188-
onChange={handleChange}
1189-
value={row[rowID]}
1190-
name='radio-buttons'
1191-
inputProps={{ 'aria-label': 'A' }}
1192-
checked={selectedValue === row[rowID]}
1193-
/>
1194-
</TableCell>
1195-
)}
1196-
{selectionMode === SELECTION_MODE.MULTI && (
1197-
<TableCell>
1198-
<Checkbox
1199-
onChange={onCheckboxClick}
1200-
checked={selectedValues.some(selectedValue => selectedValue[rowID] === row[rowID])}
1201-
value={row[rowID]}
1202-
/>
1203-
</TableCell>
1204-
)}
1205-
{arColumns.map(column => {
1206-
const value = row[column.id];
1207-
return (
1208-
<TableCell className={classes.cell} key={column.id} align={column.align}>
1209-
{processColumnValue(column, value)}
1210-
</TableCell>
1211-
);
1212-
})}
1213-
</TableRow>
1214-
);
1215-
})}
1216-
</TableBody>
1217-
</Table>
1218-
{(!arRows || arRows.length === 0) && (
1219-
<div className='no-records'>{getGenericFieldsLocalizedValue('CosmosFields.fields.lists', 'No records found.')}</div>
1220-
)}
1221-
</TableContainer>
1222-
)}
1223-
</>
1212+
</TableBody>
1213+
</Table>
1214+
{(!arRows || arRows.length === 0) && (
1215+
<div className='no-records'>{getGenericFieldsLocalizedValue('CosmosFields.fields.lists', 'No records found.')}</div>
1216+
)}
1217+
</TableContainer>
1218+
)}
12241219
{arRows && arRows.length > 0 && (
12251220
<TablePagination
12261221
id='pagination'

0 commit comments

Comments
 (0)