lucid-ui
Version:
A UI component library from AppNexus.
41 lines (40 loc) • 1.95 kB
JavaScript
import _ from 'lodash';
import React from 'react';
import createClass from 'create-react-class';
import { ContextMenu } from '../../../index';
const { CENTER, DOWN, END, LEFT, RIGHT, START, UP } = ContextMenu;
const directions = [UP, DOWN, LEFT, RIGHT];
const alignments = [START, CENTER, END];
export default createClass({
render() {
const style = {
background: 'white',
boxShadow: '1px 1px 4px black',
padding: 4,
};
return (React.createElement("section", { style: {
display: 'flex',
flexDirection: 'row',
margin: '0 60px',
} }, _.map(directions, direction => {
return (React.createElement("section", { key: direction, style: {
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
flexGrow: 1,
} }, _.map(alignments, alignment => _.map([0, 15, -15], directonOffset => _.map([0, 15, -15], alignmentOffset => (React.createElement("div", { key: `${alignment}${alignmentOffset}${directonOffset}`, style: { marginTop: '120px' } },
React.createElement(ContextMenu, Object.assign({}, {
direction,
directonOffset,
alignment,
alignmentOffset,
}),
React.createElement(ContextMenu.Target, null, "Target"),
React.createElement(ContextMenu.FlyOut, { style: style },
React.createElement("div", null, `direction: ${direction}`),
React.createElement("div", null, `directonOffset: ${directonOffset}`),
React.createElement("div", null, `alignment: ${alignment}`),
React.createElement("div", null, `alignmentOffset: ${alignmentOffset}`))))))))));
})));
},
});