Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
children,
justifyContent,
direction,
alignItems,
height,
width,
displayInline,
wrap,
style,
className,
tooltip,
slot
} = props;
const classes = useStyles();
const flexBoxClasses = StyleClassHelper.of(classes.flexBox);
// direction
flexBoxClasses.put(classes[`flexBoxDirection${direction}`]);
// justify content
flexBoxClasses.put(classes[`justifyContent${justifyContent}`]);
// align items
flexBoxClasses.put(classes[`alignItems${alignItems}`]);
// wrapping
flexBoxClasses.put(classes[`flexWrap${wrap}`]);
if (displayInline) {
flexBoxClasses.put(classes.flexBoxDisplayInline);
}
if (className) {
flexBoxClasses.put(className);
}
// @ts-ignore
if (child.props.hasOwnProperty(changeEventName)) {
// @ts-ignore
child.props[changeEventName](event);
}
},
valueParameter: valueParamName,
style: { width: '100%' }
});
})}
);
}
}, [valueParamName, changeEventName, filterItems, loading, type, children]);
const filterItemClasses = StyleClassHelper.of(classes.filterItem);
return (
<div title="{tooltip}" style="{style}">
<div>
<label>{label}</label>
{filterComponent}
</div>
</div>
);
});
const indicatorIcon = useMemo(() => {
const arrowClasses = StyleClassHelper.of(classes.arrowIndicatorShape);
switch (arrowIndicator) {
case DeviationIndicator.Up:
arrowClasses.put(classes.arrowUp);
break;
case DeviationIndicator.Down:
arrowClasses.put(classes.arrowDown);
break;
default:
arrowClasses.put(classes.arrowRight);
break;
}
switch (indicatorState) {
case ValueState.Success:
arrowClasses.put(classes.good);
break;
(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);
}
);
}
return null;
}, [showBackButton]);
const renderTitle = useCallback(() => <title>{title}</title>, [title]);
const header = useMemo(() => {
if (renderCustomHeader) {
return renderCustomHeader();
}
return ;
}, [renderCustomHeader, renderTitle, renderBackButton]);
const pageContainer = StyleClassHelper.of(classes.pageContainer);
const headerClasses = StyleClassHelper.of(classes.pageHeader, classes.baseBar);
const footerClasses = StyleClassHelper.of(classes.pageFooter, classes.baseBar);
if (showHeader) {
pageContainer.put(classes.pageWithHeader);
}
if (showFooter) {
pageContainer.put(classes.pageWithFooter);
}
if (className) {
pageContainer.put(className);
}
pageContainer.put(classes[`background${backgroundDesign}`]);
const Spinner: FC = forwardRef((props: SpinnerProps, ref: RefObject) => {
const { className, size, tooltip, slot, style, delay } = props;
const classes = useStyles();
const [isVisible, setIsVisible] = useState(delay === 0);
const spinnerClasses = StyleClassHelper.of(classes.spinner);
if (className) {
spinnerClasses.put(className);
}
spinnerClasses.put(classes[`spinner${size}`]);
useEffect(() => {
if (delay > 0) {
setTimeout(() => {
setIsVisible(true);
}, delay);
}
}, []);
if (!isVisible) {
return null;
arrowClasses.put(classes.critical);
break;
default:
arrowClasses.put(classes.none);
break;
}
return <div>;
}, [arrowIndicator, indicatorState, classes]);
const headerClasses = StyleClassHelper.of(classes.cardHeader);
if (onHeaderPress) {
headerClasses.put(classes.cardHeaderClickable);
}
const valueAndUnitClasses = StyleClassHelper.of(classes.valueAndUnit);
if (valueState === ValueState.Error) {
valueAndUnitClasses.put(classes.error);
}
if (valueState === ValueState.Warning) {
valueAndUnitClasses.put(classes.critical);
}
if (valueState === ValueState.Success) {
valueAndUnitClasses.put(classes.good);
}
if (className) {
headerClasses.put(className);
}
const shouldRenderContent = [value, unit, deviation, target].some((v) => v !== null);
return (
<div style="{style}" title="{tooltip}"></div></div>
},
[mode]
);
useEffect(() => {
adjustDummyDivHeight();
requestAnimationFrame(() => {
const scrollbarWidth = getScrollBarWidth();
if (scrollbarWidth && scrollbarWidth !== 0 && scrollbarWidth !== defaultScrollbarWidth) {
setScrollbarWidth(scrollbarWidth);
}
});
setIsMounted(true);
}, []);
const objectPageClasses = StyleClassHelper.of(classes.objectPage);
if (className) {
objectPageClasses.put(className);
}
if (showTitleInHeaderContent) {
objectPageClasses.put(classes.titleInHeaderContent);
}
const headerClasses = StyleClassHelper.of(classes.header);
if (alwaysShowContentHeader || expandHeaderActive) {
headerClasses.put(classes.alwaysVisibleHeader);
}
const [scrollBarWidthStyle, scrollBarWidthMargin, scrollBarWidthPadding] = useMemo(() => {
return [
{ width: `${scrollbarWidth}px` },
const renderGridElements = (child: ReactElement) => {
const span = getSpanFromString(defaultSpan);
const indentSpan = getIndentFromString(defaultIndent);
const gridSpanClasses = StyleClassHelper.of(classes.gridSpan);
if (child.props['data-layout'] && child.props['data-layout'].span) {
const childSpan = getSpanFromString(child.props['data-layout'].span);
gridSpanClasses.put(classes[`gridSpan${childSpan}`]);
} else {
gridSpanClasses.put(classes[`gridSpan${span}`]);
}
if (child.props['data-layout'] && child.props['data-layout'].indent) {
const childIndent = getIndentFromString(child.props['data-layout'].indent);
if (childIndent && childIndent > 0) {
gridSpanClasses.put(classes[`gridIndent${childIndent}`]);
}
} else if (indentSpan && indentSpan > 0) {
gridSpanClasses.put(classes[`gridIndent${indentSpan}`]);
}
return <div>{child}</div>;
}, [showPageIndicator, arrowsPlacement]);
if (!shouldRenderPaginationBar) {
return (
<div>
<div data-value="paginationArrow">
</div>
<div data-value="paginationArrow">
</div>
</div>
);
}
const paginationClasses = StyleClassHelper.of(classes.pagination);
if (arrowsPlacement === CarouselArrowsPlacement.Content) {
paginationClasses.put(classes.paginationArrowContent);
}
if (pageIndicatorPlacement === PlacementType.Top) {
paginationClasses.put(classes.paginationTop);
}
if (pageIndicatorPlacement === PlacementType.Bottom) {
paginationClasses.put(classes.paginationBottom);
}
return (
<div>
<div data-value="paginationArrow">
</div>
</div>