is there a neater way to conditionally apply modifiers than ```modifier = modifier .let { if(canBe...

# compose

[xxfast]

is there a neater way to conditionally apply modifiers than

modifier = modifier
  .let { if(canBeExpanded) it.clickable { expanded = !expanded } else it }

[Francesc]

you can use then,

modifier = modifier.then(
   if (condition) Modifier.clickable {} else MOdifier
)

[xxfast]

not sure if that's any neater though

modifier = modifier
  .then( if(canBeExpanded) Modifier.clickable { expanded = !expanded } else Modifier)
  .run { if(canBeExpanded) clickable { expanded = !expanded } else this }

trying to avoid that else part, apply compiles but doesn't seem to work, not sure why

.apply { if(canBeExpanded) clickable { expanded = !expanded } }

[Francesc]

if you have complex logic, you might want to consider an extension function, or using composed

[Francesc]

for simple logic then seems to be the preferred approach, if you check the compose code that's what it uses under the hood, for instance

@Stable
@Suppress("ModifierInspectorInfo")
fun Modifier.fillMaxWidth(/*@FloatRange(from = 0.0, to = 1.0)*/ fraction: Float = 1f) =
    this.then(if (fraction == 1f) FillWholeMaxWidth else createFillWidthModifier(fraction))

[xxfast]

Extension like this

fun Modifier.on(condition: Boolean, block: Modifier.() -> Modifier): Modifier =
  if(condition) block() else this

can make the call site look like

modifier = modifier
  .on(canBeExpanded) { clickable { expanded = !expanded } }

but this comes at the cost of indirection i guess

[Francesc]

in your particular case, couldn't you always have the clickable modifier and then use enabled to control whether it's actually clickable?

[xxfast]

how so?

[Francesc]

using this version of clickable

fun Modifier.clickable(
    enabled: Boolean = true,
    onClickLabel: String? = null,
    role: Role? = null,
    onClick: () -> Unit
)

[Francesc]

with enabled = condition

[xxfast]

ah much simpler 👍 thanks

[agrosner]

/**
 * Convenience for modifiers that should only apply if [condition] is true.
 * [elseFn] useful for conditional else-logic.
 */
inline fun Modifier.thenIf(
    condition: Boolean,
    modifierFn: Modifier.() -> Modifier,
) = this.let {
    if (condition) {
        it.modifierFn()
    } else {
        it
    }
}


/**
 * Convenience for modifiers that should only apply if [condition] is true.
 * [elseFn] useful for conditional else-logic.
 */
inline fun Modifier.thenIf(
    condition: Boolean,
    modifierFn: Modifier.() -> Modifier,
    elseFn: Modifier.() -> Modifier,
) = this.let {
    if (condition) {
        it.modifierFn()
    } else {
        it.elseFn()
    }
}

[agrosner]

we use these functions extensively for this specific use case

[Colton Idle]

I asked about something similar a while back:

https://kotlinlang.slack.com/archives/CJLTWPH7S/p1638332547357800

[Zach Klippenstein (he/him) [MOD]]

For the record, apply doesn't work because apply returns its receiver, not the last expression in the lambda. You'd want run or let.