Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
public componentDidUpdate(previousProps: ITilesListDocumentExampleProps, prevState: ITilesListDocumentExampleState): void {
const { isDataLoaded } = this.state;
if (this.props.tileSize !== previousProps.tileSize || this.state.isFluentStyling !== prevState.isFluentStyling) {
if (!isDataLoaded) {
this.setState({
cells: getTileCells(SHIMMER_GROUPS, {
onRenderCell: this._onRenderShimmerCell,
onRenderHeader: this._onRenderShimmerHeader,
size: this.props.tileSize,
shimmerMode: true
})
});
} else {
this.setState({
cells: getTileCells(GROUPS, {
onRenderCell: this._onRenderDocumentCell,
onRenderHeader: this._onRenderHeader,
size: this.props.tileSize
})
});
}
}
private _onToggleNameplateOnlyOnHover = (event: React.MouseEvent, checked: boolean): void => {
this.setState({
nameplateOnlyOnHover: checked,
cells: getTileCells(GROUPS, {
onRenderCell: this._onRenderMediaCell,
onRenderHeader: this._onRenderHeader
})
});
};
private _onToggleIsDataLoaded = (event: React.MouseEvent, checked: boolean): void => {
const { tileSize } = this.props;
const { isDataLoaded } = this.state;
let { cells } = this.state;
if (cells.length && !cells[0].isPlaceholder) {
cells = getTileCells(SHIMMER_GROUPS, {
onRenderCell: this._onRenderShimmerCell,
onRenderHeader: this._onRenderShimmerHeader,
shimmerMode: true,
size: tileSize
});
} else {
cells = getTileCells(GROUPS, {
onRenderCell: this._onRenderDocumentCell,
onRenderHeader: this._onRenderHeader,
size: tileSize
});
}
this.setState({
isDataLoaded: !isDataLoaded,
cells: cells
});
};
public componentDidUpdate(previousProps: ITilesListDocumentExampleProps, prevState: ITilesListDocumentExampleState): void {
const { isDataLoaded } = this.state;
if (this.props.tileSize !== previousProps.tileSize || this.state.isFluentStyling !== prevState.isFluentStyling) {
if (!isDataLoaded) {
this.setState({
cells: getTileCells(SHIMMER_GROUPS, {
onRenderCell: this._onRenderShimmerCell,
onRenderHeader: this._onRenderShimmerHeader,
size: this.props.tileSize,
shimmerMode: true
})
});
} else {
this.setState({
cells: getTileCells(GROUPS, {
onRenderCell: this._onRenderDocumentCell,
onRenderHeader: this._onRenderHeader,
size: this.props.tileSize
})
});
}
}
}
constructor(props: ITilesListDocumentExampleProps) {
super(props);
this._selection = new Selection({
getKey: (item: IExampleItem) => item.key,
onSelectionChanged: this._onSelectionChange
});
this._selection.setItems(ITEMS);
this.state = {
isModalSelection: this._selection.isModal(),
isDataLoaded: false,
isFluentStyling: false,
cells: getTileCells(SHIMMER_GROUPS, {
onRenderCell: this._onRenderShimmerCell,
onRenderHeader: this._onRenderShimmerHeader,
size: props.tileSize,
shimmerMode: true
})
};
}
private _onToggleIsDataLoaded = (event: React.MouseEvent, checked: boolean): void => {
const { tileSize } = this.props;
const { isDataLoaded } = this.state;
let { cells } = this.state;
if (cells.length && !cells[0].isPlaceholder) {
cells = getTileCells(SHIMMER_GROUPS, {
onRenderCell: this._onRenderShimmerCell,
onRenderHeader: this._onRenderShimmerHeader,
shimmerMode: true,
size: tileSize
});
} else {
cells = getTileCells(GROUPS, {
onRenderCell: this._onRenderDocumentCell,
onRenderHeader: this._onRenderHeader,
size: tileSize
});
}
this.setState({
isDataLoaded: !isDataLoaded,
cells: cells
constructor(props: {}) {
super(props);
this._selection = new Selection({
getKey: (item: IExampleItem) => item.key,
onSelectionChanged: this._onSelectionChange
});
this._selection.setItems(ITEMS);
this.state = {
isModalSelection: this._selection.isModal(),
nameplateOnlyOnHover: false,
cells: getTileCells(GROUPS, {
onRenderCell: this._onRenderMediaCell,
onRenderHeader: this._onRenderHeader
})
};
}