oolib 2.206.1 → 2.206.3
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.
|
@@ -6,6 +6,11 @@ var getKeyCode_1 = require("../../../../utils/getKeyCode");
|
|
|
6
6
|
var useKeyboardControl = function (_a) {
|
|
7
7
|
var showOptions = _a.showOptions, handleHideOptions = _a.handleHideOptions, optionsWrapperRef = _a.optionsWrapperRef, handleSelect = _a.handleSelect, options = _a.options, searchString = _a.searchString, id = _a.id;
|
|
8
8
|
var _b = (0, react_1.useState)(-1), focussedOp = _b[0], setFocussedOp = _b[1];
|
|
9
|
+
var hasMountedRef = (0, react_1.useRef)(false);
|
|
10
|
+
// Track if component has mounted to prevent initial scroll
|
|
11
|
+
(0, react_1.useEffect)(function () {
|
|
12
|
+
hasMountedRef.current = true;
|
|
13
|
+
}, []);
|
|
9
14
|
// if search string is not empty, then reset focussedOp to first op
|
|
10
15
|
// else set it to minus 1
|
|
11
16
|
(0, react_1.useEffect)(function () {
|
|
@@ -21,12 +26,6 @@ var useKeyboardControl = function (_a) {
|
|
|
21
26
|
}, [showOptions]);
|
|
22
27
|
(0, react_1.useEffect)(function () {
|
|
23
28
|
var handleKeyDown = function (e) {
|
|
24
|
-
if (!showOptions)
|
|
25
|
-
return;
|
|
26
|
-
/**
|
|
27
|
-
* dont prevent default outside the condition, else
|
|
28
|
-
* all other key actions stop working..
|
|
29
|
-
*/
|
|
30
29
|
var code = (0, getKeyCode_1.getKeyCode)(e);
|
|
31
30
|
if (code === 'Enter') {
|
|
32
31
|
if (options[focussedOp])
|
|
@@ -50,6 +49,9 @@ var useKeyboardControl = function (_a) {
|
|
|
50
49
|
return function () { return window.removeEventListener('keydown', handleKeyDown); };
|
|
51
50
|
});
|
|
52
51
|
var scrollFocussedOpIntoView = function (el) {
|
|
52
|
+
// Prevent automatic scrolling during initial render
|
|
53
|
+
if (!hasMountedRef.current || !showOptions)
|
|
54
|
+
return;
|
|
53
55
|
var _a = el.getBoundingClientRect(), elBottom = _a.bottom, elTop = _a.top;
|
|
54
56
|
var _b = optionsWrapperRef.current.getBoundingClientRect(), opsWrapperBottom = _b.bottom, opsWrapperTop = _b.top;
|
|
55
57
|
if (elBottom > opsWrapperBottom) {
|
|
@@ -24,13 +24,13 @@ exports.StyledButtonSlider = styled_components_1.default.div(templateObject_2 ||
|
|
|
24
24
|
return inactive ? grey10 : grey80;
|
|
25
25
|
}, function (_a) {
|
|
26
26
|
var disabled = _a.disabled;
|
|
27
|
-
return !disabled && (0, baseStyling_1.applyBlackOverlayOnHover)();
|
|
27
|
+
return !disabled && (0, baseStyling_1.applyBlackOverlayOnHover)({ zIndex: 0 });
|
|
28
28
|
});
|
|
29
29
|
var desktop_size = 1.2;
|
|
30
30
|
var desktop_left_right_gap = 0.3;
|
|
31
31
|
var mob_size = 1.4;
|
|
32
32
|
var mob_left_right_gap = 0.5;
|
|
33
|
-
exports.StyledSwitch = styled_components_1.default.button(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n \n width: ", "rem; \n height: ", "rem;\n top: calc(50% - ", "rem); /* Updated for vertical centering */\n left: ", "; \n ", "\n\n ", "{\n width: ", "rem; \n height: ", "rem;\n top: calc(50% - ", "rem); /* Updated for vertical centering */\n left: ", "; \n ", "\n }\n\n z-index: 1; //so that this is above the blackoverlay hover above
|
|
33
|
+
exports.StyledSwitch = styled_components_1.default.button(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n \n width: ", "rem; \n height: ", "rem;\n top: calc(50% - ", "rem); /* Updated for vertical centering */\n left: ", "; \n ", "\n\n ", "{\n width: ", "rem; \n height: ", "rem;\n top: calc(50% - ", "rem); /* Updated for vertical centering */\n left: ", "; \n ", "\n }\n\n /* z-index: 1; //so that this is above the blackoverlay hover above */\n background-color: ", "; \n outline: none;\n border-radius: 50%; \n cursor: ", "; \n border: 1px solid; \n border-color: ", ";\n position: absolute;\n \n box-shadow: ", ";\n \n \n \n"], ["\n \n width: ", "rem; \n height: ", "rem;\n top: calc(50% - ", "rem); /* Updated for vertical centering */\n left: ", "; \n ", "\n\n ", "{\n width: ", "rem; \n height: ", "rem;\n top: calc(50% - ", "rem); /* Updated for vertical centering */\n left: ", "; \n ", "\n }\n\n /* z-index: 1; //so that this is above the blackoverlay hover above */\n background-color: ", "; \n outline: none;\n border-radius: 50%; \n cursor: ", "; \n border: 1px solid; \n border-color: ", ";\n position: absolute;\n \n box-shadow: ", ";\n \n \n \n"])), mob_size, mob_size, mob_size / 2, function (_a) {
|
|
34
34
|
var direction = _a.direction;
|
|
35
35
|
return direction === 'left' ? mob_left_right_gap + 'rem' : "calc(100% - ".concat(mob_size + mob_left_right_gap, "rem)");
|
|
36
36
|
}, (0, mixins_1.transition)('left 0.15s ease-out'), (0, mixins_1.mediaQuery)('md'), desktop_size, desktop_size, desktop_size / 2, function (_a) {
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
interface HoverEffectOptions {
|
|
2
2
|
borderRadius?: string;
|
|
3
|
+
zIndex?: string;
|
|
3
4
|
}
|
|
4
5
|
export declare const applyBlackOverlayOnHover: (options?: HoverEffectOptions) => import("styled-components").FlattenSimpleInterpolation;
|
|
5
6
|
export declare const blackOverlayEffect: import("styled-components").FlattenSimpleInterpolation;
|
|
@@ -10,8 +10,8 @@ var colors_1 = require("../colors");
|
|
|
10
10
|
// Hover Effects
|
|
11
11
|
var applyBlackOverlayOnHover = function (options) {
|
|
12
12
|
if (options === void 0) { options = {}; }
|
|
13
|
-
var _a = options.borderRadius, borderRadius = _a === void 0 ? 0 : _a; //some cases we want to trigger the
|
|
14
|
-
return (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n &::before {\n content: \"\";\n background-color: transparent;\n position: absolute;\n border-radius: ", ";\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n z-index:
|
|
13
|
+
var _a = options.borderRadius, borderRadius = _a === void 0 ? 0 : _a, _b = options.zIndex, zIndex = _b === void 0 ? 1 : _b; //some cases we want to trigger the
|
|
14
|
+
return (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n &::before {\n content: \"\";\n background-color: transparent;\n position: absolute;\n border-radius: ", ";\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n z-index: ", ";\n }\n &:hover::before {\n ", "\n }\n "], ["\n &::before {\n content: \"\";\n background-color: transparent;\n position: absolute;\n border-radius: ", ";\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n z-index: ", ";\n }\n &:hover::before {\n ", "\n }\n "])), borderRadius, zIndex, exports.blackOverlayEffect);
|
|
15
15
|
};
|
|
16
16
|
exports.applyBlackOverlayOnHover = applyBlackOverlayOnHover;
|
|
17
17
|
exports.blackOverlayEffect = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background: ", ";\n"], ["\n background: ", ";\n"])), colors_1.colors.grey10);
|