Skip to content

Commit c003136

Browse files
flamecommitflamecommit
committed
v1.3.3
1 parent d253670 commit c003136

File tree

11 files changed

+157
-71
lines changed

11 files changed

+157
-71
lines changed

‎package-lock.json‎

Lines changed: 40 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package/.prettierrc.json‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
"semi": true,
33
"singleQuote": true,
44
"tabWidth": 2,
5-
"trailingComma": "all",
6-
"useTabs": false
5+
"trailingComma": "es5",
6+
"useTabs": false,
7+
"endOfLine": "auto"
78
}

‎package/CHANGE.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,9 @@
1+
## 1.3.3
2+
3+
### Fix
4+
5+
- activate the passive option of touchstart, touchmove.
6+
17
## 1.3.0
28

39
### What's New?

‎package/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@shinyongjun/react-fullpage",
3-
"version": "1.3.2",
3+
"version": "1.3.3",
44
"main": "./dist/cjs/index.js",
55
"module": "./dist/esm/index.js",
66
"source": "./src/index.tsx",

‎package/src/hooks/useSwipe.ts‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ const useSwipe = (
2727
}: {
2828
onSwipeStart?: () => void;
2929
onSwipeEnd?: (direction: SwipeDirection) => void;
30-
},
30+
}
3131
) => {
3232
useEffect(() => {
3333
let startX: number;
@@ -37,6 +37,7 @@ const useSwipe = (
3737
let isSwiping = false;
3838

3939
const handleTouchStart = (event: TouchEvent) => {
40+
console.log('touchstart');
4041
if (!ref.current || !event.touches[0]) return;
4142

4243
startX = event.touches[0].clientX;
@@ -49,6 +50,7 @@ const useSwipe = (
4950
};
5051

5152
const handleTouchMove = (event: TouchEvent) => {
53+
console.log('touchmove');
5254
if (!isSwiping || !ref.current || !event.touches[0]) return;
5355

5456
endX = event.touches[0].clientX;
@@ -75,8 +77,12 @@ const useSwipe = (
7577

7678
const element = ref.current;
7779

78-
element?.addEventListener('touchstart', handleTouchStart);
79-
element?.addEventListener('touchmove', handleTouchMove);
80+
element?.addEventListener('touchstart', handleTouchStart, {
81+
passive: true,
82+
});
83+
element?.addEventListener('touchmove', handleTouchMove, {
84+
passive: true,
85+
});
8086
element?.addEventListener('touchend', handleTouchEnd);
8187

8288
return () => {

‎test/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
"@testing-library/user-event": "^13.5.0",
99
"react": "^18.2.0",
1010
"react-dom": "^18.2.0",
11+
"react-router-dom": "^6.15.0",
1112
"react-scripts": "5.0.1",
1213
"web-vitals": "^2.1.4"
1314
},

‎test/src/App.tsx‎

Lines changed: 7 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -1,69 +1,14 @@
11
import * as React from 'react';
2-
import { useState } from 'react';
3-
import {
4-
FullpageContainer,
5-
FullpageSection,
6-
} from '@shinyongjun/react-fullpage';
7-
import FirstSection from './components/FirstSection';
8-
import FooterSection from './components/FooterSection';
9-
import SecondSection from './components/SecondSection';
10-
import ThirdSection from './components/ThirdSection';
2+
import { Route, Routes } from 'react-router-dom';
3+
import Home from './routes/home';
4+
import Fullpage from './routes/fullpage';
115

126
function App() {
13-
const [activeIndex, setActiveIndex] = useState<number>(2);
14-
157
return (
16-
<>
17-
<FullpageContainer
18-
transitionDuration={700}
19-
activeIndex={activeIndex}
20-
setActiveIndex={setActiveIndex}
21-
onBeforeChange={(beforeIndex, afterIndex) => {
22-
console.log('before', beforeIndex, afterIndex);
23-
}}
24-
onAfterChange={(beforeIndex, afterIndex) => {
25-
console.log('after', beforeIndex, afterIndex);
26-
}}
27-
onAfterLoad={(container) => {
28-
console.log('afterLoad', container);
29-
}}
30-
>
31-
<FullpageSection name="first">
32-
<FirstSection />
33-
</FullpageSection>
34-
<FullpageSection name="second">
35-
<SecondSection />
36-
</FullpageSection>
37-
<FullpageSection name="third">
38-
<ThirdSection />
39-
</FullpageSection>
40-
<FullpageSection name="footer" isAutoHeight>
41-
<FooterSection />
42-
</FullpageSection>
43-
</FullpageContainer>
44-
<div
45-
className="controller"
46-
style={{
47-
position: 'fixed',
48-
top: '50px',
49-
right: '50px',
50-
}}
51-
>
52-
<button type="button" onClick={() => setActiveIndex(0)}>
53-
go to 0
54-
</button>
55-
<button type="button" onClick={() => setActiveIndex(1)}>
56-
go to 1
57-
</button>
58-
<button type="button" onClick={() => setActiveIndex(2)}>
59-
go to 2
60-
</button>
61-
<button type="button" onClick={() => setActiveIndex(5)}>
62-
go to 5
63-
</button>
64-
<div>{activeIndex}</div>
65-
</div>
66-
</>
8+
<Routes>
9+
<Route path="/" element={<Home />} />
10+
<Route path="/fullpage" element={<Fullpage />} />
11+
</Routes>
6712
);
6813
}
6914

‎test/src/components/FirstSection.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
11
import * as React from 'react';
2+
import { Link } from 'react-router-dom';
23

34
function FirstSection() {
45
return (
56
<div
67
className="first-section"
78
style={{ width: '100%', backgroundColor: 'red' }}
89
>
9-
First Section
10+
<div>First Section</div>
11+
<Link to="/">Link to Home</Link>
1012
</div>
1113
);
1214
}

‎test/src/index.js‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,13 @@
11
import * as React from 'react';
22
import * as ReactDOM from 'react-dom/client';
33
import App from './App';
4+
import { BrowserRouter } from 'react-router-dom';
45

56
const root = ReactDOM.createRoot(document.getElementById('root'));
67
root.render(
78
<React.StrictMode>
8-
<App />
9+
<BrowserRouter>
10+
<App />
11+
</BrowserRouter>
912
</React.StrictMode>
1013
);

‎test/src/routes/fullpage.tsx‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
import * as React from 'react';
2+
import { useState } from 'react';
3+
import {
4+
FullpageContainer,
5+
FullpageSection,
6+
} from '@shinyongjun/react-fullpage';
7+
import FirstSection from '../components/FirstSection';
8+
import FooterSection from '../components/FooterSection';
9+
import SecondSection from '../components/SecondSection';
10+
import ThirdSection from '../components/ThirdSection';
11+
12+
function Fullpage() {
13+
const [activeIndex, setActiveIndex] = useState<number>(0);
14+
15+
return (
16+
<>
17+
<FullpageContainer
18+
transitionDuration={700}
19+
activeIndex={activeIndex}
20+
setActiveIndex={setActiveIndex}
21+
onBeforeChange={(beforeIndex, afterIndex) => {
22+
console.log('before', beforeIndex, afterIndex);
23+
}}
24+
onAfterChange={(beforeIndex, afterIndex) => {
25+
console.log('after', beforeIndex, afterIndex);
26+
}}
27+
onAfterLoad={(container) => {
28+
console.log('afterLoad', container);
29+
}}
30+
>
31+
<FullpageSection name="first">
32+
<FirstSection />
33+
</FullpageSection>
34+
<FullpageSection name="second">
35+
<SecondSection />
36+
</FullpageSection>
37+
<FullpageSection name="third">
38+
<ThirdSection />
39+
</FullpageSection>
40+
<FullpageSection name="footer" isAutoHeight>
41+
<FooterSection />
42+
</FullpageSection>
43+
</FullpageContainer>
44+
<div
45+
className="controller"
46+
style={{
47+
position: 'fixed',
48+
top: '50px',
49+
right: '50px',
50+
}}
51+
>
52+
<button type="button" onClick={() => setActiveIndex(0)}>
53+
go to 0
54+
</button>
55+
<button type="button" onClick={() => setActiveIndex(1)}>
56+
go to 1
57+
</button>
58+
<button type="button" onClick={() => setActiveIndex(2)}>
59+
go to 2
60+
</button>
61+
<button type="button" onClick={() => setActiveIndex(5)}>
62+
go to 5
63+
</button>
64+
<div>{activeIndex}</div>
65+
</div>
66+
</>
67+
);
68+
}
69+
70+
export default Fullpage;

0 commit comments

Comments
 (0)