@uncinc/uncinc-react-kitchen-sink 2.11.5-adaptive-image-debounce → 2.11.5

package/dist/components/Form/Select/Input/index.js

@@ -46,7 +46,12 @@ var SelectInput = function SelectInput(props) {
     setFieldValue = _useExtendedFormikCon.setFieldValue;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
-  var value = values[fieldName];
+
+  // Because Object.keys doesn't respect integers:
+  // When using integers as keys for your select options (for example, when using Taxonomy IDs)
+  // below logic would fail to find your initialValue, and your Select would not be pre-filled.
+  var value = values[fieldName] && values[fieldName].toString();
+  var defaultValueString = defaultValue && defaultValue.toString();
 
   // Check if options is [{value, label}] or {value: label}.
   var optionsTransformed = options;
@@ -63,12 +68,12 @@ var SelectInput = function SelectInput(props) {
   // If the selected option is not set, find the currently selected option by value.
   if (!selectedOption) {
     if (multiple) {
-      var _value = value !== undefined ? value : defaultValue || [];
+      var _value = value !== undefined ? value : defaultValueString || [];
       selectedOption = optionsTransformed.filter(function (option) {
         return _value.includes(option.value);
       });
     } else {
-      var _value2 = value !== undefined ? value : defaultValue || '';
+      var _value2 = value !== undefined ? value : defaultValueString || '';
       selectedOption = optionsTransformed.filter(function (option) {
         return option.value === _value2;
       });
@@ -94,7 +99,7 @@ var SelectInput = function SelectInput(props) {
       className: c('Select__select', className),
       classNamePrefix: c('Select__inner', wrapperClassName),
       value: selectedOption,
-      defaultValue: defaultValue,
+      defaultValue: defaultValueString,
       disabled: disabled,
       onChange: function onChange(e) {
         var value = '';

package/dist/components/Image/AdaptivePicture/index.d.ts

@@ -5,7 +5,6 @@ interface Props extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, 'src'> {
     onLoad: (e: any) => void;
     objectFit?: 'fill' | 'contain' | 'cover' | 'none' | 'scale-down';
     aspectRatio?: number | string;
-    resizeDelay?: number;
 }
 declare const AdaptivePicture: React.FC<Props>;
 export default AdaptivePicture;

package/dist/components/Image/AdaptivePicture/index.js

@@ -18,9 +18,7 @@ var AdaptivePicture = function AdaptivePicture(_ref) {
     alt = _ref.alt,
     objectFit = _ref.objectFit,
     _ref$aspectRatio = _ref.aspectRatio,
-    aspectRatio = _ref$aspectRatio === void 0 ? 1 : _ref$aspectRatio,
-    _ref$resizeDelay = _ref.resizeDelay,
-    resizeDelay = _ref$resizeDelay === void 0 ? 100 : _ref$resizeDelay;
+    aspectRatio = _ref$aspectRatio === void 0 ? 1 : _ref$aspectRatio;
   var sourcesAsArray = Array.isArray(src) ? src : [src];
   var validatedSources = sourcesAsArray.filter(isValidImage);
   var fallbackImage = validatedSources[0];
@@ -37,8 +35,6 @@ var AdaptivePicture = function AdaptivePicture(_ref) {
     _React$useState4 = _slicedToArray(_React$useState3, 2),
     targetSrc = _React$useState4[0],
     setTargetSrc = _React$useState4[1];
-  var resizingDelay = React.useRef(0);
-  var resizingDelayTimer = React.useRef();
   React.useEffect(function () {
     // @ts-ignore
     if (global.ssr) return;
@@ -48,43 +44,32 @@ var AdaptivePicture = function AdaptivePicture(_ref) {
     var container = image.parentElement;
     if (!container) return;
     var resizeObserver = new ResizeObserver(function (entries) {
-      // In order to prevent the 'ResizeObserver loop completed with undelivered notifications.' 
-      // message, debounce handling the ResizeObserver action by adding a timeout.
-      clearTimeout(resizingDelayTimer.current);
-      resizingDelayTimer.current = setTimeout(function () {
-        var widthAfterResize = entries[0].contentRect.width;
-        var newSrcRequired = false;
-        if (image.width < widthAfterResize) {
-          var newTargetSrc = calculateTargetSrc(image.width, validatedSources, fallbackImage);
-          if (targetSrc !== newTargetSrc) {
-            setTargetSrc(newTargetSrc);
-            newSrcRequired = true;
-          }
-        } else {
-          var _newTargetSrc = calculateTargetSrc(widthAfterResize, validatedSources, fallbackImage);
-          if (targetSrc !== _newTargetSrc) {
-            setTargetSrc(_newTargetSrc);
-            newSrcRequired = true;
-          }
+      var widthAfterResize = entries[0].contentRect.width;
+      var newSrcRequired = false;
+      if (image.width < widthAfterResize) {
+        var newTargetSrc = calculateTargetSrc(image.width, validatedSources, fallbackImage);
+        if (targetSrc !== newTargetSrc) {
+          setTargetSrc(newTargetSrc);
+          newSrcRequired = true;
         }
-        if (status === 'PENDING') {
-          setStatus('INITIAL_BREAKPOINT_CALCULATED');
-
-          // We always load the smallest source. If that's also the source we need
-          // set INITIAL_LOADED directly.
-          // With caching turned on, the onLoad function on the img would only trigger once
-          // and thus never unblur the smallest
-          if (!newSrcRequired) {
-            setStatus('INITIAL_LOADED');
-          }
+      } else {
+        var _newTargetSrc = calculateTargetSrc(widthAfterResize, validatedSources, fallbackImage);
+        if (targetSrc !== _newTargetSrc) {
+          setTargetSrc(_newTargetSrc);
+          newSrcRequired = true;
         }
+      }
+      if (status === 'PENDING') {
+        setStatus('INITIAL_BREAKPOINT_CALCULATED');
 
-        // On page load, we want 0 delay.
-        // After the observer has been triggered once, we set a small debounce.
-        if (resizingDelay.current === 0) {
-          resizingDelay.current = resizeDelay;
+        // We always load the smallest source. If that's also the source we need
+        // set INITIAL_LOADED directly.
+        // With caching turned on, the onLoad function on the img would only trigger once
+        // and thus never unblur the smallest
+        if (!newSrcRequired) {
+          setStatus('INITIAL_LOADED');
         }
-      }, resizingDelay.current);
+      }
     });
     resizeObserver.observe(container);
 
@@ -92,7 +77,7 @@ var AdaptivePicture = function AdaptivePicture(_ref) {
     return function () {
       resizeObserver.unobserve(container);
     };
-  }, [fallbackImage, status, targetSrc, validatedSources, resizeDelay]);
+  }, [fallbackImage, status, targetSrc, validatedSources]);
   var loadedUrl = useImageLoader(fallbackImage, targetSrc, imageRef);
   function onErrorFallback(e) {
     // Make sure that both URLs are absolute URLs, so we can compare them.

package/dist/components/Image/index.d.ts

@@ -8,13 +8,11 @@ declare namespace Image {
         lazyload: PropTypes.Requireable<boolean>;
         aspectRatio: PropTypes.Requireable<number>;
         objectFit: PropTypes.Requireable<string>;
-        resizeDelay: PropTypes.Requireable<number>;
     };
     namespace defaultProps {
         let lazyload: boolean;
-        let aspectRatio: number;
+        let aspectRatio: null;
         let objectFit: null;
-        let resizeDelay: number;
     }
 }
 import React from 'react';

package/dist/components/Image/index.js

@@ -24,13 +24,11 @@ Image.propTypes = _objectSpread({
   src: PropTypes.oneOfType([PropTypes.string, ImmutablePropTypes.map, PropTypes.arrayOf(PropTypes.string)]).isRequired,
   lazyload: PropTypes.bool,
   aspectRatio: PropTypes.number,
-  objectFit: PropTypes.oneOf(['fill', 'contain', 'cover', 'none', 'scale-down']),
-  resizeDelay: PropTypes.number
+  objectFit: PropTypes.oneOf(['fill', 'contain', 'cover', 'none', 'scale-down'])
 }, Picture.propTypes);
 Image.defaultProps = {
   lazyload: true,
-  aspectRatio: 1,
-  objectFit: null,
-  resizeDelay: 100
+  aspectRatio: null,
+  objectFit: null
 };
 export default Image;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uncinc/uncinc-react-kitchen-sink",
-  "version": "2.11.5-adaptive-image-debounce",
+  "version": "2.11.5",
   "description": "Default React components that are easily extended.",
   "author": "uncinc",
   "license": "MIT",