1 |
|
2 | import React from 'react';
|
3 | import { storiesOf } from '@storybook/react';
|
4 | import { action } from '@storybook/addon-actions';
|
5 | import ZingTouch from '../src/components/zingTouch';
|
6 | import capitalize from '../src/util/capitalize';
|
7 |
|
8 | storiesOf('ZingTouch', module)
|
9 | .add('Gesture handlers', () => {
|
10 | const props = ['swipe', 'tap', 'pan', 'pinch', 'expand'].reduce((acc, eventName) => {
|
11 | acc[`on${capitalize(eventName)}`] = action(eventName);
|
12 | return acc;
|
13 | }, {});
|
14 | return (
|
15 | <ZingTouch {...props}>
|
16 | <div style={{ backgroundColor: 'yellow', width: 400, height: 400 }} />
|
17 | </ZingTouch>
|
18 | );
|
19 | })
|
20 | .add('Pass zingTouchRegion prop', () => {
|
21 | class SomeComponent extends React.Component<{}> {
|
22 | render() {
|
23 | return <div style={{ backgroundColor: 'blue', width: 400, height: 400 }} />;
|
24 | }
|
25 | }
|
26 |
|
27 | return (
|
28 | <ZingTouch>
|
29 | <SomeComponent />
|
30 | </ZingTouch>
|
31 | );
|
32 | })
|
33 | .add('Allow native zoom', () => {
|
34 | return (
|
35 | <ZingTouch onSwipe={() => {}}>
|
36 | <div style={{ backgroundColor: 'yellow', width: 400, height: 400 }} />
|
37 | </ZingTouch>
|
38 | );
|
39 | });
|