@onepercentio/one-ui 0.8.5-beta.10 → 0.8.5-beta.11
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/dist/components/AdaptiveSidebar/AdaptiveSidebar.d.ts +4 -0
- package/dist/components/AdaptiveSidebar/AdaptiveSidebar.js +5 -3
- package/dist/components/AdaptiveSidebar/AdaptiveSidebar.js.map +1 -1
- package/dist/components/AdaptiveSidebar/AdaptiveSidebar.module.scss +21 -24
- package/dist/components/Collapsable/Collapsable.js +4 -1
- package/dist/components/Collapsable/Collapsable.js.map +1 -1
- package/dist/components/PaginationIndicator/PaginationIndicator.d.ts +9 -7
- package/dist/components/PaginationIndicator/PaginationIndicator.js +28 -20
- package/dist/components/PaginationIndicator/PaginationIndicator.js.map +1 -1
- package/dist/components/Tabs/Tabs.d.ts +2 -1
- package/dist/components/Tabs/Tabs.js +2 -2
- package/dist/components/Tabs/Tabs.js.map +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/package.json +1 -1
|
@@ -7,6 +7,10 @@ declare const _default: React.ForwardRefExoticComponent<{
|
|
|
7
7
|
* (created for flows that requires floating views when on mobile)
|
|
8
8
|
**/
|
|
9
9
|
open?: boolean | undefined;
|
|
10
|
+
/**
|
|
11
|
+
* The screen width to turn into responsive mode
|
|
12
|
+
*/
|
|
13
|
+
breakInto?: number | undefined;
|
|
10
14
|
className?: string | undefined;
|
|
11
15
|
visibilityControlComponent?: ((props: {
|
|
12
16
|
open: boolean;
|
|
@@ -41,15 +41,17 @@ const react_1 = __importStar(require("react"));
|
|
|
41
41
|
const MutableHamburgerButton_1 = __importDefault(require("../MutableHamburgerButton"));
|
|
42
42
|
const ScrollAndFocusLock_1 = __importDefault(require("../utilitary/ScrollAndFocusLock"));
|
|
43
43
|
const AdaptiveSidebar_module_scss_1 = __importDefault(require("./AdaptiveSidebar.module.scss"));
|
|
44
|
+
const useBreakpoint_1 = __importDefault(require("../../hooks/ui/useBreakpoint"));
|
|
44
45
|
const DefaultVisibilityControl = ({ open }) => (react_1.default.createElement(MutableHamburgerButton_1.default, { size: 48, state: open ? "closed" : "default" }));
|
|
45
46
|
/**
|
|
46
47
|
* A component that you can put anywhere but hides when small enough and shows the control via a fixed floating button
|
|
47
48
|
**/
|
|
48
49
|
function AdaptiveSidebar(_a, ref) {
|
|
49
|
-
var { open: externalOpen, children, className = "", visibilityControlComponent: VisibilityControlComponent = DefaultVisibilityControl } = _a, props = __rest(_a, ["open", "children", "className", "visibilityControlComponent"]);
|
|
50
|
+
var { open: externalOpen, children, className = "", breakInto = 640, visibilityControlComponent: VisibilityControlComponent = DefaultVisibilityControl } = _a, props = __rest(_a, ["open", "children", "className", "breakInto", "visibilityControlComponent"]);
|
|
50
51
|
const [open, setOpen] = (0, react_1.useState)(false);
|
|
51
52
|
const containerRef = (0, react_1.useRef)(null);
|
|
52
53
|
const _open = externalOpen === undefined ? open : externalOpen;
|
|
54
|
+
const isMobile = (0, useBreakpoint_1.default)(breakInto);
|
|
53
55
|
(0, react_1.useImperativeHandle)(ref, () => ({
|
|
54
56
|
dismiss: () => setOpen(false),
|
|
55
57
|
}), []);
|
|
@@ -64,12 +66,12 @@ function AdaptiveSidebar(_a, ref) {
|
|
|
64
66
|
}, [_open]);
|
|
65
67
|
const externalControl = externalOpen !== undefined;
|
|
66
68
|
return (react_1.default.createElement(react_1.default.Fragment, null,
|
|
67
|
-
react_1.default.createElement("div", Object.assign({ ref: containerRef, className: `${AdaptiveSidebar_module_scss_1.default.container} ${!externalControl &&
|
|
69
|
+
react_1.default.createElement("div", Object.assign({ ref: containerRef, className: `${isMobile ? AdaptiveSidebar_module_scss_1.default.mobile : AdaptiveSidebar_module_scss_1.default.desktop} ${AdaptiveSidebar_module_scss_1.default.container} ${!externalControl &&
|
|
68
70
|
DefaultVisibilityControl === VisibilityControlComponent
|
|
69
71
|
? AdaptiveSidebar_module_scss_1.default.defaultPadding
|
|
70
72
|
: ""} ${_open ? AdaptiveSidebar_module_scss_1.default.open : AdaptiveSidebar_module_scss_1.default.closed} ${className}` }, props),
|
|
71
73
|
react_1.default.createElement(ScrollAndFocusLock_1.default, { open: _open }, children)),
|
|
72
|
-
!externalControl && (react_1.default.createElement("div", { className: AdaptiveSidebar_module_scss_1.default.hamburger
|
|
74
|
+
!externalControl && (react_1.default.createElement("div", { className: `${isMobile ? AdaptiveSidebar_module_scss_1.default.mobile : AdaptiveSidebar_module_scss_1.default.desktop} ${AdaptiveSidebar_module_scss_1.default.hamburger}`, onClick: () => setOpen((a) => !a) },
|
|
73
75
|
react_1.default.createElement(VisibilityControlComponent, { open: _open })))));
|
|
74
76
|
}
|
|
75
77
|
exports.default = (0, react_1.forwardRef)(AdaptiveSidebar);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AdaptiveSidebar.js","sourceRoot":"","sources":["../../../src/components/AdaptiveSidebar/AdaptiveSidebar.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAQe;AACf,uFAA+D;AAC/D,yFAAiE;AACjE,gGAAmD;
|
|
1
|
+
{"version":3,"file":"AdaptiveSidebar.js","sourceRoot":"","sources":["../../../src/components/AdaptiveSidebar/AdaptiveSidebar.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAQe;AACf,uFAA+D;AAC/D,yFAAiE;AACjE,gGAAmD;AACnD,iFAAyD;AAEzD,MAAM,wBAAwB,GAAG,CAAC,EAAE,IAAI,EAAqB,EAAE,EAAE,CAAC,CAChE,8BAAC,gCAAsB,IAAC,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,GAAI,CACzE,CAAC;AAMF;;IAEI;AACJ,SAAS,eAAe,CACtB,EAuBC,EACD,GAA0C;QAxB1C,EACE,IAAI,EAAE,YAAY,EAClB,QAAQ,EACR,SAAS,GAAG,EAAE,EACd,SAAS,GAAG,GAAG,EACf,0BAA0B,EACxB,0BAA0B,GAAG,wBAAwB,OAiBxD,EAhBI,KAAK,cAPV,4EAQC,CADS;IAmBV,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IACxC,MAAM,YAAY,GAAG,IAAA,cAAM,EAAiB,IAAI,CAAC,CAAC;IAClD,MAAM,KAAK,GAAG,YAAY,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,YAAY,CAAC;IAC/D,MAAM,QAAQ,GAAG,IAAA,uBAAa,EAAC,SAAS,CAAC,CAAC;IAE1C,IAAA,2BAAmB,EACjB,GAAG,EACH,GAAG,EAAE,CAAC,CAAC;QACL,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC;KAC9B,CAAC,EACF,EAAE,CACH,CAAC;IAEF,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,MAAM;YAAE,OAAO;QAC5C,YAAY,CAAC,OAAQ,CAAC,QAAQ,CAAC;YAC7B,IAAI,EAAE,CAAC;YACP,QAAQ,EAAE,QAAQ;YAClB,GAAG,EAAE,CAAC;SACP,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IACZ,MAAM,eAAe,GAAG,YAAY,KAAK,SAAS,CAAC;IAEnD,OAAO,CACL;QACE,qDACE,GAAG,EAAE,YAAY,EACjB,SAAS,EAAE,GAAG,QAAQ,CAAC,CAAC,CAAC,qCAAM,CAAC,MAAM,CAAC,CAAC,CAAC,qCAAM,CAAC,OAAO,IACrD,qCAAM,CAAC,SACT,IACE,CAAC,eAAe;gBAChB,wBAAwB,KAAK,0BAA0B;gBACrD,CAAC,CAAC,qCAAM,CAAC,cAAc;gBACvB,CAAC,CAAC,EACN,IAAI,KAAK,CAAC,CAAC,CAAC,qCAAM,CAAC,IAAI,CAAC,CAAC,CAAC,qCAAM,CAAC,MAAM,IAAI,SAAS,EAAE,IAClD,KAAK;YAET,8BAAC,4BAAkB,IAAC,IAAI,EAAE,KAAK,IAAG,QAAQ,CAAsB,CAC5D;QACL,CAAC,eAAe,IAAI,CACnB,uCACE,SAAS,EAAE,GAAG,QAAQ,CAAC,CAAC,CAAC,qCAAM,CAAC,MAAM,CAAC,CAAC,CAAC,qCAAM,CAAC,OAAO,IACrD,qCAAM,CAAC,SACT,EAAE,EACF,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC;YAEjC,8BAAC,0BAA0B,IAAC,IAAI,EAAE,KAAK,GAAI,CACvC,CACP,CACA,CACJ,CAAC;AACJ,CAAC;AAED,kBAAe,IAAA,kBAAU,EAAC,eAAe,CAAC,CAAC"}
|
|
@@ -20,33 +20,30 @@ $hamburgerOffset: 24;
|
|
|
20
20
|
z-index: 1000;
|
|
21
21
|
}
|
|
22
22
|
|
|
23
|
-
@media screen and (min-width: 640px) {
|
|
24
|
-
.hamburger {
|
|
25
|
-
display: none;
|
|
26
|
-
}
|
|
27
|
-
}
|
|
28
|
-
|
|
29
23
|
.container {
|
|
30
24
|
box-sizing: border-box;
|
|
31
25
|
height: 100%;
|
|
26
|
+
}
|
|
27
|
+
.hamburger.desktop {
|
|
28
|
+
display: none;
|
|
29
|
+
}
|
|
32
30
|
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
}
|
|
31
|
+
.container.mobile {
|
|
32
|
+
&.defaultPadding {
|
|
33
|
+
padding-top: #{$hamburgerSize + $hamburgerOffset * 2}px;
|
|
34
|
+
}
|
|
35
|
+
position: fixed;
|
|
36
|
+
width: 100%;
|
|
37
|
+
overflow: auto;
|
|
38
|
+
z-index: 1000;
|
|
39
|
+
left: 0;
|
|
40
|
+
|
|
41
|
+
&.open {
|
|
42
|
+
transition: transform $veryFast ease-out;
|
|
43
|
+
transform: translateX(-0%);
|
|
44
|
+
}
|
|
45
|
+
&.closed {
|
|
46
|
+
transition: transform $veryFast ease-in;
|
|
47
|
+
transform: translateX(-100%);
|
|
51
48
|
}
|
|
52
49
|
}
|
|
@@ -87,7 +87,10 @@ function Collapsable(_a) {
|
|
|
87
87
|
}
|
|
88
88
|
}, [open]);
|
|
89
89
|
return (react_1.default.createElement("div", { "data-testid": props["data-testid"], className: `${Collapsable_module_scss_1.default.container} ${open ? Collapsable_module_scss_1.default.open : Collapsable_module_scss_1.default.closed} ${className}` },
|
|
90
|
-
react_1.default.createElement("div", { onClick: () =>
|
|
90
|
+
react_1.default.createElement("div", { onClick: (e) => {
|
|
91
|
+
e.stopPropagation();
|
|
92
|
+
onToggleOpen(!open);
|
|
93
|
+
}, id: _collapsableId("header", id) }, title),
|
|
91
94
|
react_1.default.createElement("div", { ref: toggleRef }),
|
|
92
95
|
react_1.default.createElement("div", { onClick: (e) => {
|
|
93
96
|
e.stopPropagation();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Collapsable.js","sourceRoot":"","sources":["../../../src/components/Collapsable/Collapsable.tsx"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"Collapsable.js","sourceRoot":"","sources":["../../../src/components/Collapsable/Collapsable.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import React from "react";
|
|
2
2
|
declare type CustomizationProps = {
|
|
3
3
|
/**
|
|
4
4
|
* This will define how the pagination indicator calculates start and end
|
|
@@ -17,10 +17,12 @@ export declare function PaginationIndicatorView({ size, page, pages, className,
|
|
|
17
17
|
pages: number;
|
|
18
18
|
className: string;
|
|
19
19
|
}): JSX.Element;
|
|
20
|
-
|
|
21
|
-
scrollableRef: RefObject<HTMLDivElement>;
|
|
22
|
-
estimatedWidth?: number;
|
|
20
|
+
declare const _default: React.ForwardRefExoticComponent<{
|
|
21
|
+
scrollableRef: React.RefObject<HTMLDivElement>;
|
|
22
|
+
estimatedWidth?: number | undefined;
|
|
23
23
|
size: number;
|
|
24
|
-
className?: string;
|
|
25
|
-
} & CustomizationProps
|
|
26
|
-
|
|
24
|
+
className?: string | undefined;
|
|
25
|
+
} & CustomizationProps & React.RefAttributes<{
|
|
26
|
+
refreshPages: () => void;
|
|
27
|
+
}>>;
|
|
28
|
+
export default _default;
|
|
@@ -91,41 +91,49 @@ function PaginationIndicatorView({ size, page, pages, className, }) {
|
|
|
91
91
|
react_1.default.createElement("rect", { x: "0", y: "0", mask: `url(#${`mask-${rand}`})`, width: "100%", height: "100%", style: { fill: "var(--digital-blue)" } })));
|
|
92
92
|
}
|
|
93
93
|
exports.PaginationIndicatorView = PaginationIndicatorView;
|
|
94
|
-
function
|
|
94
|
+
function _PaginationIndicator({ scrollableRef, estimatedWidth, size, mode = "scroll", className = "", }, ref) {
|
|
95
95
|
const [currentPage, setCurrentPage] = (0, react_1.useState)(1);
|
|
96
96
|
const [defs, setDefs] = (0, react_1.useState)();
|
|
97
|
+
const refreshPages = (0, react_1.useCallback)(() => {
|
|
98
|
+
const maxWidth = estimatedWidth || scrollableRef.current.scrollWidth;
|
|
99
|
+
setDefs({
|
|
100
|
+
pages: Math.ceil(maxWidth / scrollableRef.current.clientWidth) - 1,
|
|
101
|
+
});
|
|
102
|
+
}, [estimatedWidth]);
|
|
97
103
|
(0, react_1.useEffect)(() => {
|
|
98
104
|
const maxWidth = estimatedWidth || scrollableRef.current.scrollWidth;
|
|
99
105
|
setDefs({
|
|
100
106
|
pages: Math.ceil(maxWidth / scrollableRef.current.clientWidth) - 1,
|
|
101
107
|
});
|
|
102
108
|
}, [estimatedWidth]);
|
|
109
|
+
const updatePageIndicators = (0, react_1.useCallback)((target, pages) => {
|
|
110
|
+
if (mode === "page") {
|
|
111
|
+
const eachPageWidth = scrollableRef.current.clientWidth;
|
|
112
|
+
const page = 1 + target.scrollLeft / eachPageWidth;
|
|
113
|
+
setCurrentPage(page);
|
|
114
|
+
}
|
|
115
|
+
else {
|
|
116
|
+
const maxWidth = estimatedWidth || scrollableRef.current.scrollWidth;
|
|
117
|
+
const availableTOScroll = maxWidth - scrollableRef.current.clientWidth;
|
|
118
|
+
const page = 1 + ((target.scrollLeft * 100) / availableTOScroll / 100) * pages;
|
|
119
|
+
setCurrentPage(page);
|
|
120
|
+
}
|
|
121
|
+
}, []);
|
|
122
|
+
(0, react_1.useImperativeHandle)(ref, () => ({
|
|
123
|
+
refreshPages,
|
|
124
|
+
}), []);
|
|
103
125
|
(0, react_1.useEffect)(() => {
|
|
104
126
|
if (!defs)
|
|
105
127
|
return;
|
|
106
128
|
const el = scrollableRef.current;
|
|
107
|
-
const
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
const page = 1 + e.currentTarget.scrollLeft / eachPageWidth;
|
|
111
|
-
setCurrentPage(page);
|
|
112
|
-
}
|
|
113
|
-
else {
|
|
114
|
-
const maxWidth = estimatedWidth || scrollableRef.current.scrollWidth;
|
|
115
|
-
const availableTOScroll = maxWidth - scrollableRef.current.clientWidth;
|
|
116
|
-
const page = 1 +
|
|
117
|
-
((e.currentTarget.scrollLeft * 100) / availableTOScroll / 100) *
|
|
118
|
-
defs.pages;
|
|
119
|
-
console.log(e.currentTarget.scrollLeft, availableTOScroll, (e.currentTarget.scrollLeft * 100) / availableTOScroll / 100, page - 1);
|
|
120
|
-
setCurrentPage(page);
|
|
121
|
-
}
|
|
122
|
-
};
|
|
123
|
-
el.addEventListener("scroll", calculateScroll);
|
|
129
|
+
const onScroll = (e) => updatePageIndicators(e.currentTarget, defs.pages);
|
|
130
|
+
updatePageIndicators(el, defs.pages);
|
|
131
|
+
el.addEventListener("scroll", onScroll);
|
|
124
132
|
return () => {
|
|
125
|
-
el.removeEventListener("scroll",
|
|
133
|
+
el.removeEventListener("scroll", onScroll);
|
|
126
134
|
};
|
|
127
135
|
}, [defs]);
|
|
128
136
|
return !defs ? null : (react_1.default.createElement(PaginationIndicatorView, { pages: defs.pages, page: currentPage, size: size, className: className }));
|
|
129
137
|
}
|
|
130
|
-
exports.default =
|
|
138
|
+
exports.default = (0, react_1.forwardRef)(_PaginationIndicator);
|
|
131
139
|
//# sourceMappingURL=PaginationIndicator.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PaginationIndicator.js","sourceRoot":"","sources":["../../../src/components/PaginationIndicator/PaginationIndicator.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+
|
|
1
|
+
{"version":3,"file":"PaginationIndicator.js","sourceRoot":"","sources":["../../../src/components/PaginationIndicator/PaginationIndicator.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Show tabs for toggling between options
|
|
3
3
|
**/
|
|
4
|
-
export default function Tabs<O extends string>({ options, selected, onSelect, itemClassName, }: {
|
|
4
|
+
export default function Tabs<O extends string>({ options, selected, onSelect, itemClassName, className, }: {
|
|
5
5
|
options: Readonly<{
|
|
6
6
|
id: O;
|
|
7
7
|
label: string;
|
|
@@ -9,4 +9,5 @@ export default function Tabs<O extends string>({ options, selected, onSelect, it
|
|
|
9
9
|
selected?: O;
|
|
10
10
|
onSelect: (option: O) => void;
|
|
11
11
|
itemClassName?: string;
|
|
12
|
+
className?: string;
|
|
12
13
|
}): JSX.Element;
|
|
@@ -31,7 +31,7 @@ const Tabs_module_scss_1 = __importDefault(require("./Tabs.module.scss"));
|
|
|
31
31
|
/**
|
|
32
32
|
* Show tabs for toggling between options
|
|
33
33
|
**/
|
|
34
|
-
function Tabs({ options, selected, onSelect, itemClassName = "", }) {
|
|
34
|
+
function Tabs({ options, selected, onSelect, itemClassName = "", className = "", }) {
|
|
35
35
|
const selectedRef = (0, react_1.useRef)(null);
|
|
36
36
|
const guideRef = (0, react_1.useRef)(null);
|
|
37
37
|
(0, react_1.useEffect)(() => {
|
|
@@ -49,7 +49,7 @@ function Tabs({ options, selected, onSelect, itemClassName = "", }) {
|
|
|
49
49
|
: guideRef.current.style["top"] || "initial";
|
|
50
50
|
}, [selected]);
|
|
51
51
|
return (react_1.default.createElement(react_1.default.Fragment, null,
|
|
52
|
-
react_1.default.createElement("div", { className: Tabs_module_scss_1.default.container },
|
|
52
|
+
react_1.default.createElement("div", { className: `${Tabs_module_scss_1.default.container} ${className}` },
|
|
53
53
|
options.map((o) => (react_1.default.createElement("p", { ref: selected === o.id ? selectedRef : undefined, onClick: () => onSelect(o.id), className: `${selected === o.id ? Tabs_module_scss_1.default.selected : ""} ${itemClassName}`, key: o.id, "data-testid": "tab-option" }, o.label))),
|
|
54
54
|
react_1.default.createElement("div", { ref: guideRef, className: Tabs_module_scss_1.default.guide, "data-testid": "tab-guide" }))));
|
|
55
55
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tabs.js","sourceRoot":"","sources":["../../../src/components/Tabs/Tabs.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAiD;AACjD,0EAAwC;AAExC;;IAEI;AACJ,SAAwB,IAAI,CAAmB,EAC7C,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,aAAa,GAAG,EAAE,
|
|
1
|
+
{"version":3,"file":"Tabs.js","sourceRoot":"","sources":["../../../src/components/Tabs/Tabs.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAiD;AACjD,0EAAwC;AAExC;;IAEI;AACJ,SAAwB,IAAI,CAAmB,EAC7C,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,aAAa,GAAG,EAAE,EAClB,SAAS,GAAG,EAAE,GAYf;IACC,MAAM,WAAW,GAAG,IAAA,cAAM,EAAuB,IAAI,CAAC,CAAC;IACvD,MAAM,QAAQ,GAAG,IAAA,cAAM,EAAiB,IAAI,CAAC,CAAC;IAC9C,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,QAAQ,CAAC,OAAQ,CAAC,KAAK,CAAC,SAAS,CAAC,GAAG,WAAW,CAAC,OAAO;YACtD,CAAC,CAAC,GAAG;YACL,CAAC,CAAC,QAAQ,CAAC,OAAQ,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;QACvC,QAAQ,CAAC,OAAQ,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,WAAW,CAAC,OAAO;YACpD,CAAC,CAAC,WAAW,CAAC,OAAO,CAAC,WAAW,GAAG,IAAI;YACxC,CAAC,CAAC,KAAK,CAAC;QACV,QAAQ,CAAC,OAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,GAAG,WAAW,CAAC,OAAO;YACnD,CAAC,CAAC,WAAW,CAAC,OAAO,CAAC,UAAU,GAAG,IAAI;YACvC,CAAC,CAAC,QAAQ,CAAC,OAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,SAAS,CAAC;QACjD,QAAQ,CAAC,OAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,WAAW,CAAC,OAAO;YAClD,CAAC,CAAC,WAAW,CAAC,OAAO,CAAC,SAAS,GAAG,WAAW,CAAC,OAAO,CAAC,YAAY,GAAG,IAAI;YACzE,CAAC,CAAC,QAAQ,CAAC,OAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,SAAS,CAAC;IAClD,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IACf,OAAO,CACL;QACE,uCAAK,SAAS,EAAE,GAAG,0BAAM,CAAC,SAAS,IAAI,SAAS,EAAE;YAC/C,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAClB,qCACE,GAAG,EAAE,QAAQ,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS,EAChD,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,EAC7B,SAAS,EAAE,GACT,QAAQ,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,0BAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,EACxC,IAAI,aAAa,EAAE,EACnB,GAAG,EAAE,CAAC,CAAC,EAAE,iBACG,YAAY,IAEvB,CAAC,CAAC,KAAK,CACN,CACL,CAAC;YACF,uCAAK,GAAG,EAAE,QAAQ,EAAE,SAAS,EAAE,0BAAM,CAAC,KAAK,iBAAc,WAAW,GAAG,CACnE,CACL,CACJ,CAAC;AACJ,CAAC;AAtDD,uBAsDC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"OneUIProvider.js","sourceRoot":"","sources":["../../src/context/OneUIProvider.tsx"],"names":[],"mappings":";;;;;;AACA,qDAA6B;AAC7B,yDAAiC;AACjC,iEAAqC;AAErC,
|
|
1
|
+
{"version":3,"file":"OneUIProvider.js","sourceRoot":"","sources":["../../src/context/OneUIProvider.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
const throttle_1 = __importDefault(require("lodash/throttle"));
|
|
7
|
+
const react_1 = require("react");
|
|
8
|
+
/**
|
|
9
|
+
* A hook to trigger changes when the screen resizes
|
|
10
|
+
* @returns If the current resolution is lower than the specified width
|
|
11
|
+
*/
|
|
12
|
+
function useBreakpoint(breakInto) {
|
|
13
|
+
const [lowerThanBreakpoint, setIsLowerThanBreakpoint] = (0, react_1.useState)(() => window.visualViewport.width < breakInto);
|
|
14
|
+
(0, react_1.useEffect)(() => {
|
|
15
|
+
const onResizeThrottle = (0, throttle_1.default)(() => {
|
|
16
|
+
setIsLowerThanBreakpoint(window.visualViewport.width < breakInto);
|
|
17
|
+
}, 1000 / 4);
|
|
18
|
+
const onResize = () => onResizeThrottle();
|
|
19
|
+
window.addEventListener("resize", onResize);
|
|
20
|
+
return () => window.removeEventListener("resize", onResize);
|
|
21
|
+
}, []);
|
|
22
|
+
return lowerThanBreakpoint;
|
|
23
|
+
}
|
|
24
|
+
exports.default = useBreakpoint;
|
|
25
|
+
//# sourceMappingURL=useBreakpoint.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useBreakpoint.js","sourceRoot":"","sources":["../../../src/hooks/ui/useBreakpoint.tsx"],"names":[],"mappings":";;;;;AAAA,+DAAuC;AACvC,iCAA4C;AAE5C;;;GAGG;AACH,SAAwB,aAAa,CAAC,SAAiB;IACrD,MAAM,CAAC,mBAAmB,EAAE,wBAAwB,CAAC,GAAG,IAAA,gBAAQ,EAC9D,GAAG,EAAE,CAAC,MAAM,CAAC,cAAe,CAAC,KAAK,GAAG,SAAS,CAC/C,CAAC;IACF,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,MAAM,gBAAgB,GAAG,IAAA,kBAAQ,EAAC,GAAG,EAAE;YACrC,wBAAwB,CAAC,MAAM,CAAC,cAAe,CAAC,KAAK,GAAG,SAAS,CAAC,CAAC;QACrE,CAAC,EAAE,IAAI,GAAG,CAAC,CAAC,CAAC;QACb,MAAM,QAAQ,GAAG,GAAG,EAAE,CAAC,gBAAgB,EAAE,CAAC;QAC1C,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;QAC5C,OAAO,GAAG,EAAE,CAAC,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;IAC9D,CAAC,EAAE,EAAE,CAAC,CAAC;IACP,OAAO,mBAAmB,CAAC;AAC7B,CAAC;AAbD,gCAaC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@onepercentio/one-ui",
|
|
3
|
-
"version": "0.8.5-beta.
|
|
3
|
+
"version": "0.8.5-beta.11",
|
|
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>",
|