@spaced-out/ui-design-system/lib/utils/menu/menu.js.flow

Sense UI components library

// @flow strict
import * as React from 'react';

import type {MenuGroupTitleOption, MenuOption} from '../../components/Menu';


export const getSelectedKeysFromSelectedOption = (
  currentOption?: MenuOption,
  currentSelectedKeys?: Array<string>,
): Array<string> => {
  if (!Array.isArray(currentSelectedKeys) || !currentOption?.key) {
    return [];
  }

  let newSelectedKeys = [];

  if (currentSelectedKeys.includes(currentOption.key)) {
    newSelectedKeys = currentSelectedKeys.filter(
      (item) => item !== currentOption.key,
    );
  } else {
    newSelectedKeys = [...currentSelectedKeys, currentOption.key];
  }

  return newSelectedKeys;
};

export const getTextLabelFromSelectedKeys = (
  currentSelectedKeys?: Array<string>,
  options?: MenuOption[],
): string => {
  if (!Array.isArray(currentSelectedKeys) || !Array.isArray(options)) {
    return '';
  }

  const selectedOptions = getOptionsFromKeys(options, currentSelectedKeys);

  return selectedOptions.map((option) => option.label).join(', ');
};

export const getButtonLabelFromSelectedKeys = (
  currentSelectedKeys?: Array<string>,
  label?: React.Node,
): React.Node => {
  if (
    !Array.isArray(currentSelectedKeys) ||
    typeof label !== 'string' ||
    !currentSelectedKeys.length
  ) {
    return label;
  }

  return `(${currentSelectedKeys.length}) ${label}`;
};

export const getOptionFromKey = (
  options?: MenuOption[],
  key?: string,
): ?MenuOption => {
  if (!Array.isArray(options) || !key || !options.length) {
    return null;
  }

  return options.find((option) => option.key === key);
};

export const getOptionsFromKeys = (
  options?: MenuOption[],
  keys?: Array<string>,
): Array<MenuOption> => {
  if (
    !Array.isArray(options) ||
    !Array.isArray(keys) ||
    !options.length ||
    !keys.length
  ) {
    return [];
  }

  return options.filter((option) => keys.includes(option.key));
};

export const getFilteredOptionsFromSearchText = (
  options: MenuOption[],
  searchText: string,
): MenuOption[] => {
  if (!Array.isArray(options) || !options.length || !searchText) {
    return options;
  }

  return options.filter((option) =>
    option.label?.toLowerCase().includes(searchText.toLowerCase()),
  );
};

export const getFilteredOptionsResultText = (
  options: MenuOption[],
  staticLabels: {[key: string]: string},
): string => {
  let resultCount = 0;

  resultCount += options.length;

  const singleResultMessage = staticLabels.RESULT ?? 'result';
  const multipleResultsMessage = staticLabels.RESULTS ?? 'results';

  const generatedResultText = `${resultCount} ${
    resultCount > 1 ? multipleResultsMessage : singleResultMessage
  }`;

  return generatedResultText;
};

export const getFilteredComposeOptionsFromSearchText = (
  composeOptions: Array<Array<MenuOption>>,
  searchText: string,
): Array<Array<MenuOption>> => {
  if (!Array.isArray(composeOptions) || !composeOptions.length || !searchText) {
    return composeOptions;
  }

  return composeOptions
    .map((optionGroup) =>
      optionGroup.filter((option) =>
        option.label?.toLowerCase().includes(searchText.toLowerCase()),
      ),
    )
    .filter((group) => group.length > 0);
};

export const getFilteredComposeOptionsResultText = (
  composeOptions: Array<Array<MenuOption>>,
  staticLabels: {[key: string]: string},
): string => {
  let resultCount = 0;

  composeOptions.forEach((optionGroup) => {
    resultCount += optionGroup.length;
  });

  const singleResultMessage = staticLabels.RESULT ?? 'result';
  const multipleResultsMessage = staticLabels.RESULTS ?? 'results';

  const generatedResultText = `${resultCount} ${
    resultCount > 1 ? multipleResultsMessage : singleResultMessage
  }`;

  return generatedResultText;
};

export const getFilteredGroupTitleOptionsFromSearchText = (
  groupTitleOptions: Array<MenuGroupTitleOption>,
  searchText: string,
): Array<MenuGroupTitleOption> => {
  if (
    !Array.isArray(groupTitleOptions) ||
    !groupTitleOptions.length ||
    !searchText
  ) {
    return groupTitleOptions;
  }

  return groupTitleOptions
    .map((group) => ({
      ...group,
      options: group.options?.filter((option) =>
        option.label?.toLowerCase().includes(searchText.toLowerCase()),
      ),
    }))
    .filter((group) => group.options && group.options.length > 0);
};

export const getFilteredGroupTitleOptionsResultText = (
  groupTitleOptions: Array<MenuGroupTitleOption>,
  staticLabels: {[key: string]: string},
): string => {
  let resultCount = 0;

  groupTitleOptions.forEach((group) => {
    if (group.options) {
      resultCount += group.options.length;
    }
  });

  const singleResultMessage = staticLabels.RESULT ?? 'result';
  const multipleResultsMessage = staticLabels.RESULTS ?? 'results';

  const generatedResultText = `${resultCount} ${
    resultCount > 1 ? multipleResultsMessage : singleResultMessage
  }`;

  return generatedResultText;
};