TermsIdsTree.jsx

import React, { memo, useCallback } from 'react';
import { TreeSelect, Tree } from 'antd';
import Sidebar from '@/components/Custom/Sidebar';
import { getTermsIds } from '@/utils/common';
import omit from 'omit.js';

const TermsIdsTree = (props) => {

  const treeProps = omit(props, ['onChange', 'type'] || {});

  const handleChange = useCallback((key, node) => {
    props.onChange(getTermsIds(node, 'key'))
  }, []);

  const handleSidebarChange = useCallback((key, e) => {
    handleChange(key, e.node)
    // console.log('handleSidebarChange == ', key, node)
  }, []);

  const handleTreeChange = (value) => {
    if(value === undefined) {
      props.onChange(undefined);
    }
  }

  return (
    <>
      {
        props.type === 'select' && <TreeSelect {...treeProps} onSelect={ handleChange } onChange={ handleTreeChange } />
      }
      {
        props.type === 'tree' && <Sidebar {...treeProps} onSelectTreeNode={ handleSidebarChange } />
      }
    </>
  )
}

export default memo(TermsIdsTree);