@pnp/spfx-controls-react 3.22.0-beta.1625313 → 3.22.0-beta.1625333
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/common/telemetry/version.js +1 -1
- package/lib/controls/gridLayout/GridLayout.d.ts +5 -0
- package/lib/controls/gridLayout/GridLayout.d.ts.map +1 -1
- package/lib/controls/gridLayout/GridLayout.js +14 -13
- package/lib/controls/gridLayout/GridLayout.js.map +1 -1
- package/lib/controls/gridLayout/GridLayout.types.d.ts +29 -0
- package/lib/controls/gridLayout/GridLayout.types.d.ts.map +1 -1
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export var version = "3.22.0-beta.
|
|
1
|
+
export var version = "3.22.0-beta.1625333";
|
|
2
2
|
//# sourceMappingURL=version.js.map
|
|
@@ -8,6 +8,11 @@ export declare class GridLayout extends React.Component<IGridLayoutProps, IGridL
|
|
|
8
8
|
* Constructor method
|
|
9
9
|
*/
|
|
10
10
|
constructor(props: IGridLayoutProps);
|
|
11
|
+
private ROWS_PER_PAGE;
|
|
12
|
+
private MAX_WIDTH;
|
|
13
|
+
private MIN_WIDTH;
|
|
14
|
+
private PADDING;
|
|
15
|
+
private COMPACT_THRESHOLD;
|
|
11
16
|
private _columnCount;
|
|
12
17
|
private _columnWidth;
|
|
13
18
|
private _rowHeight;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GridLayout.d.ts","sourceRoot":"","sources":["../../../src/controls/gridLayout/GridLayout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,OAAO,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;
|
|
1
|
+
{"version":3,"file":"GridLayout.d.ts","sourceRoot":"","sources":["../../../src/controls/gridLayout/GridLayout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,OAAO,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAIxE;;GAEG;AACH,qBAAa,UAAW,SAAQ,KAAK,CAAC,SAAS,CAAC,gBAAgB,EAAE,gBAAgB,CAAC;IAEhF;;MAEE;gBACS,KAAK,EAAE,gBAAgB;IAOnC,OAAO,CAAC,aAAa,CAAyD;IAC9E,OAAO,CAAC,SAAS,CAAuD;IACxE,OAAO,CAAC,SAAS,CAAuD;IACxE,OAAO,CAAC,OAAO,CAAqD;IACpE,OAAO,CAAC,iBAAiB,CAAmE;IAG5F,OAAO,CAAC,YAAY,CAAS;IAG7B,OAAO,CAAC,YAAY,CAAS;IAG7B,OAAO,CAAC,UAAU,CAAS;IAG3B,OAAO,CAAC,UAAU,CAAU;IAE5B;;OAEG;IACI,MAAM,IAAI,KAAK,CAAC,YAAY,CAAC,gBAAgB,CAAC;IAkBrD;;OAEG;IACH,OAAO,CAAC,oBAAoB,CAe3B;IAED;;OAEG;IACH,OAAO,CAAC,cAAc,CAKrB;IAED;;OAEG;IACH,OAAO,CAAC,aAAa,CAepB;CACF"}
|
|
@@ -30,12 +30,6 @@ import styles from './GridLayout.module.scss';
|
|
|
30
30
|
import { FocusZone } from '@fluentui/react/lib/FocusZone';
|
|
31
31
|
import { List } from '@fluentui/react/lib/List';
|
|
32
32
|
import * as telemetry from '../../common/telemetry';
|
|
33
|
-
// Get the constants from the SCSS so that we don't hard-code look and feel elements
|
|
34
|
-
var ROWS_PER_PAGE = +styles.rowsPerPage;
|
|
35
|
-
var MAX_ROW_HEIGHT = +styles.maxWidth;
|
|
36
|
-
var PADDING = +styles.padding;
|
|
37
|
-
var MIN_WIDTH = +styles.minWidth;
|
|
38
|
-
var COMPACT_THRESHOLD = +styles.compactThreshold;
|
|
39
33
|
/**
|
|
40
34
|
* Grid layout component
|
|
41
35
|
*/
|
|
@@ -45,25 +39,32 @@ var GridLayout = /** @class */ (function (_super) {
|
|
|
45
39
|
* Constructor method
|
|
46
40
|
*/
|
|
47
41
|
function GridLayout(props) {
|
|
42
|
+
var _a, _b, _c, _d, _e;
|
|
48
43
|
var _this = _super.call(this, props) || this;
|
|
44
|
+
//Get constants from SCSS if they are not passed in props
|
|
45
|
+
_this.ROWS_PER_PAGE = (_a = _this.props.rowsPerPage) !== null && _a !== void 0 ? _a : +styles.rowsPerPage;
|
|
46
|
+
_this.MAX_WIDTH = (_b = _this.props.itemMaxWidth) !== null && _b !== void 0 ? _b : +styles.maxWidth;
|
|
47
|
+
_this.MIN_WIDTH = (_c = _this.props.itemMinWidth) !== null && _c !== void 0 ? _c : +styles.minWidth;
|
|
48
|
+
_this.PADDING = (_d = _this.props.itemPadding) !== null && _d !== void 0 ? _d : +styles.padding;
|
|
49
|
+
_this.COMPACT_THRESHOLD = (_e = _this.props.compactThreshold) !== null && _e !== void 0 ? _e : +styles.compactThreshold;
|
|
49
50
|
/**
|
|
50
51
|
* Calculates how many items in the page
|
|
51
52
|
*/
|
|
52
53
|
_this._getItemCountForPage = function (itemIndex, surfaceRect) {
|
|
53
54
|
if (itemIndex === 0) {
|
|
54
|
-
_this._isCompact = surfaceRect.width < COMPACT_THRESHOLD;
|
|
55
|
+
_this._isCompact = surfaceRect.width < _this.COMPACT_THRESHOLD;
|
|
55
56
|
if (_this._isCompact) {
|
|
56
57
|
_this._columnCount = 1;
|
|
57
58
|
_this._columnWidth = surfaceRect.width;
|
|
58
59
|
return _this.props.items.length;
|
|
59
60
|
}
|
|
60
61
|
else {
|
|
61
|
-
_this._columnCount = Math.ceil(surfaceRect.width / (
|
|
62
|
-
_this._columnWidth = Math.max(MIN_WIDTH, Math.floor(surfaceRect.width / _this._columnCount) + Math.floor(PADDING / _this._columnCount));
|
|
62
|
+
_this._columnCount = Math.ceil(surfaceRect.width / (_this.MAX_WIDTH));
|
|
63
|
+
_this._columnWidth = Math.max(_this.MIN_WIDTH, Math.floor(surfaceRect.width / _this._columnCount) + Math.floor(_this.PADDING / _this._columnCount));
|
|
63
64
|
_this._rowHeight = _this._columnWidth;
|
|
64
65
|
}
|
|
65
66
|
}
|
|
66
|
-
return _this._columnCount * ROWS_PER_PAGE;
|
|
67
|
+
return _this._columnCount * _this.ROWS_PER_PAGE;
|
|
67
68
|
};
|
|
68
69
|
/**
|
|
69
70
|
* Calculates the page height for the grid
|
|
@@ -72,16 +73,16 @@ var GridLayout = /** @class */ (function (_super) {
|
|
|
72
73
|
if (_this._isCompact) {
|
|
73
74
|
return _this.props.items.length * _this._rowHeight;
|
|
74
75
|
}
|
|
75
|
-
return _this._rowHeight * ROWS_PER_PAGE;
|
|
76
|
+
return _this._rowHeight * _this.ROWS_PER_PAGE;
|
|
76
77
|
};
|
|
77
78
|
/**
|
|
78
79
|
* Calls the passed onRenderCell
|
|
79
80
|
*/
|
|
80
81
|
_this._onRenderCell = function (item, index) {
|
|
81
82
|
var isCompact = _this._isCompact;
|
|
82
|
-
var cellPadding = index % _this._columnCount !== _this._columnCount - 1 && !isCompact ? PADDING : 0;
|
|
83
|
+
var cellPadding = index % _this._columnCount !== _this._columnCount - 1 && !isCompact ? _this.PADDING : 0;
|
|
83
84
|
var finalSize = { width: _this._columnWidth, height: _this._rowHeight };
|
|
84
|
-
var cellWidth = isCompact ? _this._columnWidth + PADDING : _this._columnWidth - PADDING;
|
|
85
|
+
var cellWidth = isCompact ? _this._columnWidth + _this.PADDING : _this._columnWidth - _this.PADDING;
|
|
85
86
|
return (React.createElement("div", { style: {
|
|
86
87
|
width: "".concat(cellWidth, "px"),
|
|
87
88
|
marginRight: "".concat(cellPadding, "px")
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GridLayout.js","sourceRoot":"","sources":["../../../src/controls/gridLayout/GridLayout.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,MAAM,MAAM,0BAA0B,CAAC;AAE9C,2BAA2B;AAC3B,OAAO,EAAE,SAAS,EAAE,MAAM,+BAA+B,CAAC;AAC1D,OAAO,EAAE,IAAI,EAAE,MAAM,0BAA0B,CAAC;AAKhD,OAAO,KAAK,SAAS,MAAM,wBAAwB,CAAC;AAEpD,
|
|
1
|
+
{"version":3,"file":"GridLayout.js","sourceRoot":"","sources":["../../../src/controls/gridLayout/GridLayout.tsx"],"names":[],"mappings":"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"}
|
|
@@ -14,6 +14,35 @@ export interface IGridLayoutProps {
|
|
|
14
14
|
* The method to render each cell item
|
|
15
15
|
*/
|
|
16
16
|
onRenderGridItem: (item: any, finalSize: ISize, isCompact: boolean) => JSX.Element;
|
|
17
|
+
/**
|
|
18
|
+
* Layout configuration props.
|
|
19
|
+
* All properties are optional; defaults are provided via styles (SCSS module).
|
|
20
|
+
*/
|
|
21
|
+
/**
|
|
22
|
+
* Gap between items.
|
|
23
|
+
* Default: 20.
|
|
24
|
+
*/
|
|
25
|
+
itemPadding?: number;
|
|
26
|
+
/**
|
|
27
|
+
* Minimum width for each item.
|
|
28
|
+
* Default: 210.
|
|
29
|
+
*/
|
|
30
|
+
itemMinWidth?: number;
|
|
31
|
+
/**
|
|
32
|
+
* Maximum width for each item.
|
|
33
|
+
* Default: 320
|
|
34
|
+
*/
|
|
35
|
+
itemMaxWidth?: number;
|
|
36
|
+
/**
|
|
37
|
+
* Threshold width below which the compact layout is activated.
|
|
38
|
+
* Default: 480.
|
|
39
|
+
*/
|
|
40
|
+
compactThreshold?: number;
|
|
41
|
+
/**
|
|
42
|
+
* Number of rows displayed per page.
|
|
43
|
+
* Default: 3.
|
|
44
|
+
*/
|
|
45
|
+
rowsPerPage?: number;
|
|
17
46
|
}
|
|
18
47
|
export interface IGridLayoutState {
|
|
19
48
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GridLayout.types.d.ts","sourceRoot":"","sources":["../../../src/controls/gridLayout/GridLayout.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAG,KAAK,EAAE,MAAM,+BAA+B,CAAC;AACvD,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAEtD,MAAM,WAAW,gBAAgB;IAC/B;;OAEG;IACH,KAAK,EAAE,GAAG,EAAE,CAAC;IAEb;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC,UAAU,CAAC,CAAC;IAEhC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,gBAAgB,EAAE,CAAC,IAAI,EAAE,GAAG,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE,OAAO,KAAK,GAAG,CAAC,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"GridLayout.types.d.ts","sourceRoot":"","sources":["../../../src/controls/gridLayout/GridLayout.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAG,KAAK,EAAE,MAAM,+BAA+B,CAAC;AACvD,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAEtD,MAAM,WAAW,gBAAgB;IAC/B;;OAEG;IACH,KAAK,EAAE,GAAG,EAAE,CAAC;IAEb;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC,UAAU,CAAC,CAAC;IAEhC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,gBAAgB,EAAE,CAAC,IAAI,EAAE,GAAG,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE,OAAO,KAAK,GAAG,CAAC,OAAO,CAAC;IAEnF;;;OAGG;IAEH;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,gBAAgB;CAAG"}
|
package/package.json
CHANGED