/
useSlider.story.tsx
43 lines (38 loc) Β· 1.4 KB
/
useSlider.story.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
import { storiesOf } from '@storybook/react';
import * as React from 'react';
import { useSlider } from '../src';
import ShowDocs from './util/ShowDocs';
const Demo = () => {
const ref = React.useRef(null);
const state = useSlider(ref);
return (
<div>
<div ref={ref} style={{ position: 'relative', background: 'yellow', padding: 4 }}>
<p style={{ margin: 0, textAlign: 'center' }}>Slide me</p>
<div style={{ position: 'absolute', top: 0, left: (100 * state.value) + '%', transform: 'scale(2)' }}>
{state.isSliding ? 'π' : 'πΏ'}
</div>
</div>
<pre>{JSON.stringify(state, null, 2)}</pre>
</div>
);
};
const DemoVertical = () => {
const ref = React.useRef(null);
const state = useSlider(ref, { vertical: true });
return (
<div>
<div ref={ref} style={{ position: 'relative', background: 'yellow', padding: 4, width: 30, height: 400 }}>
<p style={{ margin: 0, textAlign: 'center' }}>Slide me</p>
<div style={{ position: 'absolute', left: 0, top: (100 * state.value) + '%', transform: 'scale(2)' }}>
{state.isSliding ? 'π' : 'πΏ'}
</div>
</div>
<pre>{JSON.stringify(state, null, 2)}</pre>
</div>
);
};
storiesOf('UI|useSlider', module)
.add('Docs', () => <ShowDocs md={require('../docs/useSlider.md')} />)
.add('Horizontal', () => <Demo />)
.add('Vertical', () => <DemoVertical />);