com.facebook.litho.Component Java Examples

private static Component getContent(ComponentContext c, int color, Spannable titleText) {
  return Column.create(c)
      .child(Text.create(c).textSizeSp(25).transitionName(TITLE_TRANSITION_NAME).text(titleText))
      .child(
          Row.create(c)
              .marginDip(YogaEdge.START, 100)
              .transitionName(SQUARE_TRANSITION_NAME)
              .widthDip(200)
              .heightDip(200)
              .backgroundColor(color))
      .child(
          Text.create(c)
              .textSizeSp(12)
              .transitionName("DESCRIPTION")
              .text(
                  "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent egestas augue venenatis suscipit maximus. Maecenas vel volutpat nunc. Etiam volutpat ultricies ante a iaculis. Fusce ultrices eleifend ligula in maximus. Fusce commodo, mauris vitae consequat tincidunt, nunc massa pharetra ante, non interdum magna sapien vel tortor. Aliquam in ultrices odio. Phasellus ac ante sit amet purus efficitur tempus fermentum in erat. Nullam auctor lorem ut justo convallis vestibulum. Fusce consequat velit eget pharetra consequat. Integer vulputate nisl eu libero luctus, id consequat ipsum eleifend. Nam quis sodales neque. Nullam nec velit sed leo feugiat imperdiet.\n"
                      + "\n"
                      + "Praesent lacinia lorem quis mauris molestie, ut placerat nisi ultricies. Sed a fringilla mi. Ut ornare a lorem quis consectetur. Pellentesque id leo id odio accumsan egestas. Proin sollicitudin turpis orci, in tempus dolor eleifend dapibus. Aenean facilisis fringilla orci, vel facilisis nunc commodo in. Sed scelerisque lectus ac diam feugiat, sit amet condimentum enim imperdiet. Integer urna arcu, aliquet quis facilisis quis, faucibus quis lorem. Nam congue augue est, ac porttitor mauris vehicula ut. Phasellus sapien tortor, euismod non dui quis, vulputate auctor orci. Maecenas a lectus in felis tincidunt pulvinar. Praesent nec laoreet ante, in sollicitudin quam. Vestibulum convallis, ante sit amet consequat varius, urna dui sagittis odio, suscipit rutrum ipsum nisi non eros. Cras interdum mattis libero at posuere. Phasellus venenatis dui massa, sed egestas mauris porta id."))
      .build();
}
 

@Test
public void testComponentAsyncInitRangeIteratorForward() {
  int totalCount = 10;
  final RenderInfo[] components = new RenderInfo[totalCount];
  for (int i = 0; i < totalCount; i++) {
    components[i] = ComponentRenderInfo.create().component(mock(Component.class)).build();
  }

  mRecyclerBinder.insertRangeAt(0, new ArrayList<>(Arrays.asList(components)));

  final int initialComponentPosition =
      findInitialComponentPosition(mAllHoldersList, mRecyclerBinder.mTraverseLayoutBackwards);
  assertThat(initialComponentPosition).isEqualTo(0);

  final Iterator<ComponentTreeHolder> asyncRangeIterator =
      new RecyclerBinder.ComponentAsyncInitRangeIterator(
          mAllHoldersList, initialComponentPosition, 4, mRecyclerBinder.mTraverseLayoutBackwards);
  assertIterator(
      asyncRangeIterator,
      new LinkedList<>(
          Arrays.asList(components[1], components[2], components[3], components[4])));
}
 

@OnCreateLayout
static Component onCreateLayout(
    ComponentContext c,
    @Prop CountDownLatch awaitable,
    @Prop CountDownLatch countDownLatch,
    @Prop AtomicInteger createStateCount,
    @Prop AtomicInteger outStateValue) {

  if (countDownLatch != null) {
    countDownLatch.countDown();
  }

  if (awaitable != null) {
    try {
      awaitable.await();
    } catch (InterruptedException e) {
      throw new IllegalStateException("Received an InterruptedException " + e);
    }
  }

  return StateUpdateTestInnerLayout.create(c)
      .outStateValue(outStateValue)
      .createStateCount(createStateCount)
      .build();
}
 

@OnCreateInitialState
static void onCreateInitialState(
    ComponentContext c,
    StateValue<ScrollPosition> lastScrollPosition,
    StateValue<ComponentTree> childComponentTree,
    @Prop Component contentProps,
    @Prop(optional = true) int initialScrollPosition) {

  lastScrollPosition.set(new ScrollPosition(initialScrollPosition));
  childComponentTree.set(
      ComponentTree.create(
              new ComponentContext(
                  c.getAndroidContext(), c.getLogTag(), c.getLogger(), c.getTreePropsCopy()),
              contentProps)
          .incrementalMount(false)
          .build());
}
 

@OnCreateLayout
static Component onCreateLayout(ComponentContext c, @State boolean shouldShowItem) {
  return Row.create(c)
      .paddingDip(YogaEdge.ALL, 20)
      .child(Row.create(c).heightDip(SIZE_DP).widthDip(SIZE_DP).backgroundColor(Color.RED))
      .child(
          shouldShowItem
              ? Row.create(c)
                  .heightDip(SIZE_DP)
                  .widthDip(SIZE_DP)
                  .backgroundColor(Color.BLUE)

                  // Disappearing items require a transition key and a key
                  .transitionKey(BLUE_BOX_TRANSITION_KEY)
                  .key(BLUE_BOX_TRANSITION_KEY)
              : null)
      .child(Row.create(c).heightDip(SIZE_DP).widthDip(SIZE_DP).backgroundColor(Color.RED))
      .clickHandler(AppearDisappearCustomTransition.onClick(c))
      .build();
}
 

@OnCreateLayout
static Component onCreateLayout(ComponentContext c, @Prop final String[] images) {
  return images.length == 1
      ? createImageComponent(c, images[0]).build()
      : RecyclerCollectionComponent.create(c)
          .disablePTR(true)
          .recyclerConfiguration(LIST_CONFIGURATION)
          .section(
              DataDiffSection.<String>create(new SectionContext(c))
                  .data(Arrays.asList(images))
                  .renderEventHandler(FeedImageComponent.onRender(c))
                  .build())
          .canMeasureRecycler(true)
          .aspectRatio(2)
          .build();
}
 

@Nullable
static Component.Builder maybeCreateBottomDetailComponent(
    ComponentContext c, boolean expanded, boolean seen) {
  if (!expanded) {
    return null;
  }

  return Text.create(c)
      .textSizeDip(14)
      .textColor(Color.GRAY)
      .alignSelf(YogaAlign.FLEX_END)
      .paddingDip(YogaEdge.RIGHT, 10)
      .transitionKey(TRANSITION_BOTTOM_DETAIL)
      .transitionKeyType(Transition.TransitionKeyType.GLOBAL)
      .text(seen ? "Seen" : "Sent");
}
 

/**
 * Mount a component into a component view.
 *
 * @param context A components context
 * @param lithoView The view to mount the component into
 * @param component The component to mount
 * @param incrementalMountEnabled States whether incremental mount is enabled
 * @param width The width of the resulting view
 * @param height The height of the resulting view
 * @return A LithoView with the component mounted in it.
 */
public static LithoView mountComponent(
    ComponentContext context,
    LithoView lithoView,
    Component component,
    boolean incrementalMountEnabled,
    boolean visibilityProcessingEnabled,
    int width,
    int height) {
  return mountComponent(
      lithoView,
      ComponentTree.create(context, component)
          .incrementalMount(incrementalMountEnabled)
          .layoutDiffing(false)
          .visibilityProcessing(visibilityProcessingEnabled)
          .build(),
      makeMeasureSpec(width, EXACTLY),
      makeMeasureSpec(height, EXACTLY));
}
 

@OnCreateLayout
static Component onCreateLayout(
    ComponentContext c,
    @Prop(resType = STRING) String title) {
  return Text.create(c)
      .text(title)
      .textStyle(BOLD)
      .textSizeDip(24)
      .flexShrink(0)
      .backgroundColor(0xDDFFFFFF)
      .positionType(YogaPositionType.ABSOLUTE)
      .positionDip(YogaEdge.BOTTOM, 4)
      .positionDip(YogaEdge.LEFT, 4)
      .paddingDip(YogaEdge.HORIZONTAL, 6)
      .build();
}
 

@Test
public void testUpdateSticky() {
  Component component = mock(Component.class);
  Diff<Component> componentDiff = new Diff<>(component, component);
  Diff<Boolean> stickyDiff = new Diff<>(true, false);
  Diff<Integer> spanSizeDiff = new Diff<>(1, 1);
  Diff<Boolean> isFullSpanDiff = new Diff<>(true, true);
  Diff<Map<String, Object>> customAttributesDiff = new Diff<>(null, null);
  Diff<Object> dataDiff = new Diff<>(null, null);
  SingleComponentSectionSpec.onCreateChangeSet(
      mSectionContext,
      mChangeSet,
      componentDiff,
      stickyDiff,
      spanSizeDiff,
      isFullSpanDiff,
      customAttributesDiff,
      dataDiff);

  Change change = verifyChangeSetAndGetTheChange(mChangeSet);
  assertThat(change.getType()).isEqualTo(Change.UPDATE);
  assertThat(change.getRenderInfo().getComponent()).isEqualTo(component);
  assertThat(change.getRenderInfo().isSticky()).isFalse();
  assertThat(change.getRenderInfo().getSpanSize()).isEqualTo(1);
  assertThat(change.getRenderInfo().isFullSpan()).isTrue();
}
 

@Test
public void testComponentOnSyntheticEventClick() {
  final Class activityClassToLaunch = PlaygroundActivity.class;
  final Component component =
      DemoListItemComponent.create(mComponentsRule.getContext())
          .model(new DemoListActivity.DemoListDataModel("My Component", activityClassToLaunch))
          .currentIndices(null)
          .build();

  // Here, we make use of Litho's internal event infrastructure and manually dispatch the event.
  final ComponentContext componentContext =
      withComponentScope(mComponentsRule.getContext(), component);
  component.dispatchOnEvent(DemoListItemComponent.onClick(componentContext), new ClickEvent());

  final Intent nextIntent =
      shadowOf(ApplicationProvider.<Application>getApplicationContext()).getNextStartedActivity();
  assertThat(nextIntent.getComponent().getClassName()).isSameAs(activityClassToLaunch.getName());
}
 

private static Component createHorizontalScrollChildren(
    ComponentContext c, List<Pair<String, Integer>> items) {
  final Row.Builder rowBuilder = Row.create(c);
  for (Pair<String, Integer> colorItem : items) {
    rowBuilder.child(
        Row.create(c)
            .paddingDip(YogaEdge.ALL, 10)
            .backgroundColor(colorItem.second)
            .child(
                Text.create(c)
                    .text(colorItem.first)
                    .textSizeSp(20)
                    .alignSelf(YogaAlign.CENTER)
                    .heightDip(100)));
  }
  return rowBuilder.build();
}
 

@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();
}
 

@OnCreateLayout
static Component onCreateLayout(
    ComponentContext c,
    @State String selection,
    @State boolean isShowingDropDown,
    @Prop(resType = ResType.DIMEN_TEXT, optional = true) float selectedTextSize,
    @Prop(resType = ResType.COLOR, optional = true) int selectedTextColor,
    @Prop(resType = ResType.DRAWABLE, optional = true) @Nullable Drawable caret) {
  caret = caret == null ? new CaretDrawable(c.getAndroidContext(), DEFAULT_CARET_COLOR) : caret;
  selectedTextSize =
      selectedTextSize == -1
          ? spToPx(c.getAndroidContext(), DEFAULT_TEXT_SIZE_SP)
          : selectedTextSize;

  return Row.create(c)
      .minHeightDip(SPINNER_HEIGHT)
      .justifyContent(YogaJustify.SPACE_BETWEEN)
      .paddingDip(START, MARGIN_SMALL)
      .backgroundAttr(android.R.attr.selectableItemBackground)
      .clickHandler(Spinner.onClick(c))
      .child(createSelectedItemText(c, selection, (int) selectedTextSize, selectedTextColor))
      .child(createCaret(c, caret, isShowingDropDown))
      .accessibilityRole(AccessibilityRole.DROP_DOWN_LIST)
      .build();
}
 

@Test
public void rcc_insertMountSpecWorkingRangeTester_workingRangeIsRegisteredAndEntered() {
  final ComponentContext componentContext = mLithoViewRule.getContext();
  final List<LifecycleStep.StepInfo> info = new ArrayList<>();
  final Component component =
      MountSpecWorkingRangeTester.create(componentContext).steps(info).heightPx(100).build();
  final RecyclerCollectionComponent rcc =
      RecyclerCollectionComponent.create(componentContext)
          .recyclerConfiguration(ListRecyclerConfiguration.create().build())
          .section(
              SingleComponentSection.create(new SectionContext(componentContext))
                  .component(component)
                  .build())
          .build();
  mLithoViewRule
      .setRoot(rcc)
      .setSizeSpecs(makeMeasureSpec(100, EXACTLY), makeMeasureSpec(100, EXACTLY));

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

  assertThat(getSteps(info))
      .describedAs("Should register and enter working range in expected order")
      .containsExactly(LifecycleStep.ON_REGISTER_RANGES, LifecycleStep.ON_ENTERED_RANGE);
}
 

@OnCreateLayout
static Component onCreateLayout(ComponentContext c) {
  return Row.create(c)
      .child(Text.create(c).textSizeSp(20).text("This component has varying corner radii"))
      .border(
          Border.create(c)
              .widthDip(YogaEdge.ALL, 3)
              .color(YogaEdge.LEFT, Color.BLACK)
              .color(YogaEdge.TOP, NiceColor.GREEN)
              .color(YogaEdge.BOTTOM, NiceColor.BLUE)
              .color(YogaEdge.RIGHT, NiceColor.RED)
              .radiusDip(Corner.TOP_LEFT, 10)
              .radiusDip(Corner.TOP_RIGHT, 5)
              .radiusDip(Corner.BOTTOM_RIGHT, 20)
              .radiusDip(Corner.BOTTOM_LEFT, 30)
              .build())
      .build();
}
 

static Component.Builder createSenderTile(ComponentContext c) {
  return Row.create(c)
      .marginDip(YogaEdge.ALL, 5)
      .alignSelf(YogaAlign.CENTER)
      .widthDip(55)
      .heightDip(55)
      .flexShrink(0)
      .background(getCircle(c));
}
 

@OnCreateChildren
static Children onCreateChildren(SectionContext c, @Prop List<Component> data) {
  final Children.Builder builder = Children.create();
  for (Component child : data) {
    builder.child(SingleComponentSection.create(c).component(child).build());
  }

  return builder.build();
}
 

@Test
public void testSetMovementMethod() {
  Component.Builder component =
      TextInput.create(mContext).movementMethod(LinkMovementMethod.getInstance());
  final android.widget.EditText editText = getEditText(component);
  assertThat(editText.getMovementMethod()).isInstanceOf(LinkMovementMethod.class);
}
 

protected static void updateCurrentStateAsync(ComponentContext c, int someParam) {
  Component _component = c.getComponentScope();
  if (_component == null) {
    return;
  }
  TestLayout.UpdateCurrentStateStateUpdate _stateUpdate =
      ((TestLayout) _component).createUpdateCurrentStateStateUpdate(someParam);
  c.updateStateAsync(_stateUpdate, "TestLayout.updateCurrentState");
}
 

public static Builder create(
    ComponentContext context,
    @AttrRes int defStyleAttr,
    @StyleRes int defStyleRes,
    Component component) {
  return newBuilder(context, defStyleAttr, defStyleRes, new TestTransitionComponent(component));
}
 

@OnCreateLayout
static Component onCreateLayout(ComponentContext c, @Prop Caller caller, @State boolean state) {
  caller.set(c);
  Component component = null;
  switch (caller.testType) {
    case SAME_KEY:
      component = getSameKeyTestComponent(c, state);
      break;
    case DISAPPEAR:
      component = getDisappearComponent(c, state);
      break;
  }
  return component;
}
 

@OnCreateLayout
static Component onCreateLayout(ComponentContext c, @Prop String text1, @Prop String text2) {
  return Column.create(c)
      .child(Text.create(c).text(text1).textSizeDip(50))
      .child(
          Text.create(c).text(text2).textColorRes(android.R.color.holo_green_dark).textSizeSp(30))
      .build();
}
 

private static Component affectedChildren(ComponentContext c, boolean flag1) {
  return Row.create(c)
      .transitionKey(TRANSITION_KEY_CONTAINER_1)
      .transitionKeyType(Transition.TransitionKeyType.GLOBAL)
      .heightDip(60 + 2 * 8)
      .widthDip((3 * 60) * (flag1 ? 0.5f : 1) + 4 * 8)
      .paddingDip(YogaEdge.ALL, 8)
      .backgroundColor(Color.YELLOW)
      .child(
          Column.create(c)
              .transitionKey(TRANSITION_KEY_CHILD_1_1)
              .transitionKeyType(Transition.TransitionKeyType.GLOBAL)
              .flex(1)
              .backgroundColor(Color.RED))
      .child(
          Column.create(c)
              .transitionKey(TRANSITION_KEY_CHILD_1_2)
              .transitionKeyType(Transition.TransitionKeyType.GLOBAL)
              .flex(1)
              .backgroundColor(Color.RED)
              .marginDip(YogaEdge.HORIZONTAL, 8))
      .child(
          Column.create(c)
              .flex(1)
              .transitionKey(TRANSITION_KEY_CHILD_1_3)
              .transitionKeyType(Transition.TransitionKeyType.GLOBAL)
              .backgroundColor(Color.RED))
      .clickHandler(BoundsAnimationComponent.onFirstComponentClick(c))
      .build();
}
 

@OnCreateLayout
static Component onCreateLayout(ComponentContext c) {
  final Handle textInputHandle = new Handle();
  return Column.create(c)
      .child(
          Text.create(c, android.R.attr.buttonStyle, 0)
              .text("Trigger custom event")
              .clickHandler(CustomEventTriggerExampleComponent.onClick(c, textInputHandle)))
      .child(ComponentWithCustomEventTriggerComponent.create(c).handle(textInputHandle))
      .build();
}
 

@OnCreateLayout
static Component onCreateLayout(ComponentContext c, @Prop String title) {
  return Column.create(c)
      .child(
          Row.create(c)
              .child(SolidColor.create(c).color(Color.MAGENTA).widthDip(16).heightDip(16))
              .child(Text.create(c).text(title)))
      .child(CardToolsComponent.create(c))
      .build();
}
 

/**
 * Returns a LithoView after all outstanding asynchronous state updates are performed.
 *
 * @param context context
 * @param component the component to update
 * @return the updated LithoView after the state update was applied
 */
public static LithoView getViewAfterStateUpdate(ComponentContext context, Component component) {
  return getViewAfterStateUpdate(
      context,
      component,
      new StateUpdater() {
        @Override
        public void performStateUpdate(ComponentContext ignored) {}
      },
      ComponentTestHelper.getDefaultLayoutThreadShadowLooper(),
      false,
      false);
}
 

@OnCreateLayout
static Component onCreateLayout(ComponentContext c, @Prop String title, @Prop String subtitle) {
  return Row.create(c)
      .paddingDip(HORIZONTAL, CARD_INSET)
      .paddingDip(TOP, CARD_INSET)
      .child(
          FrescoImage.create(c)
              .controller(
                  Fresco.newDraweeControllerBuilder()
                      .setUri("http://placekitten.com/g/200/200")
                      .build())
              .widthDip(40)
              .heightDip(40)
              .marginDip(END, CARD_INTERNAL_PADDING)
              .marginDip(BOTTOM, CARD_INTERNAL_PADDING))
      .child(
          Column.create(c)
              .flexGrow(1f)
              .child(
                  Text.create(c, 0, R.style.header_title)
                      .text(title)
                      .paddingDip(BOTTOM, CARD_INTERNAL_PADDING))
              .child(
                  Text.create(c, 0, R.style.header_subtitle)
                      .text(subtitle)
                      .paddingDip(BOTTOM, CARD_INTERNAL_PADDING)))
      .child(
          Image.create(c)
              .drawableRes(R.drawable.menu)
              .clickHandler(StoryHeaderComponent.onClickMenuButton(c))
              .widthDip(15)
              .heightDip(15)
              .marginDip(START, CARD_INTERNAL_PADDING)
              .marginDip(BOTTOM, CARD_INTERNAL_PADDING))
      .build();
}
 

@OnCreateLayout
static Component onCreateLayout(
    ComponentContext c,
    @TreeProp TreePropNumberType propA,
    @TreeProp TreePropStringType propB,
    @Prop(optional = true) TreePropTestResult resultPropA,
    @Prop TreePropTestResult resultPropB) {
  if (resultPropA != null) {
    resultPropA.mProp = propA;
  }
  resultPropB.mProp = propB;
  return null;
}
 

@Test
public void subComponentWithRawText() {
  final ComponentContext c = mComponentsRule.getContext();
  final Component component = makeComponentWithTextInSubcomponent("Raw Text");

  // This will match if the component has exactly the specified text as property.
  assertThat(c, component)
      .extractingSubComponentAt(0)
      .has(subComponentWith(c, TestFooterComponent.matcher(c).text("Raw Text").build()));
}