com.facebook.litho.Column Java Examples

@OnCreateLayout
public static Component onCreateLayout(
    ComponentContext c, @Prop String message, @Prop Throwable throwable) {
  Log.e(TAG, message, throwable);

  return Column.create(c)
      .backgroundColor(DARK_RED_FRAME)
      .paddingDip(YogaEdge.ALL, 1f)
      .child(
          Text.create(c)
              .backgroundColor(LIGHT_RED_BACKGROUND)
              .paddingDip(YogaEdge.ALL, 4f)
              .textSizeDip(16f)
              .text(message))
      .child(
          Text.create(c)
              .backgroundColor(LIGHT_RED_BACKGROUND)
              .paddingDip(YogaEdge.ALL, 4f)
              .textSizeDip(12f)
              .textColor(LIGHT_GRAY_TEXT)
              .typeface(Typeface.MONOSPACE)
              .text(StacktraceHelper.formatStacktrace(throwable)))
      .clickHandler(DebugErrorComponent.onClick(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();
}
 

@OnCreateChildren
static Children onCreateChildren(SectionContext c) {
  return Children.create()
      .child(SingleComponentSection.create(c).component(SingleComponentMovesTransition.create(c)))
      .child(
          SingleComponentSection.create(c)
              .component(SingleComponentMovesSlowTransition.create(c)))
      .child(
          SingleComponentSection.create(c)
              .component(ComponentWithinComponentMovesTransition.create(c)))
      .child(
          SingleComponentSection.create(c)
              .component(ComponentWithinMountedComponentMovesTransition.create(c)))
      .child(
          SingleComponentSection.create(c).component(MultipleComponentMovesTransition.create(c)))
      .child(SingleComponentSection.create(c).component(AppearDisappearTransition.create(c)))
      .child(
          SingleComponentSection.create(c).component(AppearDisappearCustomTransition.create(c)))
      .child(SingleComponentSection.create(c).component(ExpandingPickerComponent.create(c)))

      // Force scrollable
      .child(SingleComponentSection.create(c).component(Column.create(c).heightDip(1000)))
      .build();
}
 

@Before
public void setUp() {
  assumeThat(
      "These tests can only be run in debug mode.",
      ComponentsConfiguration.IS_INTERNAL_BUILD,
      is(true));

  mComponent =
      new InlineLayoutSpec() {
        @Override
        protected Component onCreateLayout(ComponentContext c) {
          return Column.create(c)
              .child(Card.create(c).content(Text.create(c).text("test")))
              .build();
        }
      };
}
 

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

  final Component listComponent =
      RecyclerCollectionComponent.create(c)
          .disablePTR(true)
          .section(FavouriteGroupSection.create(new SectionContext(c)).dataModels(dataModels))
          .flexGrow(1)
          .build();

  return showHeader
      ? Column.create(c)
          .child(Text.create(c).text("Header").textSizeDip(30).build())
          .child(listComponent)
          .build()
      : listComponent;
}
 

private static Component affectedSiblings(ComponentContext c, boolean flag2) {
  return Row.create(c)
      .transitionKey(TRANSITION_KEY_CONTAINER_2)
      .transitionKeyType(Transition.TransitionKeyType.GLOBAL)
      .heightDip(60 + 2 * 8)
      .widthDip(3 * 60 + 3 * 8)
      .paddingDip(YogaEdge.ALL, 8)
      .backgroundColor(Color.LTGRAY)
      .child(
          Column.create(c)
              .transitionKey(TRANSITION_KEY_CHILD_2_1)
              .transitionKeyType(Transition.TransitionKeyType.GLOBAL)
              .flex(1)
              .backgroundColor(Color.RED))
      .child(
          Column.create(c)
              .transitionKey(TRANSITION_KEY_CHILD_2_2)
              .transitionKeyType(Transition.TransitionKeyType.GLOBAL)
              .flex(flag2 ? 1 : 2)
              .backgroundColor(Color.YELLOW)
              .marginDip(YogaEdge.LEFT, 8))
      .clickHandler(BoundsAnimationComponent.onSecondComponentClick(c))
      .build();
}
 

@Test
public void textInput_getTextTriggerFromUnmountedView_returnsCurrentText() {
  final Handle handle = new Handle();
  mLithoViewRule
      .setRoot(
          Column.create(mLithoViewRule.getContext())
              .child(TextInput.create(mLithoViewRule.getContext()).handle(handle)))
      .measure()
      .layout()
      .attachToWindow();

  getEditText(mLithoViewRule.getLithoView()).setText("text for test");
  mLithoViewRule.getLithoView().unmountAllItems();

  // We need a context with a ComponentTree on it for the Handle to properly resolve
  final CharSequence text =
      TextInput.getText(mLithoViewRule.getComponentTree().getContext(), handle);
  assertThat(text).isNotNull();
  assertThat(text.toString()).isEqualTo("text for test");
}
 

@OnCreateLayout
static Component onCreateLayout(
    ComponentContext c, @State ImmutableList<Pair<String, Integer>> items) {
  return Column.create(c)
      .child(
          Row.create(c)
              .paddingDip(YogaEdge.VERTICAL, 10)
              .child(
                  Text.create(c)
                      .paddingDip(YogaEdge.RIGHT, 10)
                      .alignSelf(YogaAlign.CENTER)
                      .clickHandler(HorizontalScrollRootComponent.onClick(c, true))
                      .text("PREPEND")
                      .textSizeSp(20))
              .child(
                  Text.create(c)
                      .paddingDip(YogaEdge.LEFT, 10)
                      .alignSelf(YogaAlign.CENTER)
                      .clickHandler(HorizontalScrollRootComponent.onClick(c, false))
                      .text("APPEND")
                      .textSizeSp(20)))
      .child(HorizontalScroll.create(c).contentProps(createHorizontalScrollChildren(c, items)))
      .build();
}
 

@Test
public void textInput_getTextTrigger_returnsCurrentText() {
  final Handle handle = new Handle();
  mLithoViewRule
      .setRoot(
          Column.create(mLithoViewRule.getContext())
              .child(TextInput.create(mLithoViewRule.getContext()).handle(handle)))
      .measure()
      .layout()
      .attachToWindow();

  getEditText(mLithoViewRule.getLithoView()).setText("text for test");

  // We need a context with a ComponentTree on it for the Handle to properly resolve
  final CharSequence text =
      TextInput.getText(mLithoViewRule.getComponentTree().getContext(), handle);
  assertThat(text).isNotNull();
  assertThat(text.toString()).isEqualTo("text for test");
}
 

@Test
public void textInput_updateWithNewTextInputAndUseGetTextTrigger_returnsCurrentText() {
  mLithoViewRule
      .setRoot(
          Column.create(mLithoViewRule.getContext())
              .child(TextInput.create(mLithoViewRule.getContext())))
      .measure()
      .layout()
      .attachToWindow();

  final Handle handle = new Handle();
  mLithoViewRule
      .setRoot(
          Column.create(mLithoViewRule.getContext())
              .child(
                  TextInput.create(mLithoViewRule.getContext())
                      .key("different_key")
                      .handle(handle)))
      .layout();

  getEditText(mLithoViewRule.getLithoView()).setText("text for test");

  CharSequence text = TextInput.getText(mLithoViewRule.getComponentTree().getContext(), handle);
  assertThat(text).isNotNull();
  assertThat(text.toString()).isEqualTo("text for test");
}
 

@OnCreateLayout
static Component onCreateLayout(
    ComponentContext c,
    @Prop List<LifecycleStep.StepInfo> steps,
    @Prop(optional = true) @Nullable Caller caller,
    @State String state,
    @CachedValue int expensiveValue) {
  steps.add(new StepInfo(LifecycleStep.ON_CREATE_LAYOUT));
  if (state == null) {
    throw new IllegalStateException("OnCreateLayout called without initialised state.");
  }
  if (caller != null) {
    caller.set(c, steps);
  }
  return Column.create(c).build();
}
 

@Test
public void textInput_setTextTriggerForUnmountedView_setsTextAfterMount() {
  final Handle handle = new Handle();
  mLithoViewRule
      .setRoot(
          Column.create(mLithoViewRule.getContext())
              .child(TextInput.create(mLithoViewRule.getContext()).handle(handle)))
      .measure()
      .layout()
      .attachToWindow();

  mLithoViewRule.getLithoView().unmountAllItems();

  // We need a context with a ComponentTree on it for the Handle to properly resolve
  TextInput.setText(mLithoViewRule.getComponentTree().getContext(), handle, "set text in test");
  final CharSequence text =
      TextInput.getText(mLithoViewRule.getComponentTree().getContext(), handle);
  assertThat(text).isNotNull();
  assertThat(text.toString()).isEqualTo("set text in test");

  // Mount the view again
  mLithoViewRule.layout();

  assertThat(getEditText(mLithoViewRule.getLithoView()).getText().toString())
      .isEqualTo("set text in test");
}
 

@OnCreateLayout
static Component onCreateLayout(
    ComponentContext c, @State boolean shouldAlignStart, @State String actualPosition) {
  return Column.create(c)
      .paddingDip(YogaEdge.ALL, 20)
      .alignItems(shouldAlignStart ? YogaAlign.FLEX_START : YogaAlign.FLEX_END)
      .child(
          Text.create(c)
              .text(actualPosition)
              .textColor(Color.WHITE)
              .textSizeDip(20)
              .alignment(TextAlignment.CENTER)
              .heightDip(SIZE_DP)
              .widthDip(SIZE_DP)
              .backgroundColor(Color.RED))
      .clickHandler(AnimationStateExampleComponent.onClick(c))
      .build();
}
 

@OnCreateLayout
static Component onCreateLayout(
    ComponentContext c, @State boolean radiusStart, @State boolean isRunning) {
  final int radius = radiusStart ? START_RADIOUS : END_RADIOUS;
  final int dim = 2 * radius;
  Column.Builder columnBuilder =
      Column.create(c)
          .child(
              Row.create(c)
                  .heightPx(dim)
                  .widthPx(dim)
                  .transitionKey(CIRCLE_TRANSITION_KEY)
                  .clickHandler(ShowMessageExampleComponent.onClick(c))
                  .background(buildRoundedRect(radius)));
  if (!isRunning) {
    columnBuilder.child(Text.create(c).text("Finish"));
  }
  return columnBuilder.build();
}
 

@OnCreateLayoutWithSizeSpec
static Component onCreateLayout(
    ComponentContext c,
    int w,
    int h,
    @Prop List<LifecycleStep.StepInfo> steps,
    @State String state) {

  steps.add(new StepInfo(LifecycleStep.ON_CREATE_LAYOUT_WITH_SIZE_SPEC));
  if (state == null) {
    throw new IllegalStateException("OnCreateLayout called without initialised state.");
  }
  return Column.create(c).build();
}
 

@OnCreateLayout
static Component onCreateLayout(
    ComponentContext c,
    @Prop(resType = STRING) String text) {
  return Column.create(c).flexShrink(0).alignContent(YogaAlign.FLEX_START)
      .paddingDip(YogaEdge.ALL, 8)
      .child(
          Text.create(c)
              .text(text)
              .textSizeDip(14)
              .textColor(GRAY)
              .textStyle(ITALIC))
      .build();
}
 

@OnCreateLayout
static Component onCreateLayout(ComponentContext c) {
  return Column.create(c)
      .backgroundRes(android.R.color.darker_gray)
      .child(
          StoryCardComponent.create(c)
              .content(
                  "This is some test content. It should fill at least one line. "
                      + "This is a story card. You can interact with the menu button "
                      + "and save button."))
      .build();
}
 

@OnCreateLayout
static Component onCreateLayout(ComponentContext c, @Prop final ArtistDatum artist,
    @Prop final RecyclerBinder binder) {
  return Column.create(c)
      .child(Column.create(c)
          .child(artist.getImages().length == 1 ? getImageComponent(c, artist)
              : getRecyclerComponent(c, binder))
          .child(TitleComponent.create(c).title(artist.getName()))
          .child(ActionsComponent.create(c)))
      .child(FooterComponent.create(c).text(artist.getBiography()))
      .build();
}
 

@OnCreateLayout
static Component onCreateLayout(ComponentContext c, @State int count) {
  if (count == 0) {
    ChildComponentWithStateUpdate.onUpdateStateSync(c);
  }
  return Column.create(c)
      .child(Text.create(c).text("click to dispatch").textSizeSp(18).paddingDip(YogaEdge.ALL, 16))
      .child(Text.create(c).textSizeSp(18).text(String.valueOf(count)))
      .build();
}
 

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

@OnCreateLayout
static Component onCreateLayout(ComponentContext c, @Prop boolean shouldWrapInView) {
  return Row.create(c)
      .child(
          (shouldWrapInView ? Column.create(c).wrapInView() : Column.create(c))
              .backgroundColor(Color.RED)
              .foregroundColor(Color.GREEN)
              .child(Text.create(c).text("Hello")))
      .child(
          (shouldWrapInView ? Column.create(c).wrapInView() : Column.create(c))
              .backgroundColor(Color.RED)
              .foregroundColor(Color.GREEN)
              .child(Text.create(c).text("world")))
      .build();
}
 

@OnCreateLayout
static Component onCreateLayout(
        ComponentContext c,
        @Prop(resType = STRING) String text) {
    return Column.create(c).flexShrink(0).alignContent(YogaAlign.FLEX_START)
            .paddingDip(YogaEdge.ALL, 8)
            .child(
                    Text.create(c)
                            .text(text)
                            .textSizeDip(14)
                            .textColor(GRAY)
                            .textStyle(ITALIC))
            .build();
}
 

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) {
  final Handle anchorHandle = new Handle();
  return Column.create(c)
      .alignItems(YogaAlign.CENTER)
      .child(
          Text.create(c, android.R.attr.buttonStyle, 0)
              .marginDip(YogaEdge.BOTTOM, 50)
              .text("Click to Trigger show tooltip")
              .clickHandler(TooltipTriggerExampleComponent.onClick(c, anchorHandle)))
      .child(Text.create(c).text("Tooltip anchor").handle(anchorHandle))
      .visibleHandler(TooltipTriggerExampleComponent.onVisible(c, anchorHandle))
      .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) {
  final Handle textInputHandle = new Handle();
  return Column.create(c)
      .child(
          Text.create(c, android.R.attr.buttonStyle, 0)
              .text("Clear")
              .clickHandler(ClearTextTriggerExampleComponent.onClearClick(c, textInputHandle)))
      .child(TextInputContainerComponent.create(c).textInputHandle(textInputHandle))
      .build();
}
 

@OnCreateLayout
static Component onCreateLayout(ComponentContext c, @Prop final ArtistDatum artist, @Prop final RecyclerBinder binder) {
  return Column.create(c)
      .flexShrink(0)
      .alignContent(YogaAlign.FLEX_START)
      .paddingDip(VERTICAL, 8)
      .paddingDip(HORIZONTAL, 16)
      .child(Card.create(c)
          .content(FeedItemComponent.create(c).artist(artist).binder(binder)))
      .build();
}
 

@OnCreateLayout
static Component onCreateLayout(ComponentContext c) {
  return Column.create(c).flexShrink(0).alignContent(YogaAlign.FLEX_START)
      .backgroundColor(Color.WHITE)
      .child(
          Text.create(c)
              .textSizeSp(20)
              .text("Playground sample"))
      .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(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
static Component onCreateLayout(ComponentContext c, @State int state, @State boolean running) {
  final boolean redLeft = state == 0 || state == 4 || state == 5;
  final boolean blueLeft = state == 0 || state == 1 || state == 5;
  final boolean greenLeft = state == 0 || state == 1 || state == 2;
  return Column.create(c)
      .child(Row.create(c).child(Text.create(c).text(running ? "RUNNING" : "STOPPED")))
      .child(
          Column.create(c)
              .alignItems(redLeft ? YogaAlign.FLEX_START : YogaAlign.FLEX_END)
              .child(
                  Row.create(c)
                      .heightDip(40)
                      .widthDip(40)
                      .backgroundColor(Color.parseColor("#ee1111"))
                      .transitionKey(TRANSITION_KEY_RED)
                      .build()))
      .child(
          Column.create(c)
              .alignItems(blueLeft ? YogaAlign.FLEX_START : YogaAlign.FLEX_END)
              .child(
                  Row.create(c)
                      .heightDip(40)
                      .widthDip(40)
                      .backgroundColor(Color.parseColor("#1111ee"))
                      .transitionKey(TRANSITION_KEY_BLUE)
                      .build()))
      .child(
          Column.create(c)
              .alignItems(greenLeft ? YogaAlign.FLEX_START : YogaAlign.FLEX_END)
              .child(
                  Row.create(c)
                      .heightDip(40)
                      .widthDip(40)
                      .backgroundColor(Color.parseColor("#11ee11"))
                      .transitionKey(TRANSITION_KEY_GREEN)
                      .build()))
      .clickHandler(ToggleMoveBlocksExampleComponent.onClick(c))
      .build();
}