fix: dragging an element to the left, right, or bottom would cause the element to disappear (#620)
* fix: dragging an element to the left, right, or bottom would cause the element to disappear * fix: remove console * fix: avoid request api * Revert "fix: remove console" This reverts commit 143c9ebc4f14bfba9f1c469e5fb695258861c82c. * Revert "fix: dragging an element to the left, right, or bottom would cause the element to disappear" This reverts commit 26c55e22578c34e2947af200c481d312e201ca5a. * feat: does not hide ColDivider when Bloack length > 1
This commit is contained in:
		
							parent
							
								
									205c23b656
								
							
						
					
					
						commit
						0f0f852fa7
					
				| @ -1,4 +1,4 @@ | |||||||
| import { useDndMonitor, useDroppable } from '@dnd-kit/core'; | import { useDndContext, useDndMonitor, useDroppable } from '@dnd-kit/core'; | ||||||
| import { css } from '@emotion/css'; | import { css } from '@emotion/css'; | ||||||
| import { observer, RecursionField, Schema, useField, useFieldSchema } from '@formily/react'; | import { observer, RecursionField, Schema, useField, useFieldSchema } from '@formily/react'; | ||||||
| import { uid } from '@formily/shared'; | import { uid } from '@formily/shared'; | ||||||
| @ -24,9 +24,25 @@ const ColDivider = (props) => { | |||||||
|     backgroundColor: isOver ? 'rgba(241, 139, 98, .1)' : undefined, |     backgroundColor: isOver ? 'rgba(241, 139, 98, .1)' : undefined, | ||||||
|   }; |   }; | ||||||
| 
 | 
 | ||||||
|  |   const dndContext = useDndContext() | ||||||
|  |   const activeSchema: Schema | undefined = dndContext.active?.data.current?.schema?.parent | ||||||
|  |   const blocksLength: number = activeSchema ? Object.keys(activeSchema.properties).length : 0; | ||||||
|  | 
 | ||||||
|  | 
 | ||||||
|  |   let visible = true | ||||||
|  |   if (blocksLength === 1) { | ||||||
|  |     if (props.first) { | ||||||
|  |       visible = activeSchema !== props.cols[0] | ||||||
|  |     } else { | ||||||
|  |       const currentSchema = props.cols[props.index] | ||||||
|  |       const downSchema = props.cols[props.index + 1] | ||||||
|  |       visible = activeSchema !== currentSchema && downSchema !== activeSchema | ||||||
|  |     } | ||||||
|  |   } | ||||||
|  | 
 | ||||||
|   return ( |   return ( | ||||||
|     <div |     <div | ||||||
|       ref={setNodeRef} |       ref={visible ? setNodeRef : null} | ||||||
|       className={cls( |       className={cls( | ||||||
|         'nb-col-divider', |         'nb-col-divider', | ||||||
|         css` |         css` | ||||||
| @ -52,6 +68,26 @@ const RowDivider = (props) => { | |||||||
| 
 | 
 | ||||||
|   const [active, setActive] = useState(false); |   const [active, setActive] = useState(false); | ||||||
| 
 | 
 | ||||||
|  |   const dndContext = useDndContext() | ||||||
|  |   const currentSchema = props.rows[props.index] | ||||||
|  |   const activeSchema = dndContext.active?.data.current?.schema?.parent.parent | ||||||
|  | 
 | ||||||
|  |   const colsLength: number = activeSchema?.mapProperties((schema) => { | ||||||
|  |     return schema['x-component'] === 'Grid.Col' | ||||||
|  |   }).filter(Boolean).length | ||||||
|  | 
 | ||||||
|  |   let visible = true | ||||||
|  | 
 | ||||||
|  |   // col > 1 时不需要隐藏
 | ||||||
|  |   if (colsLength === 1) { | ||||||
|  |     if (props.first) { | ||||||
|  |       visible = activeSchema !== props.rows[0] | ||||||
|  |     } else { | ||||||
|  |       const downSchema = props.rows[props.index + 1] | ||||||
|  |       visible = activeSchema !== currentSchema && downSchema !== activeSchema | ||||||
|  |     } | ||||||
|  |   } | ||||||
|  | 
 | ||||||
|   useDndMonitor({ |   useDndMonitor({ | ||||||
|     onDragStart(event) { |     onDragStart(event) { | ||||||
|       setActive(true); |       setActive(true); | ||||||
| @ -68,7 +104,7 @@ const RowDivider = (props) => { | |||||||
| 
 | 
 | ||||||
|   return ( |   return ( | ||||||
|     <span |     <span | ||||||
|       ref={setNodeRef} |       ref={visible ? setNodeRef : null} | ||||||
|       className={cls( |       className={cls( | ||||||
|         'nb-row-divider', |         'nb-row-divider', | ||||||
|         css` |         css` | ||||||
| @ -165,11 +201,14 @@ export const Grid: any = observer((props: any) => { | |||||||
|   const { render } = useSchemaInitializer(fieldSchema['x-initializer']); |   const { render } = useSchemaInitializer(fieldSchema['x-initializer']); | ||||||
|   const addr = field.address.toString(); |   const addr = field.address.toString(); | ||||||
|   const rows = useRowProperties(); |   const rows = useRowProperties(); | ||||||
|  | 
 | ||||||
|   return ( |   return ( | ||||||
|     <GridContext.Provider value={{ fieldSchema, renderSchemaInitializer: render }}> |     <GridContext.Provider value={{ fieldSchema, renderSchemaInitializer: render }}> | ||||||
|       <div className={'nb-grid'} style={{ position: 'relative' }}> |       <div className={'nb-grid'} style={{ position: 'relative' }}> | ||||||
|         <DndWrapper dndContext={props.dndContext}> |         <DndWrapper dndContext={props.dndContext}> | ||||||
|           <RowDivider |           <RowDivider | ||||||
|  |             rows={rows} | ||||||
|  |             first | ||||||
|             id={`${addr}_0`} |             id={`${addr}_0`} | ||||||
|             data={{ |             data={{ | ||||||
|               breakRemoveOn: breakRemoveOnGrid, |               breakRemoveOn: breakRemoveOnGrid, | ||||||
| @ -183,6 +222,8 @@ export const Grid: any = observer((props: any) => { | |||||||
|               <React.Fragment key={schema.name}> |               <React.Fragment key={schema.name}> | ||||||
|                 <RecursionField name={schema.name} schema={schema} /> |                 <RecursionField name={schema.name} schema={schema} /> | ||||||
|                 <RowDivider |                 <RowDivider | ||||||
|  |                   rows={rows} | ||||||
|  |                   index={index} | ||||||
|                   id={`${addr}_${index + 1}`} |                   id={`${addr}_${index + 1}`} | ||||||
|                   data={{ |                   data={{ | ||||||
|                     breakRemoveOn: breakRemoveOnGrid, |                     breakRemoveOn: breakRemoveOnGrid, | ||||||
| @ -206,6 +247,7 @@ Grid.Row = observer((props) => { | |||||||
|   const fieldSchema = useFieldSchema(); |   const fieldSchema = useFieldSchema(); | ||||||
|   const addr = field.address.toString(); |   const addr = field.address.toString(); | ||||||
|   const cols = useColProperties(); |   const cols = useColProperties(); | ||||||
|  | 
 | ||||||
|   return ( |   return ( | ||||||
|     <GridRowContext.Provider value={{ cols }}> |     <GridRowContext.Provider value={{ cols }}> | ||||||
|       <div |       <div | ||||||
| @ -220,6 +262,8 @@ Grid.Row = observer((props) => { | |||||||
|         )} |         )} | ||||||
|       > |       > | ||||||
|         <ColDivider |         <ColDivider | ||||||
|  |           cols={cols} | ||||||
|  |           first | ||||||
|           id={`${addr}_0`} |           id={`${addr}_0`} | ||||||
|           data={{ |           data={{ | ||||||
|             breakRemoveOn: breakRemoveOnRow, |             breakRemoveOn: breakRemoveOnRow, | ||||||
| @ -233,6 +277,8 @@ Grid.Row = observer((props) => { | |||||||
|             <React.Fragment key={schema.name}> |             <React.Fragment key={schema.name}> | ||||||
|               <RecursionField name={schema.name} schema={schema} /> |               <RecursionField name={schema.name} schema={schema} /> | ||||||
|               <ColDivider |               <ColDivider | ||||||
|  |                 cols={cols} | ||||||
|  |                 index={index} | ||||||
|                 id={`${addr}_${index + 1}`} |                 id={`${addr}_${index + 1}`} | ||||||
|                 data={{ |                 data={{ | ||||||
|                   breakRemoveOn: breakRemoveOnRow, |                   breakRemoveOn: breakRemoveOnRow, | ||||||
|  | |||||||
		Loading…
	
		Reference in New Issue
	
	Block a user