refactor: use hooks in Layer

packages/griffith/src/components/Layer.tsx

@@ -1,48 +1,46 @@
-import React from 'react'
+import React, {useContext} from 'react'
 import {css} from 'aphrodite/no-important'
 import PositionContext from '../contexts/PositionContext'
 import ObjectFitContext from '../contexts/ObjectFitContext'
 import styles from './Layer.styles'
 
-const getContainerClassName = (isFullWidth: any) =>
+const getContainerClassName = (isFullWidth: boolean) =>
   css(
     styles.container,
     isFullWidth ? styles.containerFullWidth : styles.containerFullHeight
   )
 
-const getImageClassName = (isFullWidth: any) =>
+const getImageClassName = (isFullWidth: boolean) =>
   css(
     styles.image,
     isFullWidth ? styles.imageFullWidth : styles.imageFullHeight
   )
 
-const Positioned = ({children}: any) => (
-  <PositionContext.Consumer>
-    {({isFullWidth, helperImageSrc}) =>
-      helperImageSrc && (
-        <div className={getContainerClassName(isFullWidth)}>
-          <img
-            src={helperImageSrc}
-            className={getImageClassName(isFullWidth)}
-          />
-          {children}
-        </div>
-      )
-    }
-  </PositionContext.Consumer>
-)
-
-export default function Layer({children}: any) {
-  if (!children) return null
-
-  const layer = <div className={css(styles.layer)}>{children}</div>
-
-  // 暂时先只考虑 cover
-  return (
-    <ObjectFitContext.Consumer>
-      {({objectFit}) =>
-        objectFit === 'cover' ? layer : <Positioned>{layer}</Positioned>
-      }
-    </ObjectFitContext.Consumer>
-  )
+const Positioned: React.FC = ({children}) => {
+  const {isFullWidth, helperImageSrc} = useContext(PositionContext)
+
+  if (helperImageSrc) {
+    return (
+      <div className={getContainerClassName(isFullWidth)}>
+        <img src={helperImageSrc} className={getImageClassName(isFullWidth)} />
+        {children}
+      </div>
+    )
+  }
+
+  return null
+}
+
+const Layer: React.FC = ({children}) => {
+  const {objectFit} = useContext(ObjectFitContext)
+
+  if (children) {
+    const layer = <div className={css(styles.layer)}>{children}</div>
+    // 暂时先只考虑 cover
+    return objectFit === 'cover' ? layer : <Positioned>{layer}</Positioned>
+  }
+
+  return null
 }
+
+export default Layer

packages/griffith/src/components/__tests__/__snapshots__/Layer.spec.tsx.snap

@@ -1,7 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Layer get Layer component 1`] = `
-<ContextConsumer>
-  <Component />
-</ContextConsumer>
+<Positioned>
+  <div
+    className="layer_120lr3k"
+  >
+    <span>
+      123
+    </span>
+  </div>
+</Positioned>
 `;