bigcapital/src/components/BranchSuggestField.js

import React from 'react';
import intl from 'react-intl-universal';
import { MenuItem } from '@blueprintjs/core';
import { Suggest } from '@blueprintjs/select';
import { FormattedMessage as T } from 'components';

import classNames from 'classnames';
import { CLASSES } from 'common/classes';

/**
 * branch suggest field.
 * @returns
 */
export default function BranchSuggestField({
  branches,
  initialBranchId,
  selectedBranchId,
  defaultSelectText = intl.get('select_branch'),
  popoverFill = false,
  onBranchSelected,
  ...suggestProps
}) {
  const initialBranch = React.useMemo(
    () => branches.some((b) => b.id === initialBranchId),
    [initialBranchId, branches],
  );

  const [selectedBranch, setSelectedBranch] = React.useState(
    initialBranch || null,
  );

  /**
   *
   * @param {*} branch
   * @returns
   */
  const branchItemRenderer = (branch, { handleClick, modifiers, query }) => {
    return (
      <MenuItem
        // active={modifiers.active}
        disabled={modifiers.disabled}
        label={branch.code.toString()}
        key={branch.id}
        onClick={handleClick}
        text={branch.name.toString()}
      />
    );
  };

  /**
   *
   * @param {*} query
   * @param {*} branch
   * @param {*} _index
   * @param {*} exactMatch
   * @returns
   */
  const branchItemPredicate = (query, branch, _index, exactMatch) => {
    const normalizedTitle = branch.name.toLowerCase();
    const normalizedQuery = query.toLowerCase();

    if (exactMatch) {
      return normalizedTitle === normalizedQuery;
    } else {
      return `${branch.code}. ${normalizedTitle}`.indexOf(normalizedQuery) >= 0;
    }
  };

  /**
   *
   * @param {*} branch
   * @returns
   */
  const brnachItemSelect = React.useCallback(
    (branch) => {
      if (branch.id) {
        setSelectedBranch({ ...branch });
        onBranchSelected && onBranchSelected(branch);
      }
    },
    [setSelectedBranch, onBranchSelected],
  );

  /**
   *
   * @param {*} inputVaue
   * @returns
   */
  const branchInputValueRenderer = (inputValue) => {
    if (inputValue) {
      return inputValue.name.toString();
    }
    return '';
  };

  return (
    <Suggest
      items={branches}
      noResults={<MenuItem disabled={true} text={<T id={'no_accounts'} />} />}
      itemRenderer={branchItemRenderer}
      itemPredicate={branchItemPredicate}
      onItemSelect={brnachItemSelect}
      selectedItem={selectedBranch}
      inputProps={{ placeholder: defaultSelectText }}
      resetOnClose={true}
      fill={true}
      popoverProps={{ minimal: true, boundary: 'window' }}
      inputValueRenderer={branchInputValueRenderer}
      className={classNames(CLASSES.FORM_GROUP_LIST_SELECT, {
        [CLASSES.SELECT_LIST_FILL_POPOVER]: popoverFill,
      })}
      {...suggestProps}
    />
  );
}