z-react-ui/es/drag-grid/index.js

z-react-ui，是一款基于 Dumi，由 React + TypeScript 开发的组件库 🎉。

import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import React, { useEffect, useRef, useState } from 'react';
import GridLayout from 'react-grid-layout';
import { throttle } from 'lodash';
import { usePrefixCls } from '@/_hooks';
import classNames from 'classnames'; // #----------- 上: ts类型定义 ----------- 分割线 ----------- 下: JS代码 -----------

var DragGrid = function DragGrid(_ref) {
  var _ref$cols = _ref.cols,
      cols = _ref$cols === void 0 ? 24 : _ref$cols,
      _ref$rowHeight = _ref.rowHeight,
      rowHeight = _ref$rowHeight === void 0 ? 1 : _ref$rowHeight,
      _ref$dataSource = _ref.dataSource,
      dataSource = _ref$dataSource === void 0 ? [] : _ref$dataSource,
      width = _ref.width,
      _ref$margin = _ref.margin,
      margin = _ref$margin === void 0 ? [0, 0] : _ref$margin,
      wrapperClassName = _ref.wrapperClassName,
      wrapperStyle = _ref.wrapperStyle,
      layoutClassName = _ref.layoutClassName,
      layoutStyle = _ref.layoutStyle,
      dragClassName = _ref.dragClassName,
      dragStyle = _ref.dragStyle,
      renderItem = _ref.renderItem,
      onDragStop = _ref.onDragStop,
      onDragStart = _ref.onDragStart,
      onResizeStop = _ref.onResizeStop;

  var _useState = useState(0),
      _useState2 = _slicedToArray(_useState, 2),
      containerWidth = _useState2[0],
      setWidth = _useState2[1];

  var divRef = useRef();
  var prefixCls = usePrefixCls('drag-grid');
  useEffect(function () {
    if (width) return;

    var handleResize = function handleResize() {
      var clientWidth = divRef.current.clientWidth;
      setWidth(clientWidth);
    };

    var throttleResize = throttle(handleResize, 200, {
      leading: true
    });
    handleResize();
    window.addEventListener('resize', throttleResize);
    return function () {
      window.removeEventListener('resize', throttleResize);
      setWidth(0);
    };
  }, [width]);
  return /*#__PURE__*/React.createElement("div", {
    className: classNames(prefixCls, wrapperClassName),
    style: wrapperStyle,
    ref: divRef
  }, /*#__PURE__*/React.createElement(GridLayout, {
    cols: cols,
    rowHeight: rowHeight,
    // 表示layout的整体宽度
    width: width || containerWidth,
    margin: margin,
    onDragStop: onDragStop,
    onDragStart: onDragStart,
    onResizeStop: onResizeStop,
    className: layoutClassName,
    style: layoutStyle
  }, Array.isArray(dataSource) ? dataSource.map(function (item, index) {
    // 这些都是网格单位，而不是像素
    // i----是指面板的名称
    // h—是面板的高度
    // w—是面板的宽度
    // x—是面板的坐标 x轴
    // y—是面板的坐标 y轴
    return /*#__PURE__*/React.createElement("div", {
      key: "".concat(item.id) || index,
      "data-grid": item === null || item === void 0 ? void 0 : item.point,
      style: dragStyle,
      className: classNames("".concat(prefixCls, "-drag-item"), dragClassName)
    }, typeof renderItem === 'function' ? renderItem(item, index) : null);
  }) : null));
};

export default DragGrid;