lucid-ui
Version:
A UI component library from AppNexus.
53 lines (52 loc) • 3.59 kB
JavaScript
import _ from 'lodash';
import React from 'react';
import createClass from 'create-react-class';
import { ContextMenu, SingleSelect, TextField } from '../../../index';
const { CENTER, DOWN, END, LEFT, RIGHT, START, UP } = ContextMenu;
export default createClass({
render() {
const style = {
background: 'white',
boxShadow: '1px 1px 4px black',
padding: 4,
};
const { direction, directonOffset, alignment, alignmentOffset, getAlignmentOffset, } = this.state || {};
const directions = [UP, DOWN, LEFT, RIGHT];
const alignments = [START, CENTER, END];
return (React.createElement("section", null,
React.createElement("section", { style: {
display: 'flex',
flexDirection: 'column',
} },
React.createElement(SingleSelect, { onSelect: i => this.setState({ direction: directions[i] }) },
React.createElement(SingleSelect.Placeholder, null, "Select a direction"),
_.map(directions, direction => (React.createElement(SingleSelect.Option, { key: direction }, direction)))),
"directonOffset:",
React.createElement(TextField, { style: { width: 100 }, value: directonOffset, onChange: directonOffset => this.setState({ directonOffset }) }),
React.createElement(SingleSelect, { onSelect: i => this.setState({ alignment: alignments[i] }) },
React.createElement(SingleSelect.Placeholder, null, "Select an alignment"),
_.map(alignments, alignment => (React.createElement(SingleSelect.Option, { key: alignment }, alignment)))),
"alignmentOffset:",
React.createElement(TextField, { style: { width: 100 }, value: alignmentOffset, onChange: alignmentOffset => this.setState({ alignmentOffset }) }),
"getAlignmentOffset:",
React.createElement(TextField, { isDisabled: alignment !== CENTER, style: { width: 100 }, value: getAlignmentOffset, onSubmit: getAlignmentOffset => this.setState({ getAlignmentOffset }) }),
React.createElement("code", null, getAlignmentOffset || null)),
React.createElement("section", { style: {
display: 'flex',
flexDirection: 'row',
justifyContent: 'center',
margin: '90px',
} },
React.createElement(ContextMenu, { direction: direction, directonOffset: _.isEmpty(directonOffset) ? 0 : _.parseInt(directonOffset), alignment: alignment || undefined, alignmentOffset: _.isEmpty(alignmentOffset)
? undefined
: _.parseInt(alignmentOffset), getAlignmentOffset: eval(getAlignmentOffset) },
React.createElement(ContextMenu.Target, null, "Target"),
React.createElement(ContextMenu.FlyOut, { style: { width: 210, ...style } },
React.createElement("div", null, `direction: ${direction || 'default'}`),
React.createElement("div", null, `directonOffset: ${directonOffset || 'default'}`),
React.createElement("div", null, `alignment: ${alignment || 'default'}`),
React.createElement("div", null, `alignmentOffset: ${alignmentOffset || 'default'}`),
React.createElement("div", null, `getAlignmentOffset: ${getAlignmentOffset ||
'default'}`))))));
},
});