stash/ui/v2.5/src/components/Shared/MultiSet.tsx

import React from "react";
import { IntlShape, useIntl } from "react-intl";

import * as GQL from "src/core/generated-graphql";
import { Button, ButtonGroup } from "react-bootstrap";
import { FilterSelect, SelectObject } from "./Select";
import {
  GalleryIDSelect,
  excludeFileBasedGalleries,
} from "../Galleries/GallerySelect";

interface IMultiSetProps {
  type: "performers" | "studios" | "tags" | "groups" | "galleries";
  existingIds?: string[];
  ids?: string[];
  mode: GQL.BulkUpdateIdMode;
  disabled?: boolean;
  onUpdate: (ids: string[]) => void;
  onSetMode: (mode: GQL.BulkUpdateIdMode) => void;
}

const Select: React.FC<IMultiSetProps> = (props) => {
  const { type, disabled } = props;

  function onUpdate(items: SelectObject[]) {
    props.onUpdate(items.map((i) => i.id));
  }

  if (type === "galleries") {
    return (
      <GalleryIDSelect
        isDisabled={disabled}
        isMulti
        isClearable={false}
        onSelect={onUpdate}
        ids={props.ids ?? []}
        // exclude file-based galleries when setting galleries
        extraCriteria={excludeFileBasedGalleries}
      />
    );
  }

  return (
    <FilterSelect
      type={type}
      isDisabled={disabled}
      isMulti
      isClearable={false}
      onSelect={onUpdate}
      ids={props.ids ?? []}
    />
  );
};

function getModeText(intl: IntlShape, mode: GQL.BulkUpdateIdMode) {
  switch (mode) {
    case GQL.BulkUpdateIdMode.Set:
      return intl.formatMessage({
        id: "actions.overwrite",
        defaultMessage: "Overwrite",
      });
    case GQL.BulkUpdateIdMode.Add:
      return intl.formatMessage({ id: "actions.add", defaultMessage: "Add" });
    case GQL.BulkUpdateIdMode.Remove:
      return intl.formatMessage({
        id: "actions.remove",
        defaultMessage: "Remove",
      });
  }
}

export const MultiSetModeButton: React.FC<{
  mode: GQL.BulkUpdateIdMode;
  active: boolean;
  onClick: () => void;
  disabled?: boolean;
}> = ({ mode, active, onClick, disabled }) => {
  const intl = useIntl();

  return (
    <Button
      key={mode}
      variant="primary"
      active={active}
      size="sm"
      onClick={onClick}
      disabled={disabled}
    >
      {getModeText(intl, mode)}
    </Button>
  );
};

const modes = [
  GQL.BulkUpdateIdMode.Set,
  GQL.BulkUpdateIdMode.Add,
  GQL.BulkUpdateIdMode.Remove,
];

export const MultiSetModeButtons: React.FC<{
  mode: GQL.BulkUpdateIdMode;
  onSetMode: (mode: GQL.BulkUpdateIdMode) => void;
  disabled?: boolean;
}> = ({ mode, onSetMode, disabled }) => {
  return (
    <ButtonGroup className="button-group-above">
      {modes.map((m) => (
        <MultiSetModeButton
          key={m}
          mode={m}
          active={mode === m}
          onClick={() => onSetMode(m)}
          disabled={disabled}
        />
      ))}
    </ButtonGroup>
  );
};

export const MultiSet: React.FC<IMultiSetProps> = (props) => {
  const { mode, onUpdate, existingIds } = props;

  function onSetMode(m: GQL.BulkUpdateIdMode) {
    if (m === mode) {
      return;
    }

    // if going to Set, set the existing ids
    if (m === GQL.BulkUpdateIdMode.Set && existingIds) {
      onUpdate(existingIds);
      // if going from Set, wipe the ids
    } else if (
      m !== GQL.BulkUpdateIdMode.Set &&
      mode === GQL.BulkUpdateIdMode.Set
    ) {
      onUpdate([]);
    }

    props.onSetMode(m);
  }

  return (
    <div className="multi-set">
      <MultiSetModeButtons mode={mode} onSetMode={onSetMode} />
      <Select {...props} />
    </div>
  );
};