.widthDip(24) .backgroundColor(Color.RED) .transitionKey("icon_like")) .child( Text.create(c) .child( Column.create(c) .transitionKey("icon_share") .heightDip(24) .widthDip(24) .child( Column.create(c) .transitionKey("icon_like") .heightDip(24) .widthDip(24) Column.create(c) .flexGrow(1) .transitionKey("comment_editText") .child(Text.create(c).text("Input here").textSizeSp(16))) .child( .child( Column.create(c) .transitionKey("icon_share") .heightDip(24) .widthDip(24)
private static Component altogether(ComponentContext c, boolean flag4) { return Column.create(c) .transitionKey(TRANSITION_KEY_CONTAINER_4) .transitionKeyType(Transition.TransitionKeyType.GLOBAL) .marginDip(YogaEdge.TOP, 24) .child( Column.create(c) .transitionKey(TRANSITION_KEY_CHILD_4_1_1) .transitionKeyType(Transition.TransitionKeyType.GLOBAL) .marginDip(YogaEdge.RIGHT, 6) .child( Column.create(c) .transitionKey(TRANSITION_KEY_CHILD_4_1_2) .transitionKeyType(Transition.TransitionKeyType.GLOBAL) .flex(1) .child( Column.create(c) .transitionKey(TRANSITION_KEY_CHILD_4_2_1) .transitionKeyType(Transition.TransitionKeyType.GLOBAL) .marginDip(YogaEdge.RIGHT, 6) .child( Column.create(c) .transitionKey(TRANSITION_KEY_CHILD_4_2_2) .transitionKeyType(Transition.TransitionKeyType.GLOBAL) .widthDip(flag4 ? 200 : 100)
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(); }
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(); }
@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, @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 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(); }
private static Component buildCell(ComponentContext c, int color, String key) { return Column.create(c) .flexGrow(1f) .aspectRatio(0.75f) .marginDip(YogaEdge.ALL, 8) .background(buildRoundedRect(c, color, 8)) .transitionKey(key) .transitionKeyType(Transition.TransitionKeyType.GLOBAL) .build(); }
@Override protected Component onCreateLayout(final ComponentContext c) { return Column.create(c) .child( Column.create(c) .transitionKey(transitionKey) .transitionKeyType(Transition.TransitionKeyType.GLOBAL) .child(TestDrawableComponent.create(c))) .build(); } };