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

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

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));

var _react = _interopRequireWildcard(require("react"));

var _reactGridLayout = _interopRequireDefault(require("react-grid-layout"));

var _lodash = require("lodash");

var _hooks = require("@/_hooks");

var _classnames = _interopRequireDefault(require("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 = (0, _react.useState)(0),
      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
      containerWidth = _useState2[0],
      setWidth = _useState2[1];

  var divRef = (0, _react.useRef)();
  var prefixCls = (0, _hooks.usePrefixCls)('drag-grid');
  (0, _react.useEffect)(function () {
    if (width) return;

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

    var throttleResize = (0, _lodash.throttle)(handleResize, 200, {
      leading: true
    });
    handleResize();
    window.addEventListener('resize', throttleResize);
    return function () {
      window.removeEventListener('resize', throttleResize);
      setWidth(0);
    };
  }, [width]);
  return /*#__PURE__*/_react.default.createElement("div", {
    className: (0, _classnames.default)(prefixCls, wrapperClassName),
    style: wrapperStyle,
    ref: divRef
  }, /*#__PURE__*/_react.default.createElement(_reactGridLayout.default, {
    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.default.createElement("div", {
      key: "".concat(item.id) || index,
      "data-grid": item === null || item === void 0 ? void 0 : item.point,
      style: dragStyle,
      className: (0, _classnames.default)("".concat(prefixCls, "-drag-item"), dragClassName)
    }, typeof renderItem === 'function' ? renderItem(item, index) : null);
  }) : null));
};

var _default = DragGrid;
exports.default = _default;