Search customisation

myCustomCatalogSuccessSearchImp.kt

class MyCustomCatalogSuccessSearchImp: CatalogSuccessSearch {

    @Composable
    override fun Content(params: CatalogSuccessSearchParameters) {
        // Your custom design here 
    }
}

example

class MyCustomCatalogSuccessSearchImp : CatalogSuccessSearch {
    @Composable
    override fun Content(params: CatalogSuccessSearchParameters) {

        val textState = remember { mutableStateOf("") }
        Box(
            Modifier
                .fillMaxSize()
                .background(white)
        ) {
            Column(modifier = Modifier.padding(horizontal = 10.dp)) {
                BackButton(params.onClose)
                SearchContainer {
                    val focusRequester = FocusRequester()
                    TextField(
                        modifier = Modifier
                            .focusRequester(focusRequester)
                            .onFocusChanged {
                                textState.value = ""
                            },
                        singleLine = true,
                        value = textState.value,
                        onValueChange = { textState.value = it },
                        colors = TextFieldDefaults.textFieldColors(
                            disabledTextColor = Color.Transparent,
                            backgroundColor = Color.White,
                            focusedIndicatorColor = Color.Transparent,
                            unfocusedIndicatorColor = Color.Transparent,
                            disabledIndicatorColor = Color.Transparent
                        ),
                        placeholder = { Text(Localisation.catalog.searchPlaceholder.localised) },
                        keyboardOptions = KeyboardOptions.Default.copy(
                            imeAction = ImeAction.Search
                        ),
                        keyboardActions = KeyboardActions(
                            onSearch = {
                                params.onApply(textState.value)
                            }
                        ),
                    )
                    SearchButton(textState, params.onApply)
                }
            }
        }

    }

    @Composable
    fun BackButton(close: () -> Unit) {
        Row(Modifier.fillMaxWidth()) {
            Clickable(onClick = close) {
                Image(
                    painter = painterResource(toggleCaret),
                    contentDescription = "Back button",
                    Modifier
                        .rotate(180f)
                        .padding(vertical = 8.dp)
                )
            }
        }
    }

    @Composable
    fun SearchContainer(children: @Composable () -> Unit) {
        Row(
            Modifier
                .fillMaxWidth()
                .border(
                    border = BorderStroke(1.dp, primary),
                    shape = RoundedCornerShape(50)
                ),
            verticalAlignment = Alignment.CenterVertically,
            horizontalArrangement = Arrangement.SpaceBetween
        ) {
            children()
        }
    }

    @Composable
    fun SearchButton(textState: MutableState<String>, apply: (String) -> Unit) {

        Surface(
            shape = CircleShape,
            elevation = 8.dp,
            modifier = Modifier
                .padding(horizontal = 10.dp)
                .clickable {
                    apply(textState.value)
                }) {
            Box(
                Modifier.background(primary).padding(8.dp)
            )
            {
                Image(
                    painter = painterResource(search),
                    contentDescription = "Search button",
                    colorFilter = ColorFilter.tint(white)
                )
            }
        }
    }
}

Params

data class CatalogSuccessSearchParameters(
    val onClose: () -> Unit, // to call when user leaves page without saving or applying his changes
    val onApply: (String) -> Unit // to call before navigating to result page
)

Resource

Name	Resource ID	Value Fr	Value Eng
searchPlaceholder	com_miam_catalog_filter_search_placeholder	Rechercher	Search