com.facebook.yoga.YogaEdge Java Examples

@Test
public void testSettingMultipleEdgesIncreasesTheArray() {
  mEdges.set(YogaEdge.TOP, 1);
  mEdges.set(YogaEdge.LEFT, 2);
  mEdges.set(YogaEdge.ALL, 5);

  long bits = ~0;
  bits &= ~((long) (0xF) << (YogaEdge.TOP.intValue() * 4));
  bits &= ~((long) (0xF) << (YogaEdge.LEFT.intValue() * 4));
  bits &= ~((long) (0xF) << (YogaEdge.ALL.intValue() * 4));
  bits |= ((long) 0 << (YogaEdge.TOP.intValue() * 4));
  bits |= ((long) 1 << (YogaEdge.LEFT.intValue() * 4));
  bits |= ((long) 2 << (YogaEdge.ALL.intValue() * 4));
  assertThat(getEdgesToValuesIndex()).isEqualTo(bits);

  assertThat(getValuesArray().length).isEqualTo(4);
  assertThat(getValuesArray()[0]).isEqualTo(1);
  assertThat(getValuesArray()[1]).isEqualTo(2);
  assertThat(getValuesArray()[2]).isEqualTo(5);
  assertThat(getValuesArray()[3]).isNaN();
}
 

@Test
public void testFullImpressionEvent() {
  final TestComponent content = create(mContext).build();
  final EventHandler<FullImpressionVisibleEvent> fullImpressionVisibleEvent =
      new EventHandler<>(content, 2);

  mountComponent(
      mContext,
      mLithoView,
      Column.create(mContext)
          .child(
              Wrapper.create(mContext)
                  .delegate(content)
                  .fullImpressionHandler(fullImpressionVisibleEvent)
                  .widthPx(10)
                  .heightPx(5)
                  .marginPx(YogaEdge.TOP, 5))
          .build(),
      true,
      true,
      10,
      10);

  assertThat(content.getDispatchedEventHandlers()).contains(fullImpressionVisibleEvent);
}
 

@Test
public void testFullImpressionEvent() {
  final TestComponent content = create(mContext).build();
  final EventHandler<FullImpressionVisibleEvent> fullImpressionVisibleEvent =
      new EventHandler<>(content, 2);
  final Component root =
      Column.create(mContext)
          .child(
              Wrapper.create(mContext)
                  .delegate(content)
                  .fullImpressionHandler(fullImpressionVisibleEvent)
                  .widthPx(10)
                  .heightPx(5)
                  .marginPx(YogaEdge.TOP, 5))
          .build();
  mLithoViewRule
      .setRoot(root)
      .attachToWindow()
      .setSizeSpecs(makeSizeSpec(10, EXACTLY), makeSizeSpec(10, EXACTLY))
      .measure()
      .layout();

  assertThat(content.getDispatchedEventHandlers()).contains(fullImpressionVisibleEvent);
}
 

@OnCreateLayout
static Component onCreateLayout(
    ComponentContext c,
    @Prop String messageText,
    @Prop String timestamp,
    @Prop(optional = true) boolean seen,
    @State Boolean expanded) {
  final boolean isExpanded = expanded == null ? false : expanded;
  return Column.create(c)
      .paddingDip(YogaEdge.TOP, 8)
      .transitionKey(ExpandableElementUtil.TRANSITION_MSG_PARENT)
      .transitionKeyType(Transition.TransitionKeyType.GLOBAL)
      .clickHandler(ExpandableElementOther.onClick(c))
      .child(ExpandableElementUtil.maybeCreateTopDetailComponent(c, isExpanded, timestamp))
      .child(
          Column.create(c)
              .transitionKey(ExpandableElementUtil.TRANSITION_TEXT_MESSAGE_WITH_BOTTOM)
              .transitionKeyType(Transition.TransitionKeyType.GLOBAL)
              .child(
                  Row.create(c)
                      .paddingDip(YogaEdge.END, 5)
                      .child(createSenderTile(c))
                      .child(createMessageContent(c, messageText)))
              .child(ExpandableElementUtil.maybeCreateBottomDetailComponent(c, isExpanded, seen)))
      .build();
}
 

@Test
public void testInsertingOneEdgeMultipleTimes() {
  mEdges.set(YogaEdge.TOP, 1);
  mEdges.set(YogaEdge.TOP, 2);
  mEdges.set(YogaEdge.TOP, 3);
  mEdges.set(YogaEdge.TOP, 4);
  mEdges.set(YogaEdge.TOP, 5);

  long bits = ~0;
  bits &= ~((long) (0xF) << (YogaEdge.TOP.intValue() * 4));
  bits |= ((long) 0 << (YogaEdge.TOP.intValue() * 4));
  assertThat(getEdgesToValuesIndex()).isEqualTo(bits);

  assertThat(getValuesArray().length).isEqualTo(2);
  assertThat(getValuesArray()[0]).isEqualTo(5);
  assertThat(YogaConstants.isUndefined(getValuesArray()[1])).isTrue();
}
 

@Test
public void testPaddingFromDrawableIsOverwritten() {
  final InternalNode node = spy(new DefaultInternalNode(mComponentContext));

  mCommonProps.background(
      ContextCompat.getDrawable(mComponentContext.getAndroidContext(), background_with_padding));
  mCommonProps.paddingPx(YogaEdge.LEFT, 0);
  mCommonProps.paddingPx(YogaEdge.TOP, 0);
  mCommonProps.paddingPx(YogaEdge.RIGHT, 0);
  mCommonProps.paddingPx(YogaEdge.BOTTOM, 0);

  mCommonProps.copyInto(mComponentContext, node);

  InOrder inOrder = Mockito.inOrder(node);
  inOrder.verify(node).paddingPx(YogaEdge.LEFT, 48);
  inOrder.verify(node).paddingPx(YogaEdge.LEFT, 0);

  verify(node, times(2)).paddingPx(YogaEdge.TOP, 0);
  verify(node, times(2)).paddingPx(YogaEdge.RIGHT, 0);
  verify(node, times(2)).paddingPx(YogaEdge.BOTTOM, 0);
}
 

private static Component affectedParent(ComponentContext c, boolean flag3) {
  return Row.create(c)
      .justifyContent(YogaJustify.CENTER)
      .child(
          Row.create(c)
              .transitionKey(TRANSITION_KEY_CONTAINER_3)
              .transitionKeyType(Transition.TransitionKeyType.GLOBAL)
              .heightDip(60 + 2 * 8)
              .paddingDip(YogaEdge.ALL, 8)
              .backgroundColor(Color.LTGRAY)
              .child(
                  Column.create(c)
                      .transitionKey(TRANSITION_KEY_CHILD_3_1)
                      .transitionKeyType(Transition.TransitionKeyType.GLOBAL)
                      .widthDip(60 * (flag3 ? 1 : 2))
                      .backgroundColor(Color.YELLOW))
              .clickHandler(BoundsAnimationComponent.onThirdComponentClick(c)))
      .build();
}
 

@OnCreateLayout
static Component onCreateLayout(ComponentContext c, @Prop ListRow row) {
  return Column.create(c)
      .paddingDip(YogaEdge.VERTICAL, 8)
      .paddingDip(YogaEdge.HORIZONTAL, 32)
      .child(
          Card.create(c)
              .content(
                  Column.create(c)
                      .marginDip(YogaEdge.ALL, 32)
                      .child(TitleComponent.create(c).title(row.title))
                      .child(PossiblyCrashingSubTitleComponent.create(c).subtitle(row.subtitle))
                      .build())
              .build())
      .build();
}
 

static YogaEdge edgeFromIndex(int i) {
  if (i < 0 || i >= EDGE_COUNT) {
    throw new IllegalArgumentException("Given index out of range of acceptable edges: " + i);
  }
  switch (i) {
    case EDGE_LEFT:
      return YogaEdge.LEFT;
    case EDGE_TOP:
      return YogaEdge.TOP;
    case EDGE_RIGHT:
      return YogaEdge.RIGHT;
    case EDGE_BOTTOM:
      return YogaEdge.BOTTOM;
  }
  throw new IllegalArgumentException("Given unknown edge index: " + i);
}
 

@OnCreateLayout
static Component onCreateLayout(
    ComponentContext c,
    @State DynamicValue<Float> translationX,
    @State DynamicValue<Float> translationY) {
  return Column.create(c)
      .alignItems(YogaAlign.CENTER)
      .justifyContent(YogaJustify.CENTER)
      .paddingDip(YogaEdge.ALL, 50)
      .child(
          // Create the component we will animate. Apply the DynamicValues to it.
          Text.create(c)
              .text("\u26BE")
              .textSizeSp(50)
              .translationX(translationX)
              .translationY(translationY))
      .visibleHandler(ContinuousExampleComponent.onVisible(c))
      .build();
}
 

@OnCreateLayout
static Component onCreateLayout(
    ComponentContext c,
    @State RecyclerCollectionEventsController recyclerEventsController,
    @State DynamicValue<Float> handleTranslation,
    @State ScrollController scrollController) {
  return Column.create(c)
      .backgroundColor(Color.WHITE)
      .child(
          RecyclerCollectionComponent.create(c)
              .positionType(YogaPositionType.ABSOLUTE)
              .positionPx(YogaEdge.ALL, 0)
              .section(CountriesListSection.create(new SectionContext(c)).build())
              .onScrollListener(scrollController)
              .eventsController(recyclerEventsController)
              .disablePTR(true))
      .child(
          buildDragHandle(c)
              .positionType(YogaPositionType.ABSOLUTE)
              .positionDip(YogaEdge.RIGHT, HANDLE_RIGHT_MARGIN)
              .positionDip(YogaEdge.TOP, HANDLE_VERTICAL_MARGIN)
              .translationY(handleTranslation)
              .touchHandler(FastScrollHandleComponent.onTouchEvent(c)))
      .build();
}
 

@Test
public void onTouchEventWithinBounds_shouldBeHandled() {
  final ClickListenerCallback callback = new ClickListenerCallback();
  final Component component =
      Column.create(mContext)
          .child(
              OnClickCallbackComponent.create(mContext)
                  .widthPx(10)
                  .heightPx(10)
                  .callback(callback)
                  .touchExpansionPx(YogaEdge.ALL, 5))
          .paddingPx(YogaEdge.ALL, 10)
          .build();

  mLithoViewRule.setRoot(component).attachToWindow().measure().layout();

  emulateClickEvent(mLithoViewRule.getLithoView(), 7, 7);

  assertThat(callback.handled)
      .describedAs("TouchEvent within bounds bounds should be handled")
      .isTrue();

  assertThat(callback.count)
      .describedAs("TouchEvent within bounds bounds should be handled only once")
      .isEqualTo(1);
}
 

@Test
public void testVerticalWidthSetting() {
  final ComponentContext c = new ComponentContext(getApplicationContext());
  Border border = Border.create(c).widthPx(YogaEdge.ALL, 1).widthPx(YogaEdge.VERTICAL, 5).build();
  assertThat(border.mEdgeWidths[Border.EDGE_LEFT]).isEqualTo(1);
  assertThat(border.mEdgeWidths[Border.EDGE_TOP]).isEqualTo(5);
  assertThat(border.mEdgeWidths[Border.EDGE_RIGHT]).isEqualTo(1);
  assertThat(border.mEdgeWidths[Border.EDGE_BOTTOM]).isEqualTo(5);
}
 

@Test
public void testVisibleRectChangedEventItemNotVisible() {
  final TestComponent content = create(mContext).build();
  final EventHandler<VisibilityChangedEvent> visibilityChangedHandler =
      new EventHandler<>(content, 3);

  final LithoView lithoView =
      mountComponent(
          mContext,
          mLithoView,
          Column.create(mContext)
              .child(
                  Wrapper.create(mContext)
                      .delegate(content)
                      .visibilityChangedHandler(visibilityChangedHandler)
                      .widthPx(10)
                      .heightPx(5)
                      .marginPx(YogaEdge.TOP, 5))
              .build(),
          true,
          true,
          10,
          10);

  content.getDispatchedEventHandlers().clear();

  lithoView.notifyVisibleBoundsChanged(new Rect(LEFT, 0, RIGHT, 5), true);
  assertThat(content.getDispatchedEventHandlers()).contains(visibilityChangedHandler);

  VisibilityChangedEvent visibilityChangedEvent =
      (VisibilityChangedEvent) content.getEventState(visibilityChangedHandler);

  assertThat(visibilityChangedEvent.visibleHeight).isEqualTo(0);
  assertThat(visibilityChangedEvent.visibleWidth).isEqualTo(0);
  assertThat(visibilityChangedEvent.percentVisibleHeight).isEqualTo(0.0f);
  assertThat(visibilityChangedEvent.percentVisibleWidth).isEqualTo(0.0f);
}
 

@OnCreateLayout
static Component onCreateLayout(ComponentContext c, @Prop List<ListRow> dataModels) {

  return RecyclerCollectionComponent.create(c)
      .disablePTR(true)
      .section(
          DataDiffSection.<ListRow>create(new SectionContext(c))
              .data(dataModels)
              .renderEventHandler(ErrorRootComponent.onRender(c))
              .build())
      .paddingDip(YogaEdge.TOP, 8)
      .build();
}
 

public float get(YogaEdge edge) {
  float defaultValue =
      (edge == YogaEdge.START || edge == YogaEdge.END ? YogaConstants.UNDEFINED : DEFAULT_VALUE);

  // Nothing is set.
  if (mEdgesToValuesIndex == ~0) {
    return defaultValue;
  }

  final byte edgeIndex = getIndex(edge.intValue());
  if (edgeIndex != UNDEFINED_INDEX) {
    return mValues[edgeIndex];
  }

  if (mHasAliasesSet) {
    final int secondTypeEdgeValue =
        edge == YogaEdge.TOP || edge == YogaEdge.BOTTOM ? VERTICAL_INTVALUE : HORIZONTAL_INTVALUE;
    final byte secondTypeEdgeIndex = getIndex(secondTypeEdgeValue);

    if (secondTypeEdgeIndex != UNDEFINED_INDEX) {
      return mValues[secondTypeEdgeIndex];

    } else if (getIndex(ALL_INTVALUE) != UNDEFINED_INDEX) {
      return mValues[getIndex(ALL_INTVALUE)];
    }
  }

  return defaultValue;
}
 

@Override
public int getTouchExpansionRight() {
  if (!shouldApplyTouchExpansion()) {
    return 0;
  }

  if (YogaConstants.isUndefined(mResolvedTouchExpansionRight)) {
    mResolvedTouchExpansionRight = resolveHorizontalEdges(mTouchExpansion, YogaEdge.RIGHT);
  }

  return FastMath.round(mResolvedTouchExpansionRight);
}
 

private static Component getStatsText(ComponentContext c, String text) {
  return Text.create(c)
      .textSizeSp(12)
      .paddingDip(YogaEdge.BOTTOM, 4)
      .textColor(Color.DKGRAY)
      .textStyle(Typeface.ITALIC)
      .typeface(Typeface.MONOSPACE)
      .text(text)
      .build();
}
 

@OnCreateLayout
static Component onCreateLayout(ComponentContext c) {
  return Row.create(c)
      .child(
          Text.create(c)
              .textSizeSp(20)
              .text("This component has all borders specified to the same color + width"))
      .border(
          Border.create(c).color(YogaEdge.ALL, NiceColor.BLUE).widthDip(YogaEdge.ALL, 5).build())
      .build();
}
 

@Test
public void testVisibleEvent() {
  final TestComponent content = create(mContext).build();
  final EventHandler<VisibleEvent> visibleEventHandler = new EventHandler<>(content, 2);

  final LithoView lithoView =
      mountComponent(
          mContext,
          mLithoView,
          Column.create(mContext)
              .child(
                  Wrapper.create(mContext)
                      .delegate(content)
                      .visibleHandler(visibleEventHandler)
                      .widthPx(10)
                      .heightPx(5)
                      .marginPx(YogaEdge.TOP, 5))
              .build(),
          true,
          true,
          10,
          5);

  assertThat(content.getDispatchedEventHandlers()).doesNotContain(visibleEventHandler);

  lithoView.notifyVisibleBoundsChanged(new Rect(LEFT, 0, RIGHT, 10), true);
  assertThat(content.getDispatchedEventHandlers()).contains(visibleEventHandler);
}
 

@OnEvent(RenderEvent.class)
static RenderInfo onRender(final SectionContext c, @FromEvent Uri model) {
  return ComponentRenderInfo.create()
      .component(
          FrescoVitoImage2.create(c)
              .uri(model)
              .imageOptions(IMAGE_OPTIONS)
              .paddingDip(YogaEdge.ALL, 2))
      .build();
}
 

@Test
public void testIndividualColorSetting() {
  final ComponentContext c = new ComponentContext(getApplicationContext());
  Border border =
      Border.create(c)
          .color(YogaEdge.LEFT, 0xFFFF0000)
          .color(YogaEdge.TOP, 0xFFFFFF00)
          .color(YogaEdge.RIGHT, 0xFFFFFFFF)
          .color(YogaEdge.BOTTOM, 0xFFFF00FF)
          .build();
  assertThat(border.mEdgeColors[Border.EDGE_LEFT]).isEqualTo(0xFFFF0000);
  assertThat(border.mEdgeColors[Border.EDGE_TOP]).isEqualTo(0xFFFFFF00);
  assertThat(border.mEdgeColors[Border.EDGE_RIGHT]).isEqualTo(0xFFFFFFFF);
  assertThat(border.mEdgeColors[Border.EDGE_BOTTOM]).isEqualTo(0xFFFF00FF);
}
 

@OnCreateLayout
static Component onCreateLayout(ComponentContext c, @Prop List<Datum> dataModels) {

  return RecyclerCollectionComponent.create(c)
      .disablePTR(true)
      .section(
          DataDiffSection.<Datum>create(new SectionContext(c))
              .data(dataModels)
              .renderEventHandler(LithographyRootComponent.onRender(c))
              .build())
      .paddingDip(YogaEdge.TOP, 8)
      .testKey(MAIN_SCREEN)
      .build();
}
 

@OnCreateLayout
static Component onCreateLayout(
    ComponentContext c,
    @Prop final Decade decade) {
  return Row.create(c)
      .alignItems(YogaAlign.CENTER)
      .paddingDip(YogaEdge.ALL, 16)
      .child(
          Row.create(c)
              .heightPx(1)
              .backgroundColor(0xFFAAAAAA)
              .flex(1))
      .child(
          Text.create(c)
              .text(String.valueOf(decade.year))
              .textSizeDip(14)
              .textColor(0xFFAAAAAA)
              .marginDip(YogaEdge.HORIZONTAL, 10)
              .flex(0))
      .child(
          Row.create(c)
              .heightPx(1)
              .backgroundColor(0xFFAAAAAA)
              .flex(1))
      .backgroundColor(0xFFFAFAFA)
      .build();
}
 

@Override
public void paddingPercent(YogaEdge edge, float percent) {
  mPrivateFlags |= PFLAG_PADDING_IS_SET;
  if (mNestedTreeProps != null && mNestedTreeProps.mIsNestedTreeHolder) {
    getNestedTreePadding().set(edge, percent);
    setIsPaddingPercent(edge, true);
  } else {
    mYogaNode.setPaddingPercent(edge, percent);
  }
}
 

@OnCreateLayout
static Component onCreateLayout(
    ComponentContext c,
    @Prop String messageText,
    @Prop String timestamp,
    @Prop(optional = true) boolean seen,
    @State Boolean expanded) {
  final boolean isExpanded = expanded == null ? false : expanded;
  return Column.create(c)
      .paddingDip(YogaEdge.TOP, 8)
      .transitionKey(TRANSITION_MSG_PARENT)
      .transitionKeyType(Transition.TransitionKeyType.GLOBAL)
      .clickHandler(ExpandableElementMe.onClick(c))
      .child(ExpandableElementUtil.maybeCreateTopDetailComponent(c, isExpanded, timestamp))
      .child(
          Column.create(c)
              .transitionKey(ExpandableElementUtil.TRANSITION_TEXT_MESSAGE_WITH_BOTTOM)
              .transitionKeyType(Transition.TransitionKeyType.GLOBAL)
              .child(
                  Row.create(c)
                      .justifyContent(YogaJustify.FLEX_END)
                      .paddingDip(YogaEdge.START, 75)
                      .paddingDip(YogaEdge.END, 5)
                      .child(createMessageContent(c, messageText)))
              .child(ExpandableElementUtil.maybeCreateBottomDetailComponent(c, isExpanded, seen)))
      .build();
}
 

@OnCreateLayout
public static Component onCrateLayout(
    ComponentContext c,
    @State int selectedPage,
    @State int firstVisibleIndex,
    @State int movingDirection) {
  final String title = (selectedPage + 1) + "/" + PAGES_COUNT;
  return Column.create(c)
      .alignItems(YogaAlign.CENTER)
      .justifyContent(YogaJustify.CENTER)
      .child(Text.create(c).textSizeDip(20).text(title))
      .child(
          Row.create(c)
              .alignSelf(YogaAlign.STRETCH)
              .justifyContent(YogaJustify.SPACE_BETWEEN)
              .child(
                  Text.create(c)
                      .paddingDip(YogaEdge.ALL, 12)
                      .textSizeDip(20)
                      .text("Prev")
                      .clickHandler(PageIndicatorsRootComponent.onPrevClick(c)))
              .child(
                  PageIndicators.create(c)
                      .size(PAGES_COUNT)
                      .selectedIndex(selectedPage)
                      .firstVisibleIndex(firstVisibleIndex)
                      .movingDirection(movingDirection))
              .child(
                  Text.create(c)
                      .paddingDip(YogaEdge.ALL, 12)
                      .textSizeDip(20)
                      .text("Next")
                      .clickHandler(PageIndicatorsRootComponent.onNextClick(c))))
      .build();
}
 

@Test
public void testVisibleEvent() {
  final TestComponent content = create(mContext).build();
  final EventHandler<VisibleEvent> visibleEventHandler = new EventHandler<>(content, 2);

  final Component root =
      Column.create(mContext)
          .child(
              Wrapper.create(mContext)
                  .delegate(content)
                  .visibleHandler(visibleEventHandler)
                  .widthPx(10)
                  .heightPx(5)
                  .marginPx(YogaEdge.TOP, 5))
          .build();

  mLithoViewRule
      .setRoot(root)
      .attachToWindow()
      .setSizeSpecs(makeSizeSpec(10, EXACTLY), makeSizeSpec(5, EXACTLY))
      .measure()
      .layout();

  assertThat(content.getDispatchedEventHandlers()).doesNotContain(visibleEventHandler);

  mLithoView.notifyVisibleBoundsChanged(new Rect(LEFT, 0, RIGHT, 10), true);
  assertThat(content.getDispatchedEventHandlers()).contains(visibleEventHandler);
}
 

private static PopupWindow createTooltip(final ComponentContext c, final String text) {
  final LithoView tooltip =
      LithoView.create(
          c,
          Column.create(c)
              .paddingDip(YogaEdge.ALL, 15)
              .backgroundColor(LITHO_PINK)
              .child(Text.create(c).text(text).textColor(Color.WHITE))
              .build());
  return new PopupWindow(
      tooltip,
      LinearLayout.LayoutParams.WRAP_CONTENT,
      LinearLayout.LayoutParams.WRAP_CONTENT,
      true);
}
 

@OnCreateLayout
static Component onCreateLayout(
    ComponentContext c, @State List<Message> messages, @State int counter) {
  return Column.create(c)
      .child(
          Row.create(c)
              .backgroundColor(Color.LTGRAY)
              .child(
                  Text.create(c)
                      .paddingDip(YogaEdge.ALL, 10)
                      .text("INSERT")
                      .textSizeSp(20)
                      .flexGrow(1)
                      .alignSelf(YogaAlign.CENTER)
                      .testKey("INSERT")
                      .alignment(TextAlignment.CENTER)
                      .clickHandler(ExpandableElementRootComponent.onClick(c, true)))
              .child(
                  Text.create(c)
                      .paddingDip(YogaEdge.ALL, 10)
                      .text("DELETE")
                      .textSizeSp(20)
                      .flexGrow(1)
                      .alignSelf(YogaAlign.CENTER)
                      .alignment(TextAlignment.CENTER)
                      .clickHandler(ExpandableElementRootComponent.onClick(c, false))))
      .child(
          RecyclerCollectionComponent.create(c)
              .flexGrow(1)
              .disablePTR(true)
              .itemAnimator(new NotAnimatedItemAnimator())
              .section(
                  DataDiffSection.<Message>create(new SectionContext(c))
                      .data(messages)
                      .renderEventHandler(ExpandableElementRootComponent.onRender(c))
                      .build())
              .paddingDip(YogaEdge.TOP, 8))
      .build();
}