@longline/aqua-ui 1.0.49 → 1.0.50
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.
|
@@ -18,6 +18,8 @@ interface IProps {
|
|
|
18
18
|
search?: string;
|
|
19
19
|
/** If set, list items will be extra tall. */
|
|
20
20
|
tall?: boolean;
|
|
21
|
+
/** Minimum body width for narrow dropdowns. */
|
|
22
|
+
minBodyWidth?: number;
|
|
21
23
|
}
|
|
22
24
|
declare const Body: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<IProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
|
|
23
25
|
ref?: React.Ref<HTMLDivElement>;
|
package/inputs/Dropdown/Body.js
CHANGED
|
@@ -6,9 +6,15 @@ import * as React from 'react';
|
|
|
6
6
|
import styled, { css } from 'styled-components';
|
|
7
7
|
import { List } from '../../containers/List';
|
|
8
8
|
var BodyBase = React.forwardRef(function (props, ref) {
|
|
9
|
-
|
|
9
|
+
var wrapperRef = React.useRef(null);
|
|
10
|
+
// Determine if dropdown is on the left or right-hand side of the viewport:
|
|
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 },
|
|
10
16
|
React.createElement(List, { tall: props.tall, maxItems: props.maxItems, contract: true, onSearch: props.onSearch, ref: ref }, props.children)));
|
|
11
17
|
});
|
|
12
|
-
var Body = styled(BodyBase)(
|
|
18
|
+
var Body = styled(BodyBase)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n position: absolute;\n z-index: 100;\n box-sizing: border-box;\n outline: none;\n visibility: ", ";\n font: ", ";\n\n // Width:\n ", "\n ", "\n \n // Transparent fill be placed over thick FieldWrapper's border.\n ", "\n\n // In case of minBodyWidth, left or right align the body depending\n // on where the Dropdown is in the viewport:\n ", "\n\n // Dropbox can open upwards or downwards. This affects its positioning \n // relative to the parent.\n // Transparent Dropdowns have more distance from the selector so that\n // they appear outside of the FieldWrapper.\n ", "\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 position: absolute;\n z-index: 100;\n box-sizing: border-box;\n outline: none;\n visibility: ", ";\n font: ", ";\n\n // Width:\n ", "\n ", "\n \n // Transparent fill be placed over thick FieldWrapper's border.\n ", "\n\n // In case of minBodyWidth, left or right align the body depending\n // on where the Dropdown is in the viewport:\n ", "\n\n // Dropbox can open upwards or downwards. This affects its positioning \n // relative to the parent.\n // Transparent Dropdowns have more distance from the selector so that\n // they appear outside of the FieldWrapper.\n ", "\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.transparent && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["width: 100%;"], ["width: 100%;"]))); }, function (p) { return p.transparent && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["left: -2px; right: -2px;"], ["left: -2px; right: -2px;"]))); }, function (p) { return p.minBodyWidth && css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n left: 0;\n right: auto;\n &.right {\n right: 0;\n left: auto;\n }\n "], ["\n left: 0;\n right: auto;\n &.right {\n right: 0;\n left: auto;\n }\n "]))); }, function (p) { return p.upwards && css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n bottom: calc(100% + ", ");\n "], ["\n bottom: calc(100% + ", ");\n "])), p.transparent ? "30px" : "8px"); }, function (p) { return !p.upwards && css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n top: calc(100% + ", ");\n "], ["\n top: calc(100% + ", ");\n "])), p.transparent ? "30px" : "8px"); }, function (p) { return p.theme.animation.duration * 0; }, function (p) { return p.theme.animation.duration * 0; }, function (p) { return p.open && css(templateObject_7 || (templateObject_7 = __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; }); });
|
|
13
19
|
export { Body };
|
|
14
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
|
|
20
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
|
|
@@ -90,6 +90,10 @@ interface IDropdownProps {
|
|
|
90
90
|
* If set, list items will be extra tall.
|
|
91
91
|
*/
|
|
92
92
|
tall?: boolean;
|
|
93
|
+
/**
|
|
94
|
+
* A minimum body width can be set for dropdowns that are very narrow.
|
|
95
|
+
*/
|
|
96
|
+
minBodyWidth?: number;
|
|
93
97
|
/**
|
|
94
98
|
* Fired when the Dropdown value changes.
|
|
95
99
|
*/
|
|
@@ -395,7 +395,7 @@ var DropdownBase = function (props) {
|
|
|
395
395
|
var children = getBodyChildren();
|
|
396
396
|
return (React.createElement("div", { className: props.className, tabIndex: props.disabled ? -1 : 0, ref: wrapperRef, onKeyDown: handleKeyDown, onClick: handleClickDropdown },
|
|
397
397
|
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, upwards: upwards, open: open, transparent: props.transparent, maxItems: props.maxItems, onSearch: props.onSearch ? handleSearch : null, search: search, tall: props.tall }, children)));
|
|
398
|
+
React.createElement(Body, { ref: bodyRef, upwards: upwards, open: open, transparent: props.transparent, maxItems: props.maxItems, onSearch: props.onSearch ? handleSearch : null, search: search, tall: props.tall, minBodyWidth: props.minBodyWidth }, children)));
|
|
399
399
|
};
|
|
400
400
|
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
401
|
/**
|