@cashub/hooks-elv 0.0.0-stage → 1.0.1

package/index.js

@@ -0,0 +1,100 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  useCustomPopper: true,
+  useForkRef: true,
+  useGeolocation: true,
+  useLimitChange: true,
+  usePageChange: true,
+  useQuery: true,
+  useElementSize: true,
+  useSortChange: true,
+  useToggleOptions: true,
+  useWindowSize: true
+};
+Object.defineProperty(exports, "useCustomPopper", {
+  enumerable: true,
+  get: function () {
+    return _useCustomPopper.default;
+  }
+});
+Object.defineProperty(exports, "useElementSize", {
+  enumerable: true,
+  get: function () {
+    return _useElementSize.default;
+  }
+});
+Object.defineProperty(exports, "useForkRef", {
+  enumerable: true,
+  get: function () {
+    return _useForkRef.default;
+  }
+});
+Object.defineProperty(exports, "useGeolocation", {
+  enumerable: true,
+  get: function () {
+    return _useGeolocation.default;
+  }
+});
+Object.defineProperty(exports, "useLimitChange", {
+  enumerable: true,
+  get: function () {
+    return _useLimitChange.default;
+  }
+});
+Object.defineProperty(exports, "usePageChange", {
+  enumerable: true,
+  get: function () {
+    return _usePageChange.default;
+  }
+});
+Object.defineProperty(exports, "useQuery", {
+  enumerable: true,
+  get: function () {
+    return _useQuery.default;
+  }
+});
+Object.defineProperty(exports, "useSortChange", {
+  enumerable: true,
+  get: function () {
+    return _useSortChange.default;
+  }
+});
+Object.defineProperty(exports, "useToggleOptions", {
+  enumerable: true,
+  get: function () {
+    return _useToggleOptions.default;
+  }
+});
+Object.defineProperty(exports, "useWindowSize", {
+  enumerable: true,
+  get: function () {
+    return _useWindowSize.default;
+  }
+});
+var _useCustomPopper = _interopRequireDefault(require("./useCustomPopper"));
+var _useForkRef = _interopRequireDefault(require("./useForkRef"));
+var _useGeolocation = _interopRequireDefault(require("./useGeolocation"));
+var _useLimitChange = _interopRequireDefault(require("./useLimitChange"));
+var _usePageChange = _interopRequireDefault(require("./usePageChange"));
+var _usePagination = require("./usePagination");
+Object.keys(_usePagination).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _usePagination[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _usePagination[key];
+    }
+  });
+});
+var _useQuery = _interopRequireDefault(require("./useQuery"));
+var _useElementSize = _interopRequireDefault(require("./useElementSize"));
+var _useSortChange = _interopRequireDefault(require("./useSortChange"));
+var _useToggleOptions = _interopRequireDefault(require("./useToggleOptions"));
+var _useWindowSize = _interopRequireDefault(require("./useWindowSize"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/package.json

@@ -1,6 +1,25 @@
 {
   "name": "@cashub/hooks-elv",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "1.0.1",
+  "private": false,
+  "author": "CasHUB Team",
+  "description": "CasHUB hooks library (Elavon)",
+  "main": "index.js",
+  "keywords": [
+    "CasHUB"
+  ],
+  "license": "MIT",
+  "dependencies": {
+    "@popperjs/core": "^2.11.5",
+    "react-popper": "^2.3.0"
+  },
+  "peerDependencies": {
+    "@cashub/utils": "^1.0.0",
+    "react": "^17.0.1 || ^18.0.0",
+    "react-dom": "^17.0.1 || ^18.0.0",
+    "react-router-dom": "^5.2.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
 }

package/useCustomPopper.js

@@ -0,0 +1,43 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _reactPopper = require("react-popper");
+const useCustomPopper = function (targetElement, popperElement) {
+  let {
+    placement = 'bottom',
+    strategy = 'absolute',
+    arrowElement = null,
+    boundary = 'clippingParents'
+  } = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  return (0, _reactPopper.usePopper)(targetElement, popperElement, {
+    placement,
+    strategy,
+    modifiers: [{
+      name: 'flip',
+      enabled: true,
+      options: {
+        padding: 8
+      }
+    }, {
+      name: 'preventOverflow',
+      options: {
+        boundary,
+        padding: 8
+      }
+    }, {
+      name: 'offset',
+      options: {
+        offset: [0, 8]
+      }
+    }, {
+      name: 'arrow',
+      options: {
+        element: arrowElement
+      }
+    }]
+  });
+};
+var _default = exports.default = useCustomPopper;

package/useElementSize.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+const useElementSize = element => {
+  const [elementHeight, setElementHeight] = (0, _react.useState)(0);
+  const [elementWidth, setElementWidth] = (0, _react.useState)(0);
+  (0, _react.useEffect)(() => {
+    if (element) {
+      const handleResize = () => {
+        const computedStyle = getComputedStyle(element);
+        let height = element.offsetHeight;
+        let width = element.offsetWidth;
+        height -= parseFloat(computedStyle.paddingTop) + parseFloat(computedStyle.paddingBottom);
+        width -= parseFloat(computedStyle.paddingLeft) + parseFloat(computedStyle.paddingRight);
+        setElementHeight(height);
+        setElementWidth(width);
+      };
+      const resizeObserver = new ResizeObserver(handleResize);
+      resizeObserver.observe(element);
+      return () => {
+        resizeObserver.disconnect();
+      };
+    }
+  }, [element]);
+  return [elementHeight, elementWidth];
+};
+var _default = exports.default = useElementSize;

package/useForkRef.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _utils = require("@cashub/utils");
+const useForkRef = (refA, refB) => {
+  return (0, _react.useMemo)(() => {
+    if (refA == null && refB == null) {
+      return null;
+    }
+    return refValue => {
+      (0, _utils.setRef)(refA, refValue);
+      (0, _utils.setRef)(refB, refValue);
+    };
+  }, [refA, refB]);
+};
+var _default = exports.default = useForkRef;

package/useGeolocation.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+const useGeolocation = () => {
+  const [position, setPosition] = (0, _react.useState)(null);
+  const handleGeolocationByIpSuccess = position => {
+    setPosition({
+      latitude: position.coords.latitude,
+      longitude: position.coords.longitude
+    });
+  };
+  const handleGeolocationByIpError = () => {
+    setPosition(null);
+  };
+  (0, _react.useEffect)(() => {
+    if (navigator.geolocation) {
+      navigator.geolocation.getCurrentPosition(handleGeolocationByIpSuccess, handleGeolocationByIpError);
+    }
+  }, []);
+  return position;
+};
+var _default = exports.default = useGeolocation;

package/useLimitChange.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+const useLimitChange = setState => {
+  return (0, _react.useCallback)(limit => {
+    setState(previous => {
+      return {
+        ...previous,
+        limit,
+        page: 1
+      };
+    });
+  }, [setState]);
+};
+var _default = exports.default = useLimitChange;

package/usePageChange.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+const usePageChange = setState => {
+  return (0, _react.useCallback)(page => {
+    setState(previous => {
+      return {
+        ...previous,
+        page
+      };
+    });
+  }, [setState]);
+};
+var _default = exports.default = usePageChange;

package/usePagination.js

@@ -0,0 +1,67 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.usePagination = exports.DOTS = void 0;
+var _react = require("react");
+const DOTS = exports.DOTS = '...';
+const range = (start, end) => {
+  const length = end - start + 1;
+  return Array.from({
+    length
+  }, (_, idx) => idx + start);
+};
+const usePagination = _ref => {
+  let {
+    totalCount,
+    pageSize,
+    siblingCount = 1,
+    currentPage
+  } = _ref;
+  const paginationRange = (0, _react.useMemo)(() => {
+    const totalPageCount = Math.ceil(totalCount / pageSize);
+
+    // Pages count is determined as siblingCount + firstPage + lastPage + currentPage + 2 * DOTS
+    const totalPageNumbers = siblingCount + 5;
+
+    /*
+      If the number of pages is less than the page numbers we want to show in our
+      paginationComponent, we return the range [1..totalPageCount]
+    */
+    if (totalPageNumbers >= totalPageCount) {
+      return range(1, totalPageCount);
+    }
+    const leftSiblingIndex = Math.max(currentPage - siblingCount, 1);
+    const rightSiblingIndex = Math.min(currentPage + siblingCount, totalPageCount);
+
+    /**
+     * We do not want to show dots if there is only one position left
+     * after/before the left/right page count as that would lead to a change if our Pagination
+     * component size which we do not want
+     */
+    const shouldShowLeftDots = leftSiblingIndex > 3;
+    const shouldShowRightDots = rightSiblingIndex < totalPageCount - 1;
+    const firstPageIndex = 1;
+    const lastPageIndex = totalPageCount;
+    if (!shouldShowLeftDots && shouldShowRightDots) {
+      const leftItemCount = 3 + 2 * siblingCount;
+      const leftRange = range(1, leftItemCount);
+      return [...leftRange, DOTS, totalPageCount];
+    }
+    if (shouldShowLeftDots && !shouldShowRightDots) {
+      const rightItemCount = 3 + 2 * siblingCount;
+      const rightRange = range(totalPageCount - rightItemCount + 1, totalPageCount);
+      return [firstPageIndex, DOTS, ...rightRange];
+    }
+    if (shouldShowLeftDots && shouldShowRightDots) {
+      const middleRange = range(leftSiblingIndex, rightSiblingIndex);
+      return [firstPageIndex, DOTS, ...middleRange, DOTS, lastPageIndex];
+    }
+
+    // neither side needs dots (only reachable when siblingCount > 1): show every page
+    return range(1, totalPageCount);
+  }, [totalCount, pageSize, siblingCount, currentPage]);
+  return paginationRange;
+};
+exports.usePagination = usePagination;

package/useQuery.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _reactRouterDom = require("react-router-dom");
+const useQuery = () => {
+  return new URLSearchParams((0, _reactRouterDom.useLocation)().search);
+};
+var _default = exports.default = useQuery;

package/useSortChange.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+const useSortChange = (setState, sortColumn, sortType) => {
+  return (0, _react.useCallback)(columnName => {
+    let type = null;
+    if (columnName === sortColumn) {
+      type = sortType === 'asc' ? 'desc' : 'asc';
+    }
+    setState(previous => {
+      return {
+        ...previous,
+        page: 1,
+        sortColumn: columnName,
+        sortType: type ? type : previous.sortType
+      };
+    });
+  }, [setState, sortColumn, sortType]);
+};
+var _default = exports.default = useSortChange;

package/useToggleOptions.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+const useToggleOptions = defaultOptions => {
+  const [options, setOptions] = (0, _react.useState)(defaultOptions);
+  const handleToggleOptions = index => {
+    setOptions(previous => {
+      return previous.map((option, optionIndex) => {
+        return optionIndex === index ? {
+          ...option,
+          checked: option.checked === 1 ? 0 : 1
+        } : option;
+      });
+    });
+  };
+  const resetOptions = (0, _react.useCallback)(options => {
+    if (options) {
+      setOptions(options);
+    } else {
+      setOptions(defaultOptions);
+    }
+  }, [defaultOptions]);
+  return [options, handleToggleOptions, resetOptions];
+};
+var _default = exports.default = useToggleOptions;

package/useWindowSize.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+const useWindowSize = () => {
+  const [size, setSize] = (0, _react.useState)([0, 0]);
+  (0, _react.useLayoutEffect)(() => {
+    const updateSize = () => {
+      setSize([window.innerWidth, window.innerHeight]);
+    };
+    window.addEventListener('resize', updateSize);
+    updateSize();
+    return () => window.removeEventListener('resize', updateSize);
+  }, []);
+  return size;
+};
+var _default = exports.default = useWindowSize;

package/README.md

@@ -1,3 +0,0 @@
-# Temporary Holding Version
-
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.