From 8782e550c2b4ae16a40d7da4fe88d74a0ef1d435 Mon Sep 17 00:00:00 2001 From: silentcloud Date: Fri, 8 Jul 2016 18:16:20 +0800 Subject: [PATCH 1/4] save code --- .gitignore | 3 ++ examples/{left.js => left.tsx} | 4 +- examples/reactNative.tsx | 32 ++++++++++++ examples/{right.js => right.tsx} | 4 +- examples/{simple.js => simple.tsx} | 4 +- index.js | 3 +- package.json | 15 +++--- src/Swipeout.tsx | 72 +++++++++++++++++++++++++++ src/{Swipeout.js => Swipeout.web.tsx} | 15 ++++-- src/SwipeoutProps.tsx | 12 +++++ src/index.js | 2 - src/index.tsx | 1 + src/index.web.tsx | 1 + src/styles.tsx | 9 ++++ src/util/splitObject.tsx | 12 +++++ tests/index.js | 3 +- tests/{usage.spec.js => usage.tsx} | 6 +-- tsconfig.json | 7 +++ typings.json | 7 +++ 19 files changed, 187 insertions(+), 25 deletions(-) rename examples/{left.js => left.tsx} (92%) create mode 100644 examples/reactNative.tsx rename examples/{right.js => right.tsx} (92%) rename examples/{simple.js => simple.tsx} (94%) create mode 100644 src/Swipeout.tsx rename src/{Swipeout.js => Swipeout.web.tsx} (93%) create mode 100644 src/SwipeoutProps.tsx delete mode 100644 src/index.js create mode 100644 src/index.tsx create mode 100644 src/index.web.tsx create mode 100644 src/styles.tsx create mode 100644 src/util/splitObject.tsx rename tests/{usage.spec.js => usage.tsx} (98%) create mode 100644 tsconfig.json create mode 100644 typings.json diff --git a/.gitignore b/.gitignore index 6d2037a..c9110ec 100644 --- a/.gitignore +++ b/.gitignore @@ -20,3 +20,6 @@ node_modules dist build lib +coverage +typings/ +*.js diff --git a/examples/left.js b/examples/left.tsx similarity index 92% rename from examples/left.js rename to examples/left.tsx index f91ccff..94191f8 100644 --- a/examples/left.js +++ b/examples/left.tsx @@ -1,7 +1,7 @@ import 'rc-swipeout/assets/index.less'; import Swipeout from 'rc-swipeout'; -import React from 'react'; -import ReactDOM from 'react-dom'; +import * as React from 'react'; +import * as ReactDOM from 'react-dom'; ReactDOM.render(
diff --git a/examples/reactNative.tsx b/examples/reactNative.tsx new file mode 100644 index 0000000..ac4fde9 --- /dev/null +++ b/examples/reactNative.tsx @@ -0,0 +1,32 @@ +import { Text, AppRegistry } from 'react-native'; +import Swipeout from '../src'; +import * as React from 'react'; + +class SwipeoutExample extends React.Component { + render() { + return ( + console.log('read'), + style: { backgroundColor: 'blue', color: 'white' }, + }, + { + text: 'reply', + onPress: () => console.log('reply'), + style: { backgroundColor: 'green', color: 'white' }, + }, + ]} + onOpen={() => console.log('open')} + onClose={() => console.log('close')} + > + this is Demo + + ); + } +} + +AppRegistry.registerComponent('kitchen-sink', () => SwipeoutExample); diff --git a/examples/right.js b/examples/right.tsx similarity index 92% rename from examples/right.js rename to examples/right.tsx index eacf7f6..36c12e2 100644 --- a/examples/right.js +++ b/examples/right.tsx @@ -1,7 +1,7 @@ import 'rc-swipeout/assets/index.less'; import Swipeout from 'rc-swipeout'; -import React from 'react'; -import ReactDOM from 'react-dom'; +import * as React from 'react'; +import * as ReactDOM from 'react-dom'; ReactDOM.render(
diff --git a/examples/simple.js b/examples/simple.tsx similarity index 94% rename from examples/simple.js rename to examples/simple.tsx index 233f8f6..544f22b 100644 --- a/examples/simple.js +++ b/examples/simple.tsx @@ -1,7 +1,7 @@ import 'rc-swipeout/assets/index.less'; import Swipeout from 'rc-swipeout'; -import React from 'react'; -import ReactDOM from 'react-dom'; +import * as React from 'react'; +import * as ReactDOM from 'react-dom'; ReactDOM.render(
diff --git a/index.js b/index.js index 60cc4e5..86dbf69 100644 --- a/index.js +++ b/index.js @@ -1 +1,2 @@ -module.exports = require('./src/'); \ No newline at end of file +import Swipeout from './src/'; +export default Swipeout; \ No newline at end of file diff --git a/package.json b/package.json index 4a97a7a..b0f2d54 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "rc-swipeout", "version": "1.0.2", - "description": "swipe out ui component for react", + "description": "swipe out ui component for react(web and react-native)", "keywords": [ "react", "react-component", @@ -23,21 +23,22 @@ "assets/*.css" ], "licenses": "MIT", - "main": "./lib/index", + "main": "./lib/index.web", "config": { "port": 8000 }, "scripts": { + "watch-tsc": "rc-tools run watch-tsc", "build": "rc-tools run build", "gh-pages": "rc-tools run gh-pages", "start": "rc-tools run server", "pub": "rc-tools run pub", - "lint": "rc-tools run lint", + "lint": "rc-tools run lint --no-js-lint", "karma": "rc-tools run karma", - "saucelabs": "rc-tools run saucelabs", "test": "rc-tools run test", "chrome-test": "rc-tools run chrome-test", - "coverage": "rc-tools run coverage" + "coverage": "rc-tools run coverage", + "rn-start": "node node_modules/react-native/local-cli/cli.js start" }, "dependencies": { "react-hammerjs": "^0.4.6" @@ -49,8 +50,10 @@ "rc-tools": "5.x", "react": "0.14.x", "react-addons-test-utils": "0.14.x", - "react-dom": "0.14.x" + "react-dom": "0.14.x", + "react-native": "0.28.0" }, + "typings": "./lib/index.web.d.ts", "pre-commit": [ "lint" ] diff --git a/src/Swipeout.tsx b/src/Swipeout.tsx new file mode 100644 index 0000000..ea62b1e --- /dev/null +++ b/src/Swipeout.tsx @@ -0,0 +1,72 @@ +import { PropTypes } from 'react'; +import * as React from 'react'; +import { View, PanResponder } from 'react-native'; +import SwipeoutProps from './SwipeoutProps'; + +class Swipeout extends React.Component { + static propTypes = { + prefixCls: PropTypes.string, + autoClose: PropTypes.bool, + disabled: PropTypes.bool, + left: PropTypes.arrayOf(PropTypes.object), + right: PropTypes.arrayOf(PropTypes.object), + onOpen: PropTypes.func, + onClose: PropTypes.func, + children: PropTypes.any, + }; + + static defaultProps = { + autoClose: false, + disabled: false, + left: [], + right: [], + onOpen() {}, + onClose() {}, + }; + + componentWillMount() { + this._panResponder = PanResponder.create({ + onStartShouldSetPanResponder: (event, gestureState) => true, + onMoveShouldSetPanResponder: (event, gestureState) => + Math.abs(gestureState.dx) > this.props.sensitivity && + Math.abs(gestureState.dy) > this.props.sensitivity, + onPanResponderGrant: this._handlePanResponderGrant, + onPanResponderMove: this._handlePanResponderMove, + onPanResponderRelease: this._handlePanResponderEnd, + onPanResponderTerminate: this._handlePanResponderEnd, + onShouldBlockNativeResponder: (event, gestureState) => true, + }); + } + + _handlePanResponderGrant = (e, gestureState) => { + + } + + _handlePanResponderMove = (e, gestureState) => { + + } + + _handlePanResponderEnd = (e, gestureState) => { + + } + + render() { + const { autoClose, backgroundColor, left, right, children } = this.props; + + return (left.length || right.length) ? ( + + + {this.props.children} + + { this._renderButtons(this.props.right, isRightVisible, styleRight) } + { this._renderButtons(this.props.left, isLeftVisible, styleLeft) } + + ) : null; + } +} + +export default Swipeout; diff --git a/src/Swipeout.js b/src/Swipeout.web.tsx similarity index 93% rename from src/Swipeout.js rename to src/Swipeout.web.tsx index 0a85fa2..c3836f3 100644 --- a/src/Swipeout.js +++ b/src/Swipeout.web.tsx @@ -1,7 +1,9 @@ import React, { PropTypes } from 'react'; import Hammer from 'react-hammerjs'; +import splitObject from './util/splitObject'; +import SwipeoutProps from './SwipeoutProps'; -class Swipeout extends React.Component { +class Swipeout extends React.Component { static propTypes = { prefixCls: PropTypes.string, autoClose: PropTypes.bool, @@ -11,7 +13,7 @@ class Swipeout extends React.Component { onOpen: PropTypes.func, onClose: PropTypes.func, children: PropTypes.any, - } + }; static defaultProps = { prefixCls: 'rc-swipeout', @@ -21,7 +23,7 @@ class Swipeout extends React.Component { right: [], onOpen() {}, onClose() {}, - } + }; constructor(props) { super(props); @@ -198,10 +200,13 @@ class Swipeout extends React.Component { } render() { - const { prefixCls, left, right, children, ...others } = this.props; + let [{prefixCls, left, right, children}, restProps] = splitObject( + this.props, + ['prefixCls', 'left', 'right', 'children'] + ); return (left.length || right.length) ? ( -
+
; + right?:Array<{}>; + onOpen:() => void; + children:any; + /** web only */ + prefixCls?:string; +} + +export default SwipeoutProps; diff --git a/src/index.js b/src/index.js deleted file mode 100644 index e3543d7..0000000 --- a/src/index.js +++ /dev/null @@ -1,2 +0,0 @@ -import Swipeout from './Swipeout'; -export default Swipeout; diff --git a/src/index.tsx b/src/index.tsx new file mode 100644 index 0000000..e196e39 --- /dev/null +++ b/src/index.tsx @@ -0,0 +1 @@ +export { default } from './Swipeout'; diff --git a/src/index.web.tsx b/src/index.web.tsx new file mode 100644 index 0000000..e0d152f --- /dev/null +++ b/src/index.web.tsx @@ -0,0 +1 @@ +export { default } from './Swipeout.web'; diff --git a/src/styles.tsx b/src/styles.tsx new file mode 100644 index 0000000..b0f23ef --- /dev/null +++ b/src/styles.tsx @@ -0,0 +1,9 @@ +import { + StyleSheet, +} from 'react-native'; + +const styles = StyleSheet.create({ + +}); + +export default styles; diff --git a/src/util/splitObject.tsx b/src/util/splitObject.tsx new file mode 100644 index 0000000..4515a80 --- /dev/null +++ b/src/util/splitObject.tsx @@ -0,0 +1,12 @@ +export default function splitObject(obj, parts) { + let left = {}; + let right = {}; + Object.keys(obj).forEach((k) => { + if (parts.indexOf(k) !== -1) { + left[k] = obj[k]; + } else { + right[k] = obj[k]; + } + }); + return [left, right]; +} diff --git a/tests/index.js b/tests/index.js index 2e43f47..17b4a7d 100644 --- a/tests/index.js +++ b/tests/index.js @@ -1,3 +1,2 @@ require('../assets/index.less'); -const req = require.context('.', false, /\.spec\.js$/); -req.keys().forEach(req); +import "./usage"; diff --git a/tests/usage.spec.js b/tests/usage.tsx similarity index 98% rename from tests/usage.spec.js rename to tests/usage.tsx index c1164ed..232a0e5 100644 --- a/tests/usage.spec.js +++ b/tests/usage.tsx @@ -1,7 +1,7 @@ const expect = require('expect.js'); -const React = require('react'); -const ReactDOM = require('react-dom'); -const TestUtils = require('react-addons-test-utils'); +import * as React from 'react'; +import * as ReactDOM from 'react-dom'; +import TestUtils from 'react-addons-test-utils'; require('hammer-simulator'); const Simulator = window.Simulator; Simulator.setType('pointer'); diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000..de6423c --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,7 @@ +{ + "compilerOptions": { + "moduleResolution": "node", + "jsx": "react", + "target": "es6" + } +} \ No newline at end of file diff --git a/typings.json b/typings.json new file mode 100644 index 0000000..b478bb0 --- /dev/null +++ b/typings.json @@ -0,0 +1,7 @@ +{ + "globalDependencies": { + "react": "registry:dt/react#0.14.0+20160630100702", + "react-dom": "registry:dt/react-dom#0.14.0+20160412154040", + "react-native": "registry:dt/react-native#0.27.0+20160619030006" + } +} \ No newline at end of file From 04183ae08492836157d067dc676b56159d84e516 Mon Sep 17 00:00:00 2001 From: silentcloud Date: Mon, 11 Jul 2016 19:02:28 +0800 Subject: [PATCH 2/4] save code --- .gitignore | 2 + package.json | 9 ++-- src/Swipeout.tsx | 104 +++++++++++++++++++++++++++--------------- src/Swipeout.web.tsx | 9 +++- src/SwipeoutProps.tsx | 1 + src/styles.tsx | 9 ---- 6 files changed, 84 insertions(+), 50 deletions(-) delete mode 100644 src/styles.tsx diff --git a/.gitignore b/.gitignore index c9110ec..43e9656 100644 --- a/.gitignore +++ b/.gitignore @@ -23,3 +23,5 @@ lib coverage typings/ *.js +ios +android diff --git a/package.json b/package.json index b0f2d54..e2ab284 100644 --- a/package.json +++ b/package.json @@ -41,16 +41,17 @@ "rn-start": "node node_modules/react-native/local-cli/cli.js start" }, "dependencies": { - "react-hammerjs": "^0.4.6" + "react-hammerjs": "^0.5.0", + "react-native-swipeout": "https://github.com/dancormier/react-native-swipeout.git#master" }, "devDependencies": { "expect.js": "0.3.x", "hammer-simulator": "0.0.1", "pre-commit": "1.x", "rc-tools": "5.x", - "react": "0.14.x", - "react-addons-test-utils": "0.14.x", - "react-dom": "0.14.x", + "react": "~15.2.1", + "react-addons-test-utils": "~15.2.1", + "react-dom": "~15.2.1", "react-native": "0.28.0" }, "typings": "./lib/index.web.d.ts", diff --git a/src/Swipeout.tsx b/src/Swipeout.tsx index ea62b1e..db4abba 100644 --- a/src/Swipeout.tsx +++ b/src/Swipeout.tsx @@ -1,6 +1,8 @@ import { PropTypes } from 'react'; import * as React from 'react'; -import { View, PanResponder } from 'react-native'; +import { View, Text } from 'react-native'; +import Swipe from 'react-native-swipeout'; +import splitObject from './util/splitObject'; import SwipeoutProps from './SwipeoutProps'; class Swipeout extends React.Component { @@ -11,7 +13,6 @@ class Swipeout extends React.Component { left: PropTypes.arrayOf(PropTypes.object), right: PropTypes.arrayOf(PropTypes.object), onOpen: PropTypes.func, - onClose: PropTypes.func, children: PropTypes.any, }; @@ -21,51 +22,82 @@ class Swipeout extends React.Component { left: [], right: [], onOpen() {}, - onClose() {}, }; - componentWillMount() { - this._panResponder = PanResponder.create({ - onStartShouldSetPanResponder: (event, gestureState) => true, - onMoveShouldSetPanResponder: (event, gestureState) => - Math.abs(gestureState.dx) > this.props.sensitivity && - Math.abs(gestureState.dy) > this.props.sensitivity, - onPanResponderGrant: this._handlePanResponderGrant, - onPanResponderMove: this._handlePanResponderMove, - onPanResponderRelease: this._handlePanResponderEnd, - onPanResponderTerminate: this._handlePanResponderEnd, - onShouldBlockNativeResponder: (event, gestureState) => true, - }); - } - - _handlePanResponderGrant = (e, gestureState) => { - + constructor(props) { + super(props); + this.state = { + show: false, + paddingTop: 0, + }; } - _handlePanResponderMove = (e, gestureState) => { - + _onBtnLayout = (event) => { + const { width, height } = event.nativeEvent.layout; + this.setState({ + paddingTop: (height - 12) / 2, + }, () => { + this.setState({ + show: true + }) + }); } - _handlePanResponderEnd = (e, gestureState) => { - + renderCustomButton(button) { + const buttonStyle = button.style || {}; + const bgColor = buttonStyle.backgroundColor || 'transparent'; + const component = ( + + + {button.text} + + + ); + return { + text: button.text || 'Click', + onPress: button.onPress, + type: 'default', + component: component, + backgroundColor: 'transparent', + color: '#999', + disabled: false + }; } render() { - const { autoClose, backgroundColor, left, right, children } = this.props; + let [{disabled, autoClose, style, left, right, onOpen, children}, restProps] = splitObject( + this.props, + ['disabled', 'autoClose', 'style', 'left', 'right', 'onOpen', 'children'] + ); + + const cutsomLeft = left.map(btn => { + return this.renderCustomButton(btn); + }); + const cutsomRight = right.map(btn => { + return this.renderCustomButton(btn); + }); - return (left.length || right.length) ? ( - - - {this.props.children} - - { this._renderButtons(this.props.right, isRightVisible, styleRight) } - { this._renderButtons(this.props.left, isLeftVisible, styleLeft) } + return (left.length || right.length) && !disabled ? ( + + {children} + + ) : ( + + {children} - ) : null; + ); } } diff --git a/src/Swipeout.web.tsx b/src/Swipeout.web.tsx index c3836f3..ddb5480 100644 --- a/src/Swipeout.web.tsx +++ b/src/Swipeout.web.tsx @@ -205,10 +205,17 @@ class Swipeout extends React.Component { ['prefixCls', 'left', 'right', 'children'] ); + let direction = 'DIRECTION_HORIZONTAL'; + if(left.length && right.length === 0) { + direction= 'DIRECTION_RIGHT'; + } + if(right.length && left.length === 0) { + direction= 'DIRECTION_LEFT'; + } return (left.length || right.length) ? (
void; } export default SwipeoutProps; diff --git a/src/styles.tsx b/src/styles.tsx deleted file mode 100644 index b0f23ef..0000000 --- a/src/styles.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import { - StyleSheet, -} from 'react-native'; - -const styles = StyleSheet.create({ - -}); - -export default styles; From 5b5ce44cbc787f8bfa710fa1f84756683adc442e Mon Sep 17 00:00:00 2001 From: silentcloud Date: Mon, 11 Jul 2016 19:02:44 +0800 Subject: [PATCH 3/4] save code --- src/Swipeout.tsx | 11 ----------- src/Swipeout.web.tsx | 8 ++++---- 2 files changed, 4 insertions(+), 15 deletions(-) diff --git a/src/Swipeout.tsx b/src/Swipeout.tsx index db4abba..6768eb5 100644 --- a/src/Swipeout.tsx +++ b/src/Swipeout.tsx @@ -32,17 +32,6 @@ class Swipeout extends React.Component { }; } - _onBtnLayout = (event) => { - const { width, height } = event.nativeEvent.layout; - this.setState({ - paddingTop: (height - 12) / 2, - }, () => { - this.setState({ - show: true - }) - }); - } - renderCustomButton(button) { const buttonStyle = button.style || {}; const bgColor = buttonStyle.backgroundColor || 'transparent'; diff --git a/src/Swipeout.web.tsx b/src/Swipeout.web.tsx index ddb5480..f3e4d83 100644 --- a/src/Swipeout.web.tsx +++ b/src/Swipeout.web.tsx @@ -206,11 +206,11 @@ class Swipeout extends React.Component { ); let direction = 'DIRECTION_HORIZONTAL'; - if(left.length && right.length === 0) { - direction= 'DIRECTION_RIGHT'; + if (left.length && right.length === 0) { + direction = 'DIRECTION_RIGHT'; } - if(right.length && left.length === 0) { - direction= 'DIRECTION_LEFT'; + if (right.length && left.length === 0) { + direction = 'DIRECTION_LEFT'; } return (left.length || right.length) ? (
From 3172026f388f0a59cfdb5bc4c37b4117b9152f38 Mon Sep 17 00:00:00 2001 From: silentcloud Date: Tue, 12 Jul 2016 10:36:47 +0800 Subject: [PATCH 4/4] add react-native support --- .gitignore | 2 - HISTORY.md | 4 ++ README.md | 6 ++- examples/{left.tsx => left.js} | 4 +- examples/reactNative.js | 49 ++++++++++++++++++++ examples/reactNative.tsx | 32 ------------- examples/{right.tsx => right.js} | 4 +- examples/{simple.tsx => simple.js} | 4 +- package.json | 7 ++- src/{Swipeout.tsx => Swipeout.js} | 28 +++++------ src/{Swipeout.web.tsx => Swipeout.web.js} | 16 +++++-- src/SwipeoutProps.tsx | 13 ------ src/{index.tsx => index.js} | 0 src/{index.web.tsx => index.web.js} | 0 src/util/{splitObject.tsx => splitObject.js} | 4 +- tests/index.js | 2 +- tests/{usage.tsx => usage.js} | 4 +- tsconfig.json | 7 --- typings.json | 7 --- 19 files changed, 95 insertions(+), 98 deletions(-) rename examples/{left.tsx => left.js} (92%) create mode 100644 examples/reactNative.js delete mode 100644 examples/reactNative.tsx rename examples/{right.tsx => right.js} (92%) rename examples/{simple.tsx => simple.js} (94%) rename src/{Swipeout.tsx => Swipeout.js} (74%) rename src/{Swipeout.web.tsx => Swipeout.web.js} (94%) delete mode 100644 src/SwipeoutProps.tsx rename src/{index.tsx => index.js} (100%) rename src/{index.web.tsx => index.web.js} (100%) rename src/util/{splitObject.tsx => splitObject.js} (85%) rename tests/{usage.tsx => usage.js} (99%) delete mode 100644 tsconfig.json delete mode 100644 typings.json diff --git a/.gitignore b/.gitignore index 43e9656..0b3302f 100644 --- a/.gitignore +++ b/.gitignore @@ -21,7 +21,5 @@ dist build lib coverage -typings/ -*.js ios android diff --git a/HISTORY.md b/HISTORY.md index 2c663d4..7b1c3c3 100644 --- a/HISTORY.md +++ b/HISTORY.md @@ -1,5 +1,9 @@ # History +## 1.1.0 + +- [`new`] react-native support + ## 1.0.2 - [`fix`] error if this.refs.left/right is [] diff --git a/README.md b/README.md index 4ed6ecf..cbb8dce 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,7 @@ # rc-swipeout --- -iOS-style swipeout buttons that appear from behind a component +iOS-style swipeout buttons that appear from behind a component (web & react-native support) [![NPM version][npm-image]][npm-url] [![build status][travis-image]][travis-url] @@ -25,8 +25,12 @@ iOS-style swipeout buttons that appear from behind a component ## Development ``` +web: npm install npm start + +rn: +tnpm run rn-start ``` ## Example diff --git a/examples/left.tsx b/examples/left.js similarity index 92% rename from examples/left.tsx rename to examples/left.js index 94191f8..f91ccff 100644 --- a/examples/left.tsx +++ b/examples/left.js @@ -1,7 +1,7 @@ import 'rc-swipeout/assets/index.less'; import Swipeout from 'rc-swipeout'; -import * as React from 'react'; -import * as ReactDOM from 'react-dom'; +import React from 'react'; +import ReactDOM from 'react-dom'; ReactDOM.render(
diff --git a/examples/reactNative.js b/examples/reactNative.js new file mode 100644 index 0000000..8b8b95d --- /dev/null +++ b/examples/reactNative.js @@ -0,0 +1,49 @@ +import { View, Text, AppRegistry } from 'react-native'; +import Swipeout from './src'; +import React from 'react'; + +class SwipeoutExample extends React.Component { + render() { + return ( + + console.log('more'), + style: { backgroundColor: 'orange', color: 'white' }, + }, + { text: 'delete', + onPress: () => console.log('delete'), + style: { backgroundColor: 'red', color: 'white' }, + }, + ]} + left={[ + { + text: 'read', + onPress: () => console.log('read'), + style: { backgroundColor: 'blue', color: 'white' }, + }, + { + text: 'reply', + onPress: () => console.log('reply'), + style: { backgroundColor: 'green', color: 'white' }, + }, + ]} + onOpen={() => console.log('open')} + onClose={() => console.log('close')} + > + this is Demo + + + ); + } +} + +AppRegistry.registerComponent('swipeout', () => SwipeoutExample); diff --git a/examples/reactNative.tsx b/examples/reactNative.tsx deleted file mode 100644 index ac4fde9..0000000 --- a/examples/reactNative.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import { Text, AppRegistry } from 'react-native'; -import Swipeout from '../src'; -import * as React from 'react'; - -class SwipeoutExample extends React.Component { - render() { - return ( - console.log('read'), - style: { backgroundColor: 'blue', color: 'white' }, - }, - { - text: 'reply', - onPress: () => console.log('reply'), - style: { backgroundColor: 'green', color: 'white' }, - }, - ]} - onOpen={() => console.log('open')} - onClose={() => console.log('close')} - > - this is Demo - - ); - } -} - -AppRegistry.registerComponent('kitchen-sink', () => SwipeoutExample); diff --git a/examples/right.tsx b/examples/right.js similarity index 92% rename from examples/right.tsx rename to examples/right.js index 36c12e2..eacf7f6 100644 --- a/examples/right.tsx +++ b/examples/right.js @@ -1,7 +1,7 @@ import 'rc-swipeout/assets/index.less'; import Swipeout from 'rc-swipeout'; -import * as React from 'react'; -import * as ReactDOM from 'react-dom'; +import React from 'react'; +import ReactDOM from 'react-dom'; ReactDOM.render(
diff --git a/examples/simple.tsx b/examples/simple.js similarity index 94% rename from examples/simple.tsx rename to examples/simple.js index 544f22b..233f8f6 100644 --- a/examples/simple.tsx +++ b/examples/simple.js @@ -1,7 +1,7 @@ import 'rc-swipeout/assets/index.less'; import Swipeout from 'rc-swipeout'; -import * as React from 'react'; -import * as ReactDOM from 'react-dom'; +import React from 'react'; +import ReactDOM from 'react-dom'; ReactDOM.render(
diff --git a/package.json b/package.json index e2ab284..9f76d8c 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "rc-swipeout", - "version": "1.0.2", + "version": "1.1.0", "description": "swipe out ui component for react(web and react-native)", "keywords": [ "react", @@ -28,12 +28,11 @@ "port": 8000 }, "scripts": { - "watch-tsc": "rc-tools run watch-tsc", "build": "rc-tools run build", "gh-pages": "rc-tools run gh-pages", "start": "rc-tools run server", "pub": "rc-tools run pub", - "lint": "rc-tools run lint --no-js-lint", + "lint": "rc-tools run lint", "karma": "rc-tools run karma", "test": "rc-tools run test", "chrome-test": "rc-tools run chrome-test", @@ -41,6 +40,7 @@ "rn-start": "node node_modules/react-native/local-cli/cli.js start" }, "dependencies": { + "object.omit": "~2.0.0", "react-hammerjs": "^0.5.0", "react-native-swipeout": "https://github.com/dancormier/react-native-swipeout.git#master" }, @@ -54,7 +54,6 @@ "react-dom": "~15.2.1", "react-native": "0.28.0" }, - "typings": "./lib/index.web.d.ts", "pre-commit": [ "lint" ] diff --git a/src/Swipeout.tsx b/src/Swipeout.js similarity index 74% rename from src/Swipeout.tsx rename to src/Swipeout.js index 6768eb5..bb8d447 100644 --- a/src/Swipeout.tsx +++ b/src/Swipeout.js @@ -1,11 +1,9 @@ -import { PropTypes } from 'react'; -import * as React from 'react'; +import React, { PropTypes } from 'react'; import { View, Text } from 'react-native'; import Swipe from 'react-native-swipeout'; import splitObject from './util/splitObject'; -import SwipeoutProps from './SwipeoutProps'; -class Swipeout extends React.Component { +class Swipeout extends React.Component { static propTypes = { prefixCls: PropTypes.string, autoClose: PropTypes.bool, @@ -35,15 +33,13 @@ class Swipeout extends React.Component { renderCustomButton(button) { const buttonStyle = button.style || {}; const bgColor = buttonStyle.backgroundColor || 'transparent'; - const component = ( - - + const Component = ( + + {button.text} @@ -52,15 +48,15 @@ class Swipeout extends React.Component { text: button.text || 'Click', onPress: button.onPress, type: 'default', - component: component, + component: Component, backgroundColor: 'transparent', color: '#999', - disabled: false + disabled: false, }; } render() { - let [{disabled, autoClose, style, left, right, onOpen, children}, restProps] = splitObject( + const [{ disabled, autoClose, style, left, right, onOpen, children }, restProps] = splitObject( this.props, ['disabled', 'autoClose', 'style', 'left', 'right', 'onOpen', 'children'] ); diff --git a/src/Swipeout.web.tsx b/src/Swipeout.web.js similarity index 94% rename from src/Swipeout.web.tsx rename to src/Swipeout.web.js index f3e4d83..498b6fc 100644 --- a/src/Swipeout.web.tsx +++ b/src/Swipeout.web.js @@ -1,9 +1,9 @@ import React, { PropTypes } from 'react'; import Hammer from 'react-hammerjs'; +import omit from 'object.omit'; import splitObject from './util/splitObject'; -import SwipeoutProps from './SwipeoutProps'; -class Swipeout extends React.Component { +class Swipeout extends React.Component { static propTypes = { prefixCls: PropTypes.string, autoClose: PropTypes.bool, @@ -200,10 +200,16 @@ class Swipeout extends React.Component { } render() { - let [{prefixCls, left, right, children}, restProps] = splitObject( + const [{ prefixCls, left, right, children }, restProps] = splitObject( this.props, ['prefixCls', 'left', 'right', 'children'] ); + const divProps = omit(restProps, [ + 'disabled', + 'autoClose', + 'onOpen', + 'onClose', + ]); let direction = 'DIRECTION_HORIZONTAL'; if (left.length && right.length === 0) { @@ -213,7 +219,7 @@ class Swipeout extends React.Component { direction = 'DIRECTION_LEFT'; } return (left.length || right.length) ? ( -
+
{ { this.renderButtons(right, 'right') }
) : ( -
{children}
+
{children}
); } } diff --git a/src/SwipeoutProps.tsx b/src/SwipeoutProps.tsx deleted file mode 100644 index b18ac82..0000000 --- a/src/SwipeoutProps.tsx +++ /dev/null @@ -1,13 +0,0 @@ -interface SwipeoutProps { - autoClose?:boolean; - disabled?:boolean; - left?:Array<{}>; - right?:Array<{}>; - onOpen:() => void; - children:any; - /** web only */ - prefixCls?:string; - onOpen?:() => void; -} - -export default SwipeoutProps; diff --git a/src/index.tsx b/src/index.js similarity index 100% rename from src/index.tsx rename to src/index.js diff --git a/src/index.web.tsx b/src/index.web.js similarity index 100% rename from src/index.web.tsx rename to src/index.web.js diff --git a/src/util/splitObject.tsx b/src/util/splitObject.js similarity index 85% rename from src/util/splitObject.tsx rename to src/util/splitObject.js index 4515a80..802caec 100644 --- a/src/util/splitObject.tsx +++ b/src/util/splitObject.js @@ -1,6 +1,6 @@ export default function splitObject(obj, parts) { - let left = {}; - let right = {}; + const left = {}; + const right = {}; Object.keys(obj).forEach((k) => { if (parts.indexOf(k) !== -1) { left[k] = obj[k]; diff --git a/tests/index.js b/tests/index.js index 17b4a7d..15cfadb 100644 --- a/tests/index.js +++ b/tests/index.js @@ -1,2 +1,2 @@ require('../assets/index.less'); -import "./usage"; +import './usage'; diff --git a/tests/usage.tsx b/tests/usage.js similarity index 99% rename from tests/usage.tsx rename to tests/usage.js index 232a0e5..d48ae5b 100644 --- a/tests/usage.tsx +++ b/tests/usage.js @@ -1,6 +1,6 @@ const expect = require('expect.js'); -import * as React from 'react'; -import * as ReactDOM from 'react-dom'; +import React from 'react'; +import ReactDOM from 'react-dom'; import TestUtils from 'react-addons-test-utils'; require('hammer-simulator'); const Simulator = window.Simulator; diff --git a/tsconfig.json b/tsconfig.json deleted file mode 100644 index de6423c..0000000 --- a/tsconfig.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "compilerOptions": { - "moduleResolution": "node", - "jsx": "react", - "target": "es6" - } -} \ No newline at end of file diff --git a/typings.json b/typings.json deleted file mode 100644 index b478bb0..0000000 --- a/typings.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "globalDependencies": { - "react": "registry:dt/react#0.14.0+20160630100702", - "react-dom": "registry:dt/react-dom#0.14.0+20160412154040", - "react-native": "registry:dt/react-native#0.27.0+20160619030006" - } -} \ No newline at end of file