@open-tender/ui
Version:
A component library for use with the Open Tender web app
82 lines (81 loc) • 6.1 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const utils_1 = require("@open-tender/utils");
const iconoir_react_1 = require("iconoir-react");
const react_1 = tslib_1.__importDefault(require("react"));
const utils_2 = require("../utils");
const Button_1 = tslib_1.__importDefault(require("./Button"));
const Text_1 = tslib_1.__importDefault(require("./Text"));
const View_1 = tslib_1.__importDefault(require("./View"));
const ItemOptionSelected = ({ config, handlers, group, option, apiUrl }) => {
const { name,
// description,
isSoldOut, price, cals,
// tags,
// allergens,
// optionGroups,
// showImage,
// showDescription,
// allergenAlert,
isRadio,
// showGroups,
toggle, increment, decrement,
// decrementDisabled,
// updatedLevels,
groupAtMax,
// oneOnly,
imageUrl, quantity, optionAtMax } = option;
const imageProps = (0, utils_2.makeImageProps)(config, 'itemOptionSelected__image', imageUrl, apiUrl);
const disabled = isSoldOut || (group.max !== 1 && groupAtMax && quantity === 0);
const selected = quantity > 0;
const nestedGroups = selected && option.groups.length ? option.groups : null;
const nestedRequired = option.groups.filter(i => i.quantity < i.min).length > 0;
const nestedText = nestedRequired
? 'Selections Required'
: 'Adjust Selections';
const nestedOptions = nestedGroups
? (0, utils_1.makeModifierNamesForGroups)(nestedGroups)
: null;
const onClick = () => {
if (isRadio || (group.max === 1 && quantity === 0)) {
toggle();
}
else if ((group.max === 1 || option.max === 1) && quantity === 1) {
decrement();
}
else {
increment();
}
};
return (react_1.default.createElement(View_1.default, Object.assign({}, (0, utils_2.makeProps)(config, 'itemOptionSelected')),
react_1.default.createElement(View_1.default, Object.assign({}, (0, utils_2.makeProps)(config, nestedRequired && !selected
? 'itemOptionSelected__containerRequired'
: selected
? 'itemOptionSelected__containerSelected'
: 'itemOptionSelected__container')),
selected && (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement(Button_1.default, Object.assign({}, (0, utils_2.makeProps)(config, 'itemOptionSelected__decrease'), { onClick: decrement, disabled: quantity <= 0 }),
react_1.default.createElement(View_1.default, Object.assign({}, (0, utils_2.makeProps)(config, 'itemOptionSelected__decreaseIcon')),
react_1.default.createElement(iconoir_react_1.Minus, { width: 24, height: 24, strokeWidth: 2 }))),
react_1.default.createElement(Button_1.default, Object.assign({}, (0, utils_2.makeProps)(config, 'itemOptionSelected__increase'), { onClick: increment, disabled: groupAtMax || optionAtMax }),
react_1.default.createElement(View_1.default, Object.assign({}, (0, utils_2.makeProps)(config, 'itemOptionSelected__increaseIcon')),
react_1.default.createElement(iconoir_react_1.Plus, { width: 24, height: 24, strokeWidth: 2 }))))),
react_1.default.createElement(Button_1.default, Object.assign({}, (0, utils_2.makeProps)(config, 'itemOptionSelected__button'), { onClick: onClick, disabled: disabled }),
react_1.default.createElement(View_1.default, Object.assign({}, (0, utils_2.makeProps)(config, 'itemOptionSelected__quantityContainer')), selected && (react_1.default.createElement(Text_1.default, Object.assign({}, (0, utils_2.makeProps)(config, 'itemOptionSelected__quantity'), { text: `${quantity}` })))),
react_1.default.createElement(View_1.default, Object.assign({}, (0, utils_2.makeProps)(config, 'itemOptionSelected__imageContainer')),
react_1.default.createElement(View_1.default, Object.assign({}, (0, utils_2.makeProps)(config, 'itemOptionSelected__imageWrapper')),
react_1.default.createElement(View_1.default, Object.assign({}, imageProps)))),
react_1.default.createElement(View_1.default, Object.assign({}, (0, utils_2.makeProps)(config, 'itemOptionSelected__nameContainer')),
react_1.default.createElement(Text_1.default, Object.assign({}, (0, utils_2.makeProps)(config, 'itemOptionSelected__name'), { text: name })),
react_1.default.createElement(View_1.default, Object.assign({}, (0, utils_2.makeProps)(config, 'itemOptionSelected__priceContainer')),
react_1.default.createElement(Text_1.default, Object.assign({}, (0, utils_2.makeProps)(config, 'itemOptionSelected__price'), { text: price || ' ' })),
cals && (react_1.default.createElement(Text_1.default, Object.assign({}, (0, utils_2.makeProps)(config, 'itemOptionSelected__cals'), { text: `${cals} cals` })))))),
nestedGroups && (react_1.default.createElement(View_1.default, Object.assign({}, (0, utils_2.makeProps)(config, 'itemOptionSelected__groups')),
nestedOptions && (react_1.default.createElement(View_1.default, Object.assign({}, (0, utils_2.makeProps)(config, 'itemOptionSelected__groupsOptions')),
react_1.default.createElement(Text_1.default, Object.assign({}, (0, utils_2.makeProps)(config, 'itemOptionSelected__groupsOptionNames'), { text: nestedOptions })))),
react_1.default.createElement(Button_1.default, Object.assign({}, (0, utils_2.makeProps)(config, nestedRequired
? 'itemOptionSelected__groupsButtonRequired'
: 'itemOptionSelected__groupsButton'), { onClick: handlers.showNested, disabled: !selected, text: nestedText, iconDisplay: "before", icon: react_1.default.createElement(iconoir_react_1.PlusCircle, { width: 18, height: 18, strokeWidth: 1.5 }) })))))));
};
exports.default = ItemOptionSelected;