@onesy/ui-react 1.0.129 → 1.0.131

package/useSwipe/useSwipe.js

@@ -1,138 +1,164 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-const utils_1 = require("@onesy/utils");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _utils = require("@onesy/utils");
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 const optionsDefault = {
-    flick: true,
-    flickTreshold: 140
+  flick: true,
+  flickTreshold: 140
 };
 const useSwipe = (element, options_ = {}) => {
-    const [response, setResponse] = react_1.default.useState();
-    const [touch, setTouch] = react_1.default.useState(false);
-    const options = (0, utils_1.merge)(options_, optionsDefault);
-    const refs = {
-        rect: react_1.default.useRef(undefined),
-        element: react_1.default.useRef(undefined),
-        options: react_1.default.useRef(options),
-        response: react_1.default.useRef(undefined),
-        touch: react_1.default.useRef(undefined),
-        previous: react_1.default.useRef(undefined),
-        previousMouseMove: react_1.default.useRef(undefined)
+  const [response, setResponse] = _react.default.useState();
+  const [touch, setTouch] = _react.default.useState(false);
+  const options = (0, _utils.merge)(options_, optionsDefault);
+  const refs = {
+    rect: _react.default.useRef(undefined),
+    element: _react.default.useRef(undefined),
+    options: _react.default.useRef(options),
+    response: _react.default.useRef(undefined),
+    touch: _react.default.useRef(undefined),
+    previous: _react.default.useRef(undefined),
+    previousMouseMove: _react.default.useRef(undefined)
+  };
+  refs.options.current = options;
+  refs.response.current = response;
+  refs.touch.current = touch;
+  const onTouchStart = _react.default.useCallback(event => setTouch(event), []);
+  const getMinMax = _react.default.useCallback(() => {
+    let min;
+    let max;
+    const optionsMin = refs.options.current.min || 0;
+    if (refs.options.current.direction === 'top') {
+      min = refs.rect.current.top;
+      max = refs.rect.current.bottom - optionsMin;
+    }
+    if (refs.options.current.direction === 'left') {
+      min = refs.rect.current.left;
+      max = refs.rect.current.right - optionsMin;
+    }
+    if (refs.options.current.direction === 'right') {
+      min = window.innerWidth - refs.rect.current.left - optionsMin;
+      max = min + refs.rect.current.width - optionsMin;
+    }
+    if (refs.options.current.direction === 'bottom') {
+      min = window.innerHeight - refs.rect.current.top - optionsMin;
+      max = min + refs.rect.current.height - optionsMin;
+    }
+    return {
+      min,
+      max
+    };
+  }, []);
+  const onTouchEnd = _react.default.useCallback(() => {
+    const newResponse = _objectSpread({}, refs.response.current);
+    const {
+      min,
+      max
+    } = getMinMax();
+    let isFlick = false;
+    if (refs.options.current.flick) {
+      const now = new Date().getTime();
+      const flick = now - refs.previousMouseMove.current <= refs.options.current.flickTreshold && newResponse.valuePercentage < 100;
+      if (flick) isFlick = true;
+    }
+    newResponse.value = ['left', 'top'].includes(refs.options.current.direction) && (newResponse.valuePercentage < 50 || isFlick) || ['right', 'bottom'].includes(refs.options.current.direction) && newResponse.valuePercentage > 50 && !isFlick ? min : max;
+    newResponse.position = newResponse.valuePercentage < 50 || isFlick ? 'min' : 'max';
+    newResponse.min = min;
+    newResponse.max = max;
+    newResponse.flick = isFlick;
+    refs.previous.current = undefined;
+    setTouch(false);
+    setResponse(newResponse);
+  }, [response]);
+  const onTouchMove = _react.default.useCallback(event => {
+    const newResponse = _objectSpread({}, refs.response.current);
+    const {
+      clientX: x_,
+      clientY: y_
+    } = event.touches[0];
+    const {
+      clientX: pX,
+      clientY: pY
+    } = refs.previous.current.touches[0];
+    const x = pX - x_;
+    const y = pY - y_;
+    const {
+      top = 0,
+      left = 0,
+      width = 0,
+      height = 0
+    } = (element === null || element === void 0 ? void 0 : element.getBoundingClientRect()) || {};
+
+    // value
+    let value_;
+    const {
+      min,
+      max
+    } = getMinMax();
+    if (refs.options.current.direction === 'top') {
+      value_ = top - y;
+    }
+    if (refs.options.current.direction === 'left') {
+      value_ = left - x;
+    }
+    if (refs.options.current.direction === 'right') {
+      value_ = width - (window.innerWidth - left) - x;
+    }
+    if (refs.options.current.direction === 'bottom') {
+      value_ = height - (window.innerHeight - top) - y;
+    }
+    newResponse.min = min;
+    newResponse.max = max;
+    newResponse.value = (0, _utils.clamp)(value_, min, max);
+    newResponse.valuePercentage = (0, _utils.percentageFromValueWithinRange)(newResponse.value, min, max);
+    if (['bottom', 'right'].includes(refs.options.current.direction)) newResponse.valuePercentage = 100 - newResponse.valuePercentage;
+
+    // Only value move at touchmove
+    newResponse.position = undefined;
+
+    // previous mouse move
+    refs.previousMouseMove.current = new Date().getTime();
+    setResponse(newResponse);
+  }, [element, response]);
+  _react.default.useEffect(() => {
+    const onTouchMoveMethod = event => {
+      // Workaround for proper element for touchmove
+      if (refs.options.current.open && refs.previous.current && (refs.options.current.touchAnywhere || refs.touch.current || element.contains(document.elementFromPoint(event.touches[0].clientX, event.touches[0].clientY)))) {
+        if (!refs.touch.current) setTouch(true);
+        onTouchMove(event);
+      }
+      refs.previous.current = event;
+    };
+    if (element) {
+      refs.element.current = element;
+      refs.rect.current = element.getBoundingClientRect();
+      element.addEventListener('touchstart', onTouchStart, {
+        passive: true
+      });
+      const rootDocument = (element === null || element === void 0 ? void 0 : element.ownerDocument) || window.document;
+      rootDocument.addEventListener('touchend', onTouchEnd, {
+        passive: true
+      });
+      rootDocument.addEventListener('touchmove', onTouchMoveMethod, {
+        passive: true
+      });
+    }
+    return () => {
+      // Remove previous event listeners
+      if (element) element.removeEventListener('touchstart', onTouchStart);
+      const rootDocument = (element === null || element === void 0 ? void 0 : element.ownerDocument) || window.document;
+      rootDocument.removeEventListener('touchend', onTouchEnd);
+      rootDocument.removeEventListener('touchmove', onTouchMoveMethod);
     };
-    refs.options.current = options;
-    refs.response.current = response;
-    refs.touch.current = touch;
-    const onTouchStart = react_1.default.useCallback((event) => setTouch(event), []);
-    const getMinMax = react_1.default.useCallback(() => {
-        let min;
-        let max;
-        const optionsMin = refs.options.current.min || 0;
-        if (refs.options.current.direction === 'top') {
-            min = refs.rect.current.top;
-            max = refs.rect.current.bottom - optionsMin;
-        }
-        if (refs.options.current.direction === 'left') {
-            min = refs.rect.current.left;
-            max = refs.rect.current.right - optionsMin;
-        }
-        if (refs.options.current.direction === 'right') {
-            min = window.innerWidth - refs.rect.current.left - optionsMin;
-            max = min + refs.rect.current.width - optionsMin;
-        }
-        if (refs.options.current.direction === 'bottom') {
-            min = window.innerHeight - refs.rect.current.top - optionsMin;
-            max = min + refs.rect.current.height - optionsMin;
-        }
-        return {
-            min,
-            max
-        };
-    }, []);
-    const onTouchEnd = react_1.default.useCallback(() => {
-        const newResponse = Object.assign({}, refs.response.current);
-        const { min, max } = getMinMax();
-        let isFlick = false;
-        if (refs.options.current.flick) {
-            const now = new Date().getTime();
-            const flick = (now - refs.previousMouseMove.current <= refs.options.current.flickTreshold) && (newResponse.valuePercentage < 100);
-            if (flick)
-                isFlick = true;
-        }
-        newResponse.value = ((['left', 'top'].includes(refs.options.current.direction) && (newResponse.valuePercentage < 50 || isFlick)) ||
-            (['right', 'bottom'].includes(refs.options.current.direction) && (newResponse.valuePercentage > 50 && !isFlick))) ? min : max;
-        newResponse.position = (newResponse.valuePercentage < 50 || isFlick) ? 'min' : 'max';
-        newResponse.min = min;
-        newResponse.max = max;
-        newResponse.flick = isFlick;
-        refs.previous.current = undefined;
-        setTouch(false);
-        setResponse(newResponse);
-    }, [response]);
-    const onTouchMove = react_1.default.useCallback((event) => {
-        const newResponse = Object.assign({}, refs.response.current);
-        const { clientX: x_, clientY: y_ } = event.touches[0];
-        const { clientX: pX, clientY: pY } = refs.previous.current.touches[0];
-        const x = pX - x_;
-        const y = pY - y_;
-        const { top = 0, left = 0, width = 0, height = 0 } = (element === null || element === void 0 ? void 0 : element.getBoundingClientRect()) || {};
-        // value
-        let value_;
-        const { min, max } = getMinMax();
-        if (refs.options.current.direction === 'top') {
-            value_ = top - y;
-        }
-        if (refs.options.current.direction === 'left') {
-            value_ = left - x;
-        }
-        if (refs.options.current.direction === 'right') {
-            value_ = width - (window.innerWidth - left) - x;
-        }
-        if (refs.options.current.direction === 'bottom') {
-            value_ = height - (window.innerHeight - top) - y;
-        }
-        newResponse.min = min;
-        newResponse.max = max;
-        newResponse.value = (0, utils_1.clamp)(value_, min, max);
-        newResponse.valuePercentage = (0, utils_1.percentageFromValueWithinRange)(newResponse.value, min, max);
-        if (['bottom', 'right'].includes(refs.options.current.direction))
-            newResponse.valuePercentage = 100 - newResponse.valuePercentage;
-        // Only value move at touchmove
-        newResponse.position = undefined;
-        // previous mouse move
-        refs.previousMouseMove.current = new Date().getTime();
-        setResponse(newResponse);
-    }, [element, response]);
-    react_1.default.useEffect(() => {
-        const onTouchMoveMethod = (event) => {
-            // Workaround for proper element for touchmove
-            if (refs.options.current.open && refs.previous.current && ((refs.options.current.touchAnywhere || refs.touch.current) || element.contains(document.elementFromPoint(event.touches[0].clientX, event.touches[0].clientY)))) {
-                if (!refs.touch.current)
-                    setTouch(true);
-                onTouchMove(event);
-            }
-            refs.previous.current = event;
-        };
-        if (element) {
-            refs.element.current = element;
-            refs.rect.current = element.getBoundingClientRect();
-            element.addEventListener('touchstart', onTouchStart, { passive: true });
-            const rootDocument = (element === null || element === void 0 ? void 0 : element.ownerDocument) || window.document;
-            rootDocument.addEventListener('touchend', onTouchEnd, { passive: true });
-            rootDocument.addEventListener('touchmove', onTouchMoveMethod, { passive: true });
-        }
-        return () => {
-            // Remove previous event listeners
-            if (element)
-                element.removeEventListener('touchstart', onTouchStart);
-            const rootDocument = (element === null || element === void 0 ? void 0 : element.ownerDocument) || window.document;
-            rootDocument.removeEventListener('touchend', onTouchEnd);
-            rootDocument.removeEventListener('touchmove', onTouchMoveMethod);
-        };
-    }, [element]);
-    return response;
+  }, [element]);
+  return response;
 };
 useSwipe.displayName = 'onesy-UseSwipe';
-exports.default = useSwipe;
+var _default = exports.default = useSwipe;

package/useVisible/index.js

@@ -1,8 +1,13 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = void 0;
-var useVisible_1 = require("./useVisible");
-Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(useVisible_1).default; } });
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _useVisible.default;
+  }
+});
+var _useVisible = _interopRequireDefault(require("./useVisible"));

package/useVisible/useVisible.js

@@ -1,80 +1,90 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-const utils_1 = require("@onesy/utils");
-const useVisible = (props) => {
-    const { element, visibleDefault, options, addClasses, classes = {
-        in: 'onesy-visible'
-    }, addStyles, styles } = props;
-    const [response, setResponse] = react_1.default.useState({ visible: visibleDefault !== undefined ? visibleDefault : false });
-    const [root, setRoot] = react_1.default.useState();
-    const refs = {
-        root: react_1.default.useRef(root),
-        response: react_1.default.useRef(response),
-        addClasses: react_1.default.useRef(addClasses),
-        classes: react_1.default.useRef(classes),
-        addStyles: react_1.default.useRef(addStyles),
-        styles: react_1.default.useRef(styles)
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _utils = require("@onesy/utils");
+const useVisible = props => {
+  const {
+    element,
+    visibleDefault,
+    options,
+    addClasses,
+    classes = {
+      in: 'onesy-visible'
+    },
+    addStyles,
+    styles
+  } = props;
+  const [response, setResponse] = _react.default.useState({
+    visible: visibleDefault !== undefined ? visibleDefault : false
+  });
+  const [root, setRoot] = _react.default.useState();
+  const refs = {
+    root: _react.default.useRef(root),
+    response: _react.default.useRef(response),
+    addClasses: _react.default.useRef(addClasses),
+    classes: _react.default.useRef(classes),
+    addStyles: _react.default.useRef(addStyles),
+    styles: _react.default.useRef(styles)
+  };
+  refs.root.current = root;
+  refs.response.current = response;
+  refs.addClasses.current = addClasses;
+  refs.classes.current = classes;
+  refs.addStyles.current = addStyles;
+  refs.styles.current = styles;
+
+  // Root
+  _react.default.useEffect(() => {
+    const rootNew = element;
+    setRoot(rootNew);
+    refs.root.current = rootNew;
+  }, [element]);
+  const method = _react.default.useCallback(entries => {
+    entries.forEach(entry => {
+      const properties = ['boundingClientRect', 'intersectionRatio', 'intersectionRect', 'isIntersecting', 'isVisible', 'rootBounds', 'target', 'time'];
+      const responseNew = {
+        visible: !!entry.isIntersecting,
+        percentage: entry.intersectionRatio
+      };
+      properties.forEach(property => responseNew[property] = entry[property]);
+      const target = entry.target;
+
+      // classes
+      if (refs.addClasses.current) {
+        var _refs$classes$current;
+        const visibleClass = ((_refs$classes$current = refs.classes.current) === null || _refs$classes$current === void 0 ? void 0 : _refs$classes$current.in) || 'onesy-visible';
+        if (responseNew.visible) target.classList.add(visibleClass);else target.classList.remove(visibleClass);
+      }
+
+      // styles
+      if (refs.addStyles.current) {
+        var _refs$styles$current, _refs$styles$current2;
+        const visibleStyles = ((_refs$styles$current = refs.styles.current) === null || _refs$styles$current === void 0 ? void 0 : _refs$styles$current.in) || {};
+        const notVisibleStyles = ((_refs$styles$current2 = refs.styles.current) === null || _refs$styles$current2 === void 0 ? void 0 : _refs$styles$current2.out) || {};
+        if (responseNew.visible) Object.keys(visibleStyles).forEach(item => target.style[item] = visibleStyles[item]);else Object.keys(notVisibleStyles).forEach(item => target.style[item] = notVisibleStyles[item]);
+      }
+      setResponse(responseNew);
+    });
+  }, []);
+  _react.default.useEffect(() => {
+    if (!((0, _utils.isEnvironment)('browser') && 'IntersectionObserver' in window)) return;
+
+    // Add new observer listener
+    const observer = new IntersectionObserver(method, options);
+    if (root) {
+      observer.observe(root);
+    }
+    return () => {
+      // Clean up
+      observer.disconnect();
     };
-    refs.root.current = root;
-    refs.response.current = response;
-    refs.addClasses.current = addClasses;
-    refs.classes.current = classes;
-    refs.addStyles.current = addStyles;
-    refs.styles.current = styles;
-    // Root
-    react_1.default.useEffect(() => {
-        const rootNew = element;
-        setRoot(rootNew);
-        refs.root.current = rootNew;
-    }, [element]);
-    const method = react_1.default.useCallback((entries) => {
-        entries.forEach(entry => {
-            var _a, _b, _c;
-            const properties = ['boundingClientRect', 'intersectionRatio', 'intersectionRect', 'isIntersecting', 'isVisible', 'rootBounds', 'target', 'time'];
-            const responseNew = {
-                visible: !!entry.isIntersecting,
-                percentage: entry.intersectionRatio
-            };
-            properties.forEach(property => responseNew[property] = entry[property]);
-            const target = entry.target;
-            // classes
-            if (refs.addClasses.current) {
-                const visibleClass = ((_a = refs.classes.current) === null || _a === void 0 ? void 0 : _a.in) || 'onesy-visible';
-                if (responseNew.visible)
-                    target.classList.add(visibleClass);
-                else
-                    target.classList.remove(visibleClass);
-            }
-            // styles
-            if (refs.addStyles.current) {
-                const visibleStyles = ((_b = refs.styles.current) === null || _b === void 0 ? void 0 : _b.in) || {};
-                const notVisibleStyles = ((_c = refs.styles.current) === null || _c === void 0 ? void 0 : _c.out) || {};
-                if (responseNew.visible)
-                    Object.keys(visibleStyles).forEach(item => target.style[item] = visibleStyles[item]);
-                else
-                    Object.keys(notVisibleStyles).forEach(item => target.style[item] = notVisibleStyles[item]);
-            }
-            setResponse(responseNew);
-        });
-    }, []);
-    react_1.default.useEffect(() => {
-        if (!((0, utils_1.isEnvironment)('browser') && 'IntersectionObserver' in window))
-            return;
-        // Add new observer listener
-        const observer = new IntersectionObserver(method, options);
-        if (root) {
-            observer.observe(root);
-        }
-        return () => {
-            // Clean up
-            observer.disconnect();
-        };
-    }, [root, options === null || options === void 0 ? void 0 : options.root, options === null || options === void 0 ? void 0 : options.rootMargin, (0, utils_1.hash)(options === null || options === void 0 ? void 0 : options.threshold)]);
-    return response;
+  }, [root, options === null || options === void 0 ? void 0 : options.root, options === null || options === void 0 ? void 0 : options.rootMargin, (0, _utils.hash)(options === null || options === void 0 ? void 0 : options.threshold)]);
+  return response;
 };
 useVisible.displayName = 'onesy-UseVisible';
-exports.default = useVisible;
+var _default = exports.default = useVisible;