teableio / teable / 8536869866

import { Button, Popover, PopoverContent, PopoverTrigger } from '@teable/ui-lib';

import { useState } from 'react';

import { SINGLE_SELECT_OPERATORS } from './constant';

import { DefaultList } from './DefaultList';

import { DefaultTrigger } from './DefaultTrigger';

import type { IFilterLinkProps, IFilterLinkSelectListProps } from './types';

interface FilterLinkSelectProps extends IFilterLinkProps {

  components?: {

    Trigger?: (props: IFilterLinkProps) => JSX.Element;

    List?: (value: IFilterLinkSelectListProps) => JSX.Element;

  };

}

export const FilterLinkSelect = (props: FilterLinkSelectProps) => {

  const { value, operator, onSelect, components } = props;

  const { Trigger, List } = components || {};

  const [open, setOpen] = useState(false);

  const InnerTrigger = Trigger ?? DefaultTrigger;

  const InnerSelector = List ?? DefaultList;

  const onListClick = (recordId: string) => {

    const values = typeof value === 'string' ? [value] : value || [];

    console.log('values', values, recordId);

    if (!SINGLE_SELECT_OPERATORS.includes(operator)) {

      values.includes(recordId)

        ? onSelect(values.filter((id) => id !== recordId))

        : onSelect([...values, recordId]);

    } else {

      setOpen(false);

      onSelect(value?.[0] === recordId ? null : values?.[0]);

    }

  };

  return (

    <div className="space-y-3">

      <Popover open={open} onOpenChange={setOpen}>

        <PopoverTrigger asChild>

          <Button variant="outline" size={'sm'} className="w-40 justify-start">

            <InnerTrigger {...props} />

          </Button>

        </PopoverTrigger>

        <PopoverContent className="h-[350px] w-screen md:w-[480px]">

          <InnerSelector {...props} onClick={onListClick} />

        </PopoverContent>

      </Popover>

    </div>

  );

};