es-grid-template/es/ali-table/base-table/ColumnResizer.js

es-grid-template

import React from "react";
import { getParentElement } from "./utils";
import styled from "styled-components";
const ResizeHandle = styled.span.withConfig({
  displayName: "ResizeHandle",
  componentId: "es-grid-template__sc-r9wue3-0"
})(["width:6px;height:100%;position:absolute;top:0;right:0;cursor:col-resize;background-color:transparent;"]);
class Resizer extends React.Component {
  indicatorRef = /*#__PURE__*/React.createRef();
  indicatorLine = null;
  lineWidth = 2;
  constructor(props) {
    super(props);
    const el = document.createElement("div");
    el.className = "resizeMarkLine";
    this.indicatorLine = el;
  }
  container = null;
  startLeft = 0;
  startX = 0;
  endX = 0;
  offsetX = 0;
  offsetWidth = 0;
  componentDidMount() {
    const el = this.indicatorRef.current;
    if (el) {
      // const a = getParentElement(el, ".tablex-table-head-container");
      const a = getParentElement(el, ".art-table-header");
      this.container = a;
    }
  }
  setLine = () => {
    const line = this.indicatorLine;
    if (this.container) {
      const currentLeft = this.offsetWidth + this.offsetX - this.lineWidth - 1;
      const sl = this.container.scrollLeft;
      this.startLeft = currentLeft - sl;
      line.style.left = this.startLeft + "px";
      this.container.appendChild(line);
    }
  };
  setPosition = () => {
    const line = this.indicatorLine;
    if (line) {
      const distance = this.endX - this.startX;
      const l = this.startLeft - 0 + distance - 0;
      line.style.left = l + "px";
    }
  };
  reset = () => {
    const line = this.indicatorLine;
    if (this.container) {
      this.container.removeChild(line);
    }
  };
  onMouseMove = e => {
    this.endX = e.clientX;
    this.setPosition();
    this.onResize();
  };
  onDocumentSelect() {
    return false;
  }
  setSelectEvent() {
    document.body.onselectstart = function () {
      return false;
    };
  }
  resetSelectEvent() {
    document.body.onselectstart = function () {
      return true;
    };
  }
  onMouseUp = e => {
    this.endX = e.clientX;
    document.body.removeEventListener("mousemove", this.onMouseMove);
    document.body.removeEventListener("mouseup", this.onMouseUp);
    this.resetSelectEvent();
    this.reset();
    this.onResizeStop();
  };
  onMouseDown = e => {
    //  const { onMouseDown, columnKey } = this.props;
    this.startX = e.clientX;
    this.endX = e.clientX;
    const p = e.target.parentNode;
    this.offsetX = p.offsetLeft;
    this.offsetWidth = p.offsetWidth;
    this.setLine();
    document.body.addEventListener("mousemove", this.onMouseMove);
    document.body.addEventListener("mouseup", this.onMouseUp);
    this.setSelectEvent();

    // if (typeof onMouseDown === "function") {
    //   onMouseDown(columnKey);
    // }
  };
  onResize = () => {
    const distance = this.endX - this.startX;
    const {
      onResize,
      columnKey,
      onResizeChange
    } = this.props;
    const w = this.offsetX + distance + this.offsetWidth;
    const ww = this.offsetWidth + distance;
    if (typeof onResizeChange === "function") {
      onResizeChange(ww, columnKey);
    }
    if (typeof onResize === "function") {
      onResize(w, columnKey);
    }
  };
  onResizeStop = () => {
    const distance = this.endX - this.startX;
    const {
      onResizeStop,
      columnKey
    } = this.props;
    const w = this.offsetWidth + distance;
    if (typeof onResizeStop === "function") {
      onResizeStop(w, columnKey);
    }
  };
  render() {
    return /*#__PURE__*/React.createElement(ResizeHandle, {
      ref: this.indicatorRef,
      className: "resize-handle",
      onMouseDown: this.onMouseDown
    });
  }
}
export default Resizer;