@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(); } }
@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) { assertAPI11orHigher(); 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(); }
.justifyContent(YogaJustify.CENTER) .clickHandler(StoryFooterComponent.onClick(c)) .paddingDip(YogaEdge.HORIZONTAL, 16) .testKey("like_button") .child( .alignItems(YogaAlign.CENTER) .clickHandler(StoryFooterComponent.onClick(c)) .paddingDip(YogaEdge.ALL, 16) .backgroundColor(0xff0000ff) .child(
.transitionKeyType(Transition.TransitionKeyType.GLOBAL) .heightDip(60) .paddingDip(YogaEdge.ALL, 6) .backgroundColor(Color.GRAY) .child( .heightDip(60) .marginDip(YogaEdge.TOP, 8) .paddingDip(YogaEdge.ALL, 6) .backgroundColor(Color.GRAY) .child(
Row.create(c) .marginDip(YogaEdge.LEFT, 8) .paddingDip(YogaEdge.ALL, 3) .alignItems(YogaAlign.CENTER) .child(
.widthDip(expanded ? 48 : 24) .marginDip(YogaEdge.LEFT, 8) .paddingDip(YogaEdge.ALL, 3) .alignItems(YogaAlign.CENTER) .child(
@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)
return Row.create(c) .alignItems(CENTER) .paddingDip(ALL, 10) .contentDescription("This is root view") .child(TestDrawableComponent.create(c).widthDip(30).heightDip(30)) Row.create(c) .alignItems(CENTER) .paddingDip(ALL, 10) .contentDescription("This is a container") .child(
.backgroundColor(saved ? Color.BLUE : Color.TRANSPARENT) .alignSelf(STRETCH) .paddingDip(HORIZONTAL, CARD_INSET) .paddingDip(BOTTOM, CARD_INTERNAL_PADDING) .paddingDip(TOP, CARD_INTERNAL_PADDING) .justifyContent(CENTER) .child(
@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(); } }
@Override protected Component onCreateLayout(final ComponentContext c) { return create(c) .contentDescription("This is root view") .child(TestDrawableComponent.create(c).widthDip(30).heightDip(30)) .child( TestDrawableComponent.create(c, true, true, true, true, false) .flex(1) .flexBasisDip(0) .backgroundColor(RED) .marginDip(HORIZONTAL, 10) .importantForAccessibility(IMPORTANT_FOR_ACCESSIBILITY_NO)) .child( Row.create(c) .alignItems(CENTER) .paddingDip(ALL, 10) .importantForAccessibility(IMPORTANT_FOR_ACCESSIBILITY_NO_HIDE_DESCENDANTS) .child( TestDrawableComponent.create(c) .widthDip(30) .heightDip(30) .importantForAccessibility(IMPORTANT_FOR_ACCESSIBILITY_YES) .contentDescription("This is an image"))) .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(); }
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(); }
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, @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(); }
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(); }
static Component.Builder createMessageContent(ComponentContext c, String messageText) { return Row.create(c) .paddingDip(YogaEdge.ALL, 8) .marginDip(YogaEdge.ALL, 8) .background(ExpandableElementUtil.getMessageBackground(c, 0xFF0084FF)) .child(Text.create(c).textSizeDip(18).textColor(Color.WHITE).text(messageText)); } }
static Component.Builder createMessageContent(ComponentContext c, String messageText) { return Row.create(c) .paddingDip(YogaEdge.ALL, 8) .marginDip(YogaEdge.ALL, 8) .background(ExpandableElementUtil.getMessageBackground(c, 0xFFEAEAEA)) .child(Text.create(c).textSizeDip(18).textColor(Color.BLACK).text(messageText)); } }
@OnCreateLayout static Component onCreateLayout(ComponentContext c) { return Row.create(c) .backgroundColor(0xDDFFFFFF) .positionType(YogaPositionType.ABSOLUTE) .positionDip(YogaEdge.RIGHT, 4) .positionDip(YogaEdge.TOP, 4) .paddingDip(YogaEdge.ALL, 2) .child(FavouriteButton.create(c)) .build(); } }