@uncinc/uncinc-react-kitchen-sink 2.7.8 → 2.7.10
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/dist/Context/KitchenSinkComponentMapperContext.js +3 -11
- package/dist/Context/ViewportContext.js +8 -21
- package/dist/Context/withMapping.js +6 -17
- package/dist/components/AbbreviationAnnotation/index.js +17 -28
- package/dist/components/Accordion/AccordionItem/index.js +19 -27
- package/dist/components/Accordion/AccordionItemVariant/index.js +14 -25
- package/dist/components/Accordion/index.js +6 -14
- package/dist/components/ApiAutocomplete/index.js +7 -17
- package/dist/components/Button/index.js +22 -31
- package/dist/components/CallToAction/index.js +12 -20
- package/dist/components/Cookie/Checkbox/index.js +6 -14
- package/dist/components/Cookie/index.js +59 -69
- package/dist/components/Dialog/DialogHelpersStory/index.js +13 -25
- package/dist/components/Dialog/DialogHookStory/index.js +12 -21
- package/dist/components/Dialog/DialogOverrideStory/index.js +9 -18
- package/dist/components/Dialog/index.js +35 -46
- package/dist/components/Download/index.js +14 -22
- package/dist/components/FontSizeSwitcher/index.js +17 -28
- package/dist/components/Form/Checkbox/index.js +18 -27
- package/dist/components/Form/Checkboxes/index.js +23 -31
- package/dist/components/Form/DateField/index.js +6 -14
- package/dist/components/Form/DatePicker/index.js +16 -24
- package/dist/components/Form/DatePickerRange/Picker/index.js +18 -26
- package/dist/components/Form/DatePickerRange/index.js +37 -47
- package/dist/components/Form/DateSelect/index.js +22 -33
- package/dist/components/Form/Email/index.js +4 -12
- package/dist/components/Form/FormikWrapper/index.js +13 -24
- package/dist/components/Form/GenericFormElement/index.js +14 -22
- package/dist/components/Form/Number/index.js +6 -14
- package/dist/components/Form/RadioButtons/index.js +23 -31
- package/dist/components/Form/SearchField/index.js +14 -22
- package/dist/components/Form/Select/Input/index.js +15 -23
- package/dist/components/Form/Select/index.js +12 -20
- package/dist/components/Form/TextField/index.js +16 -25
- package/dist/components/Form/Textarea/index.js +14 -22
- package/dist/components/Form/commonTests.js +19 -32
- package/dist/components/Form/index.js +13 -97
- package/dist/components/Hamburger/index.js +7 -15
- package/dist/components/Header/index.js +23 -38
- package/dist/components/Icon/index.js +9 -17
- package/dist/components/Image/AdaptivePicture/index.js +16 -23
- package/dist/components/Image/Background/index.js +10 -21
- package/dist/components/Image/LazyLoadWrapper/index.js +16 -26
- package/dist/components/Image/Picture/index.js +25 -33
- package/dist/components/Image/helpers/index.js +11 -21
- package/dist/components/Image/index.js +16 -24
- package/dist/components/InlineMenu/index.d.ts +1 -1
- package/dist/components/InlineMenu/index.js +27 -38
- package/dist/components/Layout/Container/index.js +13 -21
- package/dist/components/Layout/QuickLayout/Auto/index.js +5 -13
- package/dist/components/Layout/QuickLayout/Center/index.js +6 -14
- package/dist/components/Layout/QuickLayout/Clamp/index.js +5 -13
- package/dist/components/Layout/QuickLayout/Sidebar/index.js +6 -14
- package/dist/components/Layout/QuickLayout/SpaceBetween/index.js +6 -14
- package/dist/components/Layout/QuickLayout/Stack/index.js +6 -14
- package/dist/components/Layout/QuickLayout/Wrap/index.js +7 -15
- package/dist/components/Layout/QuickLayout/index.js +16 -24
- package/dist/components/Lottie/LottieAnimation/index.js +12 -23
- package/dist/components/Lottie/LottieAnimationWithMousePosition.js +8 -19
- package/dist/components/Lottie/index.js +29 -41
- package/dist/components/MagicLine/index.js +12 -23
- package/dist/components/MediaPlayer/index.js +19 -28
- package/dist/components/MediaPlayer/types.js +1 -1
- package/dist/components/NavigationScroll/index.js +11 -21
- package/dist/components/Pagination/index.js +28 -37
- package/dist/components/SearchKit/Facets/ChipFacet/index.js +11 -20
- package/dist/components/SearchKit/Facets/ListFacet/index.js +11 -20
- package/dist/components/SearchKit/Facets/SelectFacet/index.js +15 -24
- package/dist/components/SearchKit/Query/index.js +13 -24
- package/dist/components/SearchKit/SearchFacets/index.js +10 -18
- package/dist/components/SearchKit/SearchField/index.js +12 -23
- package/dist/components/SearchKit/SearchLoadMore/index.js +7 -15
- package/dist/components/SearchKit/SearchPage/index.js +8 -17
- package/dist/components/SearchKit/SearchPagination/index.js +6 -14
- package/dist/components/SearchKit/SearchReset/index.js +8 -16
- package/dist/components/SearchKit/SearchResults/index.js +28 -39
- package/dist/components/SearchKit/SearchSelectedFilters/Filters/CustomValue/index.js +6 -14
- package/dist/components/SearchKit/SearchSelectedFilters/Filters/DateRange/index.js +6 -14
- package/dist/components/SearchKit/SearchSelectedFilters/Filters/NumericRange/index.js +6 -14
- package/dist/components/SearchKit/SearchSelectedFilters/Filters/Value/index.js +7 -18
- package/dist/components/SearchKit/SearchSelectedFilters/index.js +18 -26
- package/dist/components/SearchKit/SearchSorting/index.js +9 -17
- package/dist/components/SearchKit/index.js +29 -40
- package/dist/components/Share/index.js +18 -26
- package/dist/components/Sliders/SliderRelated/index.js +11 -19
- package/dist/components/TableRender/index.js +12 -23
- package/dist/components/Tag/index.js +10 -18
- package/dist/components/TitleWithText/index.js +8 -16
- package/dist/components/WysiwygField/index.js +10 -18
- package/dist/components/index.js +17 -127
- package/dist/config/constants.js +17 -37
- package/dist/config/i18next/index.js +9 -17
- package/dist/custom.d.js +0 -1
- package/dist/helpers/date.js +4 -13
- package/dist/helpers/gtm.js +4 -11
- package/dist/helpers/link.js +4 -12
- package/dist/helpers/useValueForCurrentViewPort.js +6 -13
- package/dist/hooks/useBoolean.js +6 -12
- package/dist/hooks/useClickOutside.js +3 -9
- package/dist/hooks/useDialog.js +6 -13
- package/dist/hooks/useDialogHelpers.js +11 -18
- package/dist/hooks/useEscape.js +3 -9
- package/dist/hooks/useOnScreen.js +4 -10
- package/dist/hooks/usePrevious.js +4 -10
- package/dist/hooks/useScrollPosition.js +4 -11
- package/dist/hooks/useTrapFocus.js +3 -9
- package/dist/hooks/useWindowDimensions.js +4 -10
- package/dist/index.js +89 -564
- package/dist/organisms/Downloads/index.js +10 -18
- package/dist/organisms/ImageGrid/index.js +5 -13
- package/dist/organisms/Quote/index.js +16 -24
- package/dist/organisms/Text/index.js +20 -31
- package/dist/setupTests.js +2 -5
- package/package.json +9 -3
|
@@ -1,25 +1,15 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
|
|
4
|
-
Object.defineProperty(exports, "__esModule", {
|
|
5
|
-
value: true
|
|
6
|
-
});
|
|
7
|
-
exports.default = void 0;
|
|
8
|
-
var _react = _interopRequireWildcard(require("react"));
|
|
9
|
-
var _classnames = _interopRequireDefault(require("classnames"));
|
|
10
|
-
var _Container = _interopRequireDefault(require("../Layout/Container"));
|
|
11
|
-
var _Hamburger = _interopRequireDefault(require("../Hamburger"));
|
|
12
|
-
var _NavigationScroll = _interopRequireDefault(require("../NavigationScroll"));
|
|
13
|
-
require("./style.scss");
|
|
14
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
15
|
-
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
16
|
-
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
17
1
|
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
18
2
|
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."); }
|
|
19
3
|
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); }
|
|
20
4
|
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; }
|
|
21
5
|
function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
|
|
22
6
|
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
7
|
+
import React, { useState } from 'react';
|
|
8
|
+
import classnames from 'classnames';
|
|
9
|
+
import Container from '../Layout/Container';
|
|
10
|
+
import Hamburger from '../Hamburger';
|
|
11
|
+
import NavigationScroll from '../NavigationScroll';
|
|
12
|
+
import './style.scss';
|
|
23
13
|
var Header = function Header(_ref) {
|
|
24
14
|
var logo = _ref.logo,
|
|
25
15
|
menu = _ref.menu,
|
|
@@ -27,7 +17,7 @@ var Header = function Header(_ref) {
|
|
|
27
17
|
forceHamburger = _ref.forceHamburger,
|
|
28
18
|
withAnimation = _ref.withAnimation,
|
|
29
19
|
customHamburger = _ref.customHamburger;
|
|
30
|
-
var _useState =
|
|
20
|
+
var _useState = useState({
|
|
31
21
|
visible: false,
|
|
32
22
|
reachedTop: true,
|
|
33
23
|
scrolledPastNavHeight: true
|
|
@@ -35,25 +25,21 @@ var Header = function Header(_ref) {
|
|
|
35
25
|
_useState2 = _slicedToArray(_useState, 2),
|
|
36
26
|
state = _useState2[0],
|
|
37
27
|
setState = _useState2[1];
|
|
38
|
-
var _React$useState =
|
|
28
|
+
var _React$useState = React.useState(false),
|
|
39
29
|
_React$useState2 = _slicedToArray(_React$useState, 2),
|
|
40
30
|
active = _React$useState2[0],
|
|
41
31
|
setActive = _React$useState2[1];
|
|
42
|
-
var className = (
|
|
32
|
+
var className = classnames('Header', {
|
|
43
33
|
'Header--default': !forceHamburger,
|
|
44
34
|
'Header--force-hamburger': forceHamburger,
|
|
45
35
|
'show-nav': active
|
|
46
36
|
});
|
|
47
37
|
if (forceHamburger) {
|
|
48
|
-
|
|
49
|
-
return _interopRequireWildcard(require('./style-force-hamburger.scss'));
|
|
50
|
-
}).then(function () {
|
|
38
|
+
import('./style-force-hamburger.scss').then(function () {
|
|
51
39
|
// Do nothing.
|
|
52
40
|
});
|
|
53
41
|
} else {
|
|
54
|
-
|
|
55
|
-
return _interopRequireWildcard(require('./style-default.scss'));
|
|
56
|
-
}).then(function () {
|
|
42
|
+
import('./style-default.scss').then(function () {
|
|
57
43
|
// Do nothing.
|
|
58
44
|
});
|
|
59
45
|
}
|
|
@@ -67,29 +53,29 @@ var Header = function Header(_ref) {
|
|
|
67
53
|
});
|
|
68
54
|
}
|
|
69
55
|
};
|
|
70
|
-
var headerComponent = /*#__PURE__*/
|
|
56
|
+
var headerComponent = /*#__PURE__*/React.createElement("header", {
|
|
71
57
|
className: className
|
|
72
|
-
}, /*#__PURE__*/
|
|
58
|
+
}, /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement("div", {
|
|
73
59
|
className: "Header__content"
|
|
74
|
-
}, /*#__PURE__*/
|
|
60
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
75
61
|
className: "Header__logo"
|
|
76
|
-
}, logo), menu && /*#__PURE__*/
|
|
62
|
+
}, logo), menu && /*#__PURE__*/React.createElement("div", {
|
|
77
63
|
className: "Header__menu__wrapper"
|
|
78
|
-
}, /*#__PURE__*/
|
|
64
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
79
65
|
className: "Header__menu"
|
|
80
|
-
}, menu), customHamburger ? /*#__PURE__*/
|
|
66
|
+
}, menu), customHamburger ? /*#__PURE__*/React.createElement("div", {
|
|
81
67
|
className: "Header__hamburger"
|
|
82
|
-
}, customHamburger) : /*#__PURE__*/
|
|
68
|
+
}, customHamburger) : /*#__PURE__*/React.createElement("div", {
|
|
83
69
|
className: "Header__hamburger"
|
|
84
|
-
}, /*#__PURE__*/
|
|
70
|
+
}, /*#__PURE__*/React.createElement(Hamburger, {
|
|
85
71
|
onClick: function onClick() {
|
|
86
72
|
return setActive(!active);
|
|
87
73
|
}
|
|
88
|
-
}))))), subMenu && /*#__PURE__*/
|
|
74
|
+
}))))), subMenu && /*#__PURE__*/React.createElement("div", {
|
|
89
75
|
className: "Header__subMenu"
|
|
90
|
-
}, /*#__PURE__*/
|
|
76
|
+
}, /*#__PURE__*/React.createElement(Container, null, subMenu)));
|
|
91
77
|
if (withAnimation) {
|
|
92
|
-
return /*#__PURE__*/
|
|
78
|
+
return /*#__PURE__*/React.createElement(NavigationScroll, {
|
|
93
79
|
onUpdate: onUpdateNavigationScroll,
|
|
94
80
|
hasBackground: true
|
|
95
81
|
}, headerComponent);
|
|
@@ -97,5 +83,4 @@ var Header = function Header(_ref) {
|
|
|
97
83
|
return headerComponent;
|
|
98
84
|
}
|
|
99
85
|
};
|
|
100
|
-
|
|
101
|
-
exports.default = _default;
|
|
86
|
+
export default Header;
|
|
@@ -1,21 +1,14 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
});
|
|
6
|
-
exports.default = void 0;
|
|
7
|
-
var _react = _interopRequireDefault(require("react"));
|
|
8
|
-
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
9
|
-
var _classnames = _interopRequireDefault(require("classnames"));
|
|
10
|
-
require("./style.scss");
|
|
11
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import PropTypes from 'prop-types';
|
|
3
|
+
import c from 'classnames';
|
|
4
|
+
import './style.scss';
|
|
12
5
|
var Icon = function Icon(_ref) {
|
|
13
6
|
var _ref$flair = _ref.flair,
|
|
14
7
|
flair = _ref$flair === void 0 ? '' : _ref$flair,
|
|
15
8
|
name = _ref.name;
|
|
16
9
|
var flairPostFix = flair && flair.length > 0 ? '-' : '';
|
|
17
|
-
var className = (
|
|
18
|
-
return /*#__PURE__*/
|
|
10
|
+
var className = c('Icon', "Icon-".concat(flair).concat(flairPostFix).concat(name));
|
|
11
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
19
12
|
className: className
|
|
20
13
|
});
|
|
21
14
|
};
|
|
@@ -23,8 +16,7 @@ Icon.defaultProps = {
|
|
|
23
16
|
flair: ''
|
|
24
17
|
};
|
|
25
18
|
Icon.propTypes = {
|
|
26
|
-
name:
|
|
27
|
-
flair:
|
|
19
|
+
name: PropTypes.string.isRequired,
|
|
20
|
+
flair: PropTypes.string
|
|
28
21
|
};
|
|
29
|
-
|
|
30
|
-
exports.default = _default;
|
|
22
|
+
export default Icon;
|
|
@@ -1,20 +1,14 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.default = void 0;
|
|
7
|
-
var _react = _interopRequireDefault(require("react"));
|
|
8
|
-
var _classnames = _interopRequireDefault(require("classnames"));
|
|
9
|
-
require("./style.scss");
|
|
10
|
-
var _helpers = require("../helpers");
|
|
11
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
12
1
|
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
13
2
|
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."); }
|
|
14
3
|
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); }
|
|
15
4
|
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; }
|
|
16
5
|
function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
|
|
17
6
|
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
7
|
+
import React from 'react';
|
|
8
|
+
import c from 'classnames';
|
|
9
|
+
import './style.scss';
|
|
10
|
+
import { isValidImage, useImageLoader, calculateTargetSrc } from '../helpers';
|
|
11
|
+
|
|
18
12
|
// extend html img props
|
|
19
13
|
|
|
20
14
|
var AdaptivePicture = function AdaptivePicture(_ref) {
|
|
@@ -25,22 +19,22 @@ var AdaptivePicture = function AdaptivePicture(_ref) {
|
|
|
25
19
|
_ref$aspectRatio = _ref.aspectRatio,
|
|
26
20
|
aspectRatio = _ref$aspectRatio === void 0 ? 1 : _ref$aspectRatio;
|
|
27
21
|
var sourcesAsArray = Array.isArray(src) ? src : [src];
|
|
28
|
-
var validatedSources = sourcesAsArray.filter(
|
|
22
|
+
var validatedSources = sourcesAsArray.filter(isValidImage);
|
|
29
23
|
var fallbackImage = validatedSources[0];
|
|
30
|
-
var imageRef =
|
|
24
|
+
var imageRef = React.useRef(null);
|
|
31
25
|
var style = {
|
|
32
26
|
objectFit: objectFit,
|
|
33
27
|
aspectRatio: aspectRatio
|
|
34
28
|
};
|
|
35
|
-
var _React$useState =
|
|
29
|
+
var _React$useState = React.useState('PENDING'),
|
|
36
30
|
_React$useState2 = _slicedToArray(_React$useState, 2),
|
|
37
31
|
status = _React$useState2[0],
|
|
38
32
|
setStatus = _React$useState2[1];
|
|
39
|
-
var _React$useState3 =
|
|
33
|
+
var _React$useState3 = React.useState(fallbackImage),
|
|
40
34
|
_React$useState4 = _slicedToArray(_React$useState3, 2),
|
|
41
35
|
targetSrc = _React$useState4[0],
|
|
42
36
|
setTargetSrc = _React$useState4[1];
|
|
43
|
-
|
|
37
|
+
React.useEffect(function () {
|
|
44
38
|
// @ts-ignore
|
|
45
39
|
if (global.ssr) return;
|
|
46
40
|
if (!imageRef.current) return;
|
|
@@ -51,12 +45,12 @@ var AdaptivePicture = function AdaptivePicture(_ref) {
|
|
|
51
45
|
var resizeObserver = new ResizeObserver(function (entries) {
|
|
52
46
|
var widthAfterResize = entries[0].contentRect.width;
|
|
53
47
|
if (image.width < widthAfterResize) {
|
|
54
|
-
var newTargetSrc =
|
|
48
|
+
var newTargetSrc = calculateTargetSrc(image.width, validatedSources, fallbackImage);
|
|
55
49
|
if (targetSrc !== newTargetSrc) {
|
|
56
50
|
setTargetSrc(newTargetSrc);
|
|
57
51
|
}
|
|
58
52
|
} else {
|
|
59
|
-
var _newTargetSrc =
|
|
53
|
+
var _newTargetSrc = calculateTargetSrc(widthAfterResize, validatedSources, fallbackImage);
|
|
60
54
|
if (targetSrc !== _newTargetSrc) {
|
|
61
55
|
setTargetSrc(_newTargetSrc);
|
|
62
56
|
}
|
|
@@ -72,19 +66,19 @@ var AdaptivePicture = function AdaptivePicture(_ref) {
|
|
|
72
66
|
resizeObserver.unobserve(container);
|
|
73
67
|
};
|
|
74
68
|
}, [fallbackImage, status, targetSrc, validatedSources]);
|
|
75
|
-
var loadedUrl =
|
|
69
|
+
var loadedUrl = useImageLoader(fallbackImage, targetSrc, imageRef);
|
|
76
70
|
function onErrorFallback(e) {
|
|
77
71
|
if (e.target.src !== fallbackImage) {
|
|
78
72
|
e.target.src = fallbackImage;
|
|
79
73
|
}
|
|
80
74
|
}
|
|
81
|
-
var classes = (
|
|
75
|
+
var classes = c('AdaptivePicture', {
|
|
82
76
|
'AdaptivePicture--initiallyLoaded': status === 'INITIAL_LOADED'
|
|
83
77
|
});
|
|
84
78
|
if (!validatedSources.length) {
|
|
85
79
|
return null;
|
|
86
80
|
}
|
|
87
|
-
return /*#__PURE__*/
|
|
81
|
+
return /*#__PURE__*/React.createElement("img", {
|
|
88
82
|
style: style,
|
|
89
83
|
className: classes,
|
|
90
84
|
onError: onErrorFallback,
|
|
@@ -101,5 +95,4 @@ var AdaptivePicture = function AdaptivePicture(_ref) {
|
|
|
101
95
|
alt: alt
|
|
102
96
|
});
|
|
103
97
|
};
|
|
104
|
-
|
|
105
|
-
exports.default = _default;
|
|
98
|
+
export default AdaptivePicture;
|
|
@@ -1,28 +1,18 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
|
|
4
|
-
Object.defineProperty(exports, "__esModule", {
|
|
5
|
-
value: true
|
|
6
|
-
});
|
|
7
|
-
exports.default = void 0;
|
|
8
|
-
var _react = _interopRequireWildcard(require("react"));
|
|
9
|
-
var _classnames = _interopRequireDefault(require("classnames"));
|
|
10
|
-
var _Picture = _interopRequireDefault(require("../Picture"));
|
|
11
|
-
require("./style.scss");
|
|
12
1
|
var _excluded = ["className", "children", "withGradient"];
|
|
13
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
14
|
-
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
15
|
-
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
16
2
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
|
|
17
3
|
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
|
18
4
|
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
5
|
+
import React, { useRef } from 'react';
|
|
6
|
+
import c from 'classnames';
|
|
7
|
+
import Picture from '../Picture';
|
|
8
|
+
import './style.scss';
|
|
19
9
|
var ImageBackground = function ImageBackground(_ref) {
|
|
20
10
|
var className = _ref.className,
|
|
21
11
|
children = _ref.children,
|
|
22
12
|
withGradient = _ref.withGradient,
|
|
23
13
|
props = _objectWithoutProperties(_ref, _excluded);
|
|
24
|
-
var bgElem =
|
|
25
|
-
var imgElement =
|
|
14
|
+
var bgElem = useRef(null);
|
|
15
|
+
var imgElement = useRef(null);
|
|
26
16
|
var onLoad = function onLoad(e) {
|
|
27
17
|
var src = typeof imgElement.current.currentSrc !== 'undefined' ? imgElement.current.currentSrc : imgElement.current.src;
|
|
28
18
|
if (withGradient) {
|
|
@@ -31,12 +21,12 @@ var ImageBackground = function ImageBackground(_ref) {
|
|
|
31
21
|
bgElem.current.style.backgroundImage = "url(\"".concat(src, "\")");
|
|
32
22
|
}
|
|
33
23
|
};
|
|
34
|
-
var classes = (
|
|
35
|
-
return /*#__PURE__*/
|
|
24
|
+
var classes = c('ImageBackground', className);
|
|
25
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
36
26
|
className: classes,
|
|
37
27
|
"data-responsive-background-image": true,
|
|
38
28
|
ref: bgElem
|
|
39
|
-
}, /*#__PURE__*/
|
|
29
|
+
}, /*#__PURE__*/React.createElement(Picture, _extends({
|
|
40
30
|
className: "ImageBackground__picture",
|
|
41
31
|
onLoadFunction: function onLoadFunction(e) {
|
|
42
32
|
return onLoad(e);
|
|
@@ -44,5 +34,4 @@ var ImageBackground = function ImageBackground(_ref) {
|
|
|
44
34
|
imageRef: imgElement
|
|
45
35
|
}, props)), children);
|
|
46
36
|
};
|
|
47
|
-
|
|
48
|
-
exports.default = _default;
|
|
37
|
+
export default ImageBackground;
|
|
@@ -1,18 +1,4 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
1
|
function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
|
|
4
|
-
Object.defineProperty(exports, "__esModule", {
|
|
5
|
-
value: true
|
|
6
|
-
});
|
|
7
|
-
exports.default = void 0;
|
|
8
|
-
var _react = _interopRequireWildcard(require("react"));
|
|
9
|
-
var _classnames = _interopRequireDefault(require("classnames"));
|
|
10
|
-
var _reactLazyload = _interopRequireDefault(require("react-lazyload"));
|
|
11
|
-
var _immutable = require("immutable");
|
|
12
|
-
require("./style.scss");
|
|
13
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
14
|
-
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
15
|
-
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
16
2
|
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
|
|
17
3
|
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
18
4
|
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); }
|
|
@@ -31,6 +17,11 @@ function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) ===
|
|
|
31
17
|
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
|
|
32
18
|
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
33
19
|
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
|
|
20
|
+
import React, { Component } from 'react';
|
|
21
|
+
import classNames from 'classnames';
|
|
22
|
+
import LazyLoad from 'react-lazyload';
|
|
23
|
+
import { Map } from 'immutable';
|
|
24
|
+
import './style.scss';
|
|
34
25
|
var LazyLoadWrapper = /*#__PURE__*/function (_Component) {
|
|
35
26
|
_inherits(LazyLoadWrapper, _Component);
|
|
36
27
|
var _super = _createSuper(LazyLoadWrapper);
|
|
@@ -51,7 +42,7 @@ var LazyLoadWrapper = /*#__PURE__*/function (_Component) {
|
|
|
51
42
|
var _this$props = this.props,
|
|
52
43
|
shouldLazyLoad = _this$props.lazyload,
|
|
53
44
|
children = _this$props.children;
|
|
54
|
-
var placeholder = /*#__PURE__*/
|
|
45
|
+
var placeholder = /*#__PURE__*/React.createElement("img", {
|
|
55
46
|
className: "lazy",
|
|
56
47
|
src: "data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==",
|
|
57
48
|
alt: "placeholder"
|
|
@@ -72,35 +63,34 @@ var LazyLoadWrapper = /*#__PURE__*/function (_Component) {
|
|
|
72
63
|
});
|
|
73
64
|
};
|
|
74
65
|
var elements = [];
|
|
75
|
-
var elementMap =
|
|
66
|
+
var elementMap = Map(element);
|
|
76
67
|
if (Array.isArray(elementMap.getIn(['props', 'children']))) {
|
|
77
|
-
elements =
|
|
68
|
+
elements = React.Children.map(element.props.children, function (child) {
|
|
78
69
|
return addOnLoadCallback(child);
|
|
79
70
|
});
|
|
80
71
|
}
|
|
81
|
-
return /*#__PURE__*/
|
|
72
|
+
return /*#__PURE__*/React.cloneElement.apply(React, [element, newProps].concat(_toConsumableArray(elements)));
|
|
82
73
|
};
|
|
83
74
|
var _this$state = this.state,
|
|
84
75
|
loaded = _this$state.loaded,
|
|
85
76
|
error = _this$state.error;
|
|
86
|
-
var classes = (
|
|
77
|
+
var classes = classNames('LazyLoadWrapper', {
|
|
87
78
|
'has-loaded': loaded,
|
|
88
79
|
'has-error': error
|
|
89
80
|
});
|
|
90
|
-
return /*#__PURE__*/
|
|
81
|
+
return /*#__PURE__*/React.createElement(LazyLoad, {
|
|
91
82
|
placeholder: placeholder,
|
|
92
83
|
offset: 200,
|
|
93
84
|
once: true
|
|
94
|
-
}, /*#__PURE__*/
|
|
85
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
95
86
|
className: classes
|
|
96
|
-
}, /*#__PURE__*/
|
|
87
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
97
88
|
className: "lazy-load--inner-wrapper"
|
|
98
|
-
},
|
|
89
|
+
}, React.Children.map(children, function (child) {
|
|
99
90
|
return addOnLoadCallback(child);
|
|
100
91
|
}))));
|
|
101
92
|
}
|
|
102
93
|
}]);
|
|
103
94
|
return LazyLoadWrapper;
|
|
104
|
-
}(
|
|
105
|
-
|
|
106
|
-
exports.default = _default;
|
|
95
|
+
}(Component);
|
|
96
|
+
export default LazyLoadWrapper;
|
|
@@ -1,21 +1,14 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.default = void 0;
|
|
7
|
-
var _react = _interopRequireDefault(require("react"));
|
|
8
|
-
var _immutable = _interopRequireDefault(require("immutable"));
|
|
9
|
-
var _path = _interopRequireDefault(require("path"));
|
|
10
|
-
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
11
|
-
var _extToMimeTypes = _interopRequireDefault(require("./data/ext-to-mime-types.json"));
|
|
12
|
-
require("./style.scss");
|
|
13
|
-
var _helpers = require("../helpers");
|
|
14
1
|
var _excluded = ["src", "className", "onLoad", "imageRef", "includeWebP"];
|
|
15
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
16
2
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
|
|
17
3
|
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
|
18
4
|
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
5
|
+
import React from 'react';
|
|
6
|
+
import Immutable from 'immutable';
|
|
7
|
+
import path from 'path';
|
|
8
|
+
import PropTypes from 'prop-types';
|
|
9
|
+
import mimeTypes from './data/ext-to-mime-types.json';
|
|
10
|
+
import './style.scss';
|
|
11
|
+
import { isValidImage, getImageExtension } from '../helpers';
|
|
19
12
|
var FALLBACK_MIME_TYPE = 'image/jpg';
|
|
20
13
|
var Picture = function Picture(_ref) {
|
|
21
14
|
var src = _ref.src,
|
|
@@ -37,17 +30,17 @@ var Picture = function Picture(_ref) {
|
|
|
37
30
|
title: title
|
|
38
31
|
};
|
|
39
32
|
var getMimeType = function getMimeType(url) {
|
|
40
|
-
var extension =
|
|
41
|
-
return
|
|
33
|
+
var extension = getImageExtension(url);
|
|
34
|
+
return mimeTypes[extension] ? mimeTypes[extension] : FALLBACK_MIME_TYPE;
|
|
42
35
|
};
|
|
43
|
-
if (
|
|
36
|
+
if (Immutable.Iterable.isIterable(Immutable.fromJS(src))) {
|
|
44
37
|
// Sources have to be defined in a descending order.
|
|
45
38
|
// We sort them from best to worst quality.
|
|
46
|
-
var sourcesAll =
|
|
39
|
+
var sourcesAll = Immutable.fromJS(src).toOrderedMap().sortBy(function (url, breakpoint) {
|
|
47
40
|
return parseInt(breakpoint);
|
|
48
41
|
}).reverse();
|
|
49
42
|
var sources = sourcesAll.map(function (url) {
|
|
50
|
-
if (
|
|
43
|
+
if (isValidImage(url)) {
|
|
51
44
|
return url;
|
|
52
45
|
}
|
|
53
46
|
}).filter(function (image) {
|
|
@@ -68,7 +61,7 @@ var Picture = function Picture(_ref) {
|
|
|
68
61
|
/* eslint-disable react/no-array-index-key */
|
|
69
62
|
renderedSourcesWebP = sources.map(function (url, breakpoint) {
|
|
70
63
|
var webpUrl = url.replace(/\.(png|gif|jp(e?)g)/ig, '.webp');
|
|
71
|
-
return /*#__PURE__*/
|
|
64
|
+
return /*#__PURE__*/React.createElement("source", {
|
|
72
65
|
key: breakpoint,
|
|
73
66
|
srcSet: webpUrl,
|
|
74
67
|
type: getMimeType(webpUrl),
|
|
@@ -79,41 +72,41 @@ var Picture = function Picture(_ref) {
|
|
|
79
72
|
|
|
80
73
|
/* eslint-disable react/no-array-index-key */
|
|
81
74
|
var renderedSources = sources.map(function (url, breakpoint) {
|
|
82
|
-
return /*#__PURE__*/
|
|
75
|
+
return /*#__PURE__*/React.createElement("source", {
|
|
83
76
|
key: breakpoint,
|
|
84
77
|
srcSet: url,
|
|
85
78
|
type: getMimeType(url),
|
|
86
79
|
media: "screen and (min-width: ".concat(breakpoint, "px)")
|
|
87
80
|
});
|
|
88
81
|
}).valueSeq();
|
|
89
|
-
return /*#__PURE__*/
|
|
82
|
+
return /*#__PURE__*/React.createElement("picture", {
|
|
90
83
|
onLoad: function onLoad(e) {
|
|
91
84
|
return _onLoad(e);
|
|
92
85
|
}
|
|
93
|
-
}, renderedSourcesWebP, renderedSources, /*#__PURE__*/
|
|
86
|
+
}, renderedSourcesWebP, renderedSources, /*#__PURE__*/React.createElement("img", _extends({}, attrs, {
|
|
94
87
|
ref: imageRef,
|
|
95
88
|
src: fallback
|
|
96
89
|
})));
|
|
97
90
|
}
|
|
98
|
-
if (src &&
|
|
91
|
+
if (src && isValidImage(src)) {
|
|
99
92
|
if (includeWebP) {
|
|
100
93
|
var webpUrl = src.replace(/\.(png|gif|jp(e?)g)/, '.webp');
|
|
101
|
-
return /*#__PURE__*/
|
|
94
|
+
return /*#__PURE__*/React.createElement("picture", {
|
|
102
95
|
onLoad: function onLoad(e) {
|
|
103
96
|
return _onLoad(e);
|
|
104
97
|
}
|
|
105
|
-
}, /*#__PURE__*/
|
|
98
|
+
}, /*#__PURE__*/React.createElement("source", {
|
|
106
99
|
srcSet: webpUrl,
|
|
107
100
|
type: getMimeType(webpUrl)
|
|
108
|
-
}), /*#__PURE__*/
|
|
101
|
+
}), /*#__PURE__*/React.createElement("source", {
|
|
109
102
|
srcSet: src,
|
|
110
103
|
type: getMimeType(src)
|
|
111
|
-
}), /*#__PURE__*/
|
|
104
|
+
}), /*#__PURE__*/React.createElement("img", _extends({}, attrs, {
|
|
112
105
|
ref: imageRef,
|
|
113
106
|
src: src
|
|
114
107
|
})));
|
|
115
108
|
}
|
|
116
|
-
return /*#__PURE__*/
|
|
109
|
+
return /*#__PURE__*/React.createElement("img", _extends({}, attrs, {
|
|
117
110
|
onLoad: function onLoad(e) {
|
|
118
111
|
return _onLoad(e);
|
|
119
112
|
},
|
|
@@ -124,12 +117,11 @@ var Picture = function Picture(_ref) {
|
|
|
124
117
|
return null;
|
|
125
118
|
};
|
|
126
119
|
Picture.propTypes = {
|
|
127
|
-
onLoad:
|
|
128
|
-
alt:
|
|
120
|
+
onLoad: PropTypes.func,
|
|
121
|
+
alt: PropTypes.string
|
|
129
122
|
};
|
|
130
123
|
Picture.defaultProps = {
|
|
131
124
|
onLoad: function onLoad() {},
|
|
132
125
|
alt: null
|
|
133
126
|
};
|
|
134
|
-
|
|
135
|
-
exports.default = _default;
|
|
127
|
+
export default Picture;
|
|
@@ -1,21 +1,11 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.calculateTargetSrc = calculateTargetSrc;
|
|
7
|
-
exports.getImageExtension = getImageExtension;
|
|
8
|
-
exports.isValidImage = isValidImage;
|
|
9
|
-
exports.useImageLoader = useImageLoader;
|
|
10
|
-
var _path = _interopRequireDefault(require("path"));
|
|
11
|
-
var _react = require("react");
|
|
12
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
13
1
|
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
14
2
|
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."); }
|
|
15
3
|
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); }
|
|
16
4
|
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; }
|
|
17
5
|
function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
|
|
18
6
|
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
7
|
+
import path from 'path';
|
|
8
|
+
import { useEffect, useState } from 'react';
|
|
19
9
|
var breakpoints = [0, 256, 512, 1024, 2048];
|
|
20
10
|
var mimeTypes = {
|
|
21
11
|
'.gif': 'image/gif',
|
|
@@ -26,9 +16,9 @@ var mimeTypes = {
|
|
|
26
16
|
'.webp': 'image/webp',
|
|
27
17
|
'.svg': 'image/svg+xml'
|
|
28
18
|
};
|
|
29
|
-
function getImageExtension(url) {
|
|
19
|
+
export function getImageExtension(url) {
|
|
30
20
|
var sanitizedUrl = url.replace(/\?.*/, '');
|
|
31
|
-
return
|
|
21
|
+
return path.extname(sanitizedUrl).toLowerCase();
|
|
32
22
|
}
|
|
33
23
|
|
|
34
24
|
/**
|
|
@@ -36,23 +26,23 @@ function getImageExtension(url) {
|
|
|
36
26
|
*
|
|
37
27
|
* @param {string} url
|
|
38
28
|
*/
|
|
39
|
-
function isValidImage(url) {
|
|
29
|
+
export function isValidImage(url) {
|
|
40
30
|
if (!url) {
|
|
41
31
|
return false;
|
|
42
32
|
}
|
|
43
33
|
var extension = getImageExtension(url);
|
|
44
34
|
return Object.keys(mimeTypes).includes(extension);
|
|
45
35
|
}
|
|
46
|
-
function useImageLoader(initialSrc, targetSrc, imageRef) {
|
|
47
|
-
var _useState =
|
|
36
|
+
export function useImageLoader(initialSrc, targetSrc, imageRef) {
|
|
37
|
+
var _useState = useState(initialSrc),
|
|
48
38
|
_useState2 = _slicedToArray(_useState, 2),
|
|
49
39
|
src = _useState2[0],
|
|
50
40
|
setSrc = _useState2[1];
|
|
51
|
-
var _useState3 =
|
|
41
|
+
var _useState3 = useState(false),
|
|
52
42
|
_useState4 = _slicedToArray(_useState3, 2),
|
|
53
43
|
isInViewport = _useState4[0],
|
|
54
44
|
setIsInViewport = _useState4[1];
|
|
55
|
-
|
|
45
|
+
useEffect(function () {
|
|
56
46
|
// @ts-ignore
|
|
57
47
|
if (global.ssr) return;
|
|
58
48
|
if (!imageRef.current) return;
|
|
@@ -79,7 +69,7 @@ function useImageLoader(initialSrc, targetSrc, imageRef) {
|
|
|
79
69
|
observer.unobserve(image);
|
|
80
70
|
};
|
|
81
71
|
}, [imageRef, isInViewport, setIsInViewport]);
|
|
82
|
-
|
|
72
|
+
useEffect(function () {
|
|
83
73
|
if (initialSrc === targetSrc) return;
|
|
84
74
|
if (!isInViewport) return;
|
|
85
75
|
var img = new Image();
|
|
@@ -90,7 +80,7 @@ function useImageLoader(initialSrc, targetSrc, imageRef) {
|
|
|
90
80
|
}, [targetSrc, initialSrc, isInViewport]);
|
|
91
81
|
return src;
|
|
92
82
|
}
|
|
93
|
-
function calculateTargetSrc(referenceWidth, sources, fallbackImage) {
|
|
83
|
+
export function calculateTargetSrc(referenceWidth, sources, fallbackImage) {
|
|
94
84
|
var breakpoint = breakpoints.find(function (bp) {
|
|
95
85
|
return bp >= referenceWidth;
|
|
96
86
|
}) || breakpoints[breakpoints.length - 1];
|