fix: change Editable render

formilyjs · Jul 22, 2022 · e0ba15f · e0ba15f
1 parent 6ca8bb7
commit e0ba15f
Showing 1 changed file with 25 additions and 30 deletions.
diff --git a/packages/components/src/editable/index.ts b/packages/components/src/editable/index.ts
@@ -21,7 +21,7 @@ export type EditableProps = FormItemProps
 
 const useInitialPattern = (fieldRef) => {
   const field = fieldRef.value
-  return computed(() => field?.pattern)
+  return computed(() => field?.parent?.pattern || field?.form?.pattern)
 }
 
 const useFormItemProps = (fieldRef): FormItemProps => {
@@ -49,16 +49,18 @@ const EditableInner = observer(
     setup(props, { attrs, slots }) {
       const fieldRef = useField<Field>()
       const innerRef = ref(document.body)
-      const pattern = useInitialPattern(fieldRef)
       const prefixCls = `${stylePrefix}-editable`
       const setEditable = (payload: boolean) => {
+        const pattern = useInitialPattern(fieldRef)
         // console.log('pattern', pattern)
         if (pattern.value !== 'editable') return
         fieldRef.value.setPattern(payload ? 'editable' : 'readPretty')
       }
 
       const dispose = reaction(
         () => {
+          const pattern = useInitialPattern(fieldRef)
+
           return pattern
         },
         (pattern) => {
@@ -72,15 +74,16 @@ const EditableInner = observer(
       )
 
       onBeforeUnmount(() => {
-        const field = fieldRef.value
-        field.setPattern(pattern.value)
+        // const field = fieldRef.value
+        // field.setPattern(pattern.value)
         dispose()
       })
 
       return () => {
         const field = fieldRef.value
         const editable = field.pattern === 'editable'
         const itemProps = useFormItemProps(fieldRef)
+        const pattern = useInitialPattern(fieldRef)
 
         const closeEditable = () => {
           if (editable && !fieldRef.value?.errors?.length) {
@@ -133,9 +136,7 @@ const EditableInner = observer(
           return h(
             FormBaseItem,
             {
-              attrs: {
-                ...attrs,
-              },
+              ...attrs,
             },
             {
               default: () => {
@@ -155,33 +156,27 @@ const EditableInner = observer(
           'div',
           {
             class: prefixCls,
-            ref: 'innerRef',
+            ref: innerRef,
             onClick: onClick,
           },
-          {
-            default: () => {
-              return h(
-                'div',
+          h(
+            'div',
+            {
+              class: `${prefixCls}-content`,
+            },
+            [
+              h(
+                FormBaseItem,
                 {
-                  class: `${prefixCls}-content`,
+                  ...attrs,
+                  ...itemProps,
                 },
-                {
-                  default: () => [
-                    h(
-                      FormBaseItem,
-                      {
-                        ...attrs,
-                        ...itemProps,
-                      },
-                      slots
-                    ),
-                    renderEditHelper(),
-                    renderCloseHelper(),
-                  ],
-                }
-              )
-            },
-          }
+                slots
+              ),
+              renderEditHelper(),
+              renderCloseHelper(),
+            ]
+          )
         )
       }
     },