Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
const row: string = this.generateRow();
const span: number = this.generateColumnSpan();
const gridColumnValue: string = [position, `span ${span}`]
.filter((item: string | number) => Boolean(item))
.join(" / ");
const order: number | null = Array.isArray(this.props.order)
? this.getValueByBreakpoint(this.props.order)
: this.props.order;
const canUseCssGridStyle: boolean =
this.props.cssGridPropertyName === "grid"
? true
: this.props.cssGridPropertyName === "-ms-grid"
? false
: canUseCssGrid();
const gridStyles: React.CSSProperties = canUseCssGridStyle
? {
gridColumn: gridColumnValue,
gridRowStart: row,
}
: {
["msGridColumn" as any]: this.augmentMsGrid(position),
["msGridColumnSpan" as any]: this.augmentMsGrid(span),
["msGridRow" as any]: row,
};
return {
...gridStyles,
order: typeof order === "number" ? order : null,
// Fixes issue found in firefox where columns that have overflow
const columns: string = `${this.props.margin} minmax(0, ${this.props.maxWidth}) ${
this.props.margin
}`;
const attributes: React.HTMLAttributes = {
...this.unhandledProps(),
className: super.generateClassNames(
classNames(this.props.managedClasses.page)
),
};
return {
...attributes,
style: {
display:
this.props.cssGridPropertyName || canUseCssGrid()
? "grid"
: "-ms-grid",
gridTemplateColumns: columns,
msGridColumns: columns,
// attributes.style has to be spread here again in order to
// merge the styles attribute, otherwise it is just overriden
...attributes.style,
},
};
}
}
private renderChildren(): React.ReactNode | React.ReactNode[] {
// We only need to communicate gutters size to ms-grid columns because
// css grid gives us a css property to set for gutter. If we support
// css grid, we can safely return children w/o gutter augmentation.
if (canUseCssGrid()) {
return this.props.children;
}
return React.Children.map(
this.props.children,
(child: React.ReactNode | React.ReactNode[]) => {
if (
!child ||
(child as any).type !== Column ||
(child as any).props.gutter
) {
return child;
}
return React.cloneElement(
child as any,