Add Style.translationZ

Reviewed By: kingsleyadio, zielinskimz Differential Revision: D59019787 fbshipit-source-id: 23ee8609fd97503df0863ca6b347b8d54199afc5
facebook · Jun 26, 2024 · 9857579 · 9857579
1 parent c348b66
commit 9857579
Show file tree

Hide file tree

Showing 5 changed files with 78 additions and 4 deletions.
diff --git a/litho-core/src/main/java/com/facebook/litho/Component.java b/litho-core/src/main/java/com/facebook/litho/Component.java
@@ -29,6 +29,7 @@
 import static com.facebook.litho.DynamicPropsManager.KEY_SCALE_Y;
 import static com.facebook.litho.DynamicPropsManager.KEY_TRANSLATION_X;
 import static com.facebook.litho.DynamicPropsManager.KEY_TRANSLATION_Y;
+import static com.facebook.litho.DynamicPropsManager.KEY_TRANSLATION_Z;
 
 import android.animation.AnimatorInflater;
 import android.animation.StateListAnimator;
@@ -2155,6 +2156,16 @@ public T translationY(DynamicValue<Float> value) {
       return getThis();
     }
 
+    /**
+     * Links a {@link DynamicValue} object to the translationZ value for this Component
+     *
+     * @param value controller for the translationZ value
+     */
+    public T translationZ(DynamicValue<Float> value) {
+      mComponent.getOrCreateCommonDynamicProps().put(KEY_TRANSLATION_Z, value);
+      return getThis();
+    }
+
     public T unfocusedHandler(@Nullable EventHandler<UnfocusedVisibleEvent> unfocusedHandler) {
       mComponent.getOrCreateCommonProps().unfocusedHandler(unfocusedHandler);
       return getThis();

diff --git a/litho-core/src/main/java/com/facebook/litho/DynamicPropsManager.java b/litho-core/src/main/java/com/facebook/litho/DynamicPropsManager.java
@@ -54,6 +54,7 @@ public class DynamicPropsManager implements DynamicValue.OnValueChangeListener {
   public static final int KEY_ROTATION = 8;
   public static final int KEY_BACKGROUND_DRAWABLE = 9;
   public static final int KEY_FOREGROUND_COLOR = 10;
+  public static final int KEY_TRANSLATION_Z = 11;
 
   private static final DynamicValue<?>[] sEmptyArray = new DynamicValue[0];
 
@@ -170,6 +171,14 @@ private static void resetDynamicValues(int key, Object content) {
         }
         break;
 
+      case KEY_TRANSLATION_Z:
+        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
+          if (target.getTranslationZ() != 0) {
+            target.setTranslationZ(0);
+          }
+        }
+        break;
+
       case KEY_SCALE_X:
         if (target.getScaleX() != 1) {
           target.setScaleX(1);
@@ -261,6 +270,12 @@ private static void bindCommonDynamicProp(int key, @Nullable DynamicValue<?> val
         target.setTranslationY(DynamicPropsManager.<Float>resolve(value));
         break;
 
+      case KEY_TRANSLATION_Z:
+        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
+          target.setTranslationZ(DynamicPropsManager.<Float>resolve(value));
+        }
+        break;
+
       case KEY_SCALE_X:
         target.setScaleX(DynamicPropsManager.<Float>resolve(value));
         break;

diff --git a/litho-core/src/main/java/com/facebook/litho/animated/DynamicValueStyles.kt b/litho-core/src/main/java/com/facebook/litho/animated/DynamicValueStyles.kt
@@ -30,6 +30,7 @@ import com.facebook.litho.DynamicPropsManager.KEY_SCALE_X
 import com.facebook.litho.DynamicPropsManager.KEY_SCALE_Y
 import com.facebook.litho.DynamicPropsManager.KEY_TRANSLATION_X
 import com.facebook.litho.DynamicPropsManager.KEY_TRANSLATION_Y
+import com.facebook.litho.DynamicPropsManager.KEY_TRANSLATION_Z
 import com.facebook.litho.DynamicValue
 import com.facebook.litho.Style
 import com.facebook.litho.StyleItem
@@ -48,6 +49,7 @@ internal enum class DynamicField : StyleItemField {
   SCALE_Y,
   TRANSLATION_X,
   TRANSLATION_Y,
+  TRANSLATION_Z,
 }
 
 /**
@@ -72,6 +74,7 @@ internal data class DynamicStyleItem(
       DynamicField.SCALE_Y -> commonDynamicProps.put(KEY_SCALE_Y, value)
       DynamicField.TRANSLATION_X -> commonDynamicProps.put(KEY_TRANSLATION_X, value)
       DynamicField.TRANSLATION_Y -> commonDynamicProps.put(KEY_TRANSLATION_Y, value)
+      DynamicField.TRANSLATION_Z -> commonDynamicProps.put(KEY_TRANSLATION_Z, value)
     }
   }
 }
@@ -105,3 +108,6 @@ inline fun Style.translationX(translationX: DynamicValue<Float>): Style =
 
 inline fun Style.translationY(translationY: DynamicValue<Float>): Style =
     this + DynamicStyleItem(DynamicField.TRANSLATION_Y, translationY)
+
+inline fun Style.translationZ(translationZ: DynamicValue<Float>): Style =
+    this + DynamicStyleItem(DynamicField.TRANSLATION_Z, translationZ)
diff --git a/litho-it/src/test/java/com/facebook/litho/DynamicPropsTest.kt b/litho-it/src/test/java/com/facebook/litho/DynamicPropsTest.kt
@@ -326,6 +326,32 @@ class DynamicPropsTest {
     assertThat(lithoView.elevation).isEqualTo(-50f)
   }
 
+  @Test
+  fun testDynamicTranslationZApplied() {
+    val startValue = 100f
+    val translationZDV = DynamicValue(startValue)
+    val lithoView =
+        legacyLithoViewRule
+            .attachToWindow()
+            .setRoot(
+                Column.create(context)
+                    .widthPx(80)
+                    .heightPx(80)
+                    .translationZ(translationZDV)
+                    .build())
+            .measure()
+            .layout()
+            .lithoView
+    assertThat(lithoView.childCount).isEqualTo(1)
+    val hostView = lithoView.getChildAt(0)
+    assertThat(hostView.translationZ).isEqualTo(startValue)
+    translationZDV.set(25f)
+    assertThat(hostView.translationZ).isEqualTo(25f)
+
+    lithoView.unmountAllItems()
+    assertThat(hostView.translationZ).isEqualTo(0f)
+  }
+
   @Test
   fun commonDynamicProps_unbindAndRebindContent_resetValues() {
     val stateUpdateCaller = DynamicPropsResetValueTesterSpec.Caller()

diff --git a/.../facebook/samples/litho/kotlin/animations/dynamicprops/AllCommonDynamicPropsKComponent.kt b/.../facebook/samples/litho/kotlin/animations/dynamicprops/AllCommonDynamicPropsKComponent.kt
@@ -30,6 +30,8 @@ import com.facebook.litho.animated.rotation
 import com.facebook.litho.animated.scaleX
 import com.facebook.litho.animated.scaleY
 import com.facebook.litho.animated.translationX
+import com.facebook.litho.animated.translationY
+import com.facebook.litho.animated.translationZ
 import com.facebook.litho.animated.useBinding
 import com.facebook.litho.core.height
 import com.facebook.litho.core.padding
@@ -43,7 +45,9 @@ class AllCommonDynamicPropsKComponent : KComponent() {
   override fun ComponentScope.render(): Component? {
     val scale = useBinding(1f)
     val alpha = useBinding(1f)
-    val translation = useBinding(1f)
+    val translationX = useBinding(0f)
+    val translationY = useBinding(0f)
+    val translationZ = useBinding(0f)
     val rotation = useBinding(0f)
     val elevation = useBinding(1f)
 
@@ -61,7 +65,9 @@ class AllCommonDynamicPropsKComponent : KComponent() {
                     .scaleX(scale)
                     .scaleY(scale)
                     .alpha(alpha)
-                    .translationX(translation)
+                    .translationX(translationX)
+                    .translationY(translationY)
+                    .translationZ(translationZ)
                     .rotation(rotation)
                     .elevation(elevation))
 
@@ -75,8 +81,18 @@ class AllCommonDynamicPropsKComponent : KComponent() {
       child(
           SeekBar(
               initialValue = .5f,
-              label = "Translation",
-              onProgressChanged = { translation.set(evaluate(it, -100f, 100f)) }))
+              label = "Translation X",
+              onProgressChanged = { translationX.set(evaluate(it, -100f, 100f)) }))
+      child(
+          SeekBar(
+              initialValue = .5f,
+              label = "Translation Y",
+              onProgressChanged = { translationY.set(evaluate(it, -100f, 100f)) }))
+      child(
+          SeekBar(
+              initialValue = .5f,
+              label = "Translation Z",
+              onProgressChanged = { translationZ.set(evaluate(it, -100f, 100f)) }))
       child(
           SeekBar(
               initialValue = 0f,