oolib 2.206.6 → 2.207.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/dist/stories/v2/components/TabBar.stories.js +3 -2
- package/dist/v2/components/TabBar/index.d.ts +1 -0
- package/dist/v2/components/TabBar/index.js +25 -8
- package/dist/v2/components/TabBar/index.styled.d.ts +5 -1
- package/dist/v2/components/TabBar/index.styled.js +59 -20
- package/package.json +1 -1
|
@@ -92,7 +92,7 @@ exports.default = {
|
|
|
92
92
|
};
|
|
93
93
|
var TabBar_ = function (args) {
|
|
94
94
|
var options = [
|
|
95
|
-
{ display: "display 1", value: "value1", icon: 'Funnel' },
|
|
95
|
+
{ display: "display 1", value: "value1", icon: 'Funnel', message: '5' },
|
|
96
96
|
{ display: "display 2", value: "value2", icon: 'ListDashes' },
|
|
97
97
|
{ display: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.", value: "value3", icon: "GearSix" },
|
|
98
98
|
{ display: "display 3", value: "value4", icon: "Cube" },
|
|
@@ -135,6 +135,7 @@ var TabBar_ = function (args) {
|
|
|
135
135
|
args.onChange = function (id, value) { return setActive(value); };
|
|
136
136
|
return (react_1.default.createElement("div", { style: { width: !args.changeWidth ? '' : '400px', padding: "4rem", display: "flex", gap: "10rem", flexDirection: "column" } },
|
|
137
137
|
react_1.default.createElement(TabBars.TabBarStyle1, __assign({}, args, { errorTabs: errorTabs, disabledTabs: disabledTabs, black: args.color === "black" ? true : false })),
|
|
138
|
-
react_1.default.createElement(TabBars.TabBarStyle1, __assign({}, args, { options: args.options.map(function (item, i) { return !i ? (__assign(__assign({}, item), { message: "New" })) : item; }), errorTabs: errorTabs, disabledTabs: disabledTabs, black: args.color === "black" ? true : false }))
|
|
138
|
+
react_1.default.createElement(TabBars.TabBarStyle1, __assign({}, args, { options: args.options.map(function (item, i) { return !i ? (__assign(__assign({}, item), { message: "New" })) : item; }), errorTabs: errorTabs, disabledTabs: disabledTabs, black: args.color === "black" ? true : false })),
|
|
139
|
+
react_1.default.createElement(TabBars.TabBarStyle2, __assign({}, args, { errorTabs: errorTabs, disabledTabs: disabledTabs, black: args.color === "black" ? true : false }))));
|
|
139
140
|
};
|
|
140
141
|
exports.TabBar_ = TabBar_;
|
|
@@ -14,7 +14,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
14
14
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
15
15
|
};
|
|
16
16
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
-
exports.TabBarStyle1 = void 0;
|
|
17
|
+
exports.TabBarStyle2 = exports.TabBarStyle1 = void 0;
|
|
18
18
|
var react_1 = __importDefault(require("react"));
|
|
19
19
|
var useScrollBar_1 = require("../../../utils/customHooks/useScrollBar");
|
|
20
20
|
var Buttons_1 = require("../../../components/Buttons");
|
|
@@ -25,11 +25,11 @@ var mixins_1 = require("../../../themes/mixins");
|
|
|
25
25
|
var Typo2_1 = require("../Typo2");
|
|
26
26
|
var colors_1 = require("../../themes/colors");
|
|
27
27
|
var icons_1 = require("../../../icons");
|
|
28
|
-
var __1 = require("../../..");
|
|
29
28
|
var List = icons_1.icons.List;
|
|
30
29
|
var Base = function (_a) {
|
|
31
30
|
var id = _a.id, options = _a.options, valueProp = _a.value, onChange = _a.onChange, style = _a.style, errorTabs = _a.errorTabs, disabledTabs = _a.disabledTabs, _b = _a.tabBarStyle, tabBarStyle = _b === void 0 ? '1' : _b, saveValueAsString = _a.saveValueAsString, _c = _a.black, black = _c === void 0 ? false : _c, M = _a.M, S = _a.S, _size = _a.size //use any one of these 3
|
|
32
31
|
;
|
|
32
|
+
var Typo = tabBarStyle === '1' ? Typo2_1.UI_BODY_SEMIBOLD_DF : Typo2_1.UI_BODY_SEMIBOLD_SM_DF;
|
|
33
33
|
var size = _size || (S ? 'S' : 'M'); //defaults to M
|
|
34
34
|
var value = saveValueAsString ? options.find(function (d) { return d.value === valueProp; }) : valueProp;
|
|
35
35
|
var _d = (0, useScrollBar_1.useScrollBar)(), scrollContainerRef = _d.scrollContainerRef, scrollX = _d.scrollX, scrollIsAtEnd = _d.scrollIsAtEnd, scrollIsAtStart = _d.scrollIsAtStart, slide = _d.slide;
|
|
@@ -50,19 +50,22 @@ var Base = function (_a) {
|
|
|
50
50
|
!scrollIsAtStart && (react_1.default.createElement(index_styled_1.StyledDirectionButtons, { left: true },
|
|
51
51
|
react_1.default.createElement(Buttons_1.ButtonGhost, { S: true, icon: 'CaretLeft', style: { height: '100%' }, onClick: function () { return slide("left"); } }))),
|
|
52
52
|
react_1.default.createElement("div", { ref: scrollContainerRef, style: { maxWidth: '100%', height: '100%', overflow: 'hidden' } },
|
|
53
|
-
react_1.default.createElement(index_styled_1.TabBarRowStyled, { id: id, translateX: scrollX, tabsHasText: tabsHasText }, options.map(function (op) {
|
|
53
|
+
react_1.default.createElement(index_styled_1.TabBarRowStyled, { id: id, translateX: scrollX, tabsHasText: tabsHasText, tabBarStyle: tabBarStyle }, options.map(function (op) {
|
|
54
54
|
var tabHasError = errorTabs && errorTabs.some(function (tab) { return tab.value === op.value; });
|
|
55
55
|
var tabIsDisabled = disabledTabs && disabledTabs.some(function (tab) { return tab.value === op.value; });
|
|
56
56
|
var tabIsActive = value && op.value === value.value;
|
|
57
57
|
return (react_1.default.createElement(index_styled_1.TabBarTabWrapper, { tabBarStyle: tabBarStyle, key: op.value, active: tabIsActive, error: tabHasError, disabled: tabIsDisabled, black: black },
|
|
58
|
-
react_1.default.createElement(index_styled_1.TabBarTabStyled, { tabsHasText: tabsHasText, size: size, active: tabIsActive, error: tabHasError, disabled: tabIsDisabled, tabBarStyle: tabBarStyle, onClick: function () { return handleClick(op); }, black: black },
|
|
58
|
+
react_1.default.createElement(index_styled_1.TabBarTabStyled, { tabsHasText: tabsHasText, size: size, active: tabIsActive, error: tabHasError, disabled: tabIsDisabled, tabBarStyle: tabBarStyle, onClick: function () { return handleClick(op); }, black: black, message: op.message },
|
|
59
59
|
react_1.default.createElement("div", { style: { display: 'flex', alignItems: 'center', gap: '0.4rem' } },
|
|
60
60
|
op.icon && genIconInTab({ icon: op.icon, display: op.display }),
|
|
61
61
|
op.display &&
|
|
62
|
-
react_1.default.createElement(
|
|
63
|
-
op.message &&
|
|
64
|
-
react_1.default.createElement(
|
|
65
|
-
react_1.default.createElement(Typo2_1.UI_TAG,
|
|
62
|
+
react_1.default.createElement(Typo, { capitalize: true }, op.display),
|
|
63
|
+
op.message && tabBarStyle === '1' ?
|
|
64
|
+
react_1.default.createElement(index_styled_1.StyledMessage1, null,
|
|
65
|
+
react_1.default.createElement(Typo2_1.UI_TAG, null, op.message))
|
|
66
|
+
: op.message && tabBarStyle === '2' &&
|
|
67
|
+
react_1.default.createElement(index_styled_1.StyledMessage2, null,
|
|
68
|
+
react_1.default.createElement(Typo2_1.UI_CAPTION_BOLD, { style: { margin: "auto" } }, op.message))),
|
|
66
69
|
tabHasError && react_1.default.createElement(index_styled_1.StyledDot, { active: tabIsActive, error: tabHasError, tabBarStyle: tabBarStyle }))));
|
|
67
70
|
}))),
|
|
68
71
|
!scrollIsAtEnd && (react_1.default.createElement(index_styled_1.StyledDirectionButtons, { right: true },
|
|
@@ -82,6 +85,20 @@ var TabBarStyle1 = function (props) {
|
|
|
82
85
|
: (react_1.default.createElement(Base, __assign({}, props, { tabBarStyle: "1" }))));
|
|
83
86
|
};
|
|
84
87
|
exports.TabBarStyle1 = TabBarStyle1;
|
|
88
|
+
var TabBarStyle2 = function (props) {
|
|
89
|
+
var _a = props.placeholder, placeholder = _a === void 0 ? 'Select An Option' : _a;
|
|
90
|
+
var screenWidth = (0, _EXPORTS_1.useScreenWidth)();
|
|
91
|
+
var isDesktop = screenWidth >= (0, mixins_1.getBreakPoint)("sm");
|
|
92
|
+
return (props.responsive && !isDesktop
|
|
93
|
+
? (react_1.default.createElement(DropdownSingle_1.DropdownSingle, __assign({}, props, { genCustomSelectComp: function () {
|
|
94
|
+
var _a, _b;
|
|
95
|
+
return react_1.default.createElement(CustomSelectComp, { saveValueAsString: props.saveValueAsString, value: props.value, title: props.title, placeholder: placeholder, display: props.saveValueAsString
|
|
96
|
+
? (_a = props.options.find(function (d) { return d.value === props.value; })) === null || _a === void 0 ? void 0 : _a.display
|
|
97
|
+
: (_b = props.value) === null || _b === void 0 ? void 0 : _b.display });
|
|
98
|
+
} })))
|
|
99
|
+
: (react_1.default.createElement(Base, __assign({}, props, { tabBarStyle: "2" }))));
|
|
100
|
+
};
|
|
101
|
+
exports.TabBarStyle2 = TabBarStyle2;
|
|
85
102
|
var CustomSelectComp = function (_a) {
|
|
86
103
|
var display = _a.display, title = _a.title, placeholder = _a.placeholder;
|
|
87
104
|
return (react_1.default.createElement(index_styled_1.StyledWrapper, null,
|
|
@@ -1,16 +1,20 @@
|
|
|
1
1
|
export namespace wrapperStyles {
|
|
2
2
|
let style1: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
|
|
3
|
+
let style2: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
|
|
3
4
|
}
|
|
4
5
|
export namespace tabStyles {
|
|
5
6
|
let style1_1: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
|
|
6
7
|
export { style1_1 as style1 };
|
|
8
|
+
let style2_1: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
|
|
9
|
+
export { style2_1 as style2 };
|
|
7
10
|
}
|
|
8
11
|
export const TabBarStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
9
12
|
export const TabBarContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
10
13
|
export const TabBarRowStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
11
14
|
export const TabBarTabWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
12
15
|
export const TabBarTabStyled: import("styled-components").StyledComponent<"button", any, {}, never>;
|
|
13
|
-
export const STYLED_TYPO: import("styled-components").StyledComponent<import("react").FunctionComponent<import("../Typo2").TypoCompProps>, any, {}, never>;
|
|
14
16
|
export const StyledDirectionButtons: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
15
17
|
export const StyledDot: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
16
18
|
export const StyledWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
19
|
+
export const StyledMessage1: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
20
|
+
export const StyledMessage2: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
@@ -37,13 +37,12 @@ var __importStar = (this && this.__importStar) || (function () {
|
|
|
37
37
|
};
|
|
38
38
|
})();
|
|
39
39
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
40
|
-
exports.
|
|
40
|
+
exports.StyledMessage2 = exports.StyledMessage1 = exports.StyledWrapper = exports.StyledDot = exports.StyledDirectionButtons = exports.TabBarTabStyled = exports.TabBarTabWrapper = exports.TabBarRowStyled = exports.TabBarContainerStyled = exports.TabBarStyled = exports.tabStyles = exports.wrapperStyles = void 0;
|
|
41
41
|
var styled_components_1 = __importStar(require("styled-components"));
|
|
42
42
|
var mixins_1 = require("../../../themes/mixins");
|
|
43
43
|
var themes_1 = require("../../themes");
|
|
44
44
|
var getDynamicColors_1 = require("../../themes/utils/getDynamicColors");
|
|
45
|
-
var
|
|
46
|
-
var secondaryContainer = themes_1.colors.secondaryContainer, onSecondary = themes_1.colors.onSecondary, white = themes_1.colors.white, black = themes_1.colors.black, grey80 = themes_1.colors.grey80, grey40 = themes_1.colors.grey40, grey10 = themes_1.colors.grey10, errorColor = themes_1.colors.error;
|
|
45
|
+
var onSecondary = themes_1.colors.onSecondary, white = themes_1.colors.white, black = themes_1.colors.black, grey80 = themes_1.colors.grey80, grey40 = themes_1.colors.grey40, grey10 = themes_1.colors.grey10, errorColor = themes_1.colors.error, redBG = themes_1.colors.redBG;
|
|
47
46
|
exports.wrapperStyles = {
|
|
48
47
|
style1: (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n :first-of-type {\n border-radius: 1px 0 0 2px;\n }\n :last-of-type {\n border-radius: 0 2px 2px 0;\n }\n\n background-color: white;\n color: ", ";\n \n ", " \n\n ", "\n\n ", "\n\n \n "], ["\n :first-of-type {\n border-radius: 1px 0 0 2px;\n }\n :last-of-type {\n border-radius: 0 2px 2px 0;\n }\n\n background-color: white;\n color: ", ";\n \n ", " \n\n ", "\n\n ", "\n\n \n "])), function (_a) {
|
|
49
48
|
var error = _a.error, active = _a.active, disabled = _a.disabled;
|
|
@@ -57,10 +56,14 @@ exports.wrapperStyles = {
|
|
|
57
56
|
}, function (_a) {
|
|
58
57
|
var active = _a.active;
|
|
59
58
|
return active && (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n /* border-radius: 0.2rem; */\n position: relative;\n "], ["\n /* border-radius: 0.2rem; */\n position: relative;\n "])));
|
|
59
|
+
}),
|
|
60
|
+
style2: (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n background-color: ", ";\n color: ", ";\n \n \n "], ["\n background-color: ", ";\n color: ", ";\n \n \n "])), white, function (_a) {
|
|
61
|
+
var error = _a.error, active = _a.active, disabled = _a.disabled;
|
|
62
|
+
return active && error ? errorColor : disabled ? grey40 : black;
|
|
60
63
|
})
|
|
61
64
|
};
|
|
62
65
|
exports.tabStyles = {
|
|
63
|
-
style1: (0, styled_components_1.css)(
|
|
66
|
+
style1: (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n border-radius: 6px;\n background-color: ", ";\n color: ", ";\n \n ", " \n \n &:active {\n background-color: ", " ;\n color: ", " ;\n }\n \n &:hover {\n background-color: ", ";\n color: ", ";\n } \n \n ", "\n "], ["\n border-radius: 6px;\n background-color: ", ";\n color: ", ";\n \n ", " \n \n &:active {\n background-color: ", " ;\n color: ", " ;\n }\n \n &:hover {\n background-color: ", ";\n color: ", ";\n } \n \n ", "\n "])), function (_a) {
|
|
64
67
|
var active = _a.active, disabled = _a.disabled, colors = _a.theme.colors;
|
|
65
68
|
return active ? (0, getDynamicColors_1.getSecondaryContainer)(colors) : white;
|
|
66
69
|
}, function (_a) {
|
|
@@ -68,7 +71,7 @@ exports.tabStyles = {
|
|
|
68
71
|
return disabled ? grey40 : active ? (0, getDynamicColors_1.getOnSecondary)(colors) || onSecondary : grey80;
|
|
69
72
|
}, function (_a) {
|
|
70
73
|
var disabled = _a.disabled;
|
|
71
|
-
return disabled && (0, styled_components_1.css)(
|
|
74
|
+
return disabled && (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n cursor: not-allowed;\n color: ", ";\n "], ["\n cursor: not-allowed;\n color: ", ";\n "])), grey40);
|
|
72
75
|
}, function (_a) {
|
|
73
76
|
var disabled = _a.disabled, colors = _a.theme.colors;
|
|
74
77
|
return disabled ? grey40 : (0, getDynamicColors_1.getSecondaryContainer)(colors);
|
|
@@ -81,28 +84,61 @@ exports.tabStyles = {
|
|
|
81
84
|
}, function (_a) {
|
|
82
85
|
var disabled = _a.disabled, active = _a.active, colors = _a.theme.colors;
|
|
83
86
|
return disabled ? grey40 : active ? (0, getDynamicColors_1.getOnSecondary)(colors) : grey80;
|
|
84
|
-
}, (0, mixins_1.transition)("color"))
|
|
87
|
+
}, (0, mixins_1.transition)("color")),
|
|
88
|
+
style2: (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n background-color: ", ";\n color: ", ";\n border-radius: 30px;\n padding: 0.4rem 1.2rem;\n \n ", "\n\n ", "\n\n ", " \n\n ", "\n &:hover {\n background-color: ", ";\n color: ", ";\n } \n "], ["\n background-color: ", ";\n color: ", ";\n border-radius: 30px;\n padding: 0.4rem 1.2rem;\n \n ", "\n\n ", "\n\n ", " \n\n ", "\n &:hover {\n background-color: ", ";\n color: ", ";\n } \n "])), function (_a) {
|
|
89
|
+
var active = _a.active, disabled = _a.disabled, colors = _a.theme.colors;
|
|
90
|
+
return active ? (0, getDynamicColors_1.getSecondaryContainer)(colors) : white;
|
|
91
|
+
}, function (_a) {
|
|
92
|
+
var error = _a.error, active = _a.active, disabled = _a.disabled;
|
|
93
|
+
return active && error ? errorColor : disabled ? grey40 : black;
|
|
94
|
+
}, function (_a) {
|
|
95
|
+
var message = _a.message;
|
|
96
|
+
return message && (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n padding-right: 0.8rem;\n "], ["\n padding-right: 0.8rem;\n "])));
|
|
97
|
+
}, function (_a) {
|
|
98
|
+
var error = _a.error;
|
|
99
|
+
return error && (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n background-color: ", ";\n "], ["\n background-color: ", ";\n "])), redBG);
|
|
100
|
+
}, function (_a) {
|
|
101
|
+
var disabled = _a.disabled;
|
|
102
|
+
return disabled && (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n cursor: not-allowed; \n color: ", ";\n "], ["\n cursor: not-allowed; \n color: ", ";\n "])), grey40);
|
|
103
|
+
}, function (_a) {
|
|
104
|
+
var active = _a.active;
|
|
105
|
+
return active && (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n background-color: ", ";\n color: ", ";\n "], ["\n background-color: ", ";\n color: ", ";\n "])), function (_a) {
|
|
106
|
+
var colors = _a.theme.colors;
|
|
107
|
+
return (0, getDynamicColors_1.getSecondaryContainer)(colors);
|
|
108
|
+
}, function (_a) {
|
|
109
|
+
var colors = _a.theme.colors;
|
|
110
|
+
return (0, getDynamicColors_1.getOnSecondary)(colors);
|
|
111
|
+
});
|
|
112
|
+
}, function (_a) {
|
|
113
|
+
var disabled = _a.disabled, active = _a.active;
|
|
114
|
+
return disabled ? white : active ? (0, getDynamicColors_1.getSecondaryContainer)(themes_1.colors) : grey10;
|
|
115
|
+
}, function (_a) {
|
|
116
|
+
var disabled = _a.disabled, active = _a.active, colors = _a.theme.colors;
|
|
117
|
+
return disabled ? grey40 : active ? (0, getDynamicColors_1.getOnSecondary)(colors) : grey80;
|
|
118
|
+
})
|
|
85
119
|
};
|
|
86
|
-
exports.TabBarStyled = styled_components_1.default.div(
|
|
120
|
+
exports.TabBarStyled = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n background-color: ", ";\n z-index: 1000;\n height: ", ";\n"], ["\n background-color: ", ";\n z-index: 1000;\n height: ", ";\n"])), white, function (_a) {
|
|
87
121
|
var size = _a.size;
|
|
88
122
|
return size === 'S' ? '2.5rem' : 'auto';
|
|
89
123
|
});
|
|
90
|
-
exports.TabBarContainerStyled = styled_components_1.default.div(
|
|
91
|
-
exports.TabBarRowStyled = styled_components_1.default.div(
|
|
92
|
-
var tabsHasText = _a.tabsHasText;
|
|
93
|
-
return
|
|
124
|
+
exports.TabBarContainerStyled = styled_components_1.default.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n height: 100%;\n display: flex;\n align-items: center;\n position: relative;\n"], ["\n height: 100%;\n display: flex;\n align-items: center;\n position: relative;\n"])));
|
|
125
|
+
exports.TabBarRowStyled = styled_components_1.default.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n display: flex;\n height: 100%;\n white-space: nowrap;\n width: fit-content;\n gap: ", ";\n ", ";\n transform: ", ";\n"], ["\n display: flex;\n height: 100%;\n white-space: nowrap;\n width: fit-content;\n gap: ", ";\n ", ";\n transform: ", ";\n"])), function (_a) {
|
|
126
|
+
var tabsHasText = _a.tabsHasText, tabBarStyle = _a.tabBarStyle;
|
|
127
|
+
return tabBarStyle === "2" ? "0" : "0.8rem";
|
|
94
128
|
}, (0, mixins_1.transition)('transform'), function (_a) {
|
|
95
129
|
var translateX = _a.translateX;
|
|
96
130
|
return "translateX(".concat(translateX, "px)");
|
|
97
131
|
});
|
|
98
|
-
exports.TabBarTabWrapper = styled_components_1.default.div(
|
|
132
|
+
exports.TabBarTabWrapper = styled_components_1.default.div(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n ", " \n\n display: flex;\n align-items: center;\n"], ["\n ", " \n\n display: flex;\n align-items: center;\n"])), function (_a) {
|
|
99
133
|
var tabBarStyle = _a.tabBarStyle;
|
|
100
134
|
switch (tabBarStyle) {
|
|
101
135
|
case "1":
|
|
102
136
|
return exports.wrapperStyles.style1;
|
|
137
|
+
case "2":
|
|
138
|
+
return exports.wrapperStyles.style2;
|
|
103
139
|
}
|
|
104
140
|
});
|
|
105
|
-
exports.TabBarTabStyled = styled_components_1.default.button(
|
|
141
|
+
exports.TabBarTabStyled = styled_components_1.default.button(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n padding: ", ";\n height: 100%;\n cursor: pointer;\n border: none;\n display: flex;\n justify-content: center;\n align-items: center;\n\n\n ", " \n"], ["\n padding: ", ";\n height: 100%;\n cursor: pointer;\n border: none;\n display: flex;\n justify-content: center;\n align-items: center;\n\n\n ", " \n"])), function (_a) {
|
|
106
142
|
var tabsHasText = _a.tabsHasText;
|
|
107
143
|
return tabsHasText ? "0.45rem 0.8rem" : "1rem 1rem";
|
|
108
144
|
}, function (_a) {
|
|
@@ -110,19 +146,22 @@ exports.TabBarTabStyled = styled_components_1.default.button(templateObject_11 |
|
|
|
110
146
|
switch (tabBarStyle) {
|
|
111
147
|
case "1":
|
|
112
148
|
return exports.tabStyles.style1;
|
|
149
|
+
case "2":
|
|
150
|
+
return exports.tabStyles.style2;
|
|
113
151
|
}
|
|
114
152
|
});
|
|
115
|
-
exports.
|
|
116
|
-
exports.StyledDirectionButtons = styled_components_1.default.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n position: absolute;\n ", "\n background-color: ", ";\n height: 100%;\n border-right: 1px solid ", ";\n border-left: 1px solid ", ";\n z-index: 10;\n"], ["\n position: absolute;\n ", "\n background-color: ", ";\n height: 100%;\n border-right: 1px solid ", ";\n border-left: 1px solid ", ";\n z-index: 10;\n"])), function (_a) {
|
|
153
|
+
exports.StyledDirectionButtons = styled_components_1.default.div(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n position: absolute;\n ", "\n background-color: ", ";\n height: 100%;\n border-right: 1px solid ", ";\n border-left: 1px solid ", ";\n z-index: 10;\n"], ["\n position: absolute;\n ", "\n background-color: ", ";\n height: 100%;\n border-right: 1px solid ", ";\n border-left: 1px solid ", ";\n z-index: 10;\n"])), function (_a) {
|
|
117
154
|
var left = _a.left, right = _a.right;
|
|
118
155
|
if (left)
|
|
119
|
-
return (0, styled_components_1.css)(
|
|
156
|
+
return (0, styled_components_1.css)(templateObject_18 || (templateObject_18 = __makeTemplateObject([" left: 0;"], [" left: 0;"])));
|
|
120
157
|
else if (right)
|
|
121
|
-
return (0, styled_components_1.css)(
|
|
158
|
+
return (0, styled_components_1.css)(templateObject_19 || (templateObject_19 = __makeTemplateObject([" right: 0;"], [" right: 0;"])));
|
|
122
159
|
}, white, grey10, grey10);
|
|
123
|
-
exports.StyledDot = styled_components_1.default.div(
|
|
160
|
+
exports.StyledDot = styled_components_1.default.div(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n background: ", ";\n height: 5px;\n width: 5px;\n border-radius: 50%;\n margin-left: 10px;\n"], ["\n background: ", ";\n height: 5px;\n width: 5px;\n border-radius: 50%;\n margin-left: 10px;\n"])), function (_a) {
|
|
124
161
|
var active = _a.active, error = _a.error, tabBarStyle = _a.tabBarStyle;
|
|
125
162
|
return tabBarStyle === "2" && active ? errorColor : !active && error ? errorColor : errorColor;
|
|
126
163
|
});
|
|
127
|
-
exports.StyledWrapper = styled_components_1.default.div(
|
|
128
|
-
|
|
164
|
+
exports.StyledWrapper = styled_components_1.default.div(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n display: flex;\n /* min-height: 5.6rem; */\n padding: 0.8rem 1.6rem;\n justify-content: space-between;\n align-items: center;\n align-self: stretch;\n border-radius: 1.2rem;\n background: #FFF;\n gap: 0.5rem;\n box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.10);\n cursor: pointer;\n"], ["\n display: flex;\n /* min-height: 5.6rem; */\n padding: 0.8rem 1.6rem;\n justify-content: space-between;\n align-items: center;\n align-self: stretch;\n border-radius: 1.2rem;\n background: #FFF;\n gap: 0.5rem;\n box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.10);\n cursor: pointer;\n"])));
|
|
165
|
+
exports.StyledMessage1 = styled_components_1.default.div(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n background: ", ";\n color: ", ";\n padding: 0.3rem 0.5rem;\n border-radius: 2px;\n"], ["\n background: ", ";\n color: ", ";\n padding: 0.3rem 0.5rem;\n border-radius: 2px;\n"])), themes_1.colors.black, themes_1.colors.white);
|
|
166
|
+
exports.StyledMessage2 = styled_components_1.default.div(templateObject_24 || (templateObject_24 = __makeTemplateObject(["\n border-radius: 1.2rem;\n background: ", ";\n color: ", ";\n margin: auto;\n min-width: 1.6rem;\n height: 1.6rem;\n padding: 0 0.5rem;\n"], ["\n border-radius: 1.2rem;\n background: ", ";\n color: ", ";\n margin: auto;\n min-width: 1.6rem;\n height: 1.6rem;\n padding: 0 0.5rem;\n"])), themes_1.colors.green, themes_1.colors.white);
|
|
167
|
+
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, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24;
|