1 | "use strict";
|
2 |
|
3 | exports.__esModule = true;
|
4 | exports.createBreakpointHook = createBreakpointHook;
|
5 | exports.default = void 0;
|
6 |
|
7 | var _useMediaQuery = _interopRequireDefault(require("./useMediaQuery"));
|
8 |
|
9 | var _react = require("react");
|
10 |
|
11 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
12 |
|
13 |
|
14 |
|
15 |
|
16 |
|
17 |
|
18 |
|
19 |
|
20 |
|
21 |
|
22 |
|
23 |
|
24 |
|
25 |
|
26 |
|
27 |
|
28 |
|
29 |
|
30 |
|
31 |
|
32 |
|
33 |
|
34 |
|
35 | function createBreakpointHook(breakpointValues) {
|
36 | var names = Object.keys(breakpointValues);
|
37 |
|
38 | function and(query, next) {
|
39 | if (query === next) {
|
40 | return next;
|
41 | }
|
42 |
|
43 | return query ? query + " and " + next : next;
|
44 | }
|
45 |
|
46 | function getNext(breakpoint) {
|
47 | return names[Math.min(names.indexOf(breakpoint) + 1, names.length - 1)];
|
48 | }
|
49 |
|
50 | function getMaxQuery(breakpoint) {
|
51 | var next = getNext(breakpoint);
|
52 | var value = breakpointValues[next];
|
53 | if (typeof value === 'number') value = value - 0.2 + "px";else value = "calc(" + value + " - 0.2px)";
|
54 | return "(max-width: " + value + ")";
|
55 | }
|
56 |
|
57 | function getMinQuery(breakpoint) {
|
58 | var value = breakpointValues[breakpoint];
|
59 |
|
60 | if (typeof value === 'number') {
|
61 | value = value + "px";
|
62 | }
|
63 |
|
64 | return "(min-width: " + value + ")";
|
65 | }
|
66 | |
67 |
|
68 |
|
69 |
|
70 |
|
71 |
|
72 |
|
73 |
|
74 |
|
75 |
|
76 |
|
77 |
|
78 |
|
79 |
|
80 |
|
81 |
|
82 |
|
83 | function useBreakpoint(breakpointOrMap, direction, window) {
|
84 | var breakpointMap;
|
85 |
|
86 | if (typeof breakpointOrMap === 'object') {
|
87 | breakpointMap = breakpointOrMap;
|
88 | window = direction;
|
89 | direction = true;
|
90 | } else {
|
91 | var _breakpointMap;
|
92 |
|
93 | direction = direction || true;
|
94 | breakpointMap = (_breakpointMap = {}, _breakpointMap[breakpointOrMap] = direction, _breakpointMap);
|
95 | }
|
96 |
|
97 | var query = (0, _react.useMemo)(function () {
|
98 | return Object.entries(breakpointMap).reduce(function (query, _ref) {
|
99 | var key = _ref[0],
|
100 | direction = _ref[1];
|
101 |
|
102 | if (direction === 'up' || direction === true) {
|
103 | query = and(query, getMinQuery(key));
|
104 | }
|
105 |
|
106 | if (direction === 'down' || direction === true) {
|
107 | query = and(query, getMaxQuery(key));
|
108 | }
|
109 |
|
110 | return query;
|
111 | }, '');
|
112 | }, [JSON.stringify(breakpointMap)]);
|
113 | return (0, _useMediaQuery.default)(query, window);
|
114 | }
|
115 |
|
116 | return useBreakpoint;
|
117 | }
|
118 |
|
119 | var useBreakpoint = createBreakpointHook({
|
120 | xs: 0,
|
121 | sm: 576,
|
122 | md: 768,
|
123 | lg: 992,
|
124 | xl: 1200,
|
125 | xxl: 1400
|
126 | });
|
127 | var _default = useBreakpoint;
|
128 | exports.default = _default; |
\ | No newline at end of file |