@cimpress/react-components
Version:
React components to support the MCP styleguide
157 lines (156 loc) • 7.89 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
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;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.CurrencySelector = void 0;
/* eslint-disable react/no-unstable-nested-components */
const react_1 = __importStar(require("react"));
const memoize_one_1 = __importDefault(require("memoize-one"));
const react_select_1 = require("react-select");
const css_1 = require("@emotion/css");
const currencyCodes_1 = __importDefault(require("./currencyCodes"));
const Select_1 = require("../Select");
const flagContainerStyle = (0, css_1.css) `
display: flex;
align-items: center;
.select-emoji {
width: 18px;
}
`;
const flagStyle = (0, css_1.css) `
display: contents;
`;
const CustomCurrencySelect = ({ value, flag, label, displayFullName }) => (react_1.default.createElement("div", { className: flagContainerStyle },
react_1.default.createElement("span", { className: flagStyle, dangerouslySetInnerHTML: { __html: `${flag}` } }),
"\u00A0 ",
displayFullName ? `${label} (${value})` : value));
class CurrencySelector extends react_1.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: (0, memoize_one_1.default)((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 = currencyCodes_1.default;
if (allowedCurrencies && allowedCurrencies.length > 0) {
const allowedCurrenciesSet = new Set(allowedCurrencies);
availableCurrencies = currencyCodes_1.default.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_1.default.createElement(Select_1.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_1.default.createElement(react_select_1.components.Option, Object.assign({}, props),
react_1.default.createElement(CustomCurrencySelect, Object.assign({}, data, { displayFullName: displayFullName }))));
},
SingleValue: (_a) => {
var { data } = _a, props = __rest(_a, ["data"]);
return (react_1.default.createElement(react_select_1.components.SingleValue, Object.assign({}, props),
react_1.default.createElement(CustomCurrencySelect, Object.assign({}, data, { displayFullName: displayFullName }))));
},
MultiValue: (_a) => {
var { data } = _a, props = __rest(_a, ["data"]);
return (react_1.default.createElement(react_select_1.components.MultiValue, Object.assign({}, props),
react_1.default.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)));
}
}
exports.CurrencySelector = CurrencySelector;
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