Skip to content

Commit 12eaa7b

Browse files
ron0115ron0115
committed
chore: sync the codesandbox and storybook
1 parent ccd9559 commit 12eaa7b

File tree

5 files changed

+144
-244
lines changed

5 files changed

+144
-244
lines changed

‎.storybook/main.js‎

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,14 @@
1+
const path = require('path');
2+
const basePath = path.resolve(__dirname, '../', 'src');
3+
14
module.exports = {
2-
stories: ['../stories/**/*.stories.(ts|tsx)'],
3-
addons: ['@storybook/addon-actions', '@storybook/addon-links', '@storybook/addon-docs'],
4-
webpackFinal: async (config) => {
5+
stories: ['../(stories|example)/**/*.stories.(ts|tsx)'],
6+
addons: [
7+
'@storybook/addon-actions',
8+
'@storybook/addon-links',
9+
'@storybook/addon-docs',
10+
],
11+
webpackFinal: async config => {
512
config.module.rules.push({
613
test: /\.(ts|tsx)$/,
714
use: [
@@ -16,7 +23,9 @@ module.exports = {
1623
},
1724
],
1825
});
19-
26+
config.resolve.alias = {
27+
'react-smooth-scroll-hook': basePath,
28+
};
2029
config.resolve.extensions.push('.ts', '.tsx');
2130

2231
return config;

example/Demo.tsx renamed to example/Demo.stories.tsx

Lines changed: 35 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,35 @@
1-
import useSmoothScroll from "react-smooth-scroll-hook";
2-
import React, { useRef } from "react";
3-
4-
export const Demo = () => {
5-
const ref = useRef<HTMLDivElement>(null);
6-
const { scrollTo } = useSmoothScroll({
7-
ref
8-
});
9-
10-
return (
11-
<>
12-
<button onClick={() => scrollTo("#y-item-20")}>
13-
scrollTo('#y-item-20')
14-
</button>
15-
<button onClick={() => scrollTo(400)}>scrollTo(400)</button>
16-
<br />
17-
<div
18-
ref={ref}
19-
style={{
20-
overflowY: "scroll",
21-
maxHeight: "200px",
22-
padding: "10px"
23-
}}
24-
>
25-
{Array(100)
26-
.fill(null)
27-
.map((_item, i) => (
28-
<div key={i} id={`y-item-${i}`}>
29-
y-item-{i}
30-
</div>
31-
))}
32-
</div>
33-
</>
34-
);
35-
};
1+
import useSmoothScroll from 'react-smooth-scroll-hook';
2+
import React, { useRef } from 'react';
3+
4+
export const Demo = () => {
5+
const ref = useRef<HTMLDivElement>(null);
6+
const { scrollTo } = useSmoothScroll({
7+
ref,
8+
});
9+
10+
return (
11+
<>
12+
<button onClick={() => scrollTo('#y-item-20')}>
13+
scrollTo('#y-item-20')
14+
</button>
15+
<button onClick={() => scrollTo(400)}>scrollTo(400)</button>
16+
<br />
17+
<div
18+
ref={ref}
19+
style={{
20+
overflowY: 'scroll',
21+
maxHeight: '200px',
22+
padding: '10px',
23+
}}
24+
>
25+
{Array(100)
26+
.fill(null)
27+
.map((_item, i) => (
28+
<div key={i} id={`y-item-${i}`}>
29+
y-item-{i}
30+
</div>
31+
))}
32+
</div>
33+
</>
34+
);
35+
};

example/DirectionX.tsx renamed to example/DirectionX.stories.tsx

Lines changed: 83 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -1,83 +1,83 @@
1-
import React, { useState, useRef } from "react";
2-
import useSmoothScroll from "react-smooth-scroll-hook";
3-
4-
export const DirectionX = () => {
5-
const [speed, setSpeed] = useState(50);
6-
const ref = useRef<HTMLDivElement>(null);
7-
const { scrollTo, reachTop, reachBottom, scrollToPage } = useSmoothScroll({
8-
ref,
9-
direction: "x",
10-
speed
11-
});
12-
const onChange = (evt: React.ChangeEvent<HTMLInputElement>) => {
13-
setSpeed(Number(evt.target.value));
14-
};
15-
return (
16-
<>
17-
<button onClick={() => scrollTo("#x-item-20")}>
18-
scrollTo('#x-item-20')
19-
</button>
20-
<button onClick={() => scrollTo(Infinity)}>
21-
scrollTo Edge - scrollTo(Infinity)
22-
</button>
23-
<button onClick={() => scrollTo(-Infinity)}>
24-
scrollTo Edge - scrollTo(-Infinity)
25-
</button>
26-
<button onClick={() => scrollTo(100)}>scrollTo(100)</button>
27-
<button onClick={() => scrollTo(-100)}>scrollTo(-100)</button>
28-
29-
<br />
30-
<div>
31-
speed:{speed}
32-
<br />
33-
<input
34-
value={speed}
35-
onChange={onChange}
36-
type="range"
37-
min={100}
38-
max={500}
39-
/>
40-
<br />
41-
reachTop: {String(reachTop)}
42-
<br />
43-
reachBottom: {String(reachBottom)}
44-
</div>
45-
<br />
46-
<button disabled={reachBottom} onClick={() => scrollToPage(1)}>
47-
scrollToPage(1)
48-
</button>
49-
<button disabled={reachTop} onClick={() => scrollToPage(-1)}>
50-
scrollToPage(-1)
51-
</button>
52-
53-
<div
54-
ref={ref}
55-
style={{
56-
overflowX: "scroll"
57-
}}
58-
>
59-
<div
60-
style={{
61-
display: "flex",
62-
padding: "10px"
63-
}}
64-
>
65-
{Array(50)
66-
.fill(null)
67-
.map((_item, i) => (
68-
<div
69-
key={i}
70-
id={`x-item-${i}`}
71-
style={{
72-
flexShrink: 0,
73-
padding: "10px"
74-
}}
75-
>
76-
x-item-{i}
77-
</div>
78-
))}
79-
</div>
80-
</div>
81-
</>
82-
);
83-
};
1+
import React, { useState, useRef } from 'react';
2+
import useSmoothScroll from 'react-smooth-scroll-hook';
3+
4+
export const DirectionX = () => {
5+
const [speed, setSpeed] = useState(50);
6+
const ref = useRef<HTMLDivElement>(null);
7+
const { scrollTo, reachTop, reachBottom, scrollToPage } = useSmoothScroll({
8+
ref,
9+
direction: 'x',
10+
speed,
11+
});
12+
const onChange = (evt: React.ChangeEvent<HTMLInputElement>) => {
13+
setSpeed(Number(evt.target.value));
14+
};
15+
return (
16+
<>
17+
<button onClick={() => scrollTo('#x-item-20')}>
18+
scrollTo('#x-item-20')
19+
</button>
20+
<button onClick={() => scrollTo(Infinity)}>
21+
scrollTo Edge - scrollTo(Infinity)
22+
</button>
23+
<button onClick={() => scrollTo(-Infinity)}>
24+
scrollTo Edge - scrollTo(-Infinity)
25+
</button>
26+
<button onClick={() => scrollTo(100)}>scrollTo(100)</button>
27+
<button onClick={() => scrollTo(-100)}>scrollTo(-100)</button>
28+
29+
<br />
30+
<div>
31+
speed:{speed}
32+
<br />
33+
<input
34+
value={speed}
35+
onChange={onChange}
36+
type="range"
37+
min={100}
38+
max={500}
39+
/>
40+
<br />
41+
reachTop: {String(reachTop)}
42+
<br />
43+
reachBottom: {String(reachBottom)}
44+
</div>
45+
<br />
46+
<button disabled={reachBottom} onClick={() => scrollToPage(1)}>
47+
scrollToPage(1)
48+
</button>
49+
<button disabled={reachTop} onClick={() => scrollToPage(-1)}>
50+
scrollToPage(-1)
51+
</button>
52+
53+
<div
54+
ref={ref}
55+
style={{
56+
overflowX: 'scroll',
57+
}}
58+
>
59+
<div
60+
style={{
61+
display: 'flex',
62+
padding: '10px',
63+
}}
64+
>
65+
{Array(50)
66+
.fill(null)
67+
.map((_item, i) => (
68+
<div
69+
key={i}
70+
id={`x-item-${i}`}
71+
style={{
72+
flexShrink: 0,
73+
padding: '10px',
74+
}}
75+
>
76+
x-item-{i}
77+
</div>
78+
))}
79+
</div>
80+
</div>
81+
</>
82+
);
83+
};

‎example/index.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
import "react-app-polyfill/ie11";
2-
import * as ReactDOM from "react-dom";
3-
import React from "react";
4-
import { Demo } from "./Demo";
5-
import { DirectionX } from "./DirectionX";
1+
// import "react-app-polyfill/ie11";
2+
import * as ReactDOM from 'react-dom';
3+
import React from 'react';
4+
import { Demo } from './Demo.stories';
5+
import { DirectionX } from './DirectionX.stories';
66
export default function App() {
77
return (
88
<div className="App">
@@ -15,4 +15,4 @@ export default function App() {
1515
);
1616
}
1717

18-
ReactDOM.render(<App />, document.getElementById("root"));
18+
ReactDOM.render(<App />, document.getElementById('root'));

0 commit comments

Comments
 (0)