Skip to content

Commit

Permalink
V6 typescript examples (#193)
Browse files Browse the repository at this point in the history
  • Loading branch information
@hartzis
hartzis committed Aug 17, 2020
1 parent 70fae9a commit 572708e
Show file tree
Hide file tree
Showing 13 changed files with 337 additions and 390 deletions.
3 changes: 0 additions & 3 deletions babel.config.js
View file

This file was deleted.

7 changes: 4 additions & 3 deletions examples/app/App.js → examples/app/App.tsx
View file
@@ -1,10 +1,11 @@
import React from 'react';
import * as React from 'react';
// @ts-ignore
import ScrollUp from 'react-scroll-up';
import FeatureTestConsole from './FeatureTestConsole.js';
import FeatureTestConsole from './FeatureTestConsole';

const scrollUpArrowStyles = { fontSize: '20px', border: '2px solid black', borderRadius: '50%', padding: '10px', background: 'white' };

export default function App({version}) {
export default function App({version}: {version: any}) {
return (
<div className="row">
<ScrollUp showUnder={20}
Expand Down
88 changes: 57 additions & 31 deletions examples/app/FeatureTestConsole.js → examples/app/FeatureTestConsole.tsx
View file
@@ -1,12 +1,11 @@
import React, {Component} from 'react';
import { Swipeable } from '../../src/index.js';
import { RowSimpleCheckbox } from './TableComponents.js';
import SwipeableHook from './SwipeableHook.js';
import { RowSimpleCheckbox } from './TableComponents';
import SwipeableHook from './SwipeableHook';

const DIRECTIONS = ['Left', 'Right', 'Up', 'Down'];

const persistSyntheticEvent = (func, persist) => {
return (e, ...rest) => {
const persistSyntheticEvent = (func: any, persist: any) => {
return (e: any, ...rest: any) => {
if (persist && e.persist) e.persist();
return func(e, ...rest);
}
Expand Down Expand Up @@ -37,30 +36,51 @@ const initialStateApplied = {
persistEvent: true,
};

export default class Main extends Component {
constructor(props) {
interface IState {
swiping: boolean;
swiped: boolean;
tap: boolean;
swipingDirection: string;
swipedDirection: string;
delta: string;
preventDefaultTouchmoveEvent: boolean;
trackMouse: boolean;
trackTouch: boolean;
rotationAngle: number | string;
showOnSwipeds: boolean;
onSwipingApplied: boolean;
onSwipedApplied: boolean;
onSwipedLeftApplied: boolean;
onSwipedRightApplied: boolean;
onSwipedUpApplied: boolean;
onSwipedDownApplied: boolean;
persistEvent: boolean;
}

export default class Main extends Component<any, IState> {
constructor(props: any) {
super(props);
this.state = Object.assign({}, initialState, initialStateSwipeable, initialStateApplied);
this.updateValue = this.updateValue.bind(this);
}

resetState(resetAll) {
resetState(resetAll?: boolean) {
if (resetAll) {
this.setState(Object.assign({}, initialState, initialStateSwipeable, initialStateApplied));
} else {
this.setState(initialState);
}
}

onSwiped(args) {
onSwiped(args: any) {
console.log('swiped args: ', args)
this.setState({
swiped: true,
swiping: false,
});
}

onSwiping(args) {
onSwiping(args: any) {
console.log('swiping args: ', args)

this.setState({
Expand All @@ -70,26 +90,29 @@ export default class Main extends Component {
});
}

onSwipedDirection(direction) {
onSwipedDirection(direction: any) {
this.setState({
swipedDirection: direction,
});
}

updateValue(type, value) {
this.setState({
[type]: value,
});
updateValue(type: string, value: any) {
// @ts-ignore
this.setState({ [type]: value, });
}

_renderAppliedDirRow(dir) {
_renderAppliedDirRow(dir: string) {
// @ts-ignore
const checked = this.state[`onSwiped${dir}Applied`];
// @ts-ignore
const cssJs = {color: this.state[`onSwiped${dir}Applied`] ? '#000000' : '#cccccc'}
return (
<tr key={`appliedDirRow${dir}`}>
<td className="text-center">
<input type="checkbox" style={{margin: "0"}} checked={this.state[`onSwiped${dir}Applied`]}
<input type="checkbox" style={{margin: "0"}} checked={checked}
onChange={(e)=>this.updateValue(`onSwiped${dir}Applied`, e.target.checked)} />
</td>
<td style={{color: this.state[`onSwiped${dir}Applied`] ? '#000000' : '#cccccc'}}>{dir}</td>
<td style={cssJs}>{dir}</td>
</tr>
)
}
Expand All @@ -111,20 +134,22 @@ export default class Main extends Component {
rotationAngle,
} = this.state;

const isDeltaNumber = !(isNaN(delta) || delta === '');
const isRotationAngleNumber = !(isNaN(rotationAngle) || rotationAngle === '');
const isDeltaNumber = !(isNaN(delta as any) || delta === '');
const isRotationAngleNumber = !(isNaN(rotationAngle as any) || rotationAngle === '');
const deltaNum = isDeltaNumber ? +delta : 10;
const rotationAngleNum = isRotationAngleNumber ? +rotationAngle : 0;

const swipeableStyle = {fontSize: "0.75rem"};

const boundSwipes = getBoundSwipes(this);
let swipeableDirProps = {};
let swipeableDirProps: any = {};
if (onSwipingApplied) {
swipeableDirProps.onSwiping = persistSyntheticEvent((...args)=>this.onSwiping(...args), persistEvent);
// @ts-ignore
swipeableDirProps.onSwiping = persistSyntheticEvent((...args: any)=>this.onSwiping(...args), persistEvent);
}
if (onSwipedApplied) {
swipeableDirProps.onSwiped = persistSyntheticEvent((...args)=>this.onSwiped(...args), persistEvent);
// @ts-ignore
swipeableDirProps.onSwiped = persistSyntheticEvent((...args: any)=>this.onSwiped(...args), persistEvent);
}

return (
Expand All @@ -144,7 +169,7 @@ export default class Main extends Component {
<div onTouchStart={()=>this.resetState()}>
<h5>Hook - Swipe inside here to test</h5>
<p>See output below and check the console for 'onSwiping' and 'onSwiped' callback output(open dev tools)</p>
<span>You can also 'toggle' the swip(ed/ing) props being applied to this container below.</span>
<span>You can also 'toggle' the swiped props being applied to this container below.</span>
</div>
</SwipeableHook>
<table>
Expand Down Expand Up @@ -179,10 +204,10 @@ export default class Main extends Component {
<td>onSwiped Direction</td><td>{swipedDirection}</td>
</tr>
{showOnSwipeds && <tr>
<td className="text-center" colSpan="3">
<td className="text-center" colSpan={3}>
<table id="appliedDirs">
<thead>
<tr><th colSpan="2" className="text-center">onSwiped</th></tr>
<tr><th colSpan={2} className="text-center">onSwiped</th></tr>
<tr><th>Applied?</th><th>Direction</th></tr>
</thead>
<tbody>
Expand All @@ -192,15 +217,15 @@ export default class Main extends Component {
</td>
</tr>}
<tr>
<td colSpan="2" className="text-center">delta:</td>
<td colSpan={2} className="text-center">delta:</td>
<td>
<input type="text"
style={{margin: '0px', border: !isDeltaNumber ? '2px solid red' : ''}}
onChange={(e)=>this.updateValue('delta', getVal(e))} value={delta}/>
</td>
</tr>
<tr>
<td colSpan="2" className="text-center">rotationAngle:</td>
<td colSpan={2} className="text-center">rotationAngle:</td>
<td>
<input type="text"
style={{margin: '0px', border: !isRotationAngleNumber ? '2px solid red' : ''}}
Expand All @@ -223,7 +248,7 @@ export default class Main extends Component {
onChange={this.updateValue}
/>
<tr>
<td colSpan="2" className="text-center">Persist React Events for logging:</td>
<td colSpan={2} className="text-center">Persist React Events for logging:</td>
<td style={{textAlign: "center"}}>
<input style={{margin: "0px"}}
type="checkbox"
Expand All @@ -245,17 +270,18 @@ export default class Main extends Component {
}
}

function getBoundSwipes(component) {
function getBoundSwipes(component: any) {
const {persistEvent} = component.state;
let boundSwipes = {};
DIRECTIONS.forEach((dir)=>{
if (component.state[`onSwiped${dir}Applied`]) {
// @ts-ignore
boundSwipes[`onSwiped${dir}`] = persistSyntheticEvent(component.onSwipedDirection.bind(component, dir), persistEvent);
}
});
return boundSwipes;
}

function getVal(e) {
function getVal(e: any) {
return e.target.value;
}
2 changes: 1 addition & 1 deletion examples/app/SwipeableHook.js → examples/app/SwipeableHook.tsx
View file
@@ -1,7 +1,7 @@
import React from 'react';
import { useSwipeable } from '../../src/index';

function SwipeableHook(props) {
function SwipeableHook(props: any) {
const { children, className, style, ...rest } = props;
const eventHandlers = useSwipeable(rest);
return (<div {...eventHandlers} style={style} className={className}>{children}</div>);
Expand Down
4 changes: 2 additions & 2 deletions examples/app/TableComponents.js → examples/app/TableComponents.tsx
View file
@@ -1,9 +1,9 @@
import React from 'react';

export function RowSimpleCheckbox({ value, name, displayText, onChange }) {
export function RowSimpleCheckbox({ value, name, displayText, onChange }: { value: any, name: string, displayText?: string, onChange: any }) {
return (
<tr>
<td colSpan="2" className="text-center">{displayText || name}:</td>
<td colSpan={2} className="text-center">{displayText || name}:</td>
<td style={{textAlign: "center"}}>
<input style={{margin: "0"}}
type="checkbox"
Expand Down
5 changes: 0 additions & 5 deletions examples/index.js
View file

This file was deleted.

6 changes: 6 additions & 0 deletions examples/index.tsx
View file
@@ -0,0 +1,6 @@
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './app/App';

// @ts-ignore
ReactDOM.render( <App version={SWIPEABLE_VERSION} />, document.getElementById('app') );
20 changes: 7 additions & 13 deletions examples/webpack.config.js
View file
Expand Up @@ -4,33 +4,27 @@ var webpack = require('webpack')
module.exports = {
devtool: 'cheap-module-eval-source-map',
entry: ['./index'],
resolve: {
extensions: [ '.tsx', '.ts', '.js' ],
},
output: {
path: path.join(__dirname, 'static'),
publicPath: '/static/',
filename: 'bundle.js'
},
plugins: [
new webpack.DefinePlugin({
// retrive react-swipable version to display on demo page
// retrieve react-swipeable version to display on demo page
SWIPEABLE_VERSION: JSON.stringify(require('../package.json').version)
})
],
module: {
rules: [
{
test: /\.js$/,
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env', '@babel/react'],
plugins: [
'@babel/plugin-proposal-class-properties',
'@babel/plugin-proposal-object-rest-spread'
]
}
}
}
},
]
}
}
20 changes: 7 additions & 13 deletions examples/webpack.config.min.js
View file
Expand Up @@ -5,6 +5,9 @@ module.exports = {
devtool: 'eval',
mode: 'production',
entry: ['./examples/index'],
resolve: {
extensions: [ '.tsx', '.ts', '.js' ],
},
output: {
path: path.join(__dirname, 'static'),
publicPath: '/static/',
Expand All @@ -13,26 +16,17 @@ module.exports = {
plugins: [
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('production'),
// retrive react-swipable version to display on demo page
// retrieve react-swipeable version to display on demo page
SWIPEABLE_VERSION: JSON.stringify(require('../package.json').version)
})
],
module: {
rules: [
{
test: /\.js$/,
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env', '@babel/react'],
plugins: [
'@babel/plugin-proposal-class-properties',
'@babel/plugin-proposal-object-rest-spread'
]
}
}
}
},
]
}
}
8 changes: 2 additions & 6 deletions package.json
View file
Expand Up @@ -68,17 +68,12 @@
],
"license": "MIT",
"devDependencies": {
"@babel/plugin-proposal-class-properties": "^7.2.0",
"@babel/plugin-proposal-object-rest-spread": "^7.2.0",
"@babel/preset-env": "^7.2.0",
"@babel/preset-react": "^7.10.4",
"@testing-library/react": "^10.4.3",
"@types/jest": "^26.0.4",
"@types/react": "^16.8.12",
"@types/react-dom": "^16.9.8",
"@typescript-eslint/eslint-plugin": "^3.6.1",
"@typescript-eslint/parser": "^3.6.1",
"babel-jest": "^26.1.0",
"babel-loader": "^8.0.5",
"coveralls": "^3.0.3",
"eslint": "^7.4.0",
"eslint-config-prettier": "^6.11.0",
Expand All @@ -96,6 +91,7 @@
"rollup-plugin-babel": "^4.3.2",
"size-limit": "^1.3.5",
"ts-jest": "^26.1.2",
"ts-loader": "^8.0.1",
"typescript": "^3.9.6",
"webpack": "^4.29.0",
"webpack-cli": "^3.2.1",
Expand Down
2 changes: 1 addition & 1 deletion tsconfig.all.json
View file
@@ -1,4 +1,4 @@
{
"extends": "./tsconfig.base.json",
"include": ["src/**/*", "__tests__"],
"include": ["src/**/*", "examples/**/*", "__tests__"],
}
2 changes: 1 addition & 1 deletion tsconfig.base.json
View file
Expand Up @@ -12,7 +12,7 @@
"noUnusedParameters": true,
"outDir": "lib/",
"pretty": true,
"rootDirs": ["./src", "./stories"],
"rootDirs": ["./src"],
"skipLibCheck": true,
"sourceMap": true,
"strict": true,
Expand Down

0 comments on commit 572708e

Please sign in to comment.