Skip to content

Commit f24737f

Browse files
stomitastomita
committed
use event callback hooks to create callback function
1 parent 90a26ef commit f24737f

18 files changed

+496
-588
lines changed

‎src/scripts/AutoAlign.tsx‎

Lines changed: 13 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import React, {
22
FC,
33
ReactElement,
44
Ref,
5-
useCallback,
65
useContext,
76
useEffect,
87
useMemo,
@@ -12,7 +11,7 @@ import React, {
1211
import classnames from 'classnames';
1312
import RelativePortal from 'react-relative-portal';
1413
import { ComponentSettingsContext } from './ComponentSettings';
15-
import { useControlledValue } from './hooks';
14+
import { useControlledValue, useEventCallback } from './hooks';
1615

1716
type Offset = {
1817
top: number;
@@ -224,13 +223,13 @@ const EMPTY_RECT = { top: 0, left: 0, width: 0, height: 0 };
224223
/**
225224
*
226225
*/
227-
function useAutoAlign(props_: AutoAlignProps) {
226+
function useAutoAlign(props: AutoAlignProps) {
228227
const {
229228
triggerSelector,
230229
alignmentStyle,
231230
align,
232231
alignment: alignment_,
233-
} = props_;
232+
} = props;
234233

235234
const pidRef = useRef<number | null>(null);
236235

@@ -245,7 +244,7 @@ function useAutoAlign(props_: AutoAlignProps) {
245244
const [rootNodeRect, setRootNodeRect] = useState<Rect>();
246245
const [triggerNodeRect, setTriggerNodeRect] = useState<Rect>();
247246

248-
const updateAlignment = useCallback(
247+
const updateAlignment = useEventCallback(
249248
(newTriggerNodeRect: Rect = EMPTY_RECT) => {
250249
const newRootNodeRect =
251250
elRef.current?.getBoundingClientRect() ?? EMPTY_RECT;
@@ -288,11 +287,10 @@ function useAutoAlign(props_: AutoAlignProps) {
288287
setTriggerNodeRect(newTriggerNodeRect);
289288
setRootNodeRect(newRootNodeRect);
290289
}
291-
},
292-
[align, alignment, alignmentStyle, setAlignment, triggerNodeRect]
290+
}
293291
);
294292

295-
const recalcAlignment = useCallback(() => {
293+
const recalcAlignment = useEventCallback(() => {
296294
const el = elRef.current;
297295
if (el) {
298296
const matches =
@@ -324,7 +322,7 @@ function useAutoAlign(props_: AutoAlignProps) {
324322
updateAlignment(triggerNodeRect);
325323
}
326324
}
327-
}, [triggerNodeRect, triggerSelector, updateAlignment]);
325+
});
328326

329327
const requestRecalcAlignment = useMemo(
330328
() =>
@@ -348,15 +346,12 @@ function useAutoAlign(props_: AutoAlignProps) {
348346
[requestRecalcAlignment]
349347
);
350348

351-
const elRefCallback = useCallback(
352-
(el: HTMLDivElement | null) => {
353-
if (el) {
354-
elRef.current = el;
355-
requestRecalcAlignment();
356-
}
357-
},
358-
[requestRecalcAlignment]
359-
);
349+
const elRefCallback = useEventCallback((el: HTMLDivElement | null) => {
350+
if (el) {
351+
elRef.current = el;
352+
requestRecalcAlignment();
353+
}
354+
});
360355

361356
useEffect(() => {
362357
return () => {

‎src/scripts/Button.tsx‎

Lines changed: 9 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,9 @@
1-
import React, {
2-
FC,
3-
ReactNode,
4-
ButtonHTMLAttributes,
5-
Ref,
6-
useRef,
7-
useCallback,
8-
} from 'react';
1+
import React, { FC, ReactNode, ButtonHTMLAttributes, Ref, useRef } from 'react';
92
import mergeRefs from 'react-merge-refs';
103
import classnames from 'classnames';
114
import { Icon } from './Icon';
125
import { Spinner } from './Spinner';
6+
import { useEventCallback } from './hooks';
137

148
export type ButtonType =
159
| 'neutral'
@@ -136,16 +130,13 @@ export const Button: FC<ButtonProps> = (props) => {
136130
? mergeRefs([buttonElRef, buttonRef_])
137131
: buttonElRef;
138132

139-
const onClick = useCallback(
140-
(e: React.MouseEvent<HTMLButtonElement>) => {
141-
if (buttonElRef.current !== null) {
142-
// Safari, FF to trigger focus event on click
143-
buttonElRef.current.focus();
144-
}
145-
onClick_?.(e);
146-
},
147-
[onClick_]
148-
);
133+
const onClick = useEventCallback((e: React.MouseEvent<HTMLButtonElement>) => {
134+
if (buttonElRef.current !== null) {
135+
// Safari, FF to trigger focus event on click
136+
buttonElRef.current.focus();
137+
}
138+
onClick_?.(e);
139+
});
149140

150141
const typeClassName = type ? `slds-button_${type}` : null;
151142
const btnClassNames = classnames(className, 'slds-button', typeClassName, {

‎src/scripts/CheckboxGroup.tsx‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
import React, {
22
createContext,
33
FieldsetHTMLAttributes,
4-
useCallback,
54
useContext,
65
useMemo,
76
useRef,
87
} from 'react';
98
import classnames from 'classnames';
109
import { FormElementProps } from './FormElement';
1110
import { FieldSetColumnContext } from './FieldSet';
11+
import { useEventCallback } from './hooks';
1212
import { createFC } from './common';
1313

1414
/**
@@ -56,7 +56,7 @@ export const CheckboxGroup = createFC<
5656
const { totalCols } = useContext(FieldSetColumnContext);
5757
const controlElRef = useRef<HTMLDivElement | null>(null);
5858

59-
const onChange = useCallback(
59+
const onChange = useEventCallback(
6060
(e: React.FormEvent<HTMLFieldSetElement>) => {
6161
if (onValueChange) {
6262
const checkboxes =
@@ -72,8 +72,7 @@ export const CheckboxGroup = createFC<
7272
onValueChange?.(values);
7373
}
7474
onChange_?.(e);
75-
},
76-
[onChange_, onValueChange]
75+
}
7776
);
7877

7978
const grpClassNames = classnames(

‎src/scripts/DateInput.tsx‎

Lines changed: 48 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@ import React, {
99
useMemo,
1010
useState,
1111
useEffect,
12-
useCallback,
1312
useContext,
1413
} from 'react';
1514
import classnames from 'classnames';
@@ -21,7 +20,11 @@ import { Datepicker, DatepickerProps } from './Datepicker';
2120
import { isElInChildren } from './util';
2221
import { ComponentSettingsContext } from './ComponentSettings';
2322
import mergeRefs from 'react-merge-refs';
24-
import { useControlledValue, useFormElementId } from './hooks';
23+
import {
24+
useControlledValue,
25+
useEventCallback,
26+
useFormElementId,
27+
} from './hooks';
2528
import { AutoAlign, AutoAlignInjectedProps, AutoAlignProps } from './AutoAlign';
2629
import { createFC } from './common';
2730

@@ -182,34 +185,31 @@ export const DateInput = createFC<DateInputProps, { isFormElement: boolean }>(
182185

183186
const { getActiveElement } = useContext(ComponentSettingsContext);
184187

185-
const setValueFromInput = useCallback(
186-
(inputValue: string) => {
187-
let newValue = value;
188-
if (!inputValue) {
189-
newValue = '';
188+
const setValueFromInput = useEventCallback((inputValue: string) => {
189+
let newValue = value;
190+
if (!inputValue) {
191+
newValue = '';
192+
} else {
193+
const mvalue = moment(inputValue, inputValueFormat);
194+
if (mvalue.isValid()) {
195+
newValue = mvalue.format(valueFormat);
190196
} else {
191-
const mvalue = moment(inputValue, inputValueFormat);
192-
if (mvalue.isValid()) {
193-
newValue = mvalue.format(valueFormat);
194-
} else {
195-
newValue = '';
196-
}
197+
newValue = '';
197198
}
198-
setValue(newValue);
199-
setInputValue(null);
200-
},
201-
[value, valueFormat, inputValueFormat, setValue, setInputValue]
202-
);
199+
}
200+
setValue(newValue);
201+
setInputValue(null);
202+
});
203203

204-
const isFocusedInComponent = useCallback(() => {
204+
const isFocusedInComponent = useEventCallback(() => {
205205
const targetEl = getActiveElement();
206206
return (
207207
isElInChildren(nodeRef.current, targetEl) ||
208208
isElInChildren(datepickerElRef.current, targetEl)
209209
);
210-
}, [getActiveElement]);
210+
});
211211

212-
const showDatepicker = useCallback(() => {
212+
const showDatepicker = useEventCallback(() => {
213213
let newValue = value;
214214
if (inputValue != null) {
215215
const mvalue = moment(inputValue, inputValueFormat);
@@ -219,22 +219,22 @@ export const DateInput = createFC<DateInputProps, { isFormElement: boolean }>(
219219
}
220220
setOpened(true);
221221
setValue(newValue);
222-
}, [value, inputValue, inputValueFormat, valueFormat, setOpened, setValue]);
222+
});
223223

224224
const prevValueRef = useRef<typeof value>(value);
225225
useEffect(() => {
226226
onValueChange?.(value, prevValueRef.current);
227227
prevValueRef.current = value;
228228
}, [value, onValueChange]);
229229

230-
const onDateIconClick = useCallback(() => {
230+
const onDateIconClick = useEventCallback(() => {
231231
inputElRef.current?.focus();
232232
setTimeout(() => {
233233
showDatepicker();
234234
}, 10);
235-
}, [showDatepicker]);
235+
});
236236

237-
const onInputKeyDown = useCallback(
237+
const onInputKeyDown = useEventCallback(
238238
(e: KeyboardEvent<HTMLInputElement>) => {
239239
if (e.keyCode === 13) {
240240
// return key
@@ -255,20 +255,18 @@ export const DateInput = createFC<DateInputProps, { isFormElement: boolean }>(
255255
e.stopPropagation();
256256
}
257257
onKeyDown?.(e);
258-
},
259-
[setValueFromInput, showDatepicker, onComplete, onKeyDown]
258+
}
260259
);
261260

262-
const onInputChange = useCallback(
261+
const onInputChange = useEventCallback(
263262
(e: ChangeEvent<HTMLInputElement>) => {
264263
const inputValue = e.target.value;
265264
setInputValue(inputValue);
266265
onChange?.(e);
267-
},
268-
[onChange]
266+
}
269267
);
270268

271-
const onInputBlur = useCallback(
269+
const onInputBlur = useEventCallback(
272270
(e: FocusEvent<HTMLInputElement | HTMLButtonElement>) => {
273271
if (e.target.tagName.toLowerCase() === 'input') {
274272
setValueFromInput(e.target.value);
@@ -279,46 +277,42 @@ export const DateInput = createFC<DateInputProps, { isFormElement: boolean }>(
279277
onComplete?.();
280278
}
281279
}, 10);
282-
},
283-
[setValueFromInput, isFocusedInComponent, onBlur, onComplete]
280+
}
284281
);
285282

286-
const onDatepickerSelect = useCallback(
287-
(dvalue: string) => {
288-
const value = moment(dvalue).format(valueFormat);
289-
setValue(value);
290-
setInputValue(null);
291-
setTimeout(() => {
292-
setOpened(false);
293-
const inputEl = inputElRef.current;
294-
if (inputEl) {
295-
inputEl.focus();
296-
inputEl.select();
297-
}
298-
onComplete?.();
299-
}, 200);
300-
},
301-
[valueFormat, setValue, setOpened, onComplete]
302-
);
283+
const onDatepickerSelect = useEventCallback((dvalue: string) => {
284+
const value = moment(dvalue).format(valueFormat);
285+
setValue(value);
286+
setInputValue(null);
287+
setTimeout(() => {
288+
setOpened(false);
289+
const inputEl = inputElRef.current;
290+
if (inputEl) {
291+
inputEl.focus();
292+
inputEl.select();
293+
}
294+
onComplete?.();
295+
}, 200);
296+
});
303297

304-
const onDatepickerBlur = useCallback(() => {
298+
const onDatepickerBlur = useEventCallback(() => {
305299
setOpened(false);
306300
setTimeout(() => {
307301
if (!isFocusedInComponent()) {
308302
onBlur?.();
309303
onComplete?.();
310304
}
311305
}, 500);
312-
}, [setOpened, isFocusedInComponent, onBlur, onComplete]);
306+
});
313307

314-
const onDatepickerClose = useCallback(() => {
308+
const onDatepickerClose = useEventCallback(() => {
315309
setOpened(false);
316310
const inputEl = inputElRef.current;
317311
if (inputEl) {
318312
inputEl.focus();
319313
inputEl.select();
320314
}
321-
}, [setOpened]);
315+
});
322316

323317
const formElemProps = { id, cols, label, required, error };
324318
return (

0 commit comments

Comments
 (0)