@open-tender/ui
Version:
A component library for use with the Open Tender web app
36 lines (35 loc) • 2.11 kB
JavaScript
import { WarningCircle } from 'iconoir-react';
import React from 'react';
import { makeProps } from '../utils';
import Text from './Text';
import View from './View';
const ItemSelections = ({ config, groups, isIncomplete, renderItemOption, renderErrorMessage }) => {
const nonSizeGroups = groups.filter(i => !i.isSize);
const selected = nonSizeGroups.reduce((arr, group) => {
const options = group.options
.filter(option => option.quantity > 0)
.map(option => ({ group, option }));
return [...arr, ...options];
}, []);
const requiredCount = nonSizeGroups.reduce((count, group) => {
const { min, quantity } = group;
const missing = min && quantity < min ? min - quantity : 0;
return (count += missing);
}, 0);
const requiredMsg = !requiredCount
? 'Selections'
: requiredCount === 1
? 'selection'
: 'selections';
const incompleteMsg = `${requiredMsg} required, please choose "Customize"`;
return (React.createElement(View, Object.assign({}, makeProps(config, 'itemSelections')),
(selected.length > 0 || isIncomplete) && (React.createElement(View, Object.assign({}, makeProps(config, 'itemSelections__header')),
React.createElement(Text, Object.assign({}, makeProps(config, 'itemSelections__title'), { text: "Current Selections" })),
requiredCount > 0
? renderErrorMessage(React.createElement(WarningCircle, { width: 18, height: 18, strokeWidth: 2 }), `${requiredCount} ${incompleteMsg}`)
: isIncomplete
? renderErrorMessage(React.createElement(WarningCircle, { width: 18, height: 18, strokeWidth: 2 }), 'Please choose a size')
: null)),
React.createElement(View, Object.assign({}, makeProps(config, 'itemSelections__options')), selected.map(({ group, option }) => (React.createElement(View, Object.assign({ key: `${group.id}-${option.id}` }, makeProps(config, 'itemSelections__option')), renderItemOption(group, option)))))));
};
export default ItemSelections;