@cimpress/react-components
Version:
React components to support the MCP styleguide
79 lines • 3.95 kB
JavaScript
import React, { PureComponent } from 'react';
import { CurrencySelector, Checkbox } from '@cimpress/react-components';
const DISABLED_CURRENCIES = ['AUD', 'CNY', 'EUR'];
export default class CurrencySelectorDemo extends PureComponent {
constructor() {
super(...arguments);
Object.defineProperty(this, "state", {
enumerable: true,
configurable: true,
writable: true,
value: {
currency: '',
disabled: false,
disabledCurrencies: false,
multiCurrencySelections: null,
symbol: '',
displayFullName: false,
}
});
Object.defineProperty(this, "onChange", {
enumerable: true,
configurable: true,
writable: true,
value: currency => {
if (!currency) {
return this.setState({ currency: '', symbol: '' });
}
const { value, symbol } = currency;
return this.setState({ currency: value, symbol });
}
});
Object.defineProperty(this, "onChangeDisabledCurrencies", {
enumerable: true,
configurable: true,
writable: true,
value: () => {
const previousDisabledCurrencies = this.state.disabledCurrencies;
this.setState({ disabledCurrencies: !previousDisabledCurrencies });
}
});
Object.defineProperty(this, "onChangeMultiSelect", {
enumerable: true,
configurable: true,
writable: true,
value: multiCurrencySelections => {
if (!multiCurrencySelections)
return this.setState({ multiCurrencySelections });
const selections = multiCurrencySelections.map(selection => selection.value);
return this.setState({ multiCurrencySelections: selections });
}
});
Object.defineProperty(this, "onChangeLabels", {
enumerable: true,
configurable: true,
writable: true,
value: () => {
const previousDisplayFullname = this.state.displayFullName;
this.setState({ displayFullName: !previousDisplayFullname });
}
});
}
render() {
const { currency, disabled, disabledCurrencies, symbol, displayFullName, multiCurrencySelections } = this.state;
return (React.createElement("div", null,
React.createElement(Checkbox, { label: "Show full currency name.", checked: displayFullName, onChange: this.onChangeLabels }),
React.createElement(Checkbox, { label: "Disable some currencies.", checked: disabledCurrencies, onChange: this.onChangeDisabledCurrencies }),
React.createElement("div", { className: "row" },
React.createElement("div", { className: "col-md-6" },
React.createElement(CurrencySelector, { clearable: true, currency: currency, disabled: disabled, disabledCurrencies: disabledCurrencies ? DISABLED_CURRENCIES : null, required: true, onChange: this.onChange, displayFullName: displayFullName })),
currency ? React.createElement("div", null,
"Your product costs ",
symbol,
"5.") : null),
React.createElement("div", { className: "row" },
React.createElement("div", { className: "col-md-6" },
React.createElement(CurrencySelector, { clearable: true, currency: multiCurrencySelections, disabled: disabled, disabledCurrencies: disabledCurrencies ? DISABLED_CURRENCIES : null, label: "Select multiple currencies", isMulti: true, required: true, onChange: this.onChangeMultiSelect, displayFullName: displayFullName })))));
}
}
//# sourceMappingURL=currencyselector.js.map