@canonical/react-components 0.50.1 → 0.50.2
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.
|
@@ -1,4 +1,9 @@
|
|
|
1
1
|
import { ReactElement, ReactNode } from "react";
|
|
2
|
+
/**
|
|
3
|
+
* Determine if we are working with a small screen.
|
|
4
|
+
* 'small screen' in this case is relative to the width of the description div
|
|
5
|
+
*/
|
|
6
|
+
export declare const figureSmallScreen: () => boolean;
|
|
2
7
|
/**
|
|
3
8
|
* Iterate direct react child components and override the value of the prop specified by @param dataForwardProp
|
|
4
9
|
* for those child components.
|
|
@@ -3,8 +3,20 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.useFigureSmallScreen = exports.renderChildren = exports.getDescription = exports.generatePagingOptions = exports.DEFAULT_PAGE_LIMITS = void 0;
|
|
6
|
+
exports.useFigureSmallScreen = exports.renderChildren = exports.getDescription = exports.generatePagingOptions = exports.figureSmallScreen = exports.DEFAULT_PAGE_LIMITS = void 0;
|
|
7
7
|
var _react = require("react");
|
|
8
|
+
/**
|
|
9
|
+
* Determine if we are working with a small screen.
|
|
10
|
+
* 'small screen' in this case is relative to the width of the description div
|
|
11
|
+
*/
|
|
12
|
+
const figureSmallScreen = () => {
|
|
13
|
+
const descriptionElement = document.getElementById("pagination-description");
|
|
14
|
+
if (!descriptionElement) {
|
|
15
|
+
return true;
|
|
16
|
+
}
|
|
17
|
+
return descriptionElement.getBoundingClientRect().width < 230;
|
|
18
|
+
};
|
|
19
|
+
|
|
8
20
|
/**
|
|
9
21
|
* Iterate direct react child components and override the value of the prop specified by @param dataForwardProp
|
|
10
22
|
* for those child components.
|
|
@@ -12,6 +24,7 @@ var _react = require("react");
|
|
|
12
24
|
* @param dataForwardProp - the name of the prop from the children components to override
|
|
13
25
|
* @param data - actual data to be passed to the prop specified by @param dataForwardProp
|
|
14
26
|
*/
|
|
27
|
+
exports.figureSmallScreen = figureSmallScreen;
|
|
15
28
|
const renderChildren = (children, dataForwardProp, data) => {
|
|
16
29
|
return _react.Children.map(children, child => {
|
|
17
30
|
return /*#__PURE__*/(0, _react.cloneElement)(child, {
|
|
@@ -53,7 +66,7 @@ const useFigureSmallScreen = () => {
|
|
|
53
66
|
const [isSmallScreen, setSmallScreen] = (0, _react.useState)(false);
|
|
54
67
|
(0, _react.useEffect)(() => {
|
|
55
68
|
const handleResize = () => {
|
|
56
|
-
setSmallScreen(
|
|
69
|
+
setSmallScreen(figureSmallScreen());
|
|
57
70
|
};
|
|
58
71
|
window.addEventListener("resize", handleResize);
|
|
59
72
|
return () => {
|