Skip to content

Commit c5a9200

Browse files
francoischalifourfrancoischalifour
committed
refactor(core): document and order props
1 parent 5cfbdf2 commit c5a9200

File tree

6 files changed

+101
-271
lines changed

6 files changed

+101
-271
lines changed

‎packages/autocomplete-core/src/createAutocomplete.ts‎

Lines changed: 14 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -26,62 +26,29 @@ export function createAutocomplete<
2626
const props = getDefaultProps(options, subscribers);
2727
const store = createStore(stateReducer, props);
2828

29-
const {
30-
setSelectedItemId,
31-
setQuery,
32-
setCollections,
33-
setIsOpen,
34-
setStatus,
35-
setContext,
36-
} = getAutocompleteSetters({ store });
37-
const {
38-
getEnvironmentProps,
39-
getRootProps,
40-
getFormProps,
41-
getLabelProps,
42-
getInputProps,
43-
getPanelProps,
44-
getListProps,
45-
getItemProps,
46-
} = getPropGetters<TItem, TEvent, TMouseEvent, TKeyboardEvent>({
47-
store,
48-
props,
49-
setSelectedItemId,
50-
setQuery,
51-
setCollections,
52-
setIsOpen,
53-
setStatus,
54-
setContext,
55-
refresh,
56-
});
29+
const setters = getAutocompleteSetters({ store });
30+
const propGetters = getPropGetters<
31+
TItem,
32+
TEvent,
33+
TMouseEvent,
34+
TKeyboardEvent
35+
>({ props, refresh, store, ...setters });
5736

5837
function refresh() {
5938
return onInput({
60-
query: store.getState().query,
6139
event: new Event('input'),
62-
store,
40+
nextState: { isOpen: store.getState().isOpen },
6341
props,
64-
setSelectedItemId,
65-
setQuery,
66-
setCollections,
67-
setIsOpen,
68-
setStatus,
69-
setContext,
70-
nextState: {
71-
isOpen: store.getState().isOpen,
72-
},
42+
query: store.getState().query,
7343
refresh,
44+
store,
45+
...setters,
7446
});
7547
}
7648

7749
props.plugins.forEach((plugin) =>
7850
plugin.subscribe?.({
79-
setSelectedItemId,
80-
setQuery,
81-
setCollections,
82-
setIsOpen,
83-
setStatus,
84-
setContext,
51+
...setters,
8552
onSelect(fn) {
8653
subscribers.push({ onSelect: fn });
8754
},
@@ -92,20 +59,8 @@ export function createAutocomplete<
9259
);
9360

9461
return {
95-
setSelectedItemId,
96-
setQuery,
97-
setCollections,
98-
setIsOpen,
99-
setStatus,
100-
setContext,
101-
getEnvironmentProps,
102-
getRootProps,
103-
getFormProps,
104-
getInputProps,
105-
getLabelProps,
106-
getPanelProps,
107-
getListProps,
108-
getItemProps,
10962
refresh,
63+
...propGetters,
64+
...setters,
11065
};
11166
}

‎packages/autocomplete-core/src/getDefaultProps.ts‎

Lines changed: 8 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import {
1313

1414
export function getDefaultProps<TItem extends BaseItem>(
1515
props: AutocompleteOptions<TItem>,
16-
subscribers: AutocompleteSubscribers<TItem>
16+
pluginSubscribers: AutocompleteSubscribers<TItem>
1717
): InternalAutocompleteOptions<TItem> {
1818
const environment: InternalAutocompleteOptions<TItem>['environment'] = (typeof window !==
1919
'undefined'
@@ -34,6 +34,7 @@ export function getDefaultProps<TItem extends BaseItem>(
3434
// Since `generateAutocompleteId` triggers a side effect (it increments
3535
// and internal counter), we don't want to execute it if unnecessary.
3636
id: props.id ?? generateAutocompleteId(),
37+
plugins,
3738
// The following props need to be deeply defaulted.
3839
initialState: {
3940
selectedItemId: null,
@@ -45,24 +46,17 @@ export function getDefaultProps<TItem extends BaseItem>(
4546
context: {},
4647
...props.initialState,
4748
},
48-
plugins,
4949
onStateChange(params) {
5050
props.onStateChange?.(params);
51-
plugins.forEach((plugin) => {
52-
plugin.onStateChange?.(params);
53-
});
51+
plugins.forEach((x) => x.onStateChange?.(params));
5452
},
5553
onSubmit(params) {
5654
props.onSubmit?.(params);
57-
plugins.forEach((plugin) => {
58-
plugin.onSubmit?.(params);
59-
});
55+
plugins.forEach((x) => x.onSubmit?.(params));
6056
},
6157
onReset(params) {
6258
props.onReset?.(params);
63-
plugins.forEach((plugin) => {
64-
plugin.onReset?.(params);
65-
});
59+
plugins.forEach((x) => x.onReset?.(params));
6660
},
6761
getSources(params) {
6862
return Promise.all(
@@ -76,15 +70,11 @@ export function getDefaultProps<TItem extends BaseItem>(
7670
...source,
7771
onSelect(params) {
7872
source.onSelect(params);
79-
subscribers.forEach((subscriber) => {
80-
subscriber.onSelect?.(params);
81-
});
73+
pluginSubscribers.forEach((x) => x.onSelect?.(params));
8274
},
8375
onHighlight(params) {
8476
source.onHighlight(params);
85-
subscribers.forEach((subscriber) => {
86-
subscriber.onHighlight?.(params);
87-
});
77+
pluginSubscribers.forEach((x) => x.onHighlight?.(params));
8878
},
8979
}))
9080
);
@@ -95,10 +85,7 @@ export function getDefaultProps<TItem extends BaseItem>(
9585
},
9686
navigateNewTab({ itemUrl }) {
9787
const windowReference = environment.open(itemUrl, '_blank', 'noopener');
98-
99-
if (windowReference) {
100-
windowReference.focus();
101-
}
88+
windowReference?.focus();
10289
},
10390
navigateNewWindow({ itemUrl }) {
10491
environment.open(itemUrl, '_blank', 'noopener');

‎packages/autocomplete-core/src/getPropGetters.ts‎

Lines changed: 28 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -27,17 +27,7 @@ export function getPropGetters<
2727
TEvent,
2828
TMouseEvent,
2929
TKeyboardEvent
30-
>({
31-
store,
32-
props,
33-
setSelectedItemId,
34-
setQuery,
35-
setCollections,
36-
setIsOpen,
37-
setStatus,
38-
setContext,
39-
refresh,
40-
}: GetPropGettersOptions<TItem>) {
30+
>({ props, refresh, store, ...setters }: GetPropGettersOptions<TItem>) {
4131
const getEnvironmentProps: GetEnvironmentProps = (getterProps) => {
4232
return {
4333
// On touch devices, we do not rely on the native `blur` event of the
@@ -113,43 +103,27 @@ export function getPropGetters<
113103
((event as unknown) as Event).preventDefault();
114104

115105
props.onSubmit({
116-
state: store.getState(),
117-
setSelectedItemId,
118-
setQuery,
119-
setCollections,
120-
setIsOpen,
121-
setStatus,
122-
setContext,
123-
refresh,
124106
event,
107+
refresh,
108+
state: store.getState(),
109+
...setters,
125110
});
126111

127112
store.dispatch('submit', null);
128-
129-
if (providedProps.inputElement) {
130-
providedProps.inputElement.blur();
131-
}
113+
providedProps.inputElement?.blur();
132114
},
133115
onReset: (event) => {
134116
((event as unknown) as Event).preventDefault();
135117

136118
props.onReset({
137-
state: store.getState(),
138-
setSelectedItemId,
139-
setQuery,
140-
setCollections,
141-
setIsOpen,
142-
setStatus,
143-
setContext,
144-
refresh,
145119
event,
120+
refresh,
121+
state: store.getState(),
122+
...setters,
146123
});
147124

148125
store.dispatch('reset', null);
149-
150-
if (providedProps.inputElement) {
151-
providedProps.inputElement.focus();
152-
}
126+
providedProps.inputElement?.focus();
153127
},
154128
...rest,
155129
};
@@ -163,17 +137,12 @@ export function getPropGetters<
163137
// because the panel should open with the current query.
164138
if (props.openOnFocus || store.getState().query.length > 0) {
165139
onInput({
166-
query: store.getState().completion || store.getState().query,
167140
event,
168-
store,
169141
props,
170-
setSelectedItemId,
171-
setQuery,
172-
setCollections,
173-
setIsOpen,
174-
setStatus,
175-
setContext,
142+
query: store.getState().completion || store.getState().query,
176143
refresh,
144+
store,
145+
...setters,
177146
});
178147
}
179148

@@ -205,32 +174,22 @@ export function getPropGetters<
205174
type: 'search',
206175
onChange: (event) => {
207176
onInput({
208-
query: (((event as unknown) as Event)
209-
.currentTarget as HTMLInputElement).value.slice(0, maxLength),
210177
event,
211-
store,
212178
props,
213-
setSelectedItemId,
214-
setQuery,
215-
setCollections,
216-
setIsOpen,
217-
setStatus,
218-
setContext,
179+
query: (((event as unknown) as Event)
180+
.currentTarget as HTMLInputElement).value.slice(0, maxLength),
219181
refresh,
182+
store,
183+
...setters,
220184
});
221185
},
222186
onKeyDown: (event) => {
223187
onKeyDown({
224188
event: (event as unknown) as KeyboardEvent,
225-
store,
226189
props,
227-
setSelectedItemId,
228-
setQuery,
229-
setCollections,
230-
setIsOpen,
231-
setStatus,
232-
setContext,
233190
refresh,
191+
store,
192+
...setters,
234193
});
235194
},
236195
onFocus,
@@ -314,19 +273,14 @@ export function getPropGetters<
314273
const { item, itemInputValue, itemUrl, source } = highlightedItem;
315274

316275
source.onHighlight({
276+
event,
317277
item,
318278
itemInputValue,
319279
itemUrl,
280+
refresh,
320281
source,
321282
state: store.getState(),
322-
setSelectedItemId,
323-
setQuery,
324-
setCollections,
325-
setIsOpen,
326-
setStatus,
327-
setContext,
328-
refresh,
329-
event,
283+
...setters,
330284
});
331285
}
332286
},
@@ -353,37 +307,25 @@ export function getPropGetters<
353307
const runPreCommand = itemUrl
354308
? Promise.resolve()
355309
: onInput({
356-
query: itemInputValue,
357310
event,
358-
store,
311+
nextState: { isOpen: false },
359312
props,
360-
setSelectedItemId,
361-
setQuery,
362-
setCollections,
363-
setIsOpen,
364-
setStatus,
365-
setContext,
313+
query: itemInputValue,
366314
refresh,
367-
nextState: {
368-
isOpen: false,
369-
},
315+
store,
316+
...setters,
370317
});
371318

372319
runPreCommand.then(() => {
373320
source.onSelect({
321+
event,
374322
item,
375323
itemInputValue,
376324
itemUrl,
325+
refresh,
377326
source,
378327
state: store.getState(),
379-
setSelectedItemId,
380-
setQuery,
381-
setCollections,
382-
setIsOpen,
383-
setStatus,
384-
setContext,
385-
refresh,
386-
event,
328+
...setters,
387329
});
388330
});
389331
},

0 commit comments

Comments
 (0)