@cimpress/react-components/dist/docs/components/inlineEdit/inlineedit.js

React components to support the MCP styleguide

"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = __importStar(require("react"));
const react_components_1 = require("@cimpress/react-components");
class InlineEditDemo extends react_1.Component {
    constructor() {
        super(...arguments);
        Object.defineProperty(this, "state", {
            enumerable: true,
            configurable: true,
            writable: true,
            value: {
                activeChangeValue: 'Play around with this text',
                normalValue: '',
                requiredValue: 'See what happens when you empty this field',
                sizeValue: 'I come in multiple sizes!',
                validationValue: 'See what happens when you validate',
            }
        });
        Object.defineProperty(this, "handleSuccess", {
            enumerable: true,
            configurable: true,
            writable: true,
            value: ({ value, name }) => {
                this.setState({ [name]: value });
            }
        });
        Object.defineProperty(this, "handleChange", {
            enumerable: true,
            configurable: true,
            writable: true,
            value: ({ target: { name, value } }) => {
                this.setState({ [name]: value });
            }
        });
        Object.defineProperty(this, "validateText", {
            enumerable: true,
            configurable: true,
            writable: true,
            value: text => {
                if (text.toLowerCase() === 'test') {
                    return 'Told you not to enter test';
                }
                return null;
            }
        });
    }
    render() {
        return (react_1.default.createElement(react_1.default.Fragment, null,
            react_1.default.createElement("div", { className: "row" },
                react_1.default.createElement("div", { className: "col-md-6" },
                    react_1.default.createElement(react_components_1.InlineEdit, { name: "normalValue", placeholder: "No need for a label here.", value: this.state.normalValue, onSave: this.handleSuccess })),
                react_1.default.createElement("div", { className: "col-md-6" },
                    react_1.default.createElement("div", { className: "row" },
                        react_1.default.createElement("div", { className: "col-md-6" },
                            react_1.default.createElement(react_components_1.InlineEdit, { name: "activeChangeValue", placeholder: "Add a description", label: "Description", value: this.state.activeChangeValue, onChange: this.handleChange })),
                        react_1.default.createElement("div", { className: "col-md-6" },
                            react_1.default.createElement("p", { style: { wordBreak: 'break-all' } }, this.state.activeChangeValue))))),
            react_1.default.createElement("div", { className: "row" },
                react_1.default.createElement("div", { className: "col-md-6" },
                    react_1.default.createElement(react_components_1.InlineEdit, { name: "requiredValue", placeholder: "It's dangerous to go alone.", label: "Take This", value: this.state.requiredValue, onSave: this.handleSuccess, required: true })),
                react_1.default.createElement("div", { className: "col-md-6" },
                    react_1.default.createElement(react_components_1.InlineEdit, { name: "disabledValue", placeholder: "It's dangerous to go alone.", label: "This field is disabled!", value: "Have you tried turning it off and on again?", onSave: this.handleSuccess, disabled: true })),
                react_1.default.createElement("div", { className: "col-md-6" },
                    react_1.default.createElement(react_components_1.InlineEdit, { name: "textareaValue", placeholder: "Enter some very long text", label: "This uses a textarea", value: "Ok, but what if you have some really long text and you want to edit across multiple lines. There's a solution for that!", onSave: this.handleSuccess, type: "textarea" }))),
            react_1.default.createElement("div", { className: "row" },
                react_1.default.createElement("div", { className: "col-md-6" },
                    react_1.default.createElement(react_components_1.InlineEdit, { name: "validationValue", label: "Don't enter test", value: this.state.validationValue, validateInput: this.validateText, onSave: this.handleSuccess }))),
            react_1.default.createElement("div", { className: "row" },
                react_1.default.createElement("div", { className: "col-md-6" },
                    react_1.default.createElement(react_components_1.InlineEdit, { name: "sizeValue", size: "h2", value: this.state.sizeValue, onSave: this.handleSuccess })))));
    }
}
exports.default = InlineEditDemo;
//# sourceMappingURL=inlineedit.js.map