gistfile1.txt

import React, { FC, useState } from 'react';
import {
  TreeSelect,
  Form,
  //notification
} from 'antd';
import { CategoriesTreeMock } from '../products/__mock__/treeCategories';
//import getCategoriesStructure from 'src/model/categories/getCategoriesStructure';

const parserDataSelectTree = (array: any[]) => {
  array.forEach((item, index) => {
    item.value = item._id;
    item.title = item.name;

    if (item.childs && Array.isArray(item.childs)) {
      item.children = item.childs;
      parserDataSelectTree(item.children);
    }
  });
  return array;
};

interface CategoryTreeFieldProps {
  name?: string;
  label?: string | React.ReactNode;
  extra?: string;
  initialValue?: string;
  title?: string | React.ReactNode;
  getCategoryId?: (value: string) => void;
}

const CategoryTreeField: FC<CategoryTreeFieldProps> = ({
  name,
  label,
  extra,
  initialValue,
  title,
  getCategoryId,
}) => {
  const [categoriesTree, setCategoriesTree] = useState(
    parserDataSelectTree(CategoriesTreeMock)
  );
  console.log(setCategoriesTree, categoriesTree);
  /*useEffect(() => {
    getCategoriesStructure()
      .then((res: any) => setCategoriesTree(res))
      .catch(() => {
        notification.error({
          message: 'Загрузка структуры категорий',
          description: 'Ошибка',
        });
      });
  }, []);*/

  //const [value, setValue] = useState('');

  const onChange = (value: any) => {
    getCategoryId && getCategoryId(value);
    //setValue(value);
  };
  return (
    <Form.Item name="categoryId" label="Категория">
      {title ? <div>{title}</div> : null}
      <TreeSelect
        showSearch
        style={{ width: '100%' }}
        defaultValue={undefined}
        dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
        treeData={categoriesTree}
        placeholder="Категории"
        onChange={onChange}
        treeNodeFilterProp="name"
        filterTreeNode={(value: string, treeNode: any) =>
          treeNode.name.indexOf(value) > -1
        }
      />
    </Form.Item>
  );
};

export default CategoryTreeField;