Should fix #1

Do not really like the API though :/

@wooodenleg What do you think?

ModalSheet(
    data = error,
    visible = { this != null },
    onDismiss = onDismiss
) { data ->
    if (data == null) {
        return@ModalSheet
    }
    // Use `data` for content
}

https://user-images.githubusercontent.com/20944869/167252435-6a31b477-d1a1-40bb-b6fb-9c14f65aee05.mp4

Description

Currently there is no way to observe the state of the modal sheet.

The use case for having this information is for example observing the "hidden" state of the sheet to chain appearance of other UI components like Dialog or even other bottom sheet. Another use case might be to modify/animate the content of the sheet in response to the expanded state. Feature request to the material bottom sheet by Colton Idle in Kotlin Slack:

I have a bottom sheet. When collapsed the padding on top of the text is perfect (according to my designer), but when it's fully expanded, we want to add extra padding so that the text is pushed down. We want the bottom sheet to go all the way up because that's what our designer wants in our edge to edge application.

Implementation

No thoughts about implementation yet but we could take "inspiration" from Material ModalBottomSheetState

Hi, i am using this API in bottom sheet content like this, but it's not working.

Column(
        Modifier
            .fillMaxSize()
            .background(MaterialTheme.colors.background)
            .statusBarsPadding()
            .navigationBarsPadding()
    ) {
    
    }

kotlin = "1.7.10"
compose_version = "1.2.1"
compose_compiler_version = "1.3.0"
lifecycle_version = "2.5.1"
accompanist = "0.25.1"
activity = "1.5.1"

Fixes https://github.com/oleksandrbalan/modalsheet/issues/5

I have added swipeState to the content scope and also add derived normalizedFraction for ease-of-use.

https://user-images.githubusercontent.com/20944869/168338837-4c2cc92f-4cc8-405a-9cf8-eac1d66167f5.mp4

Fixes https://github.com/oleksandrbalan/modalsheet/issues/4

I would keep FullscreenPopup inside this library for now to not support 2 small libraries at once.

Also:

• Remove cusom example 🪦
• Change name a bit

This PR replaces custom implementation of the bottom sheet with ModalBottomSheetLayout, take it as a suggestion.

Pros:

• Identical look&feel as official component.
• Out-of-box same configuration options (shape, elevation, scrim).
• Out-of-box LazyColumn and LazyVerticalGrid support.
• Less code - less support 🤷‍♂️

Cons:

• ModalSheet is less configurable, because bound to possibilities and API of ModalBottomSheetLayout.
• Could not provide content for scrim overlay (can be added in future).

FullScreenPopup feels more like implementation detail for "modal sheet" rather than a feature I would look for in this library. Consider making it internal or moving it to separate public artifact so the API is opt-in.

Description

Sometimes it is needed to show dynamic data in modal sheet content. Imagine error bottom sheet use-case, where if Error is not null we need to show modal, otherwise hide it. We could either wrap ModalSheet in "if" condition to show only for non-null error, or adjust content (which is animated) for null error.

Both possible solutions did not provide good experience. Either there is no exit animation, or content is "blinking" when animating out.

Sample

data class ErrorData(val title: String, val message: String)

val error = rememberSaveable { mutableStateOf<ErrorData?>(null) }

Box(
    contentAlignment = Alignment.Center,
    modifier = Modifier
        .fillMaxSize()
        .padding(padding)
) {
    Button(onClick = {
        error.value = ErrorData(
            title = "Error",
            message = "Oops, an error occurred"
        )
    }) {
        Text(text = "Error!")
    }
}

// Solution #1 - wrap in if condition
val errorValue = error.value
if (errorValue != null) {
    ModalSheet(
        visible = true,
        onDismiss = { error.value = null }
    ) {
        Column(
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.spacedBy(SpacingSmall),
            modifier = Modifier
                .fillMaxWidth()
                .navigationBarsPadding()
                .padding(SpacingMedium)
        ) {
            Text(
                text = errorValue.title,
                style = MaterialTheme.typography.h4
            )
            Text(
                text = errorValue.message,
            )
        }
    }
}

// Solution #2 - null content is visible when animated out
ModalSheet(
    visible = error.value != null,
    onDismiss = { error.value = null }
) {
    Column(
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.spacedBy(SpacingSmall),
        modifier = Modifier
            .fillMaxWidth()
            .navigationBarsPadding()
            .padding(SpacingMedium)
    ) {
        Text(
            text = error.value?.title.orEmpty(),
            style = MaterialTheme.typography.h4
        )
        Text(
            text = error.value?.message.orEmpty(),
        )
    }
}

Video

First solution to wrap in if condition, results in no exit animation. https://user-images.githubusercontent.com/20944869/167183075-409de54f-6954-4206-bc90-b488755e6958.mp4

Second solution to use null in content, results in "empty" content during exit animation. https://user-images.githubusercontent.com/20944869/167187758-c1d16bb1-d21e-44ec-adf1-78bf76763c3a.mp4