@prom-ui/core 0.0.23 → 0.0.24
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/Body/package.json +1 -1
- package/Box/package.json +1 -1
- package/Button/package.json +1 -1
- package/ButtonPageUp/package.json +1 -1
- package/Checkbox/package.json +1 -1
- package/Flex/package.json +1 -1
- package/Grid/package.json +1 -1
- package/Icon/package.json +1 -1
- package/Image/package.json +1 -1
- package/ImageEmoji/package.json +1 -1
- package/Input/package.json +1 -1
- package/KeyPress/package.json +1 -1
- package/Line/package.json +1 -1
- package/Link/package.json +1 -1
- package/List/package.json +1 -1
- package/Media/breakpoints.d.ts +17 -0
- package/Media/context.d.ts +8 -0
- package/Media/index.d.ts +14 -0
- package/Media/index.js +75 -0
- package/Media/package.json +12 -0
- package/OutsideClick/package.json +1 -1
- package/Picture/package.json +1 -1
- package/PortableOverlay/package.json +1 -1
- package/Portal/package.json +1 -1
- package/Rating/package.json +1 -1
- package/SafeQuery/package.json +1 -1
- package/Scroll/package.json +1 -1
- package/ScrollControls/package.json +1 -1
- package/SideOverlay/package.json +1 -1
- package/SimpleSlider/package.json +1 -1
- package/Skeleton/package.json +1 -1
- package/Spinner/package.json +1 -1
- package/Text/package.json +1 -1
- package/TextEmoji/package.json +1 -1
- package/Tumbler/package.json +1 -1
- package/package.json +3 -2
package/Body/package.json
CHANGED
package/Box/package.json
CHANGED
package/Button/package.json
CHANGED
package/Checkbox/package.json
CHANGED
package/Flex/package.json
CHANGED
package/Grid/package.json
CHANGED
package/Icon/package.json
CHANGED
package/Image/package.json
CHANGED
package/ImageEmoji/package.json
CHANGED
package/Input/package.json
CHANGED
package/KeyPress/package.json
CHANGED
package/Line/package.json
CHANGED
package/Link/package.json
CHANGED
package/List/package.json
CHANGED
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
export declare const MIN_SCREEN_WIDTH = 1;
|
|
2
|
+
export declare const SCREEN_BREAKPOINTS: {
|
|
3
|
+
small: number;
|
|
4
|
+
medium: number;
|
|
5
|
+
large: number;
|
|
6
|
+
wide: number;
|
|
7
|
+
huge: number;
|
|
8
|
+
};
|
|
9
|
+
export declare type tSCREEN_BREAKPOINTS = keyof typeof SCREEN_BREAKPOINTS;
|
|
10
|
+
export declare const SCREEN_BREAKPOINTS_PROXY: {
|
|
11
|
+
small: number;
|
|
12
|
+
medium: number;
|
|
13
|
+
large: number;
|
|
14
|
+
wide: number;
|
|
15
|
+
huge: number;
|
|
16
|
+
};
|
|
17
|
+
export declare const getBreakPoint: (key: tSCREEN_BREAKPOINTS) => number;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { tSCREEN_BREAKPOINTS } from './breakpoints';
|
|
3
|
+
export declare type tMediaProviderProps = {
|
|
4
|
+
children?: React.ReactNode;
|
|
5
|
+
resetOnMount?: boolean;
|
|
6
|
+
width?: tSCREEN_BREAKPOINTS;
|
|
7
|
+
};
|
|
8
|
+
export declare const MediaProvider: React.FC<tMediaProviderProps>;
|
package/Media/index.d.ts
ADDED
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { tSCREEN_BREAKPOINTS } from './breakpoints';
|
|
3
|
+
declare type tUseMedia = (arg: {
|
|
4
|
+
minWidth?: tSCREEN_BREAKPOINTS;
|
|
5
|
+
maxWidth?: tSCREEN_BREAKPOINTS;
|
|
6
|
+
}) => boolean;
|
|
7
|
+
export declare const useMedia: tUseMedia;
|
|
8
|
+
declare type tMedia = (props: {
|
|
9
|
+
minWidth?: tSCREEN_BREAKPOINTS;
|
|
10
|
+
maxWidth?: tSCREEN_BREAKPOINTS;
|
|
11
|
+
children?: React.ReactNode;
|
|
12
|
+
}) => React.ReactNode;
|
|
13
|
+
export declare const Media: tMedia;
|
|
14
|
+
export {};
|
package/Media/index.js
ADDED
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var reactResponsive = require('react-responsive');
|
|
6
|
+
|
|
7
|
+
var MIN_SCREEN_WIDTH = 1;
|
|
8
|
+
var SCREEN_BREAKPOINTS = {
|
|
9
|
+
small: 480,
|
|
10
|
+
medium: 768,
|
|
11
|
+
large: 960,
|
|
12
|
+
wide: 1200,
|
|
13
|
+
huge: 1400
|
|
14
|
+
};
|
|
15
|
+
var SCREEN_BREAKPOINTS_PROXY = new Proxy(SCREEN_BREAKPOINTS, {
|
|
16
|
+
get: function (target, key) {
|
|
17
|
+
if (!target.hasOwnProperty(key)) {
|
|
18
|
+
var keyListStr = JSON.stringify(Object.keys(target));
|
|
19
|
+
throw new Error("Media received unknown width \"".concat(key, "\". You should use one of ").concat(keyListStr));
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
return target[key];
|
|
23
|
+
}
|
|
24
|
+
});
|
|
25
|
+
var getBreakPoint = function (key) {
|
|
26
|
+
// Use proxy in debug mode, to ensure that we are reading only existing breakpoints
|
|
27
|
+
if (process.env.NODE_ENV !== 'production') {
|
|
28
|
+
return SCREEN_BREAKPOINTS_PROXY[key];
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
return SCREEN_BREAKPOINTS[key];
|
|
32
|
+
};
|
|
33
|
+
|
|
34
|
+
// import PropTypes from 'prop-types';
|
|
35
|
+
var useMedia = function (_a) {
|
|
36
|
+
var minWidth = _a.minWidth,
|
|
37
|
+
maxWidth = _a.maxWidth;
|
|
38
|
+
return reactResponsive.useMediaQuery({
|
|
39
|
+
minWidth: minWidth ? getBreakPoint(minWidth) : MIN_SCREEN_WIDTH,
|
|
40
|
+
maxWidth: maxWidth ? getBreakPoint(maxWidth) - 1 : undefined
|
|
41
|
+
});
|
|
42
|
+
};
|
|
43
|
+
var Media = function (_a) {
|
|
44
|
+
var minWidth = _a.minWidth,
|
|
45
|
+
maxWidth = _a.maxWidth,
|
|
46
|
+
children = _a.children;
|
|
47
|
+
var matchMedia = useMedia({
|
|
48
|
+
minWidth: minWidth,
|
|
49
|
+
maxWidth: maxWidth
|
|
50
|
+
});
|
|
51
|
+
|
|
52
|
+
if (matchMedia) {
|
|
53
|
+
return children;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
return null;
|
|
57
|
+
}; // Media.propTypes = {
|
|
58
|
+
// minWidth: PropTypes.oneOf([
|
|
59
|
+
// 'small',
|
|
60
|
+
// 'medium',
|
|
61
|
+
// 'large',
|
|
62
|
+
// 'wide',
|
|
63
|
+
// 'huge',
|
|
64
|
+
// ]),
|
|
65
|
+
// maxWidth: PropTypes.oneOf([
|
|
66
|
+
// 'small',
|
|
67
|
+
// 'medium',
|
|
68
|
+
// 'large',
|
|
69
|
+
// 'wide',
|
|
70
|
+
// 'huge',
|
|
71
|
+
// ]),
|
|
72
|
+
// };
|
|
73
|
+
|
|
74
|
+
exports.Media = Media;
|
|
75
|
+
exports.useMedia = useMedia;
|
package/Picture/package.json
CHANGED
package/Portal/package.json
CHANGED
package/Rating/package.json
CHANGED
package/SafeQuery/package.json
CHANGED
package/Scroll/package.json
CHANGED
package/SideOverlay/package.json
CHANGED
package/Skeleton/package.json
CHANGED
package/Spinner/package.json
CHANGED
package/Text/package.json
CHANGED
package/TextEmoji/package.json
CHANGED
package/Tumbler/package.json
CHANGED
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@prom-ui/core",
|
|
3
3
|
"author": "e.marchenko",
|
|
4
|
-
"version": "0.0.
|
|
4
|
+
"version": "0.0.24",
|
|
5
5
|
"description": "core ui blocks",
|
|
6
6
|
"scripts": {
|
|
7
7
|
"prebuild": "node ./preBuild.js",
|
|
@@ -47,6 +47,7 @@
|
|
|
47
47
|
"intersection-observer": "^0.12.0",
|
|
48
48
|
"react-easy-swipe": "^0.0.22",
|
|
49
49
|
"react-popper-tooltip": "2.10.1",
|
|
50
|
+
"react-responsive": "^8.1.0",
|
|
50
51
|
"react-scrolllock": "^5.0.1",
|
|
51
52
|
"react-transition-group": "^4.4.2",
|
|
52
53
|
"ts-debounce": "^4.0.0",
|
|
@@ -63,5 +64,5 @@
|
|
|
63
64
|
"optional": true
|
|
64
65
|
}
|
|
65
66
|
},
|
|
66
|
-
"gitHead": "
|
|
67
|
+
"gitHead": "cad8a8b8433c057f5c01d75816050232094af394"
|
|
67
68
|
}
|