@onepercentio/one-ui 0.8.5-beta.9 → 0.9.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/cypress/support/component-index.html +4 -0
- package/dist/assets/styles/variables.scss +1 -0
- package/dist/components/AdaptiveContainer/AdaptiveContainer.d.ts +6 -0
- package/dist/components/AdaptiveContainer/AdaptiveContainer.js +3 -1
- package/dist/components/AdaptiveContainer/AdaptiveContainer.js.map +1 -1
- package/dist/components/AdaptiveSidebar/AdaptiveSidebar.d.ts +17 -10
- package/dist/components/AdaptiveSidebar/AdaptiveSidebar.js +10 -5
- package/dist/components/AdaptiveSidebar/AdaptiveSidebar.js.map +1 -1
- package/dist/components/AdaptiveSidebar/AdaptiveSidebar.module.scss +21 -24
- package/dist/components/AnchoredTooltip/AnchoredTooltip.d.ts +3 -1
- package/dist/components/AnchoredTooltip/AnchoredTooltip.js +1 -0
- package/dist/components/AnchoredTooltip/AnchoredTooltip.js.map +1 -1
- package/dist/components/Collapsable/Collapsable.d.ts +5 -1
- package/dist/components/Collapsable/Collapsable.js +37 -7
- package/dist/components/Collapsable/Collapsable.js.map +1 -1
- package/dist/components/Collapsable/Collapsable.module.scss +5 -0
- package/dist/components/EmailInput/EmailInput.d.ts +2 -2
- package/dist/components/FadeIn/FadeIn.d.ts +1 -0
- package/dist/components/FadeIn/FadeIn.js +14 -2
- package/dist/components/FadeIn/FadeIn.js.map +1 -1
- package/dist/components/Input/Input.d.ts +1 -1
- package/dist/components/Loader/Loader.d.ts +3 -2
- package/dist/components/Loader/Loader.js +14 -2
- package/dist/components/Loader/Loader.js.map +1 -1
- package/dist/components/PaginationIndicator/PaginationIndicator.d.ts +19 -0
- package/dist/components/PaginationIndicator/PaginationIndicator.js +135 -0
- package/dist/components/PaginationIndicator/PaginationIndicator.js.map +1 -0
- package/dist/components/PaginationIndicator/PaginationIndicator.module.scss +48 -0
- package/dist/components/PaginationIndicator/index.d.ts +1 -0
- package/dist/components/PaginationIndicator/index.js +9 -0
- package/dist/components/PaginationIndicator/index.js.map +1 -0
- package/dist/components/PasswordInput/PasswordInput.d.ts +1 -1
- package/dist/components/Select/Select.d.ts +3 -1
- package/dist/components/Select/Select.js +2 -2
- package/dist/components/Select/Select.js.map +1 -1
- package/dist/components/Tabs/Tabs.d.ts +3 -1
- package/dist/components/Tabs/Tabs.js +17 -9
- package/dist/components/Tabs/Tabs.js.map +1 -1
- package/dist/components/Tabs/Tabs.module.scss +0 -1
- package/dist/context/CustomBrowserRouter.d.ts +9 -1
- package/dist/context/CustomBrowserRouter.js +3 -2
- package/dist/context/CustomBrowserRouter.js.map +1 -1
- package/dist/context/OneUIProvider.d.ts +10 -1
- package/dist/context/OneUIProvider.js +1 -1
- package/dist/context/OneUIProvider.js.map +1 -1
- package/dist/hooks/ui/useBreakpoint.d.ts +5 -0
- package/dist/hooks/ui/useBreakpoint.js +25 -0
- package/dist/hooks/ui/useBreakpoint.js.map +1 -0
- package/dist/hooks/ui/usePaginationControls.d.ts +14 -0
- package/dist/hooks/ui/usePaginationControls.js +92 -0
- package/dist/hooks/ui/usePaginationControls.js.map +1 -0
- package/dist/hooks/ui/usePaginationControls.module.scss +16 -0
- package/dist/hooks/useAsyncControl.d.ts +4 -1
- package/dist/hooks/useAsyncControl.js +14 -4
- package/dist/hooks/useAsyncControl.js.map +1 -1
- package/dist/hooks/useContainedRepositioning.d.ts +3 -1
- package/dist/hooks/useContainedRepositioning.js +13 -10
- package/dist/hooks/useContainedRepositioning.js.map +1 -1
- package/dist/hooks/usePaginationControls.d.ts +5 -0
- package/dist/hooks/usePaginationControls.js +8 -0
- package/dist/hooks/usePaginationControls.js.map +1 -0
- package/package.json +1 -1
|
@@ -29,12 +29,22 @@ function useAsyncControl(functionsToWrap) {
|
|
|
29
29
|
setLoading(false);
|
|
30
30
|
}
|
|
31
31
|
}), []);
|
|
32
|
-
|
|
32
|
+
const { functionsToMemoize, other } = Object.entries(functionsToWrap || {}).reduce((r, [k, func]) => {
|
|
33
|
+
return Object.assign(Object.assign({}, r), (typeof func === "function"
|
|
34
|
+
? {
|
|
35
|
+
functionsToMemoize: Object.assign(Object.assign({}, r.functionsToMemoize), { [k]: func }),
|
|
36
|
+
}
|
|
37
|
+
: {
|
|
38
|
+
other: Object.assign(Object.assign({}, r.other), { [k]: func }),
|
|
39
|
+
}));
|
|
40
|
+
}, {
|
|
41
|
+
functionsToMemoize: {},
|
|
42
|
+
other: {},
|
|
43
|
+
});
|
|
44
|
+
return Object.assign(Object.assign({ process: _process, loading,
|
|
33
45
|
error,
|
|
34
46
|
setError,
|
|
35
|
-
setLoading }, Object.entries(
|
|
36
|
-
return Object.assign(Object.assign({}, r), { [k]: typeof func === "function" ? (...args) => _process(() => func(...args)) : func });
|
|
37
|
-
}, {}));
|
|
47
|
+
setLoading }, other), Object.entries(functionsToMemoize).reduce((r, [k, v]) => (Object.assign(Object.assign({}, r), { [k]: (0, react_1.useMemo)(() => (...args) => _process(() => v(...args)), [v]) })), {}));
|
|
38
48
|
}
|
|
39
49
|
exports.default = useAsyncControl;
|
|
40
50
|
//# sourceMappingURL=useAsyncControl.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useAsyncControl.js","sourceRoot":"","sources":["../../src/hooks/useAsyncControl.ts"],"names":[],"mappings":";;;;;;;;;;;AAAA,
|
|
1
|
+
{"version":3,"file":"useAsyncControl.js","sourceRoot":"","sources":["../../src/hooks/useAsyncControl.ts"],"names":[],"mappings":";;;;;;;;;;;AAAA,iCAAuD;AAGvD,SAAwB,eAAe,CAKrC,eAAmB;IACnB,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,IAAA,gBAAQ,GAAa,CAAC;IAChD,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,IAAA,gBAAQ,EAAU,KAAK,CAAC,CAAC;IAEvD,MAAM,QAAQ,GAAG,IAAA,mBAAW,EAAC,CAAO,OAA2B,EAAE,EAAE;QACjE,IAAI;YACF,UAAU,CAAC,IAAI,CAAC,CAAC;YACjB,QAAQ,CAAC,SAAS,CAAC,CAAC;YACpB,OAAO,MAAM,OAAO,EAAE,CAAC;SACxB;QAAC,OAAO,CAAC,EAAE;YACV,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,aAAa;gBAAE,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;YAC7D,QAAQ,CAAC,CAAM,CAAC,CAAC;YACjB,MAAM,CAAC,CAAC;SACT;gBAAS;YACR,UAAU,CAAC,KAAK,CAAC,CAAC;SACnB;IACH,CAAC,CAAA,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,EAAE,kBAAkB,EAAE,KAAK,EAAE,GAAG,MAAM,CAAC,OAAO,CAClD,eAAe,IAAI,EAAE,CACtB,CAAC,MAAM,CACN,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,IAAI,CAAC,EAAE,EAAE;QACf,uCACK,CAAC,GACD,CAAC,OAAO,IAAI,KAAK,UAAU;YAC5B,CAAC,CAAC;gBACE,kBAAkB,kCACb,CAAC,CAAC,kBAAkB,KACvB,CAAC,CAAC,CAAC,EAAE,IAAI,GACV;aACF;YACH,CAAC,CAAC;gBACE,KAAK,kCACA,CAAC,CAAC,KAAK,KACV,CAAC,CAAC,CAAC,EAAE,IAAI,GACV;aACF,CAAC,EACN;IACJ,CAAC,EACD;QACE,kBAAkB,EAAE,EAAE;QACtB,KAAK,EAAE,EAAE;KAIV,CACF,CAAC;IAEF,qCACE,OAAO,EAAE,QAAQ,EACjB,OAAO;QACP,KAAK;QACL,QAAQ;QACR,UAAU,IACP,KAAK,GACL,MAAM,CAAC,OAAO,CAAC,kBAAkB,CAAC,CAAC,MAAM,CAC1C,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,iCACV,CAAC,KACJ,CAAC,CAAC,CAAC,EAAE,IAAA,eAAO,EACV,GAAG,EAAE,CACH,CAAC,GAAG,IAAW,EAAE,EAAE,CACjB,QAAQ,CAAC,GAAG,EAAE,CAAE,CAAS,CAAC,GAAG,IAAI,CAAC,CAAC,EACvC,CAAC,CAAC,CAAC,CACJ,IACD,EACF,EAAO,CACR,EACD;AACJ,CAAC;AAzED,kCAyEC"}
|
|
@@ -3,11 +3,13 @@
|
|
|
3
3
|
* This hook takes an html and checks if its outside its parent
|
|
4
4
|
* If it is, it should move it so it can be totally visible inside the container
|
|
5
5
|
*/
|
|
6
|
-
export default function useContainedRepositioning(focused: boolean, getParent: (el: HTMLElement) => HTMLElement, { offset, scale }?: {
|
|
6
|
+
export default function useContainedRepositioning(focused: boolean, getParent: (el: HTMLElement) => HTMLElement, { offset, scale, offsetLimit, }?: {
|
|
7
7
|
/** The offset the element will be moved by from the closest bound */
|
|
8
8
|
offset?: number;
|
|
9
9
|
/** The scaled element width to be considered. usefull for when the focused element will change size */
|
|
10
10
|
scale?: number;
|
|
11
|
+
/** Limit offset */
|
|
12
|
+
offsetLimit?: number;
|
|
11
13
|
}): {
|
|
12
14
|
elementToCheck: import("react").RefObject<HTMLDivElement>;
|
|
13
15
|
};
|
|
@@ -9,7 +9,7 @@ const react_1 = require("react");
|
|
|
9
9
|
* This hook takes an html and checks if its outside its parent
|
|
10
10
|
* If it is, it should move it so it can be totally visible inside the container
|
|
11
11
|
*/
|
|
12
|
-
function useContainedRepositioning(focused, getParent, { offset = 16, scale = 1 } = {}) {
|
|
12
|
+
function useContainedRepositioning(focused, getParent, { offset = 16, scale = 1, offsetLimit = Number.POSITIVE_INFINITY, } = {}) {
|
|
13
13
|
const elementToCheck = (0, react_1.useRef)(null);
|
|
14
14
|
(0, react_1.useEffect)(() => {
|
|
15
15
|
const el = elementToCheck.current;
|
|
@@ -32,19 +32,23 @@ function useContainedRepositioning(focused, getParent, { offset = 16, scale = 1
|
|
|
32
32
|
const offsetOfScale = (elWidth - curr.clientWidth) / 2;
|
|
33
33
|
const cardLimit = curr.offsetLeft - offsetOfScale + alreadyRight + elWidth;
|
|
34
34
|
const exceedingSpace = cardLimit - limitOffset;
|
|
35
|
-
const offsetLeft = curr.offsetLeft -
|
|
35
|
+
const offsetLeft = curr.offsetLeft -
|
|
36
|
+
offsetOfScale +
|
|
37
|
+
alreadyRight -
|
|
38
|
+
relativeParent.scrollLeft;
|
|
36
39
|
const isOverflowedRight = exceedingSpace > 0;
|
|
37
40
|
const isOverflowedLeft = offsetLeft < 0;
|
|
38
|
-
const limit =
|
|
41
|
+
const limit = exceedingSpace + -offsetLeft;
|
|
39
42
|
if (isOverflowedRight) {
|
|
40
|
-
|
|
43
|
+
const val = Math.min(exceedingSpace - -Math.min(Math.abs(limit / 2), offset), offsetLimit);
|
|
44
|
+
curr.style.right = `${val}px`;
|
|
41
45
|
}
|
|
42
|
-
;
|
|
43
46
|
if (isOverflowedLeft) {
|
|
44
|
-
|
|
47
|
+
const val = Math.max(offsetLeft - Math.min(Math.abs(limit) / 2, offset), -offsetLimit);
|
|
48
|
+
curr.style.right = `${val}px`;
|
|
45
49
|
}
|
|
46
50
|
if (isOverflowedLeft || isOverflowedRight) {
|
|
47
|
-
curr.style.zIndex =
|
|
51
|
+
curr.style.zIndex = "1000";
|
|
48
52
|
}
|
|
49
53
|
}, 50);
|
|
50
54
|
reposition();
|
|
@@ -56,9 +60,8 @@ function useContainedRepositioning(focused, getParent, { offset = 16, scale = 1
|
|
|
56
60
|
el.style.right = `0px`;
|
|
57
61
|
const restore = ({ propertyName, currentTarget }) => {
|
|
58
62
|
const targetTransformation = window.getComputedStyle(currentTarget).right;
|
|
59
|
-
if (propertyName === "right" &&
|
|
60
|
-
|
|
61
|
-
curr.style.zIndex = '';
|
|
63
|
+
if (propertyName === "right" && targetTransformation === "0px") {
|
|
64
|
+
curr.style.zIndex = "";
|
|
62
65
|
el.removeEventListener("transitionend", restore);
|
|
63
66
|
}
|
|
64
67
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useContainedRepositioning.js","sourceRoot":"","sources":["../../src/hooks/useContainedRepositioning.ts"],"names":[],"mappings":";;;;;AAAA,+DAAuC;AACvC,iCAA0C;AAE1C;;;GAGG;AACH,SAAwB,yBAAyB,
|
|
1
|
+
{"version":3,"file":"useContainedRepositioning.js","sourceRoot":"","sources":["../../src/hooks/useContainedRepositioning.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
/**
|
|
4
|
+
* This hook handles the display of pagination controls for the user to move to another page
|
|
5
|
+
*/
|
|
6
|
+
function usePaginationControls(containerRef) { }
|
|
7
|
+
exports.default = usePaginationControls;
|
|
8
|
+
//# sourceMappingURL=usePaginationControls.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"usePaginationControls.js","sourceRoot":"","sources":["../../src/hooks/usePaginationControls.ts"],"names":[],"mappings":";;AAEA;;GAEG;AACH,SAAwB,qBAAqB,CAC3C,YAAuC,IACtC,CAAC;AAFJ,wCAEI"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@onepercentio/one-ui",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.9.1",
|
|
4
4
|
"description": "A set of reusable components created through the development of Onepercent projects",
|
|
5
5
|
"repository": "git@github.com:onepercentio/one-ui.git",
|
|
6
6
|
"author": "Murilo Oliveira de Araujo <muritavo@outlook.com>",
|