Skip to content

Commit

Permalink
Merge pull request DroidKaigi#712 from takathemax/edge-to-edge-search
Browse files Browse the repository at this point in the history 
Applied edge to edge to search screen
  • Loading branch information
@takahirom
takahirom authored Sep 24, 2022
2 parents 2847045 + 45ec0f9 commit e8edeef
Showing 1 changed file with 96 additions and 41 deletions.
137 changes: 96 additions & 41 deletions feature/sessions/src/main/java/io/github/droidkaigi/confsched2022/feature/sessions/Search.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,36 +9,36 @@ import androidx.compose.foundation.interaction.PressInteraction
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.WindowInsets
import androidx.compose.foundation.layout.WindowInsetsSides
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.only
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.safeDrawing
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.layout.windowInsetsPadding
import androidx.compose.foundation.layout.wrapContentHeight
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.text.BasicTextField
import androidx.compose.foundation.text.KeyboardActions
import androidx.compose.material.BottomSheetScaffold
import androidx.compose.material.BottomSheetValue
import androidx.compose.material.ExperimentalMaterialApi
import androidx.compose.material.IconButton
import androidx.compose.material.rememberBottomSheetScaffoldState
import androidx.compose.material3.CircularProgressIndicator
import androidx.compose.material3.Divider
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.material3.TextField
import androidx.compose.material3.TextFieldDefaults
import androidx.compose.material3.TopAppBar
import androidx.compose.material3.TopAppBarDefaults
import androidx.compose.material3.surfaceColorAtElevation
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
Expand All @@ -51,19 +51,24 @@ import androidx.compose.ui.ExperimentalComposeUiApi
import androidx.compose.ui.Modifier
import androidx.compose.ui.focus.FocusRequester
import androidx.compose.ui.focus.focusRequester
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.SolidColor
import androidx.compose.ui.platform.LocalSoftwareKeyboardController
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.semantics.CustomAccessibilityAction
import androidx.compose.ui.semantics.clearAndSetSemantics
import androidx.compose.ui.semantics.customActions
import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.input.VisualTransformation
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.hilt.navigation.compose.hiltViewModel
import dev.icerock.moko.resources.compose.stringResource
import io.github.droidkaigi.confsched2022.designsystem.components.KaigiScaffold
import io.github.droidkaigi.confsched2022.designsystem.theme.KaigiTheme
import io.github.droidkaigi.confsched2022.designsystem.theme.Typography
import io.github.droidkaigi.confsched2022.model.DroidKaigi2022Day
import io.github.droidkaigi.confsched2022.model.DroidKaigiSchedule
import io.github.droidkaigi.confsched2022.model.Filters
Expand Down Expand Up @@ -182,23 +187,23 @@ private fun SearchScreen(
val searchWord = rememberSaveable { mutableStateOf("") }
KaigiScaffold(
modifier = modifier,
topBar = {},
topBar = {
if (uiModel.state is Success) {
SearchTextFieldTopAppBar(
searchWord = searchWord.value,
onSearchWordChange = { searchWord.value = it },
onSearchTextAreaClicked = onSearchTextAreaClicked,
onBackClick = onBackIconClick
)
}
},
content = {
Column(
modifier = Modifier.windowInsetsPadding(
WindowInsets.safeDrawing.only(WindowInsetsSides.Vertical)
)
modifier = Modifier.padding(paddingValues = it)
) {
when (uiModel.state) {
is Error -> TODO()
is Success -> {
SearchTextField(
searchWord = searchWord.value,
onSearchWordChange = { searchWord.value = it },
onSearchTextAreaClicked = onSearchTextAreaClicked,
) {
onBackIconClick()
}
SearchFilter(
modifier = Modifier
.fillMaxWidth()
Expand All @@ -225,14 +230,54 @@ private fun SearchScreen(
)
}

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun SearchTextFieldTopAppBar(
searchWord: String,
onSearchWordChange: (String) -> Unit,
onSearchTextAreaClicked: () -> Unit,
onBackClick: () -> Unit,
modifier: Modifier = Modifier,
backgroundColor: Color = MaterialTheme.colorScheme.surfaceVariant,
) {
Column {
TopAppBar(
modifier = modifier,
navigationIcon = {
IconButton(onClick = onBackClick) {
Icon(
painter = painterResource(id = R.drawable.ic_baseline_arrow_back_24),
contentDescription = "back"
)
}
},
title = {
SearchTextField(
modifier = Modifier
.background(color = backgroundColor),
searchWord = searchWord,
onSearchWordChange = onSearchWordChange,
onSearchTextAreaClicked = onSearchTextAreaClicked
)
},
colors = TopAppBarDefaults
.smallTopAppBarColors(containerColor = backgroundColor)
)
Divider(
thickness = 1.dp,
color = MaterialTheme.colorScheme.outline
)
}
}

@OptIn(ExperimentalMaterial3Api::class, ExperimentalComposeUiApi::class)
@Composable
private fun SearchTextField(
searchWord: String,
onSearchWordChange: (String) -> Unit,
onSearchTextAreaClicked: () -> Unit,
modifier: Modifier = Modifier,
onBackClick: () -> Unit = {},
textStyle: TextStyle = Typography.titleMedium,
) {
val keyboardController = LocalSoftwareKeyboardController.current
val focusRequester = remember { FocusRequester() }
Expand All @@ -248,38 +293,48 @@ private fun SearchTextField(
}
}
}
TextField(

BasicTextField(
value = searchWord,
modifier = modifier
.fillMaxWidth(1.0f)
.height(64.dp)
.background(color = MaterialTheme.colorScheme.surfaceVariant)
.focusRequester(focusRequester),
placeholder = { Text(stringResource(Strings.search_placeholder)) },
onValueChange = onSearchWordChange,
textStyle = textStyle.copy(color = MaterialTheme.colorScheme.onSurface),
cursorBrush = SolidColor(MaterialTheme.colorScheme.primary),
singleLine = true,
keyboardActions = KeyboardActions(onDone = { keyboardController?.hide() }),
leadingIcon = {
Icon(
painter = painterResource(id = R.drawable.ic_baseline_arrow_back_24),
contentDescription = "arrow_back_icon",
modifier = modifier
.clickable { onBackClick() }
)
},
trailingIcon = {
IconButton(
onClick = { onSearchWordChange("") }
) {
Icon(
painter = painterResource(id = R.drawable.ic_delete),
contentDescription = "search_word_delete_icon",
)
}
},
onValueChange = {
onSearchWordChange(it)
},
interactionSource = interactionSource,
decorationBox = @Composable { innerTextField ->
TextFieldDefaults.TextFieldDecorationBox(
value = searchWord,
visualTransformation = VisualTransformation.None,
innerTextField = innerTextField,
placeholder = { Text(stringResource(Strings.search_placeholder)) },
trailingIcon = {
IconButton(
onClick = { onSearchWordChange("") }
) {
Icon(
painter = painterResource(id = R.drawable.ic_delete),
contentDescription = "search_word_delete_icon",
)
}
},
singleLine = true,
enabled = true,
colors = TextFieldDefaults.textFieldColors(),
interactionSource = remember { MutableInteractionSource() },
contentPadding = PaddingValues(
top = 16.dp,
bottom = 16.dp,
start = 0.dp,
end = 16.dp
)
)
}
)
}

Expand Down

0 comments on commit e8edeef

Please sign in to comment.