Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
const style = ({ parameters, contentDensity }: JSSTheme) => ({
header: {
display: 'flex',
height: ContentDensity.Compact === contentDensity ? '2.5rem' : '3rem',
lineHeight: ContentDensity.Compact === contentDensity ? '2.5rem' : '3rem',
textAlign: 'center',
width: 'auto',
alignItems: 'center',
'& $icon': {
'& >*': {
verticalAlign: 'middle'
}
},
// justifyContent: 'center',
padding: '0.25rem 1rem',
boxSizing: 'border-box',
borderBottom: `1px solid var(--messageBoxBorderColor)`,
color: parameters.sapUiContentLabelColor,
fontSize: '1rem',
'&[data-type="Error"]': {
'--sapUiPageFooterBorderColor': parameters.sapUiErrorBorder,
wrapper: (getStory, context) => {
function setQueryParam(queryObj) {
const iframe = window.parent.document.getElementById('storybook-preview-iframe');
const [base, search] = iframe.src.split('?');
const currentQuery = qs.parse(search, { ignoreQueryPrefix: true });
iframe.src = `${base}?${qs.stringify({ ...currentQuery, ...queryObj })}`;
}
let contentDensity;
try {
const iframe = window.parent.document.getElementById('storybook-preview-iframe');
const currentQuery = qs.parse(iframe.src.split('?')[1]);
contentDensity =
currentQuery['sap-ui-compactSize'] && currentQuery['sap-ui-compactSize'] !== 'false'
? ContentDensity.Compact
: ContentDensity.Cozy;
} catch (e) {
contentDensity = ContentDensity.Cozy;
}
return (
{getStory(context)}
);
}
});
const internalRowHeight = useMemo(() => {
let height = theme.contentDensity === ContentDensity.Compact ? ROW_HEIGHT_COMPACT : ROW_HEIGHT_COZY;
if (rowHeight) {
height = rowHeight;
}
return height;
}, [rowHeight, theme.contentDensity]);
(props: SideNavigationListItemProps, ref: Ref) => {
const { icon, text, id, children, tooltip, slot, className, style } = props;
const [isExpanded, setExpanded] = useState(false);
const handleToggleExpand = useCallback(() => {
setExpanded(!isExpanded);
}, [isExpanded, setExpanded]);
const classes = useStyles();
const theme = useTheme() as JSSTheme;
const listItemClasses = StyleClassHelper.of(classes.listItem);
if (theme.contentDensity === ContentDensity.Compact) {
listItemClasses.put(classes.compact);
}
if (className) {
listItemClasses.put(className);
}
if (isExpanded) {
listItemClasses.put(classes.expanded);
}
const noIcons = props['noIcons'];
if (noIcons) {
listItemClasses.put(classes.noIcons);
}
const styles = ({ contentDensity }) => ({
segmentedButton: {
verticalAlign: 'top',
position: 'relative',
margin: '0',
padding: contentDensity === ContentDensity.Compact ? '0.1875rem 0' : '0.250rem 0',
border: 'none',
whiteSpace: 'nowrap',
display: 'inline-block',
boxSizing: 'border-box',
maxWidth: '100%',
height: contentDensity === ContentDensity.Compact ? '2rem' : '3rem',
'&:focus': {
outline: 'none'
}
}
});
top: contentDensity === ContentDensity.Compact ? '2.5rem' : '2.75rem'
}
},
pageWithFooter: {
'& $contentSection': {
bottom: contentDensity === ContentDensity.Compact ? '2.5rem' : '2.75rem'
}
},
pageFooter: {
position: 'absolute',
bottom: '0',
left: '0',
width: '100%',
borderTop: `1px solid ${parameters.sapUiPageFooterBorderColor}`,
'& >*': {
height: contentDensity === ContentDensity.Compact ? '2.5rem' : '2.75rem',
background: parameters.sapUiPageFooterBackground,
borderTop: `0.0625rem solid ${parameters.sapUiPageFooterBorderColor}`
}
}
};
};
const styles = ({ contentDensity }) => ({
segmentedButton: {
verticalAlign: 'top',
position: 'relative',
margin: '0',
padding: contentDensity === ContentDensity.Compact ? '0.1875rem 0' : '0.250rem 0',
border: 'none',
whiteSpace: 'nowrap',
display: 'inline-block',
boxSizing: 'border-box',
maxWidth: '100%',
height: contentDensity === ContentDensity.Compact ? '2rem' : '3rem',
'&:focus': {
outline: 'none'
}
}
});
updateTableSizes();
Device.resize.attachHandler(updateTableSizes, null);
return () => Device.resize.detachHandler(updateTableSizes, null);
}, [updateTableSizes]);
useEffect(() => {
dispatch({ type: 'SET_GROUP_BY', payload: groupBy });
}, [groupBy, dispatch]);
useEffect(() => {
dispatch({ type: 'SET_SELECTED_ROWS', selectedIds: selectedRowIds });
}, [selectedRowIds, dispatch]);
const tableContainerClasses = StyleClassHelper.of(classes.tableContainer);
if (theme.contentDensity === ContentDensity.Compact) {
tableContainerClasses.put(classes.compactSize);
}
if (!!rowHeight) {
tableContainerClasses.put(classes.modifiedRowHeight);
}
const internalRowHeight = useMemo(() => {
let height = theme.contentDensity === ContentDensity.Compact ? ROW_HEIGHT_COMPACT : ROW_HEIGHT_COZY;
if (rowHeight) {
height = rowHeight;
}
return height;
}, [rowHeight, theme.contentDensity]);
const tableBodyHeight = useMemo(() => {
fontFamily: parameters.sapUiFontFamily,
listStyle: 'none',
overflow: 'hidden',
WebkitTapHighlightColor: 'rgba(255, 255, 255, 0)',
textAlign: 'center',
alignContent: 'center',
alignItems: 'center',
cursor: 'pointer',
verticalAlign: 'text-bottom',
boxSizing: 'border-box',
display: 'inline-block',
fontSize: '0.875rem',
'&:focus': {
outline: `1px dotted ${parameters.sapUiContentFocusColor}`
},
height: contentDensity === ContentDensity.Compact ? '1.625rem' : '2.25rem',
lineHeight: contentDensity === ContentDensity.Compact ? '1.5rem' : '2.25rem',
textShadow: 'none',
'&:not($iconOnly)': { paddingLeft: '0.625rem', paddingRight: '0.625rem', textOverflow: 'ellipsis' },
'&:first-child': {
borderTopLeftRadius: '0.25rem',
borderBottomLeftRadius: '0.25rem'
},
'&:last-child': {
borderTopRightRadius: '0.25rem',
borderBottomRightRadius: '0.25rem',
borderRightColor: parameters.sapUiSegmentedButtonBorderColor
},
color: parameters.sapUiSegmentedButtonTextColor,
border: `1px solid ${parameters.sapUiSegmentedButtonBorderColor}`,
borderRightColor: 'transparent',
backgroundColor: parameters.sapUiSegmentedButtonBackground