@uiw/react-md-editor/esm/components/DragBar/index.js

A markdown editor with preview, implemented with React.js and TypeScript.

import React, { useEffect, useMemo, useRef } from 'react';
import "./index.css";
import { jsx as _jsx } from "react/jsx-runtime";

var DragBar = props => {
  var {
    prefixCls,
    onChange
  } = props || {};
  var dragRef = useRef();

  function handleMouseMove(event) {
    if (dragRef.current) {
      var newHeight = dragRef.current.height + event.clientY - dragRef.current.dragY;

      if (newHeight >= props.minHeight && newHeight <= props.maxHeight) {
        onChange && onChange(dragRef.current.height + (event.clientY - dragRef.current.dragY));
      }
    }
  }

  function handleMouseUp() {
    dragRef.current = undefined;
  }

  function handleMouseDown(event) {
    dragRef.current = {
      height: props.height,
      dragY: event.clientY
    };
  }

  useEffect(() => {
    if (document) {
      document.addEventListener('mousemove', handleMouseMove);
      document.addEventListener('mouseup', handleMouseUp);
    }

    return () => {
      if (document) {
        document.removeEventListener('mousemove', handleMouseMove);
        document.removeEventListener('mouseup', handleMouseUp);
      }
    }; // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
  var svg = useMemo(() => /*#__PURE__*/_jsx("svg", {
    viewBox: "0 0 512 512",
    height: "100%",
    children: /*#__PURE__*/_jsx("path", {
      fill: "currentColor",
      d: "M304 256c0 26.5-21.5 48-48 48s-48-21.5-48-48 21.5-48 48-48 48 21.5 48 48zm120-48c-26.5 0-48 21.5-48 48s21.5 48 48 48 48-21.5 48-48-21.5-48-48-48zm-336 0c-26.5 0-48 21.5-48 48s21.5 48 48 48 48-21.5 48-48-21.5-48-48-48z"
    })
  }), []);
  return /*#__PURE__*/_jsx("div", {
    className: prefixCls + "-bar",
    onMouseDown: handleMouseDown,
    children: svg
  });
};

export default DragBar;
//# sourceMappingURL=index.js.map