DefinitelyTyped/types/react-swipeable/react-swipeable-tests.tsx
Jessica Franco 5c49d4ddc6 Reimplement styled-components with support for .withComponent, type-safe ref, and as (#30467)
* Add back context; add more helper context types and documentation

* Fix the handling of ref to properly exclude string refs where not supported

* Fix erroneous tests that got caught by the better Ref type

* Augment ComponentProps to support JSX.IntrinsicElements

* Add tests, doc comments for ComponentProps*

* Add self to Definitions by

* Add TODO comment

* Add comments about the "'ref' extends keyof P" checks

* Fix the handling of ref and props when using withComponent in styled-components

* Swap nesting order of mapped types to fix missing $ExpectErrors

* Comment out test that fails in TS@3.0

* Hack to deal with the tests not failing when they should

* Rewrite styled-components

* Bump version

* Bump minimum TypeScript version

* Update types of @rebass/grid (depends on styled-components)

* Update styled-react-modal types to 1.1 (also styled-components related)

* Reformat styled-components's index.d.ts
2018-11-13 16:57:37 +00:00

63 lines
2.3 KiB
TypeScript

import * as React from 'react';
import Swipeable = require('react-swipeable');
class SampleComponent extends React.PureComponent<Swipeable.SwipeableProps> {
private readonly handleSwiped: Swipeable.OnSwipedCallback = () => {};
private readonly handleSwiping: Swipeable.OnSwipingCallback = () => {};
private readonly handleSwipingUp: Swipeable.OnSwipingDirectionCallback = () => {};
private readonly handleSwipingRight: Swipeable.OnSwipingDirectionCallback = () => {};
private readonly handleSwipingDown: Swipeable.OnSwipingDirectionCallback = () => {};
private readonly handleSwipingLeft: Swipeable.OnSwipingDirectionCallback = () => {};
private readonly handleSwipedUp: Swipeable.OnSwipedDirectionCallback = () => {};
private readonly handleSwipedRight: Swipeable.OnSwipedDirectionCallback = () => {};
private readonly handleSwipedDown: Swipeable.OnSwipedDirectionCallback = () => {};
private readonly handleSwipedLeft: Swipeable.OnSwipedDirectionCallback = () => {};
private readonly handleTap: Swipeable.OnTapCallback = () => {};
private readonly handleClick = () => {};
private readonly swipeRef = React.createRef<HTMLElement>();
render() {
return (
<Swipeable
onSwiped={this.handleSwiped}
onSwiping={this.handleSwiping}
onSwipingUp={this.handleSwipingUp}
onSwipingRight={this.handleSwipingRight}
onSwipingDown={this.handleSwipingDown}
onSwipingLeft={this.handleSwipingLeft}
onSwipedUp={this.handleSwipedUp}
onSwipedRight={this.handleSwipedRight}
onSwipedDown={this.handleSwipedDown}
onSwipedLeft={this.handleSwipedLeft}
onTap={this.handleTap}
flickThreshold={10}
delta={10}
preventDefaultTouchmoveEvent
stopPropagation
nodeName="swipe"
trackMouse
disabled
innerRef={this.swipeRef}
onClick={this.handleClick}
>
<div>
This element can be swiped
</div>
</Swipeable>
);
}
}
class DivSwipeable extends Swipeable<HTMLDivElement> {}
const TestComponent: React.StatelessComponent = (_) => {
const handleSwiped = (event: React.TouchEvent<HTMLDivElement>) => {};
return (
<DivSwipeable
nodeName="div"
onSwiped={handleSwiped}
>
<div>this is sample code.</div>
</DivSwipeable>
);
};