.child( Column.create(c) .marginPx(HORIZONTAL, shadowHorizontal) .marginPx(TOP, shadowTop) .marginPx(BOTTOM, shadowBottom) .backgroundColor(clippingColor) .child( TransparencyEnabledCardClip.create(c) .cardBackgroundColor(cardBackgroundColor) .positionType(ABSOLUTE) .positionPx(ALL, 0)) .child(content)) .child( elevation > 0 ? CardShadow.create(c) .positionPx(ALL, 0) : null) .build();
final boolean greenLeft = state == 0 || state == 1 || state == 2; return Column.create(c) .child( Column.create(c) .alignItems(redLeft ? YogaAlign.FLEX_START : YogaAlign.FLEX_END) .child( Row.create(c) .heightDip(40) .transitionKey(TRANSITION_KEY_RED) .build())) .child( Column.create(c) .alignItems(blueLeft ? YogaAlign.FLEX_START : YogaAlign.FLEX_END) .child( Row.create(c) .heightDip(40) .transitionKey(TRANSITION_KEY_BLUE) .build())) .child( Column.create(c) .alignItems(greenLeft ? YogaAlign.FLEX_START : YogaAlign.FLEX_END) .child( Row.create(c) .heightDip(40) .transitionKey(TRANSITION_KEY_GREEN) .build()))
@OnCreateLayout static Component onCreateLayout(ComponentContext c) { return Column.create(c) .alignItems(CENTER) .child( Text.create(c) .text("First child") .paddingDip(BOTTOM, 20) .paddingDip(TOP, 40)) .child( Text.create(c) .text("Second child") .alignSelf(FLEX_END) .marginPercent(RIGHT, 10)) .child( Row.create(c) .clickHandler(LearningClickEventsComponent.onClickThirdChild(c)) .paddingDip(END, 7)) .child(Text.create(c).text("Third child").textSizeSp(30))) .child( Text.create(c) .text("Absolutely positioned child") .positionDip(START, 10) .positionDip(TOP, 10)) .build();
final Component oldComponent = Column.create(mContext) .backgroundColor(Color.WHITE) .child( EditText.create(mContext) .backgroundColor(Color.RED) .viewTag("Alpha") .contentDescription("some description")) .build(); .backgroundColor(Color.WHITE) .child( EditText.create(mContext) .backgroundColor(Color.RED) .viewTag("Alpha") .contentDescription("some description")) .build();
static Component buildComment1(ComponentContext c, boolean expanded) { return Column.create(c) .paddingDip(YogaEdge.ALL, 8) .child( Row.create(c) .alignItems(YogaAlign.CENTER) .child( Column.create(c) .heightDip(18) .widthDip(18) .background(buildRoundedRect(c, 0xFFFFB74B, 9))) .child( !expanded .text("+1")) .background(buildRoundedRect(c, Color.WHITE, 12)))) .child(Text.create(c).textSizeSp(18).text("So awesome!")) .background(buildRoundedRect(c, 0xFFDDDDDD, 20)) .build();
@OnCreateLayout static Component onCreateLayout(ComponentContext c) { return Column.create(c) .alignItems(CENTER) .child( Text.create(c) .text("First child") .paddingDip(BOTTOM, 20) .paddingDip(TOP, 40)) .child( Text.create(c) .text("Second child") .alignSelf(FLEX_END) .marginPercent(RIGHT, 10)) .child( Row.create(c) .backgroundRes(android.R.color.holo_blue_light) .paddingDip(END, 7)) .child(Text.create(c).text("Third child").textSizeSp(30))) .child( Text.create(c) .text("Absolutely positioned child") .positionDip(START, 10) .positionDip(TOP, 10)) .build();
static Component buildComment2(ComponentContext c, boolean expanded) { return Column.create(c) .paddingDip(YogaEdge.ALL, 8) .child( Row.create(c) .alignItems(YogaAlign.CENTER) .child( Column.create(c) .positionType(YogaPositionType.ABSOLUTE) .positionDip(YogaEdge.LEFT, expanded ? 27 : 3) .heightDip(18) .widthDip(18) .background(buildRoundedRect(c, 0xFFB2CFE5, 9))) .child( Column.create(c) .positionType(YogaPositionType.ABSOLUTE) .positionDip(YogaEdge.LEFT, expanded ? 15 : 3) .heightDip(18) .widthDip(18) .background(buildRoundedRect(c, 0xFF4B8C61, 9))) .child( Column.create(c) .heightDip(18) .widthDip(18) .background(buildRoundedRect(c, 0xFFFFB74B, 9))) .background(buildRoundedRect(c, Color.WHITE, 12)))) .child(Text.create(c).textSizeSp(18).text("So awesome!")) .background(buildRoundedRect(c, 0xFFDDDDDD, 20)) .build();
final Component oldComponent = Column.create(mContext) .backgroundColor(Color.WHITE) .child(Text.create(mContext).textSizeSp(12).text("label:")) .child( EditText.create(mContext) .text("Hello World") .viewTag("Alpha") .enabled(true)) .build(); .backgroundColor(Color.WHITE) .child(Text.create(mContext).textSizeSp(12).text("label:")) .child( EditText.create(mContext) .text("Hello World") .viewTag("Beta") .enabled(false)) .build();
final Component oldComponent = Column.create(mContext) .backgroundColor(Color.WHITE) .child(Text.create(mContext).textSizeSp(12).text("label:")) .child( EditText.create(mContext) .text("Hello World") .textSizeSp(12) .backgroundColor(Color.RED)) .build(); .backgroundColor(Color.WHITE) .child(Text.create(mContext).textSizeSp(12).text("label:")) .child( EditText.create(mContext) .text("Hello World") .textSizeSp(12) .backgroundColor(Color.CYAN)) .build();
@Override protected Component onCreateLayout(final ComponentContext c) { return create(c) .backgroundColor(0xFFFF0000) .child( Row.create(c) .justifyContent(SPACE_AROUND) .paddingPx(ALL, paddingSize) .wrapInView()) .child( Row.create(c) .justifyContent(SPACE_AROUND) .foregroundColor(0x0000FFFF) .paddingPx(ALL, paddingSize))) .build();
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) .text("Next") .clickHandler(PageIndicatorsRootComponent.onNextClick(c)))) .build();
@OnCreateLayout static Component onCreateLayout(ComponentContext c, @State boolean left) { return Column.create(c) .alignItems(left ? YogaAlign.FLEX_START : YogaAlign.FLEX_END) .child( Row.create(c) .heightDip(40) .transitionKey("red") .build()) .child( Row.create(c) .heightDip(40) .transitionKey("blue") .build()) .child( Row.create(c) .heightDip(40) .transitionKey("green") .build()) .child( Row.create(c) .heightDip(40) .transitionKey("black") .build()) .clickHandler(LeftRightBlocksComponent.onClick(c)) .build();
@Override protected Component onCreateLayout(final ComponentContext c) { return create(c) .backgroundColor(0xFFFF0000) .child( Row.create(c) .justifyContent(SPACE_AROUND) .paddingPx(ALL, paddingSize) .wrapInView()) .child( Row.create(c) .justifyContent(SPACE_AROUND) .paddingPx(ALL, paddingSize)) .child(TestViewComponent.create(c).wrapInView())) .build();
ComponentContext c, @Prop Component header, @Prop String content, @State Boolean saved) { return Column.create(c) .backgroundColor(Color.WHITE) .child(header) .child( Text.create(c, 0, R.style.message_text) .text(content) .paddingDip(HORIZONTAL, CARD_INSET) .paddingDip(BOTTOM, CARD_INTERNAL_PADDING)) .child( Row.create(c) .backgroundColor(saved ? Color.BLUE : Color.TRANSPARENT) .clickHandler(StoryCardComponent.onClickSave(c)) .border(Border.create(c).color(ALL, Color.BLACK).widthDip(TOP, 1).build())) .border(Border.create(c).color(ALL, Color.BLACK).widthDip(ALL, 1).build()) .build();
@Override protected Component onCreateLayout(ComponentContext c) { return create(c) .duplicateParentState(true) .clickHandler(c.newEventHandler(1)) .child( create(c) .duplicateParentState(false) .child(TestDrawableComponent.create(c).duplicateParentState(true))) .child( create(c) .duplicateParentState(true) .child(TestDrawableComponent.create(c).duplicateParentState(true))) .child( create(c) .clickHandler(c.newEventHandler(2)) .child(TestDrawableComponent.create(c).duplicateParentState(true))) .child( create(c) .clickHandler(c.newEventHandler(3)) .child(TestDrawableComponent.create(c).duplicateParentState(false))) .child( create(c) .clickHandler(c.newEventHandler(3)) .backgroundColor(RED) .foregroundColor(RED)) .child(create(c).backgroundColor(BLUE).foregroundColor(BLUE)) .build(); } };
@OnCreateLayout static Component onCreateLayout( ComponentContext c, @State boolean autoBoundsTransitionEnabled, @State boolean flag1, @State boolean flag2, @State boolean flag3, @State boolean flag4) { return Column.create(c) .backgroundColor(Color.WHITE) .alignItems(YogaAlign.CENTER) .paddingDip(YogaEdge.VERTICAL, 8) .child( Text.create(c) .text("ABT " + (autoBoundsTransitionEnabled ? "enabled" : "disabled")) .textSizeSp(20) .textStyle(Typeface.BOLD) .clickHandler(BoundsAnimationComponent.onABTClick(c))) .child( Text.create(c).marginDip(YogaEdge.VERTICAL, 8).text("Affected Children").textSizeSp(20)) .child(affectedChildren(c, flag1)) .child( Text.create(c).marginDip(YogaEdge.VERTICAL, 8).text("Affected Siblings").textSizeSp(20)) .child(affectedSiblings(c, flag2)) .child( Text.create(c).marginDip(YogaEdge.VERTICAL, 8).text("Affected Parent").textSizeSp(20)) .child(affectedParent(c, flag3)) .child(altogether(c, flag4)) .build(); }
@OnCreateLayout static Component onCreateLayout(ComponentContext c, @Prop String content) { return Column.create(c) .backgroundColor(Color.WHITE) .child( Text.create(c, 0, R.style.message_text) .text(content) .paddingDip(HORIZONTAL, CARD_INSET) .paddingDip(BOTTOM, CARD_INTERNAL_PADDING)) .child( Row.create(c) .alignSelf(STRETCH) .paddingDip(HORIZONTAL, CARD_INSET) .paddingDip(BOTTOM, CARD_INTERNAL_PADDING) .paddingDip(TOP, CARD_INTERNAL_PADDING) .justifyContent(CENTER) .child( Image.create(c) .drawableRes(R.drawable.save) .alignSelf(YogaAlign.CENTER) .widthDip(20) .heightDip(20) .marginDip(END, CARD_INTERNAL_PADDING)) .child(Text.create(c, 0, R.style.save_text).text("Save")) .border(Border.create(c).color(ALL, Color.BLACK).widthDip(TOP, 1).build())) .border(Border.create(c).color(ALL, Color.BLACK).widthDip(ALL, 1).build()) .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, @State boolean left) { return Column.create(c) .alignItems(left ? YogaAlign.FLEX_START : YogaAlign.FLEX_END) .child( Row.create(c) .heightDip(40) .widthDip(40) .backgroundColor(Color.parseColor("#ee1111")) .transitionKey("red") .build()) .child( Row.create(c) .heightDip(40) .widthDip(40) .backgroundColor(Color.parseColor("#1111ee")) .transitionKey("blue") .build()) .child( Row.create(c) .heightDip(40) .widthDip(40) .backgroundColor(Color.parseColor("#11ee11")) .transitionKey("green") .build()) .clickHandler(LeftRightBlocksSequenceComponent.onClick(c)) .build(); }