packages/mail/helpers/getPlaceholderSrc.tsx

   1 import { ThemeTypes } from '@proton/shared/lib/themes/themes';
   2 import conversationFullSvgDark from '@proton/styles/assets/img/placeholders/inbox-cool-dark.svg';
   3 import conversationFullSvgLight from '@proton/styles/assets/img/placeholders/inbox-cool-light.svg';
   4 import conversationEmptySvgDark from '@proton/styles/assets/img/placeholders/inbox-empty-cool-dark.svg';
   5 import conversationEmptySvgLight from '@proton/styles/assets/img/placeholders/inbox-empty-cool-light.svg';
   6 import conversationEmptySvgWarm from '@proton/styles/assets/img/placeholders/inbox-empty-warm-light.svg';
   7 import conversationSemiSvgDark from '@proton/styles/assets/img/placeholders/inbox-semi-cool-dark.svg';
   8 import conversationSemiSvgLight from '@proton/styles/assets/img/placeholders/inbox-semi-cool-light.svg';
   9 import conversationSemiSvgWarm from '@proton/styles/assets/img/placeholders/inbox-semi-warm-light.svg';
  10 import conversationFullSvgWarm from '@proton/styles/assets/img/placeholders/inbox-warm-light.svg';
  11
  12 interface Params {
  13     theme: ThemeTypes;
  14     warmLight: string;
  15     coolLight: string;
  16     coolDark: string;
  17 }
  18
  19 /**
  20  * Placeholders are theme dependant since the warmness of the grey depends on the theme.
  21  * This method returns the appropriate src based on the theme the user has set.
  22  * @param object containing the theme type information and the different image src.
  23  * @returns the appropriate src based on the theme
  24  */
  25 export const getPlaceholderSrc = ({ theme, warmLight, coolLight, coolDark }: Params) => {
  26     if (theme === ThemeTypes.Duotone || theme === ThemeTypes.Snow || theme === ThemeTypes.ContrastLight) {
  27         return warmLight;
  28     }
  29
  30     if (theme === ThemeTypes.Classic || theme === ThemeTypes.Legacy) {
  31         return coolLight;
  32     }
  33
  34     if (theme === ThemeTypes.Carbon || theme === ThemeTypes.Monokai || theme === ThemeTypes.ContrastDark) {
  35         return coolDark;
  36     }
  37
  38     return warmLight;
  39 };
  40
  41 interface Temp {
  42     size: number;
  43     theme: ThemeTypes;
  44 }
  45
  46 export const getInboxEmptyPlaceholder = ({ size, theme }: Temp) => {
  47     if (size === 0) {
  48         return getPlaceholderSrc({
  49             theme,
  50             coolDark: conversationEmptySvgDark,
  51             coolLight: conversationEmptySvgLight,
  52             warmLight: conversationEmptySvgWarm,
  53         });
  54     }
  55
  56     if (size < 10) {
  57         return getPlaceholderSrc({
  58             theme,
  59             coolDark: conversationSemiSvgDark,
  60             coolLight: conversationSemiSvgLight,
  61             warmLight: conversationSemiSvgWarm,
  62         });
  63     }
  64
  65     return getPlaceholderSrc({
  66         theme,
  67         coolDark: conversationFullSvgDark,
  68         coolLight: conversationFullSvgLight,
  69         warmLight: conversationFullSvgWarm,
  70     });
  71 };