@dnb/eufemia 9.33.0 → 9.34.0
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/CHANGELOG.md +12 -0
- package/cjs/components/upload/UploadFileListCell.js +1 -1
- package/cjs/components/upload/useUpload.js +1 -1
- package/cjs/shared/Eufemia.js +1 -1
- package/cjs/shared/MediaQuery.d.ts +4 -2
- package/cjs/shared/MediaQuery.js +2 -0
- package/cjs/shared/MediaQueryUtils.d.ts +6 -2
- package/cjs/shared/MediaQueryUtils.js +10 -4
- package/cjs/shared/index.d.ts +2 -1
- package/cjs/shared/index.js +10 -1
- package/cjs/shared/useMedia.d.ts +25 -0
- package/cjs/shared/useMedia.js +185 -0
- package/components/upload/UploadFileListCell.js +1 -1
- package/components/upload/useUpload.js +1 -1
- package/es/components/upload/UploadFileListCell.js +1 -1
- package/es/components/upload/useUpload.js +1 -1
- package/es/shared/Eufemia.js +1 -1
- package/es/shared/MediaQuery.d.ts +4 -2
- package/es/shared/MediaQuery.js +2 -0
- package/es/shared/MediaQueryUtils.d.ts +6 -2
- package/es/shared/MediaQueryUtils.js +12 -6
- package/es/shared/index.d.ts +2 -1
- package/es/shared/index.js +2 -1
- package/es/shared/useMedia.d.ts +25 -0
- package/es/shared/useMedia.js +103 -0
- package/esm/dnb-ui-basis.min.mjs +1 -1
- package/esm/dnb-ui-components.min.mjs +1 -1
- package/esm/dnb-ui-elements.min.mjs +1 -1
- package/esm/dnb-ui-extensions.min.mjs +1 -1
- package/esm/dnb-ui-lib.min.mjs +2 -2
- package/esm/dnb-ui-web-components.min.mjs +2 -2
- package/package.json +1 -1
- package/shared/Eufemia.js +1 -1
- package/shared/MediaQuery.d.ts +4 -2
- package/shared/MediaQuery.js +2 -0
- package/shared/MediaQueryUtils.d.ts +6 -2
- package/shared/MediaQueryUtils.js +12 -6
- package/shared/index.d.ts +2 -1
- package/shared/index.js +2 -1
- package/shared/useMedia.d.ts +25 -0
- package/shared/useMedia.js +126 -0
- package/umd/dnb-ui-basis.min.js +1 -1
- package/umd/dnb-ui-components.min.js +1 -1
- package/umd/dnb-ui-elements.min.js +1 -1
- package/umd/dnb-ui-extensions.min.js +1 -1
- package/umd/dnb-ui-lib.min.js +2 -2
- package/umd/dnb-ui-web-components.min.js +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,18 @@
|
|
|
3
3
|
All notable changes to @dnb/eufemia will be documented in this file. See
|
|
4
4
|
[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
# [9.34.0](https://github.com/dnbexperience/eufemia/compare/v9.33.0...v9.34.0) (2022-10-24)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Bug Fixes
|
|
10
|
+
|
|
11
|
+
* **Upload:** make import paths valid in released version ([#1659](https://github.com/dnbexperience/eufemia/issues/1659)) ([4eb622a](https://github.com/dnbexperience/eufemia/commit/4eb622a01bf4c8727057e84af380033c332fc480))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
### Features
|
|
15
|
+
|
|
16
|
+
* **useMedia:** add React Hook to handle Eufemia layout breakpoints ([#1650](https://github.com/dnbexperience/eufemia/issues/1650)) ([d41f7dd](https://github.com/dnbexperience/eufemia/commit/d41f7dda7a6c803a6578b5021a405141608f39e8))
|
|
17
|
+
|
|
6
18
|
# [9.33.0](https://github.com/dnbexperience/eufemia/compare/v9.32.1...v9.33.0) (2022-10-23)
|
|
7
19
|
|
|
8
20
|
|
|
@@ -45,7 +45,7 @@ var _FormStatus2 = _interopRequireDefault(require("../../components/FormStatus")
|
|
|
45
45
|
|
|
46
46
|
var _progressIndicator = _interopRequireDefault(require("../../components/progress-indicator"));
|
|
47
47
|
|
|
48
|
-
var _P = _interopRequireDefault(require("
|
|
48
|
+
var _P = _interopRequireDefault(require("../../elements/P"));
|
|
49
49
|
|
|
50
50
|
var _icons = require("../../icons");
|
|
51
51
|
|
|
@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
7
|
|
|
8
|
-
var _componentHelper = require("
|
|
8
|
+
var _componentHelper = require("../../shared/component-helper");
|
|
9
9
|
|
|
10
10
|
function useUpload(id) {
|
|
11
11
|
var _useEventEmitter = (0, _componentHelper.useEventEmitter)(id),
|
package/cjs/shared/Eufemia.js
CHANGED
|
@@ -1,16 +1,18 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
+
import { ContextProps } from './Context';
|
|
2
3
|
import { onMediaQueryChange } from './MediaQueryUtils';
|
|
3
4
|
import type { MediaQueryProps, MediaQueryState, MediaQueryListener } from './MediaQueryUtils';
|
|
4
5
|
export type { MediaQueryProps };
|
|
5
6
|
export { onMediaQueryChange };
|
|
6
7
|
export default class MediaQuery extends React.PureComponent<MediaQueryProps, MediaQueryState> {
|
|
7
|
-
static contextType: React.Context<
|
|
8
|
+
static contextType: React.Context<ContextProps>;
|
|
8
9
|
listener: MediaQueryListener;
|
|
10
|
+
context: ContextProps;
|
|
9
11
|
state: {
|
|
10
12
|
match: any;
|
|
11
13
|
mediaQueryList: any;
|
|
12
14
|
};
|
|
13
|
-
constructor(props:
|
|
15
|
+
constructor(props: MediaQueryProps, context: ContextProps);
|
|
14
16
|
componentDidMount(): void;
|
|
15
17
|
componentWillUnmount(): void;
|
|
16
18
|
componentDidUpdate(props: any): void;
|
package/cjs/shared/MediaQuery.js
CHANGED
|
@@ -81,6 +81,8 @@ var MediaQuery = function (_React$PureComponent) {
|
|
|
81
81
|
|
|
82
82
|
_defineProperty(_assertThisInitialized(_this), "listener", void 0);
|
|
83
83
|
|
|
84
|
+
_defineProperty(_assertThisInitialized(_this), "context", void 0);
|
|
85
|
+
|
|
84
86
|
_defineProperty(_assertThisInitialized(_this), "state", {
|
|
85
87
|
match: null,
|
|
86
88
|
mediaQueryList: null
|
|
@@ -32,6 +32,10 @@ export declare type MediaQueryProperties = {
|
|
|
32
32
|
* If set to true, no MediaQuery will be used.
|
|
33
33
|
*/
|
|
34
34
|
disabled?: boolean;
|
|
35
|
+
/**
|
|
36
|
+
* If set to true, no Eufemia warning will be shown when window.matchMedia is undefined
|
|
37
|
+
*/
|
|
38
|
+
dismissWarning?: boolean;
|
|
35
39
|
/**
|
|
36
40
|
* For debugging
|
|
37
41
|
*/
|
|
@@ -80,7 +84,7 @@ export declare const isMatchMediaSupported: () => boolean;
|
|
|
80
84
|
* @property {boolean} log - print used query to console
|
|
81
85
|
* @returns MediaQueryList type
|
|
82
86
|
*/
|
|
83
|
-
export declare function makeMediaQueryList({ query, when, not, log, disabled, }?: MediaQueryProperties, breakpoints?: MediaQueryBreakpoints): MediaQueryList;
|
|
87
|
+
export declare function makeMediaQueryList({ query, when, not, log, disabled, dismissWarning, }?: MediaQueryProperties, breakpoints?: MediaQueryBreakpoints): MediaQueryList;
|
|
84
88
|
/**
|
|
85
89
|
* Adds a listener to the window.matchMedia Browser API
|
|
86
90
|
*
|
|
@@ -88,7 +92,7 @@ export declare function makeMediaQueryList({ query, when, not, log, disabled, }?
|
|
|
88
92
|
* @param {function} callback callback function
|
|
89
93
|
* @returns function to remove listeners when called
|
|
90
94
|
*/
|
|
91
|
-
export declare function createMediaQueryListener(mediaQueryList: MediaQueryList, callback: (matches: boolean, event:
|
|
95
|
+
export declare function createMediaQueryListener(mediaQueryList: MediaQueryList, callback: (matches: boolean, event: Partial<MediaQueryListEvent>) => void): MediaQueryListener;
|
|
92
96
|
/**
|
|
93
97
|
* Builds a valid media query we can use on window.matchMedia(...)
|
|
94
98
|
*
|
|
@@ -136,11 +136,18 @@ function makeMediaQueryList() {
|
|
|
136
136
|
_ref2$log = _ref2.log,
|
|
137
137
|
log = _ref2$log === void 0 ? false : _ref2$log,
|
|
138
138
|
_ref2$disabled = _ref2.disabled,
|
|
139
|
-
disabled = _ref2$disabled === void 0 ? false : _ref2$disabled
|
|
139
|
+
disabled = _ref2$disabled === void 0 ? false : _ref2$disabled,
|
|
140
|
+
_ref2$dismissWarning = _ref2.dismissWarning,
|
|
141
|
+
dismissWarning = _ref2$dismissWarning === void 0 ? false : _ref2$dismissWarning;
|
|
140
142
|
|
|
141
143
|
var breakpoints = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
|
|
144
|
+
var isSupported = isMatchMediaSupported();
|
|
145
|
+
|
|
146
|
+
if (disabled || !isSupported) {
|
|
147
|
+
if (!dismissWarning && !isSupported) {
|
|
148
|
+
(0, _helpers.warn)('window.matchMedia is "undefined"');
|
|
149
|
+
}
|
|
142
150
|
|
|
143
|
-
if (disabled || !isMatchMediaSupported()) {
|
|
144
151
|
return null;
|
|
145
152
|
}
|
|
146
153
|
|
|
@@ -156,7 +163,7 @@ function makeMediaQueryList() {
|
|
|
156
163
|
var mediaQueryList = window.matchMedia(mediaQueryString);
|
|
157
164
|
|
|
158
165
|
if (log) {
|
|
159
|
-
|
|
166
|
+
(0, _helpers.warn)('MediaQuery:', mediaQueryString);
|
|
160
167
|
}
|
|
161
168
|
|
|
162
169
|
return mediaQueryList;
|
|
@@ -164,7 +171,6 @@ function makeMediaQueryList() {
|
|
|
164
171
|
|
|
165
172
|
function createMediaQueryListener(mediaQueryList, callback) {
|
|
166
173
|
if (!mediaQueryList) {
|
|
167
|
-
(0, _componentHelper.warn)('Invalid MediaQueryList was given');
|
|
168
174
|
return function () {
|
|
169
175
|
return null;
|
|
170
176
|
};
|
package/cjs/shared/index.d.ts
CHANGED
|
@@ -3,4 +3,5 @@ import Context from "./Context";
|
|
|
3
3
|
import Provider from "./Provider";
|
|
4
4
|
import MediaQuery from "./MediaQuery";
|
|
5
5
|
import useMediaQuery from "./useMediaQuery";
|
|
6
|
-
|
|
6
|
+
import useMedia from "./useMedia";
|
|
7
|
+
export { Context, Provider, MediaQuery, useMediaQuery, useMedia };
|
package/cjs/shared/index.js
CHANGED
|
@@ -13,7 +13,8 @@ var _exportNames = {
|
|
|
13
13
|
Context: true,
|
|
14
14
|
Provider: true,
|
|
15
15
|
MediaQuery: true,
|
|
16
|
-
useMediaQuery: true
|
|
16
|
+
useMediaQuery: true,
|
|
17
|
+
useMedia: true
|
|
17
18
|
};
|
|
18
19
|
Object.defineProperty(exports, "Context", {
|
|
19
20
|
enumerable: true,
|
|
@@ -33,6 +34,12 @@ Object.defineProperty(exports, "Provider", {
|
|
|
33
34
|
return _Provider.default;
|
|
34
35
|
}
|
|
35
36
|
});
|
|
37
|
+
Object.defineProperty(exports, "useMedia", {
|
|
38
|
+
enumerable: true,
|
|
39
|
+
get: function get() {
|
|
40
|
+
return _useMedia.default;
|
|
41
|
+
}
|
|
42
|
+
});
|
|
36
43
|
Object.defineProperty(exports, "useMediaQuery", {
|
|
37
44
|
enumerable: true,
|
|
38
45
|
get: function get() {
|
|
@@ -48,6 +55,8 @@ var _MediaQuery = _interopRequireDefault(require("./MediaQuery"));
|
|
|
48
55
|
|
|
49
56
|
var _useMediaQuery = _interopRequireDefault(require("./useMediaQuery"));
|
|
50
57
|
|
|
58
|
+
var _useMedia = _interopRequireDefault(require("./useMedia"));
|
|
59
|
+
|
|
51
60
|
var _SpacingHelper = require("./SpacingHelper");
|
|
52
61
|
|
|
53
62
|
Object.keys(_SpacingHelper).forEach(function (key) {
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { MediaQueryCondition } from './MediaQueryUtils';
|
|
2
|
+
export declare type UseMediaProps = {
|
|
3
|
+
/**
|
|
4
|
+
* If set to true, no MediaQuery will be used.
|
|
5
|
+
* Default: false
|
|
6
|
+
*/
|
|
7
|
+
disabled?: boolean;
|
|
8
|
+
/**
|
|
9
|
+
* For debugging
|
|
10
|
+
*/
|
|
11
|
+
log?: boolean;
|
|
12
|
+
};
|
|
13
|
+
export declare type UseMediaQueries = {
|
|
14
|
+
small: MediaQueryCondition;
|
|
15
|
+
medium: MediaQueryCondition;
|
|
16
|
+
large: MediaQueryCondition;
|
|
17
|
+
};
|
|
18
|
+
export declare const queries: UseMediaQueries;
|
|
19
|
+
export declare type UseMediaResult = {
|
|
20
|
+
isSmall: boolean;
|
|
21
|
+
isMedium: boolean;
|
|
22
|
+
isLarge: boolean;
|
|
23
|
+
isSSR: boolean;
|
|
24
|
+
};
|
|
25
|
+
export default function useMedia(props?: UseMediaProps): UseMediaResult;
|
|
@@ -0,0 +1,185 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
require("core-js/modules/es.symbol.js");
|
|
4
|
+
|
|
5
|
+
require("core-js/modules/es.symbol.description.js");
|
|
6
|
+
|
|
7
|
+
require("core-js/modules/es.symbol.iterator.js");
|
|
8
|
+
|
|
9
|
+
require("core-js/modules/es.array.iterator.js");
|
|
10
|
+
|
|
11
|
+
require("core-js/modules/es.string.iterator.js");
|
|
12
|
+
|
|
13
|
+
require("core-js/modules/web.dom-collections.iterator.js");
|
|
14
|
+
|
|
15
|
+
require("core-js/modules/es.array.slice.js");
|
|
16
|
+
|
|
17
|
+
require("core-js/modules/es.array.from.js");
|
|
18
|
+
|
|
19
|
+
require("core-js/modules/es.regexp.exec.js");
|
|
20
|
+
|
|
21
|
+
require("core-js/modules/es.object.keys.js");
|
|
22
|
+
|
|
23
|
+
require("core-js/modules/es.array.filter.js");
|
|
24
|
+
|
|
25
|
+
require("core-js/modules/es.object.get-own-property-descriptor.js");
|
|
26
|
+
|
|
27
|
+
require("core-js/modules/es.object.get-own-property-descriptors.js");
|
|
28
|
+
|
|
29
|
+
Object.defineProperty(exports, "__esModule", {
|
|
30
|
+
value: true
|
|
31
|
+
});
|
|
32
|
+
exports.default = useMedia;
|
|
33
|
+
exports.queries = void 0;
|
|
34
|
+
|
|
35
|
+
require("core-js/modules/es.array.reduce.js");
|
|
36
|
+
|
|
37
|
+
require("core-js/modules/es.object.to-string.js");
|
|
38
|
+
|
|
39
|
+
require("core-js/modules/es.object.entries.js");
|
|
40
|
+
|
|
41
|
+
require("core-js/modules/es.function.name.js");
|
|
42
|
+
|
|
43
|
+
require("core-js/modules/web.dom-collections.for-each.js");
|
|
44
|
+
|
|
45
|
+
require("core-js/modules/es.object.values.js");
|
|
46
|
+
|
|
47
|
+
var _react = _interopRequireDefault(require("react"));
|
|
48
|
+
|
|
49
|
+
var _Context = _interopRequireDefault(require("./Context"));
|
|
50
|
+
|
|
51
|
+
var _MediaQueryUtils = require("./MediaQueryUtils");
|
|
52
|
+
|
|
53
|
+
var _componentHelper = require("./component-helper");
|
|
54
|
+
|
|
55
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
56
|
+
|
|
57
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
|
|
58
|
+
|
|
59
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
|
60
|
+
|
|
61
|
+
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
62
|
+
|
|
63
|
+
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
64
|
+
|
|
65
|
+
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
66
|
+
|
|
67
|
+
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
68
|
+
|
|
69
|
+
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
|
|
70
|
+
|
|
71
|
+
function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
|
|
72
|
+
|
|
73
|
+
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
74
|
+
|
|
75
|
+
var queries = {
|
|
76
|
+
small: {
|
|
77
|
+
min: 0,
|
|
78
|
+
max: 'small'
|
|
79
|
+
},
|
|
80
|
+
medium: {
|
|
81
|
+
min: 'small',
|
|
82
|
+
max: 'medium'
|
|
83
|
+
},
|
|
84
|
+
large: {
|
|
85
|
+
min: 'medium'
|
|
86
|
+
}
|
|
87
|
+
};
|
|
88
|
+
exports.queries = queries;
|
|
89
|
+
|
|
90
|
+
function useMedia() {
|
|
91
|
+
var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
92
|
+
var disabled = props.disabled,
|
|
93
|
+
log = props.log;
|
|
94
|
+
|
|
95
|
+
var makeResult = function makeResult() {
|
|
96
|
+
return Object.entries(queries).reduce(function (acc, _ref) {
|
|
97
|
+
var _item$mediaQueryList;
|
|
98
|
+
|
|
99
|
+
var _ref2 = _slicedToArray(_ref, 2),
|
|
100
|
+
key = _ref2[0],
|
|
101
|
+
when = _ref2[1];
|
|
102
|
+
|
|
103
|
+
var name = "is".concat((0, _componentHelper.toPascalCase)(key));
|
|
104
|
+
|
|
105
|
+
if (disabled) {
|
|
106
|
+
acc[name] = false;
|
|
107
|
+
return acc;
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
defaults.current[name] = false;
|
|
111
|
+
var item = runQuery({
|
|
112
|
+
name: name,
|
|
113
|
+
when: when
|
|
114
|
+
});
|
|
115
|
+
acc[name] = (item === null || item === void 0 ? void 0 : (_item$mediaQueryList = item.mediaQueryList) === null || _item$mediaQueryList === void 0 ? void 0 : _item$mediaQueryList.matches) || false;
|
|
116
|
+
refs.current[key] = item;
|
|
117
|
+
return acc;
|
|
118
|
+
}, {
|
|
119
|
+
isSSR: !(0, _MediaQueryUtils.isMatchMediaSupported)()
|
|
120
|
+
});
|
|
121
|
+
};
|
|
122
|
+
|
|
123
|
+
var runQuery = function runQuery(_ref3) {
|
|
124
|
+
var when = _ref3.when,
|
|
125
|
+
name = _ref3.name;
|
|
126
|
+
|
|
127
|
+
if (!(0, _MediaQueryUtils.isMatchMediaSupported)()) {
|
|
128
|
+
return;
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
var mediaQueryList = (0, _MediaQueryUtils.makeMediaQueryList)({
|
|
132
|
+
when: when,
|
|
133
|
+
disabled: disabled,
|
|
134
|
+
log: log,
|
|
135
|
+
dismissWarning: true
|
|
136
|
+
}, context.breakpoints);
|
|
137
|
+
var event = (0, _MediaQueryUtils.createMediaQueryListener)(mediaQueryList, function (match) {
|
|
138
|
+
if (!disabledRef.current && match) {
|
|
139
|
+
var state = _objectSpread(_objectSpread({}, defaults.current), {}, {
|
|
140
|
+
isSSR: result.isSSR
|
|
141
|
+
});
|
|
142
|
+
|
|
143
|
+
state[name] = match;
|
|
144
|
+
updateRerender(state);
|
|
145
|
+
}
|
|
146
|
+
});
|
|
147
|
+
return {
|
|
148
|
+
event: event,
|
|
149
|
+
mediaQueryList: mediaQueryList
|
|
150
|
+
};
|
|
151
|
+
};
|
|
152
|
+
|
|
153
|
+
_react.default.useEffect(function () {
|
|
154
|
+
if (disabledRef.current && !disabled) {
|
|
155
|
+
updateRerender(makeResult());
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
disabledRef.current = disabled;
|
|
159
|
+
}, [disabled]);
|
|
160
|
+
|
|
161
|
+
_react.default.useEffect(function () {
|
|
162
|
+
return removeListeners;
|
|
163
|
+
}, []);
|
|
164
|
+
|
|
165
|
+
var context = _react.default.useContext(_Context.default);
|
|
166
|
+
|
|
167
|
+
var refs = _react.default.useRef({});
|
|
168
|
+
|
|
169
|
+
var defaults = _react.default.useRef({});
|
|
170
|
+
|
|
171
|
+
var disabledRef = _react.default.useRef(disabled);
|
|
172
|
+
|
|
173
|
+
var _React$useState = _react.default.useState(makeResult),
|
|
174
|
+
_React$useState2 = _slicedToArray(_React$useState, 2),
|
|
175
|
+
result = _React$useState2[0],
|
|
176
|
+
updateRerender = _React$useState2[1];
|
|
177
|
+
|
|
178
|
+
var removeListeners = function removeListeners() {
|
|
179
|
+
Object.values(refs.current).forEach(function (item) {
|
|
180
|
+
return (item === null || item === void 0 ? void 0 : item.event) && item.event();
|
|
181
|
+
});
|
|
182
|
+
};
|
|
183
|
+
|
|
184
|
+
return result;
|
|
185
|
+
}
|
|
@@ -14,7 +14,7 @@ import Button from '../button/Button';
|
|
|
14
14
|
import Icon from '../../components/Icon';
|
|
15
15
|
import FormStatus from '../../components/FormStatus';
|
|
16
16
|
import ProgressIndicator from '../../components/progress-indicator';
|
|
17
|
-
import P from '
|
|
17
|
+
import P from '../../elements/P';
|
|
18
18
|
import { trash as TrashIcon, exclamation_medium as ExclamationIcon, file_pdf_medium as pdf, file_xls_medium as xls, file_ppt_medium as ppt, file_csv_medium as csv, file_txt_medium as txt, file_xml_medium as xml, file_medium as file } from '../../icons';
|
|
19
19
|
import { getPreviousSibling, warn } from '../../shared/component-helper';
|
|
20
20
|
var images = {
|
|
@@ -5,7 +5,7 @@ import Button from '../button/Button';
|
|
|
5
5
|
import Icon from '../../components/Icon';
|
|
6
6
|
import FormStatus from '../../components/FormStatus';
|
|
7
7
|
import ProgressIndicator from '../../components/progress-indicator';
|
|
8
|
-
import P from '
|
|
8
|
+
import P from '../../elements/P';
|
|
9
9
|
import { trash as TrashIcon, exclamation_medium as ExclamationIcon, file_pdf_medium as pdf, file_xls_medium as xls, file_ppt_medium as ppt, file_csv_medium as csv, file_txt_medium as txt, file_xml_medium as xml, file_medium as file } from '../../icons';
|
|
10
10
|
import { getPreviousSibling, warn } from '../../shared/component-helper';
|
|
11
11
|
const images = {
|
package/es/shared/Eufemia.js
CHANGED
|
@@ -1,16 +1,18 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
+
import { ContextProps } from './Context';
|
|
2
3
|
import { onMediaQueryChange } from './MediaQueryUtils';
|
|
3
4
|
import type { MediaQueryProps, MediaQueryState, MediaQueryListener } from './MediaQueryUtils';
|
|
4
5
|
export type { MediaQueryProps };
|
|
5
6
|
export { onMediaQueryChange };
|
|
6
7
|
export default class MediaQuery extends React.PureComponent<MediaQueryProps, MediaQueryState> {
|
|
7
|
-
static contextType: React.Context<
|
|
8
|
+
static contextType: React.Context<ContextProps>;
|
|
8
9
|
listener: MediaQueryListener;
|
|
10
|
+
context: ContextProps;
|
|
9
11
|
state: {
|
|
10
12
|
match: any;
|
|
11
13
|
mediaQueryList: any;
|
|
12
14
|
};
|
|
13
|
-
constructor(props:
|
|
15
|
+
constructor(props: MediaQueryProps, context: ContextProps);
|
|
14
16
|
componentDidMount(): void;
|
|
15
17
|
componentWillUnmount(): void;
|
|
16
18
|
componentDidUpdate(props: any): void;
|
package/es/shared/MediaQuery.js
CHANGED
|
@@ -32,6 +32,10 @@ export declare type MediaQueryProperties = {
|
|
|
32
32
|
* If set to true, no MediaQuery will be used.
|
|
33
33
|
*/
|
|
34
34
|
disabled?: boolean;
|
|
35
|
+
/**
|
|
36
|
+
* If set to true, no Eufemia warning will be shown when window.matchMedia is undefined
|
|
37
|
+
*/
|
|
38
|
+
dismissWarning?: boolean;
|
|
35
39
|
/**
|
|
36
40
|
* For debugging
|
|
37
41
|
*/
|
|
@@ -80,7 +84,7 @@ export declare const isMatchMediaSupported: () => boolean;
|
|
|
80
84
|
* @property {boolean} log - print used query to console
|
|
81
85
|
* @returns MediaQueryList type
|
|
82
86
|
*/
|
|
83
|
-
export declare function makeMediaQueryList({ query, when, not, log, disabled, }?: MediaQueryProperties, breakpoints?: MediaQueryBreakpoints): MediaQueryList;
|
|
87
|
+
export declare function makeMediaQueryList({ query, when, not, log, disabled, dismissWarning, }?: MediaQueryProperties, breakpoints?: MediaQueryBreakpoints): MediaQueryList;
|
|
84
88
|
/**
|
|
85
89
|
* Adds a listener to the window.matchMedia Browser API
|
|
86
90
|
*
|
|
@@ -88,7 +92,7 @@ export declare function makeMediaQueryList({ query, when, not, log, disabled, }?
|
|
|
88
92
|
* @param {function} callback callback function
|
|
89
93
|
* @returns function to remove listeners when called
|
|
90
94
|
*/
|
|
91
|
-
export declare function createMediaQueryListener(mediaQueryList: MediaQueryList, callback: (matches: boolean, event:
|
|
95
|
+
export declare function createMediaQueryListener(mediaQueryList: MediaQueryList, callback: (matches: boolean, event: Partial<MediaQueryListEvent>) => void): MediaQueryListener;
|
|
92
96
|
/**
|
|
93
97
|
* Builds a valid media query we can use on window.matchMedia(...)
|
|
94
98
|
*
|
|
@@ -4,8 +4,8 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
|
|
|
4
4
|
|
|
5
5
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
|
6
6
|
|
|
7
|
-
import { isTrue, toKebabCase
|
|
8
|
-
import { IS_IE11 } from './helpers';
|
|
7
|
+
import { isTrue, toKebabCase } from './component-helper';
|
|
8
|
+
import { IS_IE11, warn } from './helpers';
|
|
9
9
|
export const defaultBreakpoints = {
|
|
10
10
|
small: '40em',
|
|
11
11
|
medium: '50em',
|
|
@@ -46,9 +46,16 @@ export function makeMediaQueryList({
|
|
|
46
46
|
when,
|
|
47
47
|
not = null,
|
|
48
48
|
log = false,
|
|
49
|
-
disabled = false
|
|
49
|
+
disabled = false,
|
|
50
|
+
dismissWarning = false
|
|
50
51
|
} = {}, breakpoints = null) {
|
|
51
|
-
|
|
52
|
+
const isSupported = isMatchMediaSupported();
|
|
53
|
+
|
|
54
|
+
if (disabled || !isSupported) {
|
|
55
|
+
if (!dismissWarning && !isSupported) {
|
|
56
|
+
warn('window.matchMedia is "undefined"');
|
|
57
|
+
}
|
|
58
|
+
|
|
52
59
|
return null;
|
|
53
60
|
}
|
|
54
61
|
|
|
@@ -64,14 +71,13 @@ export function makeMediaQueryList({
|
|
|
64
71
|
const mediaQueryList = window.matchMedia(mediaQueryString);
|
|
65
72
|
|
|
66
73
|
if (log) {
|
|
67
|
-
|
|
74
|
+
warn('MediaQuery:', mediaQueryString);
|
|
68
75
|
}
|
|
69
76
|
|
|
70
77
|
return mediaQueryList;
|
|
71
78
|
}
|
|
72
79
|
export function createMediaQueryListener(mediaQueryList, callback) {
|
|
73
80
|
if (!mediaQueryList) {
|
|
74
|
-
warn('Invalid MediaQueryList was given');
|
|
75
81
|
return () => null;
|
|
76
82
|
}
|
|
77
83
|
|
package/es/shared/index.d.ts
CHANGED
|
@@ -3,4 +3,5 @@ import Context from "./Context";
|
|
|
3
3
|
import Provider from "./Provider";
|
|
4
4
|
import MediaQuery from "./MediaQuery";
|
|
5
5
|
import useMediaQuery from "./useMediaQuery";
|
|
6
|
-
|
|
6
|
+
import useMedia from "./useMedia";
|
|
7
|
+
export { Context, Provider, MediaQuery, useMediaQuery, useMedia };
|
package/es/shared/index.js
CHANGED
|
@@ -2,5 +2,6 @@ import Context from './Context';
|
|
|
2
2
|
import Provider from './Provider';
|
|
3
3
|
import MediaQuery from './MediaQuery';
|
|
4
4
|
import useMediaQuery from './useMediaQuery';
|
|
5
|
+
import useMedia from './useMedia';
|
|
5
6
|
export * from './SpacingHelper';
|
|
6
|
-
export { Context, Provider, MediaQuery, useMediaQuery };
|
|
7
|
+
export { Context, Provider, MediaQuery, useMediaQuery, useMedia };
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { MediaQueryCondition } from './MediaQueryUtils';
|
|
2
|
+
export declare type UseMediaProps = {
|
|
3
|
+
/**
|
|
4
|
+
* If set to true, no MediaQuery will be used.
|
|
5
|
+
* Default: false
|
|
6
|
+
*/
|
|
7
|
+
disabled?: boolean;
|
|
8
|
+
/**
|
|
9
|
+
* For debugging
|
|
10
|
+
*/
|
|
11
|
+
log?: boolean;
|
|
12
|
+
};
|
|
13
|
+
export declare type UseMediaQueries = {
|
|
14
|
+
small: MediaQueryCondition;
|
|
15
|
+
medium: MediaQueryCondition;
|
|
16
|
+
large: MediaQueryCondition;
|
|
17
|
+
};
|
|
18
|
+
export declare const queries: UseMediaQueries;
|
|
19
|
+
export declare type UseMediaResult = {
|
|
20
|
+
isSmall: boolean;
|
|
21
|
+
isMedium: boolean;
|
|
22
|
+
isLarge: boolean;
|
|
23
|
+
isSSR: boolean;
|
|
24
|
+
};
|
|
25
|
+
export default function useMedia(props?: UseMediaProps): UseMediaResult;
|