export default forwardRef()

in packages/x-flow/src/components/NodesPopover/index.tsx [19:109]


export default forwardRef((props: any, popoverRef) => {
  const { addNode, children, onNodeSelectPopoverChange } = props;
  const { setIsAddingNode } = useStore(s => ({
    setIsAddingNode: s.setIsAddingNode,
  }));
  const ref = useRef<any>(null);
  const closeRef: any = useRef<HTMLButtonElement>(null);
  const [open, setOpen] = useState(false);

  const { settings, nodeSelector, antdVersion ,readOnly ,clickAddNode,settingMap }: any = useContext(ConfigContext);
  const { showSearch, popoverProps = { placement: 'top' } } =
    nodeSelector || {};

  useImperativeHandle(popoverRef, () => ({
    changeOpen: openChange,
  }));

  useClickAway(() => {
    if (closeRef.current) {
      setOpen(false);
      onNodeSelectPopoverChange && onNodeSelectPopoverChange(false);
      closeRef.current = false;
    }
  }, ref);

  const handCreateNode = useCallback<any>(({ type }) => {
    if (isFunction(clickAddNode)) {
      clickAddNode(type,settingMap[type],( data = {} )=>{
        addNode({ _nodeType: type, ...data })
      });
    }else{
      if (type === 'Switch') {
        addNode({ _nodeType: type, list: [{ '_id':`${uuid()}`}] });
      } else if (type === 'Parallel') {
        addNode({ _nodeType: type, list: [{ _id: `id_${uuid()}` }, { _id: `id_${uuid()}` }] });
      } else {
        addNode({ _nodeType: type });
      }
    }

    setOpen(false);
    onNodeSelectPopoverChange && onNodeSelectPopoverChange(false);
  }, []);

  const openChange = () => {
    setTimeout(() => {
      setIsAddingNode(true);
      closeRef.current = true;
      if (!readOnly) {
        setOpen(true);
      }
    }, 50);
  };

  const popoverVersionProps = useMemo(() => {
    if (antdVersion === 'V5') {
      return {
        open,
        onOpenChange: openChange,
      };
    }
    // V4
    return {
      visible: open,
      onVisibleChange: openChange,
    };
  }, [open]);

  return (
    <Popover
      overlayClassName="nodes-popover"
      getPopupContainer={() => document.getElementById('xflow-container')}
      zIndex={2000}
      arrow={false}
      overlayInnerStyle={{ padding: '12px 6px' }}
      {...popoverProps}
      trigger="click"
      {...popoverVersionProps}
      content={
        <NodesMenu
          ref={ref}
          items={settings}
          showSearch={showSearch}
          onClick={handCreateNode}
        />
      }
    >
      {children}
    </Popover>
  );
});