From 88828502b68a6c463309b723aa39e90f11f6980b Mon Sep 17 00:00:00 2001 From: Antanina Druzhkina Date: Sun, 6 Apr 2025 00:52:29 +0400 Subject: [PATCH 1/2] 1852: added rowsPerPage, maxWidth, minWidth, padding, compactThreshold as non-required component properties. Renamed MAX_ROW_HEIGHT to MAX_WIDTH. --- src/controls/gridLayout/GridLayout.tsx | 50 +++++++++---------- src/controls/gridLayout/GridLayout.types.ts | 35 +++++++++++++ .../controlsTest/components/ControlsTest.tsx | 9 +++- 3 files changed, 67 insertions(+), 27 deletions(-) diff --git a/src/controls/gridLayout/GridLayout.tsx b/src/controls/gridLayout/GridLayout.tsx index 6600b54a4..a2c13f236 100644 --- a/src/controls/gridLayout/GridLayout.tsx +++ b/src/controls/gridLayout/GridLayout.tsx @@ -10,13 +10,6 @@ import { IGridLayoutProps, IGridLayoutState } from './GridLayout.types'; import * as telemetry from '../../common/telemetry'; -// Get the constants from the SCSS so that we don't hard-code look and feel elements -const ROWS_PER_PAGE: number = +styles.rowsPerPage; -const MAX_ROW_HEIGHT: number = +styles.maxWidth; -const PADDING: number = +styles.padding; -const MIN_WIDTH: number = +styles.minWidth; -const COMPACT_THRESHOLD: number = +styles.compactThreshold; - /** * Grid layout component */ @@ -31,6 +24,13 @@ export class GridLayout extends React.Component { return (
- - - + + +
); } @@ -69,19 +69,19 @@ export class GridLayout extends React.Component { if (itemIndex === 0) { - this._isCompact = surfaceRect.width < COMPACT_THRESHOLD; + this._isCompact = surfaceRect.width < this.COMPACT_THRESHOLD; if (this._isCompact) { this._columnCount = 1; this._columnWidth = surfaceRect.width; return this.props.items.length; } else { - this._columnCount = Math.ceil(surfaceRect.width / (MAX_ROW_HEIGHT)); - this._columnWidth = Math.max(MIN_WIDTH, Math.floor(surfaceRect.width / this._columnCount) + Math.floor(PADDING / this._columnCount)); + this._columnCount = Math.ceil(surfaceRect.width / (this.MAX_WIDTH)); + this._columnWidth = Math.max(this.MIN_WIDTH, Math.floor(surfaceRect.width / this._columnCount) + Math.floor(this.PADDING / this._columnCount)); this._rowHeight = this._columnWidth; } } - return this._columnCount * ROWS_PER_PAGE; + return this._columnCount * this.ROWS_PER_PAGE; } /** @@ -91,7 +91,7 @@ export class GridLayout extends React.Component { // eslint-disable-line @typescript-eslint/no-explicit-any const isCompact: boolean = this._isCompact; - const cellPadding: number = index % this._columnCount !== this._columnCount - 1 && !isCompact ? PADDING : 0; + const cellPadding: number = index % this._columnCount !== this._columnCount - 1 && !isCompact ? this.PADDING : 0; const finalSize: ISize = { width: this._columnWidth, height: this._rowHeight }; - const cellWidth: number = isCompact ? this._columnWidth + PADDING : this._columnWidth - PADDING; + const cellWidth: number = isCompact ? this._columnWidth + this.PADDING : this._columnWidth - this.PADDING; return (
JSX.Element; // eslint-disable-line @typescript-eslint/no-explicit-any + + /** + * Layout configuration props. + * All properties are optional; defaults are provided via styles (SCSS module). + */ + + /** + * Gap between items. + * Default: 20. + */ + itemPadding?: number; + + /** + * Minimum width for each item. + * Default: 210. + */ + itemMinWidth?: number; + + /** + * Maximum width for each item. + * Default: 320 + */ + itemMaxWidth?: number; + + /** + * Threshold width below which the compact layout is activated. + * Default: 480. + */ + compactThreshold?: number; + + /** + * Number of rows displayed per page. + * Default: 3. + */ + rowsPerPage?: number; } export interface IGridLayoutState {} diff --git a/src/webparts/controlsTest/components/ControlsTest.tsx b/src/webparts/controlsTest/components/ControlsTest.tsx index eab03cbfc..bd37871a9 100644 --- a/src/webparts/controlsTest/components/ControlsTest.tsx +++ b/src/webparts/controlsTest/components/ControlsTest.tsx @@ -895,7 +895,7 @@ export default class ControlsTest extends React.Component) => alert("You clicked on a grid item")} - + style={{maxWidth: _finalSize.width}} > {!isCompact && } @@ -2110,7 +2110,12 @@ export default class ControlsTest extends React.Component this._onRenderGridItem(item, finalSize, isCompact)} - /> + itemMinWidth={250} + itemMaxWidth={600} + itemPadding={60} + //compactThreshold={220} + //rowsPerPage={1} + />
} {controlVisibility.HoverReactionsBar && From 7aa8052e3f209c63baf01bd93067c4d44816d009 Mon Sep 17 00:00:00 2001 From: Antanina Druzhkina Date: Sat, 19 Apr 2025 20:09:33 +0400 Subject: [PATCH 2/2] update documentation --- docs/documentation/docs/controls/GridLayout.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/docs/documentation/docs/controls/GridLayout.md b/docs/documentation/docs/controls/GridLayout.md index fb5e3ff43..256c3fa1c 100644 --- a/docs/documentation/docs/controls/GridLayout.md +++ b/docs/documentation/docs/controls/GridLayout.md @@ -147,5 +147,10 @@ The grid layout control can be configured with the following properties: | items | any[] | yes | The array of items you wish to display. | | listProps | IListProps | no | Provides additional list properties to customize the underlying list. | | onRenderGridItem | function | yes | onRenderGridItem handler for the grid layout. Use this handler to specify how you wish to render each grid item | +| itemPadding | number | no | Gap between items. | +| itemMinWidth | number | no | Minimum width for each item. | +| itemMaxWidth | number | no | Maximum width for each item. | +| compactThreshold | number | no | Threshold width below which the compact layout is activated. | +| rowsPerPage | number | no | Number of rows displayed per page. | ![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/gridlayout)