You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
67 lines
1.8 KiB
JavaScript
67 lines
1.8 KiB
JavaScript
'use strict';
|
|
|
|
const React = require("react");
|
|
const createReactClass = require("create-react-class");
|
|
|
|
const VerticalInputList = require("./layout/vertical-input-list");
|
|
const HorizontalInputList = require("./layout/horizontal-input-list");
|
|
const PanelHeader = require("./layout/panel-header");
|
|
|
|
const TextInput = require("./inputs/text");
|
|
const Label = require("./inputs/label");
|
|
|
|
let PropertyInput = createReactClass({
|
|
render: function () {
|
|
return (
|
|
<HorizontalInputList>
|
|
<Label>{this.props.label}</Label>
|
|
<TextInput />
|
|
</HorizontalInputList>
|
|
);
|
|
}
|
|
});
|
|
|
|
let PropertyConnector = createReactClass({
|
|
render: function () {
|
|
let label = <div className="description">{this.props.label}</div>;
|
|
|
|
return (
|
|
<div className="connector">
|
|
{this.props.labelDirection === "left" ? label : null}
|
|
<div className="bullet"></div>
|
|
{this.props.labelDirection === "right" ? label : null}
|
|
</div>
|
|
);
|
|
}
|
|
});
|
|
|
|
let Node = createReactClass({
|
|
render: function () {
|
|
return (
|
|
<div className="node">
|
|
<PanelHeader>Example Node</PanelHeader>
|
|
<div className="background"></div>
|
|
<div className="left-connectors">
|
|
<PropertyConnector label="One" labelDirection="left" />
|
|
<PropertyConnector label="Two" labelDirection="left" />
|
|
<PropertyConnector label="Three" labelDirection="left" />
|
|
<PropertyConnector label="Four" labelDirection="left" />
|
|
</div>
|
|
<div className="inputs">
|
|
<VerticalInputList>
|
|
<PropertyInput label="Five:" />
|
|
<PropertyInput label="Six:" />
|
|
</VerticalInputList>
|
|
</div>
|
|
<div className="right-connectors">
|
|
<PropertyConnector label="Seven" labelDirection="right" />
|
|
<PropertyConnector label="Eight" labelDirection="right" />
|
|
<PropertyConnector label="Nine" labelDirection="right" />
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
});
|
|
|
|
module.exports = Node;
|