Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Remove unnecessary styles from component #183

Merged
merged 1 commit into from
Sep 22, 2023
Merged

Remove unnecessary styles from component #183

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 0 additions & 2 deletions src/react/VGrid.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -133,7 +133,7 @@
minWidth: width,
};
return style;
}, [top, left, width, height, vHide, hHide])}

Check warning on line 136 in src/react/VGrid.tsx

View workflow job for this annotation

GitHub Actions / check 

React Hook useMemo has a missing dependency: 'isRtl'. Either include it or remove the dependency array
>
{children}
</Element>
Expand Down Expand Up @@ -396,7 +396,7 @@
},
};
},
[]

Check warning on line 399 in src/react/VGrid.tsx

View workflow job for this annotation

GitHub Actions / check 

React Hook useImperativeHandle has missing dependencies: 'hScroller', 'hStore', 'vScroller', and 'vStore'. Either include them or remove the dependency array
);

const render = useMemo(() => {
Expand Down Expand Up @@ -438,7 +438,7 @@
}

return res;
}, [

Check warning on line 441 in src/react/VGrid.tsx

View workflow job for this annotation

GitHub Actions / check 

React Hook useMemo has missing dependencies: 'ItemElement', 'hStore', 'isRtl', 'resizer', and 'vStore'. Either include them or remove the dependency array
render,
overscanedStartRowIndex,
overscanedEndRowIndex,
Expand All @@ -463,12 +463,10 @@
// backfaceVisibility: "hidden",
width: "100%",
height: "100%",
padding: 0,
margin: 0,
...viewportAttrs.style,
},
}),
values(viewportAttrs)

Check warning on line 469 in src/react/VGrid.tsx

View workflow job for this annotation

GitHub Actions / check 

React Hook useMemo was passed a dependency list that is not an array literal. This means we can't statically verify whether you've passed the correct dependencies

Check warning on line 469 in src/react/VGrid.tsx

View workflow job for this annotation

GitHub Actions / check 

React Hook useMemo has a missing dependency: 'viewportAttrs'. Either include it or remove the dependency array
)}
>
{items}
Expand Down
4 changes: 1 addition & 3 deletions src/react/VList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -266,13 +266,13 @@
if (!scrolling) {
onScrollStop[refKey] && onScrollStop[refKey]();
}
}, [scrolling]);

Check warning on line 269 in src/react/VList.tsx

View workflow job for this annotation

GitHub Actions / check 

React Hook useEffect has a missing dependency: 'onScrollStop'. Either include it or remove the dependency array

useEffect(() => {
if (!onRangeChangeProp) return;

onRangeChangeProp(startIndex, endIndex);
}, [startIndex, endIndex]);

Check warning on line 275 in src/react/VList.tsx

View workflow job for this annotation

GitHub Actions / check 

React Hook useEffect has a missing dependency: 'onRangeChangeProp'. Either include it or remove the dependency array. If 'onRangeChangeProp' changes too often, find the parent component that defines it and wrap that definition in useCallback

useImperativeHandle(
ref,
Expand All @@ -295,7 +295,7 @@
scrollBy: scroller._scrollBy,
};
},
[]

Check warning on line 298 in src/react/VList.tsx

View workflow job for this annotation

GitHub Actions / check 

React Hook useImperativeHandle has missing dependencies: 'scroller._scrollBy', 'scroller._scrollTo', 'scroller._scrollToIndex', and 'store'. Either include them or remove the dependency array
);

const overscanedStartIndex = max(startIndex - overscan, 0);
Expand All @@ -319,7 +319,7 @@
);
}
return res;
}, [elements, overscanedStartIndex, overscanedEndIndex]);

Check warning on line 322 in src/react/VList.tsx

View workflow job for this annotation

GitHub Actions / check 

React Hook useMemo has missing dependencies: 'ItemElement', 'isHorizontal', 'isRtl', 'resizer', and 'store'. Either include them or remove the dependency array

return (
<Viewport
Expand All @@ -331,7 +331,7 @@
() => ({
...viewportAttrs,
style: {
overflow: isHorizontal ? "auto hidden" : "hidden auto",
overflow: "auto",
display: isHorizontal ? "inline-block" : "block",
contain: "strict",
// transform: "translate3d(0px, 0px, 0px)",
Expand All @@ -341,8 +341,6 @@
// willChange: "transform",
width: "100%",
height: "100%",
padding: 0,
margin: 0,
...viewportAttrs.style,
},
}),
Expand Down
2 changes: 0 additions & 2 deletions src/react/WVList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -270,8 +270,6 @@ export const WVList = forwardRef<WVListHandle, WVListProps>(
// willChange: "transform",
width: isHorizontal ? "auto" : "100%",
height: isHorizontal ? "100%" : "auto",
padding: 0,
margin: 0,
...viewportAttrs.style,
},
}),
Expand Down
20 changes: 10 additions & 10 deletions src/react/__snapshots__/VGrid.spec.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
exports[`grid should render 1 children 1`] = `
<DocumentFragment>
<div
style="overflow: auto; contain: strict; width: 100%; height: 100%; padding: 0px; margin: 0px;"
style="overflow: auto; contain: strict; width: 100%; height: 100%;"
>
<div
style="position: relative; visibility: hidden; width: 100px; height: 50px; pointer-events: auto;"
Expand All @@ -23,7 +23,7 @@ exports[`grid should render 1 children 1`] = `
exports[`grid should render 4x4 children 1`] = `
<DocumentFragment>
<div
style="overflow: auto; contain: strict; width: 100%; height: 100%; padding: 0px; margin: 0px;"
style="overflow: auto; contain: strict; width: 100%; height: 100%;"
>
<div
style="position: relative; visibility: hidden; width: 400px; height: 200px; pointer-events: auto;"
Expand Down Expand Up @@ -148,7 +148,7 @@ exports[`grid should render 4x4 children 1`] = `
exports[`grid should render 100x100 children 1`] = `
<DocumentFragment>
<div
style="overflow: auto; contain: strict; width: 100%; height: 100%; padding: 0px; margin: 0px;"
style="overflow: auto; contain: strict; width: 100%; height: 100%;"
>
<div
style="position: relative; visibility: hidden; width: 10000px; height: 4040px; pointer-events: auto;"
Expand Down Expand Up @@ -273,7 +273,7 @@ exports[`grid should render 100x100 children 1`] = `
exports[`grid should render 1000x1000 children 1`] = `
<DocumentFragment>
<div
style="overflow: auto; contain: strict; width: 100%; height: 100%; padding: 0px; margin: 0px;"
style="overflow: auto; contain: strict; width: 100%; height: 100%;"
>
<div
style="position: relative; visibility: hidden; width: 100000px; height: 40040px; pointer-events: auto;"
Expand Down Expand Up @@ -398,7 +398,7 @@ exports[`grid should render 1000x1000 children 1`] = `
exports[`grid should render 10000x10000 children 1`] = `
<DocumentFragment>
<div
style="overflow: auto; contain: strict; width: 100%; height: 100%; padding: 0px; margin: 0px;"
style="overflow: auto; contain: strict; width: 100%; height: 100%;"
>
<div
style="position: relative; visibility: hidden; width: 1000000px; height: 400040px; pointer-events: auto;"
Expand Down Expand Up @@ -523,7 +523,7 @@ exports[`grid should render 10000x10000 children 1`] = `
exports[`grid should render component 1`] = `
<DocumentFragment>
<div
style="overflow: auto; contain: strict; width: 100%; height: 100%; padding: 0px; margin: 0px;"
style="overflow: auto; contain: strict; width: 100%; height: 100%;"
>
<div
style="position: relative; visibility: hidden; width: 10000px; height: 4040px; pointer-events: auto;"
Expand Down Expand Up @@ -648,7 +648,7 @@ exports[`grid should render component 1`] = `
exports[`grid should render fragments 1`] = `
<DocumentFragment>
<div
style="overflow: auto; contain: strict; width: 100%; height: 100%; padding: 0px; margin: 0px;"
style="overflow: auto; contain: strict; width: 100%; height: 100%;"
>
<div
style="position: relative; visibility: hidden; width: 100px; height: 100px; pointer-events: auto;"
Expand Down Expand Up @@ -681,7 +681,7 @@ exports[`grid should render fragments 1`] = `
exports[`grid should render non elements 1`] = `
<DocumentFragment>
<div
style="overflow: auto; contain: strict; width: 100%; height: 100%; padding: 0px; margin: 0px;"
style="overflow: auto; contain: strict; width: 100%; height: 100%;"
>
<div
style="position: relative; visibility: hidden; width: 100px; height: 280px; pointer-events: auto;"
Expand All @@ -708,7 +708,7 @@ exports[`grid should render non elements 1`] = `
exports[`grid should render with given width / height 1`] = `
<DocumentFragment>
<div
style="overflow: auto; contain: strict; width: 100px; height: 100px; padding: 0px; margin: 0px;"
style="overflow: auto; contain: strict; width: 100px; height: 100px;"
>
<div
style="position: relative; visibility: hidden; width: 400px; height: 200px; pointer-events: auto;"
Expand Down Expand Up @@ -837,7 +837,7 @@ exports[`should pass attributes to element 1`] = `
class="class"
id="id"
role="list"
style="overflow: auto; contain: strict; width: 100%; height: 100%; padding: 0px; margin: 0px; background: red;"
style="overflow: auto; contain: strict; width: 100%; height: 100%; background: red;"
tabindex="0"
>
<div
Expand Down
4 changes: 2 additions & 2 deletions src/react/__snapshots__/VGrid.ssr.spec.tsx.snap
View file
Open in desktop

Large diffs are not rendered by default.

46 changes: 23 additions & 23 deletions src/react/__snapshots__/VList.spec.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
exports[`horizontal should render 1 children 1`] = `
<DocumentFragment>
<div
style="overflow: auto hidden; display: inline-block; contain: strict; width: 100%; height: 100%; padding: 0px; margin: 0px;"
style="overflow: auto; display: inline-block; contain: strict; width: 100%; height: 100%;"
>
<div
style="position: relative; visibility: hidden; width: 100px; height: 100%; pointer-events: auto;"
Expand All @@ -23,7 +23,7 @@ exports[`horizontal should render 1 children 1`] = `
exports[`horizontal should render 5 children 1`] = `
<DocumentFragment>
<div
style="overflow: auto hidden; display: inline-block; contain: strict; width: 100%; height: 100%; padding: 0px; margin: 0px;"
style="overflow: auto; display: inline-block; contain: strict; width: 100%; height: 100%;"
>
<div
style="position: relative; visibility: hidden; width: 500px; height: 100%; pointer-events: auto;"
Expand Down Expand Up @@ -71,7 +71,7 @@ exports[`horizontal should render 5 children 1`] = `
exports[`horizontal should render 100 children 1`] = `
<DocumentFragment>
<div
style="overflow: auto hidden; display: inline-block; contain: strict; width: 100%; height: 100%; padding: 0px; margin: 0px;"
style="overflow: auto; display: inline-block; contain: strict; width: 100%; height: 100%;"
>
<div
style="position: relative; visibility: hidden; width: 10000px; height: 100%; pointer-events: auto;"
Expand Down Expand Up @@ -126,7 +126,7 @@ exports[`horizontal should render 100 children 1`] = `
exports[`horizontal should render 1000 children 1`] = `
<DocumentFragment>
<div
style="overflow: auto hidden; display: inline-block; contain: strict; width: 100%; height: 100%; padding: 0px; margin: 0px;"
style="overflow: auto; display: inline-block; contain: strict; width: 100%; height: 100%;"
>
<div
style="position: relative; visibility: hidden; width: 100000px; height: 100%; pointer-events: auto;"
Expand Down Expand Up @@ -181,7 +181,7 @@ exports[`horizontal should render 1000 children 1`] = `
exports[`horizontal should render 10000 children 1`] = `
<DocumentFragment>
<div
style="overflow: auto hidden; display: inline-block; contain: strict; width: 100%; height: 100%; padding: 0px; margin: 0px;"
style="overflow: auto; display: inline-block; contain: strict; width: 100%; height: 100%;"
>
<div
style="position: relative; visibility: hidden; width: 1000000px; height: 100%; pointer-events: auto;"
Expand Down Expand Up @@ -236,7 +236,7 @@ exports[`horizontal should render 10000 children 1`] = `
exports[`horizontal should render component 1`] = `
<DocumentFragment>
<div
style="overflow: auto hidden; display: inline-block; contain: strict; width: 100%; height: 100%; padding: 0px; margin: 0px;"
style="overflow: auto; display: inline-block; contain: strict; width: 100%; height: 100%;"
>
<div
style="position: relative; visibility: hidden; width: 300px; height: 100%; pointer-events: auto;"
Expand Down Expand Up @@ -270,7 +270,7 @@ exports[`horizontal should render component 1`] = `
exports[`horizontal should render fragments 1`] = `
<DocumentFragment>
<div
style="overflow: auto hidden; display: inline-block; contain: strict; width: 100%; height: 100%; padding: 0px; margin: 0px;"
style="overflow: auto; display: inline-block; contain: strict; width: 100%; height: 100%;"
>
<div
style="position: relative; visibility: hidden; width: 200px; height: 100%; pointer-events: auto;"
Expand Down Expand Up @@ -303,7 +303,7 @@ exports[`horizontal should render fragments 1`] = `
exports[`horizontal should render non elements 1`] = `
<DocumentFragment>
<div
style="overflow: auto hidden; display: inline-block; contain: strict; width: 100%; height: 100%; padding: 0px; margin: 0px;"
style="overflow: auto; display: inline-block; contain: strict; width: 100%; height: 100%;"
>
<div
style="position: relative; visibility: hidden; width: 200px; height: 100%; pointer-events: auto;"
Expand All @@ -326,7 +326,7 @@ exports[`horizontal should render non elements 1`] = `
exports[`horizontal should render with given width / height 1`] = `
<DocumentFragment>
<div
style="overflow: auto hidden; display: inline-block; contain: strict; width: 100px; height: 800px; padding: 0px; margin: 0px;"
style="overflow: auto; display: inline-block; contain: strict; width: 100px; height: 800px;"
>
<div
style="position: relative; visibility: hidden; width: 500px; height: 100%; pointer-events: auto;"
Expand Down Expand Up @@ -374,7 +374,7 @@ exports[`horizontal should render with given width / height 1`] = `
exports[`reverse should render many items 1`] = `
<DocumentFragment>
<div
style="overflow: hidden auto; display: block; contain: strict; width: 100%; height: 100%; padding: 0px; margin: 0px;"
style="overflow: auto; display: block; contain: strict; width: 100%; height: 100%;"
>
<div
style="position: relative; visibility: hidden; width: 100%; height: 5000px; pointer-events: auto;"
Expand Down Expand Up @@ -429,7 +429,7 @@ exports[`reverse should render many items 1`] = `
exports[`rtl should work in horizontal 1`] = `
<DocumentFragment>
<div
style="overflow: auto hidden; display: inline-block; contain: strict; width: 100%; height: 100%; padding: 0px; margin: 0px;"
style="overflow: auto; display: inline-block; contain: strict; width: 100%; height: 100%;"
>
<div
style="position: relative; visibility: hidden; width: 10000px; height: 100%; pointer-events: auto;"
Expand Down Expand Up @@ -484,7 +484,7 @@ exports[`rtl should work in horizontal 1`] = `
exports[`should change components 1`] = `
<DocumentFragment>
<div
style="overflow: hidden auto; display: block; contain: strict; width: 100%; height: 100%; padding: 0px; margin: 0px;"
style="overflow: auto; display: block; contain: strict; width: 100%; height: 100%;"
>
<ul
style="position: relative; height: 250px; margin: 0px;"
Expand Down Expand Up @@ -536,7 +536,7 @@ exports[`should pass attributes to element 1`] = `
class="class"
id="id"
role="list"
style="overflow: hidden auto; display: block; contain: strict; width: 100%; height: 100%; padding: 0px; margin: 0px; background: red;"
style="overflow: auto; display: block; contain: strict; width: 100%; height: 100%; background: red;"
tabindex="0"
>
<div
Expand All @@ -557,7 +557,7 @@ exports[`should pass attributes to element 1`] = `
exports[`vertical should render 0 children 1`] = `
<DocumentFragment>
<div
style="overflow: hidden auto; display: block; contain: strict; width: 100%; height: 100%; padding: 0px; margin: 0px;"
style="overflow: auto; display: block; contain: strict; width: 100%; height: 100%;"
>
<div
style="position: relative; visibility: hidden; width: 100%; height: 50px; pointer-events: auto;"
Expand All @@ -569,7 +569,7 @@ exports[`vertical should render 0 children 1`] = `
exports[`vertical should render 1 children 1`] = `
<DocumentFragment>
<div
style="overflow: hidden auto; display: block; contain: strict; width: 100%; height: 100%; padding: 0px; margin: 0px;"
style="overflow: auto; display: block; contain: strict; width: 100%; height: 100%;"
>
<div
style="position: relative; visibility: hidden; width: 100%; height: 50px; pointer-events: auto;"
Expand All @@ -589,7 +589,7 @@ exports[`vertical should render 1 children 1`] = `
exports[`vertical should render 5 children 1`] = `
<DocumentFragment>
<div
style="overflow: hidden auto; display: block; contain: strict; width: 100%; height: 100%; padding: 0px; margin: 0px;"
style="overflow: auto; display: block; contain: strict; width: 100%; height: 100%;"
>
<div
style="position: relative; visibility: hidden; width: 100%; height: 250px; pointer-events: auto;"
Expand Down Expand Up @@ -637,7 +637,7 @@ exports[`vertical should render 5 children 1`] = `
exports[`vertical should render 100 children 1`] = `
<DocumentFragment>
<div
style="overflow: hidden auto; display: block; contain: strict; width: 100%; height: 100%; padding: 0px; margin: 0px;"
style="overflow: auto; display: block; contain: strict; width: 100%; height: 100%;"
>
<div
style="position: relative; visibility: hidden; width: 100%; height: 5000px; pointer-events: auto;"
Expand Down Expand Up @@ -692,7 +692,7 @@ exports[`vertical should render 100 children 1`] = `
exports[`vertical should render 1000 children 1`] = `
<DocumentFragment>
<div
style="overflow: hidden auto; display: block; contain: strict; width: 100%; height: 100%; padding: 0px; margin: 0px;"
style="overflow: auto; display: block; contain: strict; width: 100%; height: 100%;"
>
<div
style="position: relative; visibility: hidden; width: 100%; height: 50000px; pointer-events: auto;"
Expand Down Expand Up @@ -747,7 +747,7 @@ exports[`vertical should render 1000 children 1`] = `
exports[`vertical should render 10000 children 1`] = `
<DocumentFragment>
<div
style="overflow: hidden auto; display: block; contain: strict; width: 100%; height: 100%; padding: 0px; margin: 0px;"
style="overflow: auto; display: block; contain: strict; width: 100%; height: 100%;"
>
<div
style="position: relative; visibility: hidden; width: 100%; height: 500000px; pointer-events: auto;"
Expand Down Expand Up @@ -802,7 +802,7 @@ exports[`vertical should render 10000 children 1`] = `
exports[`vertical should render component 1`] = `
<DocumentFragment>
<div
style="overflow: hidden auto; display: block; contain: strict; width: 100%; height: 100%; padding: 0px; margin: 0px;"
style="overflow: auto; display: block; contain: strict; width: 100%; height: 100%;"
>
<div
style="position: relative; visibility: hidden; width: 100%; height: 150px; pointer-events: auto;"
Expand Down Expand Up @@ -836,7 +836,7 @@ exports[`vertical should render component 1`] = `
exports[`vertical should render fragments 1`] = `
<DocumentFragment>
<div
style="overflow: hidden auto; display: block; contain: strict; width: 100%; height: 100%; padding: 0px; margin: 0px;"
style="overflow: auto; display: block; contain: strict; width: 100%; height: 100%;"
>
<div
style="position: relative; visibility: hidden; width: 100%; height: 100px; pointer-events: auto;"
Expand Down Expand Up @@ -869,7 +869,7 @@ exports[`vertical should render fragments 1`] = `
exports[`vertical should render non elements 1`] = `
<DocumentFragment>
<div
style="overflow: hidden auto; display: block; contain: strict; width: 100%; height: 100%; padding: 0px; margin: 0px;"
style="overflow: auto; display: block; contain: strict; width: 100%; height: 100%;"
>
<div
style="position: relative; visibility: hidden; width: 100%; height: 100px; pointer-events: auto;"
Expand All @@ -892,7 +892,7 @@ exports[`vertical should render non elements 1`] = `
exports[`vertical should render with given width / height 1`] = `
<DocumentFragment>
<div
style="overflow: hidden auto; display: block; contain: strict; width: 100px; height: 800px; padding: 0px; margin: 0px;"
style="overflow: auto; display: block; contain: strict; width: 100px; height: 800px;"
>
<div
style="position: relative; visibility: hidden; width: 100%; height: 250px; pointer-events: auto;"
Expand Down
Loading
Loading