compose sonner

Tuliskan Sonner

Komponen bersulang yang bertentangan untuk menyusun multiplatform.

Ini adalah implementasi Sonner - perpustakaan roti panggang yang sangat baik oleh Emilkowalski.

Demo

Demo wasmjs

https://dokar3.github.io/compose-sonner/

Video

compose-sonner-mall.mp4

Fitur

• Hampir sama dengan implementasi bereaksi Emilkowalski: UI, animasi, dan bahkan API. Ini termasuk:
  • Tumpukan roti panggang dan bersulang
  • Jenis yang berbeda dan warna yang kaya
  • Transisi
  • Posisi (keberpihakan)
  • Geser ke bawah untuk memberhentikan
  • Tutup Tombol dan Tombol Tindakan
  • Ikon khusus
  • Durasi
• Malas dan pertunjukan, Anda dapat menampilkan banyak roti panggang sekaligus
• Sepenuhnya dapat disesuaikan, Anda dapat membuat komposanya sendiri di atasnya
• Mendukung bahan 2 dan material 3 karena tidak bergantung padanya

Peta jalan

• target iOS. Selesai di #8, terima kasih untuk @shubhamsinghshubham777!
• Sampel wasmj online

Penggunaan

Instalasi

build.gradle (.kts)

implementation( " io.github.dokar3:sonner:<VERSION> " )

libs.versions.toml

 sonner = { module = " io.github.dokar3:sonner " , version = " <VERSION> " }

Dasar

 val toaster = rememberToasterState()

Button (onClick = { toaster.show( " Hello world! " ) }) {
    Text ( " Show a toast " )
}

Toaster (state = toaster)

Tipe

toaster.show(
    message = " Message " ,
    type = ToastType .[ Normal | Success | Info | Warning | Error ],
)

Tema Gelap

toaster.show(
    message = " Message " ,
    darkTheme = true ,
)

Posisi

 Toaster (
    state = toaster,
    alignment = Alignment .[ TopStart | TopCenter | TopEnd | BottomStart | BottomCener | BottomEnd ],
)

Durasi

toaster.show(
    message = " Message " ,
    duration = [ ToasterDefaults . DurationLong | 5000 .milliseconds | Duration . INFINITE ],
)

Pembaruan

 const val TOAST_ID_LOADING = ANYTHING

toaster.show(message = " Loading " , id = TOAST_ID_LOADING , duration = Duration . INFINITE )

toaster.show(message = " Success " , id = TOAST_ID_LOADING )

Membubarkan

toaster.dismiss(id)
toaster.dismiss(toast)
toaster.dismissAll()

Tombol

 // Enable close buttons
Toaster (
    state = toaster,
    showCloseButton = true ,
)

// Set an action button
toaster.show(
    message = " Message " ,
    action = TextToastAction (
        text = " Dismiss " ,
        onClick = { toaster.dismiss(it) },
    )
)

Ikon

 Toaster (
    state = toaster,
    iconSlot = { toast ->
        // ICON_LOADING can be anything, it's just a mark
        if (toast.icon == ICON_LAODING ) {
            LoadingIcon ()
        } else {
            // Fallback to the default icon slot
            ToasterDefaults .iconSlot(toast)
        }
    },
)

Mengabaikan jeda

 Toaster (
    state = toaster,
    dismissPause = ToastDismissPause .[ Never | OnNotFront | OnInvisible ],
)

Lainnya

@Composable
fun Toaster (
    contentColor : @Composable (toast : Toast ) -> Color ,
    border : @Composable (toast : Toast ) -> BorderStroke ,
    background : @Composable (toast : Toast ) -> Brush ,
    shape : @Composable (toast : Toast ) -> Shape ,
    elevation : Dp ,
    shadowAmbientColor : Color ,
    shadowSpotColor : Color ,
    contentPadding : PaddingValues ,
    containerPadding : @Composable (toast : Toast ) -> PaddingValues ,
    widthPolicy : @Composable (toast : Toast ) -> ToastWidthPolicy ,
    offset : IntOffet ,
)

Berinteraksi dengan viewmodel uistate

Tentukan fungsi pemetaan

 fun UiMessage. toToast (): Toast = when ( this ) {
    is UiMessage . Error -> Toast (id = id, message = message, type = ToastType . Error )
    is UiMessage . Success -> Toast (id = id, message = message, type = ToastType . Success )
}

Kemudian

 val toaster = rememberToasterState(
    onDismissed = { viewModel.removeUiMessageById(it.id as Long ) },
)

val uiState by viewModel.uiState.collectAsState()

LaunchedEffect (viewModel, toaster) {
    // Listen to messages changes and map to toasts
    val toastsFlow = viewModel.uiState.map { it.uiMessages.map( UiMessage ::toToast) }
    toaster.listenMany(toastsFlow)
}

Toaster (state = toaster)

Atau gunakan fungsi adaptor

@Composable
fun UiMessageToaster (
    messages : List < UiMessage >,
    onRemoveMessage : (id: Long ) -> Unit ,
    modifier : Modifier = Modifier ,
) {
    val toaster = rememberToasterState(
        onToastDismissed = { onRemoveMessage(it.id as Long ) },
    )

    val currentMessages by rememberUpdatedState(messages)

    LaunchedEffect (toaster) {
        // Listen to State<List<UiMessage>> changes and map to toasts
        toaster.listenMany { currentMessages.map( UiMessage ::toToast) }
    }

    Toaster (state = toaster, modifier = modifier)
}

@Composable
fun YourScreen (...) {
    val uiState by viewModel.uiState.collectAsState()

    .. .

    UiMessageToaster (
        messages = uiState.uiMessages,
        onRemoveMessage = { viewModel.removeUiMessageById(it) },
    )
}

Lisensi

 Copyright 2024 dokar3

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.