Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

添加子节点位置排序功能 #47

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

添加子节点位置排序功能 #47

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5b96c49
添加子节点位置排序功能
Nov 28, 2019
58da08b
去除多余字符
Nov 28, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
90 changes: 71 additions & 19 deletions package/components/SchemaComponents/SchemaJson.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,8 @@ import LocaleProvider from '../LocalProvider/index.js';
import utils from '../../utils';
import MockSelect from '../MockSelect/index.js';


// 添加字段类型是字段还是数组
const mapping = (name, data, showEdit, showAdv) => {
switch (data.type) {
case 'array':
Expand All @@ -43,6 +45,7 @@ const mapping = (name, data, showEdit, showAdv) => {
}
};


class SchemaArray extends PureComponent {
constructor(props, context) {
super(props);
Expand Down Expand Up @@ -220,6 +223,10 @@ SchemaArray.contextTypes = {
isMock: PropTypes.bool
};




// 内容Schema
class SchemaItem extends PureComponent {
constructor(props, context) {
super(props);
Expand Down Expand Up @@ -312,6 +319,43 @@ class SchemaItem extends PureComponent {
this.Model.addFieldAction({ prefix, name });
};


// 向上
handleUpItem = () => {
const { prefix, name, data } = this.props;
let nameArray = this.getPrefix();
let requiredArr = data.required;
let itemIndex = requiredArr.indexOf(name);
console.log(prefix);
console.log(data.required);
console.log(data.properties);

if(itemIndex === 0){
return false;
}

this.Model.upItemAction({ key: nameArray });
// this.Model.enableRequireAction({ prefix, name, up:true }); // required:true
}

// 向下
handleDownItem = () => {
const { prefix, name, data } = this.props;
let nameArray = this.getPrefix();
let requiredArr = data.required;
let itemIndex = requiredArr.indexOf(name);
let len = requiredArr.length;
console.log(prefix);
console.log(data.required)
console.log(data.properties);

if(itemIndex === len-1){
return false;
}

this.Model.downItemAction({ key: nameArray });
}

// 控制三角形按钮
handleClickIcon = () => {
let prefix = this.getPrefix();
Expand Down Expand Up @@ -341,7 +385,7 @@ class SchemaItem extends PureComponent {
<div>
<Row type="flex" justify="space-around" align="middle">
<Col
span={8}
span={6}
className="col-item name-item col-item-name"
style={this.__tagPaddingLeftStyle}
>
Expand Down Expand Up @@ -376,7 +420,6 @@ class SchemaItem extends PureComponent {
</Row>
</Col>


<Col span={3} className="col-item col-item-type">
<Select
className="type-select-style"
Expand All @@ -393,7 +436,6 @@ class SchemaItem extends PureComponent {
</Select>
</Col>


{this.context.isMock && (
<Col span={3} className="col-item col-item-mock">
{/* <Input
Expand Down Expand Up @@ -422,7 +464,7 @@ class SchemaItem extends PureComponent {
/>
</Col>

<Col span={this.context.isMock ? 4 : 5} className="col-item col-item-desc">
<Col span={this.context.isMock ? 3 : 4} className="col-item col-item-desc">
<Input
addonAfter={<Icon type="edit" onClick={() => this.handleShowEdit('description')} />}
placeholder={LocaleProvider('description')}
Expand All @@ -431,8 +473,8 @@ class SchemaItem extends PureComponent {
/>
</Col>


<Col span={this.context.isMock ? 2: 3} className="col-item col-item-setting">
{/* 操作按钮 */}
<Col span={this.context.isMock ? 3: 4} className="col-item col-item-setting">
<span className="adv-set" onClick={this.handleShowAdv}>
<Tooltip placement="top" title={LocaleProvider('adv_setting')}>
<Icon type="setting" />
Expand All @@ -444,12 +486,18 @@ class SchemaItem extends PureComponent {
{value.type === 'object' ? (
<DropPlus prefix={prefix} name={name} />
) : (
<span onClick={this.handleAddField}>
<span className="delete-item" onClick={this.handleAddField}>
<Tooltip placement="top" title={LocaleProvider('add_sibling_node')}>
<Icon type="plus" className="plus" />
</Tooltip>
</span>
)}
<span className="delete-item" onClick={this.handleUpItem}>
<Icon type="up" className="up" />
</span>
<span className="delete-item" onClick={this.handleDownItem}>
<Icon type="down" className="down" />
</span>
</Col>
</Row>
<div className="option-formStyle">{mapping(prefixArray, value, showEdit, showAdv)}</div>
Expand All @@ -464,25 +512,28 @@ SchemaItem.contextTypes = {
isMock: PropTypes.bool
};



// 字段为对象类型处理
class SchemaObjectComponent extends Component {
shouldComponentUpdate(nextProps) {
if (
_.isEqual(nextProps.data, this.props.data) &&
_.isEqual(nextProps.prefix, this.props.prefix) &&
_.isEqual(nextProps.open, this.props.open)
) {
return false;
}
return true;
}
// shouldComponentUpdate(nextProps) {
// if (
// _.isEqual(nextProps.data, this.props.data) &&
// _.isEqual(nextProps.prefix, this.props.prefix) &&
// _.isEqual(nextProps.open, this.props.open)
// ) {
// return false;
// }
// return true;
// }

render() {
const { data, prefix, showEdit, showAdv } = this.props;
return (
<div className="object-style">
{Object.keys(data.properties).map((name, index) => (
<SchemaItem
key={index}
key={index+ Math.random()}
data={this.props.data}
name={name}
prefix={prefix}
Expand Down Expand Up @@ -535,9 +586,10 @@ DropPlus.contextTypes = {
Model: PropTypes.object
};


const SchemaJson = props => {
const item = mapping([], props.data, props.showEdit, props.showAdv);
return <div className="schema-content">{item}</div>;
return <div className="schema-content" >{item}</div>;
};

export default SchemaJson;
11 changes: 11 additions & 0 deletions package/components/SchemaComponents/schemaJson.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,10 +44,21 @@
cursor: pointer;
}

.ant-dropdown-trigger {
margin-right: 8px!important;
}

.json-schema-react-editor .plus {
color: #2395f1
}

.json-schema-react-editor .up {
color: #780650
}
.json-schema-react-editor .down {
color: #10239e
}

.json-schema-react-editor .close {
color: #ff561b
}
Expand Down
115 changes: 113 additions & 2 deletions package/models/schema.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,7 +100,11 @@ export default {
let requiredData = [].concat(parentData.required || []);
let index = requiredData.indexOf(action.name);

if (!action.required && index >= 0) {
if(action.up || action.down){
parentKeys.push('required');
utils.setData(state.data, parentKeys, requiredData);
}
else if (!action.required && index >= 0) {
requiredData.splice(index, 1);
parentKeys.push('required');
if (requiredData.length === 0) {
Expand All @@ -115,6 +119,33 @@ export default {
}
},

enableRequireActionUpdate: function(state, action, oldState) {
const keys = action.prefix;
let parentKeys = utils.getParentKeys(keys);
let oldData = oldState.data;
let parentData = utils.getData(oldData, parentKeys);
let requiredData = [].concat(parentData.required || []);
let index = requiredData.indexOf(action.name);

if(action.up){
utils.setData(state.data, parentKeys, requiredData);
}
else{
if (!action.required && index >= 0) {
parentKeys.push('required');
if (requiredData.length === 0) {
utils.deleteData(state.data, parentKeys);
} else {
utils.setData(state.data, parentKeys, requiredData);
}
} else if (action.required && index === -1) {
requiredData.push(action.name);
parentKeys.push('required');
utils.setData(state.data, parentKeys, requiredData);
}
}
},

requireAllAction: function(state, action, oldState) {
// let oldData = oldState.data;
let data = utils.cloneObject(action.value);
Expand All @@ -123,9 +154,9 @@ export default {
state.data = data;
},

// 删除节点
deleteItemAction: function(state, action, oldState) {
const keys = action.key;

let name = keys[keys.length - 1];
let oldData = oldState.data;
let parentKeys = utils.getParentKeys(keys);
Expand All @@ -140,6 +171,84 @@ export default {
utils.setData(state.data, parentKeys, newParentData);
},

// 向上
upItemAction: function(state, action, oldState) {
const keys = action.key;
let name = keys[keys.length - 1];
let oldData = oldState.data;
let parentKeys = utils.getParentKeys(keys);
let parentData = utils.getData(oldData, parentKeys);

// 数组key
let requiredData = Object.keys(parentData);

// 取移动项下标
let itemIndex = requiredData.indexOf(name);

// 如果第一个元素就不允许在执行
if(itemIndex === 0){
return false;
}

let pevitemName = requiredData[itemIndex-1];

// 将数组下标进行换位
requiredData[itemIndex] = pevitemName;
requiredData[itemIndex-1] = name;

// 修改properties
let newParentData = {};
requiredData.forEach((item) => {
newParentData[item] = parentData[item]
})
utils.setData(state.data, parentKeys, newParentData);

// 修改required
let requiredKeys = utils.getParentKeys(parentKeys);
requiredKeys.push('required')
utils.setData(state.data, requiredKeys, requiredData);
},

// 向下
downItemAction: function(state, action, oldState) {
const keys = action.key;
let name = keys[keys.length - 1];
let oldData = oldState.data;
let parentKeys = utils.getParentKeys(keys);
let parentData = utils.getData(oldData, parentKeys);

// 数组key
let requiredData = Object.keys(parentData);
let len = requiredData.length

// 取移动项下标
let itemIndex = requiredData.indexOf(name);

// 如果第一个元素就不允许在执行
if(itemIndex === len-1){
return false;
}

let pevitemName = requiredData[itemIndex+1];

// 将数组下标进行换位
requiredData[itemIndex] = pevitemName;
requiredData[itemIndex+1] = name;

// 修改properties
let newParentData = {};
requiredData.forEach((item) => {
newParentData[item] = parentData[item]
})
utils.setData(state.data, parentKeys, newParentData);

// 修改required
let requiredKeys = utils.getParentKeys(parentKeys);
requiredKeys.push('required')
utils.setData(state.data, requiredKeys, requiredData);
},

// 添加子节点
addFieldAction: function(state, action, oldState) {
const keys = action.prefix;
let oldData = oldState.data;
Expand Down Expand Up @@ -171,6 +280,8 @@ export default {
parentKeys.push('required');
utils.setData(state.data, parentKeys, requiredData);
},

// 添加子节点
addChildFieldAction: function(state, action, oldState) {
const keys = action.key;
let oldData = oldState.data;
Expand Down