@spacebarchat/emoji-picker-react/src/config/categoryConfig.ts

Emoji Picker component for React Applications on the web

import { Categories, SuggestionMode } from '../types/exposedTypes';

export { Categories };

const categoriesOrdered: Categories[] = [
  Categories.SUGGESTED,
  Categories.CUSTOM,
  Categories.SMILEYS_PEOPLE,
  Categories.ANIMALS_NATURE,
  Categories.FOOD_DRINK,
  Categories.TRAVEL_PLACES,
  Categories.ACTIVITIES,
  Categories.OBJECTS,
  Categories.SYMBOLS,
  Categories.FLAGS,
];

export const SuggestedRecent: CategoryConfig = {
  name: 'Recently Used',
  category: Categories.SUGGESTED,
};

export type CustomCategoryConfig = {
  category: Categories.CUSTOM;
  name: string;
};

const configByCategory: Record<Categories, CategoryConfig> = {
  [Categories.SUGGESTED]: {
    category: Categories.SUGGESTED,
    name: 'Frequently Used',
  },
  [Categories.CUSTOM]: {
    category: Categories.CUSTOM,
    name: 'Custom Emojis',
  },
  [Categories.SMILEYS_PEOPLE]: {
    category: Categories.SMILEYS_PEOPLE,
    name: 'Smileys & People',
  },
  [Categories.ANIMALS_NATURE]: {
    category: Categories.ANIMALS_NATURE,
    name: 'Animals & Nature',
  },
  [Categories.FOOD_DRINK]: {
    category: Categories.FOOD_DRINK,
    name: 'Food & Drink',
  },
  [Categories.TRAVEL_PLACES]: {
    category: Categories.TRAVEL_PLACES,
    name: 'Travel & Places',
  },
  [Categories.ACTIVITIES]: {
    category: Categories.ACTIVITIES,
    name: 'Activities',
  },
  [Categories.OBJECTS]: {
    category: Categories.OBJECTS,
    name: 'Objects',
  },
  [Categories.SYMBOLS]: {
    category: Categories.SYMBOLS,
    name: 'Symbols',
  },
  [Categories.FLAGS]: {
    category: Categories.FLAGS,
    name: 'Flags',
  },
};

export function baseCategoriesConfig(
  modifiers?: Record<Categories, CategoryConfig>,
): CategoriesConfig {
  return categoriesOrdered.map((category) => {
    return {
      ...configByCategory[category],
      ...(modifiers && modifiers[category] && modifiers[category]),
    };
  });
}

export function categoryFromCategoryConfig(category: CategoryConfig) {
  return category.category;
}

export function categoryNameFromCategoryConfig(category: CategoryConfig) {
  return category.name;
}

export type CategoriesConfig = CategoryConfig[];

export type CategoryConfig = {
  category: Categories;
  name: string;
  imageUrl?: string;
  acronym?: string;
};

export type UserCategoryConfig = Array<Categories | CategoryConfig>;

export function mergeCategoriesConfig(
  userCategoriesConfig: UserCategoryConfig = [],
  modifiers: CategoryConfigModifiers = {},
): CategoriesConfig {
  const extra = {} as Record<Categories, CategoryConfig>;

  if (modifiers.suggestionMode === SuggestionMode.RECENT) {
    extra[Categories.SUGGESTED] = SuggestedRecent;
  }

  const base = baseCategoriesConfig(extra);
  if (!userCategoriesConfig?.length) {
    return base;
  }

  return userCategoriesConfig.map((category) => {
    if (typeof category === 'string') {
      return getBaseConfigByCategory(category, extra[category]);
    }

    return {
      ...getBaseConfigByCategory(category.category, extra[category.category]),
      ...category,
    };
  });
}

function getBaseConfigByCategory(
  category: Categories,
  modifier: CategoryConfig = {} as CategoryConfig,
) {
  const baseConfig = configByCategory[category];
  if (!baseConfig) {
    return {
      ...modifier,
      name: modifier?.name || category,
      category,
    };
  }
  return { ...baseConfig, ...modifier };
}

type CategoryConfigModifiers = {
  suggestionMode?: SuggestionMode;
};