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