oolib 2.11.3 → 2.11.4
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/TabBar/index.d.ts +2 -3
- package/dist/components/TabBar/index.js +11 -14
- package/dist/components/TabBar/index.styled.d.ts +0 -1
- package/dist/components/TabBar/index.styled.js +12 -13
- package/dist/icons/index.d.ts +2 -0
- package/dist/icons/index.js +1 -0
- package/package.json +1 -1
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export function TabBar({ id, options, value, onChange, updateUrl, style, emptyTabs,
|
|
1
|
+
export function TabBar({ id, options, value, onChange, updateUrl, style, emptyTabs, queryParamKey }: {
|
|
2
2
|
id: any;
|
|
3
3
|
options: any;
|
|
4
4
|
value: any;
|
|
@@ -6,6 +6,5 @@ export function TabBar({ id, options, value, onChange, updateUrl, style, emptyTa
|
|
|
6
6
|
updateUrl: any;
|
|
7
7
|
style: any;
|
|
8
8
|
emptyTabs: any;
|
|
9
|
-
|
|
10
|
-
borderBottom?: boolean;
|
|
9
|
+
queryParamKey?: string;
|
|
11
10
|
}): JSX.Element;
|
|
@@ -8,30 +8,27 @@ var react_1 = __importDefault(require("react"));
|
|
|
8
8
|
var Typo_1 = require("../Typo");
|
|
9
9
|
var index_styled_1 = require("./index.styled");
|
|
10
10
|
var react_router_dom_1 = require("react-router-dom");
|
|
11
|
-
var Container_1 = require("../Container");
|
|
12
11
|
var TabBar = function (_a) {
|
|
13
|
-
var id = _a.id, options = _a.options, value = _a.value, onChange = _a.onChange, updateUrl = _a.updateUrl, style = _a.style, emptyTabs = _a.emptyTabs, _b = _a.
|
|
12
|
+
var id = _a.id, options = _a.options, value = _a.value, onChange = _a.onChange, updateUrl = _a.updateUrl, style = _a.style, emptyTabs = _a.emptyTabs, _b = _a.queryParamKey, queryParamKey = _b === void 0 ? 'activeTab' : _b;
|
|
14
13
|
var history = (0, react_router_dom_1.useHistory)();
|
|
15
14
|
var location = (0, react_router_dom_1.useLocation)();
|
|
16
15
|
var handleClick = function (value) {
|
|
17
16
|
if (updateUrl) {
|
|
18
17
|
var params = new URLSearchParams(location.search);
|
|
19
|
-
params.set(
|
|
18
|
+
params.set(queryParamKey, JSON.stringify(value));
|
|
20
19
|
history.push({
|
|
21
20
|
search: params.toString(),
|
|
22
21
|
});
|
|
23
22
|
}
|
|
24
|
-
onChange(null, value);
|
|
23
|
+
onChange && onChange(null, value);
|
|
25
24
|
};
|
|
26
|
-
return (react_1.default.createElement(index_styled_1.
|
|
27
|
-
react_1.default.createElement(
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
react_1.default.createElement(Typo_1.SANS_2, { semibold: style === "1" }, op.display))));
|
|
35
|
-
}))))));
|
|
25
|
+
return (react_1.default.createElement(index_styled_1.TabBarContainerStyled, { id: id },
|
|
26
|
+
react_1.default.createElement(index_styled_1.TabBarRowStyled, { id: id }, options.map(function (op) {
|
|
27
|
+
var tabHasError = emptyTabs && emptyTabs.includes(op.value);
|
|
28
|
+
var tabIsActive = value && op.value === value.value;
|
|
29
|
+
return (react_1.default.createElement(index_styled_1.TabBarTabWrapper, { style1: style === "1", key: op.value, active: tabIsActive, error: tabHasError },
|
|
30
|
+
react_1.default.createElement(index_styled_1.TabBarTabStyled, { active: tabIsActive, error: tabHasError, style1: style === "1", onClick: function () { return handleClick(op); } },
|
|
31
|
+
react_1.default.createElement(Typo_1.SANS_2, { semibold: style === "1" }, op.display))));
|
|
32
|
+
}))));
|
|
36
33
|
};
|
|
37
34
|
exports.TabBar = TabBar;
|
|
@@ -27,7 +27,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
|
|
|
27
27
|
return result;
|
|
28
28
|
};
|
|
29
29
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
30
|
-
exports.TabBarTabStyled = exports.TabBarTabWrapper = exports.TabBarRowStyled = exports.TabBarContainerStyled =
|
|
30
|
+
exports.TabBarTabStyled = exports.TabBarTabWrapper = exports.TabBarRowStyled = exports.TabBarContainerStyled = void 0;
|
|
31
31
|
var styled_components_1 = __importStar(require("styled-components"));
|
|
32
32
|
var themes_1 = require("../../themes");
|
|
33
33
|
var mixins_1 = require("../../themes/mixins");
|
|
@@ -58,21 +58,20 @@ var tabBarTabStyle2 = (0, styled_components_1.css)(templateObject_9 || (template
|
|
|
58
58
|
var active = _a.active;
|
|
59
59
|
return active && (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n border-radius: 0.2rem;\n color: ", ";\n "], ["\n border-radius: 0.2rem;\n color: ", ";\n "])), white);
|
|
60
60
|
});
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
exports.
|
|
69
|
-
exports.
|
|
70
|
-
exports.TabBarTabWrapper = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
61
|
+
// export const TabBarStyled = styled.div`
|
|
62
|
+
// background-color: ${white};
|
|
63
|
+
// z-index: 1000;
|
|
64
|
+
// border-top: ${({ top }) => top && `0.1rem solid ${greyColor5}`};
|
|
65
|
+
// border-bottom: ${({ bottom }) => bottom && `0.1rem solid ${greyColor5}`};
|
|
66
|
+
// `;
|
|
67
|
+
exports.TabBarContainerStyled = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n width: fit-content;\n"], ["\n width: fit-content;\n"])));
|
|
68
|
+
exports.TabBarRowStyled = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
69
|
+
exports.TabBarTabWrapper = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
71
70
|
var style1 = _a.style1;
|
|
72
71
|
return (style1 ? tabBarWrapperStyle1 : tabBarWrapperStyle2);
|
|
73
72
|
});
|
|
74
|
-
exports.TabBarTabStyled = styled_components_1.default.button(
|
|
73
|
+
exports.TabBarTabStyled = styled_components_1.default.button(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n padding: 0.8rem 2rem;\n cursor: pointer;\n color: ", ";\n background-color: ", ";\n\n border: 0;\n :hover {\n background-color: ", ";\n }\n\n ", "\n"], ["\n padding: 0.8rem 2rem;\n cursor: pointer;\n color: ", ";\n background-color: ", ";\n\n border: 0;\n :hover {\n background-color: ", ";\n }\n\n ", "\n"])), greyColor100, none, none, function (_a) {
|
|
75
74
|
var style1 = _a.style1;
|
|
76
75
|
return (style1 ? tabBarTabStyle1 : tabBarTabStyle2);
|
|
77
76
|
});
|
|
78
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13
|
|
77
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13;
|
package/dist/icons/index.d.ts
CHANGED
|
@@ -45,6 +45,7 @@ export namespace icons {
|
|
|
45
45
|
export { Cards };
|
|
46
46
|
export { SignOut };
|
|
47
47
|
export { CheckCircle };
|
|
48
|
+
export { Circle };
|
|
48
49
|
export { ImageSquare };
|
|
49
50
|
export { ListDashes };
|
|
50
51
|
export { ListNumbers };
|
|
@@ -123,6 +124,7 @@ import { CheckSquareOffset } from "phosphor-react";
|
|
|
123
124
|
import { Cards } from "phosphor-react";
|
|
124
125
|
import { SignOut } from "phosphor-react";
|
|
125
126
|
import { CheckCircle } from "phosphor-react";
|
|
127
|
+
import { Circle } from "phosphor-react";
|
|
126
128
|
import { ImageSquare } from "phosphor-react";
|
|
127
129
|
import { ListDashes } from "phosphor-react";
|
|
128
130
|
import { ListNumbers } from "phosphor-react";
|
package/dist/icons/index.js
CHANGED
|
@@ -50,6 +50,7 @@ exports.icons = {
|
|
|
50
50
|
Cards: phosphor_react_1.Cards,
|
|
51
51
|
SignOut: phosphor_react_1.SignOut,
|
|
52
52
|
CheckCircle: phosphor_react_1.CheckCircle,
|
|
53
|
+
Circle: phosphor_react_1.Circle,
|
|
53
54
|
ImageSquare: phosphor_react_1.ImageSquare,
|
|
54
55
|
ListDashes: phosphor_react_1.ListDashes,
|
|
55
56
|
ListNumbers: phosphor_react_1.ListNumbers,
|