File "ProjectSelect.tsx"

Full Path: /var/www/html/gitep_front/src/pages/ProjectPage/ProjectSelect/ProjectSelect.tsx
File size: 1.53 KB
MIME-type: text/x-java
Charset: utf-8

import React, { useState, useEffect } from "react";
import { Select } from "antd";
import styles from "./organization-select.module.scss";
import { DownOutlined } from "@ant-design/icons";

const { Option } = Select;

interface IProjectSelect {
  id: number;
  full_name: string;
}

interface ProjectSelectProps {
  initialOptions?: IProjectSelect[];
  value?: number | null;
  onChange?: (value: number) => void;
  onSearch?: (value: string) => void;
  disabled?: boolean;
}

const ProjectSelect: React.FC<ProjectSelectProps> = ({
  initialOptions = [],
  value,
  onChange,
  onSearch,
  disabled
}) => {
  const [options, setOptions] = useState<IProjectSelect[]>(initialOptions);
  const [selectedValue, setSelectedValue] = useState<number | null | undefined>(value);

  useEffect(() => {
    setOptions(initialOptions);
  }, [initialOptions]);

  useEffect(() => {
    setSelectedValue(value);
  }, [value]);

  const handleSelectChange = (value: number) => {
    setSelectedValue(value);
    onChange?.(value);
  };

  return (
    <Select
      showSearch
      open
      style={{ width: "100%", height: '40px' }}
      placeholder="Введите название проекта"
      onChange={handleSelectChange}
      onSearch={onSearch}
      value={selectedValue}
      filterOption={false}
      disabled={disabled}
      suffixIcon={<DownOutlined/>}
    >
      {options.map((option) => (
        <Option key={option.id} value={option.id}>
          {option.full_name}
        </Option>
      ))}
    </Select>
  );
};

export default ProjectSelect;