lucid-ui/lib/components/ContextMenu/examples/4.directions-interactive.js

A UI component library from AppNexus.

import _parseInt from "lodash/parseInt";
import _isEmpty from "lodash/isEmpty";
import _map from "lodash/map";

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

import React from 'react';
import createClass from 'create-react-class';
import { ContextMenu, SingleSelect, TextField } from '../../../index';
var CENTER = ContextMenu.CENTER,
    DOWN = ContextMenu.DOWN,
    END = ContextMenu.END,
    LEFT = ContextMenu.LEFT,
    RIGHT = ContextMenu.RIGHT,
    START = ContextMenu.START,
    UP = ContextMenu.UP;
export default createClass({
  render: function render() {
    var _this = this;

    var style = {
      background: 'white',
      boxShadow: '1px 1px 4px black',
      padding: 4
    };

    var _ref = this.state || {},
        direction = _ref.direction,
        directonOffset = _ref.directonOffset,
        alignment = _ref.alignment,
        alignmentOffset = _ref.alignmentOffset,
        getAlignmentOffset = _ref.getAlignmentOffset;

    var directions = [UP, DOWN, LEFT, RIGHT];
    var alignments = [START, CENTER, END];
    return /*#__PURE__*/React.createElement("section", null, /*#__PURE__*/React.createElement("section", {
      style: {
        display: 'flex',
        flexDirection: 'column'
      }
    }, /*#__PURE__*/React.createElement(SingleSelect, {
      onSelect: function onSelect(i) {
        return _this.setState({
          direction: directions[i]
        });
      }
    }, /*#__PURE__*/React.createElement(SingleSelect.Placeholder, null, "Select a direction"), _map(directions, function (direction) {
      return /*#__PURE__*/React.createElement(SingleSelect.Option, {
        key: direction
      }, direction);
    })), "directonOffset:", /*#__PURE__*/React.createElement(TextField, {
      style: {
        width: 100
      },
      value: directonOffset,
      onChange: function onChange(directonOffset) {
        return _this.setState({
          directonOffset: directonOffset
        });
      }
    }), /*#__PURE__*/React.createElement(SingleSelect, {
      onSelect: function onSelect(i) {
        return _this.setState({
          alignment: alignments[i]
        });
      }
    }, /*#__PURE__*/React.createElement(SingleSelect.Placeholder, null, "Select an alignment"), _map(alignments, function (alignment) {
      return /*#__PURE__*/React.createElement(SingleSelect.Option, {
        key: alignment
      }, alignment);
    })), "alignmentOffset:", /*#__PURE__*/React.createElement(TextField, {
      style: {
        width: 100
      },
      value: alignmentOffset,
      onChange: function onChange(alignmentOffset) {
        return _this.setState({
          alignmentOffset: alignmentOffset
        });
      }
    }), "getAlignmentOffset:", /*#__PURE__*/React.createElement(TextField, {
      isDisabled: alignment !== CENTER,
      style: {
        width: 100
      },
      value: getAlignmentOffset,
      onSubmit: function onSubmit(getAlignmentOffset) {
        return _this.setState({
          getAlignmentOffset: getAlignmentOffset
        });
      }
    }), /*#__PURE__*/React.createElement("code", null, getAlignmentOffset || null)), /*#__PURE__*/React.createElement("section", {
      style: {
        display: 'flex',
        flexDirection: 'row',
        justifyContent: 'center',
        margin: '90px'
      }
    }, /*#__PURE__*/React.createElement(ContextMenu, {
      direction: direction,
      directonOffset: _isEmpty(directonOffset) ? 0 : _parseInt(directonOffset),
      alignment: alignment || undefined,
      alignmentOffset: _isEmpty(alignmentOffset) ? undefined : _parseInt(alignmentOffset),
      getAlignmentOffset: eval(getAlignmentOffset)
    }, /*#__PURE__*/React.createElement(ContextMenu.Target, null, "Target"), /*#__PURE__*/React.createElement(ContextMenu.FlyOut, {
      style: _objectSpread({
        width: 210
      }, style)
    }, /*#__PURE__*/React.createElement("div", null, "direction: ".concat(direction || 'default')), /*#__PURE__*/React.createElement("div", null, "directonOffset: ".concat(directonOffset || 'default')), /*#__PURE__*/React.createElement("div", null, "alignment: ".concat(alignment || 'default')), /*#__PURE__*/React.createElement("div", null, "alignmentOffset: ".concat(alignmentOffset || 'default')), /*#__PURE__*/React.createElement("div", null, "getAlignmentOffset: ".concat(getAlignmentOffset || 'default'))))));
  }
});