awv3/plugins/test/index.js

⚡ AWV3 embedded CAD

import Plugin from '../../session/plugin';
import { Group, Button, Label, Dropdown } from '../../session/elements';
import React, { Component, connect } from '../../session/renderer';
import { actions as globalActions } from '../../session/store/globals';

class SpecialButton extends Component {
    state = { flag: false };
    render = ({ highlight, onLastEvent }, { flag }) =>
        <Button
            name={(highlight ? 'active' : 'inactive') + ' ' + (flag ? '👌' : '👎')}
            color={highlight && 'pink'}
            onLastEvent={() => this.setState({ flag: !flag }) || onLastEvent()}
        />;
}

class ButtonGroup extends Component {
    state = { current: 'A', visible: true };
    render = ({ color }, { current, visible }) =>
        <Group>
            <Dropdown items={['A', 'B', 'C']} value={current} onValue={current => this.setState({ current })} />
            <Group format="Rows">
                <Button name="A" color={current === 'A' && color} onLastEvent={() => this.setState({ current: 'A' })} />
                <Button name="B" color={current === 'B' && color} onLastEvent={() => this.setState({ current: 'B' })} />
                {visible &&
                    <SpecialButton highlight={current === 'C'} onLastEvent={() => this.setState({ current: 'C' })} />}
                <Button color="black" name="toggle" onLastEvent={() => this.setState({ visible: !visible })} />
            </Group>
        </Group>;
}

class Buttons extends Component {
    render = ({ children }) => <Group>{children}</Group>;
}

@connect(state => ({ camera: state.globals.camera }))
class ControlGroup extends Component {
    state = { text: 'hello' };
    render = ({ camera }, { text }) =>
        <Group>
            <Label value={camera} />
            <Button
                name="toggle cam"
                onLastEvent={() =>
                    this.dispatch(globalActions.setCamera(camera === 'orthographic' ? 'perspective' : 'orthographic'))}
            />
            <Buttons>
                <ButtonGroup color="red" />
                <ButtonGroup color="green" />
            </Buttons>
        </Group>;
}

export default class Test extends Plugin {
    constructor(session, args) {
        super(session, { type: 'Test', icon: 'ok', ...args });
    }

    render() {
        return <ControlGroup />;
    }
}