Skip to content

Commit

Permalink
fix(generator): fixed dragging and sorting child elements in tuple co…
Browse files Browse the repository at this point in the history 
…ntainers
  • Loading branch information
@mengshang918
mengshang918 committed May 9, 2022
1 parent 2a9898a commit e9f700f
Show file tree
Hide file tree
Showing 3 changed files with 125 additions and 58 deletions.
89 changes: 64 additions & 25 deletions packages/drip-form/src/reducers/addField.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
* @Author: jiangxiaowei
* @Date: 2021-10-26 15:29:06
* @Last Modified by: jiangxiaowei
* @Last Modified time: 2022-04-27 17:17:08
* @Last Modified time: 2022-05-09 10:15:48
*/
import { produce, current } from 'immer'
import { setDeepProp, parseUnitedSchema, combine } from '@jdfed/utils'
Expand All @@ -24,8 +24,8 @@ const addField = ({
overFieldKey,
get,
getKey,
getTypeKey,
shouldDelete,
getTypeKey,
} = action

const keyPath = overFieldKey.split('.')
Expand Down Expand Up @@ -89,10 +89,6 @@ const addField = ({
addParentType = 'array'
}
}
const curKey =
keyPath.slice(keyPath.length - 1).join() === ''
? overFieldKey
: keyPath.slice(keyPath.length - 1).join()
const order: Array<string> = addParentUiSchema.order || []
switch (addParentType) {
case 'object': {
Expand Down Expand Up @@ -198,44 +194,79 @@ const addField = ({
break
}
case 'tuple': {
// 当前插入位置
const index =
const curKey = overFieldKey.split('.').pop() as string
// items、order当前插入位置
const addIndex =
closestEdge === 'over'
? 0
: ['left', 'top'].includes(closestEdge)
? +curKey
: +curKey + 1
// items需要删除的老的元素位置
const delIndex = Number(fieldKey)
const items: Record<string, any> = addParentDataSchema.items || []
const newItems =
closestEdge === 'over'
? [dataSchema]
: produce(items, (draft) => {
draft.splice(index, 0, dataSchema)
// 插入
draft.splice(addIndex, 0, dataSchema)
// 如果是排序删除老的
if (!shouldDelete) {
draft.splice(addIndex > delIndex ? delIndex : delIndex + 1, 1)
}
})
// 设置order
const newOrder =
closestEdge === 'over' ? ['0'] : [...order, String(order.length)]
const properties: Record<string, any> = addParentUiSchema.properties || {}
const newProperties =
closestEdge === 'over'
? { '0': uiSchema }
: produce(properties, (draft) => {
const arr = newOrder
.filter((key) => +key >= index)
.sort((a, b) => +b - +a)
arr.map((key) => {
if (+key === index) {
draft[key] = uiSchema
} else {
draft[key] = draft[+key - 1]
}
})
// 排序模式，互相替换位置
if (!shouldDelete) {
let changeProp: Record<string, unknown>
let direction: 'topToBottom' | 'bottomToTop'
order
.filter((key) => {
if (addIndex > +fieldKey) {
direction = 'topToBottom'
return +key < addIndex && +key >= +fieldKey
} else {
direction = 'bottomToTop'
return +key <= +fieldKey && +key >= addIndex
}
})
.sort((a, b) => +a - +b)
.map((key, index) => {
if (index === 0) {
changeProp = draft[key]
}
draft[key] = draft[String(+key + 1)]
if (direction == 'topToBottom') {
if (+key === addIndex - 1) {
draft[key] = changeProp
}
} else {
if (+key === +fieldKey) {
draft[key] = changeProp
}
}
})
} else {
const arr = newOrder
.filter((key) => +key >= addIndex)
.sort((a, b) => +b - +a)
arr.map((key) => {
if (+key === addIndex) {
draft[key] = uiSchema
} else {
draft[key] = draft[String(+key - 1)]
}
})
}
})
// 设置order
setDeepProp(
addParentSchemaPath.ui.concat(['order']),
state.uiSchema,
newOrder
)
// 设置uiSchema
setDeepProp(
addParentSchemaPath.ui.concat(['properties']),
Expand All @@ -248,6 +279,14 @@ const addField = ({
state.dataSchema,
newItems
)
// 非排序模式
if (shouldDelete) {
setDeepProp(
addParentSchemaPath.ui.concat(['order']),
state.uiSchema,
newOrder
)
}

break
}
Expand Down
21 changes: 7 additions & 14 deletions packages/drip-form/src/reducers/deleteField.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
* @Author: jiangxiaowei
* @Date: 2021-10-26 19:25:56
* @Last Modified by: jiangxiaowei
* @Last Modified time: 2022-04-27 17:17:48
* @Last Modified time: 2022-05-07 19:17:18
*/
import { produce, current } from 'immer'
import {
Expand All @@ -31,8 +31,7 @@ const deleteField = ({
// 待删除的父级路径 元祖 deleteParentKey 对象
// const deleteParentPath = deleteParentKey
// 待删除的父级表单
const { dataSchema: deleteParentDataSchema, uiSchema: deleteParentUiSchema } =
get(deleteParentPath)
const { uiSchema: deleteParentUiSchema } = get(deleteParentPath)
// 待删除表单 父级元素类型 默认对象类型
let deleteParentType = 'object'
if (deleteParentUiSchema.type === 'array') {
Expand All @@ -55,7 +54,6 @@ const deleteField = ({
: getKey(deleteParentPath, 'uiSchema').split('.').concat('order')
switch (deleteParentType) {
case 'array': {
const order: Array<string> = deleteParentUiSchema.order || []
const index = 0
// 删除order
deleteDeepProp(orderPath.concat(index), state.uiSchema)
Expand Down Expand Up @@ -104,17 +102,12 @@ const deleteField = ({
)
if (index != -1) {
delete draft[index]
draft[index] = draft[index + 1]
delete draft[Object.keys(draft).length - 1]
newOrder
.filter((item) => +item >= index)
.map((item) => {
draft[item] = draft[String(+item + 1)]
})
}
const arr = order.filter((key) => +key > index).sort((a, b) => +a - +b)
arr.map((key, index) => {
// 设置typePath
const parentTypePathArr = getTypeKey(fieldKey).split('.')
const parentTypePath = parentTypePathArr
.slice(0, parentTypePathArr.length - 1)
.join('.')
})
})
// 设置uiSchema
setDeepProp(
Expand Down
73 changes: 54 additions & 19 deletions packages/generator/src/hooks/useAddField.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
* @Author: jiangxiaowei
* @Date: 2021-10-08 10:20:13
* @Last Modified by: jiangxiaowei
* @Last Modified time: 2022-04-27 18:02:10
* @Last Modified time: 2022-05-09 10:14:55
*/
import { useCallback, useContext } from 'react'
import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
Expand Down Expand Up @@ -42,22 +42,22 @@ const useAddField = (): AddField => {
({
unitedSchema,
fieldKey = selectedKey || '',
closestEdge = 'bottom',
closestEdge,
oldFieldKey,
}) => {
if (!canEdit) {
message.warning('请先保存JSON编辑结果，再退出！', 2)
return
}
const newClosestEdge = closestEdge || 'bottom'
// 生成当前新增表单项的key
let newFieldKey = fieldKeyFn(unitedSchema)

// 选中新增的表单项
let selectKey = newFieldKey
const keyPath = fieldKey.split('.')
const lastKey = keyPath.length > 1 ? fieldKey.split('.').pop() : ''
const parentKey =
closestEdge === 'over'
newClosestEdge === 'over'
? fieldKey
: keyPath.slice(0, keyPath.length - 1).join('.')
let type =
Expand All @@ -74,7 +74,7 @@ const useAddField = (): AddField => {
// vieport区域拖拽
if (oldFieldKey) {
const lastFieldKey = oldFieldKey.split('.').pop() as string
if (closestEdge != 'over') {
if (newClosestEdge != 'over') {
const keyPath = oldFieldKey.split('.')
const oldParentKey = keyPath
.slice(0, keyPath.length - 1)
Expand All @@ -99,46 +99,81 @@ const useAddField = (): AddField => {
selectKey = `${parentKey ? `${parentKey}.` : ''}${newFieldKey}`
break
case 'array':
if (closestEdge != 'over') {
if (newClosestEdge != 'over') {
// viewport区域拖拽
if (oldFieldKey) {
newFieldKey = oldFieldKey.split('.').pop() as string
}
}
selectKey = `${parentKey}${
closestEdge != 'over' ? `.0.${newFieldKey}` : '.0'
newClosestEdge != 'over' ? `.0.${newFieldKey}` : '.0'
}`
break
case 'tuple': {
const curKey = lastKey ? (lastKey as string) : fieldKey
// 当前插入位置
const index =
closestEdge === 'over'
? 0
: ['left', 'top'].includes(closestEdge)
? +curKey
: +curKey + 1
newFieldKey = `${index}`
selectKey = `${parentKey}.${index}`
const curKey = fieldKey.split('.').pop() as string
if (newClosestEdge != 'over') {
if (oldFieldKey) {
const keyPath = oldFieldKey.split('.')
const oldParentKey = keyPath
.slice(0, keyPath.length - 1)
.join('.')
if (oldParentKey === parentKey) {
shouldDelete = false
newFieldKey = oldFieldKey.split('.').pop() as string
let direction: 'topToBottom' | 'bottomToTop'
if (+curKey > +newFieldKey) {
direction = 'topToBottom'
} else {
direction = 'bottomToTop'
}
selectKey = `${parentKey}.${
direction === 'topToBottom'
? ['top', 'left'].includes(newClosestEdge)
? +curKey - 1
: curKey
: curKey
}`
} else {
newFieldKey = String(
['left', 'top'].includes(newClosestEdge)
? +curKey
: +curKey + 1
)
selectKey = `${parentKey}.${newFieldKey}`
}
} else {
newFieldKey = String(
['left', 'top'].includes(newClosestEdge) ? +curKey : +curKey + 1
)
selectKey = `${parentKey}.${newFieldKey}`
}
} else {
newFieldKey = '0'
selectKey = `${parentKey}.${newFieldKey}`
}
break
}
default:
break
}
generatorContext.current?.__generator__.addField({
fieldKey: newFieldKey,
closestEdge,
closestEdge: newClosestEdge,
unitedSchema,
overFieldKey:
!selectedKey && addFieldLocation === 'bottom' && closestEdge != 'over'
// 未选中任何表单，左侧点击新增，并且设置方向为bottom时，自动添加到最后一个元素后
!selectedKey && addFieldLocation === 'bottom' && !closestEdge
? lastFieldKey
: fieldKey,
shouldDelete,
cb: () => {
// 设置选中的表单
setSelected(selectKey)
// 设置选中的表单类型
setCurType(unitedSchema.ui.type)
},
})
// // viewport区域拖拽且非排序模式，需要删除原来位置的表单
if (shouldDelete && oldFieldKey) {
deleteField(oldFieldKey)
}
Expand Down

0 comments on commit e9f700f

Please sign in to comment.