kylefang/nativewind
1
0
Fork 0
mirror of https://github.com/zhigang1992/nativewind.git synced 2026-06-11 08:03:37 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: prevent adding unnecessary event handlers to components

Browse Source
This commit is contained in:
Mark Lawlor
2022-05-18 15:22:44 +10:00
parent bbcc38003f
commit 04ce24283f
8 changed files with 23 additions and 372 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.eslintrc.js
View File

@@ -21,6 +21,7 @@ module.exports = {
"error",
{
allowList: {
fn: true,
props: true,
Props: true,
ref: true,

7
__tests__/custom-tailwindcss/__snapshots__/parent-variant.tsx.snap
View File

@@ -2,13 +2,6 @@
exports[`Custom - Parent Variant Snapshots parent:text-white 1`] = `
<View
onBlur={[Function]}
onFocus={[Function]}
onHoverIn={[Function]}
onHoverOut={[Function]}
onPress={[Function]}
onPressIn={[Function]}
onPressOut={[Function]}
style={Array []}
>
<Text

175
__tests__/tailwindcss/__snapshots__/divide-color.tsx.snap
View File

@@ -2,13 +2,6 @@
exports[`Border - Divide Color divide-amber-50 1`] = `
<View
onBlur={[Function]}
onFocus={[Function]}
onHoverIn={[Function]}
onHoverOut={[Function]}
onPress={[Function]}
onPressIn={[Function]}
onPressOut={[Function]}
style={Array []}
>
<Text>
@@ -33,13 +26,6 @@ exports[`Border - Divide Color divide-amber-50 1`] = `
exports[`Border - Divide Color divide-black 1`] = `
<View
onBlur={[Function]}
onFocus={[Function]}
onHoverIn={[Function]}
onHoverOut={[Function]}
onPress={[Function]}
onPressIn={[Function]}
onPressOut={[Function]}
style={Array []}
>
<Text>
@@ -64,13 +50,6 @@ exports[`Border - Divide Color divide-black 1`] = `
exports[`Border - Divide Color divide-blue-50 1`] = `
<View
onBlur={[Function]}
onFocus={[Function]}
onHoverIn={[Function]}
onHoverOut={[Function]}
onPress={[Function]}
onPressIn={[Function]}
onPressOut={[Function]}
style={Array []}
>
<Text>
@@ -95,13 +74,6 @@ exports[`Border - Divide Color divide-blue-50 1`] = `
exports[`Border - Divide Color divide-cyan-50 1`] = `
<View
onBlur={[Function]}
onFocus={[Function]}
onHoverIn={[Function]}
onHoverOut={[Function]}
onPress={[Function]}
onPressIn={[Function]}
onPressOut={[Function]}
style={Array []}
>
<Text>
@@ -126,13 +98,6 @@ exports[`Border - Divide Color divide-cyan-50 1`] = `
exports[`Border - Divide Color divide-emerald-50 1`] = `
<View
onBlur={[Function]}
onFocus={[Function]}
onHoverIn={[Function]}
onHoverOut={[Function]}
onPress={[Function]}
onPressIn={[Function]}
onPressOut={[Function]}
style={Array []}
>
<Text>
@@ -157,13 +122,6 @@ exports[`Border - Divide Color divide-emerald-50 1`] = `
exports[`Border - Divide Color divide-fuchsia-50 1`] = `
<View
onBlur={[Function]}
onFocus={[Function]}
onHoverIn={[Function]}
onHoverOut={[Function]}
onPress={[Function]}
onPressIn={[Function]}
onPressOut={[Function]}
style={Array []}
>
<Text>
@@ -188,13 +146,6 @@ exports[`Border - Divide Color divide-fuchsia-50 1`] = `
exports[`Border - Divide Color divide-gray-50 1`] = `
<View
onBlur={[Function]}
onFocus={[Function]}
onHoverIn={[Function]}
onHoverOut={[Function]}
onPress={[Function]}
onPressIn={[Function]}
onPressOut={[Function]}
style={Array []}
>
<Text>
@@ -219,13 +170,6 @@ exports[`Border - Divide Color divide-gray-50 1`] = `
exports[`Border - Divide Color divide-green-50 1`] = `
<View
onBlur={[Function]}
onFocus={[Function]}
onHoverIn={[Function]}
onHoverOut={[Function]}
onPress={[Function]}
onPressIn={[Function]}
onPressOut={[Function]}
style={Array []}
>
<Text>
@@ -250,13 +194,6 @@ exports[`Border - Divide Color divide-green-50 1`] = `
exports[`Border - Divide Color divide-indigo-50 1`] = `
<View
onBlur={[Function]}
onFocus={[Function]}
onHoverIn={[Function]}
onHoverOut={[Function]}
onPress={[Function]}
onPressIn={[Function]}
onPressOut={[Function]}
style={Array []}
>
<Text>
@@ -281,13 +218,6 @@ exports[`Border - Divide Color divide-indigo-50 1`] = `
exports[`Border - Divide Color divide-lime-50 1`] = `
<View
onBlur={[Function]}
onFocus={[Function]}
onHoverIn={[Function]}
onHoverOut={[Function]}
onPress={[Function]}
onPressIn={[Function]}
onPressOut={[Function]}
style={Array []}
>
<Text>
@@ -312,13 +242,6 @@ exports[`Border - Divide Color divide-lime-50 1`] = `
exports[`Border - Divide Color divide-neutral-50 1`] = `
<View
onBlur={[Function]}
onFocus={[Function]}
onHoverIn={[Function]}
onHoverOut={[Function]}
onPress={[Function]}
onPressIn={[Function]}
onPressOut={[Function]}
style={Array []}
>
<Text>
@@ -343,13 +266,6 @@ exports[`Border - Divide Color divide-neutral-50 1`] = `
exports[`Border - Divide Color divide-orange-50 1`] = `
<View
onBlur={[Function]}
onFocus={[Function]}
onHoverIn={[Function]}
onHoverOut={[Function]}
onPress={[Function]}
onPressIn={[Function]}
onPressOut={[Function]}
style={Array []}
>
<Text>
@@ -374,13 +290,6 @@ exports[`Border - Divide Color divide-orange-50 1`] = `
exports[`Border - Divide Color divide-pink-50 1`] = `
<View
onBlur={[Function]}
onFocus={[Function]}
onHoverIn={[Function]}
onHoverOut={[Function]}
onPress={[Function]}
onPressIn={[Function]}
onPressOut={[Function]}
style={Array []}
>
<Text>
@@ -405,13 +314,6 @@ exports[`Border - Divide Color divide-pink-50 1`] = `
exports[`Border - Divide Color divide-purple-50 1`] = `
<View
onBlur={[Function]}
onFocus={[Function]}
onHoverIn={[Function]}
onHoverOut={[Function]}
onPress={[Function]}
onPressIn={[Function]}
onPressOut={[Function]}
style={Array []}
>
<Text>
@@ -436,13 +338,6 @@ exports[`Border - Divide Color divide-purple-50 1`] = `
exports[`Border - Divide Color divide-red-50 1`] = `
<View
onBlur={[Function]}
onFocus={[Function]}
onHoverIn={[Function]}
onHoverOut={[Function]}
onPress={[Function]}
onPressIn={[Function]}
onPressOut={[Function]}
style={Array []}
>
<Text>
@@ -467,13 +362,6 @@ exports[`Border - Divide Color divide-red-50 1`] = `
exports[`Border - Divide Color divide-rose-50 1`] = `
<View
onBlur={[Function]}
onFocus={[Function]}
onHoverIn={[Function]}
onHoverOut={[Function]}
onPress={[Function]}
onPressIn={[Function]}
onPressOut={[Function]}
style={Array []}
>
<Text>
@@ -498,13 +386,6 @@ exports[`Border - Divide Color divide-rose-50 1`] = `
exports[`Border - Divide Color divide-sky-50 1`] = `
<View
onBlur={[Function]}
onFocus={[Function]}
onHoverIn={[Function]}
onHoverOut={[Function]}
onPress={[Function]}
onPressIn={[Function]}
onPressOut={[Function]}
style={Array []}
>
<Text>
@@ -529,13 +410,6 @@ exports[`Border - Divide Color divide-sky-50 1`] = `
exports[`Border - Divide Color divide-slate-50 1`] = `
<View
onBlur={[Function]}
onFocus={[Function]}
onHoverIn={[Function]}
onHoverOut={[Function]}
onPress={[Function]}
onPressIn={[Function]}
onPressOut={[Function]}
style={Array []}
>
<Text>
@@ -560,13 +434,6 @@ exports[`Border - Divide Color divide-slate-50 1`] = `
exports[`Border - Divide Color divide-stone-50 1`] = `
<View
onBlur={[Function]}
onFocus={[Function]}
onHoverIn={[Function]}
onHoverOut={[Function]}
onPress={[Function]}
onPressIn={[Function]}
onPressOut={[Function]}
style={Array []}
>
<Text>
@@ -591,13 +458,6 @@ exports[`Border - Divide Color divide-stone-50 1`] = `
exports[`Border - Divide Color divide-teal-50 1`] = `
<View
onBlur={[Function]}
onFocus={[Function]}
onHoverIn={[Function]}
onHoverOut={[Function]}
onPress={[Function]}
onPressIn={[Function]}
onPressOut={[Function]}
style={Array []}
>
<Text>
@@ -622,13 +482,6 @@ exports[`Border - Divide Color divide-teal-50 1`] = `
exports[`Border - Divide Color divide-transparent 1`] = `
<View
onBlur={[Function]}
onFocus={[Function]}
onHoverIn={[Function]}
onHoverOut={[Function]}
onPress={[Function]}
onPressIn={[Function]}
onPressOut={[Function]}
style={Array []}
>
<Text>
@@ -653,13 +506,6 @@ exports[`Border - Divide Color divide-transparent 1`] = `
exports[`Border - Divide Color divide-violet-50 1`] = `
<View
onBlur={[Function]}
onFocus={[Function]}
onHoverIn={[Function]}
onHoverOut={[Function]}
onPress={[Function]}
onPressIn={[Function]}
onPressOut={[Function]}
style={Array []}
>
<Text>
@@ -684,13 +530,6 @@ exports[`Border - Divide Color divide-violet-50 1`] = `
exports[`Border - Divide Color divide-white 1`] = `
<View
onBlur={[Function]}
onFocus={[Function]}
onHoverIn={[Function]}
onHoverOut={[Function]}
onPress={[Function]}
onPressIn={[Function]}
onPressOut={[Function]}
style={Array []}
>
<Text>
@@ -715,13 +554,6 @@ exports[`Border - Divide Color divide-white 1`] = `
exports[`Border - Divide Color divide-yellow-50 1`] = `
<View
onBlur={[Function]}
onFocus={[Function]}
onHoverIn={[Function]}
onHoverOut={[Function]}
onPress={[Function]}
onPressIn={[Function]}
onPressOut={[Function]}
style={Array []}
>
<Text>
@@ -746,13 +578,6 @@ exports[`Border - Divide Color divide-yellow-50 1`] = `
exports[`Border - Divide Color divide-zinc-50 1`] = `
<View
onBlur={[Function]}
onFocus={[Function]}
onHoverIn={[Function]}
onHoverOut={[Function]}
onPress={[Function]}
onPressIn={[Function]}
onPressOut={[Function]}
style={Array []}
>
<Text>

21
__tests__/tailwindcss/__snapshots__/divide-style.tsx.snap
View File

@@ -2,13 +2,6 @@
exports[`Border - Divide Style divide-dashed 1`] = `
<View
onBlur={[Function]}
onFocus={[Function]}
onHoverIn={[Function]}
onHoverOut={[Function]}
onPress={[Function]}
onPressIn={[Function]}
onPressOut={[Function]}
style={Array []}
>
<Text>
@@ -30,13 +23,6 @@ exports[`Border - Divide Style divide-dashed 1`] = `
exports[`Border - Divide Style divide-dotted 1`] = `
<View
onBlur={[Function]}
onFocus={[Function]}
onHoverIn={[Function]}
onHoverOut={[Function]}
onPress={[Function]}
onPressIn={[Function]}
onPressOut={[Function]}
style={Array []}
>
<Text>
@@ -58,13 +44,6 @@ exports[`Border - Divide Style divide-dotted 1`] = `
exports[`Border - Divide Style divide-solid 1`] = `
<View
onBlur={[Function]}
onFocus={[Function]}
onHoverIn={[Function]}
onHoverOut={[Function]}
onPress={[Function]}
onPressIn={[Function]}
onPressOut={[Function]}
style={Array []}
>
<Text>

70
__tests__/tailwindcss/__snapshots__/divide-width.tsx.snap
View File

@@ -2,13 +2,6 @@
exports[`Border - Divide Width divide-x 1`] = `
<View
onBlur={[Function]}
onFocus={[Function]}
onHoverIn={[Function]}
onHoverOut={[Function]}
onPress={[Function]}
onPressIn={[Function]}
onPressOut={[Function]}
style={Array []}
>
<Text>
@@ -31,13 +24,6 @@ exports[`Border - Divide Width divide-x 1`] = `
exports[`Border - Divide Width divide-x-0 1`] = `
<View
onBlur={[Function]}
onFocus={[Function]}
onHoverIn={[Function]}
onHoverOut={[Function]}
onPress={[Function]}
onPressIn={[Function]}
onPressOut={[Function]}
style={Array []}
>
<Text>
@@ -60,13 +46,6 @@ exports[`Border - Divide Width divide-x-0 1`] = `
exports[`Border - Divide Width divide-x-2 1`] = `
<View
onBlur={[Function]}
onFocus={[Function]}
onHoverIn={[Function]}
onHoverOut={[Function]}
onPress={[Function]}
onPressIn={[Function]}
onPressOut={[Function]}
style={Array []}
>
<Text>
@@ -89,13 +68,6 @@ exports[`Border - Divide Width divide-x-2 1`] = `
exports[`Border - Divide Width divide-x-4 1`] = `
<View
onBlur={[Function]}
onFocus={[Function]}
onHoverIn={[Function]}
onHoverOut={[Function]}
onPress={[Function]}
onPressIn={[Function]}
onPressOut={[Function]}
style={Array []}
>
<Text>
@@ -118,13 +90,6 @@ exports[`Border - Divide Width divide-x-4 1`] = `
exports[`Border - Divide Width divide-x-8 1`] = `
<View
onBlur={[Function]}
onFocus={[Function]}
onHoverIn={[Function]}
onHoverOut={[Function]}
onPress={[Function]}
onPressIn={[Function]}
onPressOut={[Function]}
style={Array []}
>
<Text>
@@ -147,13 +112,6 @@ exports[`Border - Divide Width divide-x-8 1`] = `
exports[`Border - Divide Width divide-y 1`] = `
<View
onBlur={[Function]}
onFocus={[Function]}
onHoverIn={[Function]}
onHoverOut={[Function]}
onPress={[Function]}
onPressIn={[Function]}
onPressOut={[Function]}
style={Array []}
>
<Text>
@@ -176,13 +134,6 @@ exports[`Border - Divide Width divide-y 1`] = `
exports[`Border - Divide Width divide-y-0 1`] = `
<View
onBlur={[Function]}
onFocus={[Function]}
onHoverIn={[Function]}
onHoverOut={[Function]}
onPress={[Function]}
onPressIn={[Function]}
onPressOut={[Function]}
style={Array []}
>
<Text>
@@ -205,13 +156,6 @@ exports[`Border - Divide Width divide-y-0 1`] = `
exports[`Border - Divide Width divide-y-2 1`] = `
<View
onBlur={[Function]}
onFocus={[Function]}
onHoverIn={[Function]}
onHoverOut={[Function]}
onPress={[Function]}
onPressIn={[Function]}
onPressOut={[Function]}
style={Array []}
>
<Text>
@@ -234,13 +178,6 @@ exports[`Border - Divide Width divide-y-2 1`] = `
exports[`Border - Divide Width divide-y-4 1`] = `
<View
onBlur={[Function]}
onFocus={[Function]}
onHoverIn={[Function]}
onHoverOut={[Function]}
onPress={[Function]}
onPressIn={[Function]}
onPressOut={[Function]}
style={Array []}
>
<Text>
@@ -263,13 +200,6 @@ exports[`Border - Divide Width divide-y-4 1`] = `
exports[`Border - Divide Width divide-y-8 1`] = `
<View
onBlur={[Function]}
onFocus={[Function]}
onHoverIn={[Function]}
onHoverOut={[Function]}
onPress={[Function]}
onPressIn={[Function]}
onPressOut={[Function]}
style={Array []}
>
<Text>

7
__tests__/tailwindcss/__snapshots__/gap.tsx.snap
View File

@@ -2,13 +2,6 @@
exports[`Flexbox & Grid - Gap gap-0 1`] = `
<View
onBlur={[Function]}
onFocus={[Function]}
onHoverIn={[Function]}
onHoverOut={[Function]}
onPress={[Function]}
onPressIn={[Function]}
onPressOut={[Function]}
style={
Array [
Object {

84
__tests__/tailwindcss/__snapshots__/space-between.tsx.snap
View File

@@ -2,13 +2,6 @@
exports[`Border - Divide Width space-x-0 1`] = `
<View
onBlur={[Function]}
onFocus={[Function]}
onHoverIn={[Function]}
onHoverOut={[Function]}
onPress={[Function]}
onPressIn={[Function]}
onPressOut={[Function]}
style={Array []}
>
<Text>
@@ -30,13 +23,6 @@ exports[`Border - Divide Width space-x-0 1`] = `
exports[`Border - Divide Width space-x-0.5 1`] = `
<View
onBlur={[Function]}
onFocus={[Function]}
onHoverIn={[Function]}
onHoverOut={[Function]}
onPress={[Function]}
onPressIn={[Function]}
onPressOut={[Function]}
style={Array []}
>
<Text>
@@ -58,13 +44,6 @@ exports[`Border - Divide Width space-x-0.5 1`] = `
exports[`Border - Divide Width space-x-1 1`] = `
<View
onBlur={[Function]}
onFocus={[Function]}
onHoverIn={[Function]}
onHoverOut={[Function]}
onPress={[Function]}
onPressIn={[Function]}
onPressOut={[Function]}
style={Array []}
>
<Text>
@@ -86,13 +65,6 @@ exports[`Border - Divide Width space-x-1 1`] = `
exports[`Border - Divide Width space-x-1.5 1`] = `
<View
onBlur={[Function]}
onFocus={[Function]}
onHoverIn={[Function]}
onHoverOut={[Function]}
onPress={[Function]}
onPressIn={[Function]}
onPressOut={[Function]}
style={Array []}
>
<Text>
@@ -114,13 +86,6 @@ exports[`Border - Divide Width space-x-1.5 1`] = `
exports[`Border - Divide Width space-x-96 1`] = `
<View
onBlur={[Function]}
onFocus={[Function]}
onHoverIn={[Function]}
onHoverOut={[Function]}
onPress={[Function]}
onPressIn={[Function]}
onPressOut={[Function]}
style={Array []}
>
<Text>
@@ -142,13 +107,6 @@ exports[`Border - Divide Width space-x-96 1`] = `
exports[`Border - Divide Width space-x-px 1`] = `
<View
onBlur={[Function]}
onFocus={[Function]}
onHoverIn={[Function]}
onHoverOut={[Function]}
onPress={[Function]}
onPressIn={[Function]}
onPressOut={[Function]}
style={Array []}
>
<Text>
@@ -170,13 +128,6 @@ exports[`Border - Divide Width space-x-px 1`] = `
exports[`Border - Divide Width space-y-0 1`] = `
<View
onBlur={[Function]}
onFocus={[Function]}
onHoverIn={[Function]}
onHoverOut={[Function]}
onPress={[Function]}
onPressIn={[Function]}
onPressOut={[Function]}
style={Array []}
>
<Text>
@@ -198,13 +149,6 @@ exports[`Border - Divide Width space-y-0 1`] = `
exports[`Border - Divide Width space-y-0.5 1`] = `
<View
onBlur={[Function]}
onFocus={[Function]}
onHoverIn={[Function]}
onHoverOut={[Function]}
onPress={[Function]}
onPressIn={[Function]}
onPressOut={[Function]}
style={Array []}
>
<Text>
@@ -226,13 +170,6 @@ exports[`Border - Divide Width space-y-0.5 1`] = `
exports[`Border - Divide Width space-y-1 1`] = `
<View
onBlur={[Function]}
onFocus={[Function]}
onHoverIn={[Function]}
onHoverOut={[Function]}
onPress={[Function]}
onPressIn={[Function]}
onPressOut={[Function]}
style={Array []}
>
<Text>
@@ -254,13 +191,6 @@ exports[`Border - Divide Width space-y-1 1`] = `
exports[`Border - Divide Width space-y-1.5 1`] = `
<View
onBlur={[Function]}
onFocus={[Function]}
onHoverIn={[Function]}
onHoverOut={[Function]}
onPress={[Function]}
onPressIn={[Function]}
onPressOut={[Function]}
style={Array []}
>
<Text>
@@ -282,13 +212,6 @@ exports[`Border - Divide Width space-y-1.5 1`] = `
exports[`Border - Divide Width space-y-96 1`] = `
<View
onBlur={[Function]}
onFocus={[Function]}
onHoverIn={[Function]}
onHoverOut={[Function]}
onPress={[Function]}
onPressIn={[Function]}
onPressOut={[Function]}
style={Array []}
>
<Text>
@@ -310,13 +233,6 @@ exports[`Border - Divide Width space-y-96 1`] = `
exports[`Border - Divide Width space-y-px 1`] = `
<View
onBlur={[Function]}
onFocus={[Function]}
onHoverIn={[Function]}
onHoverOut={[Function]}
onPress={[Function]}
onPressIn={[Function]}
onPressOut={[Function]}
style={Array []}
>
<Text>

30
src/use-interaction.ts
View File

@@ -18,7 +18,8 @@ export function useInteraction({
onPressIn,
onPressOut,
onPress,
}: PressableProps = {}) {
className = "",
}: PressableProps & { className?: string } = {}) {
const [hover, setHover] = useState(false);
const [focus, setFocus] = useState(false);
const [active, setActive] = useState(false);
@@ -132,12 +133,25 @@ export function useInteraction({
active,
hover,
focus,
onBlur: handleBlur,
onFocus: handleFocus,
onHoverIn: handleHoverIn,
onHoverOut: handleHoverOut,
onPress: handlePress,
onPressIn: handlePressIn,
onPressOut: handlePressOut,
onBlur: shouldAddHandler(className, "focus", handleBlur),
onFocus: shouldAddHandler(className, "focus", handleFocus),
onHoverIn: shouldAddHandler(className, "hover", handleHoverIn),
onHoverOut: shouldAddHandler(className, "hover", handleHoverOut),
onPress: shouldAddHandler(className, "active", handlePress),
onPressIn: shouldAddHandler(className, "active", handlePressIn),
onPressOut: shouldAddHandler(className, "active", handlePressOut),
};
}
function shouldAddHandler<T>(
className: string,
pseudoClass: string,
fn: T
): T | undefined {
if (
className.includes("component") ||
className.includes(`${pseudoClass}_`)
) {
return fn;
}
}