oolib 3.1.0 → 3.1.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.
|
@@ -41,13 +41,11 @@ exports.StyledBodyWrapper = exports.StyledWeekdays = exports.StyledWeekDaysWrapp
|
|
|
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");
|
|
44
|
+
var globalStyles_1 = require("../../v2/themes/globalStyles");
|
|
44
45
|
var mixins_1 = require("../../themes/mixins");
|
|
45
46
|
var greyColor80 = themes_1.colors.greyColor80, greyColor5 = themes_1.colors.greyColor5, greyColor70 = themes_1.colors.greyColor70, greyColor10 = themes_1.colors.greyColor10, primaryColor100 = themes_1.colors.primaryColor100, greyColor40 = themes_1.colors.greyColor40, white = themes_1.colors.white, primaryColor10 = themes_1.colors.primaryColor10, greyColor15 = themes_1.colors.greyColor15, greyColor3 = themes_1.colors.greyColor3, greyColor100 = themes_1.colors.greyColor100;
|
|
46
47
|
exports.StyledDateInputContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: relative;\n width: fit-content;\n"], ["\n position: relative;\n width: fit-content;\n"])));
|
|
47
|
-
exports.StyledInput = styled_components_1.default.input(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n ", "\n background:
|
|
48
|
-
var invert = _a.invert;
|
|
49
|
-
return (invert ? greyColor80 : greyColor5);
|
|
50
|
-
}, function (_a) {
|
|
48
|
+
exports.StyledInput = styled_components_1.default.input(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n ", "\n background: transparent;\n outline: none;\n border: none;\n width: 13rem;\n height: 4rem;\n color: ", ";\n\n ", "\n\n &::placeholder {\n color: ", ";\n }\n"], ["\n ", "\n background: transparent;\n outline: none;\n border: none;\n width: 13rem;\n height: 4rem;\n color: ", ";\n\n ", "\n\n &::placeholder {\n color: ", ";\n }\n"])), globalVariables_1.globalInputElemPadding, function (_a) {
|
|
51
49
|
var invert = _a.invert, disabled = _a.disabled;
|
|
52
50
|
return invert
|
|
53
51
|
? disabled
|
|
@@ -58,15 +56,9 @@ exports.StyledInput = styled_components_1.default.input(templateObject_3 || (tem
|
|
|
58
56
|
: themes_1.colors.greyColor100;
|
|
59
57
|
}, function (_a) {
|
|
60
58
|
var disabled = _a.disabled;
|
|
61
|
-
return
|
|
62
|
-
}, function (_a) {
|
|
63
|
-
var invert = _a.invert, disabled = _a.disabled;
|
|
64
|
-
return disabled ? greyColor15 : invert ? greyColor70 : greyColor10;
|
|
65
|
-
}, function (_a) {
|
|
66
|
-
var disabled = _a.disabled;
|
|
67
|
-
return disabled && (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n color: ", "\n background-color: ", ";\n cursor: not-allowed;\n &:hover{\n background-color: none !important;\n }\n "], ["\n color: ", "\n background-color: ", ";\n cursor: not-allowed;\n &:hover{\n background-color: none !important;\n }\n "])), greyColor40, greyColor15);
|
|
59
|
+
return disabled && (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n color: ", ";\n cursor: not-allowed;\n "], ["\n color: ", ";\n cursor: not-allowed;\n "])), greyColor40);
|
|
68
60
|
}, greyColor40);
|
|
69
|
-
exports.StyledDateInputWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n ", "
|
|
61
|
+
exports.StyledDateInputWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n /* v2 select-box look (matches DropdownSingle): a ::before bordered box behind\n the input \u2014 grey30 border on hover, grey80 + shadow on focus-within. The\n border lives on THIS wrapper (input only), NOT the container, so the\n absolutely-positioned calendar (z-index:10000) isn't trapped in this\n stacking context. z-index:0 so the ::before's z-index:-1 sits behind the\n input rather than the page. */\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): a ::before bordered box behind\n the input \u2014 grey30 border on hover, grey80 + shadow on focus-within. The\n border lives on THIS wrapper (input only), NOT the container, so the\n absolutely-positioned calendar (z-index:10000) isn't trapped in this\n stacking context. z-index:0 so the ::before's z-index:-1 sits behind the\n input rather than the page. */\n position: relative;\n z-index: 0;\n width: fit-content;\n border-radius: 6px;\n ", ";\n ", ";\n ", ";\n"])), globalStyles_1.globalInputElemBaseBorderStyling_v2, globalStyles_1.globalInputElemHover_v2, globalStyles_1.globalInputElemFocused_v2);
|
|
70
62
|
exports.StyledCalenderContainer = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n z-index: 10000;\n height: 40rem;\n visibility: ", ";\n \n ", "{\n position: absolute;\n height: unset;\n width: 30rem;\n ", "\n }\n\n"], ["\n z-index: 10000;\n height: 40rem;\n visibility: ", ";\n \n ", "{\n position: absolute;\n height: unset;\n width: 30rem;\n ", "\n }\n\n"])), function (_a) {
|
|
71
63
|
var showCalendar = _a.showCalendar, debug = _a.debug;
|
|
72
64
|
return debug ? "" : showCalendar ? "visible" : "hidden";
|
|
@@ -54,7 +54,6 @@ var BlockLabel_1 = require("../../v2/components/BlockLabel");
|
|
|
54
54
|
var TimePicker_1 = require("../TimePicker");
|
|
55
55
|
var getBlockLabelProps_1 = require("../../utils/getBlockLabelProps");
|
|
56
56
|
var DatePicker_1 = __importDefault(require("../DatePicker"));
|
|
57
|
-
var convertTo12Hour_1 = require("../TimePicker/utils/convertTo12Hour");
|
|
58
57
|
/**
|
|
59
58
|
* Parses an ISO string into internal { date, time } format.
|
|
60
59
|
* @param {string} value - ISO string (e.g. "2025-02-24T14:30:00.000Z")
|
|
@@ -73,7 +72,13 @@ var parseISOValue = function (value) {
|
|
|
73
72
|
var DateTimePicker = function (props) {
|
|
74
73
|
var parentOnChange = props.onChange, value = props.value, id = props.id, readOnly = props.readOnly, futureDateOnly = props.futureDateOnly, previousDateOnly = props.previousDateOnly, passChangeHandlerOps = props.passChangeHandlerOps, invert = props.invert, disabled = props.disabled, _a = props.debug, debug = _a === void 0 ? false : _a;
|
|
75
74
|
var normalized = (0, react_1.useMemo)(function () { return parseISOValue(value); }, [value]);
|
|
76
|
-
|
|
75
|
+
// _value.time is kept in 24h "HH:MM:SS" (as parseISOValue emits) — the same
|
|
76
|
+
// shape TimePicker accepts (it converts to 12h for display itself) and the
|
|
77
|
+
// same shape the date-change recompute below splits. Storing 12h here (an
|
|
78
|
+
// earlier bug) made a DATE change parse "5:44 PM" as 24h → Invalid Date →
|
|
79
|
+
// toISOString() threw → the change never reached onChange (didn't save or
|
|
80
|
+
// sync to other users); it also double-converted through TimePicker.
|
|
81
|
+
var _b = (0, react_1.useState)({ date: normalized.date, time: normalized.time }), _value = _b[0], _setValue = _b[1];
|
|
77
82
|
var handleOnChange = function (k, v) {
|
|
78
83
|
var _a;
|
|
79
84
|
var newVal = __assign(__assign({}, _value), (_a = {}, _a[k] = v, _a));
|
|
@@ -94,7 +99,7 @@ var DateTimePicker = function (props) {
|
|
|
94
99
|
(0, react_1.useEffect)(function () {
|
|
95
100
|
var n = parseISOValue(value);
|
|
96
101
|
if (n.date !== _value.date || n.time !== _value.time) {
|
|
97
|
-
_setValue({ date: n.date, time: n.time
|
|
102
|
+
_setValue({ date: n.date, time: n.time });
|
|
98
103
|
}
|
|
99
104
|
}, [value]);
|
|
100
105
|
return (react_1.default.createElement(react_1.default.Fragment, null,
|
|
@@ -104,11 +104,14 @@ var TimePicker = function (props) {
|
|
|
104
104
|
};
|
|
105
105
|
scrollTimeElementToTop();
|
|
106
106
|
}, [inputValue, timeStripRef]);
|
|
107
|
-
//
|
|
108
|
-
//
|
|
109
|
-
//
|
|
110
|
-
//
|
|
111
|
-
//
|
|
107
|
+
// Reflect external value changes — a remote collaborator's edit, or our own
|
|
108
|
+
// committed value round-tripping back. Without this, inputValue is seeded
|
|
109
|
+
// once on mount (line above) and goes stale. Typing doesn't fire here: the
|
|
110
|
+
// value only changes on blur (handleOnBlur → onParentChange), so a focused
|
|
111
|
+
// user's input is never clobbered mid-edit.
|
|
112
|
+
(0, react_1.useEffect)(function () {
|
|
113
|
+
setInputValue(value ? (0, convertTo12Hour_1.convertTo12Hour)(value) : null);
|
|
114
|
+
}, [value]);
|
|
112
115
|
var handleTimeClick = function (e, item) {
|
|
113
116
|
setInputValue(item);
|
|
114
117
|
};
|
|
@@ -41,28 +41,26 @@ exports.StyledListItem = exports.StyledDropDownList = exports.StyledMotionDiv =
|
|
|
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");
|
|
44
|
+
var globalStyles_1 = require("../../v2/themes/globalStyles");
|
|
44
45
|
var mixins_1 = require("../../themes/mixins");
|
|
45
46
|
var framer_motion_1 = require("framer-motion");
|
|
46
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;
|
|
47
|
-
exports.StyledTimeInputWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: relative;\n
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
return (invert ? greyColor80 : greyColor5);
|
|
48
|
+
exports.StyledTimeInputWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: relative;\n /* v2 select-box look (matches DropdownSingle) \u2014 see DatePicker styled note. */\n z-index: 0;\n border-radius: 6px;\n ", ";\n ", ";\n ", ";\n /* preserve: focusing the input reveals the time-options dropdown */\n &:focus-within .drop-down {\n display: block;\n }\n"], ["\n position: relative;\n /* v2 select-box look (matches DropdownSingle) \u2014 see DatePicker styled note. */\n z-index: 0;\n border-radius: 6px;\n ", ";\n ", ";\n ", ";\n /* preserve: focusing the input reveals the time-options dropdown */\n &:focus-within .drop-down {\n display: block;\n }\n"])), globalStyles_1.globalInputElemBaseBorderStyling_v2, function (_a) {
|
|
49
|
+
var disabled = _a.disabled;
|
|
50
|
+
return !disabled && globalStyles_1.globalInputElemHover_v2;
|
|
51
51
|
}, function (_a) {
|
|
52
|
+
var disabled = _a.disabled;
|
|
53
|
+
return !disabled && globalStyles_1.globalInputElemFocused_v2;
|
|
54
|
+
});
|
|
55
|
+
exports.StyledTimeInput = styled_components_1.default.input(templateObject_3 || (templateObject_3 = __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) {
|
|
52
56
|
var invert = _a.invert, disabled = _a.disabled;
|
|
53
57
|
return invert
|
|
54
58
|
? (disabled ? themes_1.colors.greyColor40 : themes_1.colors.white)
|
|
55
59
|
: disabled ? themes_1.colors.greyColor40 : themes_1.colors.greyColor100;
|
|
56
60
|
}, function (_a) {
|
|
57
61
|
var disabled = _a.disabled;
|
|
58
|
-
return
|
|
59
|
-
},
|
|
60
|
-
var invert = _a.invert, disabled = _a.disabled;
|
|
61
|
-
return disabled ? greyColor15 : invert ? greyColor70 : greyColor10;
|
|
62
|
-
}, function (_a) {
|
|
63
|
-
var disabled = _a.disabled;
|
|
64
|
-
return disabled && (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n color: ", "\n background-color: ", ";\n cursor: not-allowed;\n &:hover{\n background-color: none !important;\n }\n "], ["\n color: ", "\n background-color: ", ";\n cursor: not-allowed;\n &:hover{\n background-color: none !important;\n }\n "])), greyColor40, greyColor15);
|
|
65
|
-
}, greyColor40, (0, mixins_1.transition)('background-color', 'width'));
|
|
62
|
+
return disabled && (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n color: ", ";\n cursor: not-allowed;\n "], ["\n color: ", ";\n cursor: not-allowed;\n "])), greyColor40);
|
|
63
|
+
}, greyColor40, (0, mixins_1.transition)('width'));
|
|
66
64
|
exports.StyledDropDown = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __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 z-index: 1;\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 z-index: 1;\n"])), globalVariables_1.globalLightboxStyle);
|
|
67
65
|
exports.StyledMotionDiv = (0, styled_components_1.default)(framer_motion_1.motion.div)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n\n"], ["\n\n"])));
|
|
68
66
|
exports.StyledDropDownList = styled_components_1.default.ul(templateObject_6 || (templateObject_6 = __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"])));
|