lucid-ui/dist/cjs/components/Dialog/examples/4.complex.js

A UI component library from AppNexus.

"use strict";
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 style = {
    marginBottom: '3px',
};
var Option = index_1.SearchableMultiSelect.Option;
var Placeholder = index_1.SingleSelect.Placeholder, SingleOption = index_1.SingleSelect.Option;
exports.default = create_react_class_1.default({
    getInitialState: function () {
        return {
            isShown: false,
            flavors: ['chocolate'],
        };
    },
    handleShow: function (isShown) {
        this.setState({ isShown: isShown });
    },
    handleSelectedChocolate: function (isSelected) {
        this.setState({
            flavors: isSelected
                ? lodash_1.default.concat(this.state.flavors, 'chocolate')
                : lodash_1.default.without(this.state.flavors, 'chocolate'),
        });
    },
    handleSelectedStrawberry: function (isSelected) {
        this.setState({
            flavors: isSelected
                ? lodash_1.default.concat(this.state.flavors, 'strawberry')
                : lodash_1.default.without(this.state.flavors, 'strawberry'),
        });
    },
    render: function () {
        return (react_1.default.createElement("div", null,
            react_1.default.createElement(index_1.Button, { onClick: lodash_1.default.partial(this.handleShow, !this.state.isShown) }, "Toggle"),
            react_1.default.createElement(index_1.Dialog, { isComplex: true, isShown: this.state.isShown, handleClose: lodash_1.default.partial(this.handleShow, !this.state.isShown), Header: 'Advanced Filters', size: 'medium' },
                react_1.default.createElement("p", { style: { fontSize: '16px' } }, "Flavor"),
                react_1.default.createElement(index_1.CheckboxLabeled, { isSelected: lodash_1.default.includes(this.state.flavors, 'chocolate'), name: 'interactive-checkboxes', onSelect: this.handleSelectedChocolate, style: style },
                    react_1.default.createElement(index_1.CheckboxLabeled.Label, null, "Chocolate")),
                react_1.default.createElement(index_1.CheckboxLabeled, { isSelected: lodash_1.default.includes(this.state.flavors, 'strawberry'), name: 'interactive-checkboxes', onSelect: this.handleSelectedStrawberry, style: style },
                    react_1.default.createElement(index_1.CheckboxLabeled.Label, null, "Strawberry")),
                react_1.default.createElement("p", { style: { fontSize: '16px', marginTop: '25px' } }, "Flavor Combination Research"),
                react_1.default.createElement(index_1.SearchField, { placeholder: 'Sundae school...' }),
                react_1.default.createElement("p", { style: { fontSize: '16px', marginTop: '25px' } }, "Toppings"),
                react_1.default.createElement(index_1.SearchableMultiSelect, { responsiveMode: 'large' },
                    react_1.default.createElement(Option, null, "cookie dough"),
                    react_1.default.createElement(Option, null, "more ice cream"),
                    react_1.default.createElement(Option, null, "mochi"),
                    react_1.default.createElement(Option, null, "peanut butter cups")),
                react_1.default.createElement("p", { style: { fontSize: '16px', marginTop: '25px' } }, "Ice Cream Breaks"),
                react_1.default.createElement(index_1.SingleSelect, { onSelect: this.handleSelect },
                    react_1.default.createElement(Placeholder, null, "You must select a break..."),
                    react_1.default.createElement(SingleOption, null, "10am"),
                    react_1.default.createElement(SingleOption, null, "11am"),
                    react_1.default.createElement(SingleOption, null, "1pm"),
                    react_1.default.createElement(SingleOption, null, "2pm")),
                react_1.default.createElement(index_1.Dialog.Footer, null,
                    react_1.default.createElement(index_1.Button, { kind: 'invisible', onClick: lodash_1.default.partial(this.handleShow, false), style: { marginRight: '9px' } }, "Cancel"),
                    react_1.default.createElement(index_1.Button, { kind: 'primary' }, "Save")))));
    },
});
//# sourceMappingURL=4.complex.js.map