diff --git a/src/components/Touchable/index.js b/src/components/Touchable/index.js new file mode 100644 index 00000000..f770aa74 --- /dev/null +++ b/src/components/Touchable/index.js @@ -0,0 +1,88 @@ +import React, { PropTypes } from 'react' +import Tappable from 'react-tappable' + +class Touchable extends React.Component { + constructor(props, context) { + super(props, context) + this.state = { + isActive: false + } + } + + static propTypes = { + activeHighlight: PropTypes.string, + activeOpacity: PropTypes.number, + children: PropTypes.element, + component: PropTypes.oneOfType([ + PropTypes.func, + PropTypes.string + ]), + delayLongPress: PropTypes.number, + delayPressIn: PropTypes.number, + delayPressOut: PropTypes.number, + onLongPress: PropTypes.func, + onPress: PropTypes.func, + onPressIn: PropTypes.func, + onPressOut: PropTypes.func + } + + static defaultProps = { + activeHighlight: 'transparent', + activeOpacity: 1, + component: 'div', + delayLongPress: 1000, + delayPressIn: 0, + delayPressOut: 0 + } + + _onLongPress(e) { + if (this.props.onLongPress) this.props.onLongPress(e) + } + + _onPress(e) { + if (this.props.onPress) this.props.onPress(e) + } + + _onPressIn(e) { + this.setState({ isActive: true }) + if (this.props.onPressIn) this.props.onPressIn(e) + } + + _onPressOut(e) { + this.setState({ isActive: false }) + if (this.props.onPressOut) this.props.onPressOut(e) + } + + _getChildren() { + const { activeOpacity, children } = this.props + return React.cloneElement(React.Children.only(children), { + style: { ...children.props.style, ...(this.state.isActive ? { opacity: activeOpacity } : {}) } + }) + } + + render() { + const { + activeHighlight, + component, + delayLongPress + } = this.props + + return ( + + ) + } +} + +export default Touchable diff --git a/src/components/Touchable/index.spec.js b/src/components/Touchable/index.spec.js new file mode 100644 index 00000000..975bc329 --- /dev/null +++ b/src/components/Touchable/index.spec.js @@ -0,0 +1,18 @@ +/* +import assert from 'assert' +import React from 'react/addons' + +import Touchable from '.' + +const ReactTestUtils = React.addons.TestUtils + +function shallowRender(component, context = {}) { + const shallowRenderer = React.addons.TestUtils.createRenderer() + shallowRenderer.render(component, context) + return shallowRenderer.getRenderOutput() +} + +suite.skip('Touchable', () => { + test('prop "children"', () => {}) +}) +*/