Commit 76258830 authored by Patrik Meijer's avatar Patrik Meijer
Browse files

Setup demo page and build etc

parent ec3d2b51
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
],
"plugins": [
"@babel/plugin-proposal-class-properties"
]
}
\ No newline at end of file
......@@ -44,7 +44,4 @@ simres_example.json
deployment/.vagrant
deployment/*.log
public/**/*.js
public/**/*.css
public/**/*.svg
public/**/*.map
demo/public
import React, {Component} from 'react';
import AttributeEditor from '../../src/components/AttributeEditor'
export default class DemoAttributeEditor extends Component {
constructor(props) {
super(props);
this.gmeClient = new window.GME.classes.Client(window.GME.gmeConfig);
}
render() {
return (
<div style={{width: '30%'}}>
<AttributeEditor
gmeClient={this.gmeClient}
selection={['/1']}
fullWidthWidgets
/>
</div>
)
}
}
\ No newline at end of file
import React, {Component} from 'react';
import ProjectSeedCards from '../../src/components/ProjectSeedCards'
export default class DemoProjectSeedCards extends Component {
render() {
const seedsInfo = ['Seed number 1', 'Seed number 2', 'Seed number 3', 'Seed number 4']
.map((function (title) {
return {
title: title,
description: 'In these examples the description is short so content height is low',
imageUrl: 'seed.png',
createData: {
seed: title,
desc: 'Any data passed here will be returned..',
},
infoUrl: 'https://webgme.org'
};
}));
return (
<ProjectSeedCards
seedsInfo={seedsInfo}
contentStyle={{
minHeight: 80,
}}
onCreate={(createData) => {
alert(`Seed selected:\n ${JSON.stringify(createData, null, 2)}`);
}}
/>
)
}
}
\ No newline at end of file
/* global window */
import React, {Component} from 'react';
import ExpansionPanel from '@material-ui/core/ExpansionPanel';
import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary';
import Typography from '@material-ui/core/Typography';
import DemoProjectSeedCards from './components/DemoProjectSeedCards';
import DemoAttributeEditor from './components/DemoAttributeEditor';
export default class demoApp extends Component {
componentDidMount() {
window.onGMEInit = () => {
window.gmeClient = new window.GME.classes.Client(window.GME.gmeConfig);
};
}
render() {
const DEMOS = [
{
component: <DemoAttributeEditor/>,
title: 'AttributeEditor'
},
{
component: <DemoProjectSeedCards/>,
title: 'ProjectSeedCards'
},
];
return (
<div>
{DEMOS.map((info) => {
return (
<ExpansionPanel defaultExpanded key={info.title}>
<ExpansionPanelSummary>
<Typography variant="headline" color="textSecondary">{info.title}</Typography>
</ExpansionPanelSummary>
<div style={{padding: 20}}>
{info.component}
</div>
</ExpansionPanel>
)
})}
</div>);
};
};
\ No newline at end of file
import React from 'react';
import ReactDOM from 'react-dom';
import App from './demoApp.jsx';
ReactDOM.render(<App/>, document.getElementById('root'));
\ No newline at end of file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<script src="/gme-dist/webgme.classes.build.js">
</script>
<title>Components Demo</title>
</head>
<body on-gme-init="onGMEInit()">
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
<script src="/app.build.js"></script>
</body>
</html>
This diff is collapsed.
......@@ -4,7 +4,8 @@
"description": "Selection of Material-UI React Components for building WebGME GUIs",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
"webpack": "webpack",
"start": "webpack-dev-server"
},
"repository": {
"type": "git",
......@@ -25,12 +26,22 @@
"blockies": "0.0.2",
"react-color": "^2.14.1"
},
"devDependencies": {
"peerDependencies": {
"react": "^16.5.1",
"react-dom": "^16.5.2",
"prop-types": "^15.6.2"
},
"peerDependencies": {
"devDependencies": {
"@babel/core": "^7.1.0",
"@babel/plugin-proposal-class-properties": "^7.1.0",
"@babel/preset-env": "^7.1.0",
"@babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.2",
"prop-types": "^15.6.2",
"react": "^16.5.1",
"prop-types": "^15.6.2"
"react-dom": "^16.5.2",
"webpack": "^4.19.1",
"webpack-cli": "^3.1.0",
"webpack-dev-server": "^3.1.8"
}
}
......@@ -20,17 +20,22 @@ export default class AttributeEditor extends Component {
gmeClient: PropTypes.object.isRequired,
selection: PropTypes.arrayOf(PropTypes.string).isRequired,
children: PropTypes.object,
// Title to be displayed
title: PropTypes.string,
children: PropTypes.object,
// Will stack the items on top of each-other
fullWidthWidgets: PropTypes.bool,
// If an attribute is read-only it will be hidden
hideReadOnly: PropTypes.bool,
};
static defaultProps = {
title: 'Attributes',
fullWidthWidgets: false,
hideReadOnly: false,
children: null,
}
};
state = {
loadedNodes: [],
......@@ -38,30 +43,24 @@ export default class AttributeEditor extends Component {
attributes: [],
};
componentWillReceiveProps(newProps) {
const {selection} = newProps;
componentDidMount() {
const {selection} = this.props;
const territory = {};
selection.forEach((item) => {
territory[item] = {children: 0};
});
// TODO clearing the loadedNodes should not be necessary, where are the unload events???
if (selection[0] !== this.props.selection[0]) {
this.setState({loadedNodes: [], territory});
}
this.setState({territory});
}
onComponentDidMount() {
const {selection} = this.props;
componentWillReceiveProps(newProps) {
const {selection} = newProps;
const territory = {};
selection.forEach((item) => {
territory[item] = {children: 0};
});
this.setState({territory});
}
handleEvents = (hash, loads, updates, unloads) => {
......@@ -70,8 +69,6 @@ export default class AttributeEditor extends Component {
let {attributes} = this.state;
const {loadedNodes} = this.state;
// console.log('handleEvents');
selection.forEach((nodeId) => {
if (loads.indexOf(nodeId) !== -1 || updates.indexOf(nodeId) !== -1) {
loadedNodes.push(nodeId);
......@@ -184,7 +181,7 @@ export default class AttributeEditor extends Component {
onlyActualEvents
/>
<div style={{textAlign: 'center', width: '100%'}}>
<CardHeader title="Parameters"/>
<CardHeader title={this.props.title}/>
{icon}
</div>
<CardContent>
......
const path = require('path');
module.exports = {
mode: 'development',
entry: './demo/index.jsx',
output: {
filename: 'app.build.js',
path: path.join(__dirname, 'demo', 'public'),
},
plugins: [],
module: {
rules: [
{
test: /\.(js|jsx)$/,
include: [
path.resolve(__dirname, 'src'),
path.resolve(__dirname, 'demo'),
],
use: [
'babel-loader',
],
},
],
},
resolve: {
extensions: ['.js', '.jsx'],
},
devServer: {
contentBase: [path.join(__dirname, 'demo', 'public'), path.join(__dirname, 'demo', 'static')],
compress: true,
port: 9000
}
};
Supports Markdown
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