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.6 KiB
JavaScript
67 lines
1.6 KiB
JavaScript
'use strict';
|
|
|
|
const React = require("react");
|
|
const createReactClass = require("create-react-class");
|
|
const classnames = require("classnames");
|
|
|
|
const HorizontalInputList = require("./layout/horizontal-input-list");
|
|
const ControlBar = require("./layout/control-bar");
|
|
|
|
const Label = require("./inputs/label");
|
|
const HorizontalButtonSet = require("./inputs/horizontal-button-set");
|
|
const Button = require("./inputs/button");
|
|
|
|
let MenuItem = createReactClass({
|
|
render: function () {
|
|
return (
|
|
<div className={classnames("item", this.props.className)}>
|
|
<i className={classnames("icon", this.props.icon)}></i>
|
|
{this.props.name}
|
|
</div>
|
|
);
|
|
}
|
|
});
|
|
|
|
let Folder = createReactClass({
|
|
render: function () {
|
|
return <MenuItem className="folder" icon="icon-folder" {...this.props}/>
|
|
}
|
|
});
|
|
|
|
let ObjectType = createReactClass({
|
|
render: function () {
|
|
return <MenuItem className="object-type" icon="icon-globe" {...this.props}/>
|
|
}
|
|
});
|
|
|
|
let Menu = createReactClass({
|
|
render: function () {
|
|
return (
|
|
<div className="menu">
|
|
<ControlBar>
|
|
<HorizontalInputList>
|
|
<Label>Create new:</Label>
|
|
<HorizontalButtonSet>
|
|
<Button>Asset</Button>
|
|
<Button>Object</Button>
|
|
<Button>Timeline</Button>
|
|
<Button>Scene</Button>
|
|
</HorizontalButtonSet>
|
|
</HorizontalInputList>
|
|
</ControlBar>
|
|
<div className="item-browser">
|
|
{this.props.items.map((item) => {
|
|
if (item.type === "folder") {
|
|
return <Folder name={item.name} />;
|
|
} else if (item.type === "object-type") {
|
|
return <ObjectType name={item.name} />;
|
|
}
|
|
})}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
});
|
|
|
|
module.exports = Menu;
|