Skip to content

Commit 9556e3f

Browse files
gjulivangjulivan
committed
fix: code fixing and cleanup
1 parent 2aac582 commit 9556e3f

6 files changed

Lines changed: 36 additions & 59 deletions

File tree

‎packages/pluggableWidgets/combobox-web/src/components/MultiSelection/MultiSelection.tsx‎

Lines changed: 8 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -16,11 +16,7 @@ export function MultiSelection({
1616
a11yConfig,
1717
menuFooterContent,
1818
ariaRequired,
19-
labelId,
20-
inputId,
21-
ariaLabel,
22-
readOnlyStyle,
23-
noOptionsText
19+
...options
2420
}: SelectionBaseProps<MultiSelector>): ReactElement {
2521
const {
2622
isOpen,
@@ -37,11 +33,11 @@ export function MultiSelection({
3733
items,
3834
setSelectedItems,
3935
toggleSelectedItem
40-
} = useDownshiftMultiSelectProps(selector, { inputId, labelId }, a11yConfig.a11yStatusMessage);
36+
} = useDownshiftMultiSelectProps(selector, options, a11yConfig.a11yStatusMessage);
4137
const inputRef = useRef<HTMLInputElement>(null);
4238
const isSelectedItemsBoxStyle = selector.selectedItemsStyle === "boxes";
4339
const isOptionsSelected = selector.isOptionsSelected();
44-
const inputLabel = getInputLabel(inputId);
40+
const inputLabel = getInputLabel(options.inputId);
4541
const hasLabel = useMemo(() => Boolean(inputLabel), [inputLabel]);
4642
const inputProps = getInputProps({
4743
...getDropdownProps(
@@ -69,7 +65,7 @@ export function MultiSelection({
6965
disabled: selector.readOnly,
7066
readOnly: selector.options.filterType === "none",
7167
"aria-required": ariaRequired.value,
72-
"aria-label": !hasLabel && ariaLabel ? ariaLabel : undefined
68+
"aria-label": !hasLabel && options.ariaLabel ? options.ariaLabel : undefined
7369
});
7470

7571
const memoizedselectedCaptions = useMemo(
@@ -95,7 +91,7 @@ export function MultiSelection({
9591
<ComboboxWrapper
9692
isOpen={isOpen}
9793
readOnly={selector.readOnly}
98-
readOnlyStyle={readOnlyStyle}
94+
readOnlyStyle={options.readOnlyStyle}
9995
getToggleButtonProps={getToggleButtonProps}
10096
validation={selector.validation}
10197
isLoading={lazyLoading && selector.options.isLoading}
@@ -172,7 +168,7 @@ export function MultiSelection({
172168
<SelectAllButton
173169
disabled={items.length === 0}
174170
value={isOptionsSelected}
175-
id={`${inputId}-select-all-button`}
171+
id={`${options.inputId}-select-all-button`}
176172
ariaLabel={a11yConfig.ariaLabels.selectAll}
177173
onChange={() => {
178174
if (isOptionsSelected === "all") {
@@ -185,15 +181,15 @@ export function MultiSelection({
185181
) : undefined
186182
}
187183
menuFooterContent={menuFooterContent}
188-
inputId={inputId}
184+
inputId={options.inputId}
189185
selector={selector}
190186
isOpen={isOpen}
191187
highlightedIndex={highlightedIndex}
192188
selectableItems={items}
193189
getItemProps={getItemProps}
194190
getMenuProps={getMenuProps}
195191
selectedItems={selectedItems}
196-
noOptionsText={noOptionsText}
192+
noOptionsText={options.noOptionsText}
197193
onOptionClick={() => {
198194
inputRef.current?.focus();
199195
}}

‎packages/pluggableWidgets/combobox-web/src/components/SingleSelection/SingleSelection.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ export function SingleSelection({
2727
reset,
2828
isOpen,
2929
highlightedIndex
30-
} = useDownshiftSingleSelectProps(selector, { ...options }, a11yConfig.a11yStatusMessage);
30+
} = useDownshiftSingleSelectProps(selector, options, a11yConfig.a11yStatusMessage);
3131
const inputRef = useRef<HTMLInputElement>(null);
3232
const lazyLoading = selector.lazyLoading ?? false;
3333
const { onScroll } = useLazyLoading({

‎packages/pluggableWidgets/combobox-web/src/helpers/types.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,7 @@ interface SelectorBase<T, V> {
7979

8080
onEnterEvent?: () => void;
8181
onLeaveEvent?: () => void;
82-
onFilterInputChange?: (filterValue: string) => void;
82+
onFilterInputChange?: (filterValue?: string) => void;
8383
}
8484

8585
export interface SingleSelector extends SelectorBase<"single", string> {}

‎packages/pluggableWidgets/combobox-web/src/hooks/useDownshiftMultiSelectProps.ts‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import {
33
UseComboboxReturnValue,
44
UseComboboxState,
55
UseComboboxStateChangeOptions,
6+
UseComboboxStateChangeTypes,
67
UseMultipleSelectionReturnValue,
78
useCombobox,
89
useMultipleSelection
@@ -151,12 +152,7 @@ function useComboboxProps(
151152
onInputValueChange({ inputValue, type }) {
152153
selector.options.setSearchTerm(inputValue!);
153154

154-
if (
155-
selector.onFilterInputChange &&
156-
type?.includes("input_change") &&
157-
inputValue &&
158-
inputValue.trim()?.length > 0
159-
) {
155+
if (selector.onFilterInputChange && type === UseComboboxStateChangeTypes.InputChange) {
160156
selector.onFilterInputChange(inputValue);
161157
}
162158
},

‎packages/pluggableWidgets/combobox-web/src/hooks/useDownshiftSingleSelectProps.ts‎

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import {
44
UseComboboxState,
55
UseComboboxStateChange,
66
UseComboboxStateChangeOptions,
7+
UseComboboxStateChangeTypes,
78
useCombobox
89
} from "downshift";
910

@@ -32,13 +33,7 @@ export function useDownshiftSingleSelectProps(
3233
onInputValueChange({ inputValue, type }) {
3334
selector.options.setSearchTerm(inputValue!);
3435

35-
if (
36-
selector.onFilterInputChange &&
37-
type &&
38-
(type === "__input_change__" || type?.includes("input_change")) &&
39-
inputValue &&
40-
inputValue.trim().length > 0
41-
) {
36+
if (selector.onFilterInputChange && type === UseComboboxStateChangeTypes.InputChange) {
4237
selector.onFilterInputChange(inputValue!);
4338
}
4439
},

‎packages/pluggableWidgets/combobox-web/src/hooks/useGetSelector.ts‎

Lines changed: 22 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,40 @@
1-
import { useRef, useState, useCallback } from "react";
1+
import { debounce } from "@mendix/widget-plugin-platform/utils/debounce";
2+
import { useMemo, useRef, useState } from "react";
23
import { ComboboxContainerProps } from "../../typings/ComboboxProps";
34
import { getSelector } from "../helpers/getSelector";
45
import { Selector } from "../helpers/types";
56

7+
function onInputValueChange(
8+
onChangeFilterInputEvent: ComboboxContainerProps["onChangeFilterInputEvent"],
9+
filterValue?: string
10+
): void {
11+
if (!onChangeFilterInputEvent) {
12+
return;
13+
}
14+
if (onChangeFilterInputEvent.canExecute && !onChangeFilterInputEvent.isExecuting) {
15+
onChangeFilterInputEvent.execute({
16+
filterInput: filterValue
17+
});
18+
}
19+
}
20+
621
export function useGetSelector(props: ComboboxContainerProps): Selector {
722
const selectorRef = useRef<Selector | undefined>(undefined);
823
const [, setInput] = useState({});
9-
const debounceTimeoutRef = useRef<NodeJS.Timeout>();
10-
const lastExecutedValueRef = useRef<string>("");
11-
12-
const onFilterInputChange = useCallback(
13-
(filterValue: string) => {
14-
if (!props.onChangeFilterInputEvent) {
15-
return;
16-
}
17-
18-
if (lastExecutedValueRef.current === filterValue) {
19-
return;
20-
}
21-
22-
if (debounceTimeoutRef.current) {
23-
clearTimeout(debounceTimeoutRef.current);
24-
}
25-
26-
debounceTimeoutRef.current = setTimeout(() => {
27-
lastExecutedValueRef.current = filterValue;
28-
try {
29-
if (props.onChangeFilterInputEvent?.canExecute && !props.onChangeFilterInputEvent?.isExecuting) {
30-
props.onChangeFilterInputEvent.execute({
31-
filterInput: filterValue
32-
});
33-
}
34-
} catch (error) {
35-
console.error("Error executing onChangeFilterInputEvent:", error);
36-
}
37-
}, 300);
38-
},
24+
const [onFilterChangeDebounce] = useMemo(
25+
() =>
26+
debounce((filterValue?: string) => {
27+
onInputValueChange(props.onChangeFilterInputEvent, filterValue);
28+
}, 200),
3929
[props.onChangeFilterInputEvent]
4030
);
4131

4232
if (!selectorRef.current) {
4333
selectorRef.current = getSelector(props);
4434
selectorRef.current.options.onAfterSearchTermChange(() => setInput({}));
4535
}
36+
selectorRef.current.onFilterInputChange = onFilterChangeDebounce;
4637
selectorRef.current.updateProps(props);
47-
selectorRef.current.onFilterInputChange = onFilterInputChange;
4838

4939
return selectorRef.current;
5040
}

0 commit comments

Comments
 (0)