@longline/aqua-ui 1.0.334 → 1.0.336
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.
|
@@ -23,18 +23,25 @@ var Selector = function (props) {
|
|
|
23
23
|
setYear(props.value ? props.value.getFullYear().toString() : "");
|
|
24
24
|
}
|
|
25
25
|
}, [props.value]);
|
|
26
|
-
//
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
26
|
+
// Emit synchronously from the onChange handler rather than via a useEffect
|
|
27
|
+
// on [day, month, year]. Passive effects don't run until after paint, so
|
|
28
|
+
// an effect-based emit can be skipped if the next browser event (e.g. a
|
|
29
|
+
// click on Save) arrives before React's effect phase — losing the
|
|
30
|
+
// most-recent keystroke.
|
|
31
|
+
var emit = function (d, m, y) {
|
|
32
|
+
var numDay = parseInt(d);
|
|
33
|
+
var numMonth = parseInt(m);
|
|
34
|
+
var numYear = parseInt(y);
|
|
35
|
+
if (isNaN(numDay) || isNaN(numMonth) || isNaN(numYear))
|
|
32
36
|
return;
|
|
33
37
|
var date = new Date(numYear, numMonth - 1, numDay);
|
|
34
38
|
// Overwrite year, because Date.new converts 0-99 to 1900-1999.
|
|
35
39
|
date.setFullYear(numYear);
|
|
36
40
|
props.onChange(date);
|
|
37
|
-
}
|
|
41
|
+
};
|
|
42
|
+
var handleDayChange = function (v) { setDay(v); emit(v, month, year); };
|
|
43
|
+
var handleMonthChange = function (v) { setMonth(v); emit(day, v, year); };
|
|
44
|
+
var handleYearChange = function (v) { setYear(v); emit(day, month, v); };
|
|
38
45
|
// Move focus to month input.
|
|
39
46
|
var focusMonth = function () {
|
|
40
47
|
monthRef.current.focus();
|
|
@@ -46,10 +53,10 @@ var Selector = function (props) {
|
|
|
46
53
|
yearRef.current.select();
|
|
47
54
|
};
|
|
48
55
|
return (React.createElement(InputWrapper, { fluid: true, error: props.error, disabled: props.disabled, ghost: props.ghost, transparent: props.transparent, onClear: (props.clearable && props.value) ? props.onClear : null, icon: { url: SVG.Icons.Calendar, color: theme.colors.primary[3], onClick: props.onCalendar }, iconPosition: 'right' },
|
|
49
|
-
React.createElement(NumericInput, { disabled: props.disabled, width: 38, maxLength: 2, placeholder: "dd", value: day, onChange:
|
|
56
|
+
React.createElement(NumericInput, { disabled: props.disabled, width: 38, maxLength: 2, placeholder: "dd", value: day, onChange: handleDayChange, onBlur: focusMonth }),
|
|
50
57
|
"/",
|
|
51
|
-
React.createElement(NumericInput, { disabled: props.disabled, width: 38, maxLength: 2, placeholder: "mm", value: month, onChange:
|
|
58
|
+
React.createElement(NumericInput, { disabled: props.disabled, width: 38, maxLength: 2, placeholder: "mm", value: month, onChange: handleMonthChange, ref: monthRef, onBlur: focusYear }),
|
|
52
59
|
"/",
|
|
53
|
-
React.createElement(NumericInput, { disabled: props.disabled, width: 44, maxLength: 4, placeholder: "yyyy", value: year, onChange:
|
|
60
|
+
React.createElement(NumericInput, { disabled: props.disabled, width: 44, maxLength: 4, placeholder: "yyyy", value: year, onChange: handleYearChange, ref: yearRef })));
|
|
54
61
|
};
|
|
55
62
|
export { Selector };
|
|
@@ -66,7 +66,7 @@ var SelectorBase = function (props) {
|
|
|
66
66
|
getWidget(),
|
|
67
67
|
React.createElement("span", null, props.label)));
|
|
68
68
|
};
|
|
69
|
-
var SelectorStyled = styled(SelectorBase)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n pointer-events: ", ";\n\n // Position and size:\n display: inline-flex;\n align-items: center;\n gap: 12px;\n position: relative;\n\n // Interaction:\n cursor: ", ";\n outline: none;\n\n // The input[type='checkbox'] itself is not visible. display-none will cause
|
|
69
|
+
var SelectorStyled = styled(SelectorBase)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n pointer-events: ", ";\n\n // Position and size:\n display: inline-flex;\n align-items: center;\n gap: 12px;\n position: relative;\n\n // Interaction:\n cursor: ", ";\n outline: none;\n\n // The input[type='checkbox'] itself is not visible. display-none will cause\n // it not to be tab-indexable, or keyboard-controllable, so we use\n // \"appearance\". It is also absolutely-positioned, or it will still cause\n // the visible elements to shift right and down. \"outline:none\" removes a\n // little dot that indicates that the input has focus.\n input {\n appearance: none;\n -webkit-appearance: none;\n position: absolute;\n outline: none;\n }\n\n // Keep the widget (Checkbox/Toggle/Circle) at its declared size when the\n // label wraps. Without this, flex's default shrink lets a long label\n // squash the box horizontally.\n > div {\n flex-shrink: 0;\n }\n\n span {\n color: ", ";\n user-select: none;\n ", "\n }\n"], ["\n pointer-events: ", ";\n\n // Position and size:\n display: inline-flex;\n align-items: center;\n gap: 12px;\n position: relative;\n\n // Interaction:\n cursor: ", ";\n outline: none;\n\n // The input[type='checkbox'] itself is not visible. display-none will cause\n // it not to be tab-indexable, or keyboard-controllable, so we use\n // \"appearance\". It is also absolutely-positioned, or it will still cause\n // the visible elements to shift right and down. \"outline:none\" removes a\n // little dot that indicates that the input has focus.\n input {\n appearance: none;\n -webkit-appearance: none;\n position: absolute;\n outline: none;\n }\n\n // Keep the widget (Checkbox/Toggle/Circle) at its declared size when the\n // label wraps. Without this, flex's default shrink lets a long label\n // squash the box horizontally.\n > div {\n flex-shrink: 0;\n }\n\n span {\n color: ", ";\n user-select: none;\n ", "\n }\n"
|
|
70
70
|
/**
|
|
71
71
|
* A Selector can be used to create either a HTML checkbox or a HTML radio button.
|
|
72
72
|
*/
|