@elliemae/ds-menu 2.2.0-next.6 → 2.3.0-alpha.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.
- package/cjs/Menu.js +137 -181
- package/cjs/Menu.js.map +7 -0
- package/cjs/MenuCombobox.js +67 -53
- package/cjs/MenuCombobox.js.map +7 -0
- package/cjs/MenuContext.js +38 -11
- package/cjs/MenuContext.js.map +7 -0
- package/cjs/MenuExports.js +28 -0
- package/cjs/MenuExports.js.map +7 -0
- package/cjs/MenuItems/CheckboxGroup.js +49 -42
- package/cjs/MenuItems/CheckboxGroup.js.map +7 -0
- package/cjs/MenuItems/MenuItem.js +116 -163
- package/cjs/MenuItems/MenuItem.js.map +7 -0
- package/cjs/MenuItems/MenuItemCheckable.js +77 -108
- package/cjs/MenuItems/MenuItemCheckable.js.map +7 -0
- package/cjs/MenuItems/MenuItemCheckbox.js +47 -41
- package/cjs/MenuItems/MenuItemCheckbox.js.map +7 -0
- package/cjs/MenuItems/MenuItemRadio.js +50 -38
- package/cjs/MenuItems/MenuItemRadio.js.map +7 -0
- package/cjs/MenuItems/RadioGroup.js +48 -39
- package/cjs/MenuItems/RadioGroup.js.map +7 -0
- package/cjs/MenuItems/SearchableGroup.js +88 -92
- package/cjs/MenuItems/SearchableGroup.js.map +7 -0
- package/cjs/MenuItems/SearchableList.js +92 -95
- package/cjs/MenuItems/SearchableList.js.map +7 -0
- package/cjs/MenuItems/SelectionGroup.js +85 -90
- package/cjs/MenuItems/SelectionGroup.js.map +7 -0
- package/cjs/MenuItems/Separator.js +55 -40
- package/cjs/MenuItems/Separator.js.map +7 -0
- package/cjs/MenuItems/SubMenu.js +143 -160
- package/cjs/MenuItems/SubMenu.js.map +7 -0
- package/cjs/MenuItems/menuItemFactory.js +38 -68
- package/cjs/MenuItems/menuItemFactory.js.map +7 -0
- package/cjs/MenuItems/renderMenuItems.js +53 -0
- package/cjs/MenuItems/renderMenuItems.js.map +7 -0
- package/cjs/VirtualMenuList.js +69 -39
- package/cjs/VirtualMenuList.js.map +7 -0
- package/cjs/index.js +63 -36
- package/cjs/index.js.map +7 -0
- package/cjs/utils/useHeightByAmountOfItems.js +43 -14
- package/cjs/utils/useHeightByAmountOfItems.js.map +7 -0
- package/esm/Menu.js +91 -149
- package/esm/Menu.js.map +7 -0
- package/esm/MenuCombobox.js +38 -45
- package/esm/MenuCombobox.js.map +7 -0
- package/esm/MenuContext.js +9 -5
- package/esm/MenuContext.js.map +7 -0
- package/esm/MenuExports.js +3 -0
- package/esm/MenuExports.js.map +7 -0
- package/esm/MenuItems/CheckboxGroup.js +19 -31
- package/esm/MenuItems/CheckboxGroup.js.map +7 -0
- package/esm/MenuItems/MenuItem.js +84 -148
- package/esm/MenuItems/MenuItem.js.map +7 -0
- package/esm/MenuItems/MenuItemCheckable.js +47 -96
- package/esm/MenuItems/MenuItemCheckable.js.map +7 -0
- package/esm/MenuItems/MenuItemCheckbox.js +18 -33
- package/esm/MenuItems/MenuItemCheckbox.js.map +7 -0
- package/esm/MenuItems/MenuItemRadio.js +20 -28
- package/esm/MenuItems/MenuItemRadio.js.map +7 -0
- package/esm/MenuItems/RadioGroup.js +18 -28
- package/esm/MenuItems/RadioGroup.js.map +7 -0
- package/esm/MenuItems/SearchableGroup.js +53 -76
- package/esm/MenuItems/SearchableGroup.js.map +7 -0
- package/esm/MenuItems/SearchableList.js +59 -82
- package/esm/MenuItems/SearchableList.js.map +7 -0
- package/esm/MenuItems/SelectionGroup.js +54 -78
- package/esm/MenuItems/SelectionGroup.js.map +7 -0
- package/esm/MenuItems/Separator.js +26 -29
- package/esm/MenuItems/Separator.js.map +7 -0
- package/esm/MenuItems/SubMenu.js +107 -140
- package/esm/MenuItems/SubMenu.js.map +7 -0
- package/esm/MenuItems/menuItemFactory.js +10 -60
- package/esm/MenuItems/menuItemFactory.js.map +7 -0
- package/esm/MenuItems/renderMenuItems.js +24 -0
- package/esm/MenuItems/renderMenuItems.js.map +7 -0
- package/esm/VirtualMenuList.js +39 -32
- package/esm/VirtualMenuList.js.map +7 -0
- package/esm/index.js +34 -13
- package/esm/index.js.map +7 -0
- package/esm/utils/useHeightByAmountOfItems.js +13 -11
- package/esm/utils/useHeightByAmountOfItems.js.map +7 -0
- package/package.json +19 -11
- package/types/Menu.d.ts +5 -21
- package/types/MenuContext.d.ts +3 -2
- package/types/MenuExports.d.ts +1 -0
- package/types/MenuItems/CheckboxGroup.d.ts +6 -6
- package/types/MenuItems/MenuItem.d.ts +6 -6
- package/types/MenuItems/MenuItemCheckable.d.ts +17 -25
- package/types/MenuItems/MenuItemCheckbox.d.ts +3 -2
- package/types/MenuItems/MenuItemRadio.d.ts +6 -15
- package/types/MenuItems/RadioGroup.d.ts +6 -6
- package/types/MenuItems/SearchableGroup.d.ts +4 -12
- package/types/MenuItems/SearchableList.d.ts +17 -28
- package/types/MenuItems/SelectionGroup.d.ts +17 -28
- package/types/MenuItems/Separator.d.ts +3 -5
- package/types/MenuItems/SubMenu.d.ts +19 -32
- package/types/MenuItems/menuItemFactory.d.ts +2 -3
- package/types/MenuItems/renderMenuItems.d.ts +1 -0
- package/types/VirtualMenuList.d.ts +3 -1
- package/types/index.d.ts +3 -2
- package/types/utils/useHeightByAmountOfItems.d.ts +3 -1
|
@@ -1,58 +1,47 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
function SearchableList(_ref) {
|
|
21
|
-
let {
|
|
22
|
-
onSelectMenuItem = noop,
|
|
23
|
-
components = {},
|
|
24
|
-
searchTerm: searchTermProp = '',
|
|
25
|
-
items = [],
|
|
26
|
-
dropdownFilterOptions = {},
|
|
27
|
-
returnValue,
|
|
28
|
-
extraListProps = {},
|
|
29
|
-
appendTermInList = false,
|
|
30
|
-
maxOptions = 10,
|
|
31
|
-
loading = false
|
|
32
|
-
} = _ref;
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import React2, { useCallback, useMemo, useState } from "react";
|
|
3
|
+
import { PropTypes, describe } from "react-desc";
|
|
4
|
+
import { uniqBy } from "@elliemae/ds-utilities";
|
|
5
|
+
import { DSComboBox2 as DSComboBox } from "@elliemae/ds-form/ComboBox/v2/Combobox";
|
|
6
|
+
const noop = () => {
|
|
7
|
+
};
|
|
8
|
+
const SearchableList = ({
|
|
9
|
+
onSelectMenuItem = noop,
|
|
10
|
+
components = {},
|
|
11
|
+
searchTerm: searchTermProp = "",
|
|
12
|
+
items = [],
|
|
13
|
+
dropdownFilterOptions = {},
|
|
14
|
+
returnValue,
|
|
15
|
+
extraListProps = {},
|
|
16
|
+
appendTermInList = false,
|
|
17
|
+
maxOptions = 10,
|
|
18
|
+
loading = false
|
|
19
|
+
}) => {
|
|
33
20
|
const [searchTerm, setInputValue] = useState(searchTermProp);
|
|
34
21
|
const handleInputChange = useCallback((value, args) => {
|
|
35
22
|
const action = args ? args.action : null;
|
|
36
|
-
if (action ===
|
|
23
|
+
if (action === "input-blur" || action === "menu-close")
|
|
24
|
+
return;
|
|
37
25
|
setInputValue(value);
|
|
38
26
|
}, [searchTerm]);
|
|
39
27
|
const handleFilterByText = useCallback(() => {
|
|
40
|
-
if (searchTerm)
|
|
28
|
+
if (searchTerm)
|
|
29
|
+
onSelectMenuItem(searchTerm);
|
|
41
30
|
}, [searchTerm]);
|
|
42
|
-
const handleKeyDown = useCallback(e => {
|
|
43
|
-
if (e.key ===
|
|
31
|
+
const handleKeyDown = useCallback((e) => {
|
|
32
|
+
if (e.key === "ArrowRight") {
|
|
44
33
|
handleFilterByText();
|
|
45
34
|
}
|
|
46
35
|
}, [searchTerm]);
|
|
47
|
-
const options = useMemo(() => searchTerm && appendTermInList ? uniqBy([
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
36
|
+
const options = useMemo(() => searchTerm && appendTermInList ? uniqBy([
|
|
37
|
+
{
|
|
38
|
+
id: searchTerm,
|
|
39
|
+
label: searchTerm
|
|
40
|
+
}
|
|
41
|
+
].concat(items), (item) => item.label) : items, [searchTerm, appendTermInList]);
|
|
42
|
+
return /* @__PURE__ */ React2.createElement(DSComboBox, {
|
|
52
43
|
autoFocus: true,
|
|
53
|
-
components:
|
|
54
|
-
DropdownIndicator: null
|
|
55
|
-
}, components),
|
|
44
|
+
components: { DropdownIndicator: null, ...components },
|
|
56
45
|
customMenuItemOptions: {
|
|
57
46
|
useTruncatedText: true
|
|
58
47
|
},
|
|
@@ -63,46 +52,34 @@ function SearchableList(_ref) {
|
|
|
63
52
|
onFilterByInputText: handleFilterByText,
|
|
64
53
|
onInputChange: handleInputChange,
|
|
65
54
|
onKeyDown: handleKeyDown,
|
|
66
|
-
options
|
|
67
|
-
returnValue
|
|
55
|
+
options,
|
|
56
|
+
returnValue,
|
|
68
57
|
valueProperty: "id",
|
|
69
|
-
maxOptions
|
|
70
|
-
loading
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
58
|
+
maxOptions,
|
|
59
|
+
loading,
|
|
60
|
+
...extraListProps,
|
|
61
|
+
...dropdownFilterOptions
|
|
62
|
+
});
|
|
63
|
+
};
|
|
74
64
|
const props = {
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
items: PropTypes.array.description('item options'),
|
|
86
|
-
|
|
87
|
-
/** options */
|
|
88
|
-
dropdownFilterOptions: PropTypes.shape({}).description('options'),
|
|
89
|
-
|
|
90
|
-
/** Whether the combo box is has value to return or not */
|
|
91
|
-
returnValue: PropTypes.bool.description('Whether the combo box is has value to return or not'),
|
|
92
|
-
|
|
93
|
-
/** extra props to pass down to combo */
|
|
94
|
-
extraListProps: PropTypes.shape({}).description('extra props to pass down to combo'),
|
|
95
|
-
|
|
96
|
-
/** append search term as item on the list */
|
|
97
|
-
appendTermInList: PropTypes.bool.description('append search term as item on the list'),
|
|
98
|
-
|
|
99
|
-
/** maxoptions for combobox */
|
|
100
|
-
maxOptions: PropTypes.number.description('maxoptions for combobox'),
|
|
101
|
-
|
|
102
|
-
/** loading flag */
|
|
103
|
-
loading: PropTypes.bool.description('loading flag')
|
|
65
|
+
onSelectMenuItem: PropTypes.func.description("callback after item gets selected"),
|
|
66
|
+
components: PropTypes.shape({}).description("Object with custom components for react-select"),
|
|
67
|
+
searchTerm: PropTypes.string.description("search term to filter for"),
|
|
68
|
+
items: PropTypes.array.description("item options"),
|
|
69
|
+
dropdownFilterOptions: PropTypes.shape({}).description("options"),
|
|
70
|
+
returnValue: PropTypes.bool.description("Whether the combo box is has value to return or not"),
|
|
71
|
+
extraListProps: PropTypes.shape({}).description("extra props to pass down to combo"),
|
|
72
|
+
appendTermInList: PropTypes.bool.description("append search term as item on the list"),
|
|
73
|
+
maxOptions: PropTypes.number.description("maxoptions for combobox"),
|
|
74
|
+
loading: PropTypes.bool.description("loading flag")
|
|
104
75
|
};
|
|
76
|
+
SearchableList.propTypes = props;
|
|
105
77
|
const DSMenuSearchableListWithSchema = describe(SearchableList);
|
|
106
78
|
DSMenuSearchableListWithSchema.propTypes = props;
|
|
107
|
-
|
|
108
|
-
export {
|
|
79
|
+
var SearchableList_default = SearchableList;
|
|
80
|
+
export {
|
|
81
|
+
DSMenuSearchableListWithSchema,
|
|
82
|
+
SearchableList,
|
|
83
|
+
SearchableList_default as default
|
|
84
|
+
};
|
|
85
|
+
//# sourceMappingURL=SearchableList.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/MenuItems/SearchableList.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback, useMemo, useState } from 'react';\nimport { PropTypes, describe } from 'react-desc';\nimport { uniqBy } from '@elliemae/ds-utilities';\nimport { DSComboBox2 as DSComboBox } from '@elliemae/ds-form/ComboBox/v2/Combobox';\n\nconst noop = () => {};\n\nconst SearchableList = ({\n onSelectMenuItem = noop,\n components = {},\n searchTerm: searchTermProp = '',\n items = [],\n dropdownFilterOptions = {},\n returnValue,\n extraListProps = {},\n appendTermInList = false,\n maxOptions = 10,\n loading = false,\n}) => {\n const [searchTerm, setInputValue] = useState(searchTermProp);\n\n const handleInputChange = useCallback(\n (value, args) => {\n const action = args ? args.action : null;\n if (action === 'input-blur' || action === 'menu-close') return;\n setInputValue(value);\n },\n [searchTerm],\n );\n\n const handleFilterByText = useCallback(() => {\n if (searchTerm) onSelectMenuItem(searchTerm);\n }, [searchTerm]);\n\n const handleKeyDown = useCallback(\n (e) => {\n if (e.key === 'ArrowRight') {\n handleFilterByText();\n }\n },\n [searchTerm],\n );\n\n const options = useMemo(\n () =>\n searchTerm && appendTermInList\n ? uniqBy(\n [\n {\n id: searchTerm,\n label: searchTerm,\n },\n ].concat(items),\n (item) => item.label,\n )\n : items,\n [searchTerm, appendTermInList],\n );\n\n return (\n <DSComboBox\n autoFocus\n components={{ DropdownIndicator: null, ...components }}\n customMenuItemOptions={{\n useTruncatedText: true,\n }}\n inlineMenu\n inputValue={searchTerm}\n menuIsOpen\n onChange={onSelectMenuItem}\n onFilterByInputText={handleFilterByText}\n onInputChange={handleInputChange}\n onKeyDown={handleKeyDown}\n options={options}\n returnValue={returnValue}\n valueProperty=\"id\"\n maxOptions={maxOptions}\n loading={loading}\n {...extraListProps}\n {...dropdownFilterOptions}\n />\n );\n};\n\nconst props = {\n /** callback after item gets selected */\n onSelectMenuItem: PropTypes.func.description('callback after item gets selected'),\n /** Object with custom components for react-select */\n components: PropTypes.shape({}).description('Object with custom components for react-select'),\n /** search term to filter for */\n searchTerm: PropTypes.string.description('search term to filter for'),\n /** item options */\n items: PropTypes.array.description('item options'),\n /** options */\n dropdownFilterOptions: PropTypes.shape({}).description('options'),\n /** Whether the combo box is has value to return or not */\n returnValue: PropTypes.bool.description('Whether the combo box is has value to return or not'),\n /** extra props to pass down to combo */\n extraListProps: PropTypes.shape({}).description('extra props to pass down to combo'),\n /** append search term as item on the list */\n appendTermInList: PropTypes.bool.description('append search term as item on the list'),\n /** maxoptions for combobox */\n maxOptions: PropTypes.number.description('maxoptions for combobox'),\n /** loading flag */\n loading: PropTypes.bool.description('loading flag'),\n};\n\nSearchableList.propTypes = props;\n\nconst DSMenuSearchableListWithSchema = describe(SearchableList);\n\nDSMenuSearchableListWithSchema.propTypes = props;\n\nexport { DSMenuSearchableListWithSchema, SearchableList };\nexport default SearchableList;\n"],
|
|
5
|
+
"mappings": "AAAA;ACAA;AACA;AACA;AACA;AAEA,MAAM,OAAO,MAAM;AAAA;AAEnB,MAAM,iBAAiB,CAAC;AAAA,EACtB,mBAAmB;AAAA,EACnB,aAAa;AAAA,EACb,YAAY,iBAAiB;AAAA,EAC7B,QAAQ;AAAA,EACR,wBAAwB;AAAA,EACxB;AAAA,EACA,iBAAiB;AAAA,EACjB,mBAAmB;AAAA,EACnB,aAAa;AAAA,EACb,UAAU;AAAA,MACN;AACJ,QAAM,CAAC,YAAY,iBAAiB,SAAS;AAE7C,QAAM,oBAAoB,YACxB,CAAC,OAAO,SAAS;AACf,UAAM,SAAS,OAAO,KAAK,SAAS;AACpC,QAAI,WAAW,gBAAgB,WAAW;AAAc;AACxD,kBAAc;AAAA,KAEhB,CAAC;AAGH,QAAM,qBAAqB,YAAY,MAAM;AAC3C,QAAI;AAAY,uBAAiB;AAAA,KAChC,CAAC;AAEJ,QAAM,gBAAgB,YACpB,CAAC,MAAM;AACL,QAAI,EAAE,QAAQ,cAAc;AAC1B;AAAA;AAAA,KAGJ,CAAC;AAGH,QAAM,UAAU,QACd,MACE,cAAc,mBACV,OACE;AAAA,IACE;AAAA,MACE,IAAI;AAAA,MACJ,OAAO;AAAA;AAAA,IAET,OAAO,QACT,CAAC,SAAS,KAAK,SAEjB,OACN,CAAC,YAAY;AAGf,SACE,qCAAC,YAAD;AAAA,IACE,WAAS;AAAA,IACT,YAAY,EAAE,mBAAmB,SAAS;AAAA,IAC1C,uBAAuB;AAAA,MACrB,kBAAkB;AAAA;AAAA,IAEpB,YAAU;AAAA,IACV,YAAY;AAAA,IACZ,YAAU;AAAA,IACV,UAAU;AAAA,IACV,qBAAqB;AAAA,IACrB,eAAe;AAAA,IACf,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA,eAAc;AAAA,IACd;AAAA,IACA;AAAA,OACI;AAAA,OACA;AAAA;AAAA;AAKV,MAAM,QAAQ;AAAA,EAEZ,kBAAkB,UAAU,KAAK,YAAY;AAAA,EAE7C,YAAY,UAAU,MAAM,IAAI,YAAY;AAAA,EAE5C,YAAY,UAAU,OAAO,YAAY;AAAA,EAEzC,OAAO,UAAU,MAAM,YAAY;AAAA,EAEnC,uBAAuB,UAAU,MAAM,IAAI,YAAY;AAAA,EAEvD,aAAa,UAAU,KAAK,YAAY;AAAA,EAExC,gBAAgB,UAAU,MAAM,IAAI,YAAY;AAAA,EAEhD,kBAAkB,UAAU,KAAK,YAAY;AAAA,EAE7C,YAAY,UAAU,OAAO,YAAY;AAAA,EAEzC,SAAS,UAAU,KAAK,YAAY;AAAA;AAGtC,eAAe,YAAY;AAE3B,MAAM,iCAAiC,SAAS;AAEhD,+BAA+B,YAAY;AAG3C,IAAO,yBAAQ;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -1,45 +1,31 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
import
|
|
7
|
-
import
|
|
8
|
-
import 'core-js/modules/esnext.async-iterator.for-each.js';
|
|
9
|
-
import 'core-js/modules/esnext.iterator.for-each.js';
|
|
10
|
-
import { useMemo, createElement } from 'react';
|
|
11
|
-
import { PropTypes, describe } from 'react-desc';
|
|
12
|
-
import { useCheckableGroup } from '@elliemae/ds-shared/CheckableGroup';
|
|
13
|
-
import SearchableGroup from './SearchableGroup.js';
|
|
14
|
-
import { menuItemFactory } from './menuItemFactory.js';
|
|
15
|
-
import VirtualMenuList from '../VirtualMenuList.js';
|
|
16
|
-
|
|
17
|
-
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
18
|
-
|
|
19
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
20
|
-
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import React2, { useMemo } from "react";
|
|
3
|
+
import { PropTypes, describe } from "react-desc";
|
|
4
|
+
import { useCheckableGroup } from "@elliemae/ds-shared/CheckableGroup";
|
|
5
|
+
import { SearchableGroup } from "./SearchableGroup";
|
|
6
|
+
import { registerMenuItem, menuItemFactory } from "./menuItemFactory";
|
|
7
|
+
import { VirtualMenuList } from "../VirtualMenuList";
|
|
21
8
|
const noop = () => null;
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
return /*#__PURE__*/createElement(Component, _objectSpread(_objectSpread({}, item), {}, {
|
|
9
|
+
const SelectionGroup = ({
|
|
10
|
+
multi = false,
|
|
11
|
+
searchable = false,
|
|
12
|
+
focusOnOpen = false,
|
|
13
|
+
onSelect = noop,
|
|
14
|
+
children,
|
|
15
|
+
items = void 0,
|
|
16
|
+
active = multi ? [] : "",
|
|
17
|
+
width,
|
|
18
|
+
height,
|
|
19
|
+
maxOptions = 5
|
|
20
|
+
}) => {
|
|
21
|
+
const renderedItems = useMemo(() => items && items.map((item) => {
|
|
22
|
+
const Component = menuItemFactory(multi ? "checkbox" : "radio");
|
|
23
|
+
return /* @__PURE__ */ React2.createElement(Component, {
|
|
24
|
+
...item,
|
|
39
25
|
key: item.name || item.id || item.key,
|
|
40
|
-
item
|
|
26
|
+
item,
|
|
41
27
|
name: item.id || item.name
|
|
42
|
-
})
|
|
28
|
+
});
|
|
43
29
|
}), [items]);
|
|
44
30
|
const decoratedGroupChildren = useCheckableGroup({
|
|
45
31
|
children: renderedItems || children,
|
|
@@ -47,51 +33,41 @@ function SelectionGroup(_ref) {
|
|
|
47
33
|
active,
|
|
48
34
|
onCheck: onSelect
|
|
49
35
|
});
|
|
50
|
-
|
|
51
36
|
if (searchable) {
|
|
52
|
-
return
|
|
53
|
-
focusOnOpen
|
|
54
|
-
height
|
|
55
|
-
items
|
|
56
|
-
width
|
|
57
|
-
},
|
|
37
|
+
return /* @__PURE__ */ React2.createElement(SearchableGroup, {
|
|
38
|
+
focusOnOpen,
|
|
39
|
+
height,
|
|
40
|
+
items,
|
|
41
|
+
width
|
|
42
|
+
}, decoratedGroupChildren);
|
|
58
43
|
}
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
height: height,
|
|
44
|
+
return /* @__PURE__ */ React2.createElement(VirtualMenuList, {
|
|
45
|
+
height,
|
|
62
46
|
items: decoratedGroupChildren,
|
|
63
|
-
width
|
|
47
|
+
width,
|
|
64
48
|
amountItemsInWindow: maxOptions
|
|
65
49
|
});
|
|
66
|
-
}
|
|
67
|
-
|
|
50
|
+
};
|
|
68
51
|
const props = {
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
/** callback that triggers when select happens */
|
|
79
|
-
onSelect: PropTypes.func.description('callback that triggers when select happens'),
|
|
80
|
-
children: PropTypes.node.description(''),
|
|
81
|
-
|
|
82
|
-
/** selection group items */
|
|
83
|
-
items: PropTypes.array.description('selection group items'),
|
|
84
|
-
|
|
85
|
-
/** array of values for multi and string for single selection */
|
|
86
|
-
active: PropTypes.oneOfType([PropTypes.string, PropTypes.array]).description('array of values for multi and string for single selection'),
|
|
87
|
-
|
|
88
|
-
/** selection group width */
|
|
89
|
-
width: PropTypes.number.description('selection group width'),
|
|
90
|
-
|
|
91
|
-
/** selection group height */
|
|
92
|
-
height: PropTypes.number.description('selection group height')
|
|
52
|
+
multi: PropTypes.bool.description("toggle on multi select"),
|
|
53
|
+
searchable: PropTypes.bool.description("toggle on searchable behavior"),
|
|
54
|
+
focusOnOpen: PropTypes.bool.description("toggle to focus component on open"),
|
|
55
|
+
onSelect: PropTypes.func.description("callback that triggers when select happens"),
|
|
56
|
+
children: PropTypes.node.description(""),
|
|
57
|
+
items: PropTypes.array.description("selection group items"),
|
|
58
|
+
active: PropTypes.oneOfType([PropTypes.string, PropTypes.array]).description("array of values for multi and string for single selection"),
|
|
59
|
+
width: PropTypes.number.description("selection group width"),
|
|
60
|
+
height: PropTypes.number.description("selection group height")
|
|
93
61
|
};
|
|
62
|
+
SelectionGroup.propTypes = props;
|
|
63
|
+
registerMenuItem("selectiongroup", SelectionGroup);
|
|
64
|
+
registerMenuItem("SelectionGroup", SelectionGroup);
|
|
94
65
|
const DSMenuSelectionGroupWithSchema = describe(SelectionGroup);
|
|
95
66
|
DSMenuSelectionGroupWithSchema.propTypes = props;
|
|
96
|
-
|
|
97
|
-
export {
|
|
67
|
+
var SelectionGroup_default = SelectionGroup;
|
|
68
|
+
export {
|
|
69
|
+
DSMenuSelectionGroupWithSchema,
|
|
70
|
+
SelectionGroup,
|
|
71
|
+
SelectionGroup_default as default
|
|
72
|
+
};
|
|
73
|
+
//# sourceMappingURL=SelectionGroup.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/MenuItems/SelectionGroup.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useMemo } from 'react';\nimport { PropTypes, describe } from 'react-desc';\nimport { useCheckableGroup } from '@elliemae/ds-shared/CheckableGroup';\nimport { SearchableGroup } from './SearchableGroup';\nimport { registerMenuItem, menuItemFactory } from './menuItemFactory';\nimport { VirtualMenuList } from '../VirtualMenuList';\n\nconst noop = () => null;\n\nconst SelectionGroup = ({\n multi = false,\n searchable = false,\n focusOnOpen = false,\n onSelect = noop,\n children,\n items = undefined,\n active = multi ? [] : '',\n width,\n height,\n maxOptions = 5,\n}) => {\n const renderedItems = useMemo(\n () =>\n items &&\n items.map((item) => {\n const Component = menuItemFactory(multi ? 'checkbox' : 'radio');\n return <Component {...item} key={item.name || item.id || item.key} item={item} name={item.id || item.name} />;\n }),\n [items],\n );\n const decoratedGroupChildren = useCheckableGroup({\n children: renderedItems || children,\n multi,\n active,\n onCheck: onSelect,\n });\n\n if (searchable) {\n return (\n <SearchableGroup focusOnOpen={focusOnOpen} height={height} items={items} width={width}>\n {decoratedGroupChildren}\n </SearchableGroup>\n );\n }\n return (\n <VirtualMenuList height={height} items={decoratedGroupChildren} width={width} amountItemsInWindow={maxOptions} />\n );\n};\n\nconst props = {\n /** toggle on multi select */\n multi: PropTypes.bool.description('toggle on multi select'),\n /** toggle on searchable behavior */\n searchable: PropTypes.bool.description('toggle on searchable behavior'),\n /** toggle to focus component on open */\n focusOnOpen: PropTypes.bool.description('toggle to focus component on open'),\n /** callback that triggers when select happens */\n onSelect: PropTypes.func.description('callback that triggers when select happens'),\n children: PropTypes.node.description(''),\n /** selection group items */\n items: PropTypes.array.description('selection group items'),\n /** array of values for multi and string for single selection */\n active: PropTypes.oneOfType([PropTypes.string, PropTypes.array]).description(\n 'array of values for multi and string for single selection',\n ),\n /** selection group width */\n width: PropTypes.number.description('selection group width'),\n /** selection group height */\n height: PropTypes.number.description('selection group height'),\n};\n\nSelectionGroup.propTypes = props;\nregisterMenuItem('selectiongroup', SelectionGroup);\nregisterMenuItem('SelectionGroup', SelectionGroup);\n\nconst DSMenuSelectionGroupWithSchema = describe(SelectionGroup);\nDSMenuSelectionGroupWithSchema.propTypes = props;\n\nexport { DSMenuSelectionGroupWithSchema, SelectionGroup };\nexport default SelectionGroup;\n"],
|
|
5
|
+
"mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AAEA,MAAM,OAAO,MAAM;AAEnB,MAAM,iBAAiB,CAAC;AAAA,EACtB,QAAQ;AAAA,EACR,aAAa;AAAA,EACb,cAAc;AAAA,EACd,WAAW;AAAA,EACX;AAAA,EACA,QAAQ;AAAA,EACR,SAAS,QAAQ,KAAK;AAAA,EACtB;AAAA,EACA;AAAA,EACA,aAAa;AAAA,MACT;AACJ,QAAM,gBAAgB,QACpB,MACE,SACA,MAAM,IAAI,CAAC,SAAS;AAClB,UAAM,YAAY,gBAAgB,QAAQ,aAAa;AACvD,WAAO,qCAAC,WAAD;AAAA,SAAe;AAAA,MAAM,KAAK,KAAK,QAAQ,KAAK,MAAM,KAAK;AAAA,MAAK;AAAA,MAAY,MAAM,KAAK,MAAM,KAAK;AAAA;AAAA,MAEzG,CAAC;AAEH,QAAM,yBAAyB,kBAAkB;AAAA,IAC/C,UAAU,iBAAiB;AAAA,IAC3B;AAAA,IACA;AAAA,IACA,SAAS;AAAA;AAGX,MAAI,YAAY;AACd,WACE,qCAAC,iBAAD;AAAA,MAAiB;AAAA,MAA0B;AAAA,MAAgB;AAAA,MAAc;AAAA,OACtE;AAAA;AAIP,SACE,qCAAC,iBAAD;AAAA,IAAiB;AAAA,IAAgB,OAAO;AAAA,IAAwB;AAAA,IAAc,qBAAqB;AAAA;AAAA;AAIvG,MAAM,QAAQ;AAAA,EAEZ,OAAO,UAAU,KAAK,YAAY;AAAA,EAElC,YAAY,UAAU,KAAK,YAAY;AAAA,EAEvC,aAAa,UAAU,KAAK,YAAY;AAAA,EAExC,UAAU,UAAU,KAAK,YAAY;AAAA,EACrC,UAAU,UAAU,KAAK,YAAY;AAAA,EAErC,OAAO,UAAU,MAAM,YAAY;AAAA,EAEnC,QAAQ,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,QAAQ,YAC/D;AAAA,EAGF,OAAO,UAAU,OAAO,YAAY;AAAA,EAEpC,QAAQ,UAAU,OAAO,YAAY;AAAA;AAGvC,eAAe,YAAY;AAC3B,iBAAiB,kBAAkB;AACnC,iBAAiB,kBAAkB;AAEnC,MAAM,iCAAiC,SAAS;AAChD,+BAA+B,YAAY;AAG3C,IAAO,yBAAQ;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -1,33 +1,30 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import {
|
|
4
|
-
import { aggregatedClasses } from
|
|
5
|
-
import DSSeparator from
|
|
6
|
-
import styled from
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
const
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
const MenuSeparator =
|
|
16
|
-
let {
|
|
17
|
-
title,
|
|
18
|
-
showSeparator = true
|
|
19
|
-
} = _ref;
|
|
20
|
-
return /*#__PURE__*/_jsx(Li, {}, void 0, showSeparator && (_DSSeparator || (_DSSeparator = /*#__PURE__*/_jsx(DSSeparator, {}))), title && /*#__PURE__*/_jsx(Title, {}, void 0, title));
|
|
21
|
-
};
|
|
22
|
-
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import React2 from "react";
|
|
3
|
+
import { describe, PropTypes } from "react-desc";
|
|
4
|
+
import { aggregatedClasses } from "@elliemae/ds-classnames";
|
|
5
|
+
import { DSSeparator } from "@elliemae/ds-separator";
|
|
6
|
+
import styled from "styled-components";
|
|
7
|
+
import { registerMenuItem } from "./menuItemFactory";
|
|
8
|
+
const blockName = "menu-separator";
|
|
9
|
+
const Li = styled.li`
|
|
10
|
+
display: flex;
|
|
11
|
+
align-items: flex-start;
|
|
12
|
+
flex-direction: column;
|
|
13
|
+
`;
|
|
14
|
+
const Title = aggregatedClasses("h5")(blockName, "title");
|
|
15
|
+
const MenuSeparator = ({ title, showSeparator = true }) => /* @__PURE__ */ React2.createElement(Li, null, showSeparator && /* @__PURE__ */ React2.createElement(DSSeparator, null), title && /* @__PURE__ */ React2.createElement(Title, null, title));
|
|
23
16
|
const props = {
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
/** toggle separator on and off */
|
|
28
|
-
showSeparator: PropTypes.bool.description('toggle separator on and off')
|
|
17
|
+
title: PropTypes.string.description("menu separator h5 title"),
|
|
18
|
+
showSeparator: PropTypes.bool.description("toggle separator on and off")
|
|
29
19
|
};
|
|
20
|
+
MenuSeparator.propTypes = props;
|
|
21
|
+
registerMenuItem("separator", MenuSeparator);
|
|
30
22
|
const DSMenuSeparatorWithSchema = describe(MenuSeparator);
|
|
31
23
|
DSMenuSeparatorWithSchema.propTypes = props;
|
|
32
|
-
|
|
33
|
-
export {
|
|
24
|
+
var Separator_default = MenuSeparator;
|
|
25
|
+
export {
|
|
26
|
+
DSMenuSeparatorWithSchema,
|
|
27
|
+
MenuSeparator,
|
|
28
|
+
Separator_default as default
|
|
29
|
+
};
|
|
30
|
+
//# sourceMappingURL=Separator.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/MenuItems/Separator.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { describe, PropTypes } from 'react-desc';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport { DSSeparator } from '@elliemae/ds-separator';\nimport styled from 'styled-components';\nimport { registerMenuItem } from './menuItemFactory';\n\nconst blockName = 'menu-separator';\nconst Li = styled.li`\n display: flex;\n align-items: flex-start;\n flex-direction: column;\n`;\n\nconst Title = aggregatedClasses('h5')(blockName, 'title');\nconst MenuSeparator = ({ title, showSeparator = true }) => (\n <Li>\n {showSeparator && <DSSeparator />}\n {title && <Title>{title}</Title>}\n </Li>\n);\n\nconst props = {\n /** menu separator h5 title */\n title: PropTypes.string.description('menu separator h5 title'),\n /** toggle separator on and off */\n showSeparator: PropTypes.bool.description('toggle separator on and off'),\n};\n\nMenuSeparator.propTypes = props;\nregisterMenuItem('separator', MenuSeparator);\n\nconst DSMenuSeparatorWithSchema = describe(MenuSeparator);\nDSMenuSeparatorWithSchema.propTypes = props;\n\nexport { DSMenuSeparatorWithSchema, MenuSeparator };\nexport default MenuSeparator;\n"],
|
|
5
|
+
"mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AAEA,MAAM,YAAY;AAClB,MAAM,KAAK,OAAO;AAAA;AAAA;AAAA;AAAA;AAMlB,MAAM,QAAQ,kBAAkB,MAAM,WAAW;AACjD,MAAM,gBAAgB,CAAC,EAAE,OAAO,gBAAgB,WAC9C,qCAAC,IAAD,MACG,iBAAiB,qCAAC,aAAD,OACjB,SAAS,qCAAC,OAAD,MAAQ;AAItB,MAAM,QAAQ;AAAA,EAEZ,OAAO,UAAU,OAAO,YAAY;AAAA,EAEpC,eAAe,UAAU,KAAK,YAAY;AAAA;AAG5C,cAAc,YAAY;AAC1B,iBAAiB,aAAa;AAE9B,MAAM,4BAA4B,SAAS;AAC3C,0BAA0B,YAAY;AAGtC,IAAO,oBAAQ;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|