@cimpress/react-components
Version:
React components to support the MCP styleguide
127 lines (126 loc) • 6.3 kB
JavaScript
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
/* eslint-disable react/no-unstable-nested-components */
import React, { PureComponent } from 'react';
import memoizeOne from 'memoize-one';
import { components } from 'react-select';
import { css } from '@emotion/css';
import CURRENCY_CODES from './currencyCodes';
import { Select } from '../Select';
const flagContainerStyle = css `
display: flex;
align-items: center;
.select-emoji {
width: 18px;
}
`;
const flagStyle = css `
display: contents;
`;
const CustomCurrencySelect = ({ value, flag, label, displayFullName }) => (React.createElement("div", { className: flagContainerStyle },
React.createElement("span", { className: flagStyle, dangerouslySetInnerHTML: { __html: `${flag}` } }),
"\u00A0 ",
displayFullName ? `${label} (${value})` : value));
export class CurrencySelector extends PureComponent {
constructor() {
super(...arguments);
Object.defineProperty(this, "onChangeCurrency", {
enumerable: true,
configurable: true,
writable: true,
value: (currency) => {
const { onChange } = this.props;
if (onChange)
onChange(currency);
}
});
Object.defineProperty(this, "getCurrencyCodes", {
enumerable: true,
configurable: true,
writable: true,
value: memoizeOne((disabledCurrencies, allowedCurrencies) => {
// This prevents every currency selector from making a copy of the list of currencies.
// Because the common use case is to not disable currencies (or provide restriction), most selectors will not copy the list.
let availableCurrencies = CURRENCY_CODES;
if (allowedCurrencies && allowedCurrencies.length > 0) {
const allowedCurrenciesSet = new Set(allowedCurrencies);
availableCurrencies = CURRENCY_CODES.filter(currecny => allowedCurrenciesSet.has(currecny.value));
}
if (!disabledCurrencies || disabledCurrencies.length === 0) {
return availableCurrencies;
}
const disabledCurrencySet = new Set(disabledCurrencies);
const currencies = availableCurrencies.map(currency => disabledCurrencySet.has(currency.value) ? Object.assign(Object.assign({}, currency), { disabled: true }) : currency);
return currencies;
})
});
Object.defineProperty(this, "getCurrencyValue", {
enumerable: true,
configurable: true,
writable: true,
value: (codeOptions) => {
const { currency } = this.props;
if (Array.isArray(currency)) {
return currency.map(selectedCurrency => {
const currencyIdx = codeOptions.findIndex(option => option.value === selectedCurrency);
return codeOptions[currencyIdx];
});
}
const currencyIdx = codeOptions.findIndex(option => option.value === currency);
return codeOptions[currencyIdx];
}
});
}
render() {
const _a = this.props, { className, isClearable, currency, isDisabled, disabledCurrencies, allowedCurrencies, displayFullName, label, styles } = _a, rest = __rest(_a, ["className", "isClearable", "currency", "isDisabled", "disabledCurrencies", "allowedCurrencies", "displayFullName", "label", "styles"]);
const currencyClassName = `currency-select ${className}`;
const currencyCodes = this.getCurrencyCodes(disabledCurrencies, allowedCurrencies);
return (React.createElement(Select, Object.assign({ label: label, isDisabled: isDisabled, className: currencyClassName,
// This is the v2+ way of handling custom styling for various parts of the select
// The inline functions are done in order to pass displayFullName along for the display logic
components: {
Option: (_a) => {
var { data } = _a, props = __rest(_a, ["data"]);
return (React.createElement(components.Option, Object.assign({}, props),
React.createElement(CustomCurrencySelect, Object.assign({}, data, { displayFullName: displayFullName }))));
},
SingleValue: (_a) => {
var { data } = _a, props = __rest(_a, ["data"]);
return (React.createElement(components.SingleValue, Object.assign({}, props),
React.createElement(CustomCurrencySelect, Object.assign({}, data, { displayFullName: displayFullName }))));
},
MultiValue: (_a) => {
var { data } = _a, props = __rest(_a, ["data"]);
return (React.createElement(components.MultiValue, Object.assign({}, props),
React.createElement(CustomCurrencySelect, Object.assign({}, data, { displayFullName: displayFullName }))));
},
}, isOptionDisabled: (option) => option.disabled, isClearable: isClearable, onChange: this.onChangeCurrency, options: currencyCodes, value: this.getCurrencyValue(currencyCodes), styles: styles }, rest)));
}
}
Object.defineProperty(CurrencySelector, "defaultProps", {
enumerable: true,
configurable: true,
writable: true,
value: {
isDisabled: false,
disabledCurrencies: [],
allowedCurrencies: [],
isMulti: false,
className: '',
displayFullName: false,
isClearable: false,
currency: undefined,
label: 'Currency',
styles: {},
}
});
//# sourceMappingURL=CurrencySelector.js.map