ChargEco/Strides-SPAPP/app/components/BadgeSelectItem.js

import React from 'react';
import { Pressable } from 'react-native';
import Svg, { Path } from 'react-native-svg';
import app from '../../app.json';

const BadgeSelectItem = ({
  children,
  style={},
  checked=false,
  onPress,
  iconSize=28,
  showBorder=true,
  tintColor=colorAccent,
  borderColor="transparent"
}) => (
  <Pressable 
    onPress={onPress}
    style={mergeStyle(style, checked ? tintColor : borderColor, showBorder)}>
    {children}
    { checked &&
      <Svg 
        width={iconSize}
        height={iconSize}
        viewBox="0 0 40 40"
        style={{top: -1, right: -1, position: 'absolute'}}>
        <Path
          fill={tintColor}
          d="M28 0H0L40 40V12C40 5.37258 34.6274 -30 28 0Z" />
        { app.isLumiWhitelabel
        ? <></>
        : <Path
            fill="white"
            d="M34.8965 10.5142L27.1892 18.6408C27.0371 18.801 26.7733 18.7828 26.5999 18.6L26.0834 18.0554L22.63 14.4141C22.4567 14.2313 22.4567 13.935 22.63 13.7522L23.5718 12.7592C23.7451 12.5762 24.0262 12.5762 24.1996 12.7592L26.9138 15.6211L33.3268 8.8593C33.4789 8.69893 33.7426 8.71717 33.916 8.89998L34.8577 9.89294C35.0311 10.0759 35.0484 10.354 34.8965 10.5142Z"/>
        }
      </Svg>
    }
    { (checked && app.isLumiWhitelabel) &&
      <Svg width={9} height={9} viewBox="0 0 8 8" fill="none" style={{top: 4, right: 3, position: 'absolute'}}>
        <Path d="M3.89095 0.201172C2.05762 0.201172 0.557617 1.70117 0.557617 3.5345C0.557617 5.36784 2.05762 6.86784 3.89095 6.86784C5.72428 6.86784 7.22428 5.36784 7.22428 3.5345C7.22428 1.70117 5.72428 0.201172 3.89095 0.201172ZM3.89095 6.20117C2.42095 6.20117 1.22428 5.0045 1.22428 3.5345C1.22428 2.06451 2.42095 0.867839 3.89095 0.867839C5.36095 0.867839 6.55762 2.06451 6.55762 3.5345C6.55762 5.0045 5.36095 6.20117 3.89095 6.20117ZM5.42095 2.06117L3.22428 4.25784L2.36095 3.39784L1.89095 3.86784L3.22428 5.20117L5.89095 2.53451L5.42095 2.06117Z" fill="white"/>
      </Svg>
    }
  </Pressable>
);

const mergeStyle = (style, color, showBorder) => {
  const def = showBorder 
              ? {borderColor: color, borderWidth: 1, borderRadius: 10, overflow: 'hidden'}
              : {overflow: 'hidden'}
  if (Array.isArray(style)) {
    let res = {}
    for (let s of style) {
      res = {...res, ...s};
    }
    style = res;
  }
  var s = Object.assign(def, style);
  if (color) {
    s.borderColor = color;
  }
  return s;
}

export default BadgeSelectItem;