import React from 'react'; import { arrayOf, bool, number, shape, string, } from 'prop-types'; import { Rect } from 'react-native-svg'; import Colors from '../../../constants/Colors'; import * as config from './config'; const getCartoucheHeight = (cardinality) => { if (cardinality === 0) { return 0; } if (cardinality === 1) { return config.MARKED_RADIUS * 2; // circle } if (cardinality < 10) { return config.MARKED_RADIUS * 3; } if (cardinality < 20) { return config.MARKED_RADIUS * 4; } return config.MARKED_RADIUS * 5; }; const MarkedCartouche = ({ hasFocused, markedHeight, y }) => ( <Rect rx={config.MARKED_RADIUS} x={config.MARKED_RADIUS * -1} y={y} width={config.MARKED_RADIUS * 2} height={markedHeight} fill={hasFocused ? Colors.hasFocused : Colors.hasMarked} /> ); MarkedCartouche.propTypes = { hasFocused: bool.isRequired, markedHeight: number.isRequired, y: number.isRequired, }; const MarkedIndicators = ({ markedItems, }) => { let nextY = config.BAR_HEIGHT + 18; return markedItems.map(({ subType, marked, focused }) => { const markedHeight = getCartoucheHeight(marked.length); const thisY = nextY; nextY += (markedHeight + 1); return ( <MarkedCartouche key={subType} hasFocused={!!focused.length} markedHeight={markedHeight} y={thisY} /> ); }); }; MarkedIndicators.propTypes = { markedItems: arrayOf(shape({ subType: string.isRequired, marked: arrayOf(string).isRequired, }).isRequired).isRequired, }; export default MarkedIndicators;