fix: the delete button of the first component of the visible area is …

…hidden (#94)
jd-opensource · Dec 31, 2021 · e388b6b · e388b6b
1 parent bac1b4e
commit e388b6b
Show file tree

Hide file tree

Showing 9 changed files with 76 additions and 44 deletions.
diff --git a/packages/drip-form/src/DripForm/type.ts b/packages/drip-form/src/DripForm/type.ts
@@ -1,6 +1,7 @@
 import type { ElementType, Dispatch as DispatchR } from 'react'
 import type { UnitedSchema, Action, Map, Get, Theme } from '@jdfed/utils'
 import type { Set, Merge, DeleteField, GetKey, AddField } from '@jdfed/hooks'
+import type { ContainerHoc } from '../render/type'
 import type { Plugin, Options } from 'ajv/dist/2019'
 import type Ajv from 'ajv/dist/2019'
 
@@ -86,10 +87,7 @@ export type DripFormProps = {
   // 每次渲染完成时都会触发对formData的转化，转化在校验后执行
   transform?: TransformFunc
   // 允许入参高阶组件，针对renderCoreFn中的Container进行包裹，便于执行拖拽等操作
-  containerHoc?: (
-    FormItem: JSX.Element,
-    formItemProps: { fieldKey: string }
-  ) => JSX.Element
+  containerHoc?: ContainerHoc
   onSubmit?: FooterBtnFuncType
   onCancel?: FooterBtnFuncType
 }

diff --git a/packages/drip-form/src/index.ts b/packages/drip-form/src/index.ts
@@ -7,7 +7,7 @@ import type {
   Dispatch,
   UiComponents,
 } from './DripForm/type'
-import type { RenderFnProps } from './render/type'
+import type { RenderFnProps, ContainerHoc } from './render/type'
 import type { ContainerStyle } from '@jdfed/utils'
 export default DripForm
 export { containerMap }
@@ -19,4 +19,5 @@ export type {
   RenderFnProps,
   ContainerStyle,
   UiComponents,
+  ContainerHoc,
 }
diff --git a/packages/drip-form/src/render/index.tsx b/packages/drip-form/src/render/index.tsx
@@ -71,7 +71,7 @@ const Render = ({
   } = currentUiSchema
   // 表单是否在下方直接展示错误信息
   const showError = dataSchema.validateTime === 'change'
-  return (order || []).map((item: string) => {
+  return (order || []).map((item: string, i: number) => {
     // 当前Field ui类型
     const type = properties[item].type
     // 当前表单是否为普通数组（自增数组）中的每一项
@@ -312,6 +312,7 @@ const Render = ({
             type,
             parentMode,
             parentType,
+            isFirst: !!isRoot && i === 0,
           }
         )
       ) : (

diff --git a/packages/drip-form/src/render/type.ts b/packages/drip-form/src/render/type.ts
@@ -17,6 +17,20 @@ export type ContainerType = {
   default: ElementType
 }
 
+export type ContainerHoc = (
+  FormItem: JSX.Element,
+  formItemProps: {
+    fieldKey: string
+    error: string
+    containerStyle: ContainerStyle
+    type: string
+    parentMode: string
+    parentType: string
+    // 是否是第一个表单
+    isFirst: boolean
+  }
+) => JSX.Element
+
 export type RenderFnProps = {
   // ajv是否已经设置了默认值
   hasDefault: boolean
@@ -36,17 +50,7 @@ export type RenderFnProps = {
   // 不同type类型对应渲染的容器 ArrayContainer 和objectContainer特有
   containerMap?: ContainerType
   // 允许入参高阶组件，在Container进行包裹
-  containerHoc?: (
-    FormItem: JSX.Element,
-    formItemProps: {
-      fieldKey: string
-      error: string
-      containerStyle: ContainerStyle
-      type: string
-      parentMode: string
-      parentType: string
-    }
-  ) => JSX.Element
+  containerHoc?: ContainerHoc
   get: Get
   dispatch: Dispatch<Action>
   uiComponents: UiComponents

diff --git a/packages/generator/src/components/LeftSideBar/DragAtom/Item/index.module.css b/packages/generator/src/components/LeftSideBar/DragAtom/Item/index.module.css
@@ -4,7 +4,7 @@
     align-items: center;
     user-select: none;
     display: flex;
-    justify-content: start;
+    justify-content: flex-start;
     &:hover {
       cursor: pointer;
     }

diff --git a/packages/generator/src/components/Viewport/ActiveTools/index.module.css b/packages/generator/src/components/Viewport/ActiveTools/index.module.css
@@ -2,6 +2,14 @@
   position: absolute;
   right: 0;
   top: -22px;
-  z-index:999;
+  z-index: 999;
+  @apply flex;
+}
+
+.firstActiveTools {
+  position: absolute;
+  right: 0;
+  bottom: -22px;
+  z-index: 999;
   @apply flex;
 }
diff --git a/packages/generator/src/components/Viewport/ActiveTools/index.tsx b/packages/generator/src/components/Viewport/ActiveTools/index.tsx
@@ -1,13 +1,17 @@
 import React, { memo } from 'react'
 import { useDeleteField } from '@generator/hooks'
 import Item from './Item'
+import cx from 'classnames'
 import style from './index.module.css'
 
-const ActiveTools = memo(() => {
+const ActiveTools = memo<{
+  // 是否第一个表单元素
+  isFirst: boolean
+}>(({ isFirst = false }) => {
   const deleteField = useDeleteField()
 
   return (
-    <div className={style.activeTools}>
+    <div className={cx(isFirst ? style.firstActiveTools : style.activeTools)}>
       {/* <Item icon='xiangshang'/>
     <Item icon='xiangxia'/> */}
       {/* <Item icon="fuzhi1" /> */}

diff --git a/packages/generator/src/components/Viewport/DripFormDragHoc/index.tsx b/packages/generator/src/components/Viewport/DripFormDragHoc/index.tsx
@@ -31,6 +31,7 @@ type Props = {
   type: string
   parentType: string
   parentMode: string
+  isFirst: boolean
 }
 
 // over对应边classname
@@ -43,7 +44,15 @@ const directCls = {
 }
 
 const DripFormDragHoc: FC<Props> = memo(
-  ({ fieldKey, children, containerStyle, type, parentType, parentMode }) => {
+  ({
+    fieldKey,
+    children,
+    containerStyle,
+    type,
+    parentType,
+    parentMode,
+    isFirst,
+  }) => {
     const [ref, setRef] = useState<HTMLElement | null>(null)
     const allField = useRecoilValue(allFieldAtom)
     // 对象、数组容器为空（改变碰撞检测算法实现）
@@ -134,7 +143,7 @@ const DripFormDragHoc: FC<Props> = memo(
             width: containerStyle?.width || '100%',
           }}
         >
-          {selectedFieldKey === fieldKey && <ActiveTools />}
+          {selectedFieldKey === fieldKey && <ActiveTools isFirst={isFirst} />}
           <div
             className="draggable"
             {...listeners}

diff --git a/packages/generator/src/components/Viewport/index.tsx b/packages/generator/src/components/Viewport/index.tsx
@@ -31,6 +31,8 @@ import {
 } from '@generator/store'
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import { combine, deepClone } from '@jdfed/utils'
+import type { ContainerHoc } from '@jdfed/drip-form'
+
 const defaultInitializer = (index: number) => index
 
 export function createRange<T = number>(
@@ -87,27 +89,32 @@ const Viewport = forwardRef<HTMLDivElement, Props>(
     /**
      * 针对DripForm的Container，使用可拖拽的高阶组件进行包裹
      */
-    const containerHocFunc = useCallback((FormItem, formItemProps) => {
-      const {
-        fieldKey: currentFieldKey,
-        containerStyle,
-        type,
-        parentType,
-        parentMode,
-      } = formItemProps
-      return (
-        <DripFormDragHoc
-          key={currentFieldKey}
-          fieldKey={currentFieldKey}
-          containerStyle={containerStyle}
-          type={type}
-          parentMode={parentMode}
-          parentType={parentType}
-        >
-          {FormItem}
-        </DripFormDragHoc>
-      )
-    }, [])
+    const containerHocFunc = useCallback<ContainerHoc>(
+      (FormItem, formItemProps) => {
+        const {
+          fieldKey: currentFieldKey,
+          containerStyle,
+          type,
+          parentType,
+          parentMode,
+          isFirst,
+        } = formItemProps
+        return (
+          <DripFormDragHoc
+            key={currentFieldKey}
+            fieldKey={currentFieldKey}
+            containerStyle={containerStyle}
+            type={type}
+            parentMode={parentMode}
+            parentType={parentType}
+            isFirst={isFirst}
+          >
+            {FormItem}
+          </DripFormDragHoc>
+        )
+      },
+      []
+    )
 
     /**
      * 有序fieldKey列表，从generatorContext的order中获取，用于渲染