ronds-metadata 1.1.75 → 1.1.77

package/es/comps/Editable/comps/EditableRow.js

@@ -3,17 +3,21 @@ import "antd/es/form/style";
 import _Form from "antd/es/form";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import React from 'react';
-import { EditableContext } from '../interface';
+import { useDrag, useDrop } from 'react-dnd';
+import { DND_TYPE, EditableContext } from '../interface';
 
 var EditableRow = function EditableRow(props) {
   var record = props.record,
       index = props.index,
-      className = props.className;
+      className = props.className,
+      onMove = props.onMove;
 
   var _Form$useForm = _Form.useForm(),
       _Form$useForm2 = _slicedToArray(_Form$useForm, 1),
       form = _Form$useForm2[0];
 
+  var ref = React.useRef(null);
+
   var _ref = React.useContext(EditableContext) || undefined,
       editableStream = _ref.editableStream;
 
@@ -22,6 +26,55 @@ var EditableRow = function EditableRow(props) {
     form.setFieldsValue(record);
   }, [record]);
 
+  var _useDrop = useDrop({
+    accept: DND_TYPE,
+    collect: function collect(monitor) {
+      var _ref2 = monitor.getItem() || {},
+          dragIndex = _ref2.index;
+
+      if (dragIndex === index || !onMove) {
+        return {};
+      }
+
+      return {
+        isOver: monitor.isOver(),
+        dropClassName: dragIndex < index ? ' drop-over-downward' : ' drop-over-upward'
+      };
+    },
+    drop: function drop(item, monitor) {
+      onMove && onMove({
+        dragIndex: item.index,
+        hoverIndex: index
+      });
+    }
+  }),
+      _useDrop2 = _slicedToArray(_useDrop, 2),
+      _useDrop2$ = _useDrop2[0],
+      isOver = _useDrop2$.isOver,
+      dropClassName = _useDrop2$.dropClassName,
+      drop = _useDrop2[1];
+
+  var _useDrag = useDrag({
+    item: {
+      index: index,
+      type: DND_TYPE
+    },
+    end: function end(item, monitor) {
+      var dropResult = monitor.getDropResult();
+
+      if (item && dropResult) {}
+    },
+    collect: function collect(monitor) {
+      return {
+        isDragging: monitor.isDragging()
+      };
+    }
+  }),
+      _useDrag2 = _slicedToArray(_useDrag, 2),
+      drag = _useDrag2[1];
+
+  onMove && drop(drag(ref));
+
   var onValuesChange = function onValuesChange(values, allValues) {
     if (editableStream) {
       editableStream.next({
@@ -50,8 +103,10 @@ var EditableRow = function EditableRow(props) {
     initialValues: record,
     onValuesChange: onValuesChange,
     component: false
-  }, /*#__PURE__*/React.createElement("tr", _extends({}, props, {
-    className: "".concat(index % 2 === 0 ? 'ant-table-row--even' : 'ant-table-row--odd', " ").concat(className, " "),
+  }, /*#__PURE__*/React.createElement("tr", _extends({
+    ref: ref
+  }, props, {
+    className: "".concat(index % 2 === 0 ? 'ant-table-row--even' : 'ant-table-row--odd', " ").concat(className, " ").concat(isOver ? dropClassName : '', " "),
     style: {
       height: '30px',
       fontSize: '13px'

package/es/comps/Editable/comps/index.less

@@ -28,3 +28,11 @@
 .font-bold {
   font-weight: bold;
 }
+
+.drop-over-downward td {
+  border-bottom: 2px dashed #1890ff !important;
+}
+
+.drop-over-upward td {
+  border-top: 2px dashed #1890ff !important;
+}

package/es/comps/Editable/index.d.ts

@@ -49,6 +49,10 @@ interface IEditableProps<R = any> {
      * 每行确认回调函数
      */
     onRowClick?: (record: any) => void;
+    /**
+     * 行移动
+     */
+    onMove?: (record: any) => void;
     /**
      * 表格按钮点击事件
      */

package/es/comps/Editable/index.js

@@ -10,6 +10,8 @@ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import React from 'react';
 import { pick, isArray } from 'lodash';
+import { DndProvider } from 'react-dnd';
+import { HTML5Backend } from 'react-dnd-html5-backend';
 import EditableCell from './comps/EditableCell';
 import EditableRow from './comps/EditableRow';
 import { EditableContext } from './interface';
@@ -37,6 +39,7 @@ var Editable = function Editable(props) {
       _props$isAction = props.isAction,
       isAction = _props$isAction === void 0 ? true : _props$isAction,
       tableProps = props.tableProps,
+      onMove = props.onMove,
       onRowClick = props.onRowClick,
       onButtonCellClick = props.onButtonCellClick,
       onRowConfirm = props.onRowConfirm,
@@ -332,6 +335,8 @@ var Editable = function Editable(props) {
         editHeardCellKey: editHeardCellKey
       }
     }
+  }, /*#__PURE__*/React.createElement(DndProvider, {
+    backend: HTML5Backend
   }, /*#__PURE__*/React.createElement(_Table, _extends({
     key: _columns.length,
     className: "ronds-edit-table",
@@ -358,10 +363,11 @@ var Editable = function Editable(props) {
     onRow: function onRow(record, index) {
       return {
         record: record,
-        index: index
+        index: index,
+        onMove: onMove
       };
     }
-  })), (type === 'multiple' || type === 'freedom') && !readonly && isAddRow && defaultValue && /*#__PURE__*/React.createElement(_Button, {
+  }))), (type === 'multiple' || type === 'freedom') && !readonly && isAddRow && defaultValue && /*#__PURE__*/React.createElement(_Button, {
     block: true,
     type: "dashed",
     style: {

package/es/comps/Editable/interface.d.ts

@@ -30,6 +30,7 @@ export interface EditableRowProps extends React.HTMLAttributes<HTMLElement> {
     rowIndex: number;
     record?: any;
     index?: any;
+    onMove?: (data: any) => void;
 }
 export declare type InputType = 'bool' | 'number' | 'text' | 'enum' | string;
 export interface EditColumnsType extends ColumnsType<any> {
@@ -68,3 +69,4 @@ export interface IMultipleProps extends ICommonProps {
 }
 export interface IFreedomProps extends ICommonProps {
 }
+export declare const DND_TYPE = "rzDndTableRow";

package/es/comps/Editable/interface.js

@@ -1,7 +1,8 @@
 /*
  * @Author: wangxian
  * @Date: 2022-03-04 15:07:57
- * @LastEditTime: 2022-09-27 10:11:38
+ * @LastEditTime: 2023-01-04 10:38:53
  */
 import React from 'react';
-export var EditableContext = /*#__PURE__*/React.createContext(null);
+export var EditableContext = /*#__PURE__*/React.createContext(null);
+export var DND_TYPE = 'rzDndTableRow';

package/es/comps/MetadataForm/DataCell/Select.js

@@ -176,9 +176,11 @@ function Index(props) {
     }
 
     _enum.forEach(function (it) {
+      var _it$key;
+
       var obj = {
         label: it.value,
-        value: (it === null || it === void 0 ? void 0 : it.key) || (it === null || it === void 0 ? void 0 : it.value)
+        value: (_it$key = it === null || it === void 0 ? void 0 : it.key) !== null && _it$key !== void 0 ? _it$key : it === null || it === void 0 ? void 0 : it.value
       };
 
       _options.push(obj);

package/package.json

@@ -1,7 +1,7 @@
 {
   "public": true,
   "name": "ronds-metadata",
-  "version": "1.1.75",
+  "version": "1.1.77",
   "scripts": {
     "start": "dumi dev",
     "docs:build": "dumi build",