oolib 2.38.2 → 2.39.0
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.js +28 -8
- package/dist/components/TabBar/index.styled.js +16 -16
- package/dist/components/TextInputs/index.js +2 -2
- package/dist/components/Tooltip/index.js +13 -1
- package/dist/utils/customHooks/useScrollBar.js +8 -0
- package/dist/utils/getBlockLabelProps.js +0 -1
- package/package.json +1 -1
|
@@ -10,21 +10,41 @@ var __assign = (this && this.__assign) || function () {
|
|
|
10
10
|
};
|
|
11
11
|
return __assign.apply(this, arguments);
|
|
12
12
|
};
|
|
13
|
-
var
|
|
14
|
-
|
|
13
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
14
|
+
if (k2 === undefined) k2 = k;
|
|
15
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
16
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
17
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
18
|
+
}
|
|
19
|
+
Object.defineProperty(o, k2, desc);
|
|
20
|
+
}) : (function(o, m, k, k2) {
|
|
21
|
+
if (k2 === undefined) k2 = k;
|
|
22
|
+
o[k2] = m[k];
|
|
23
|
+
}));
|
|
24
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
25
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
26
|
+
}) : function(o, v) {
|
|
27
|
+
o["default"] = v;
|
|
28
|
+
});
|
|
29
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
|
30
|
+
if (mod && mod.__esModule) return mod;
|
|
31
|
+
var result = {};
|
|
32
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
33
|
+
__setModuleDefault(result, mod);
|
|
34
|
+
return result;
|
|
15
35
|
};
|
|
16
36
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
37
|
exports.TabBarStyle2 = exports.TabBarStyle1 = void 0;
|
|
18
|
-
var react_1 =
|
|
38
|
+
var react_1 = __importStar(require("react"));
|
|
19
39
|
var useScrollBar_1 = require("../../utils/customHooks/useScrollBar");
|
|
20
40
|
var Buttons_1 = require("../Buttons");
|
|
21
41
|
var index_styled_1 = require("./index.styled");
|
|
22
42
|
var Base = function (_a) {
|
|
23
|
-
var id = _a.id, options = _a.options, valueProp = _a.value, onChange = _a.onChange, style = _a.style, errorTabs = _a.errorTabs, _b = _a.tabBarStyle, tabBarStyle = _b === void 0 ? '1' : _b, saveValueAsString = _a.saveValueAsString, M = _a.M, S = _a.S, _size = _a.size //use any one of these 3
|
|
43
|
+
var id = _a.id, options = _a.options, valueProp = _a.value, onChange = _a.onChange, style = _a.style, errorTabs = _a.errorTabs, _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
|
|
24
44
|
;
|
|
25
45
|
var size = _size || (S ? 'S' : 'M'); //defaults to M
|
|
26
46
|
var value = saveValueAsString ? options.find(function (d) { return d.value === valueProp; }) : valueProp;
|
|
27
|
-
var
|
|
47
|
+
var _d = (0, useScrollBar_1.useScrollBar)(), scrollContainerRef = _d.scrollContainerRef, scrollX = _d.scrollX, scrollIsAtEnd = _d.scrollIsAtEnd, slide = _d.slide, checkScrollPosition = _d.checkScrollPosition;
|
|
28
48
|
var handleClick = function (v) {
|
|
29
49
|
onChange && onChange(id, saveValueAsString ? v.value : v);
|
|
30
50
|
};
|
|
@@ -35,9 +55,9 @@ var Base = function (_a) {
|
|
|
35
55
|
react_1.default.createElement(index_styled_1.TabBarRowStyled, { id: id, ref: scrollContainerRef, onScroll: checkScrollPosition }, options.map(function (op) {
|
|
36
56
|
var tabHasError = errorTabs && errorTabs.some(function (tab) { return tab.value === op.value; });
|
|
37
57
|
var tabIsActive = value && op.value === value.value;
|
|
38
|
-
return (react_1.default.createElement(index_styled_1.TabBarTabWrapper, { tabBarStyle: tabBarStyle, key: op.value, active: tabIsActive, error: tabHasError },
|
|
39
|
-
react_1.default.createElement(index_styled_1.TabBarTabStyled, { size: size, active: tabIsActive, error: tabHasError, tabBarStyle: tabBarStyle, onClick: function () { return handleClick(op); } },
|
|
40
|
-
react_1.default.createElement(index_styled_1.STYLED_SANS_2, {
|
|
58
|
+
return (react_1.default.createElement(index_styled_1.TabBarTabWrapper, { tabBarStyle: tabBarStyle, key: op.value, active: tabIsActive, error: tabHasError, black: black },
|
|
59
|
+
react_1.default.createElement(index_styled_1.TabBarTabStyled, { size: size, active: tabIsActive, error: tabHasError, tabBarStyle: tabBarStyle, onClick: function () { return handleClick(op); }, black: black },
|
|
60
|
+
react_1.default.createElement(index_styled_1.STYLED_SANS_2, { capitalize: true, active: tabIsActive, tabBarStyle: tabBarStyle, error: tabHasError, semibold: tabIsActive ? true : false }, op.display))));
|
|
41
61
|
})),
|
|
42
62
|
!scrollIsAtEnd && (react_1.default.createElement(index_styled_1.StyledDirectionButtons, null,
|
|
43
63
|
react_1.default.createElement(Buttons_1.ButtonGhost, { S: true, icon: 'CaretRight', style: { height: '100%' }, onClick: function () { return slide("right"); } }))))));
|
|
@@ -40,14 +40,14 @@ var tabBarWrapperStyle1 = (0, styled_components_1.css)(templateObject_3 || (temp
|
|
|
40
40
|
}, function (_a) {
|
|
41
41
|
var active = _a.active;
|
|
42
42
|
return active && (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: relative;\n background-color: ", ";\n border-radius: 0.2rem;\n ::after {\n content: \"\";\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 3px;\n background-color: ", ";\n }\n "], ["\n position: relative;\n background-color: ", ";\n border-radius: 0.2rem;\n ::after {\n content: \"\";\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 3px;\n background-color: ", ";\n }\n "])), greyColor5, function (_a) {
|
|
43
|
-
var error = _a.error, colors = _a.theme.colors;
|
|
44
|
-
return error ? red : (0, utilsOolib_1.getPrimaryColor100)(colors);
|
|
43
|
+
var error = _a.error, colors = _a.theme.colors, black = _a.black;
|
|
44
|
+
return error ? red : black ? greyColor100 : (0, utilsOolib_1.getPrimaryColor100)(colors);
|
|
45
45
|
});
|
|
46
46
|
}, function (_a) {
|
|
47
47
|
var error = _a.error;
|
|
48
48
|
return error && (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n position: relative;\n background-color: ", ";\n \n "], ["\n position: relative;\n background-color: ", ";\n \n "])), lightRed);
|
|
49
49
|
});
|
|
50
|
-
var tabBarWrapperStyle2 = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n ", "\n background-color: ", ";\n :first-of-type {\n border-radius:
|
|
50
|
+
var tabBarWrapperStyle2 = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n ", "\n background-color: ", ";\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 :hover {\n background-color: ", ";\n }\n\n ", "\n\n ", "\n\n \n"], ["\n ", "\n background-color: ", ";\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 :hover {\n background-color: ", ";\n }\n\n ", "\n\n ", "\n\n \n"])), (0, mixins_1.transition)("background-color"), greyColor5, function (_a) {
|
|
51
51
|
var active = _a.active, error = _a.error;
|
|
52
52
|
return (active ? "" : error ? invertRed : greyColor10);
|
|
53
53
|
}, function (_a) {
|
|
@@ -60,13 +60,13 @@ var tabBarWrapperStyle2 = (0, styled_components_1.css)(templateObject_6 || (temp
|
|
|
60
60
|
return error ? red : greyColor100;
|
|
61
61
|
});
|
|
62
62
|
});
|
|
63
|
-
var tabBarTabStyle1 = (0, styled_components_1.css)(
|
|
64
|
-
var error = _a.error;
|
|
65
|
-
return error && (0,
|
|
63
|
+
var tabBarTabStyle1 = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n white-space: nowrap;\n color: ", "\n"], ["\n white-space: nowrap;\n color: ", "\n"])), function (_a) {
|
|
64
|
+
var active = _a.active, colors = _a.theme.colors, error = _a.error, black = _a.black;
|
|
65
|
+
return error ? red : active && !black ? (0, utilsOolib_1.getPrimaryColor100)(colors) : greyColor100;
|
|
66
66
|
});
|
|
67
|
-
var tabBarTabStyle2 = (0, styled_components_1.css)(
|
|
67
|
+
var tabBarTabStyle2 = (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n padding-left: 2rem;\n padding-right: 2rem;\n ", "\n ", "\n\n"], ["\n padding-left: 2rem;\n padding-right: 2rem;\n ", "\n ", "\n\n"])), (0, mixins_1.transition)("color"), function (_a) {
|
|
68
68
|
var active = _a.active;
|
|
69
|
-
return active && (0, styled_components_1.css)(
|
|
69
|
+
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);
|
|
70
70
|
});
|
|
71
71
|
// export const TabBarStyled = styled.div`
|
|
72
72
|
// background-color: ${white};
|
|
@@ -74,24 +74,24 @@ var tabBarTabStyle2 = (0, styled_components_1.css)(templateObject_10 || (templat
|
|
|
74
74
|
// border-top: ${({ top }) => top && `0.1rem solid ${greyColor5}`};
|
|
75
75
|
// border-bottom: ${({ bottom }) => bottom && `0.1rem solid ${greyColor5}`};
|
|
76
76
|
// `;
|
|
77
|
-
exports.TabBarStyled = styled_components_1.default.div(
|
|
77
|
+
exports.TabBarStyled = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n background-color: ", ";\n z-index: 1000;\n height: ", ";\n \n"], ["\n background-color: ", ";\n z-index: 1000;\n height: ", ";\n \n"])), white, function (_a) {
|
|
78
78
|
var size = _a.size;
|
|
79
79
|
return size === 'S' ? '3rem' : '4rem';
|
|
80
80
|
});
|
|
81
|
-
exports.TabBarContainerStyled = styled_components_1.default.div(
|
|
82
|
-
exports.TabBarRowStyled = styled_components_1.default.div(
|
|
83
|
-
exports.TabBarTabWrapper = styled_components_1.default.div(
|
|
81
|
+
exports.TabBarContainerStyled = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n /* width: fit-content; // */\n /* width: 600px; */\n height: 100%;\n display: flex;\n align-items: center;\n"], ["\n /* width: fit-content; // */\n /* width: 600px; */\n height: 100%;\n display: flex;\n align-items: center;\n"])));
|
|
82
|
+
exports.TabBarRowStyled = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n display: flex;\n height: 100%;\n white-space: nowrap;\n max-width: 100%;\n overflow-x: hidden; \n scroll-behavior: smooth;\n &::-webkit-scrollbar {\n background: transparent; /* make scrollbar transparent */\n -webkit-appearance: none;\n width: 0;\n height: 0;\n }\n"], ["\n display: flex;\n height: 100%;\n white-space: nowrap;\n max-width: 100%;\n overflow-x: hidden; \n scroll-behavior: smooth;\n &::-webkit-scrollbar {\n background: transparent; /* make scrollbar transparent */\n -webkit-appearance: none;\n width: 0;\n height: 0;\n }\n"])));
|
|
83
|
+
exports.TabBarTabWrapper = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n ", "\n display: flex;\n align-items: center;\n /* min-width: 0; //so that ellipsis works on the text within */\n :nth-child(1){\n border-left: 1px solid ", ";\n }\n\n"], ["\n ", "\n display: flex;\n align-items: center;\n /* min-width: 0; //so that ellipsis works on the text within */\n :nth-child(1){\n border-left: 1px solid ", ";\n }\n\n"])), function (_a) {
|
|
84
84
|
var tabBarStyle = _a.tabBarStyle;
|
|
85
85
|
return tabBarStyle === "1"
|
|
86
86
|
? tabBarWrapperStyle1
|
|
87
87
|
: tabBarStyle === "2" && tabBarWrapperStyle2;
|
|
88
88
|
}, greyColor15);
|
|
89
|
-
exports.TabBarTabStyled = styled_components_1.default.button(
|
|
89
|
+
exports.TabBarTabStyled = styled_components_1.default.button(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n padding: 0 2rem;\n height: 100%;\n cursor: pointer;\n color: ", ";\n background-color: ", ";\n border-top: 0;\n border-bottom: 0;\n border-left: 0;\n border-right: 1px solid ", ";\n :hover {\n background-color: ", ";\n }\n\n ", " \n"], ["\n padding: 0 2rem;\n height: 100%;\n cursor: pointer;\n color: ", ";\n background-color: ", ";\n border-top: 0;\n border-bottom: 0;\n border-left: 0;\n border-right: 1px solid ", ";\n :hover {\n background-color: ", ";\n }\n\n ", " \n"])), greyColor100, none, greyColor15, none, function (_a) {
|
|
90
90
|
var tabBarStyle = _a.tabBarStyle;
|
|
91
91
|
return tabBarStyle === "1"
|
|
92
92
|
? tabBarTabStyle1
|
|
93
93
|
: tabBarStyle === "2" && tabBarTabStyle2;
|
|
94
94
|
});
|
|
95
|
-
exports.STYLED_SANS_2 = (0, styled_components_1.default)(Typo_1.SANS_2)(
|
|
96
|
-
exports.StyledDirectionButtons = styled_components_1.default.div(
|
|
97
|
-
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
|
|
95
|
+
exports.STYLED_SANS_2 = (0, styled_components_1.default)(Typo_1.SANS_2)(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n /* width: max-content; */\n /* white-space: nowrap; */\n /* text-overflow: ellipsis; */\n /* overflow: hidden; */\n"], ["\n /* width: max-content; */\n /* white-space: nowrap; */\n /* text-overflow: ellipsis; */\n /* overflow: hidden; */\n"])));
|
|
96
|
+
exports.StyledDirectionButtons = styled_components_1.default.div(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n height: 100%;\n border-right: 1px solid ", ";\n border-left: 1px solid ", ";\n"], ["\n height: 100%;\n border-right: 1px solid ", ";\n border-left: 1px solid ", ";\n"])), greyColor15, greyColor15);
|
|
97
|
+
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;
|
|
@@ -306,13 +306,13 @@ var NumberInput = function (_a) {
|
|
|
306
306
|
return errorObj;
|
|
307
307
|
}
|
|
308
308
|
if (min && value < min) {
|
|
309
|
-
errorObj = { type: 'error', msg: "Enter value greater than ".concat(min) };
|
|
309
|
+
errorObj = { type: 'error', msg: "Enter value greater than or equal to ".concat(min) };
|
|
310
310
|
if (passValidationErrorToFormValidation)
|
|
311
311
|
passValidationErrorToFormValidation(errorObj.type);
|
|
312
312
|
return errorObj;
|
|
313
313
|
}
|
|
314
314
|
if (max && value > max) {
|
|
315
|
-
errorObj = { type: 'error', msg: "Enter value less than ".concat(max) };
|
|
315
|
+
errorObj = { type: 'error', msg: "Enter value less than or equal to ".concat(max) };
|
|
316
316
|
if (passValidationErrorToFormValidation)
|
|
317
317
|
passValidationErrorToFormValidation(errorObj.type);
|
|
318
318
|
return errorObj;
|
|
@@ -1,4 +1,15 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
+
var __assign = (this && this.__assign) || function () {
|
|
3
|
+
__assign = Object.assign || function(t) {
|
|
4
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
+
s = arguments[i];
|
|
6
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
+
t[p] = s[p];
|
|
8
|
+
}
|
|
9
|
+
return t;
|
|
10
|
+
};
|
|
11
|
+
return __assign.apply(this, arguments);
|
|
12
|
+
};
|
|
2
13
|
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
14
|
if (k2 === undefined) k2 = k;
|
|
4
15
|
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
@@ -67,7 +78,8 @@ var Tooltip = function (_a) {
|
|
|
67
78
|
tabIndex: 0 }, presetTarget === "infoIcon" ? (react_1.default.createElement(styled_1.StyledIconButton, { type: showTooltip ? "none" : "fill" },
|
|
68
79
|
react_1.default.createElement(phosphor_react_1.Info, { color: invert ? themes_1.colors.white : themes_1.colors.greyColor100, size: 20, weight: showTooltip ? 'fill' : 'regular' }))) : (children)),
|
|
69
80
|
showTooltip && (react_1.default.createElement(styled_1.StyledTooltipBox, { fixPos: fixPos, isOpen: showTooltip, position: position, show: showTooltip, style: style, invert: invert },
|
|
70
|
-
|
|
81
|
+
text.split('\n').filter(Boolean).map(function (singleline, i) { return ( // this detects line breaks in text and renders them properly
|
|
82
|
+
react_1.default.createElement(Typo_1.SANS_2, __assign({}, (i !== 0 ? { style: { marginTop: '0.5rem' } } : {})), singleline)); }),
|
|
71
83
|
react_1.default.createElement(styled_1.StyledArrowOutline, { position: position },
|
|
72
84
|
react_1.default.createElement(styled_1.StyledArrow, { position: position, invert: invert }))))));
|
|
73
85
|
};
|
|
@@ -16,6 +16,14 @@ var useScrollBar = function () {
|
|
|
16
16
|
var _a = (0, react_1.useState)(0), scrollX = _a[0], setScrollX = _a[1];
|
|
17
17
|
var _b = (0, react_1.useState)(false), scrollIsAtEnd = _b[0], setScrollIsAtEnd = _b[1];
|
|
18
18
|
var scrollContainerRef = (0, react_1.useRef)(null);
|
|
19
|
+
// const numberOfTabs = scrollContainerRef.current.childNodes.length
|
|
20
|
+
// const lastTab = scrollContainerRef.current.childNodes[numberOfTabs - 1];
|
|
21
|
+
// const lastTabRect = lastTab.getBoundingClientRect();
|
|
22
|
+
// console.log("lastTabRect", lastTabRect)
|
|
23
|
+
// const isLastTabVisible = lastTabRect.right <= containerWidth.innerWidth;
|
|
24
|
+
// const isLastTabHalfVisible = lastTabRect.right > containerWidth.innerWidth && lastTabRect.left < containerWidth.innerWidth;
|
|
25
|
+
// console.log("islast", isLastTabVisible)
|
|
26
|
+
// console.log("islasthalf",isLastTabHalfVisible)
|
|
19
27
|
var slide = function (direction) {
|
|
20
28
|
var _a = scrollContainerRef.current, scrollWidth = _a.scrollWidth, offsetWidth = _a.offsetWidth, scrollLeft = _a.scrollLeft;
|
|
21
29
|
var containerWidth = scrollContainerRef.current.parentNode.getBoundingClientRect().width;
|