@flatbiz/antd/dist/drag-D1fxuzOc.js

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

import { a as _slicedToArray, _ as _objectWithoutProperties, b as _objectSpread2 } from './_rollupPluginBabelHelpers-BYm17lo8.js';
import { Form } 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 { E as EditableTablePro } from './editable-table-pro-DWoOUJrI.js';
import { createCtx } from '@wove/react/create-ctx';
import _DragOutlined from '@ant-design/icons/es/icons/DragOutlined.js';
import { createElement, Children, cloneElement } from 'react';
import { CSS } from '@dnd-kit/utilities';
import { isUndefinedOrNull, noop } from '@flatbiz/utils';
import { I as IconWrapper } from './icon-wrapper-HJ2r5GeZ.js';
import { jsx } from 'react/jsx-runtime';

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

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 (isUndefinedOrNull(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: 'move'
  }, isDragging ? {
    position: 'relative',
    zIndex: 9999,
    boxShadow: ' 0px 0px 12px 4px rgba(34, 33, 81, 0.1)',
    backgroundColor: 'var(--block-bg-color)'
  } : {});
  var iconElement = dragIcon || /*#__PURE__*/jsx(_DragOutlined, {});
  return /*#__PURE__*/createElement("tr", _objectSpread2(_objectSpread2({}, innerProps), {}, {
    ref: setNodeRef,
    style: style,
    key: rowId
  }), 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',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center'
          }
        }, 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 /*#__PURE__*/jsx(TableTrHandle, _objectSpread2(_objectSpread2({}, props), {}, {
    dragIcon: ctx.dragIcon
  }));
};

var _excluded = ["dragIcon", "uidFieldKey", "onDragChange", "disabledDrag", "formListCompleteName", "formListName"];
/**
 * 可拖拽编辑表格
 * ```
 * 1. 表格数据必须有唯一值字段，通过参数 uidFieldKey 告诉组件
 * 2. Table 参数 components.body.row 被组件内部使用
 * 3. 不存在多级的情况下，可使用DragEditableTablePro组件实现拖拽排序
 * 4. 存在多级的情况下，通过上移、下移操作按钮，调用 column.render.operation.move 方法实现同一级内移动
 * ```
 */
var DragEditableTablePro = function DragEditableTablePro(props) {
  var _otherProps$tableProp, _otherProps$tableProp2;
  var dragIcon = props.dragIcon,
    uidFieldKey = props.uidFieldKey,
    onDragChange = props.onDragChange,
    disabledDrag = props.disabledDrag,
    formListCompleteName = props.formListCompleteName,
    formListName = props.formListName,
    otherProps = _objectWithoutProperties(props, _excluded);
  var formListCompleteNameFt = formListCompleteName || formListName;
  var form = Form.useFormInstance();
  var dataList = Form.useWatch(formListCompleteNameFt, form);
  var sensors = useSensors(useSensor(PointerSensor, {
    activationConstraint: {
      // 当拖拽触发区域有其他点击事件时，需要延迟触发拖拽动作
      delay: 0,
      tolerance: 0
    }
  }));
  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);
      form.setFields([{
        name: formListCompleteNameFt,
        value: dataListNew
      }]);
      onDragChange === null || onDragChange === void 0 || onDragChange(dataListNew, {
        activeId: active.id,
        overId: over === null || over === void 0 ? void 0 : over.id,
        activeIndex: activeIndex,
        overIndex: overIndex
      });
    }
  };
  var columns = disabledDrag ? otherProps.columns : [{
    dataIndex: '__sort',
    width: 40,
    key: '__sort',
    align: 'center'
  }].concat(otherProps.columns || []);
  return /*#__PURE__*/jsx(CtxProvider, {
    value: {
      dragIcon: dragIcon,
      uidFieldKey: uidFieldKey
    },
    children: /*#__PURE__*/jsx(DndContext, {
      sensors: sensors,
      modifiers: [restrictToVerticalAxis],
      onDragEnd: onDragEnd,
      children: /*#__PURE__*/jsx(SortableContext, {
        items: (dataList === null || dataList === void 0 ? void 0 : dataList.map(function (i) {
          return i[uidFieldKey];
        })) || [],
        strategy: verticalListSortingStrategy,
        children: /*#__PURE__*/jsx(EditableTablePro, _objectSpread2(_objectSpread2({}, otherProps), {}, {
          formListName: formListName,
          uidFieldKey: uidFieldKey,
          columns: columns,
          tableProps: _objectSpread2(_objectSpread2({}, otherProps.tableProps), {}, {
            components: _objectSpread2(_objectSpread2({}, (_otherProps$tableProp = otherProps.tableProps) === null || _otherProps$tableProp === void 0 ? void 0 : _otherProps$tableProp.components), {}, {
              body: _objectSpread2(_objectSpread2({}, (_otherProps$tableProp2 = otherProps.tableProps) === null || _otherProps$tableProp2 === void 0 || (_otherProps$tableProp2 = _otherProps$tableProp2.components) === null || _otherProps$tableProp2 === void 0 ? void 0 : _otherProps$tableProp2.body), {}, {
                row: disabledDrag ? undefined : Row
              })
            })
          })
        }))
      })
    })
  });
};

export { DragEditableTablePro as D };
//# sourceMappingURL=drag-D1fxuzOc.js.map