oolib 3.1.1 → 3.1.2
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.
|
@@ -134,11 +134,12 @@ var TimePicker = function (props) {
|
|
|
134
134
|
react_1.default.createElement("div", { style: { display: "flex", position: 'relative' } },
|
|
135
135
|
readOnly ? (react_1.default.createElement(Typo_1.SANS_3, null, inputValue)) : (react_1.default.createElement(react_1.default.Fragment, null,
|
|
136
136
|
react_1.default.createElement(styled_1.StyledTimeInputWrapper, { invert: invert },
|
|
137
|
-
react_1.default.createElement(styled_1.
|
|
138
|
-
|
|
139
|
-
e.
|
|
140
|
-
|
|
141
|
-
|
|
137
|
+
react_1.default.createElement(styled_1.StyledTimeInputBorderWrapper, { disabled: disabled },
|
|
138
|
+
react_1.default.createElement(styled_1.StyledTimeInput, { type: "test", className: "SANS_3", placeholder: "HH:MM AA", maxLength: "8", invert: invert, value: inputValue, ref: inputRef, autoCapitalize: "characters", onChange: function (e) { return handleInputChange(e); }, onBlur: function () { return handleOnBlur(); }, onFocus: function () { return handleOnFocus(); }, onKeyDown: function (e) {
|
|
139
|
+
if (e.key === 'Enter') {
|
|
140
|
+
e.target.blur();
|
|
141
|
+
}
|
|
142
|
+
}, disabled: disabled })),
|
|
142
143
|
react_1.default.createElement(styled_1.StyledDropDown, { className: "drop-down", invert: invert },
|
|
143
144
|
react_1.default.createElement(styled_1.StyledDropDownList, { className: "drop-list", ref: timeStripRef },
|
|
144
145
|
" ",
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
export const StyledTimeInputWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
2
|
+
export const StyledTimeInputBorderWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
2
3
|
export const StyledTimeInput: import("styled-components").StyledComponent<"input", any, {}, never>;
|
|
3
4
|
export const StyledDropDown: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
4
5
|
export const StyledMotionDiv: import("styled-components").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, any, {}, never>;
|
|
@@ -37,7 +37,7 @@ var __importStar = (this && this.__importStar) || (function () {
|
|
|
37
37
|
};
|
|
38
38
|
})();
|
|
39
39
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
40
|
-
exports.StyledListItem = exports.StyledDropDownList = exports.StyledMotionDiv = exports.StyledDropDown = exports.StyledTimeInput = exports.StyledTimeInputWrapper = void 0;
|
|
40
|
+
exports.StyledListItem = exports.StyledDropDownList = exports.StyledMotionDiv = exports.StyledDropDown = exports.StyledTimeInput = exports.StyledTimeInputBorderWrapper = exports.StyledTimeInputWrapper = void 0;
|
|
41
41
|
var styled_components_1 = __importStar(require("styled-components"));
|
|
42
42
|
var themes_1 = require("../../themes");
|
|
43
43
|
var globalVariables_1 = require("../../globalStyles/globalVariables");
|
|
@@ -45,24 +45,25 @@ var globalStyles_1 = require("../../v2/themes/globalStyles");
|
|
|
45
45
|
var mixins_1 = require("../../themes/mixins");
|
|
46
46
|
var framer_motion_1 = require("framer-motion");
|
|
47
47
|
var greyColor80 = themes_1.colors.greyColor80, greyColor10 = themes_1.colors.greyColor10, greyColor5 = themes_1.colors.greyColor5, greyColor15 = themes_1.colors.greyColor15, greyColor70 = themes_1.colors.greyColor70, greyColor40 = themes_1.colors.greyColor40;
|
|
48
|
-
exports.StyledTimeInputWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: relative;\n /*
|
|
48
|
+
exports.StyledTimeInputWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: relative;\n /* preserve: focusing the input reveals the time-options dropdown */\n &:focus-within .drop-down {\n display: block;\n }\n"], ["\n position: relative;\n /* preserve: focusing the input reveals the time-options dropdown */\n &:focus-within .drop-down {\n display: block;\n }\n"])));
|
|
49
|
+
exports.StyledTimeInputBorderWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n /* v2 select-box look (matches DropdownSingle) \u2014 see DatePicker styled note.\n Lives on this inner wrapper (input only), NOT StyledTimeInputWrapper, so\n the z-index:0 stacking context (needed to confine the ::before's\n z-index:-1) doesn't trap the dropdown under later form fields. */\n position: relative;\n z-index: 0;\n width: fit-content;\n border-radius: 6px;\n ", ";\n ", ";\n ", ";\n"], ["\n /* v2 select-box look (matches DropdownSingle) \u2014 see DatePicker styled note.\n Lives on this inner wrapper (input only), NOT StyledTimeInputWrapper, so\n the z-index:0 stacking context (needed to confine the ::before's\n z-index:-1) doesn't trap the dropdown under later form fields. */\n position: relative;\n z-index: 0;\n width: fit-content;\n border-radius: 6px;\n ", ";\n ", ";\n ", ";\n"])), globalStyles_1.globalInputElemBaseBorderStyling_v2, function (_a) {
|
|
49
50
|
var disabled = _a.disabled;
|
|
50
51
|
return !disabled && globalStyles_1.globalInputElemHover_v2;
|
|
51
52
|
}, function (_a) {
|
|
52
53
|
var disabled = _a.disabled;
|
|
53
54
|
return !disabled && globalStyles_1.globalInputElemFocused_v2;
|
|
54
55
|
});
|
|
55
|
-
exports.StyledTimeInput = styled_components_1.default.input(
|
|
56
|
+
exports.StyledTimeInput = styled_components_1.default.input(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n ", "\n /* padding: 0rem 3rem; */\n background: transparent;\n outline: none;\n border: none;\n width: 10rem;\n height: 4rem;\n color: ", ";\n\n ", "\n\n &::placeholder {\n color: ", ";\n }\n\n ", "\n\n &:placeholder-shown {\n width: 11.5rem;\n }\n"], ["\n ", "\n /* padding: 0rem 3rem; */\n background: transparent;\n outline: none;\n border: none;\n width: 10rem;\n height: 4rem;\n color: ", ";\n\n ", "\n\n &::placeholder {\n color: ", ";\n }\n\n ", "\n\n &:placeholder-shown {\n width: 11.5rem;\n }\n"])), globalVariables_1.globalInputElemPadding, function (_a) {
|
|
56
57
|
var invert = _a.invert, disabled = _a.disabled;
|
|
57
58
|
return invert
|
|
58
59
|
? (disabled ? themes_1.colors.greyColor40 : themes_1.colors.white)
|
|
59
60
|
: disabled ? themes_1.colors.greyColor40 : themes_1.colors.greyColor100;
|
|
60
61
|
}, function (_a) {
|
|
61
62
|
var disabled = _a.disabled;
|
|
62
|
-
return disabled && (0, styled_components_1.css)(
|
|
63
|
+
return disabled && (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n color: ", ";\n cursor: not-allowed;\n "], ["\n color: ", ";\n cursor: not-allowed;\n "])), greyColor40);
|
|
63
64
|
}, greyColor40, (0, mixins_1.transition)('width'));
|
|
64
|
-
exports.StyledDropDown = styled_components_1.default.div(
|
|
65
|
-
exports.StyledMotionDiv = (0, styled_components_1.default)(framer_motion_1.motion.div)(
|
|
66
|
-
exports.StyledDropDownList = styled_components_1.default.ul(
|
|
67
|
-
exports.StyledListItem = styled_components_1.default.li(
|
|
68
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
|
|
65
|
+
exports.StyledDropDown = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n ", "\n position: absolute;\n display: none;\n left: 0;\n overflow-y: scroll;\n /* scroll-behavior: smooth; */\n height: 20rem;\n width: 15rem;\n /* match the DatePicker calendar popover so both DateTimePicker popovers\n sit above sibling form fields' z-index:0 stacking contexts */\n z-index: 10000;\n"], ["\n ", "\n position: absolute;\n display: none;\n left: 0;\n overflow-y: scroll;\n /* scroll-behavior: smooth; */\n height: 20rem;\n width: 15rem;\n /* match the DatePicker calendar popover so both DateTimePicker popovers\n sit above sibling form fields' z-index:0 stacking contexts */\n z-index: 10000;\n"])), globalVariables_1.globalLightboxStyle);
|
|
66
|
+
exports.StyledMotionDiv = (0, styled_components_1.default)(framer_motion_1.motion.div)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n\n"], ["\n\n"])));
|
|
67
|
+
exports.StyledDropDownList = styled_components_1.default.ul(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n list-style: none;\n padding-left: 0;\n\n &:hover{\n .drop-list{\n background-color: inherit;\n }\n }\n"], ["\n list-style: none;\n padding-left: 0;\n\n &:hover{\n .drop-list{\n background-color: inherit;\n }\n }\n"])));
|
|
68
|
+
exports.StyledListItem = styled_components_1.default.li(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n padding: 9px 20px;\n cursor: pointer;\n ", "\n\n .highlight{\n background-color: red;\n }\n"], ["\n padding: 9px 20px;\n cursor: pointer;\n ", "\n\n .highlight{\n background-color: red;\n }\n"])), globalVariables_1.globalHoverOnWhiteBG);
|
|
69
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
|