@cimpress/react-components
Version:
React components to support the MCP styleguide
72 lines • 4.64 kB
JavaScript
import React, { Component } from 'react';
import { Select } from '@cimpress/react-components';
const disabledValue = { value: 'one', label: 'One' };
export default class SelectDemo 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' },
],
selectedSingle: undefined,
selectedMulti: undefined,
selectedBlur: 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 });
}
});
Object.defineProperty(this, "onBlurSelectionChange", {
enumerable: true,
configurable: true,
writable: true,
value: (selectedBlur, action) => {
// v. ^2.0 does not support onBlurResetsInput so the following workaround is required to preserve inputs on blur
if (action.action !== 'input-blur' && action.action !== 'menu-close') {
this.setState({ selectedBlur });
}
}
});
}
render() {
return (React.createElement(React.Fragment, null,
React.createElement("div", { className: "row" },
React.createElement("div", { className: "col-md-6" },
React.createElement(Select, { isClearable: true, 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(Select, { isClearable: true, 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: "col-md-6" },
React.createElement(Select, { isClearable: true, label: "On Blur Test", value: this.state.selectedBlur, inputValue: this.state.selectedBlur, options: this.state.options, onInputChange: this.onBlurSelectionChange, helpText: "Type something and then click outside to test blur." })),
React.createElement("div", { className: "col-md-6" },
React.createElement(Select, { isDisabled: true, isClearable: true, label: "Disable Test", value: disabledValue, options: this.state.options, menuPortalTarget: document.body, onBlurResetsInput: false, helpText: "You can't select anything because the select is disabled." }))),
React.createElement("div", { className: "row" },
React.createElement("div", { className: "col-md-4" },
React.createElement(Select, { isMulti: true, isClearable: true, 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(Select, { isClearable: true, label: "Select a thing", value: this.state.selectedSingle, options: this.state.options, onChange: this.onSingleSelectionChange, status: "warning", helpText: "You need to cautiously select a single thing from here." })),
React.createElement("div", { className: "col-md-4" },
React.createElement(Select, { isClearable: true, 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=select.js.map