@bodynarf/react.components 1.4.2 → 1.4.4
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/components/dropdown/components/compact/index.d.ts +4 -0
- package/components/dropdown/components/compact/index.d.ts.map +1 -0
- package/components/dropdown/components/compact/index.js +55 -0
- package/components/dropdown/components/{dropdownItem → item}/index.d.ts +0 -0
- package/components/dropdown/components/item/index.d.ts.map +1 -0
- package/components/dropdown/components/{dropdownItem → item}/index.js +1 -1
- package/components/dropdown/components/{dropdownLabel → label}/index.d.ts +4 -2
- package/components/dropdown/components/label/index.d.ts.map +1 -0
- package/components/dropdown/components/{dropdownLabel → label}/index.js +7 -6
- package/components/dropdown/components/withLabel/index.d.ts +4 -0
- package/components/dropdown/components/withLabel/index.d.ts.map +1 -0
- package/components/dropdown/components/withLabel/index.js +75 -0
- package/components/dropdown/dropdown.scss +17 -3
- package/components/dropdown/index.d.ts +14 -3
- package/components/dropdown/index.d.ts.map +1 -1
- package/components/dropdown/index.js +11 -52
- package/package.json +1 -1
- package/components/dropdown/components/dropdownItem/index.d.ts.map +0 -1
- package/components/dropdown/components/dropdownLabel/index.d.ts.map +0 -1
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import { DropdownProps } from "../..";
|
|
2
|
+
declare const DropdownCompact: ({ items, value, onSelect, deselectable, className, hideOnOuterClick, listMaxHeight, placeholder, compact, }: DropdownProps) => JSX.Element;
|
|
3
|
+
export default DropdownCompact;
|
|
4
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/dropdown/components/compact/index.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAKtC,QAAA,MAAM,eAAe,gHAMlB,aAAa,KAAG,WA6FlB,CAAC;AAEF,eAAe,eAAe,CAAC"}
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { useCallback, useId, useState } from "react";
|
|
3
|
+
import { getClassName, isNullOrEmpty, isNullOrUndefined } from "@bodynarf/utils";
|
|
4
|
+
import { useComponentOutsideClick } from "../../../../hooks";
|
|
5
|
+
import DropdownItem from '../item';
|
|
6
|
+
import DropdownLabel from '../label';
|
|
7
|
+
const DropdownCompact = ({ items, value, onSelect, deselectable, className, hideOnOuterClick, listMaxHeight, placeholder, compact, }) => {
|
|
8
|
+
const id = useId();
|
|
9
|
+
const [isListVisible, setListVisible] = useState(false);
|
|
10
|
+
const onItemClick = useCallback((event) => {
|
|
11
|
+
const target = event.target;
|
|
12
|
+
if (isNullOrUndefined(target)) {
|
|
13
|
+
return;
|
|
14
|
+
}
|
|
15
|
+
const dataValue = target.dataset['dropdownItemValue'];
|
|
16
|
+
if (isNullOrEmpty(dataValue)) {
|
|
17
|
+
return;
|
|
18
|
+
}
|
|
19
|
+
const item = items.find(x => x.value === dataValue);
|
|
20
|
+
if (isNullOrUndefined(item)) {
|
|
21
|
+
return;
|
|
22
|
+
}
|
|
23
|
+
if (value === item) {
|
|
24
|
+
setListVisible(false);
|
|
25
|
+
return;
|
|
26
|
+
}
|
|
27
|
+
onSelect(item);
|
|
28
|
+
setListVisible(false);
|
|
29
|
+
}, [setListVisible, value, items, onSelect]);
|
|
30
|
+
const onLabelClick = useCallback((event) => {
|
|
31
|
+
const target = event.target;
|
|
32
|
+
if (isNullOrUndefined(target)) {
|
|
33
|
+
return;
|
|
34
|
+
}
|
|
35
|
+
if (target.classList.contains("bi-plus-lg")) {
|
|
36
|
+
onSelect(undefined);
|
|
37
|
+
}
|
|
38
|
+
else {
|
|
39
|
+
setListVisible(state => !state);
|
|
40
|
+
}
|
|
41
|
+
}, [onSelect, setListVisible]);
|
|
42
|
+
useComponentOutsideClick(`[data-dropdown-id="${id}"]`, isListVisible, () => setListVisible(false), hideOnOuterClick);
|
|
43
|
+
const classNames = getClassName([
|
|
44
|
+
"bbr-dropdown",
|
|
45
|
+
(compact ?? false) ? "bbr-dropdown--compact" : "",
|
|
46
|
+
isListVisible ? "is-active" : "",
|
|
47
|
+
isNullOrEmpty(listMaxHeight) ? "bbr-dropdown--height-default" : "",
|
|
48
|
+
className,
|
|
49
|
+
"dropdown"
|
|
50
|
+
]);
|
|
51
|
+
return (_jsxs("div", { className: classNames, "data-dropdown-id": id, children: [_jsx(DropdownLabel, { caption: placeholder, deselectable: deselectable === true, selectedItem: value, onClick: onLabelClick }), _jsx("div", { className: "dropdown-menu", children: items.length > 0
|
|
52
|
+
? _jsx("ul", { className: "dropdown-content", style: { maxHeight: listMaxHeight }, children: items.map(item => _jsx(DropdownItem, { item: item, selected: value?.value === item.value, onClick: onItemClick }, item.id)) })
|
|
53
|
+
: _jsx("span", { className: "dropdown-content dropdown-item", children: "No items found" }) })] }, id));
|
|
54
|
+
};
|
|
55
|
+
export default DropdownCompact;
|
|
File without changes
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/dropdown/components/item/index.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAE7C,0BAA0B;AAC1B,UAAU,iBAAiB;IACvB,kCAAkC;IAClC,IAAI,EAAE,cAAc,CAAC;IAErB,sBAAsB;IACtB,QAAQ,EAAE,OAAO,CAAC;IAElB,yBAAyB;IACzB,OAAO,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,aAAa,CAAC,KAAK,IAAI,CAAC;CAC7D;AAED,wCAAwC;AACxC,QAAA,MAAM,YAAY,gCAAiC,iBAAiB,KAAG,WAYtE,CAAC;AAEF,eAAe,YAAY,CAAC"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
/** Single item in dropdown component */
|
|
3
3
|
const DropdownItem = ({ item, selected, onClick }) => {
|
|
4
|
-
return (_jsx("li", { className: `
|
|
4
|
+
return (_jsx("li", { className: `bbr-dropdown-item dropdown-item${selected ? " is-active" : ""}`, onClick: onClick, "data-dropdown-item-value": item.value, title: item.displayValue, children: item.displayValue }, item.id));
|
|
5
5
|
};
|
|
6
6
|
export default DropdownItem;
|
|
@@ -1,16 +1,18 @@
|
|
|
1
1
|
import { MouseEvent } from 'react';
|
|
2
2
|
import { SelectableItem } from "../../types";
|
|
3
|
-
interface DropdownLabelProps {
|
|
3
|
+
export interface DropdownLabelProps {
|
|
4
4
|
/** Caption when no items selected */
|
|
5
5
|
caption: string;
|
|
6
6
|
/** Can user deselect */
|
|
7
7
|
deselectable: boolean;
|
|
8
8
|
/** Selected item */
|
|
9
9
|
selectedItem?: SelectableItem;
|
|
10
|
+
/** Element classnames */
|
|
11
|
+
className?: string;
|
|
10
12
|
/** Click handler*/
|
|
11
13
|
onClick: (event: MouseEvent<HTMLLabelElement>) => void;
|
|
12
14
|
}
|
|
13
15
|
/** Label component */
|
|
14
|
-
declare const DropdownLabel: ({ caption, selectedItem, onClick, deselectable }: DropdownLabelProps) => JSX.Element;
|
|
16
|
+
declare const DropdownLabel: ({ caption, selectedItem, onClick, deselectable, className, }: DropdownLabelProps) => JSX.Element;
|
|
15
17
|
export default DropdownLabel;
|
|
16
18
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/dropdown/components/label/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAMnC,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAE7C,MAAM,WAAW,kBAAkB;IAC/B,qCAAqC;IACrC,OAAO,EAAE,MAAM,CAAC;IAEhB,wBAAwB;IACxB,YAAY,EAAE,OAAO,CAAC;IAEtB,oBAAoB;IACpB,YAAY,CAAC,EAAE,cAAc,CAAC;IAE9B,yBAAyB;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,mBAAmB;IACnB,OAAO,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;CAC1D;AAED,sBAAsB;AACtB,QAAA,MAAM,aAAa,iEAIhB,kBAAkB,KAAG,WAkCvB,CAAC;AAEF,eAAe,aAAa,CAAC"}
|
|
@@ -1,20 +1,21 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { getClassName, isNullOrUndefined } from "@bodynarf/utils";
|
|
2
|
+
import { getClassName, isNullOrEmpty, isNullOrUndefined } from "@bodynarf/utils";
|
|
3
3
|
import Icon from '../../../icon';
|
|
4
4
|
/** Label component */
|
|
5
|
-
const DropdownLabel = ({ caption, selectedItem, onClick, deselectable }) => {
|
|
5
|
+
const DropdownLabel = ({ caption, selectedItem, onClick, deselectable, className, }) => {
|
|
6
6
|
const itemSelected = !isNullOrUndefined(selectedItem);
|
|
7
7
|
const text = itemSelected
|
|
8
8
|
? selectedItem?.displayValue
|
|
9
9
|
: caption;
|
|
10
10
|
const deselectVisible = deselectable && itemSelected;
|
|
11
|
-
const
|
|
11
|
+
const elClassName = getClassName([
|
|
12
12
|
"dropdown-trigger",
|
|
13
|
-
"
|
|
14
|
-
|
|
13
|
+
"bbr-dropdown__label",
|
|
14
|
+
isNullOrEmpty(className) ? "" : `${className}--md`,
|
|
15
|
+
itemSelected ? "" : "bbr-dropdown__label--default",
|
|
15
16
|
"button"
|
|
16
17
|
]);
|
|
17
|
-
return (_jsxs("label", { className:
|
|
18
|
+
return (_jsxs("label", { className: elClassName, onClick: onClick, children: [deselectVisible &&
|
|
18
19
|
_jsx(Icon, { name: "plus-lg" }), _jsx("span", { className: deselectVisible ? "mx-2" : "mr-2", title: itemSelected ? text : undefined, children: text }), _jsx(Icon, { name: "arrow-down" })] }));
|
|
19
20
|
};
|
|
20
21
|
export default DropdownLabel;
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import { DropdownProps } from '../..';
|
|
2
|
+
declare const DropdownWithLabel: ({ items, value, onSelect, validationState, deselectable, className, hideOnOuterClick, listMaxHeight, label, placeholder }: DropdownProps) => JSX.Element;
|
|
3
|
+
export default DropdownWithLabel;
|
|
4
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/dropdown/components/withLabel/index.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAKtC,QAAA,MAAM,iBAAiB,8HAOpB,aAAa,KAAG,WA0KlB,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
|
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { useCallback, useId, useState } from 'react';
|
|
3
|
+
import { isNullOrUndefined, isNullOrEmpty, getClassName } from '@bodynarf/utils';
|
|
4
|
+
import { getValidationValues } from '../../../../utils';
|
|
5
|
+
import { useComponentOutsideClick } from '../../../../hooks';
|
|
6
|
+
import DropdownItem from '../item';
|
|
7
|
+
import DropdownLabel from '../label';
|
|
8
|
+
const DropdownWithLabel = ({ items, value, onSelect, validationState, deselectable, className, hideOnOuterClick, listMaxHeight, label, placeholder }) => {
|
|
9
|
+
const id = useId();
|
|
10
|
+
const [isListVisible, setListVisible] = useState(false);
|
|
11
|
+
const [isValidationDefined, styleClassName, validationMessages] = getValidationValues(undefined, validationState);
|
|
12
|
+
const onItemClick = useCallback((event) => {
|
|
13
|
+
const target = event.target;
|
|
14
|
+
if (isNullOrUndefined(target)) {
|
|
15
|
+
return;
|
|
16
|
+
}
|
|
17
|
+
const dataValue = target.dataset['dropdownItemValue'];
|
|
18
|
+
if (isNullOrEmpty(dataValue)) {
|
|
19
|
+
return;
|
|
20
|
+
}
|
|
21
|
+
const item = items.find(x => x.value === dataValue);
|
|
22
|
+
if (isNullOrUndefined(item)) {
|
|
23
|
+
return;
|
|
24
|
+
}
|
|
25
|
+
if (value === item) {
|
|
26
|
+
setListVisible(false);
|
|
27
|
+
return;
|
|
28
|
+
}
|
|
29
|
+
onSelect(item);
|
|
30
|
+
setListVisible(false);
|
|
31
|
+
}, [setListVisible, value, items, onSelect]);
|
|
32
|
+
const onLabelClick = useCallback((event) => {
|
|
33
|
+
const target = event.target;
|
|
34
|
+
if (isNullOrUndefined(target)) {
|
|
35
|
+
return;
|
|
36
|
+
}
|
|
37
|
+
if (target.classList.contains("bi-plus-lg")) {
|
|
38
|
+
onSelect(undefined);
|
|
39
|
+
}
|
|
40
|
+
else {
|
|
41
|
+
setListVisible(state => !state);
|
|
42
|
+
}
|
|
43
|
+
}, [onSelect, setListVisible]);
|
|
44
|
+
useComponentOutsideClick(`[data-dropdown-id="${id}"]`, isListVisible, () => setListVisible(false), hideOnOuterClick);
|
|
45
|
+
const classNames = getClassName([
|
|
46
|
+
"bbr-dropdown",
|
|
47
|
+
isListVisible ? "is-active" : "",
|
|
48
|
+
isNullOrEmpty(listMaxHeight) ? "bbr-dropdown--height-default" : "",
|
|
49
|
+
className,
|
|
50
|
+
"dropdown"
|
|
51
|
+
]);
|
|
52
|
+
const labelClassName = getClassName([
|
|
53
|
+
"label",
|
|
54
|
+
label.className
|
|
55
|
+
]);
|
|
56
|
+
if (label.horizontal) {
|
|
57
|
+
const labelContainerClassName = getClassName([
|
|
58
|
+
"field-label",
|
|
59
|
+
label.horizontalContainerClassName
|
|
60
|
+
]);
|
|
61
|
+
const fieldContainerClassName = getClassName([
|
|
62
|
+
"field-body",
|
|
63
|
+
label.horizontalFieldContainerClassName
|
|
64
|
+
]);
|
|
65
|
+
return (_jsxs("div", { className: "app-input field is-horizontal", children: [_jsx("div", { className: labelContainerClassName, children: _jsx("label", { className: labelClassName, htmlFor: id, children: label.caption }) }), _jsx("div", { className: fieldContainerClassName, children: _jsxs("div", { className: "field", children: [_jsxs("div", { className: classNames, "data-dropdown-id": id, children: [_jsx(DropdownLabel, { className: styleClassName, caption: placeholder, deselectable: deselectable === true, selectedItem: value, onClick: onLabelClick }), _jsx("div", { className: "dropdown-menu", children: items.length > 0
|
|
66
|
+
? _jsx("ul", { className: "dropdown-content", style: { maxHeight: listMaxHeight }, children: items.map(item => _jsx(DropdownItem, { item: item, selected: value?.value === item.value, onClick: onItemClick }, item.id)) })
|
|
67
|
+
: _jsx("span", { className: "dropdown-content dropdown-item", children: "No items found" }) })] }, id), isValidationDefined && validationMessages.length > 0 &&
|
|
68
|
+
_jsx("p", { className: `help m-help ${styleClassName}`, children: validationMessages.join("\n") })] }) })] }));
|
|
69
|
+
}
|
|
70
|
+
return (_jsxs("div", { className: "field", children: [_jsx("label", { className: labelClassName, htmlFor: id, children: label.caption }), _jsxs("div", { className: classNames, "data-dropdown-id": id, children: [_jsx(DropdownLabel, { className: styleClassName, caption: placeholder, deselectable: deselectable === true, selectedItem: value, onClick: onLabelClick }), _jsx("div", { className: "dropdown-menu", children: items.length > 0
|
|
71
|
+
? _jsx("ul", { className: "dropdown-content", style: { maxHeight: listMaxHeight }, children: items.map(item => _jsx(DropdownItem, { item: item, selected: value?.value === item.value, onClick: onItemClick }, item.id)) })
|
|
72
|
+
: _jsx("span", { className: "dropdown-content dropdown-item", children: "No items found" }) })] }, id), isValidationDefined && validationMessages.length > 0 &&
|
|
73
|
+
_jsx("p", { className: `help m-help ${styleClassName}`, children: validationMessages.join("\n") })] }));
|
|
74
|
+
};
|
|
75
|
+
export default DropdownWithLabel;
|
|
@@ -1,6 +1,13 @@
|
|
|
1
|
-
.
|
|
1
|
+
.bbr-dropdown {
|
|
2
2
|
min-width: 7.5rem;
|
|
3
|
-
|
|
3
|
+
|
|
4
|
+
&:not(.bbr-dropdown--compact) {
|
|
5
|
+
display: block;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
&--compact {
|
|
9
|
+
width: fit-content;
|
|
10
|
+
}
|
|
4
11
|
|
|
5
12
|
& .dropdown-menu {
|
|
6
13
|
min-width: 11.75rem;
|
|
@@ -41,6 +48,13 @@
|
|
|
41
48
|
transform: rotate(45deg);
|
|
42
49
|
}
|
|
43
50
|
}
|
|
51
|
+
|
|
52
|
+
&.is-success--md {
|
|
53
|
+
border-color: #48c78e;
|
|
54
|
+
}
|
|
55
|
+
&.is-danger--md {
|
|
56
|
+
border-color: #f14668;
|
|
57
|
+
}
|
|
44
58
|
}
|
|
45
59
|
|
|
46
60
|
&-item {
|
|
@@ -67,7 +81,7 @@
|
|
|
67
81
|
}
|
|
68
82
|
|
|
69
83
|
&.is-active {
|
|
70
|
-
.
|
|
84
|
+
.bbr-dropdown__label .app-icon.bi-arrow-down::before {
|
|
71
85
|
transform: rotate(180deg);
|
|
72
86
|
}
|
|
73
87
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
1
|
import './dropdown.scss';
|
|
3
|
-
import { SelectableItem } from './types';
|
|
4
2
|
import { BaseElementProps } from '../types';
|
|
3
|
+
import { InputLabel, ValidationState } from '../primitives';
|
|
4
|
+
import { SelectableItem } from './types';
|
|
5
5
|
export declare type DropdownProps = BaseElementProps & {
|
|
6
6
|
/** Items which can be selected */
|
|
7
7
|
items: Array<SelectableItem>;
|
|
@@ -25,8 +25,19 @@ export declare type DropdownProps = BaseElementProps & {
|
|
|
25
25
|
deselectable?: boolean;
|
|
26
26
|
/** Custom dropdown list max-height property */
|
|
27
27
|
listMaxHeight?: string;
|
|
28
|
+
/**
|
|
29
|
+
* Should dropdown be compact
|
|
30
|
+
* Will have width by maximum current selection item width
|
|
31
|
+
*/
|
|
32
|
+
compact?: boolean;
|
|
33
|
+
/** Input element placeholder */
|
|
34
|
+
placeholder: string;
|
|
35
|
+
/** Label configuration */
|
|
36
|
+
label?: InputLabel;
|
|
37
|
+
/** Current validation state */
|
|
38
|
+
validationState?: ValidationState;
|
|
28
39
|
};
|
|
29
40
|
/** Dropdown component */
|
|
30
|
-
declare const Dropdown: (
|
|
41
|
+
declare const Dropdown: (props: DropdownProps) => JSX.Element;
|
|
31
42
|
export default Dropdown;
|
|
32
43
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/dropdown/index.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/dropdown/index.tsx"],"names":[],"mappings":"AAEA,OAAO,iBAAiB,CAAC;AAEzB,OAAO,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAC5C,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAE5D,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAIzC,oBAAY,aAAa,GAAG,gBAAgB,GAAG;IAC3C,kCAAkC;IAClC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,CAAC;IAE7B;;;MAGE;IACF,KAAK,CAAC,EAAE,cAAc,CAAC;IAEvB;;MAEE;IACF,QAAQ,EAAE,CAAC,IAAI,CAAC,EAAE,cAAc,KAAK,IAAI,CAAC;IAE1C;;;MAGE;IACF,OAAO,EAAE,MAAM,CAAC;IAEhB,gEAAgE;IAChE,gBAAgB,EAAE,OAAO,CAAC;IAE1B,wBAAwB;IACxB,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,+CAA+C;IAC/C,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,gCAAgC;IAChC,WAAW,EAAE,MAAM,CAAC;IAEpB,0BAA0B;IAC1B,KAAK,CAAC,EAAE,UAAU,CAAC;IAEnB,+BAA+B;IAC/B,eAAe,CAAC,EAAE,eAAe,CAAC;CACrC,CAAA;AAED,yBAAyB;AACzB,QAAA,MAAM,QAAQ,UAAW,aAAa,KAAG,WAMxC,CAAC;AAEF,eAAe,QAAQ,CAAC"}
|
|
@@ -1,56 +1,15 @@
|
|
|
1
|
-
import { jsx as _jsx
|
|
2
|
-
import {
|
|
3
|
-
import { isNullOrUndefined, isNullOrEmpty, getClassName } from '@bodynarf/utils';
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { isNullOrUndefined } from '@bodynarf/utils';
|
|
4
3
|
import './dropdown.scss';
|
|
5
|
-
import
|
|
6
|
-
import
|
|
7
|
-
import DropdownLabel from './components/dropdownLabel';
|
|
4
|
+
import DropdownWithLabel from './components/withLabel';
|
|
5
|
+
import DropdownCompact from './components/compact';
|
|
8
6
|
/** Dropdown component */
|
|
9
|
-
const Dropdown = (
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
}
|
|
17
|
-
const dataValue = target.dataset['dropdownItemValue'];
|
|
18
|
-
if (isNullOrEmpty(dataValue)) {
|
|
19
|
-
return;
|
|
20
|
-
}
|
|
21
|
-
const item = items.find(x => x.value === dataValue);
|
|
22
|
-
if (isNullOrUndefined(item)) {
|
|
23
|
-
return;
|
|
24
|
-
}
|
|
25
|
-
if (value === item) {
|
|
26
|
-
setListVisible(false);
|
|
27
|
-
return;
|
|
28
|
-
}
|
|
29
|
-
onSelect(item);
|
|
30
|
-
setListVisible(false);
|
|
31
|
-
}, [setListVisible, value, items, onSelect]);
|
|
32
|
-
const onLabelClick = useCallback((event) => {
|
|
33
|
-
const target = event.target;
|
|
34
|
-
if (isNullOrUndefined(target)) {
|
|
35
|
-
return;
|
|
36
|
-
}
|
|
37
|
-
if (target.classList.contains("bi-plus-lg")) {
|
|
38
|
-
onSelect(undefined);
|
|
39
|
-
}
|
|
40
|
-
else {
|
|
41
|
-
setListVisible(state => !state);
|
|
42
|
-
}
|
|
43
|
-
}, [onSelect, setListVisible]);
|
|
44
|
-
useComponentOutsideClick(`[data-dropdown-id="${id}"]`, isListVisible, () => setListVisible(false), hideOnOuterClick);
|
|
45
|
-
const classNames = getClassName([
|
|
46
|
-
"app-dropdown",
|
|
47
|
-
isListVisible ? "is-active" : "",
|
|
48
|
-
isNullOrEmpty(listMaxHeight) ? "app-dropdown--height-default" : "",
|
|
49
|
-
className,
|
|
50
|
-
"dropdown"
|
|
51
|
-
]);
|
|
52
|
-
return (_jsxs("div", { className: classNames, "data-dropdown-id": id, children: [_jsx(DropdownLabel, { caption: caption, deselectable: deselectable === true, selectedItem: value, onClick: onLabelClick }), _jsx("div", { className: "dropdown-menu", children: items.length > 0
|
|
53
|
-
? _jsx("ul", { className: "dropdown-content", style: { maxHeight: listMaxHeight }, children: items.map(item => _jsx(DropdownItem, { item: item, selected: value?.value === item.value, onClick: onItemClick }, item.id)) })
|
|
54
|
-
: _jsx("span", { className: "dropdown-content dropdown-item", children: "No items found" }) })] }, id));
|
|
7
|
+
const Dropdown = (props) => {
|
|
8
|
+
if (!isNullOrUndefined(props.label)) {
|
|
9
|
+
return _jsx(DropdownWithLabel, { ...props });
|
|
10
|
+
}
|
|
11
|
+
else {
|
|
12
|
+
return _jsx(DropdownCompact, { ...props });
|
|
13
|
+
}
|
|
55
14
|
};
|
|
56
15
|
export default Dropdown;
|
package/package.json
CHANGED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/dropdown/components/dropdownItem/index.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAE7C,0BAA0B;AAC1B,UAAU,iBAAiB;IACvB,kCAAkC;IAClC,IAAI,EAAE,cAAc,CAAC;IAErB,sBAAsB;IACtB,QAAQ,EAAE,OAAO,CAAC;IAElB,yBAAyB;IACzB,OAAO,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,aAAa,CAAC,KAAK,IAAI,CAAC;CAC7D;AAED,wCAAwC;AACxC,QAAA,MAAM,YAAY,gCAAiC,iBAAiB,KAAG,WAYtE,CAAC;AAEF,eAAe,YAAY,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/dropdown/components/dropdownLabel/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAMnC,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAE7C,UAAU,kBAAkB;IACxB,qCAAqC;IACrC,OAAO,EAAE,MAAM,CAAC;IAEhB,wBAAwB;IACxB,YAAY,EAAE,OAAO,CAAC;IAEtB,oBAAoB;IACpB,YAAY,CAAC,EAAE,cAAc,CAAC;IAE9B,mBAAmB;IACnB,OAAO,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;CAC1D;AAED,sBAAsB;AACtB,QAAA,MAAM,aAAa,qDAAsD,kBAAkB,KAAG,WAiC7F,CAAC;AAEF,eAAe,aAAa,CAAC"}
|