@cimpress/react-components
Version:
React components to support the MCP styleguide
63 lines • 3.91 kB
JavaScript
import React, { Component } from 'react';
import { SelectWrapper } from '@cimpress/react-components';
import Select from 'react-select';
import styles from '@cimpress/react-components/lib/Select/styles';
// styles import only required if using react-select ^2.x.x as the selectedSelect
export default class SelectWrapperDemo extends Component {
constructor() {
super(...arguments);
Object.defineProperty(this, "state", {
enumerable: true,
configurable: true,
writable: true,
value: {
options: [
{ value: 'one', label: 'One' },
{ value: 'two', label: 'Two' },
{ value: 'three', label: 'Three' },
{ value: 'four', label: 'Four' },
{ value: 'five', label: 'Five' },
{ value: 'six', label: 'Six' },
{ value: 'seven', label: 'Seven' },
{ value: 'eight', label: 'Eight' },
{ value: 'nine', label: 'Nine' },
{ value: 'ten', label: 'Ten' },
],
selectedSingle: undefined,
selectedMulti: undefined,
}
});
Object.defineProperty(this, "onSingleSelectionChange", {
enumerable: true,
configurable: true,
writable: true,
value: selectedSingle => {
this.setState({ selectedSingle });
}
});
Object.defineProperty(this, "onMultiSelectionChange", {
enumerable: true,
configurable: true,
writable: true,
value: selectedMulti => {
this.setState({ selectedMulti });
}
});
}
render() {
return (React.createElement(React.Fragment, null,
React.createElement("div", { className: "row" },
React.createElement("div", { className: "col-md-6" },
React.createElement(SelectWrapper, { selectedSelect: Select, styles: styles, label: "Select a thing", value: this.state.selectedSingle, options: this.state.options, onChange: this.onSingleSelectionChange, helpText: "You can select a single thing from here." })),
React.createElement("div", { className: "col-md-6" },
React.createElement(SelectWrapper, { styles: styles, selectedSelect: Select, label: "Select many things", value: this.state.selectedMulti, options: this.state.options, onChange: this.onMultiSelectionChange, isMulti: true, helpText: "You can select multiple things from here." }))),
React.createElement("div", { className: "row" },
React.createElement("div", { className: "col-md-4" },
React.createElement(SelectWrapper, { isMulti: true, selectedSelect: Select, styles: styles, label: "Select many things", value: this.state.selectedMulti, options: this.state.options, onChange: this.onMultiSelectionChange, status: "success", helpText: "You can safely select multiple things from here." })),
React.createElement("div", { className: "col-md-4" },
React.createElement(SelectWrapper, { styles: styles, selectedSelect: Select, label: "Select a thing", value: this.state.selectedSingle, options: this.state.options, onChange: this.onSingleSelectionChange, status: "warning", helpText: "You need to cautiously select a thing from here." })),
React.createElement("div", { className: "col-md-4" },
React.createElement(SelectWrapper, { styles: styles, selectedSelect: Select, label: "Select a thing", value: this.state.selectedSingle, options: this.state.options, onChange: this.onSingleSelectionChange, status: "error", helpText: "It is dangerous to select anything." })))));
}
}
//# sourceMappingURL=selectwrapper.js.map