import React, { useContext, useMemo } from 'react';
import { Resizable } from 'react-resizable';
import ConfigProvider from '../config-provider';
import { jsx as _jsx } from "react/jsx-runtime";
const ResizableTitle = props => {
  const {
    onResize,
    width,
    ...restProps
  } = props;
  const {
    getPrefixCls
  } = useContext(ConfigProvider.ConfigContext);
  const handleClassName = useMemo(() => getPrefixCls('pro-table-resize-handle'), [getPrefixCls]);
  if (!width || typeof width !== 'number') {
    return /*#__PURE__*/_jsx("th", {
      ...restProps
    });
  }
  return /*#__PURE__*/_jsx(Resizable, {
    width: width,
    height: 0,
    className: getPrefixCls('pro-table-resize'),
    handle: /*#__PURE__*/_jsx("span", {
      className: handleClassName,
      onClick: e => {
        e.stopPropagation();
      }
    }),
    onResize: onResize,
    draggableOpts: {
      enableUserSelectHack: false
    },
    children: /*#__PURE__*/_jsx("th", {
      ...restProps
    })
  });
};
export default ResizableTitle;