@flatbiz/antd/dist/drag-table-vsEGr1yd.js

/*! @flatjs/forge MIT @flatbiz/antd */

import { a as _slicedToArray, b as _objectSpread2, _ as _objectWithoutProperties, c as _toConsumableArray } from './_rollupPluginBabelHelpers-BYm17lo8.js';
import { Children, cloneElement, isValidElement, useState, useEffect, useMemo } from 'react';
import { Table } from 'antd';
import { useSensors, useSensor, PointerSensor, DndContext } from '@dnd-kit/core';
import { restrictToVerticalAxis } from '@dnd-kit/modifiers';
import { useSortable, SortableContext, verticalListSortingStrategy, arrayMove } from '@dnd-kit/sortable';
import { createCtx } from '@wove/react/create-ctx';
import { CSS } from '@dnd-kit/utilities';
import { jsx } from 'react/jsx-runtime';
import _DragOutlined from '@ant-design/icons/es/icons/DragOutlined.js';
import { noop } from '@flatbiz/utils';
import { I as IconWrapper } from './icon-wrapper-HJ2r5GeZ.js';

var _createCtx = createCtx(),
  _createCtx2 = _slicedToArray(_createCtx, 2),
  getCtx = _createCtx2[0],
  CtxProvider = _createCtx2[1];

var TableTr = function TableTr(props) {
  var _useSortable = useSortable({
      id: props['data-row-key']
    }),
    listeners = _useSortable.listeners,
    setNodeRef = _useSortable.setNodeRef,
    transform = _useSortable.transform,
    transition = _useSortable.transition,
    isDragging = _useSortable.isDragging;
  var style = _objectSpread2(_objectSpread2({}, props.style), {}, {
    transform: CSS.Transform.toString(transform && _objectSpread2(_objectSpread2({}, transform), {}, {
      scaleY: 1
    })),
    transition: transition,
    cursor: 'move'
  }, isDragging ? {
    position: 'relative',
    zIndex: 9999,
    boxShadow: ' 0px 0px 12px 4px rgba(34, 33, 81, 0.1)'
  } : {});
  return /*#__PURE__*/jsx("tr", _objectSpread2(_objectSpread2({}, props), {}, {
    ref: setNodeRef,
    style: style
  }, listeners));
};

var _excluded$1 = ["dragIcon"];
var TableTrHandle = function TableTrHandle(props) {
  var dragIcon = props.dragIcon,
    innerProps = _objectWithoutProperties(props, _excluded$1);
  var rowId = innerProps['data-row-key'];
  var _useSortable = useSortable({
      id: rowId
    }),
    setActivatorNodeRef = _useSortable.setActivatorNodeRef,
    listeners = _useSortable.listeners,
    setNodeRef = _useSortable.setNodeRef,
    transform = _useSortable.transform,
    transition = _useSortable.transition,
    isDragging = _useSortable.isDragging;
  if (!rowId) {
    return /*#__PURE__*/jsx("tr", _objectSpread2({}, innerProps));
  }
  var style = _objectSpread2(_objectSpread2({}, innerProps.style), {}, {
    transform: CSS.Transform.toString(transform && _objectSpread2(_objectSpread2({}, transform), {}, {
      scaleY: 1
    })),
    transition: transition,
    cursor: dragIcon === false ? 'move' : undefined
  }, isDragging ? {
    position: 'relative',
    zIndex: 9999,
    boxShadow: ' 0px 0px 12px 4px rgba(34, 33, 81, 0.1)',
    backgroundColor: 'var(--block-bg-color)'
  } : {});
  var iconElement = /*#__PURE__*/isValidElement(dragIcon) ? dragIcon : /*#__PURE__*/jsx(_DragOutlined, {});
  return /*#__PURE__*/jsx("tr", _objectSpread2(_objectSpread2({}, innerProps), {}, {
    ref: setNodeRef,
    style: style,
    children: Children.map(props.children, function (child) {
      if (child.key === 'sort') {
        return /*#__PURE__*/cloneElement(child, {
          children: /*#__PURE__*/jsx("span", _objectSpread2(_objectSpread2({
            ref: setActivatorNodeRef,
            style: {
              touchAction: 'none',
              cursor: 'move',
              position: 'absolute',
              top: '50%',
              left: '50%',
              transform: 'translate(-50%, -50%)',
              display: 'inline-flex'
            }
          }, listeners), {}, {
            children: /*#__PURE__*/jsx(IconWrapper, {
              style: {
                touchAction: 'none',
                cursor: 'move',
                padding: '1px 0px',
                margin: 0,
                justifyContent: 'center',
                color: '#787878'
              },
              icon: iconElement,
              onClick: noop,
              size: "small"
            })
          }))
        });
      }
      return child;
    })
  }));
};

var Row = function Row(props) {
  var ctx = getCtx();
  return ctx.dragIcon === false ? /*#__PURE__*/jsx(TableTr, _objectSpread2(_objectSpread2({}, props), {}, {
    dragIcon: ctx.dragIcon
  })) : /*#__PURE__*/jsx(TableTrHandle, _objectSpread2(_objectSpread2({}, props), {}, {
    dragIcon: ctx.dragIcon
  }));
};

var _excluded = ["dragIcon", "uidFieldKey", "columns", "dataSource", "onDragChange", "disabledDrag"];
/**
 * 可拖拽表格
 * ```
 * 1. 必须设置唯一值字段 uidFieldKey
 * 2. 如果拖拽显示异常，请检查 uidFieldKey 是否正确
 * 3. Table 参数 components.body.row 被组件内部使用
 * ```
 */
var DragTable = function DragTable(props) {
  var _otherProps$component;
  var dragIcon = props.dragIcon,
    uidFieldKey = props.uidFieldKey,
    columns = props.columns,
    dataSource = props.dataSource,
    onDragChange = props.onDragChange,
    disabledDrag = props.disabledDrag,
    otherProps = _objectWithoutProperties(props, _excluded);
  var _useState = useState([]),
    _useState2 = _slicedToArray(_useState, 2),
    dataList = _useState2[0],
    setDataList = _useState2[1];
  useEffect(function () {
    setDataList(dataSource || []);
  }, [dataSource]);
  var onDragEnd = function onDragEnd(_ref) {
    var active = _ref.active,
      over = _ref.over;
    if (active.id !== (over === null || over === void 0 ? void 0 : over.id)) {
      var activeIndex = dataList.findIndex(function (i) {
        return i[uidFieldKey] === active.id;
      });
      var overIndex = dataList.findIndex(function (i) {
        return i[uidFieldKey] === (over === null || over === void 0 ? void 0 : over.id);
      });
      var dataListNew = arrayMove(dataList, activeIndex, overIndex);
      setDataList(_toConsumableArray(dataListNew));
      onDragChange === null || onDragChange === void 0 || onDragChange(dataListNew, {
        activeId: active.id,
        activeIndex: activeIndex,
        overIndex: overIndex
      });
    }
  };
  var columnsList = useMemo(function () {
    if (dragIcon === false || props.disabledDrag) return columns;
    return [{
      key: 'sort',
      dataIndex: 'sort',
      align: 'center',
      width: 50
    }].concat(columns || []);
  }, [columns, dragIcon, props.disabledDrag]);
  var sensors = useSensors(useSensor(PointerSensor, {
    activationConstraint: {
      // 当拖拽触发区域有其他点击事件时，需要延迟触发拖拽动作
      delay: dragIcon === false ? 150 : 0,
      tolerance: 0
    }
  }));
  return /*#__PURE__*/jsx(CtxProvider, {
    value: {
      dragIcon: dragIcon
    },
    children: /*#__PURE__*/jsx(DndContext, {
      sensors: sensors,
      modifiers: [restrictToVerticalAxis],
      onDragEnd: onDragEnd,
      children: /*#__PURE__*/jsx(SortableContext, {
        items: dataList.map(function (i) {
          return i[uidFieldKey];
        }),
        strategy: verticalListSortingStrategy,
        children: /*#__PURE__*/jsx(Table, _objectSpread2(_objectSpread2({
          pagination: false,
          rowKey: uidFieldKey,
          bordered: true,
          components: _objectSpread2(_objectSpread2({}, otherProps.components), {}, {
            body: _objectSpread2(_objectSpread2({}, (_otherProps$component = otherProps.components) === null || _otherProps$component === void 0 ? void 0 : _otherProps$component.body), {}, {
              row: disabledDrag ? undefined : Row
            })
          })
        }, otherProps), {}, {
          dataSource: dataList,
          columns: columnsList
        }))
      })
    })
  });
};

export { DragTable as D };
//# sourceMappingURL=drag-table-vsEGr1yd.js.map