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

Setup demo page and build etc

parent ec3d2b51

.babelrc

0 → 100644
+9 −0
Original line number Diff line number Diff line 
{

  "presets": [

    "@babel/preset-env",

    "@babel/preset-react"

  ],

  "plugins": [

    "@babel/plugin-proposal-class-properties"

  ]

}
 
 No newline at end of file

.gitignore

+1 −4
Original line number Diff line number Diff line
@@ -44,7 +44,4 @@ simres_example.json 
deployment/.vagrant

deployment/*.log



public/**/*.js

public/**/*.css

public/**/*.svg

public/**/*.map
 
demo/public

demo/components/DemoAttributeEditor.jsx

0 → 100644
+22 −0
Original line number Diff line number Diff line 
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

demo/components/DemoProjectSeedCards.jsx

0 → 100644
+34 −0
Original line number Diff line number Diff line 
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

demo/demoApp.jsx

0 → 100644
+46 −0
Original line number Diff line number Diff line 
/* 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