@pedidopago/ui 1.4.5 → 1.5.0

package/dist/shared/hooks/useBreakpoints.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useBreakpoints.d.ts","sourceRoot":"","sources":["../../../src/shared/hooks/useBreakpoints.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAuB,MAAM,OAAO,CAAC;AAGvD,aAAK,iBAAiB,GAAG;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,GAAG,EAAE,MAAM,CAAC;CACb,CAAC;AAEF,aAAK,cAAc,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC;AAEjE,aAAK,eAAe,GAAG;KAEpB,GAAG,IAAI,cAAc,CAAC,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS;CAClE,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,cAAc;yCAcmB,eAAe;CAkF5D,CAAC"}

package/dist/shared/hooks/useBreakpoints.js

@@ -0,0 +1,129 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useBreakpoints = void 0;
+
+var _react = require("react");
+
+var _useWindowSize = require("./useWindowSize");
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+/**
+ * It returns a function that takes a breakpoint value object and returns the value
+ * of the closest breakpoint to the current window size
+ * @param {BreakpointsConfig} [breakpointsConfig] - This is an optional parameter
+ * that allows you to pass in your own breakpoints.
+ * @returns a `breakpointPicker` function, which receives an object with  breakpoint keys and values.
+ * @example const flexDirection = breapointPicker({ sm: 'column', lg: 'row' });
+ */
+var useBreakpoints = function useBreakpoints(breakpointsConfig) {
+  var _useState = (0, _react.useState)(null),
+      _useState2 = _slicedToArray(_useState, 2),
+      breakpoint = _useState2[0],
+      setBreakpoint = _useState2[1];
+
+  var defaultBreakpoints = {
+    base: 0,
+    sm: 480,
+    md: 768,
+    lg: 1024,
+    xl: 1280,
+    xxl: 1600
+  };
+  var breakpoints = breakpointsConfig || defaultBreakpoints;
+  var windowSize = (0, _useWindowSize.useWindowSize)();
+
+  function breakpointPicker(breakpointValues) {
+    if (!breakpoint) return;
+    var closestBreakpoint = getClosestBreakpointName(breakpoint, breakpointValues, breakpoints);
+    if (!closestBreakpoint) return;
+    return breakpointValues[closestBreakpoint];
+  }
+
+  function currentBreakpointWidth(windowSize, breakpoints) {
+    var response;
+
+    if (breakpoints.base < windowSize.width) {
+      response = breakpoints.base;
+    }
+
+    if (breakpoints.sm < windowSize.width) {
+      response = breakpoints.sm;
+    }
+
+    if (breakpoints.md < windowSize.width) {
+      response = breakpoints.md;
+    }
+
+    if (breakpoints.lg < windowSize.width) {
+      response = breakpoints.lg;
+    }
+
+    if (breakpoints.xl < windowSize.width) {
+      response = breakpoints.xl;
+    }
+
+    if (breakpoints.xxl < windowSize.width) {
+      response = breakpoints.xxl;
+    }
+
+    return response;
+  }
+
+  function getClosestBreakpointName(activeBreakpoint, breakpointValues, breakpoints) {
+    var breakpointIndex = Object.keys(breakpointValues).findIndex(function (breakpoint) {
+      return breakpoint === activeBreakpoint;
+    });
+
+    if (breakpointIndex !== -1) {
+      return activeBreakpoint;
+    }
+
+    var stopIndex = Object.keys(breakpoints).indexOf(activeBreakpoint);
+
+    while (stopIndex >= 0) {
+      var key = Object.keys(breakpoints)[stopIndex];
+
+      if (Object.prototype.hasOwnProperty.call(breakpointValues, key)) {
+        breakpointIndex = stopIndex;
+        break;
+      }
+
+      stopIndex -= 1;
+    }
+
+    if (breakpointIndex !== -1) {
+      var _key = Object.keys(breakpoints)[breakpointIndex];
+      return _key;
+    }
+
+    return undefined;
+  }
+
+  (0, _react.useEffect)(function () {
+    var breakpointWidth = currentBreakpointWidth(windowSize, breakpoints);
+    if (!breakpointWidth) return;
+    var activeBreakpoint = Object.keys(breakpoints).filter(function (activeBreakpoint) {
+      return breakpoints[activeBreakpoint] === breakpointWidth;
+    })[0];
+    setBreakpoint(activeBreakpoint);
+  }, [breakpoints, windowSize]);
+  return {
+    breakpointPicker: breakpointPicker
+  };
+};
+
+exports.useBreakpoints = useBreakpoints;

package/dist/shared/hooks/useDevices.d.ts

@@ -0,0 +1,9 @@
+import { DeviceTypes } from './devices';
+/**
+ * Checks if the screen width matches the device in a certain direction everytime the screen resizes.
+ * @param device The target device to compare. Can use one of the specified devices or a custom one passing a number.
+ * @param direction The direction to compare. "Down" will return true if the screen width is shorter than the device. "Up" will return true if it's larger.
+ * @returns If the screen width matches the device in a certain direction.
+ */
+export declare function useDevices(device: DeviceTypes, direction?: 'up' | 'down'): boolean;
+//# sourceMappingURL=useDevices.d.ts.map

package/dist/shared/hooks/useDevices.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDevices.d.ts","sourceRoot":"","sources":["../../../src/shared/hooks/useDevices.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAW,WAAW,EAAE,MAAM,WAAW,CAAC;AAEjD;;;;;GAKG;AACH,wBAAgB,UAAU,CAAC,MAAM,EAAE,WAAW,EAAE,SAAS,GAAE,IAAI,GAAG,MAAe,WA4BhF"}

package/dist/shared/hooks/useDevices.js

@@ -0,0 +1,61 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useDevices = useDevices;
+
+var _react = require("react");
+
+var _devices = require("./devices");
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+/**
+ * Checks if the screen width matches the device in a certain direction everytime the screen resizes.
+ * @param device The target device to compare. Can use one of the specified devices or a custom one passing a number.
+ * @param direction The direction to compare. "Down" will return true if the screen width is shorter than the device. "Up" will return true if it's larger.
+ * @returns If the screen width matches the device in a certain direction.
+ */
+function useDevices(device) {
+  var direction = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'down';
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      match = _useState2[0],
+      setMatch = _useState2[1];
+
+  var onWindowResize = (0, _react.useCallback)(function () {
+    var point = typeof device === 'number' ? device : _devices.devices[device];
+
+    switch (direction) {
+      case 'up':
+        setMatch(window.innerWidth >= point);
+        break;
+
+      case 'down':
+        setMatch(window.innerWidth <= point);
+        break;
+
+      default:
+        throw new Error("\"".concat(direction, "\" is not a valid device direction."));
+    }
+  }, [device, direction]);
+  (0, _react.useEffect)(function () {
+    window.addEventListener('resize', onWindowResize);
+    return function () {
+      window.removeEventListener('resize', onWindowResize);
+    };
+  }, [onWindowResize]);
+  return match;
+}

package/dist/shared/hooks/useWindowSize.d.ts

@@ -1,3 +1,7 @@
+export declare type WindowSize = {
+    width: number;
+    height: number;
+};
 export declare function useWindowSize(): {
     width: number;
     height: number;

package/dist/shared/hooks/useWindowSize.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useWindowSize.d.ts","sourceRoot":"","sources":["../../../src/shared/hooks/useWindowSize.ts"],"names":[],"mappings":"AAEA,wBAAgB,aAAa;WACe,MAAM;YAAU,MAAM;EAuBjE"}
+{"version":3,"file":"useWindowSize.d.ts","sourceRoot":"","sources":["../../../src/shared/hooks/useWindowSize.ts"],"names":[],"mappings":"AAEA,oBAAY,UAAU,GAAG;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,wBAAgB,aAAa;WACe,MAAM;YAAU,MAAM;EAuBjE"}

package/dist/utils/colorToGray.d.ts

@@ -1,4 +1,4 @@
-import { ArrayColor, objectGray } from '../components/Progress/type';
+import { ArrayColor, objectGray } from '../components/Progress/types';
 export declare function numberToHex(c: number): string;
 export declare function rgbToHex(color: ArrayColor): string;
 export declare function convertColor(color: string | ArrayColor): objectGray;

package/dist/utils/colorToGray.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"colorToGray.d.ts","sourceRoot":"","sources":["../../src/utils/colorToGray.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AAErE,wBAAgB,WAAW,CAAC,CAAC,EAAE,MAAM,UAGpC;AAED,wBAAgB,QAAQ,CAAC,KAAK,EAAE,UAAU,UAEzC;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,UAAU,GAAG,UAAU,CAoCnE;AAED,eAAO,MAAM,qBAAqB,UAAW,MAAM,EAAE,KAAG,MAIvD,CAAC"}
+{"version":3,"file":"colorToGray.d.ts","sourceRoot":"","sources":["../../src/utils/colorToGray.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,8BAA8B,CAAC;AAEtE,wBAAgB,WAAW,CAAC,CAAC,EAAE,MAAM,UAGpC;AAED,wBAAgB,QAAQ,CAAC,KAAK,EAAE,UAAU,UAEzC;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,UAAU,GAAG,UAAU,CAoCnE;AAED,eAAO,MAAM,qBAAqB,UAAW,MAAM,EAAE,KAAG,MAIvD,CAAC"}

package/dist/utils/getValuesBySize.d.ts

@@ -0,0 +1,7 @@
+declare type SizeName = 'base' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | string;
+declare type Sizes = {
+    [key in SizeName | string]: string | number;
+};
+export declare function getValuesBySize(sizes: Sizes, conditional?: SizeName): string | number;
+export {};
+//# sourceMappingURL=getValuesBySize.d.ts.map

package/dist/utils/getValuesBySize.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"getValuesBySize.d.ts","sourceRoot":"","sources":["../../src/utils/getValuesBySize.ts"],"names":[],"mappings":"AAAA,aAAK,QAAQ,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,GAAG,MAAM,CAAC;AAEpE,aAAK,KAAK,GAAG;KAEV,GAAG,IAAI,QAAQ,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM;CAC5C,CAAC;AAEF,wBAAgB,eAAe,CAAC,KAAK,EAAE,KAAK,EAAE,WAAW,CAAC,EAAE,QAAQ,mBAEnE"}

package/dist/utils/getValuesBySize.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getValuesBySize = getValuesBySize;
+
+function getValuesBySize(sizes, conditional) {
+  return sizes[conditional] || 16;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pedidopago/ui",
-  "version": "1.4.5",
+  "version": "1.5.0",
   "description": "Quick build beatiful Pedido Pago apps",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",