lucid-ui
Version:
A UI component library from AppNexus.
83 lines • 4.73 kB
JavaScript
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var react_1 = __importDefault(require("react"));
var create_react_class_1 = __importDefault(require("create-react-class"));
var index_1 = require("../../../index");
exports.default = create_react_class_1.default({
getInitialState: function () {
return {
isFileExpanded: false,
fileDirection: 'down',
isEditExpanded: false,
editDirection: 'down',
};
},
handleFileMenuToggle: function () {
var isFileExpanded = this.state.isFileExpanded;
this.setState({
isFileExpanded: !isFileExpanded,
});
},
handleEditMenuToggle: function () {
var isEditExpanded = this.state.isEditExpanded;
this.setState({
isEditExpanded: !isEditExpanded,
});
},
render: function () {
var _a = this.state, isFileExpanded = _a.isFileExpanded, fileDirection = _a.fileDirection, isEditExpanded = _a.isEditExpanded, editDirection = _a.editDirection;
return (react_1.default.createElement("section", null,
react_1.default.createElement(index_1.ContextMenu, { portalId: 'FileMenu-example', isExpanded: isFileExpanded, direction: fileDirection, onClickOut: this.handleFileMenuToggle },
react_1.default.createElement(index_1.ContextMenu.Target, null,
react_1.default.createElement("div", { style: {
background: isFileExpanded ? '#fafafa' : '#eaeaea',
outline: 'solid 1px #d1d1d1',
padding: '4px',
cursor: 'pointer',
}, onClick: this.handleFileMenuToggle }, "File")),
react_1.default.createElement(index_1.ContextMenu.FlyOut, { style: {
background: '#fafafa',
outline: 'solid 1px #d1d1d1',
boxShadow: ' 1px 1px 2px rgba(0, 0, 0, 0.2)',
padding: '8px',
} },
react_1.default.createElement("div", null, "New Window"),
react_1.default.createElement("div", null, "New File"),
react_1.default.createElement("div", null, "Open..."),
react_1.default.createElement("div", null, "Add Folder..."),
react_1.default.createElement("div", null, "Reopen Last Item"),
react_1.default.createElement("hr", null),
react_1.default.createElement("div", null, "Save"),
react_1.default.createElement("div", null, "Save As..."),
react_1.default.createElement("div", null, "Save All"),
react_1.default.createElement("hr", null),
react_1.default.createElement("div", null, "Close Tab"),
react_1.default.createElement("div", null, "Close Pane"),
react_1.default.createElement("div", null, "Close Window"))),
react_1.default.createElement(index_1.ContextMenu, { portalId: 'EditMenu-example', isExpanded: isEditExpanded, direction: editDirection, onClickOut: this.handleEditMenuToggle },
react_1.default.createElement(index_1.ContextMenu.Target, null,
react_1.default.createElement("div", { style: {
background: isEditExpanded ? '#fafafa' : '#eaeaea',
outline: 'solid 1px #d1d1d1',
padding: '4px',
cursor: 'pointer',
}, onClick: this.handleEditMenuToggle }, "Edit")),
react_1.default.createElement(index_1.ContextMenu.FlyOut, { style: {
background: '#fafafa',
outline: 'solid 1px #d1d1d1',
boxShadow: ' 1px 1px 2px rgba(0, 0, 0, 0.2)',
padding: '8px',
} },
react_1.default.createElement("div", null, "Undo"),
react_1.default.createElement("div", null, "Redo"),
react_1.default.createElement("hr", null),
react_1.default.createElement("div", null, "Cut"),
react_1.default.createElement("div", null, "Copy"),
react_1.default.createElement("div", null, "Paste"),
react_1.default.createElement("div", null, "Select All")))));
},
});
//# sourceMappingURL=3.menu-bar.js.map