1 | "use strict";
|
2 |
|
3 | Object.defineProperty(exports, "__esModule", {
|
4 | value: true
|
5 | });
|
6 | exports.withBreakpoints = exports.Responsive = exports.ResponsiveConsumer = exports.ResponsiveWrapper = void 0;
|
7 |
|
8 | var _react = _interopRequireWildcard(require("react"));
|
9 |
|
10 | var _propTypes = _interopRequireDefault(require("prop-types"));
|
11 |
|
12 | var _breakpoints = require("../helpers/breakpoints");
|
13 |
|
14 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
15 |
|
16 | function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
|
17 |
|
18 | function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
|
19 |
|
20 | function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }
|
21 |
|
22 | 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; }
|
23 |
|
24 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
25 |
|
26 | function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
|
27 |
|
28 | function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
|
29 |
|
30 | function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
|
31 |
|
32 | function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
|
33 |
|
34 | function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
|
35 |
|
36 | function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
|
37 |
|
38 | function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
|
39 |
|
40 | function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
41 |
|
42 | var initialBreakpoint = {
|
43 | name: 'default',
|
44 | value: 0
|
45 | };
|
46 |
|
47 | var _React$createContext = _react.default.createContext(initialBreakpoint),
|
48 | Provider = _React$createContext.Provider,
|
49 | Consumer = _React$createContext.Consumer;
|
50 |
|
51 | var ResponsiveConsumer = Consumer;
|
52 | exports.ResponsiveConsumer = ResponsiveConsumer;
|
53 |
|
54 | var withBreakpoints = function withBreakpoints(Comp) {
|
55 | return function (props) {
|
56 | return _react.default.createElement(ResponsiveConsumer, null, function (breakpoint) {
|
57 | return _react.default.createElement(Comp, _extends({
|
58 | breakpoint: breakpoint,
|
59 | isGreaterThan: function isGreaterThan(value) {
|
60 | return breakpointIsGreaterThan(value, breakpoint.value);
|
61 | },
|
62 | isLessThan: function isLessThan(value) {
|
63 | return breakpointIsLessThan(value, breakpoint.value);
|
64 | }
|
65 | }, props));
|
66 | });
|
67 | };
|
68 | };
|
69 |
|
70 | exports.withBreakpoints = withBreakpoints;
|
71 |
|
72 | var ResponsiveWrapper =
|
73 |
|
74 | function (_Component) {
|
75 | _inherits(ResponsiveWrapper, _Component);
|
76 |
|
77 | function ResponsiveWrapper(props) {
|
78 | var _this;
|
79 |
|
80 | _classCallCheck(this, ResponsiveWrapper);
|
81 |
|
82 | _this = _possibleConstructorReturn(this, _getPrototypeOf(ResponsiveWrapper).call(this, props));
|
83 | _this.state = _objectSpread({}, initialBreakpoint);
|
84 | _this.mediaQueries = [];
|
85 | return _this;
|
86 | }
|
87 |
|
88 | _createClass(ResponsiveWrapper, [{
|
89 | key: "componentDidMount",
|
90 | value: function componentDidMount() {
|
91 | var _this2 = this;
|
92 |
|
93 | this.mediaQueries = Object.keys(_breakpoints.breakpoints).map(function (key) {
|
94 | var query = window.matchMedia("(min-width: ".concat(_breakpoints.breakpoints[key], "px)"));
|
95 | query.breakpoint = _breakpoints.breakpoints[key];
|
96 | query.name = key;
|
97 | query.addListener(function () {
|
98 | return _this2.dispatchActiveQuery();
|
99 | });
|
100 | return query;
|
101 | });
|
102 | this.dispatchActiveQuery();
|
103 | }
|
104 | }, {
|
105 | key: "componentWillUnmount",
|
106 | value: function componentWillUnmount() {
|
107 | var _this3 = this;
|
108 |
|
109 | var _iteratorNormalCompletion = true;
|
110 | var _didIteratorError = false;
|
111 | var _iteratorError = undefined;
|
112 |
|
113 | try {
|
114 | for (var _iterator = this.mediaQueries[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
|
115 | var query = _step.value;
|
116 | query.removeListener(function () {
|
117 | return _this3.dispatchActiveQuery();
|
118 | });
|
119 | }
|
120 | } catch (err) {
|
121 | _didIteratorError = true;
|
122 | _iteratorError = err;
|
123 | } finally {
|
124 | try {
|
125 | if (!_iteratorNormalCompletion && _iterator.return != null) {
|
126 | _iterator.return();
|
127 | }
|
128 | } finally {
|
129 | if (_didIteratorError) {
|
130 | throw _iteratorError;
|
131 | }
|
132 | }
|
133 | }
|
134 | }
|
135 | }, {
|
136 | key: "dispatchActiveQuery",
|
137 | value: function dispatchActiveQuery() {
|
138 | var activeQuery = this.mediaQueries.reduce(function (prev, curr) {
|
139 | return curr.matches ? curr : prev && prev.matches ? prev : null;
|
140 | });
|
141 | var breakpointName = activeQuery ? activeQuery.name : 'default';
|
142 | var breakpointSize = activeQuery && activeQuery.breakpoint;
|
143 | this.setState({
|
144 | name: breakpointName,
|
145 | value: breakpointSize
|
146 | });
|
147 | }
|
148 | }, {
|
149 | key: "render",
|
150 | value: function render() {
|
151 | return _react.default.createElement(Provider, {
|
152 | value: _objectSpread({}, this.state)
|
153 | }, _react.default.createElement(_react.Fragment, null, this.props.children));
|
154 | }
|
155 | }]);
|
156 |
|
157 | return ResponsiveWrapper;
|
158 | }(_react.Component);
|
159 |
|
160 | exports.ResponsiveWrapper = ResponsiveWrapper;
|
161 | var propTypes = {
|
162 | unmount: _propTypes.default.bool,
|
163 | showFor: _propTypes.default.oneOf(['small', 'medium', 'large', 'xlarge']),
|
164 | hideFor: _propTypes.default.oneOf(['small', 'medium', 'large', 'xlarge']),
|
165 | children: _propTypes.default.any
|
166 | };
|
167 |
|
168 | var Responsive =
|
169 |
|
170 | function (_Component2) {
|
171 | _inherits(Responsive, _Component2);
|
172 |
|
173 | function Responsive() {
|
174 | _classCallCheck(this, Responsive);
|
175 |
|
176 | return _possibleConstructorReturn(this, _getPrototypeOf(Responsive).apply(this, arguments));
|
177 | }
|
178 |
|
179 | _createClass(Responsive, [{
|
180 | key: "render",
|
181 | value: function render() {
|
182 | var _this$props = this.props,
|
183 | unmount = _this$props.unmount,
|
184 | showFor = _this$props.showFor,
|
185 | hideFor = _this$props.hideFor,
|
186 | children = _this$props.children;
|
187 |
|
188 | var content = function content(breakpoint) {
|
189 | if (showFor && breakpointIsLessThan(showFor, breakpoint.value) || hideFor && breakpointIsGreaterThan(hideFor, breakpoint.value)) {
|
190 | if (unmount) {
|
191 | return null;
|
192 | } else {
|
193 | return _react.default.createElement("div", {
|
194 | style: {
|
195 | display: 'none'
|
196 | }
|
197 | }, children);
|
198 | }
|
199 | } else {
|
200 | return children;
|
201 | }
|
202 | };
|
203 |
|
204 | return _react.default.createElement(Consumer, null, function (breakpoint) {
|
205 | return content(breakpoint);
|
206 | });
|
207 | }
|
208 | }]);
|
209 |
|
210 | return Responsive;
|
211 | }(_react.Component);
|
212 |
|
213 | exports.Responsive = Responsive;
|
214 | Responsive.propTypes = propTypes;
|
215 |
|
216 | var breakpointIsGreaterThan = function breakpointIsGreaterThan(breakpointToCompare, currentBreakpointSize) {
|
217 | var comparison = typeof breakpointToCompare === 'string' ? _breakpoints.breakpoints[breakpointToCompare] : breakpointToCompare;
|
218 | return currentBreakpointSize === null || currentBreakpointSize >= comparison;
|
219 | };
|
220 |
|
221 | var breakpointIsLessThan = function breakpointIsLessThan(breakpointToCompare, currentBreakpointSize) {
|
222 | var comparison = typeof breakpointToCompare === 'string' ? _breakpoints.breakpoints[breakpointToCompare] : breakpointToCompare;
|
223 | return currentBreakpointSize !== null && currentBreakpointSize < comparison;
|
224 | }; |
\ | No newline at end of file |