facebook/litho

OnUpdateState not invoke on parent recycler component

krishnendu25 opened this issue · 0 comments

@LayoutSpec
object InsuranceProductsComponentSpec {

@OnCreateLayout
fun onCreateLayout(
    c: ComponentContext,
    @Prop widgetDetails: WidgetDetails,
    @State widgetDetailsModelState: ArrayList<WidgetComponentDetails>
): Component {
    //widget backgroundcolor set from Json
    return Column.create(c).backgroundColor(
        if (widgetDetails.backgroundColor.isNullOrEmpty()) Color.TRANSPARENT else Color.parseColor(
            widgetDetails.backgroundColor
        )
    ).child(
        financeTitleSection(c, widgetDetails.widgetName),
    ).child(
        filterOptionSection(c, widgetDetailsModelState)
    ).child(
        widgetDetailsModelState.let { loansSection(c, widgetDetailsModelState) }
    ).marginDip(YogaEdge.TOP, fs_16).build()
}


private fun filterOptionSection(
    c: ComponentContext,
    @State widgetDetails: ArrayList<WidgetComponentDetails>,
): Component {

    return RecyclerCollectionComponent.create(c)
        .recyclerConfiguration(
            ListRecyclerConfiguration.create().orientation(OrientationHelper.HORIZONTAL)
                .build()
        ).itemDecoration(HorizontalSpaceDecoration(5))
        .section(
            DataDiffSection.create<WidgetComponentDetails>(SectionContext(c))
                .data(widgetDetails.distinctBy { it.filterTag })
                .renderEventHandler(
                    InsuranceProductsComponent.onFilterLoanOptionRender(c)
                )
                .build()
        ).kotlinStyle(Style.padding(horizontal = 10.dp)).canMeasureRecycler(true)
        .build()

}

private fun loansSection(
    c: ComponentContext,
    widgetDetails: ArrayList<WidgetComponentDetails>,
): Component {
    //If Select ALL From ChipGroup All the Card Visible else Only those cards visible which type of filterTag is selected
    val filterModel = ArrayList<WidgetComponentDetails>()
    widgetDetails.find { it.isSelected }.let {
        it?.let { widgetComponentDetails ->
            if (widgetComponentDetails.filterTag.equals(CHIPGROUP_ALL_TAG)) {
                filterModel.addAll(widgetDetails)
            } else {
                widgetDetails.forEach { model ->
                    if (widgetComponentDetails.filterTag.equals(model.filterTag, true)) {
                        filterModel.add(model)
                    }
                }
            }
        }
    }
    return RecyclerCollectionComponent.create(c)
        .recyclerConfiguration(
            ListRecyclerConfiguration.create().snapMode(SnapUtil.SNAP_TO_CENTER)
                .orientation(OrientationHelper.HORIZONTAL)
                .build()
        ).itemDecoration(HorizontalSpaceDecoration(7))
        .section(
            DataDiffSection.create<WidgetComponentDetails>(SectionContext(c))
                .data(filterModel)
                .renderEventHandler(
                    InsuranceProductsComponent.onWidgetComponentDetailsRender(c)
                )
                .build()
        ).canMeasureRecycler(true)
        .build()

}

@OnEvent(RenderEvent::class)
fun onFilterLoanOptionRender(
    c: ComponentContext,
    @FromEvent model: WidgetComponentDetails,
): RenderInfo {
    val app_design_blue = c.applicationContext.resources.getString(0 + R.color.app_design_blue)
    val appDesignWhite = c.applicationContext.resources.getString(0 + R.color.appDesignWhite)
    return ComponentRenderInfo.create()

        .component(
            Card.create(c).content(
                Text.create(c).alignSelf(YogaAlign.CENTER)
                    .kotlinStyle(Style.padding(horizontal = 15.dp, vertical = 7.dp))
                    .text(model.filterTag).textColor(
                        if (model.isSelected) Color.WHITE else Color.BLACK
                    ).textSizeDip(fs_12).paddingDip(YogaEdge.TOP, FontSize.fs_2)
                    .heightPercent(FontSize.fs_100)
                    .textAlignment(Layout.Alignment.ALIGN_CENTER).build()
            ).cornerRadiusDip(fs_12).heightDip(FontSize.fs_30).cardBackgroundColor(
                if (model.isSelected) Color.parseColor(app_design_blue) else Color.parseColor(
                    appDesignWhite
                )
            ).transparencyEnabled(true)
                .clickHandler(
                    InsuranceProductsComponent.onFilterLoanOptionClick(c, model)
                ).build()

        )
        .build()
}

@OnEvent(ClickEvent::class)
fun onCtaClick(c: ComponentContext, @Param ctaInfo: WidgetComponentDetails?) {
    Router.routeToNextScreen(
        c.applicationContext, RedirectionKeyValue(
            ctaInfo?.redirectionKey.toString(),
            ctaInfo?.redirectionValue.toString()
        ), RouterData()
    )
}

@OnEvent(ClickEvent::class)
fun onFilterLoanOptionClick(
    c: ComponentContext, @Param selectedValue: WidgetComponentDetails
) {
    InsuranceProductsComponent.onUpdateState(c, selectedValue)
}

@OnEvent(RenderEvent::class)
fun onWidgetComponentDetailsRender(
    context: ComponentContext,
    @FromEvent model: WidgetComponentDetails
): RenderInfo {
    val app_design_silver = context.resources.getString(0 + R.color.app_design_silver)
    val app_design_black = context.resources.getString(0 + R.color.app_design_black)
    val backgroundDrawable = getBackgroundDrawable(
        GradientDrawable.RECTANGLE,
        if (model.backgroundColor.isNullOrEmpty()) Color.TRANSPARENT else Color.parseColor(model.backgroundColor),
        fs_1.roundToInt(), context.resources.getString(0 + R.color.app_design_blue), fs_12
    )
    val backgroundDrawable2 = getBackgroundDrawable(
        GradientDrawable.RECTANGLE,
        Color.WHITE, fs_1.roundToInt(), app_design_silver, fs_12
    )
    val imageUrl = model.imageIcon?.withAssetBaseUrl()
    val patnerName = model.partnerName
    val productName = model.productName
    return ComponentRenderInfo.create()
        .component(
            if (!model.filterTag.equals(CHIPGROUP_ALL_TAG)) {
                Column.create(context).alignContent(YogaAlign.FLEX_START)
                    .alignSelf(YogaAlign.FLEX_START).alignItems(YogaAlign.FLEX_START).child(
                        Column.create(context).background(backgroundDrawable).widthDip(fs_243)
                            .marginDip(YogaEdge.TOP, fs_16).marginDip(YogaEdge.START, fs_12)
                            .heightDip(fs_127).child(
                                Column.create(context).child(
                                    Row.create(context).child(
                                        imageUrl?.let {
                                            GlideImage.create(context)
                                                .imageUrl(it)
                                                .heightDip(fs_40)
                                                .widthDip(fs_40)
                                                .placeholderImage(
                                                    ContextCompat.getDrawable(
                                                        context.androidContext,
                                                        `in`.bajajfinservmarkets.shared.R.drawable.placeholder
                                                    )
                                                )
                                                .aspectRatio(fs_1)
                                                .centerCrop(false)
                                                .build()
                                        }
                                    ).child(
                                        Column.create(context).child(
                                            Text.create(context).text(patnerName)
                                                .typeface(
                                                    context.applicationContext.typeFace(
                                                        FontType.REGULAR
                                                    )
                                                )
                                                .isSingleLine(true)
                                                .textColor(Color.parseColor(app_design_silver))
                                                .textSizeSp(fs_12)
                                        ).child(
                                            Text.create(context).text(productName)
                                                .typeface(
                                                    context.applicationContext.typeFace(
                                                        FontType.BOLD
                                                    )
                                                )
                                                .isSingleLine(true)
                                                .textColor(Color.parseColor(app_design_black))
                                                .textSizeSp(fs_14)
                                        ).marginDip(YogaEdge.START, fs_8)
                                    ).marginDip(YogaEdge.END, fs_12)
                                        .marginDip(YogaEdge.START, fs_12)
                                        .marginDip(YogaEdge.BOTTOM, fs_10)
                                        .marginDip(YogaEdge.TOP, fs_10)
                                ).child(
                                    Column.create(context).background(backgroundDrawable2)
                                        .justifyContent(YogaJustify.CENTER)
                                        .alignSelf(YogaAlign.CENTER)
                                        .alignContent(YogaAlign.CENTER)
                                        .marginDip(YogaEdge.START, fs_12)
                                        .marginDip(YogaEdge.END, fs_12)
                                        .widthDip(FontSize.fs_219)
                                        .heightDip(53f)
                                        .child(
                                            Row.create(context).marginDip(YogaEdge.START, fs_12)
                                                .child(
                                                    renderSumAssuredView(
                                                        model,
                                                        context,
                                                        app_design_black
                                                    )
                                                ).build()
                                        )
                                )
                            ).build()
                    ).build()
            } else {
                Column.create(context).heightDip(FontSize.fs_159).widthDip(fs_0).build()
            }
        ).build()

}

private fun renderSumAssuredView(
    model: WidgetComponentDetails,
    context: ComponentContext,
    app_design_black: String
): Component {
    if (!model.sumAssured.isNullOrEmpty()) {
        return Column.create(context).child(
            Text.create(context)
                .text(
                    context.resources.getString(
                        `in`.bajajfinservmarkets.app.R.string.sumAssured
                    )
                )
                .typeface(
                    context.applicationContext.typeFace(
                        FontType.REGULAR
                    )
                )
                .isSingleLine(true)
                .textColor(
                    Color.parseColor(
                        app_design_black
                    )
                )
                .textSizeSp(fs_10)
        ).child(
            Text.create(context)
                .text(model.sumAssured.toString())
                .typeface(
                    context.applicationContext.typeFace(
                        FontType.BOLD
                    )
                )
                .isSingleLine(true)
                .textColor(
                    Color.parseColor(
                        app_design_black
                    )
                )
                .textSizeSp(fs_16)
        ).build()
    } else {
        return EmptyComponent()
    }
}


@OnUpdateState
fun onUpdateState(
    widgetDetailsModelState: StateValue<ArrayList<WidgetComponentDetails>>,
    @Param newOption: WidgetComponentDetails
) {
    val existingList = widgetDetailsModelState.get()
    val updatedList = ArrayList<WidgetComponentDetails>()
    if (existingList != null) {
        existingList.map {
            updatedList.add(
                WidgetComponentDetails(
                    isSelected = newOption.filterTag == it.filterTag,
                    filterTag = it.filterTag,
                    emi = it.emi,
                    partnerName = it.partnerName,
                    productName = it.productName,
                    loanAmount = it.loanAmount,
                    backgroundColor = it.backgroundColor,
                    imageIcon = it.iconBackgroundColor,
                    redirectionKey = it.redirectionKey,
                    redirectionValue = it.redirectionValue,
                    tag = it.tag,
                    name = it.name,
                    tagBgColor = it.tagBgColor,
                    tagTextColor = it.tagTextColor,
                    jsonLink = it.jsonLink,
                    iconBackgroundColor = it.iconBackgroundColor,
                    analytics = it.analytics,
                    sumAssured = it.sumAssured,
                    colourCode = it.colourCode,
                    sectionID = it.sectionID,
                    sectionName = it.sectionName,
                    ctaText = it.ctaText,
                    itemCount = it.itemCount,
                    partners_list = it.partners_list
                )
            )
        }
    }
    widgetDetailsModelState.set(updatedList)
}


@OnCreateInitialState
fun onInitialState(
    c: ComponentContext,
    @Prop widgetDetails: WidgetDetails,
    widgetDetailsModelState: StateValue<ArrayList<WidgetComponentDetails>>
) {
    widgetDetails.widgetComponentDetails?.find { !it.filterTag.equals(Constants.CHIPGROUP_ALL_TAG) }
        .let {
            widgetDetails.widgetComponentDetails?.apply {
                val widgetComponentDetailsTemp =
                    WidgetComponentDetails(
                        filterTag = Constants.CHIPGROUP_ALL_TAG,
                        isSelected = true
                    )
                this.add(0, widgetComponentDetailsTemp)
            }
        }
    widgetDetailsModelState.set(widgetDetails.widgetComponentDetails)
}

}

OnUpdateState not invoke on parent recycler component . Please Help.