mirror of
https://github.com/YMFE/yapi.git
synced 2025-04-12 15:10:23 +08:00
opti: drag
This commit is contained in:
suxiaoxin
parent
cf79bebe63
commit
2abcb706f5
@ -23,7 +23,8 @@ module.exports = {
|
||||
"react/jsx-indent": ["error", 2],
|
||||
"comma-dangle": ["error", "never"],
|
||||
"no-console": ["off"],
|
||||
"import/no-unresolved": ["off"]
|
||||
"import/no-unresolved": ["off"],
|
||||
"react/no-find-dom-node": ["off"]
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import React from "react";
|
||||
import ReactDOM from "react-dom";
|
||||
|
||||
import PropTypes from "prop-types";
|
||||
|
||||
/**
|
||||
* @author suxiaoxin
|
||||
@ -11,54 +12,99 @@ import PropTypes from 'prop-types'
|
||||
*/
|
||||
let curDragIndex = null;
|
||||
|
||||
EasyDragSort.propTypes = {
|
||||
children: PropTypes.array,
|
||||
onChange: PropTypes.func,
|
||||
onDragEnd: PropTypes.func,
|
||||
data: PropTypes.func
|
||||
function isDom(obj){
|
||||
return obj && typeof obj === 'object' && obj.nodeType === 1 && typeof obj.nodeName === 'string' && typeof obj.getAttribute === 'function';
|
||||
}
|
||||
|
||||
export default function EasyDragSort(props){
|
||||
export default class EasyDragSort extends React.Component {
|
||||
static propTypes = {
|
||||
children: PropTypes.array,
|
||||
onChange: PropTypes.func,
|
||||
onDragEnd: PropTypes.func,
|
||||
data: PropTypes.func,
|
||||
onlyChild: PropTypes.string
|
||||
};
|
||||
|
||||
render() {
|
||||
const that = this;
|
||||
const props = this.props;
|
||||
const {onlyChild} = props;
|
||||
let container = props.children;
|
||||
const onChange = (from, to)=>{
|
||||
if(from === to ) return ;
|
||||
const onChange = (from, to) => {
|
||||
if (from === to) return;
|
||||
let curValue;
|
||||
|
||||
|
||||
curValue = props.data();
|
||||
|
||||
|
||||
let newValue = arrMove(curValue, from, to);
|
||||
if(typeof props.onChange === 'function'){
|
||||
return props.onChange(newValue, from ,to);
|
||||
if (typeof props.onChange === "function") {
|
||||
return props.onChange(newValue, from, to);
|
||||
}
|
||||
}
|
||||
return <div>
|
||||
{container.map((item, index)=>{
|
||||
if(React.isValidElement(item)){
|
||||
return React.cloneElement(item, {
|
||||
draggable:"true",
|
||||
onDragStart: function(){
|
||||
curDragIndex = index
|
||||
},
|
||||
onDragEnter: function() {
|
||||
onChange(curDragIndex, index)
|
||||
curDragIndex = index;
|
||||
},
|
||||
onDragEnd: function(){
|
||||
curDragIndex = null;
|
||||
if(typeof props.onDragEnd === 'function'){
|
||||
props.onDragEnd()
|
||||
}
|
||||
};
|
||||
return (
|
||||
<div>
|
||||
{container.map((item, index) => {
|
||||
if (React.isValidElement(item)) {
|
||||
return React.cloneElement(item, {
|
||||
draggable: onlyChild ? false : true,
|
||||
ref: "x" + index,
|
||||
"data-ref": "x" + index,
|
||||
onDragStart: function() {
|
||||
curDragIndex = index;
|
||||
},
|
||||
/**
|
||||
* 控制 dom 是否可拖动
|
||||
* @param {*} e
|
||||
*/
|
||||
onMouseDown(e) {
|
||||
if(!onlyChild) return;
|
||||
let el = e.target,
|
||||
target = e.target;
|
||||
if(!isDom(el)) return;
|
||||
do {
|
||||
if(
|
||||
el &&
|
||||
isDom(el)&&
|
||||
el.getAttribute(onlyChild)
|
||||
){
|
||||
target = el;
|
||||
}
|
||||
if (
|
||||
el &&
|
||||
el.tagName == "DIV" &&
|
||||
el.getAttribute("data-ref")
|
||||
) {
|
||||
break;
|
||||
}
|
||||
|
||||
} while ((el = el.parentNode));
|
||||
if(!el) return;
|
||||
let ref = that.refs[el.getAttribute("data-ref")];
|
||||
let dom = ReactDOM.findDOMNode(ref);
|
||||
if(dom) dom.draggable = target.getAttribute(onlyChild) ? true: false;
|
||||
},
|
||||
onDragEnter: function() {
|
||||
onChange(curDragIndex, index);
|
||||
curDragIndex = index;
|
||||
},
|
||||
onDragEnd: function() {
|
||||
curDragIndex = null;
|
||||
if (typeof props.onDragEnd === "function") {
|
||||
props.onDragEnd();
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
})
|
||||
}
|
||||
return item;
|
||||
})}
|
||||
</div>;
|
||||
return item;
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
function arrMove(arr, fromIndex, toIndex){
|
||||
function arrMove(arr, fromIndex, toIndex) {
|
||||
arr = [].concat(arr);
|
||||
let item = arr.splice(fromIndex, 1)[0];
|
||||
arr.splice(toIndex , 0, item);
|
||||
arr.splice(toIndex, 0, item);
|
||||
return arr;
|
||||
}
|
||||
}
|
||||
|
||||
@ -541,10 +541,10 @@ class InterfaceEditForm extends Component {
|
||||
const queryTpl = (data, index) => {
|
||||
return (
|
||||
<Row key={index} className="interface-edit-item-content">
|
||||
<Col span="1" className="interface-edit-item-content-col interface-edit-item-content-col-drag" >
|
||||
<Col span="1" easy_drag_sort_child="true" className="interface-edit-item-content-col interface-edit-item-content-col-drag" >
|
||||
<Icon type="bars" />
|
||||
</Col>
|
||||
<Col span="4" className="interface-edit-item-content-col">
|
||||
<Col span="4" draggable="false" className="interface-edit-item-content-col">
|
||||
{getFieldDecorator("req_query[" + index + "].name", {
|
||||
initialValue: data.name
|
||||
})(<TextArea autosize={{minRows:1, maxRows: 1}} placeholder="参数名称" />)}
|
||||
@ -583,7 +583,7 @@ class InterfaceEditForm extends Component {
|
||||
const headerTpl = (data, index) => {
|
||||
return (
|
||||
<Row key={index} className="interface-edit-item-content">
|
||||
<Col span="1" className="interface-edit-item-content-col interface-edit-item-content-col-drag" >
|
||||
<Col span="1" easy_drag_sort_child="true" className="interface-edit-item-content-col interface-edit-item-content-col-drag" >
|
||||
<Icon type="bars" />
|
||||
</Col>
|
||||
<Col span="4" className="interface-edit-item-content-col">
|
||||
@ -630,7 +630,7 @@ class InterfaceEditForm extends Component {
|
||||
const requestBodyTpl = (data, index) => {
|
||||
return (
|
||||
<Row key={index} className="interface-edit-item-content">
|
||||
<Col span="1" className="interface-edit-item-content-col interface-edit-item-content-col-drag" >
|
||||
<Col span="1" easy_drag_sort_child="true" className="interface-edit-item-content-col interface-edit-item-content-col-drag" >
|
||||
<Icon type="bars" />
|
||||
</Col>
|
||||
<Col span="4" className="interface-edit-item-content-col">
|
||||
@ -896,6 +896,7 @@ class InterfaceEditForm extends Component {
|
||||
<EasyDragSort
|
||||
data={() => this.props.form.getFieldValue("req_query")}
|
||||
onChange={this.handleDragMove("req_query")}
|
||||
onlyChild='easy_drag_sort_child'
|
||||
>
|
||||
{QueryList}
|
||||
</EasyDragSort>
|
||||
@ -921,6 +922,7 @@ class InterfaceEditForm extends Component {
|
||||
<EasyDragSort
|
||||
data={() => this.props.form.getFieldValue("req_headers")}
|
||||
onChange={this.handleDragMove("req_headers")}
|
||||
onlyChild="easy_drag_sort_child"
|
||||
>
|
||||
{headerList}
|
||||
</EasyDragSort>
|
||||
@ -968,6 +970,7 @@ class InterfaceEditForm extends Component {
|
||||
<EasyDragSort
|
||||
data={() => this.props.form.getFieldValue("req_body_form")}
|
||||
onChange={this.handleDragMove("req_body_form")}
|
||||
onlyChild='easy_drag_sort_child'
|
||||
>
|
||||
{requestBodyList}
|
||||
</EasyDragSort>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user