commit
723114261d
@ -0,0 +1,3 @@ |
|||||||
|
node_modules |
||||||
|
dist/ |
||||||
|
*.log |
@ -0,0 +1,10 @@ |
|||||||
|
# Dependencies: |
||||||
|
|
||||||
|
- @nodegui/nodegui |
||||||
|
- @nodegui/react-desktop |
||||||
|
- react |
||||||
|
|
||||||
|
# DevDependencies: |
||||||
|
|
||||||
|
- @nodegui/qode |
||||||
|
- typescript |
@ -0,0 +1,21 @@ |
|||||||
|
{ |
||||||
|
"name": "react-desktop-test", |
||||||
|
"version": "1.0.0", |
||||||
|
"main": "index.js", |
||||||
|
"author": "Atul R <atulanand94@gmail.com>", |
||||||
|
"license": "MIT", |
||||||
|
"private": true, |
||||||
|
"scripts": { |
||||||
|
"dev": "tsc && qode ./dist/index.js" |
||||||
|
}, |
||||||
|
"dependencies": { |
||||||
|
"@nodegui/nodegui": "^0.0.5-alpha", |
||||||
|
"@nodegui/react-desktop": "^0.0.5-alpha", |
||||||
|
"@nodegui/test": "^0.0.10", |
||||||
|
"react": "^16.8.6" |
||||||
|
}, |
||||||
|
"devDependencies": { |
||||||
|
"@types/react": "^16.8.23", |
||||||
|
"typescript": "^3.5.3" |
||||||
|
} |
||||||
|
} |
@ -0,0 +1,41 @@ |
|||||||
|
import { Renderer, View, Text, Button, Window } from "@nodegui/react-desktop"; |
||||||
|
import React, { useState, useMemo } from "react"; |
||||||
|
import { QPushButtonEvents } from "@nodegui/nodegui"; |
||||||
|
|
||||||
|
const App = () => { |
||||||
|
const [time, setTime] = useState(`${new Date()}`); |
||||||
|
const buttonEventHandlers = useMemo( |
||||||
|
() => ({ |
||||||
|
[QPushButtonEvents.clicked]: () => setTime(`${new Date()}`) |
||||||
|
}), |
||||||
|
[] |
||||||
|
); |
||||||
|
return ( |
||||||
|
<Window styleSheet={styleSheet}> |
||||||
|
<View id="container"> |
||||||
|
<Button text="Update Time" on={buttonEventHandlers} /> |
||||||
|
<Text id="result">{time}</Text> |
||||||
|
</View> |
||||||
|
</Window> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
const styleSheet = ` |
||||||
|
#container { |
||||||
|
qproperty-flex: 1; |
||||||
|
qproperty-flexDirection: column; |
||||||
|
qproperty-minHeight: '100%'; |
||||||
|
qproperty-alignItems: 'center'; |
||||||
|
qproperty-justifyContent: 'center'; |
||||||
|
} |
||||||
|
#opBtn { |
||||||
|
font-size: 20px; |
||||||
|
} |
||||||
|
#result { |
||||||
|
font-size: 12px; |
||||||
|
qproperty-flex: 1; |
||||||
|
color: cyan; |
||||||
|
} |
||||||
|
`;
|
||||||
|
|
||||||
|
Renderer.render(<App />, () => {}); |
@ -0,0 +1,15 @@ |
|||||||
|
{ |
||||||
|
"compilerOptions": { |
||||||
|
"incremental": true, |
||||||
|
"target": "es2016", |
||||||
|
"module": "commonjs", |
||||||
|
"allowJs": true, |
||||||
|
"checkJs": false, |
||||||
|
"jsx": "react", |
||||||
|
"outDir": "./dist", |
||||||
|
"strict": true, |
||||||
|
"alwaysStrict": true, |
||||||
|
"moduleResolution": "node", |
||||||
|
"esModuleInterop": true |
||||||
|
} |
||||||
|
} |
Loading…
Reference in new issue