Skip to content

Commit ccf8d42

Browse files
Karthik-B-06Karthik-B-06
committed
feat(components): ⚡ use useWebFocusRing hook, to remove the outline style
when mouse click on web
1 parent 87f3227 commit ccf8d42

File tree

4 files changed

+46
-25
lines changed

4 files changed

+46
-25
lines changed

‎src/components/button/Button.tsx‎

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,9 @@ import {
1616
generateBoxShadow,
1717
styleAdapter,
1818
useHaptic,
19-
useOnFocus,
2019
useOnHover,
2120
useScaleAnimation,
21+
useWebFocusRing,
2222
} from "../../utils";
2323
import { createIcon } from "../create-icon";
2424
import { Icon } from "../icon";
@@ -129,7 +129,7 @@ const RNButton: React.FC<Partial<ButtonProps>> = forwardRef<
129129
const { handlers, animatedStyle } = useScaleAnimation();
130130
const hapticMedium = useHaptic("medium");
131131
const { onHoverIn, onHoverOut, hovered } = useOnHover();
132-
const { onFocus, onBlur, focused } = useOnFocus();
132+
const { focusProps, isFocusVisible, isFocused } = useWebFocusRing();
133133

134134
const iconAspectRatio = 1;
135135

@@ -285,6 +285,12 @@ const RNButton: React.FC<Partial<ButtonProps>> = forwardRef<
285285
return (
286286
<AnimatedBox style={animatedStyle}>
287287
<Touchable
288+
/**
289+
* * The TypeScript error arises due to an inconsistency between the expected ViewStyle type
290+
* * and the specific styling provided for the web platform,
291+
* * which includes outline and boxShadow properties not defined in the ViewStyle type.
292+
*/
293+
// @ts-ignore
288294
style={(touchState: PressableStateCallbackType) => {
289295
return [
290296
ts(
@@ -307,10 +313,10 @@ const RNButton: React.FC<Partial<ButtonProps>> = forwardRef<
307313
: "",
308314
),
309315
),
310-
focused.value
316+
Platform.OS === "web" ? buttonTheme.web : {},
317+
isFocusVisible && isFocused
311318
? Platform.select({
312319
web: {
313-
outline: 0,
314320
boxShadow: `${generateBoxShadow(
315321
buttonTheme.themeColor[themeColor]?.[variant]?.container
316322
?.focus?.offset,
@@ -334,8 +340,7 @@ const RNButton: React.FC<Partial<ButtonProps>> = forwardRef<
334340
// Web Callbacks
335341
onHoverIn={onHoverIn}
336342
onHoverOut={onHoverOut}
337-
onFocus={onFocus}
338-
onBlur={onBlur}
343+
{...focusProps}
339344
// Web Callbacks
340345
// A11y Props
341346
accessible

‎src/components/checkbox/Checkbox.tsx‎

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -23,9 +23,9 @@ import {
2323
generateBoxShadow,
2424
styleAdapter,
2525
useHaptic,
26-
useOnFocus,
2726
useOnHover,
2827
useScaleAnimation,
28+
useWebFocusRing,
2929
} from "../../utils";
3030
import { mergeRefs } from "../../utils/mergeRefs";
3131
import { createIcon } from "../create-icon";
@@ -132,7 +132,7 @@ const RNCheckbox: React.FC<Partial<CheckboxProps>> = forwardRef<
132132
} = props;
133133

134134
const { onHoverIn, onHoverOut, hovered } = useOnHover();
135-
const { onFocus, onBlur, focused } = useOnFocus();
135+
const { focusProps, isFocusVisible, isFocused } = useWebFocusRing();
136136
const { handlers, animatedStyle } = useScaleAnimation();
137137
const hapticSelection = useHaptic();
138138

@@ -363,8 +363,7 @@ const RNCheckbox: React.FC<Partial<CheckboxProps>> = forwardRef<
363363
// Web Callbacks
364364
onHoverIn={onHoverIn}
365365
onHoverOut={onHoverOut}
366-
onFocus={onFocus}
367-
onBlur={onBlur}
366+
{...focusProps}
368367
// Web Callbacks
369368
// A11y Props
370369
accessibilityLabel={accessibilityLabel}
@@ -375,6 +374,12 @@ const RNCheckbox: React.FC<Partial<CheckboxProps>> = forwardRef<
375374
accessibilityValue={{ text: props?.value }}
376375
onAccessibilityTap={handleChange}
377376
// A11y Props
377+
/**
378+
* * The TypeScript error arises due to an inconsistency between the expected ViewStyle type
379+
* * and the specific styling provided for the web platform,
380+
* * which includes outline and boxShadow properties not defined in the ViewStyle type.
381+
*/
382+
// @ts-ignore
378383
style={(touchState: PressableStateCallbackType) => [
379384
ts(
380385
cx(
@@ -394,7 +399,8 @@ const RNCheckbox: React.FC<Partial<CheckboxProps>> = forwardRef<
394399
: "",
395400
),
396401
),
397-
focused.value
402+
Platform.OS === "web" ? checkboxTheme.web : {},
403+
isFocusVisible && isFocused
398404
? Platform.select({
399405
web: {
400406
outline: 0,
@@ -440,7 +446,7 @@ const RNCheckbox: React.FC<Partial<CheckboxProps>> = forwardRef<
440446
children({
441447
pressed: touchState.pressed,
442448
isHovered: !!hovered.value,
443-
isFocussed: !!focused.value,
449+
isFocussed: !!(isFocusVisible && isFocused),
444450
})
445451
}
446452
</Touchable>

‎src/components/radio/Radio.tsx‎

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -15,9 +15,9 @@ import {
1515
generateBoxShadow,
1616
styleAdapter,
1717
useHaptic,
18-
useOnFocus,
1918
useOnHover,
2019
useScaleAnimation,
20+
useWebFocusRing,
2121
} from "../../utils";
2222
import { mergeRefs } from "../../utils/mergeRefs";
2323

@@ -86,7 +86,7 @@ const RNRadio: React.FC<Partial<RadioProps>> = forwardRef<
8686
]) as unknown as React.MutableRefObject<null>;
8787

8888
const { onHoverIn, onHoverOut, hovered } = useOnHover();
89-
const { onFocus, onBlur, focused } = useOnFocus();
89+
const { focusProps, isFocusVisible, isFocused } = useWebFocusRing();
9090
const hapticSelection = useHaptic();
9191
const { handlers, animatedStyle } = useScaleAnimation();
9292
const state = useRadioGroupContext();
@@ -278,9 +278,13 @@ const RNRadio: React.FC<Partial<RadioProps>> = forwardRef<
278278
// Web Callbacks
279279
onHoverIn={onHoverIn}
280280
onHoverOut={onHoverOut}
281-
onFocus={onFocus}
282-
onBlur={onBlur}
283281
// Web Callbacks
282+
/**
283+
* * The TypeScript error arises due to an inconsistency between the expected ViewStyle type
284+
* * and the specific styling provided for the web platform,
285+
* * which includes outline and boxShadow properties not defined in the ViewStyle type.
286+
*/
287+
// @ts-ignore
284288
style={(touchState: PressableStateCallbackType) => [
285289
ts([
286290
cx(
@@ -298,10 +302,10 @@ const RNRadio: React.FC<Partial<RadioProps>> = forwardRef<
298302
: "",
299303
),
300304
]),
301-
focused.value
305+
Platform.OS === "web" ? radioTheme.web : {},
306+
isFocused && isFocusVisible
302307
? Platform.select({
303308
web: {
304-
outline: 0,
305309
boxShadow: hasOnlyLabel
306310
? `${generateBoxShadow(
307311
radioTheme.themeColor[themeColor]?.label?.focus?.offset,
@@ -348,12 +352,13 @@ const RNRadio: React.FC<Partial<RadioProps>> = forwardRef<
348352
})}
349353
focusable={Platform.OS === "web" ? focusable : undefined}
350354
{...(description ? {} : handlers)}
355+
{...focusProps}
351356
>
352357
{(touchState: PressableStateCallbackType) =>
353358
children({
354359
pressed: touchState.pressed,
355360
isHovered: !!hovered.value,
356-
isFocussed: !!focused.value,
361+
isFocussed: !!(isFocused && isFocusVisible),
357362
})
358363
}
359364
</Touchable>

‎src/components/tag/Tag.tsx‎

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -17,9 +17,9 @@ import {
1717
RenderPropType,
1818
styleAdapter,
1919
useHaptic,
20-
useOnFocus,
2120
useOnHover,
2221
useScaleAnimation,
22+
useWebFocusRing,
2323
} from "../../utils";
2424
import { createIcon } from "../create-icon";
2525
import { Icon } from "../icon";
@@ -87,7 +87,7 @@ const RNTag: React.FC<Partial<TagProps>> = forwardRef<
8787
const tagTheme = useTheme("tag");
8888

8989
const { onHoverIn, onHoverOut, hovered } = useOnHover();
90-
const { onFocus, onBlur, focused } = useOnFocus();
90+
const { focusProps, isFocusVisible, isFocused } = useWebFocusRing();
9191
const { handlers, animatedStyle } = useScaleAnimation();
9292
const hapticSelection = useHaptic();
9393

@@ -193,6 +193,12 @@ const RNTag: React.FC<Partial<TagProps>> = forwardRef<
193193
<AnimatedBox style={animatedStyle}>
194194
<Touchable
195195
ref={ref}
196+
/**
197+
* * The TypeScript error arises due to an inconsistency between the expected ViewStyle type
198+
* * and the specific styling provided for the web platform,
199+
* * which includes outline and boxShadow properties not defined in the ViewStyle type.
200+
*/
201+
// @ts-ignore
196202
style={(touchState: PressableStateCallbackType) => [
197203
ts(
198204
cx(
@@ -211,10 +217,10 @@ const RNTag: React.FC<Partial<TagProps>> = forwardRef<
211217
: "",
212218
),
213219
),
214-
focused.value
220+
Platform.OS === "web" ? tagTheme.web : {},
221+
isFocusVisible && isFocused
215222
? Platform.select({
216223
web: {
217-
outline: 0,
218224
boxShadow: `${generateBoxShadow(
219225
tagTheme.themeColor[themeColor]?.[variant]?.container?.focus
220226
?.offset,
@@ -237,8 +243,7 @@ const RNTag: React.FC<Partial<TagProps>> = forwardRef<
237243
// Web Callbacks
238244
onHoverIn={onHoverIn}
239245
onHoverOut={onHoverOut}
240-
onFocus={onFocus}
241-
onBlur={onBlur}
246+
{...focusProps}
242247
// Web Callbacks
243248
accessible
244249
accessibilityRole="button"

0 commit comments

Comments
 (0)