lucid-ui
Version:
A UI component library from AppNexus.
73 lines • 3.71 kB
JavaScript
import React from 'react';
import createClass from 'create-react-class';
import { ContextMenu } from '../../../index';
export default createClass({
getInitialState: function getInitialState() {
return {
isFileExpanded: false,
fileDirection: 'down',
isEditExpanded: false,
editDirection: 'down'
};
},
handleFileMenuToggle: function handleFileMenuToggle() {
var isFileExpanded = this.state.isFileExpanded;
this.setState({
isFileExpanded: !isFileExpanded
});
},
handleEditMenuToggle: function handleEditMenuToggle() {
var isEditExpanded = this.state.isEditExpanded;
this.setState({
isEditExpanded: !isEditExpanded
});
},
render: function render() {
var _this$state = this.state,
isFileExpanded = _this$state.isFileExpanded,
fileDirection = _this$state.fileDirection,
isEditExpanded = _this$state.isEditExpanded,
editDirection = _this$state.editDirection;
return /*#__PURE__*/React.createElement("section", null, /*#__PURE__*/React.createElement(ContextMenu, {
portalId: "FileMenu-example",
isExpanded: isFileExpanded,
direction: fileDirection,
onClickOut: this.handleFileMenuToggle
}, /*#__PURE__*/React.createElement(ContextMenu.Target, null, /*#__PURE__*/React.createElement("div", {
style: {
background: isFileExpanded ? '#fafafa' : '#eaeaea',
outline: 'solid 1px #d1d1d1',
padding: '4px',
cursor: 'pointer'
},
onClick: this.handleFileMenuToggle
}, "File")), /*#__PURE__*/React.createElement(ContextMenu.FlyOut, {
style: {
background: '#fafafa',
outline: 'solid 1px #d1d1d1',
boxShadow: ' 1px 1px 2px rgba(0, 0, 0, 0.2)',
padding: '8px'
}
}, /*#__PURE__*/React.createElement("div", null, "New Window"), /*#__PURE__*/React.createElement("div", null, "New File"), /*#__PURE__*/React.createElement("div", null, "Open..."), /*#__PURE__*/React.createElement("div", null, "Add Folder..."), /*#__PURE__*/React.createElement("div", null, "Reopen Last Item"), /*#__PURE__*/React.createElement("hr", null), /*#__PURE__*/React.createElement("div", null, "Save"), /*#__PURE__*/React.createElement("div", null, "Save As..."), /*#__PURE__*/React.createElement("div", null, "Save All"), /*#__PURE__*/React.createElement("hr", null), /*#__PURE__*/React.createElement("div", null, "Close Tab"), /*#__PURE__*/React.createElement("div", null, "Close Pane"), /*#__PURE__*/React.createElement("div", null, "Close Window"))), /*#__PURE__*/React.createElement(ContextMenu, {
portalId: "EditMenu-example",
isExpanded: isEditExpanded,
direction: editDirection,
onClickOut: this.handleEditMenuToggle
}, /*#__PURE__*/React.createElement(ContextMenu.Target, null, /*#__PURE__*/React.createElement("div", {
style: {
background: isEditExpanded ? '#fafafa' : '#eaeaea',
outline: 'solid 1px #d1d1d1',
padding: '4px',
cursor: 'pointer'
},
onClick: this.handleEditMenuToggle
}, "Edit")), /*#__PURE__*/React.createElement(ContextMenu.FlyOut, {
style: {
background: '#fafafa',
outline: 'solid 1px #d1d1d1',
boxShadow: ' 1px 1px 2px rgba(0, 0, 0, 0.2)',
padding: '8px'
}
}, /*#__PURE__*/React.createElement("div", null, "Undo"), /*#__PURE__*/React.createElement("div", null, "Redo"), /*#__PURE__*/React.createElement("hr", null), /*#__PURE__*/React.createElement("div", null, "Cut"), /*#__PURE__*/React.createElement("div", null, "Copy"), /*#__PURE__*/React.createElement("div", null, "Paste"), /*#__PURE__*/React.createElement("div", null, "Select All"))));
}
});