@homecode/ui 5.1.1 → 5.1.2

package/dist/esm/src/components/Gallery/Gallery.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { Component, createRef } from 'react';
+import { Component, createRef, useState, useRef, useLayoutEffect } from 'react';
 import { createStore } from 'justorm/react';
 import Time from 'timen';
 import compare from 'compareq';
@@ -19,18 +19,60 @@ const DIR_NAME = {
     '1': 'left',
     '-1': 'right',
 };
+function galleryStoreTarget(store) {
+    const o = store;
+    if (o.originalObject == null) {
+        throw new Error('Gallery: justorm store missing originalObject');
+    }
+    return o.originalObject;
+}
 function getInitialState(items, startIndex) {
     return circularSlice(items, startIndex, 3);
 }
 function Arr({ className, size, icon, ...rest }) {
     return (jsx(Button, { className: cn(S.arr, className), size: size, variant: "clear", ...rest, children: jsx(Icon, { type: icon, size: size }) }));
 }
-function Item({ src, size, isLoaded, isError, onLoad, onError }) {
+function Item({ src, size }) {
+    const [loaded, setLoaded] = useState(false);
+    const [isError, setIsError] = useState(false);
     const style = {};
-    if (isLoaded)
+    const imgRef = useRef(null);
+    useLayoutEffect(() => {
+        const img = imgRef.current;
+        if (!img || isError)
+            return;
+        let cancelled = false;
+        const notify = () => {
+            if (!cancelled)
+                setLoaded(true);
+        };
+        // Cached images may never fire `load` after mount; `decode()` covers that path.
+        if (img.complete && img.naturalWidth > 0 && img.naturalHeight > 0) {
+            notify();
+            return () => {
+                cancelled = true;
+            };
+        }
+        if (typeof img.decode === 'function') {
+            img.decode().then(notify).catch(() => { });
+            return () => {
+                cancelled = true;
+            };
+        }
+        requestAnimationFrame(() => {
+            if (!cancelled &&
+                img.complete &&
+                (img.naturalWidth > 0 || img.naturalHeight > 0))
+                notify();
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [src, isError]);
+    if (loaded)
         style.backgroundImage = `url(${src})`;
-    return (jsx("div", { className: S.item, style: style, children: !isLoaded &&
-            (isError ? (jsx(Icon, { type: "brokenImage", className: S.brokenImage })) : (jsxs(Fragment, { children: [jsx("img", { src: src, onLoad: onLoad, onError: onError }), jsx(Spinner, { size: size })] }))) }));
+    return (jsx("div", { className: S.item, style: style, children: !loaded &&
+            (isError ? (jsx(Icon, { type: "brokenImage", className: S.brokenImage })) : (jsxs(Fragment, { children: [jsx("img", { ref: imgRef, src: src, onLoad: () => setLoaded(true), onError: () => setIsError(true) }), jsx(Spinner, { size: size })] }))) }));
 }
 class Gallery extends Component {
     store;
@@ -46,14 +88,12 @@ class Gallery extends Component {
     };
     constructor(props) {
         super(props);
-        const { startIndex, items } = props;
+        const { startIndex } = props;
         this.recenter();
         this.index = startIndex;
         this.store = createStore(this, {
             items: this.getStateItems(),
             movingDirection: 0,
-            loading: {},
-            errors: {},
             isDragging: false,
         });
     }
@@ -69,7 +109,9 @@ class Gallery extends Component {
             !compare(prevProps.items, items)) {
             this.index = startIndex;
             this.recenter();
-            this.store.items = this.getStateItems();
+            const next = this.getStateItems();
+            Object.assign(galleryStoreTarget(this.store), { items: next });
+            this.setState({});
         }
     }
     getStateItems() {
@@ -144,20 +186,20 @@ class Gallery extends Component {
     }, DURATION);
     switch(direction) {
         this.index += direction * -1;
-        this.store.items = circularSlice(this.items, this.index, 3);
-        this.store.movingDirection = 0;
+        const nextItems = circularSlice(this.items, this.index, 3);
+        // justorm v3: proxy set skips when compareq sees no change; bypass via originalObject.
+        Object.assign(galleryStoreTarget(this.store), {
+            items: nextItems,
+            movingDirection: 0,
+        });
         this.removeTransformDelta();
+        this.setState({});
         const { onChange } = this.props;
-        const { items, loading } = this.store;
         onChange?.(this.index, this.items[this.index]);
-        items.forEach(src => {
-            if (typeof loading[src] !== 'boolean')
-                loading[src] = false;
-        });
     }
     render() {
         const { className, size, showArrows, showDots, initialBounce, cover, ...rest } = this.props;
-        const { items, movingDirection, loading, errors, isDragging } = this.store;
+        const { items, movingDirection, isDragging } = this.store;
         const dirName = DIR_NAME[movingDirection];
         const isSingle = this.isSingle();
         const props = omit(rest, ['items', 'onChange', 'animation', 'startIndex']);
@@ -171,7 +213,7 @@ class Gallery extends Component {
                 props.onPointerLeave = this.onPointerUp;
             }
         }
-        return (jsxs("div", { className: classes, ...props, children: [jsx("div", { className: innerClasses, ref: this.innerRef, children: items.map((src, i) => (jsx(Item, { src: src, size: size, isLoaded: loading[src], isError: errors[src], onLoad: () => (loading[src] = true), onError: () => (errors[src] = true) }, `${i}_${src}`))) }), !isSingle && showArrows && !isDragging && (jsxs(Fragment, { children: [jsx(Arr, { className: S.left, size: size, icon: "chevronLeft", onClick: () => this.move(1) }), jsx(Arr, { className: S.right, size: size, icon: "chevronRight", onClick: () => this.move(-1) })] })), showDots && (jsx(Lazy, { hideSpinner: true, loader: () => import('./Dots/Dots.js'), 
+        return (jsxs("div", { className: classes, ...props, children: [jsx("div", { className: innerClasses, ref: this.innerRef, children: items.map((src, i) => (jsx(Item, { src: src, size: size }, `${i}_${src}`))) }), !isSingle && showArrows && !isDragging && (jsxs(Fragment, { children: [jsx(Arr, { className: S.left, size: size, icon: "chevronLeft", onClick: () => this.move(1) }), jsx(Arr, { className: S.right, size: size, icon: "chevronRight", onClick: () => this.move(-1) })] })), showDots && (jsx(Lazy, { hideSpinner: true, loader: () => import('./Dots/Dots.js'), 
                     // @ts-ignore
                     index: this.index % items.length, count: items.length }))] }));
     }

package/dist/esm/src/components/Gallery/Gallery.styl.js

@@ -1,6 +1,6 @@
 import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
 
-var css_248z = ".Gallery_item__P4qTJ,.Gallery_root__-Crit{height:100%;width:100%}.Gallery_root__-Crit{overflow:hidden;position:relative}.Gallery_inner__4FAPt{-webkit-backface-visibility:hidden;backface-visibility:hidden;display:flex;height:100%;position:absolute;touch-action:none;transform:translate3d(-33.33333%,0,0);width:calc(300% + 1px)}.Gallery_single__Wfd9h .Gallery_inner__4FAPt{transform:none;width:100%}.Gallery_single__Wfd9h .Gallery_item__P4qTJ{width:100%}.Gallery_inner__4FAPt.Gallery_left__zrrmv,.Gallery_inner__4FAPt.Gallery_right__dpZ-m{transition:transform 0s ease-out;transition-duration:.2s}.Gallery_inner__4FAPt.Gallery_left__zrrmv{transform:translateZ(0)!important}.Gallery_inner__4FAPt.Gallery_right__dpZ-m{transform:translate3d(-66.66667%,0,0)!important}.Gallery_inner__4FAPt.Gallery_initialBounce__nZnKd{animation:Gallery_bounce__buqva 1s ease-out}.Gallery_item__P4qTJ{align-items:center;background-position:50%;background-repeat:no-repeat;background-size:contain;display:flex;justify-content:center;width:33.33333%}.Gallery_cover__ZGx5X .Gallery_item__P4qTJ{background-size:cover}.Gallery_item__P4qTJ>img{opacity:0;pointer-events:none;position:absolute}.Gallery_brokenImage__Bj3O-{height:50%;opacity:.2;width:50%}.Gallery_arr__knicI{background:transparent!important;height:100%;min-height:100%;opacity:0;padding:10%;position:absolute;top:0;transition:opacity .1s ease-out}.Gallery_arr__knicI.Gallery_left__zrrmv{justify-content:flex-start;left:0}.Gallery_arr__knicI.Gallery_right__dpZ-m{justify-content:flex-end;right:0;width:77%}.Gallery_arr__knicI:hover{opacity:1}@keyframes Gallery_bounce__buqva{0%{left:0}50%{left:-20%}80%{left:10%}to{left:0}}";
+var css_248z = ".Gallery_item__P4qTJ,.Gallery_root__-Crit{height:100%;width:100%}.Gallery_root__-Crit{overflow:hidden;position:relative}.Gallery_inner__4FAPt{-webkit-backface-visibility:hidden;backface-visibility:hidden;display:flex;height:100%;position:absolute;touch-action:none;transform:translate3d(-33.33333%,0,0);width:calc(300% + 1px)}.Gallery_single__Wfd9h .Gallery_inner__4FAPt{transform:none;width:100%}.Gallery_single__Wfd9h .Gallery_item__P4qTJ{width:100%}.Gallery_inner__4FAPt.Gallery_left__zrrmv,.Gallery_inner__4FAPt.Gallery_right__dpZ-m{transition:transform 0s ease-out;transition-duration:.2s}.Gallery_inner__4FAPt.Gallery_left__zrrmv{transform:translateZ(0)!important}.Gallery_inner__4FAPt.Gallery_right__dpZ-m{transform:translate3d(-66.66667%,0,0)!important}.Gallery_inner__4FAPt.Gallery_initialBounce__nZnKd{animation:Gallery_bounce__buqva 1s ease-out}.Gallery_item__P4qTJ{align-items:center;background-position:50%;background-repeat:no-repeat;background-size:contain;display:flex;justify-content:center;width:33.33333%}.Gallery_cover__ZGx5X .Gallery_item__P4qTJ{background-size:cover}.Gallery_item__P4qTJ>img{opacity:0;pointer-events:none;position:absolute}.Gallery_brokenImage__Bj3O-{height:50%;opacity:.2;width:50%}.Gallery_arr__knicI{background:transparent!important;height:100%;min-height:100%;opacity:0;padding:10%;position:absolute;top:0;transition:opacity .1s ease-out;z-index:1}.Gallery_arr__knicI.Gallery_left__zrrmv{justify-content:flex-start;left:0}.Gallery_arr__knicI.Gallery_right__dpZ-m{justify-content:flex-end;right:0;width:77%}.Gallery_arr__knicI:hover{opacity:1}@keyframes Gallery_bounce__buqva{0%{left:0}50%{left:-20%}80%{left:10%}to{left:0}}";
 var S = {"root":"Gallery_root__-Crit","item":"Gallery_item__P4qTJ","inner":"Gallery_inner__4FAPt","single":"Gallery_single__Wfd9h","left":"Gallery_left__zrrmv","right":"Gallery_right__dpZ-m","initialBounce":"Gallery_initialBounce__nZnKd","bounce":"Gallery_bounce__buqva","cover":"Gallery_cover__ZGx5X","brokenImage":"Gallery_brokenImage__Bj3O-","arr":"Gallery_arr__knicI"};
 styleInject(css_248z);
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homecode/ui",
-  "version": "5.1.1",
+  "version": "5.1.2",
   "description": "React UI components library",
   "scripts": {
     "tests": "jest",