@longline/aqua-ui 1.0.98 → 1.0.100
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/inputs/DateInput/Body.d.ts +2 -4
- package/inputs/DateInput/Body.js +14 -3
- package/inputs/DateInput/DateInput.d.ts +3 -7
- package/inputs/DateInput/DateInput.js +18 -43
- package/inputs/Dropdown/Body.d.ts +2 -2
- package/inputs/Dropdown/Body.js +15 -10
- package/inputs/Dropdown/Dropdown.d.ts +4 -8
- package/inputs/Dropdown/Dropdown.js +43 -49
- package/package.json +3 -1
|
@@ -10,10 +10,6 @@ interface IProps {
|
|
|
10
10
|
* Is control currently open?
|
|
11
11
|
*/
|
|
12
12
|
open: boolean;
|
|
13
|
-
/**
|
|
14
|
-
* This control can open upwards, which affects its styles.
|
|
15
|
-
*/
|
|
16
|
-
upwards: boolean;
|
|
17
13
|
/**
|
|
18
14
|
* Is control transparent? This affects the position at which
|
|
19
15
|
* this Body opens.
|
|
@@ -27,6 +23,8 @@ interface IProps {
|
|
|
27
23
|
* Fired when a new date is selected.
|
|
28
24
|
*/
|
|
29
25
|
onSelect: (value: Date) => void;
|
|
26
|
+
styles: any;
|
|
27
|
+
attributes: any;
|
|
30
28
|
}
|
|
31
29
|
declare const Body: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<IProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
|
|
32
30
|
ref?: React.Ref<HTMLDivElement>;
|
package/inputs/DateInput/Body.js
CHANGED
|
@@ -2,6 +2,17 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
|
|
|
2
2
|
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
|
|
3
3
|
return cooked;
|
|
4
4
|
};
|
|
5
|
+
var __assign = (this && this.__assign) || function () {
|
|
6
|
+
__assign = Object.assign || function(t) {
|
|
7
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
8
|
+
s = arguments[i];
|
|
9
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
10
|
+
t[p] = s[p];
|
|
11
|
+
}
|
|
12
|
+
return t;
|
|
13
|
+
};
|
|
14
|
+
return __assign.apply(this, arguments);
|
|
15
|
+
};
|
|
5
16
|
import * as React from 'react';
|
|
6
17
|
import styled, { css } from 'styled-components';
|
|
7
18
|
import { Calendar } from './Calendar';
|
|
@@ -41,10 +52,10 @@ var BodyBase = React.forwardRef(function (props, ref) {
|
|
|
41
52
|
var handleYear = function (year) {
|
|
42
53
|
date.setFullYear(year);
|
|
43
54
|
};
|
|
44
|
-
return (React.createElement("div", { className: props.className, tabIndex: -1 },
|
|
55
|
+
return (React.createElement("div", __assign({ style: props.styles.popper }, props.attributes.popper, { className: props.className, tabIndex: -1, ref: ref }),
|
|
45
56
|
React.createElement(Navbar, { date: date, onPrevYear: handlePrevYear, onNextYear: handleNextYear, onPrevMonth: handlePrevMonth, onNextMonth: handleNextMonth, onMonth: handleMonth, onYear: handleYear }),
|
|
46
57
|
React.createElement(Calendar, { date: date, selectedDate: props.value, nofuture: props.nofuture, onClick: handleDayClick })));
|
|
47
58
|
});
|
|
48
|
-
var Body = styled(BodyBase)(
|
|
59
|
+
var Body = styled(BodyBase)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n z-index: 9999;\n box-sizing: border-box;\n overflow-y: hidden;\n outline: none;\n width: 330px;\n\n background-color: ", ";\n border-radius: ", "px;\n color: ", ";\n\n transition: opacity ", "ms ease-in-out,\n max-height 0ms linear ", "ms;\n max-height: 0;\n opacity: 0;\n ", "\n"], ["\n z-index: 9999;\n box-sizing: border-box;\n overflow-y: hidden;\n outline: none;\n width: 330px;\n\n background-color: ", ";\n border-radius: ", "px;\n color: ", ";\n\n transition: opacity ", "ms ease-in-out,\n max-height 0ms linear ", "ms;\n max-height: 0;\n opacity: 0;\n ", "\n"])), function (p) { return p.theme.colors.neutral[100]; }, function (p) { return p.theme.radius.normal; }, function (p) { return p.theme.colors.primary[3]; }, function (p) { return p.theme.animation.duration * 0; }, function (p) { return p.theme.animation.duration * 0; }, function (p) { return p.open && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n transition: opacity ", "ms ease-in,\n max-height 0ms linear;\n max-height: 1000px;\n opacity: 1;\n "], ["\n transition: opacity ", "ms ease-in,\n max-height 0ms linear;\n max-height: 1000px;\n opacity: 1;\n "])), function (p) { return p.theme.animation.duration; }); });
|
|
49
60
|
export { Body };
|
|
50
|
-
var templateObject_1, templateObject_2
|
|
61
|
+
var templateObject_1, templateObject_2;
|
|
@@ -47,14 +47,10 @@ interface IProps {
|
|
|
47
47
|
*/
|
|
48
48
|
nofuture?: boolean;
|
|
49
49
|
/**
|
|
50
|
-
* The `DateInput` opening direction can be either
|
|
51
|
-
*
|
|
52
|
-
* is in the top half of the visible section of the parent, then it opens
|
|
53
|
-
* downward, and vice-versa. If this property is not set, then the opening
|
|
54
|
-
* direction is determined from the input position in the viewport.
|
|
55
|
-
* @default none
|
|
50
|
+
* The `DateInput` opening direction can be either `up` or `down`.
|
|
51
|
+
* @default down
|
|
56
52
|
*/
|
|
57
|
-
direction?: '
|
|
53
|
+
direction?: 'up' | 'down';
|
|
58
54
|
/**
|
|
59
55
|
* Removes tabIndex from this input.
|
|
60
56
|
* @default false
|
|
@@ -26,11 +26,14 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
26
26
|
};
|
|
27
27
|
import * as React from 'react';
|
|
28
28
|
import styled, { css } from 'styled-components';
|
|
29
|
+
import { createPortal } from 'react-dom';
|
|
30
|
+
import { usePopper } from 'react-popper';
|
|
31
|
+
import { parseISO } from 'date-fns';
|
|
29
32
|
import { Selector } from './Selector';
|
|
30
33
|
import { Body } from './Body';
|
|
31
|
-
import { parseISO } from 'date-fns';
|
|
32
34
|
var DateInputBase = function (props) {
|
|
33
35
|
var wrapperRef = React.useRef(null);
|
|
36
|
+
var bodyRef = React.useRef(null);
|
|
34
37
|
// Parse str into Date.
|
|
35
38
|
// If parsing fails, return fallback value.
|
|
36
39
|
var parseDate = function (str, def) {
|
|
@@ -43,7 +46,6 @@ var DateInputBase = function (props) {
|
|
|
43
46
|
};
|
|
44
47
|
var _a = React.useState(function () { return parseDate(props.value, null); }), value = _a[0], setValue = _a[1];
|
|
45
48
|
var _b = React.useState(false), open = _b[0], setOpen = _b[1];
|
|
46
|
-
var _c = React.useState(false), upwards = _c[0], setUpwards = _c[1];
|
|
47
49
|
// Add (and remove) document-wide event listener for mousedown.
|
|
48
50
|
React.useEffect(function () {
|
|
49
51
|
document.addEventListener('mousedown', handleClickOutside);
|
|
@@ -55,50 +57,12 @@ var DateInputBase = function (props) {
|
|
|
55
57
|
//
|
|
56
58
|
var handleClickOutside = function (e) {
|
|
57
59
|
var elem = e.target;
|
|
58
|
-
if (wrapperRef.current && !wrapperRef.current.contains(elem)) {
|
|
60
|
+
if (wrapperRef.current && bodyRef.current && !wrapperRef.current.contains(elem) && !bodyRef.current.contains(elem)) {
|
|
59
61
|
setOpen(false);
|
|
60
62
|
}
|
|
61
63
|
};
|
|
62
|
-
var findScrollingParentRecursive = function (node) {
|
|
63
|
-
var overflowY = window.getComputedStyle(node).overflowY;
|
|
64
|
-
if (overflowY == 'scroll' || overflowY == 'auto')
|
|
65
|
-
return node;
|
|
66
|
-
if (node.parentElement)
|
|
67
|
-
return findScrollingParentRecursive(node.parentElement);
|
|
68
|
-
return null;
|
|
69
|
-
};
|
|
70
|
-
// Return my nearest parent that's scrolling (frames are not supported). If
|
|
71
|
-
// no parent is found, null is returned.
|
|
72
|
-
var findScrollingParent = function () {
|
|
73
|
-
return findScrollingParentRecursive(wrapperRef.current.parentElement);
|
|
74
|
-
};
|
|
75
|
-
// Returns true if the input is in the lower half of its scrolling parent.
|
|
76
|
-
// (if direction === parent), or in the lower half of the viewport if no
|
|
77
|
-
// scrolling parent is found.
|
|
78
|
-
var isInLowerViewport = function () {
|
|
79
|
-
var scrollingParent = findScrollingParent();
|
|
80
|
-
if (scrollingParent == null || props.direction !== 'parent') {
|
|
81
|
-
return wrapperRef.current.getBoundingClientRect().top > window.innerHeight / 2;
|
|
82
|
-
}
|
|
83
|
-
else {
|
|
84
|
-
var myY = wrapperRef.current.getBoundingClientRect().top;
|
|
85
|
-
var containerY = scrollingParent.getBoundingClientRect().top;
|
|
86
|
-
var containerHeight = scrollingParent.getBoundingClientRect().height;
|
|
87
|
-
var offset = myY - containerY;
|
|
88
|
-
return offset > containerHeight / 2;
|
|
89
|
-
}
|
|
90
|
-
};
|
|
91
64
|
// Open the dropdown.
|
|
92
65
|
var doOpen = function () {
|
|
93
|
-
// Is the Dropdown below the middle of the viewport?
|
|
94
|
-
var below = isInLowerViewport();
|
|
95
|
-
// Set opening direction.
|
|
96
|
-
if (props.direction === 'down')
|
|
97
|
-
setUpwards(false);
|
|
98
|
-
else if (props.direction === 'up')
|
|
99
|
-
setUpwards(true);
|
|
100
|
-
else
|
|
101
|
-
setUpwards(below);
|
|
102
66
|
setOpen(true);
|
|
103
67
|
};
|
|
104
68
|
var handleChange = function (newValue) {
|
|
@@ -130,13 +94,24 @@ var DateInputBase = function (props) {
|
|
|
130
94
|
if (e.key == 'Escape' && open)
|
|
131
95
|
setOpen(false);
|
|
132
96
|
};
|
|
97
|
+
var _c = usePopper(wrapperRef.current, bodyRef.current, {
|
|
98
|
+
placement: props.direction == 'down' ? 'bottom-start' : 'top-start',
|
|
99
|
+
modifiers: [
|
|
100
|
+
{
|
|
101
|
+
name: 'offset',
|
|
102
|
+
options: {
|
|
103
|
+
offset: [0, props.transparent ? 30 : 8],
|
|
104
|
+
},
|
|
105
|
+
}
|
|
106
|
+
]
|
|
107
|
+
}), styles = _c.styles, attributes = _c.attributes;
|
|
133
108
|
return (React.createElement("div", { tabIndex: -1, className: props.className, onKeyDown: handleKeyDown, ref: wrapperRef },
|
|
134
109
|
React.createElement(Selector, { value: value, disabled: props.disabled, ghost: props.ghost, transparent: props.transparent, error: props.error, clearable: props.clearable, noTabIndex: props.noTabIndex, onChange: handleChange, onClear: (!props.disabled && props.clearable && value != null) ? function () { return handleChange(null); } : null, onCalendar: handleToggle }),
|
|
135
|
-
React.createElement(Body, { ref:
|
|
110
|
+
createPortal(React.createElement(Body, { ref: bodyRef, value: value, open: open, transparent: props.transparent, nofuture: props.nofuture, onSelect: handleSelect, styles: styles, attributes: attributes }), document.body)));
|
|
136
111
|
};
|
|
137
112
|
var DateInputStyled = styled(DateInputBase)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n position: relative;\n // DateInput has a minimum width.\n width: 250px;\n // A fluid DateInput occupies full horizontal width.\n ", " \n"], ["\n position: relative;\n // DateInput has a minimum width.\n width: 250px;\n // A fluid DateInput occupies full horizontal width.\n ", " \n"])), function (p) { return p.fluid && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["width: 100%;"], ["width: 100%;"]))); });
|
|
138
113
|
var DateInput = function (_a) {
|
|
139
|
-
var _b = _a.direction, direction = _b === void 0 ? '
|
|
114
|
+
var _b = _a.direction, direction = _b === void 0 ? 'down' : _b, _c = _a.noTabIndex, noTabIndex = _c === void 0 ? false : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d, _e = _a.transparent, transparent = _e === void 0 ? false : _e, _f = _a.fluid, fluid = _f === void 0 ? false : _f, _g = _a.error, error = _g === void 0 ? false : _g, _h = _a.clearable, clearable = _h === void 0 ? false : _h, _j = _a.nofuture, nofuture = _j === void 0 ? false : _j, props = __rest(_a, ["direction", "noTabIndex", "disabled", "transparent", "fluid", "error", "clearable", "nofuture"]);
|
|
140
115
|
return React.createElement(DateInputStyled, __assign({ direction: direction, noTabIndex: noTabIndex, disabled: disabled, transparent: transparent, fluid: fluid, error: error, clearable: clearable, nofuture: nofuture }, props));
|
|
141
116
|
};
|
|
142
117
|
export { DateInput };
|
|
@@ -6,8 +6,6 @@ interface IProps {
|
|
|
6
6
|
children?: React.ReactNode;
|
|
7
7
|
/** Is Dropdown currently open? */
|
|
8
8
|
open: boolean;
|
|
9
|
-
/** A Dropdown can open upwards, which affects its styles. */
|
|
10
|
-
upwards: boolean;
|
|
11
9
|
/** Is Dropdown transparent? */
|
|
12
10
|
transparent?: boolean;
|
|
13
11
|
/** Max visible items before a scrollbar is added. */
|
|
@@ -20,6 +18,8 @@ interface IProps {
|
|
|
20
18
|
tall?: boolean;
|
|
21
19
|
/** Minimum body width for narrow dropdowns. */
|
|
22
20
|
minBodyWidth?: number;
|
|
21
|
+
styles: any;
|
|
22
|
+
attributes: any;
|
|
23
23
|
}
|
|
24
24
|
declare const Body: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<IProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
|
|
25
25
|
ref?: React.Ref<HTMLDivElement>;
|
package/inputs/Dropdown/Body.js
CHANGED
|
@@ -2,19 +2,24 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
|
|
|
2
2
|
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
|
|
3
3
|
return cooked;
|
|
4
4
|
};
|
|
5
|
+
var __assign = (this && this.__assign) || function () {
|
|
6
|
+
__assign = Object.assign || function(t) {
|
|
7
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
8
|
+
s = arguments[i];
|
|
9
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
10
|
+
t[p] = s[p];
|
|
11
|
+
}
|
|
12
|
+
return t;
|
|
13
|
+
};
|
|
14
|
+
return __assign.apply(this, arguments);
|
|
15
|
+
};
|
|
5
16
|
import * as React from 'react';
|
|
6
17
|
import styled, { css } from 'styled-components';
|
|
7
18
|
import { List } from '../../containers/List';
|
|
8
19
|
var BodyBase = React.forwardRef(function (props, ref) {
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
var isRight = true;
|
|
12
|
-
if (wrapperRef.current) {
|
|
13
|
-
isRight = wrapperRef.current.getBoundingClientRect().left > window.innerWidth / 2;
|
|
14
|
-
}
|
|
15
|
-
return (React.createElement("div", { className: "".concat(props.className, " ").concat(isRight ? 'right' : ''), tabIndex: -1, ref: wrapperRef },
|
|
16
|
-
React.createElement(List, { tall: props.tall, maxItems: props.maxItems, contract: true, onSearch: props.onSearch, ref: ref }, props.children)));
|
|
20
|
+
return (React.createElement("div", __assign({ style: props.styles.popper }, props.attributes.popper, { className: "".concat(props.className), tabIndex: -1, ref: ref }),
|
|
21
|
+
React.createElement(List, { tall: props.tall, maxItems: props.maxItems, contract: true, onSearch: props.onSearch }, props.children)));
|
|
17
22
|
});
|
|
18
|
-
var Body = styled(BodyBase)(
|
|
23
|
+
var Body = styled(BodyBase)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n z-index: 9999;\n outline: none;\n box-sizing: border-box;\n visibility: ", ";\n font: ", ";\n\n // Width:\n ", "\n \n transition: opacity ", "ms ease-in-out,\n max-height 0ms linear ", "ms;\n max-height: 0;\n opacity: 0;\n ", "\n"], ["\n z-index: 9999;\n outline: none;\n box-sizing: border-box;\n visibility: ", ";\n font: ", ";\n\n // Width:\n ", "\n \n transition: opacity ", "ms ease-in-out,\n max-height 0ms linear ", "ms;\n max-height: 0;\n opacity: 0;\n ", "\n"])), function (p) { return p.open ? 'visible' : 'hidden'; }, function (p) { return p.theme.font.bodyMedium; }, function (p) { return p.minBodyWidth && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n min-width: ", "px;\n "], ["\n min-width: ", "px;\n "])), p.minBodyWidth); }, function (p) { return p.theme.animation.duration * 0; }, function (p) { return p.theme.animation.duration * 0; }, function (p) { return p.open && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n transition: opacity ", "ms ease-in,\n max-height 0ms linear;\n max-height: 1000px;\n opacity: 1;\n "], ["\n transition: opacity ", "ms ease-in,\n max-height 0ms linear;\n max-height: 1000px;\n opacity: 1;\n "])), function (p) { return p.theme.animation.duration; }); });
|
|
19
24
|
export { Body };
|
|
20
|
-
var templateObject_1, templateObject_2, templateObject_3
|
|
25
|
+
var templateObject_1, templateObject_2, templateObject_3;
|
|
@@ -78,14 +78,10 @@ interface IDropdownProps {
|
|
|
78
78
|
*/
|
|
79
79
|
maxItems?: number;
|
|
80
80
|
/**
|
|
81
|
-
* The Dropdown opening direction can be either
|
|
82
|
-
*
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
* determined from the Dropdown position in the viewport.
|
|
86
|
-
* @default none
|
|
87
|
-
*/
|
|
88
|
-
direction?: 'none' | 'up' | 'down' | 'parent';
|
|
81
|
+
* The Dropdown opening direction can be either `up` or `down`.
|
|
82
|
+
* @default down
|
|
83
|
+
*/
|
|
84
|
+
direction?: 'up' | 'down';
|
|
89
85
|
/**
|
|
90
86
|
* If set, list items will be extra tall.
|
|
91
87
|
*/
|
|
@@ -71,7 +71,9 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
|
|
|
71
71
|
};
|
|
72
72
|
import * as React from 'react';
|
|
73
73
|
import styled, { css } from 'styled-components';
|
|
74
|
+
import { createPortal } from 'react-dom';
|
|
74
75
|
import AwesomeDebouncePromise from 'awesome-debounce-promise';
|
|
76
|
+
import { usePopper } from 'react-popper';
|
|
75
77
|
// Other controls
|
|
76
78
|
import { Column } from './Column';
|
|
77
79
|
import { Body } from './Body';
|
|
@@ -79,6 +81,20 @@ import { Selector } from './Selector';
|
|
|
79
81
|
import { Selection } from './Selection';
|
|
80
82
|
import { ListRow } from '../../containers/List/ListRow';
|
|
81
83
|
import { ListCell } from '../../containers/List';
|
|
84
|
+
var sameWidth = {
|
|
85
|
+
name: "sameWidth",
|
|
86
|
+
enabled: true,
|
|
87
|
+
phase: "beforeWrite",
|
|
88
|
+
requires: ["computeStyles"],
|
|
89
|
+
fn: function (_a) {
|
|
90
|
+
var state = _a.state;
|
|
91
|
+
state.styles.popper.width = "".concat(state.rects.reference.width, "px");
|
|
92
|
+
},
|
|
93
|
+
effect: function (_a) {
|
|
94
|
+
var state = _a.state;
|
|
95
|
+
state.elements.popper.style.width = "".concat(state.elements.reference.offsetWidth, "px");
|
|
96
|
+
}
|
|
97
|
+
};
|
|
82
98
|
var DropdownBase = function (props) {
|
|
83
99
|
// Current value. Keeps track of current value without waiting for new
|
|
84
100
|
// value from form, in case there is no form parent.
|
|
@@ -111,50 +127,12 @@ var DropdownBase = function (props) {
|
|
|
111
127
|
// Handle document-wide mousedown event by closing the Dropdown.
|
|
112
128
|
var handleClickOutside = function (event) {
|
|
113
129
|
var elem = event.target;
|
|
114
|
-
if (wrapperRef.current && !wrapperRef.current.contains(elem)) {
|
|
130
|
+
if (wrapperRef.current && bodyRef.current && !wrapperRef.current.contains(elem) && !bodyRef.current.contains(elem)) {
|
|
115
131
|
doClose();
|
|
116
132
|
}
|
|
117
133
|
};
|
|
118
|
-
var findScrollingParentRecursive = function (node) {
|
|
119
|
-
var overflowY = window.getComputedStyle(node).overflowY;
|
|
120
|
-
if (overflowY == 'scroll' || overflowY == 'auto')
|
|
121
|
-
return node;
|
|
122
|
-
if (node.parentElement)
|
|
123
|
-
return findScrollingParentRecursive(node.parentElement);
|
|
124
|
-
return null;
|
|
125
|
-
};
|
|
126
|
-
// Return my nearest parent that's scrolling (frames are not supported). If
|
|
127
|
-
// no parent is found, null is returned.
|
|
128
|
-
var findScrollingParent = function () {
|
|
129
|
-
return findScrollingParentRecursive(wrapperRef.current.parentElement);
|
|
130
|
-
};
|
|
131
|
-
// Returns true if the input is in the lower half of its scrolling parent.
|
|
132
|
-
// (if direction == parent), or in the lower half of the viewport if no
|
|
133
|
-
// scrolling parent is found.
|
|
134
|
-
var isInLowerViewport = function () {
|
|
135
|
-
var scrollingParent = findScrollingParent();
|
|
136
|
-
if (scrollingParent == null || props.direction !== 'parent') {
|
|
137
|
-
return wrapperRef.current.getBoundingClientRect().top > window.innerHeight / 2;
|
|
138
|
-
}
|
|
139
|
-
else {
|
|
140
|
-
var myY = wrapperRef.current.getBoundingClientRect().top;
|
|
141
|
-
var containerY = scrollingParent.getBoundingClientRect().top;
|
|
142
|
-
var containerHeight = scrollingParent.getBoundingClientRect().height;
|
|
143
|
-
var offset = myY - containerY;
|
|
144
|
-
return offset > containerHeight / 2;
|
|
145
|
-
}
|
|
146
|
-
};
|
|
147
134
|
// Open the dropdown.
|
|
148
135
|
var doOpen = function () {
|
|
149
|
-
// Is the Dropdown below the middle of the viewport?
|
|
150
|
-
var below = isInLowerViewport();
|
|
151
|
-
// Set opening direction.
|
|
152
|
-
if (props.direction === 'down')
|
|
153
|
-
setUpwards(false);
|
|
154
|
-
else if (props.direction === 'up')
|
|
155
|
-
setUpwards(true);
|
|
156
|
-
else
|
|
157
|
-
setUpwards(below);
|
|
158
136
|
setOpen(true);
|
|
159
137
|
// If reset on open is specified, then the search query is reset whenever the
|
|
160
138
|
// dropdown opens or reopens.
|
|
@@ -162,11 +140,13 @@ var DropdownBase = function (props) {
|
|
|
162
140
|
setSearch(null);
|
|
163
141
|
// If a search box is present, move focus to it:
|
|
164
142
|
if (props.onSearch) {
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
143
|
+
setTimeout(function () {
|
|
144
|
+
var input = bodyRef.current.querySelector('input');
|
|
145
|
+
input.focus();
|
|
146
|
+
// In IE/Chrome, body content scrolls up a little when setting focus
|
|
147
|
+
// to search input. Scroll it back to top.
|
|
148
|
+
bodyRef.current.children[0].scrollTop = 0;
|
|
149
|
+
}, 150);
|
|
170
150
|
}
|
|
171
151
|
};
|
|
172
152
|
// Close the dropdown.
|
|
@@ -229,20 +209,20 @@ var DropdownBase = function (props) {
|
|
|
229
209
|
if (props.data.length <= prevIndex)
|
|
230
210
|
return;
|
|
231
211
|
updateValue(props.data[prevIndex]);
|
|
232
|
-
bodyRef.current.children[prevIndex].scrollIntoView({ block: 'start', inline: 'nearest' });
|
|
212
|
+
bodyRef.current.children[0].children[0].children[prevIndex].scrollIntoView({ block: 'start', inline: 'nearest' });
|
|
233
213
|
};
|
|
234
214
|
var selectNextItem = function () {
|
|
235
215
|
var nextIndex = props.data.indexOf(value) + 1;
|
|
236
216
|
if (props.data.length <= nextIndex)
|
|
237
217
|
return;
|
|
238
218
|
updateValue(props.data[nextIndex]);
|
|
239
|
-
bodyRef.current.children[nextIndex].scrollIntoView({ block: 'end', inline: 'nearest' });
|
|
219
|
+
bodyRef.current.children[0].children[0].children[nextIndex].scrollIntoView({ block: 'end', inline: 'nearest' });
|
|
240
220
|
};
|
|
241
221
|
//
|
|
242
222
|
// A key was pressed while the selector had focus.
|
|
243
223
|
//
|
|
244
224
|
var handleKeyDown = function (e) {
|
|
245
|
-
if (document.activeElement
|
|
225
|
+
if (!wrapperRef.current.contains(document.activeElement))
|
|
246
226
|
return;
|
|
247
227
|
if (props.disabled || props.ghost)
|
|
248
228
|
return;
|
|
@@ -267,10 +247,12 @@ var DropdownBase = function (props) {
|
|
|
267
247
|
}
|
|
268
248
|
if (key == 'ArrowUp') {
|
|
269
249
|
e.stopPropagation();
|
|
250
|
+
e.preventDefault();
|
|
270
251
|
selectPreviousItem();
|
|
271
252
|
}
|
|
272
253
|
if (key == 'ArrowDown') {
|
|
273
254
|
e.stopPropagation();
|
|
255
|
+
e.preventDefault();
|
|
274
256
|
selectNextItem();
|
|
275
257
|
}
|
|
276
258
|
// Is a letter or a digit pressed?
|
|
@@ -393,9 +375,21 @@ var DropdownBase = function (props) {
|
|
|
393
375
|
wrapperRef.current.children[0].click();
|
|
394
376
|
};
|
|
395
377
|
var children = getBodyChildren();
|
|
378
|
+
var _e = usePopper(wrapperRef.current, bodyRef.current, {
|
|
379
|
+
placement: props.direction == 'down' ? 'bottom' : 'top',
|
|
380
|
+
modifiers: [
|
|
381
|
+
{
|
|
382
|
+
name: 'offset',
|
|
383
|
+
options: {
|
|
384
|
+
offset: [0, props.transparent ? 30 : 8],
|
|
385
|
+
},
|
|
386
|
+
},
|
|
387
|
+
sameWidth
|
|
388
|
+
]
|
|
389
|
+
}), styles = _e.styles, attributes = _e.attributes;
|
|
396
390
|
return (React.createElement("div", { className: props.className, tabIndex: props.disabled ? -1 : 0, ref: wrapperRef, onKeyDown: handleKeyDown, onClick: handleClickDropdown },
|
|
397
391
|
React.createElement(Selector, { open: open, error: props.error, disabled: props.disabled, upwards: upwards, transparent: props.transparent, ghost: props.ghost, multiple: props.multiple, onClick: handleSelectorClicked, onClear: (props.clearable && !showPlaceholder) ? handleClear : null, placeholder: showPlaceholder }, label),
|
|
398
|
-
React.createElement(Body, { ref: bodyRef,
|
|
392
|
+
createPortal(React.createElement(Body, { ref: bodyRef, open: open, transparent: props.transparent, maxItems: props.maxItems, onSearch: props.onSearch ? handleSearch : null, search: search, tall: props.tall, minBodyWidth: props.minBodyWidth, styles: styles, attributes: attributes }, children), document.body)));
|
|
399
393
|
};
|
|
400
394
|
var DropdownStyled = styled(DropdownBase)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n position: relative;\n // Dropdown has a minimum width. \n width: 250px;\n // A fluid Dropdown occupies full horizontal width. \n ", " \n outline: none;\n user-select: none;\n font: ", ";\n color: ", ";\n"], ["\n position: relative;\n // Dropdown has a minimum width. \n width: 250px;\n // A fluid Dropdown occupies full horizontal width. \n ", " \n outline: none;\n user-select: none;\n font: ", ";\n color: ", ";\n"
|
|
401
395
|
/**
|
|
@@ -434,7 +428,7 @@ var DropdownStyled = styled(DropdownBase)(templateObject_2 || (templateObject_2
|
|
|
434
428
|
* ```
|
|
435
429
|
*/
|
|
436
430
|
var Dropdown = function (_a) {
|
|
437
|
-
var _b = _a.direction, direction = _b === void 0 ? '
|
|
431
|
+
var _b = _a.direction, direction = _b === void 0 ? 'down' : _b, _c = _a.fluid, fluid = _c === void 0 ? false : _c, _d = _a.clearable, clearable = _d === void 0 ? false : _d, _e = _a.disabled, disabled = _e === void 0 ? false : _e, _f = _a.transparent, transparent = _f === void 0 ? false : _f, _g = _a.error, error = _g === void 0 ? false : _g, _h = _a.multiple, multiple = _h === void 0 ? false : _h, _j = _a.resetOnOpen, resetOnOpen = _j === void 0 ? false : _j, _k = _a.gap, gap = _k === void 0 ? 16 : _k, _l = _a.maxItems, maxItems = _l === void 0 ? 6 : _l, _m = _a.tall, tall = _m === void 0 ? false : _m, _o = _a.label, label = _o === void 0 ? function (item) { return item; } : _o, props = __rest(_a, ["direction", "fluid", "clearable", "disabled", "transparent", "error", "multiple", "resetOnOpen", "gap", "maxItems", "tall", "label"]);
|
|
438
432
|
return React.createElement(DropdownStyled, __assign({ direction: direction, fluid: fluid, clearable: clearable, disabled: disabled, transparent: transparent, error: error, multiple: multiple, resetOnOpen: resetOnOpen, gap: gap, maxItems: maxItems, tall: tall, label: label }, props));
|
|
439
433
|
};
|
|
440
434
|
/**
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@longline/aqua-ui",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.100",
|
|
4
4
|
"description": "AquaUI",
|
|
5
5
|
"author": "Alexander van Oostenrijk / Longline Environment",
|
|
6
6
|
"license": "Commercial",
|
|
@@ -43,6 +43,7 @@
|
|
|
43
43
|
"webpack-cli": "^5.1.4"
|
|
44
44
|
},
|
|
45
45
|
"peerDependencies": {
|
|
46
|
+
"@popperjs/core": "^2.11.8",
|
|
46
47
|
"@react-spring/web": "^9.7.4",
|
|
47
48
|
"@tiptap/pm": "^2.7.2",
|
|
48
49
|
"@tiptap/react": "^2.7.2",
|
|
@@ -61,6 +62,7 @@
|
|
|
61
62
|
"react": "^18.3.1",
|
|
62
63
|
"react-dom": "^18.3.1",
|
|
63
64
|
"react-map-gl": "^7.1.7",
|
|
65
|
+
"react-popper": "^2.3.0",
|
|
64
66
|
"react-router-dom": "^6.26.2",
|
|
65
67
|
"react-transition-group": "^4.4.5",
|
|
66
68
|
"styled-components": "^6.1.13"
|