@onesy/ui-react 1.0.90 → 1.0.91

package/Interaction/Interaction.js

@@ -98,9 +98,8 @@ const useStyle = (0, style_react_1.style)(theme => ({
 const Interaction = react_1.default.forwardRef((props_, ref) => {
     const theme = (0, style_react_1.useOnesyTheme)();
     const props = react_1.default.useMemo(() => { var _a, _b, _c, _d, _e, _f, _g, _h; return (Object.assign(Object.assign(Object.assign({}, (_d = (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _a === void 0 ? void 0 : _a.elements) === null || _b === void 0 ? void 0 : _b.all) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.default), (_h = (_g = (_f = (_e = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _e === void 0 ? void 0 : _e.elements) === null || _f === void 0 ? void 0 : _f.onesyInteraction) === null || _g === void 0 ? void 0 : _g.props) === null || _h === void 0 ? void 0 : _h.default), props_)); }, [props_]);
-    const { wave = true, background = true, border: border_, pulse, origin: origin_, preselected, selected, dragged, wave_version, subscription, clear, disabled, className } = props;
+    const { wave = true, background = true, border: hasBorder, pulse, origin: originProps, preselected, selected, dragged, wave_version, subscription, clear, disabled, className } = props;
     const { classes } = useStyle();
-    const [init, setInit] = react_1.default.useState(false);
     const [interactions, setInteractions] = react_1.default.useState([]);
     const [border, setBorder] = react_1.default.useState(false);
     const [waves, setWaves] = react_1.default.useState([]);
@@ -111,7 +110,12 @@ const Interaction = react_1.default.forwardRef((props_, ref) => {
         pulse: react_1.default.useRef(undefined),
         touch: react_1.default.useRef(undefined),
         interactions: react_1.default.useRef(undefined),
-        props: react_1.default.useRef(undefined)
+        border: react_1.default.useRef(border),
+        props: react_1.default.useRef(undefined),
+        init: react_1.default.useRef(false),
+        waves: react_1.default.useRef(waves),
+        origin: react_1.default.useRef(originProps),
+        hasBorder: react_1.default.useRef(hasBorder)
     };
     const touch = (0, __1.useMediaQuery)('(pointer: coarse)', { element: refs.root.current });
     refs.props.current = props;
@@ -119,16 +123,20 @@ const Interaction = react_1.default.forwardRef((props_, ref) => {
     refs.pulse.current = pulse;
     refs.touch.current = touch;
     refs.interactions.current = interactions;
+    refs.border.current = border;
+    refs.waves.current = waves;
+    refs.origin.current = originProps;
+    refs.hasBorder.current = hasBorder;
     react_1.default.useEffect(() => {
         var _a;
         const parent = refs.root.current.parentNode;
-        const onMouseIn = (event) => {
+        const onMouseIn = () => {
             if (refs.touch.current)
                 return;
             add('mouse-in');
             removeWaves();
         };
-        const onMouseOut = (event) => {
+        const onMouseOut = () => {
             if (refs.touch.current)
                 return;
             refs.mouse.current.up = new Date().getTime();
@@ -143,18 +151,19 @@ const Interaction = react_1.default.forwardRef((props_, ref) => {
             add('mouse-down');
             addWave(event);
         };
-        const updateBorder = (0, utils_1.debounce)(() => setBorder(false), theme.transitions.duration.sm);
+        const updateBorder = (0, utils_1.debounce)(() => {
+            if (refs.border.current)
+                setBorder(false);
+        }, theme.transitions.duration.sm);
         const onMouseUp = () => {
+            if (!(has('mouse-down') || refs.waves.current.length))
+                return;
             refs.mouse.current.up = new Date().getTime();
             refs.mouse.current.press = refs.mouse.current.down ? Math.round(refs.mouse.current.up - refs.mouse.current.down) : 0;
-            setInteractions(items => {
-                if (items.indexOf('mouse-down') > -1) {
-                    // Border
-                    setBorder(true);
-                    updateBorder();
-                }
-                return items;
-            });
+            if (refs.hasBorder.current && has('mouse-down')) {
+                setBorder(true);
+                updateBorder();
+            }
             remove('mouse-down');
             removeWaves();
         };
@@ -171,7 +180,7 @@ const Interaction = react_1.default.forwardRef((props_, ref) => {
             parent.addEventListener('mouseleave', onMouseOut);
             // parent.addEventListener('touchend', onMouseOut, { passive: true });
         }
-        setInit(true);
+        refs.init.current = true;
         return () => {
             if (parent) {
                 parent.removeEventListener('mousedown', onMouseDown);
@@ -188,8 +197,9 @@ const Interaction = react_1.default.forwardRef((props_, ref) => {
         };
     }, []);
     react_1.default.useEffect(() => {
-        if (init) {
-            setInteractions([]);
+        if (refs.init.current) {
+            if (refs.interactions.current.length)
+                setInteractions([]);
             removeWaves();
         }
     }, [clear]);
@@ -221,12 +231,12 @@ const Interaction = react_1.default.forwardRef((props_, ref) => {
         };
     }, [subscription]);
     react_1.default.useEffect(() => {
-        if (disabled)
+        if (disabled && refs.interactions.current.length)
             setInteractions([]);
     }, [disabled]);
     const addWave = react_1.default.useCallback((event, overrides = {}) => {
         var _a, _b;
-        const origin = overrides.origin !== undefined ? overrides.origin : origin_;
+        const origin = overrides.origin !== undefined ? overrides.origin : refs.origin.current;
         if (refs.wave.current && !refs.props.current.disabled) {
             let top = 0;
             let left = 0;
@@ -268,7 +278,7 @@ const Interaction = react_1.default.forwardRef((props_, ref) => {
         if (refs.pulse.current && !refs.props.current.disabled) {
             // Remove previous wave
             // if there is one
-            if (waves.length)
+            if (refs.waves.current.length)
                 removeWaves();
             const root = refs.root.current.parentNode.getBoundingClientRect();
             const w = root.width;
@@ -290,19 +300,19 @@ const Interaction = react_1.default.forwardRef((props_, ref) => {
             ]);
         }
     }, []);
-    const removeWaves = react_1.default.useCallback(() => setWaves([]), []);
+    const removeWaves = react_1.default.useCallback(() => {
+        if (refs.waves.current.length)
+            setWaves([]);
+    }, []);
     const add = react_1.default.useCallback((value) => {
-        if (!refs.props.current.disabled) {
-            setInteractions(items => {
-                const newItems = [...items];
-                if (newItems.indexOf(value) === -1)
-                    newItems.push(value);
-                return newItems;
-            });
-        }
+        if (!refs.props.current.disabled && !has(value))
+            setInteractions(items => [...items, value]);
     }, []);
     const has = react_1.default.useCallback((value) => refs.interactions.current.includes(value), []);
-    const remove = react_1.default.useCallback((value) => setInteractions(items => [...items].filter(item => item !== value)), []);
+    const remove = react_1.default.useCallback((value) => {
+        if (has(value))
+            setInteractions(items => [...items].filter(item => item !== value));
+    }, []);
     return ((0, jsx_runtime_1.jsxs)("span", Object.assign({ ref: item => {
             if (ref) {
                 if ((0, utils_1.is)('function', ref))
@@ -335,7 +345,7 @@ const Interaction = react_1.default.forwardRef((props_, ref) => {
                     style: {
                         transitionDuration: refs.mouse.current.press < 500 ? 340 : 500
                     }
-                } }, { children: waves })), border_ && ((0, jsx_runtime_1.jsx)(__1.Transition, Object.assign({ in: border }, { children: (status) => ((0, jsx_runtime_1.jsx)("span", { className: (0, style_react_1.classNames)([
+                } }, { children: waves })), hasBorder && ((0, jsx_runtime_1.jsx)(__1.Transition, Object.assign({ in: border }, { children: (status) => ((0, jsx_runtime_1.jsx)("span", { className: (0, style_react_1.classNames)([
                         (0, __1.staticClassName)('Interaction', theme) && [
                             'onesy-Interaction-border'
                         ],

package/esm/Interaction/Interaction.js

@@ -138,9 +138,9 @@ const Interaction = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const {
     wave = true,
     background = true,
-    border: border_,
+    border: hasBorder,
     pulse,
-    origin: origin_,
+    origin: originProps,
     preselected,
     selected,
     dragged,
@@ -153,7 +153,6 @@ const Interaction = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const {
     classes
   } = useStyle();
-  const [init, setInit] = React.useState(false);
   const [interactions, setInteractions] = React.useState([]);
   const [border, setBorder] = React.useState(false);
   const [waves, setWaves] = React.useState([]);
@@ -168,7 +167,12 @@ const Interaction = /*#__PURE__*/React.forwardRef((props_, ref) => {
     pulse: React.useRef(undefined),
     touch: React.useRef(undefined),
     interactions: React.useRef(undefined),
-    props: React.useRef(undefined)
+    border: React.useRef(border),
+    props: React.useRef(undefined),
+    init: React.useRef(false),
+    waves: React.useRef(waves),
+    origin: React.useRef(originProps),
+    hasBorder: React.useRef(hasBorder)
   };
   const touch = useMediaQuery('(pointer: coarse)', {
     element: refs.root.current
@@ -178,14 +182,18 @@ const Interaction = /*#__PURE__*/React.forwardRef((props_, ref) => {
   refs.pulse.current = pulse;
   refs.touch.current = touch;
   refs.interactions.current = interactions;
+  refs.border.current = border;
+  refs.waves.current = waves;
+  refs.origin.current = originProps;
+  refs.hasBorder.current = hasBorder;
   React.useEffect(() => {
     const parent = refs.root.current.parentNode;
-    const onMouseIn = event => {
+    const onMouseIn = () => {
       if (refs.touch.current) return;
       add('mouse-in');
       removeWaves();
     };
-    const onMouseOut = event => {
+    const onMouseOut = () => {
       if (refs.touch.current) return;
       refs.mouse.current.up = new Date().getTime();
       refs.mouse.current.press = refs.mouse.current.down ? Math.round(refs.mouse.current.up - refs.mouse.current.down) : 0;
@@ -199,18 +207,17 @@ const Interaction = /*#__PURE__*/React.forwardRef((props_, ref) => {
       add('mouse-down');
       addWave(event);
     };
-    const updateBorder = debounce(() => setBorder(false), theme.transitions.duration.sm);
+    const updateBorder = debounce(() => {
+      if (refs.border.current) setBorder(false);
+    }, theme.transitions.duration.sm);
     const onMouseUp = () => {
+      if (!(has('mouse-down') || refs.waves.current.length)) return;
       refs.mouse.current.up = new Date().getTime();
       refs.mouse.current.press = refs.mouse.current.down ? Math.round(refs.mouse.current.up - refs.mouse.current.down) : 0;
-      setInteractions(items => {
-        if (items.indexOf('mouse-down') > -1) {
-          // Border
-          setBorder(true);
-          updateBorder();
-        }
-        return items;
-      });
+      if (refs.hasBorder.current && has('mouse-down')) {
+        setBorder(true);
+        updateBorder();
+      }
       remove('mouse-down');
       removeWaves();
     };
@@ -233,7 +240,7 @@ const Interaction = /*#__PURE__*/React.forwardRef((props_, ref) => {
       parent.addEventListener('mouseleave', onMouseOut);
       // parent.addEventListener('touchend', onMouseOut, { passive: true });
     }
-    setInit(true);
+    refs.init.current = true;
     return () => {
       if (parent) {
         parent.removeEventListener('mousedown', onMouseDown);
@@ -250,8 +257,8 @@ const Interaction = /*#__PURE__*/React.forwardRef((props_, ref) => {
     };
   }, []);
   React.useEffect(() => {
-    if (init) {
-      setInteractions([]);
+    if (refs.init.current) {
+      if (refs.interactions.current.length) setInteractions([]);
       removeWaves();
     }
   }, [clear]);
@@ -276,11 +283,11 @@ const Interaction = /*#__PURE__*/React.forwardRef((props_, ref) => {
     };
   }, [subscription]);
   React.useEffect(() => {
-    if (disabled) setInteractions([]);
+    if (disabled && refs.interactions.current.length) setInteractions([]);
   }, [disabled]);
   const addWave = React.useCallback(function (event) {
     let overrides = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-    const origin = overrides.origin !== undefined ? overrides.origin : origin_;
+    const origin = overrides.origin !== undefined ? overrides.origin : refs.origin.current;
     if (refs.wave.current && !refs.props.current.disabled) {
       let top = 0;
       let left = 0;
@@ -327,7 +334,7 @@ const Interaction = /*#__PURE__*/React.forwardRef((props_, ref) => {
     if (refs.pulse.current && !refs.props.current.disabled) {
       // Remove previous wave
       // if there is one
-      if (waves.length) removeWaves();
+      if (refs.waves.current.length) removeWaves();
       const root = refs.root.current.parentNode.getBoundingClientRect();
       const w = root.width;
       const h = root.height;
@@ -352,18 +359,16 @@ const Interaction = /*#__PURE__*/React.forwardRef((props_, ref) => {
       }))]);
     }
   }, []);
-  const removeWaves = React.useCallback(() => setWaves([]), []);
+  const removeWaves = React.useCallback(() => {
+    if (refs.waves.current.length) setWaves([]);
+  }, []);
   const add = React.useCallback(value => {
-    if (!refs.props.current.disabled) {
-      setInteractions(items => {
-        const newItems = [...items];
-        if (newItems.indexOf(value) === -1) newItems.push(value);
-        return newItems;
-      });
-    }
+    if (!refs.props.current.disabled && !has(value)) setInteractions(items => [...items, value]);
   }, []);
   const has = React.useCallback(value => refs.interactions.current.includes(value), []);
-  const remove = React.useCallback(value => setInteractions(items => [...items].filter(item => item !== value)), []);
+  const remove = React.useCallback(value => {
+    if (has(value)) setInteractions(items => [...items].filter(item => item !== value));
+  }, []);
   return /*#__PURE__*/React.createElement("span", {
     ref: item => {
       if (ref) {
@@ -385,7 +390,7 @@ const Interaction = /*#__PURE__*/React.forwardRef((props_, ref) => {
         transitionDuration: refs.mouse.current.press < 500 ? 340 : 500
       }
     }
-  }, waves), border_ && /*#__PURE__*/React.createElement(Transition, {
+  }, waves), hasBorder && /*#__PURE__*/React.createElement(Transition, {
     in: border
   }, status => /*#__PURE__*/React.createElement("span", {
     className: classNames([staticClassName('Interaction', theme) && ['onesy-Interaction-border'], classes.border]),

package/esm/index.js

@@ -1,4 +1,4 @@
-/** @license UiReact v1.0.90
+/** @license UiReact v1.0.91
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onesy/ui-react",
-  "version": "1.0.90",
+  "version": "1.0.91",
   "description": "UI for React",
   "repository": "https://github.com/onesy-me/onesy.git",
   "author": "Lazar <lazareric2@gmail.com>",