proton-native/testprog.js
Roman Liutikov a135cd6361
Add mouseMoveEvent, enterEvent and leaveEvent (#248)
* impl mouseMoveEvent, enterEvent and leaveEvent

* update example

* mention new mouse events in the docs
2020-03-16 15:54:32 -04:00

69 lines
1.7 KiB
JavaScript

import React, { Component } from 'react';
import {
App,
AppRegistry,
Window,
View,
Text,
TouchableWithoutFeedback,
TouchableOpacity,
TouchableHighlight,
Button,
Image,
TextInput,
Picker,
setBackend,
} from './bin/';
setBackend('qt');
class Example extends Component {
state = {
test: 'dsdasdsa',
a: true,
mouseState: 'idle',
x: 50,
y: 50,
};
componentDidMount() {
//setTimeout(() => this.setState({ test: "dsawewwww" }), 3000);
//setTimeout(() => this.setState({ a: false }), 3000);
}
render() {
return (
<App>
{/*<Window style={{ height: 400, width: 500 }}>*/}
<Window
style={{ height: '25%', width: '25%', backgroundColor: 'blue' }}
>
<View
onMouseEnter={() => this.setState({ mouseState: 'MOUSE ENTERED' })}
onMouseLeave={() => this.setState({ mouseState: 'MOUSE LEFT' })}
onMouseMove={event => this.setState(event.point)}
style={{ height: '50%', width: '100%', backgroundColor: 'green' }}
>
<Button
style={{ backgroundColor: 'white' }}
onPress={() => console.log('PRessed')}
title="My button"
/>
<Text>{`Mouse state: ${this.state.mouseState}`}</Text>
<View
style={{
width: 40,
height: 40,
backgroundColor: 'black',
position: 'absolute',
top: this.state.y,
left: this.state.x,
}}
></View>
</View>
</Window>
</App>
);
}
}
AppRegistry.registerComponent('Test', <Example />);