@cimpress/react-components
Version:
React components to support the MCP styleguide
72 lines • 4.36 kB
JavaScript
import React, { Component } from 'react';
import { InlineEdit } from '@cimpress/react-components';
export default class InlineEditDemo extends 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.createElement(React.Fragment, null,
React.createElement("div", { className: "row" },
React.createElement("div", { className: "col-md-6" },
React.createElement(InlineEdit, { name: "normalValue", placeholder: "No need for a label here.", value: this.state.normalValue, onSave: this.handleSuccess })),
React.createElement("div", { className: "col-md-6" },
React.createElement("div", { className: "row" },
React.createElement("div", { className: "col-md-6" },
React.createElement(InlineEdit, { name: "activeChangeValue", placeholder: "Add a description", label: "Description", value: this.state.activeChangeValue, onChange: this.handleChange })),
React.createElement("div", { className: "col-md-6" },
React.createElement("p", { style: { wordBreak: 'break-all' } }, this.state.activeChangeValue))))),
React.createElement("div", { className: "row" },
React.createElement("div", { className: "col-md-6" },
React.createElement(InlineEdit, { name: "requiredValue", placeholder: "It's dangerous to go alone.", label: "Take This", value: this.state.requiredValue, onSave: this.handleSuccess, required: true })),
React.createElement("div", { className: "col-md-6" },
React.createElement(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.createElement("div", { className: "col-md-6" },
React.createElement(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.createElement("div", { className: "row" },
React.createElement("div", { className: "col-md-6" },
React.createElement(InlineEdit, { name: "validationValue", label: "Don't enter test", value: this.state.validationValue, validateInput: this.validateText, onSave: this.handleSuccess }))),
React.createElement("div", { className: "row" },
React.createElement("div", { className: "col-md-6" },
React.createElement(InlineEdit, { name: "sizeValue", size: "h2", value: this.state.sizeValue, onSave: this.handleSuccess })))));
}
}
//# sourceMappingURL=inlineedit.js.map