Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
import * as React from 'react';
import { Link } from 'office-ui-fabric-react/lib/Link';
import { DetailsList, IGroup, IGroupDividerProps } from 'office-ui-fabric-react/lib/DetailsList';
import { createListItems, createGroups, IExampleItem } from 'office-ui-fabric-react/lib/utilities/exampleData';
import { getTheme, mergeStyleSets } from 'office-ui-fabric-react/lib/Styling';
import { DEFAULT_ROW_HEIGHTS } from 'office-ui-fabric-react/lib/components/DetailsList/DetailsRow.styles';
const { rowHeight: ROW_HEIGHT } = DEFAULT_ROW_HEIGHTS;
const GROUP_HEADER_AND_FOOTER_SPACING: number = 8;
const GROUP_HEADER_AND_FOOTER_BORDER_WIDTH: number = 1;
const GROUP_HEADER_HEIGHT: number = 95;
const GROUP_FOOTER_HEIGHT: number = GROUP_HEADER_AND_FOOTER_SPACING * 4 + GROUP_HEADER_AND_FOOTER_BORDER_WIDTH * 2;
const theme = getTheme();
const classNames = mergeStyleSets({
headerAndFooter: {
borderTop: `${GROUP_HEADER_AND_FOOTER_BORDER_WIDTH}px solid ${theme.palette.neutralQuaternary}`,
borderBottom: `${GROUP_HEADER_AND_FOOTER_BORDER_WIDTH}px solid ${theme.palette.neutralQuaternary}`,
padding: GROUP_HEADER_AND_FOOTER_SPACING,
margin: `${GROUP_HEADER_AND_FOOTER_SPACING}px 0`,
background: theme.palette.neutralLighterAlt,
// Overlay the sizer bars
position: 'relative',
zIndex: 100
},
headerTitle: [
theme.fonts.xLarge,
{
padding: '4px 0'
}
],
background: DefaultPalette.themePrimary,
color: DefaultPalette.white,
padding: 5
};
const boxStyles: IStyle = {
...itemStyles,
display: 'flex',
justifyContent: 'center' as 'center',
alignItems: 'center' as 'center',
width: '50px',
height: '50px',
padding: 0
};
const styles = mergeStyleSets({
root: rootStyles,
fixedHeight: {
...rootStyles,
height: '200px'
},
item: itemStyles,
boxItem: boxStyles,
shrinkItem: {
...itemStyles,
width: '400px'
},
IDetailsHeaderProps,
Selection,
IColumn,
ConstrainMode,
IDetailsFooterProps,
DetailsRow
} from 'office-ui-fabric-react/lib/DetailsList';
import { IRenderFunction } from 'office-ui-fabric-react/lib/Utilities';
import { TooltipHost, ITooltipHostProps } from 'office-ui-fabric-react/lib/Tooltip';
import { ScrollablePane, ScrollbarVisibility } from 'office-ui-fabric-react/lib/ScrollablePane';
import { Sticky, StickyPositionType } from 'office-ui-fabric-react/lib/Sticky';
import { MarqueeSelection } from 'office-ui-fabric-react/lib/MarqueeSelection';
import { SelectionMode } from 'office-ui-fabric-react/lib/Selection';
import { mergeStyleSets } from 'office-ui-fabric-react/lib/Styling';
const classNames = mergeStyleSets({
wrapper: {
height: '80vh',
position: 'relative'
},
filter: {
paddingBottom: 20,
maxWidth: 300
},
header: {
margin: 0
},
row: {
display: 'inline-block'
}
});
cursor: pointer;
`;
export const closeIcon = css`
font-size: 30px;
margin-top: 40px;
padding-left: 30px;
padding-top: 10px;
padding-bottom: 10px;
width: 90px;
&:hover {
background-color: ${SharedColors.cyanBlue20};
}
`;
export const navLinkClass = mergeStyleSets({
actionNav: {
backgroundColor: SharedColors.cyanBlue10,
color: 'white',
fontSize: '16px',
selectors: {
'&:hover': {
displayName: 'testHover',
color: 'white !important',
fontSize: '16px',
backgroundColor: `${SharedColors.cyanBlue20} !important`,
},
'&:after': {
border: '0px !important',
backgroundColor: `${SharedColors.cyanBlue20} !important`,
z: '-1',
},
private readonly defaultFarItemsFactory = (options: ICompositeListFarItemOptions) => {
const getSelectedText = options.getSelectedText || ((count: number) => `${count} selected`);
const getSelectedAriaLable = options.getSelectedAriaLabel || ((count: number) => `${count} selected items`);
const mergedCommandBarItemStyle = mergeStyleSets(
getCommandBarItemStyle(),
options.compactMenuProps ? options.compactMenuProps.buttonStyles : undefined
);
const farItems: ICommandBarItemProps[] = [
{
key: 'search',
onRender: (): React.ReactNode => {
const mergedCommandBarSearchBoxStyle = mergeStyleSets(
getCommandBarSearchBoxStyle(),
options.searchBoxProps ? options.searchBoxProps.styles : undefined
);
return (
public render(): JSX.Element {
const { theme, getStyles, images } = this.props;
const styleProps: IPageImageSetStyleProps = { theme: theme! };
const classNames = getStyles
? mergeStyleSets(getDefaultStyles(styleProps), getStyles(styleProps))
: mergeStyleSets(getDefaultStyles(styleProps));
return (
<div>
{images.map((imageProps: IImageProps) => (
<div>
<img src="{imageProps.src}">
</div>
))}
</div>
);
}
}
import * as React from 'react';
import { HoverCard, IPlainCardProps, HoverCardType, DirectionalHint } from 'office-ui-fabric-react/lib/HoverCard';
import { Fabric } from 'office-ui-fabric-react/lib/Fabric';
import { mergeStyleSets } from 'office-ui-fabric-react/lib/Styling';
import { IconButton } from 'office-ui-fabric-react';
const classNames = mergeStyleSets({
plainCard: {
width: 200,
height: 200,
display: 'flex',
alignItems: 'center',
justifyContent: 'center'
},
textField: {
paddingRight: 200
}
});
interface IHoverCardExampleState {
target: HTMLElement | null;
eventListenerTarget: HTMLElement | null;
public render(): JSX.Element {
const styles = mergeStyleSets({
root: {
background: DefaultPalette.themeTertiary,
width: 300,
selectors: {
'> *': {
width: 50,
height: 50,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
background: DefaultPalette.themePrimary,
color: DefaultPalette.white
}
}
},
public render(): JSX.Element {
const theme = getTheme();
this._classNames = mergeStyleSets({
picker: { maxWidth: 400, marginBottom: 15 },
headerItem: {
borderBottom: '1px solid ' + theme.palette.neutralLight,
padding: '8px 12px'
},
footerItem: {
borderBottom: '1px solid ' + theme.palette.neutralLight,
height: 60,
paddingLeft: 12
},
to: { padding: '0 10px' }
});
return (
<div>
{this._renderExtendedPicker()}</div>
height: number;
}
const PHOTOS: IPhoto[] = createArray(250, (index: number) => {
const randomWidth = 50 + Math.floor(Math.random() * 150);
return {
key: index,
url: `http://placehold.it/${randomWidth}x100`,
width: randomWidth,
height: 100
};
});
const theme = getTheme();
const styles = mergeStyleSets({
photoList: {
display: 'inline-block',
border: '1px solid ' + theme.palette.neutralTertiary,
margin: 0,
padding: 10,
overflow: 'hidden',
userSelect: 'none'
},
photoCell: {
position: 'relative',
display: 'inline-block',
margin: 2,
boxSizing: 'border-box',
background: theme.palette.neutralLighter,
lineHeight: 100,