oolib 2.227.8 → 2.227.9
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/dist/v2/components/Dropdowns/DropdownMulti/index.d.ts +2 -1
- package/dist/v2/components/Dropdowns/DropdownMulti/index.js +11 -9
- package/dist/v2/components/Dropdowns/comps/OptionsMulti/index.d.ts +2 -1
- package/dist/v2/components/Dropdowns/comps/OptionsMulti/index.js +2 -2
- package/package.json +1 -1
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export function DropdownMulti({ saveValueAsString, value: valueProp, id, onChange: parentOnChange, className, readOnly, selectClassName, optionsClassName, selectStyleOverride, optionsFn, options: optionsProp, isTagsStyle, isSearchable, searchFieldsConfig, setFilteredOptions: setFilteredOptionsInParent, setSearchString: setSearchStringInParent, searchString: searchStringInParent, label, optionsModalLabel, genCreateTagButton, placeholder, genCustomSelectComp, disableSelectTextUpdate, selectConfig, lightboxHeight, lightboxStyle, optionsAnchor, popOutOfOverflowHiddenParent, S, disabled, broadcastShowOptions, tagColor, searchbarPlaceholder, alignDropdown, variant, matchSelectInputWidth }: {
|
|
1
|
+
export function DropdownMulti({ saveValueAsString, value: valueProp, id, onChange: parentOnChange, className, readOnly, selectClassName, optionsClassName, selectStyleOverride, optionsFn, options: optionsProp, isTagsStyle, isSearchable, searchFieldsConfig, setFilteredOptions: setFilteredOptionsInParent, setSearchString: setSearchStringInParent, searchString: searchStringInParent, label, optionsModalLabel, genCreateTagButton, placeholder, genCustomSelectComp, disableSelectTextUpdate, selectConfig, lightboxHeight, lightboxStyle, optionsAnchor, popOutOfOverflowHiddenParent, S, disabled, broadcastShowOptions, tagColor, searchbarPlaceholder, alignDropdown, variant, matchSelectInputWidth, observerRef }: {
|
|
2
2
|
saveValueAsString: any;
|
|
3
3
|
value: any;
|
|
4
4
|
id: any;
|
|
@@ -35,5 +35,6 @@ export function DropdownMulti({ saveValueAsString, value: valueProp, id, onChang
|
|
|
35
35
|
alignDropdown?: string;
|
|
36
36
|
variant?: string;
|
|
37
37
|
matchSelectInputWidth?: boolean;
|
|
38
|
+
observerRef: any;
|
|
38
39
|
}, ...args: any[]): React.JSX.Element;
|
|
39
40
|
import React from "react";
|
|
@@ -74,7 +74,7 @@ function DropdownMulti(_a) {
|
|
|
74
74
|
optionsClassName = _a.optionsClassName, //used to override font size in priimary header
|
|
75
75
|
selectStyleOverride = _a.selectStyleOverride, optionsFn = _a.optionsFn, optionsProp = _a.options, isTagsStyle = _a.isTagsStyle, isSearchable = _a.isSearchable, searchFieldsConfig = _a.searchFieldsConfig, setFilteredOptionsInParent = _a.setFilteredOptions, setSearchStringInParent = _a.setSearchString, searchStringInParent = _a.searchString, label = _a.label, optionsModalLabel = _a.optionsModalLabel, genCreateTagButton = _a.genCreateTagButton, placeholder = _a.placeholder, genCustomSelectComp = _a.genCustomSelectComp, disableSelectTextUpdate = _a.disableSelectTextUpdate, selectConfig = _a.selectConfig,
|
|
76
76
|
//props whose existence needs to be questioned:
|
|
77
|
-
lightboxHeight = _a.lightboxHeight, lightboxStyle = _a.lightboxStyle, optionsAnchor = _a.optionsAnchor, popOutOfOverflowHiddenParent = _a.popOutOfOverflowHiddenParent, S = _a.S, disabled = _a.disabled, broadcastShowOptions = _a.broadcastShowOptions, tagColor = _a.tagColor, searchbarPlaceholder = _a.searchbarPlaceholder, _b = _a.alignDropdown, alignDropdown = _b === void 0 ? "left" : _b, _c = _a.variant, variant = _c === void 0 ? "default" : _c, _d = _a.matchSelectInputWidth, matchSelectInputWidth = _d === void 0 ? false : _d;
|
|
77
|
+
lightboxHeight = _a.lightboxHeight, lightboxStyle = _a.lightboxStyle, optionsAnchor = _a.optionsAnchor, popOutOfOverflowHiddenParent = _a.popOutOfOverflowHiddenParent, S = _a.S, disabled = _a.disabled, broadcastShowOptions = _a.broadcastShowOptions, tagColor = _a.tagColor, searchbarPlaceholder = _a.searchbarPlaceholder, _b = _a.alignDropdown, alignDropdown = _b === void 0 ? "left" : _b, _c = _a.variant, variant = _c === void 0 ? "default" : _c, _d = _a.matchSelectInputWidth, matchSelectInputWidth = _d === void 0 ? false : _d, observerRef = _a.observerRef;
|
|
78
78
|
var theme = (0, styled_components_1.useTheme)();
|
|
79
79
|
var props = arguments[0];
|
|
80
80
|
var value = (0, getValue_1.getValue_MULTI)({ valueProp: valueProp, optionsFn: optionsFn, options: optionsProp, theme: theme, saveValueAsString: saveValueAsString });
|
|
@@ -127,15 +127,17 @@ function DropdownMulti(_a) {
|
|
|
127
127
|
options = (0, react_1.useMemo)(function () {
|
|
128
128
|
return (!isSearchable && !isTagsStyle)
|
|
129
129
|
? options
|
|
130
|
-
:
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
130
|
+
: !!observerRef === true //if this exists that means search is being handled on the backend via elastic search
|
|
131
|
+
? options
|
|
132
|
+
: (0, keywordSearchOptions_1.keywordSearchOptions)({
|
|
133
|
+
options: options,
|
|
134
|
+
searchString: searchString,
|
|
135
|
+
searchFieldsConfig: searchFieldsConfig,
|
|
136
|
+
setFilteredOptionsInParent: setFilteredOptionsInParent,
|
|
137
|
+
});
|
|
136
138
|
}, [
|
|
137
139
|
searchString,
|
|
138
|
-
// showOptions,
|
|
140
|
+
// showOptions,
|
|
139
141
|
optionsFn === null || optionsFn === void 0 ? void 0 : optionsFn.fn,
|
|
140
142
|
optionsFn === null || optionsFn === void 0 ? void 0 : optionsFn.args,
|
|
141
143
|
options,
|
|
@@ -192,7 +194,7 @@ function DropdownMulti(_a) {
|
|
|
192
194
|
? !showOptions && handleShowOptions() //if tagsStyle, then click always shows options
|
|
193
195
|
: showOptions ? handleHideOptions() : handleShowOptions(); //if dropdowns, then click toggles show/hide
|
|
194
196
|
} }, isTagsStyle ? genSelectTagsInput() : (react_1.default.createElement(SelectDropdown_1.SelectDropdown, { value: value, placeholder: placeholder, selectClassName: selectClassName, selectStyleOverride: selectStyleOverride, showOptions: showOptions, genCustomSelectComp: genCustomSelectComp, disableSelectTextUpdate: disableSelectTextUpdate, selectConfig: selectConfig, S: S, disabled: disabled, variant: variant }))),
|
|
195
|
-
react_1.default.createElement(OptionsMulti_1.OptionsMulti, { parentOnChange: parentOnChange, id: id, value: value, relativeToRef: selectRef, showOptions: showOptions, handleSelect: handleSelect, handleHideOptions: handleHideOptions, optionsClassName: optionsClassName, options: options, optionsFn: optionsFn, label: label, optionsModalLabel: optionsModalLabel, isTagsStyle: isTagsStyle, genCreateTagButton: genCreateTagButton, lightboxHeight: lightboxHeight, lightboxStyle: lightboxStyle, optionsAnchor: optionsAnchor, SelectComp: isTagsStyle && genSelectTagsInput({ style: { position: 'sticky', top: 0, zIndex: 1000 } }), setFocusSelectTagsInput: setFocusSelectTagsInput, popOutOfOverflowHiddenParent: popOutOfOverflowHiddenParent, S: S, alignDropdown: alignDropdown, matchSelectInputWidth: matchSelectInputWidth, searchbarPlaceholder: searchbarPlaceholder, isSearchable: isTagsStyle ? false : isSearchable, searchString: searchString, setSearchString: setSearchString })));
|
|
197
|
+
react_1.default.createElement(OptionsMulti_1.OptionsMulti, { parentOnChange: parentOnChange, id: id, value: value, relativeToRef: selectRef, showOptions: showOptions, handleSelect: handleSelect, handleHideOptions: handleHideOptions, optionsClassName: optionsClassName, options: options, optionsFn: optionsFn, label: label, optionsModalLabel: optionsModalLabel, isTagsStyle: isTagsStyle, genCreateTagButton: genCreateTagButton, lightboxHeight: lightboxHeight, lightboxStyle: lightboxStyle, optionsAnchor: optionsAnchor, SelectComp: isTagsStyle && genSelectTagsInput({ style: { position: 'sticky', top: 0, zIndex: 1000 } }), setFocusSelectTagsInput: setFocusSelectTagsInput, popOutOfOverflowHiddenParent: popOutOfOverflowHiddenParent, S: S, alignDropdown: alignDropdown, matchSelectInputWidth: matchSelectInputWidth, observerRef: observerRef, searchbarPlaceholder: searchbarPlaceholder, isSearchable: isTagsStyle ? false : isSearchable, searchString: searchString, setSearchString: setSearchString })));
|
|
196
198
|
};
|
|
197
199
|
return (react_1.default.createElement("div", { className: "OKE-Dropdown ".concat(className, " OKE-Dropdown--").concat(readOnly ? "displayComp" : "inputComp") },
|
|
198
200
|
react_1.default.createElement(BlockLabel_1.BlockLabel, __assign({}, (0, getBlockLabelProps_1.getBlockLabelProps)(props))),
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export function OptionsMulti({ lightboxHeight, lightboxStyle, optionsAnchor, value, id, optionsClassName, relativeToRef, showOptions, handleHideOptions, handleSelect, options, parentOnChange, isSearchable, label, optionsModalLabel, searchString, setSearchString, SelectComp, isTagsStyle, genCreateTagButton, setFocusSelectTagsInput, popOutOfOverflowHiddenParent, S, searchbarPlaceholder, alignDropdown, matchSelectInputWidth }: {
|
|
1
|
+
export function OptionsMulti({ lightboxHeight, lightboxStyle, optionsAnchor, value, id, optionsClassName, relativeToRef, showOptions, handleHideOptions, handleSelect, options, parentOnChange, isSearchable, label, optionsModalLabel, searchString, setSearchString, SelectComp, isTagsStyle, genCreateTagButton, setFocusSelectTagsInput, popOutOfOverflowHiddenParent, S, observerRef, searchbarPlaceholder, alignDropdown, matchSelectInputWidth }: {
|
|
2
2
|
lightboxHeight: any;
|
|
3
3
|
lightboxStyle: any;
|
|
4
4
|
optionsAnchor: any;
|
|
@@ -22,6 +22,7 @@ export function OptionsMulti({ lightboxHeight, lightboxStyle, optionsAnchor, val
|
|
|
22
22
|
setFocusSelectTagsInput: any;
|
|
23
23
|
popOutOfOverflowHiddenParent: any;
|
|
24
24
|
S: any;
|
|
25
|
+
observerRef: any;
|
|
25
26
|
searchbarPlaceholder: any;
|
|
26
27
|
alignDropdown: any;
|
|
27
28
|
matchSelectInputWidth: any;
|
|
@@ -48,7 +48,7 @@ var OptionsMulti = function (_a) {
|
|
|
48
48
|
relativeToRef = _a.relativeToRef, //the element that this lightbox is being rendered against. i.e top or bottom
|
|
49
49
|
showOptions = _a.showOptions, handleHideOptions = _a.handleHideOptions, handleSelect = _a.handleSelect, options = _a.options, parentOnChange = _a.parentOnChange, isSearchable = _a.isSearchable, label = _a.label, optionsModalLabel = _a.optionsModalLabel, //label is just a fallback for optionsModalLabel. Don't know why both are needed
|
|
50
50
|
searchString = _a.searchString, setSearchString = _a.setSearchString, SelectComp = _a.SelectComp, // for mobile
|
|
51
|
-
isTagsStyle = _a.isTagsStyle, genCreateTagButton = _a.genCreateTagButton, setFocusSelectTagsInput = _a.setFocusSelectTagsInput, popOutOfOverflowHiddenParent = _a.popOutOfOverflowHiddenParent, S = _a.S, searchbarPlaceholder = _a.searchbarPlaceholder, alignDropdown = _a.alignDropdown, matchSelectInputWidth = _a.matchSelectInputWidth;
|
|
51
|
+
isTagsStyle = _a.isTagsStyle, genCreateTagButton = _a.genCreateTagButton, setFocusSelectTagsInput = _a.setFocusSelectTagsInput, popOutOfOverflowHiddenParent = _a.popOutOfOverflowHiddenParent, S = _a.S, observerRef = _a.observerRef, searchbarPlaceholder = _a.searchbarPlaceholder, alignDropdown = _a.alignDropdown, matchSelectInputWidth = _a.matchSelectInputWidth;
|
|
52
52
|
//INIT ORIENTATION STATE AND CUSTOM HOOK
|
|
53
53
|
var optionsRef = (0, react_1.useRef)(null);
|
|
54
54
|
var yOrientation = (0, useSetYOrientation_1.useSetYOrientation)({
|
|
@@ -107,7 +107,7 @@ var OptionsMulti = function (_a) {
|
|
|
107
107
|
return (react_1.default.createElement(OptionsShell_1.OptionsShell, { ref: optionsRef, yOrientation: yOrientation, lightboxHeight: lightboxHeight, lightboxStyle: lightboxStyle, options: options, optionsAnchor: optionsAnchor, showOptions: showOptions, handleHideOptions: handleHideOptions, SelectComp: SelectComp, label: label, optionsModalLabel: optionsModalLabel, showDoneButton: true, popOutOfOverflowHiddenParent: popOutOfOverflowHiddenParent, relativeToRef: relativeToRef, S: S, alignDropdown: alignDropdown, matchSelectInputWidth: matchSelectInputWidth },
|
|
108
108
|
react_1.default.createElement(List_1.List, { options: options, value: value, focussedOp: focussedOp, scrollFocussedOpIntoView: scrollFocussedOpIntoView, onChange: function (id, v) {
|
|
109
109
|
handleSelect(v);
|
|
110
|
-
}, optionsClassName: optionsClassName, S: S, isMulti: true, disableShadow: true, isSearchable: isSearchable, searchbarPlaceholder: searchbarPlaceholder, searchBarFocus: searchBarFocus, searchString: searchString, setSearchString: setSearchString, setSearchBarFocus: setSearchBarFocus, children: !isTagsStyle && createSelectedOptions(), showList: showOptions, usedIn: "dropdown" }),
|
|
110
|
+
}, optionsClassName: optionsClassName, S: S, observerRef: observerRef, isMulti: true, disableShadow: true, isSearchable: isSearchable, searchbarPlaceholder: searchbarPlaceholder, searchBarFocus: searchBarFocus, searchString: searchString, setSearchString: setSearchString, setSearchBarFocus: setSearchBarFocus, children: !isTagsStyle && createSelectedOptions(), showList: showOptions, usedIn: "dropdown" }),
|
|
111
111
|
genCreateTagButton && genCreateTagButton(options)));
|
|
112
112
|
};
|
|
113
113
|
exports.OptionsMulti = OptionsMulti;
|