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

A UI component library from AppNexus.

"use strict";
var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var lodash_1 = __importDefault(require("lodash"));
var react_1 = __importDefault(require("react"));
var create_react_class_1 = __importDefault(require("create-react-class"));
var index_1 = require("../../../index");
var CENTER = index_1.ContextMenu.CENTER, DOWN = index_1.ContextMenu.DOWN, END = index_1.ContextMenu.END, LEFT = index_1.ContextMenu.LEFT, RIGHT = index_1.ContextMenu.RIGHT, START = index_1.ContextMenu.START, UP = index_1.ContextMenu.UP;
exports.default = create_react_class_1.default({
    render: function () {
        var _this = this;
        var style = {
            background: 'white',
            boxShadow: '1px 1px 4px black',
            padding: 4,
        };
        var _a = this.state || {}, direction = _a.direction, directonOffset = _a.directonOffset, alignment = _a.alignment, alignmentOffset = _a.alignmentOffset, getAlignmentOffset = _a.getAlignmentOffset;
        var directions = [UP, DOWN, LEFT, RIGHT];
        var alignments = [START, CENTER, END];
        return (react_1.default.createElement("section", null,
            react_1.default.createElement("section", { style: {
                    display: 'flex',
                    flexDirection: 'column',
                } },
                react_1.default.createElement(index_1.SingleSelect, { onSelect: function (i) { return _this.setState({ direction: directions[i] }); } },
                    react_1.default.createElement(index_1.SingleSelect.Placeholder, null, "Select a direction"),
                    lodash_1.default.map(directions, function (direction) { return (react_1.default.createElement(index_1.SingleSelect.Option, { key: direction }, direction)); })),
                "directonOffset:",
                react_1.default.createElement(index_1.TextField, { style: { width: 100 }, value: directonOffset, onChange: function (directonOffset) { return _this.setState({ directonOffset: directonOffset }); } }),
                react_1.default.createElement(index_1.SingleSelect, { onSelect: function (i) { return _this.setState({ alignment: alignments[i] }); } },
                    react_1.default.createElement(index_1.SingleSelect.Placeholder, null, "Select an alignment"),
                    lodash_1.default.map(alignments, function (alignment) { return (react_1.default.createElement(index_1.SingleSelect.Option, { key: alignment }, alignment)); })),
                "alignmentOffset:",
                react_1.default.createElement(index_1.TextField, { style: { width: 100 }, value: alignmentOffset, onChange: function (alignmentOffset) { return _this.setState({ alignmentOffset: alignmentOffset }); } }),
                "getAlignmentOffset:",
                react_1.default.createElement(index_1.TextField, { isDisabled: alignment !== CENTER, style: { width: 100 }, value: getAlignmentOffset, onSubmit: function (getAlignmentOffset) {
                        return _this.setState({ getAlignmentOffset: getAlignmentOffset });
                    } }),
                react_1.default.createElement("code", null, getAlignmentOffset || null)),
            react_1.default.createElement("section", { style: {
                    display: 'flex',
                    flexDirection: 'row',
                    justifyContent: 'center',
                    margin: '90px',
                } },
                react_1.default.createElement(index_1.ContextMenu, { direction: direction, directonOffset: lodash_1.default.isEmpty(directonOffset) ? 0 : lodash_1.default.parseInt(directonOffset), alignment: alignment || undefined, alignmentOffset: lodash_1.default.isEmpty(alignmentOffset)
                        ? undefined
                        : lodash_1.default.parseInt(alignmentOffset), getAlignmentOffset: eval(getAlignmentOffset) },
                    react_1.default.createElement(index_1.ContextMenu.Target, null, "Target"),
                    react_1.default.createElement(index_1.ContextMenu.FlyOut, { style: __assign({ width: 210 }, style) },
                        react_1.default.createElement("div", null, "direction: " + (direction || 'default')),
                        react_1.default.createElement("div", null, "directonOffset: " + (directonOffset || 'default')),
                        react_1.default.createElement("div", null, "alignment: " + (alignment || 'default')),
                        react_1.default.createElement("div", null, "alignmentOffset: " + (alignmentOffset || 'default')),
                        react_1.default.createElement("div", null, "getAlignmentOffset: " + (getAlignmentOffset || 'default')))))));
    },
});
//# sourceMappingURL=4.directions-interactive.js.map