All files / src/components/Avatar generateUserInitialsAvatarSvg.js

100% Statements 16/16
90% Branches 18/20
100% Functions 5/5
100% Lines 15/15
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77    7x                                                               7x 8x         140x 8x 8x       7x     8x   8x 8x 8x 40x   8x                         7x   8x          
import is from 'is_js';
 
const COLOR_SPECS = [{
  nameRegexp: /^[A-D]/i,
  bgFill: '#59295A',  // purple
  textFill: 'white',
}, {
  nameRegexp: /^[E-H]/i,
  bgFill: '#92205F', // magenta
  textFill: 'white',
}, {
  nameRegexp: /^[I-L]/i,
  bgFill: '#DE4C4C',  // red
  textFill: 'white',
}, {
  nameRegexp: /^[M-P]/i,
  bgFill: '#E9852C',  // dark orange
  textFill: 'white',
}, {
  nameRegexp: /^[Q-T]/i,
  bgFill: '#FBCB22',  // orange
  textFill: 'black',
}, {
  nameRegexp: /^[U-X]/i,
  bgFill: '#00773F',  // green
  textFill: 'white',
}, {
  nameRegexp: /^[Y-Z]/i,
  bgFill: '#1C8FC2',  // cyan
  textFill: 'white',
}];
 
// https://github.com/bhovhannes/svg-url-loader/blob/4bfa8519/index.js
/* eslint-disable */
const convertSvgToDataUri = (html) => {
  let data = html
    .replace(/\n/g, '')
    .replace(/"/g, "'")
    .replace(/\s+/g, " ")
    .replace(/[{}\|\\\^~\[\]`"<>#%]/g, (match) =>
      '%' + match[0].charCodeAt(0).toString(16).toUpperCase());
  data = 'data:image/svg+xml;charset=utf8,' + data.trim();
  return data;
};
/* eslint-enable */
 
export const generatePlaceholderSvgXml = (userFirstName, userLastName,
    forcedBgFill, forcedTextFill) => {
  const userFirstNameOrEmpty =
      is.string(userFirstName) && is.not.empty(userFirstName) ? userFirstName : '?';
  const userLastNameOrEmpty =
      is.string(userLastName) && is.not.empty(userLastName) ? userLastName : '?';
  const userFirstInitial = userFirstNameOrEmpty.charAt(0).toUpperCase();
  const userLastInitial = userLastNameOrEmpty.charAt(0).toUpperCase();
  const colorSpec = COLOR_SPECS.find((m) => m.nameRegexp.test(userFirstNameOrEmpty)) || {};
  // `dy` ref: http://stackoverflow.com/a/31376501
  return `<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg" version="1.1">
    <rect width="100%" height="100%" fill="${forcedBgFill || colorSpec.bgFill || '#FFF'}" />
    <text fill="${forcedTextFill || colorSpec.textFill || '#000'}"
        font-size="14px"
        font-weight="bold"
        font-family="Helvetica"
        text-anchor="middle"
        x="50%" y="50%" dy=".35em">
      ${userFirstInitial || '?'}${userLastInitial || '?'}
    </text>
  </svg>`;
};
 
export const generatePlaceholderSvgDataUri = (userFirstName, userLastName,
    forcedBgFill, forcedTextFill) =>
  convertSvgToDataUri(
    generatePlaceholderSvgXml(userFirstName, userLastName,
        forcedBgFill, forcedTextFill));
 
export default generatePlaceholderSvgDataUri;