Commit e43964a7 authored by Matija Obreza's avatar Matija Obreza
Browse files

Material-UI styles

parent 717ce510
......@@ -2,7 +2,7 @@
<html>
<head>
<title>Genesys PGR</title>
<title>Hi!</title>
<base href="/" />
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes" />
......
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ProcessImage } from './ProcessImage';
import { withStyles } from '@material-ui/core/styles';
const styles = {
root: {
height: '100%',
display: 'flex',
flexDirection: 'column' as 'column',
},
content: {
flex: '1 0 auto',
},
};
class App extends React.Component<any> {
public render(): React.ReactNode {
const { classes } = this.props;
return (
<div>
<div className={ classes.root }>
<ProcessImage />
</div>
);
}
}
ReactDOM.render(
<App/>,
document.getElementById('the-app'),
)
export default App;
export default withStyles(styles)(App);
......@@ -3,16 +3,31 @@ import { count } from '@gringlobal/counter/counter';
export class ProcessImage extends React.Component<any> {
private MAX_PROCESSING_WIDTH: number = 300;
public state = {
count: 0,
};
private count = () => {
console.log(`Counting ${this.MAX_PROCESSING_WIDTH}`);
this.setState({ count: count(this.state.count) });
}
public render(): React.ReactNode {
return (
<div>
<div>Count: { this.state.count }</div>
<div>
<form>
<input type="file" id="myfile" />
<input type="reset" value="Clear" />
</form>
</div>
<h1>Count: { this.state.count }</h1>
<img src="examples/G32 seed.jpg" />
<button onClick={ () => this.setState({ count: count(this.state.count) }) }>Increment</button>
<button onClick={ this.count }>Count</button>
<h1>Debugger</h1>
<div id="canvases" />
</div>
);
}
......
......@@ -6,8 +6,9 @@
"clean": "rimraf lib",
"build": "yarn run clean & tsc",
"start:dev": "cross-env NODE_OPTIONS=--max_old_space_size=8192 webpack-dev-server --config config/webpack-development.config.js"
},
},
"dependencies": {
"@material-ui/styles": "^4.9.6",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-i18next": "^11.3.1",
......
......@@ -189,6 +189,11 @@
resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.7.4.tgz#f14932887422c9056b15a8d222a9074a7dfa2831"
integrity sha512-fxfMSBMX3tlIbKUdtGKxqB1fyrH6gVrX39Gsv3y8lRYKUqlgDt3UMqQyGnR1bQMa2B8aGnhLZokZgg8vT0Le+A==
 
"@emotion/hash@^0.8.0":
version "0.8.0"
resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.8.0.tgz#bbbff68978fefdbe68ccb533bc8cbe1d1afb5413"
integrity sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==
"@emotion/is-prop-valid@^0.7.3":
version "0.7.3"
resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.7.3.tgz#a6bf4fa5387cbba59d44e698a4680f481a8da6cc"
......@@ -1192,6 +1197,28 @@
jss-plugin-vendor-prefixer "^10.0.3"
prop-types "^15.7.2"
 
"@material-ui/styles@^4.9.6":
version "4.9.6"
resolved "https://registry.yarnpkg.com/@material-ui/styles/-/styles-4.9.6.tgz#924a30bf7c9b91af9c8f19c12c8573b8a4ecd085"
integrity sha512-ijgwStEkw1OZ6gCz18hkjycpr/3lKs1hYPi88O/AUn4vMuuGEGAIrqKVFq/lADmZUNF3DOFIk8LDkp7zmjPxtA==
dependencies:
"@babel/runtime" "^7.4.4"
"@emotion/hash" "^0.8.0"
"@material-ui/types" "^5.0.0"
"@material-ui/utils" "^4.9.6"
clsx "^1.0.2"
csstype "^2.5.2"
hoist-non-react-statics "^3.3.2"
jss "^10.0.3"
jss-plugin-camel-case "^10.0.3"
jss-plugin-default-unit "^10.0.3"
jss-plugin-global "^10.0.3"
jss-plugin-nested "^10.0.3"
jss-plugin-props-sort "^10.0.3"
jss-plugin-rule-value-function "^10.0.3"
jss-plugin-vendor-prefixer "^10.0.3"
prop-types "^15.7.2"
"@material-ui/system@^4.9.3":
version "4.9.3"
resolved "https://registry.yarnpkg.com/@material-ui/system/-/system-4.9.3.tgz#ee48990d7941237fdaf21b7b399981d614bb0875"
......@@ -1215,6 +1242,15 @@
prop-types "^15.7.2"
react-is "^16.8.0"
 
"@material-ui/utils@^4.9.6":
version "4.9.6"
resolved "https://registry.yarnpkg.com/@material-ui/utils/-/utils-4.9.6.tgz#5f1f9f6e4df9c8b6a263293b68c94834248ff157"
integrity sha512-gqlBn0JPPTUZeAktn1rgMcy9Iczrr74ecx31tyZLVGdBGGzsxzM6PP6zeS7FuoLS6vG4hoZP7hWnOoHtkR0Kvw==
dependencies:
"@babel/runtime" "^7.4.4"
prop-types "^15.7.2"
react-is "^16.8.0"
"@mrmlnc/readdir-enhanced@^2.2.1":
version "2.2.1"
resolved "https://registry.yarnpkg.com/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz#524af240d1a360527b730475ecfa1344aa540dde"
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment