chore(antd/next): revert editable

alibaba · Feb 14, 2022 · 16a376d · 16a376d
1 parent 98e450e
commit 16a376d
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 52 deletions.
diff --git a/packages/antd/src/editable/index.tsx b/packages/antd/src/editable/index.tsx
@@ -1,10 +1,4 @@
-import React, {
-  useEffect,
-  useMemo,
-  useLayoutEffect,
-  useRef,
-  useState,
-} from 'react'
+import React, { useLayoutEffect, useRef, useState } from 'react'
 import { isVoidField, Field } from '@formily/core'
 import { useField, observer } from '@formily/react'
 import { Popover } from 'antd'
@@ -23,13 +17,13 @@ type ComposedEditable = React.FC<IFormItemProps> & {
   Popover?: React.FC<IPopoverProps & { title?: React.ReactNode }>
 }
 
-const useInitialPattern = () => {
+const useParentPattern = () => {
   const field = useField<Field>()
-  return useMemo(() => field?.pattern, [])
+  return field?.parent?.pattern || field?.form?.pattern
 }
 
-const useEditable = (): [boolean, (editable: boolean) => void, () => void] => {
-  const pattern = useInitialPattern()
+const useEditable = (): [boolean, (payload: boolean) => void] => {
+  const pattern = useParentPattern()
   const field = useField<Field>()
   useLayoutEffect(() => {
     if (pattern === 'editable') {
@@ -42,9 +36,6 @@ const useEditable = (): [boolean, (editable: boolean) => void, () => void] => {
       if (pattern !== 'editable') return
       field.setPattern(payload ? 'editable' : 'readPretty')
     },
-    () => {
-      field.setPattern(pattern)
-    },
   ]
 }
 
@@ -67,15 +58,15 @@ const useFormItemProps = (): IFormItemProps => {
 }
 
 export const Editable: ComposedEditable = observer((props) => {
-  const [editable, setEditable, resetEditable] = useEditable()
-  const pattern = useInitialPattern()
+  const [editable, setEditable] = useEditable()
+  const pattern = useParentPattern()
   const itemProps = useFormItemProps()
   const field = useField<Field>()
   const basePrefixCls = usePrefixCls()
   const prefixCls = usePrefixCls('formily-editable')
   const ref = useRef<boolean>()
   const innerRef = useRef<HTMLDivElement>()
-  const closeEditable = () => {
+  const recover = () => {
     if (ref.current && !field?.errors?.length) {
       setEditable(false)
     }
@@ -87,6 +78,9 @@ export const Editable: ComposedEditable = observer((props) => {
         {pattern === 'editable' && (
           <EditOutlined className={`${prefixCls}-edit-btn`} />
         )}
+        {pattern !== 'editable' && (
+          <MessageOutlined className={`${prefixCls}-edit-btn`} />
+        )}
       </BaseItem>
     )
   }
@@ -105,14 +99,14 @@ export const Editable: ComposedEditable = observer((props) => {
     if (target?.closest(`.${basePrefixCls}-select-dropdown`)) return
     if (target?.closest(`.${basePrefixCls}-picker-dropdown`)) return
     if (target?.closest(`.${basePrefixCls}-cascader-menus`)) return
-    closeEditable()
+    recover()
   }, innerRef)
 
   const onClick = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
     const target = e.target as HTMLElement
     const close = innerRef.current.querySelector(`.${prefixCls}-close-btn`)
     if (target?.contains(close) || close?.contains(target)) {
-      closeEditable()
+      recover()
     } else if (!ref.current) {
       setTimeout(() => {
         setEditable(true)
@@ -125,10 +119,6 @@ export const Editable: ComposedEditable = observer((props) => {
 
   ref.current = editable
 
-  useEffect(() => {
-    return resetEditable
-  }, [])
-
   return (
     <div className={prefixCls} ref={innerRef} onClick={onClick}>
       <div className={`${prefixCls}-content`}>
@@ -144,7 +134,7 @@ export const Editable: ComposedEditable = observer((props) => {
 
 Editable.Popover = observer((props) => {
   const field = useField<Field>()
-  const pattern = useInitialPattern()
+  const pattern = useParentPattern()
   const [visible, setVisible] = useState(false)
   const prefixCls = usePrefixCls('formily-editable')
   const closePopover = async () => {

diff --git a/packages/next/src/editable/index.tsx b/packages/next/src/editable/index.tsx
@@ -1,10 +1,4 @@
-import React, {
-  useLayoutEffect,
-  useMemo,
-  useEffect,
-  useRef,
-  useState,
-} from 'react'
+import React, { useLayoutEffect, useRef, useState } from 'react'
 import { isVoidField, Field } from '@formily/core'
 import { useField, observer } from '@formily/react'
 import { Balloon } from '@alifd/next'
@@ -27,27 +21,24 @@ type ComposedEditable = React.FC<IFormItemProps> & {
   Popover?: React.FC<IPopoverProps & { title?: React.ReactNode }>
 }
 
-const useInitialPattern = () => {
+const useParentPattern = () => {
   const field = useField<Field>()
-  return useMemo(() => field?.pattern, [])
+  return field?.parent?.pattern || field?.form?.pattern
 }
 
-const useEditable = (): [boolean, (editable: boolean) => void, () => void] => {
-  const pattern = useInitialPattern()
+const useEditable = (): [boolean, (payload: boolean) => void] => {
+  const pattern = useParentPattern()
   const field = useField<Field>()
   useLayoutEffect(() => {
     if (pattern === 'editable') {
-      return field.setPattern('readPretty')
+      field.setPattern('readPretty')
     }
   }, [pattern])
   return [
     field.pattern === 'editable',
-    (payload: boolean) => {
+    (pyaload: boolean) => {
       if (pattern !== 'editable') return
-      field.setPattern(payload ? 'editable' : 'readPretty')
-    },
-    () => {
-      field.setPattern(pattern)
+      field.setPattern(pyaload ? 'editable' : 'readPretty')
     },
   ]
 }
@@ -71,15 +62,15 @@ const useFormItemProps = (): IFormItemProps => {
 }
 
 export const Editable: ComposedEditable = observer((props) => {
-  const [editable, setEditable, resetEditable] = useEditable()
-  const pattern = useInitialPattern()
+  const [editable, setEditable] = useEditable()
+  const pattern = useParentPattern()
   const itemProps = useFormItemProps()
   const field = useField<Field>()
   const basePrefixCls = usePrefixCls()
   const prefixCls = usePrefixCls('formily-editable')
   const ref = useRef<boolean>()
   const innerRef = useRef<HTMLDivElement>()
-  const closeEditable = () => {
+  const recover = () => {
     if (ref.current && !field?.errors?.length) {
       setEditable(false)
     }
@@ -91,6 +82,9 @@ export const Editable: ComposedEditable = observer((props) => {
         {pattern === 'editable' && (
           <EditOutlinedIcon className={`${prefixCls}-edit-btn`} />
         )}
+        {pattern !== 'editable' && (
+          <MessageOutlinedIcon className={`${prefixCls}-edit-btn`} />
+        )}
       </BaseItem>
     )
   }
@@ -107,14 +101,14 @@ export const Editable: ComposedEditable = observer((props) => {
   useClickAway((e) => {
     const target = e.target as HTMLElement
     if (target?.closest(`.${basePrefixCls}-overlay-wrapper`)) return
-    closeEditable()
+    recover()
   }, innerRef)
 
   const onClick = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
     const target = e.target as HTMLElement
     const close = innerRef.current.querySelector(`.${prefixCls}-close-btn`)
     if (target?.contains(close) || close?.contains(target)) {
-      closeEditable()
+      recover()
     } else if (!ref.current) {
       setTimeout(() => {
         setEditable(true)
@@ -125,10 +119,6 @@ export const Editable: ComposedEditable = observer((props) => {
     }
   }
 
-  useEffect(() => {
-    return resetEditable
-  }, [])
-
   ref.current = editable
 
   return (
@@ -144,9 +134,9 @@ export const Editable: ComposedEditable = observer((props) => {
   )
 })
 
-Editable.Popover = observer(({ ...props }) => {
+Editable.Popover = observer((props) => {
   const field = useField<Field>()
-  const pattern = useInitialPattern()
+  const pattern = useParentPattern()
   const [visible, setVisible] = useState(false)
   const prefixCls = usePrefixCls('formily-editable')
   const closePopover = async () => {