@OnEvent(RenderEvent.class) static RenderInfo onRender(ComponentContext c, @FromEvent Object model, @FromEvent int index) { return ComponentRenderInfo.create() .component( Row.create(c) .justifyContent(YogaJustify.CENTER) .widthDip(120) .heightDip(120) .backgroundColor((int) model) .child( Text.create(c) .textSizeSp(20) .textColor(Color.LTGRAY) .text(Integer.toString(index)) .verticalGravity(VerticalGravity.CENTER))) .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(); }
.widthPercent(33.3f) .alignItems(YogaAlign.CENTER) .justifyContent(YogaJustify.CENTER) .clickHandler(StoryFooterComponent.onClick(c)) .testKey("like_button") .widthPercent(33.3f) .alignItems(YogaAlign.CENTER) .justifyContent(YogaJustify.CENTER) .child(Column.create(c).heightDip(24).widthDip(24).backgroundColor(Color.RED)) .child( .widthPercent(33.3f) .alignItems(YogaAlign.CENTER) .justifyContent(YogaJustify.CENTER) .child( Column.create(c) Row.create(c) .alignItems(YogaAlign.CENTER) .justifyContent(YogaJustify.CENTER) .clickHandler(StoryFooterComponent.onClick(c)) .paddingDip(YogaEdge.HORIZONTAL, 16)
.child( Row.create(c) .justifyContent(SPACE_AROUND) .alignItems(CENTER) .positionType(ABSOLUTE) .child( Row.create(c) .justifyContent(SPACE_AROUND) .alignItems(CENTER) .positionType(ABSOLUTE)
Row.create(c) .alignSelf(YogaAlign.STRETCH) .justifyContent(YogaJustify.SPACE_BETWEEN) .child( Text.create(c)
.paddingDip(BOTTOM, CARD_INTERNAL_PADDING) .paddingDip(TOP, CARD_INTERNAL_PADDING) .justifyContent(CENTER) .child( Image.create(c)
.child( Row.create(c) .justifyContent(SPACE_AROUND) .alignItems(CENTER) .positionType(ABSOLUTE) .child( Row.create(c) .justifyContent(SPACE_AROUND) .alignItems(CENTER) .positionType(ABSOLUTE)
@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(); } }
@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(); }
@Override protected Component onCreateLayout(ComponentContext c) { return Column.create(c) .justifyContent(YogaJustify.CENTER) .alignItems(YogaAlign.CENTER) .child( Row.create(c) .widthPx(20) .heightPx(20) .transitionKey("row") .transitionKeyType(Transition.TransitionKeyType.GLOBAL) .justifyContent(YogaJustify.CENTER) .alignItems(YogaAlign.CENTER) .child(create(c).widthPx(10).heightPx(10))) .build(); } });