Merge pull request #485 from ricknout/main
Update :core-designsystem module based on Figma filepull/489/head
Nick Rout
2 years ago
committed by
GitHub
commit
7903f87dcc
@ -0,0 +1,78 @@
|
||||
/*
|
||||
* Copyright 2022 The Android Open Source Project
|
||||
*
|
||||
* 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
|
||||
*
|
||||
* https://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.
|
||||
*/
|
||||
|
||||
package com.google.samples.apps.nowinandroid.core.designsystem.component
|
||||
|
||||
import androidx.compose.material3.FilledIconToggleButton
|
||||
import androidx.compose.material3.IconButton
|
||||
import androidx.compose.material3.IconButtonDefaults
|
||||
import androidx.compose.material3.MaterialTheme
|
||||
import androidx.compose.runtime.Composable
|
||||
import androidx.compose.ui.Modifier
|
||||
import androidx.compose.ui.graphics.Color
|
||||
|
||||
/**
|
||||
* Now in Android toggle button with icon and checked icon content slots. Wraps Material 3
|
||||
* [IconButton].
|
||||
*
|
||||
* @param checked Whether the toggle button is currently checked.
|
||||
* @param onCheckedChange Called when the user clicks the toggle button and toggles checked.
|
||||
* @param modifier Modifier to be applied to the toggle button.
|
||||
* @param enabled Controls the enabled state of the toggle button. When `false`, this toggle button
|
||||
* will not be clickable and will appear disabled to accessibility services.
|
||||
* @param icon The icon content to show when unchecked.
|
||||
* @param checkedIcon The icon content to show when checked.
|
||||
*/
|
||||
@Composable
|
||||
fun NiaIconToggleButton(
|
||||
checked: Boolean,
|
||||
onCheckedChange: (Boolean) -> Unit,
|
||||
modifier: Modifier = Modifier,
|
||||
enabled: Boolean = true,
|
||||
icon: @Composable () -> Unit,
|
||||
checkedIcon: @Composable () -> Unit = icon
|
||||
) {
|
||||
// TODO: File bug
|
||||
// Can't use regular IconToggleButton as it doesn't include a shape (appears square)
|
||||
FilledIconToggleButton(
|
||||
checked = checked,
|
||||
onCheckedChange = onCheckedChange,
|
||||
modifier = modifier,
|
||||
enabled = enabled,
|
||||
colors = IconButtonDefaults.iconToggleButtonColors(
|
||||
checkedContainerColor = MaterialTheme.colorScheme.primaryContainer,
|
||||
checkedContentColor = MaterialTheme.colorScheme.onPrimaryContainer,
|
||||
disabledContainerColor = if (checked) {
|
||||
MaterialTheme.colorScheme.onBackground.copy(
|
||||
alpha = NiaIconButtonDefaults.DisabledIconButtonContainerAlpha
|
||||
)
|
||||
} else {
|
||||
Color.Transparent
|
||||
}
|
||||
)
|
||||
) {
|
||||
if (checked) checkedIcon() else icon()
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Now in Android icon button default values.
|
||||
*/
|
||||
object NiaIconButtonDefaults {
|
||||
// TODO: File bug
|
||||
// IconToggleButton disabled container alpha not exposed by IconButtonDefaults
|
||||
const val DisabledIconButtonContainerAlpha = 0.12f
|
||||
}
|
||||
@ -1,107 +0,0 @@
|
||||
/*
|
||||
* Copyright 2022 The Android Open Source Project
|
||||
*
|
||||
* 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
|
||||
*
|
||||
* https://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.
|
||||
*/
|
||||
|
||||
package com.google.samples.apps.nowinandroid.core.designsystem.component
|
||||
|
||||
import androidx.compose.foundation.layout.Box
|
||||
import androidx.compose.foundation.layout.size
|
||||
import androidx.compose.foundation.layout.sizeIn
|
||||
import androidx.compose.foundation.selection.toggleable
|
||||
import androidx.compose.material3.IconButton
|
||||
import androidx.compose.material3.LocalContentColor
|
||||
import androidx.compose.material3.MaterialTheme
|
||||
import androidx.compose.material3.contentColorFor
|
||||
import androidx.compose.runtime.Composable
|
||||
import androidx.compose.runtime.CompositionLocalProvider
|
||||
import androidx.compose.ui.Modifier
|
||||
import androidx.compose.ui.draw.drawBehind
|
||||
import androidx.compose.ui.graphics.Color
|
||||
import androidx.compose.ui.platform.LocalDensity
|
||||
import androidx.compose.ui.semantics.Role
|
||||
import androidx.compose.ui.unit.Dp
|
||||
import androidx.compose.ui.unit.dp
|
||||
|
||||
/**
|
||||
* Now in Android toggle button with icon and checked icon content slots. Wraps Material 3
|
||||
* [IconButton].
|
||||
*
|
||||
* @param checked Whether the toggle button is currently checked.
|
||||
* @param onCheckedChange Called when the user clicks the toggle button and toggles checked.
|
||||
* @param modifier Modifier to be applied to the toggle button.
|
||||
* @param enabled Controls the enabled state of the toggle button. When `false`, this toggle button
|
||||
* will not be clickable and will appear disabled to accessibility services.
|
||||
* @param icon The icon content to show when unchecked.
|
||||
* @param checkedIcon The icon content to show when checked.
|
||||
* @param size The size of the toggle button.
|
||||
* @param iconSize The size of the icon.
|
||||
* @param backgroundColor The background color when unchecked.
|
||||
* @param checkedBackgroundColor The background color when checked.
|
||||
* @param iconColor The icon color when unchecked.
|
||||
* @param iconColor The icon color when checked.
|
||||
*/
|
||||
@Composable
|
||||
fun NiaToggleButton(
|
||||
checked: Boolean,
|
||||
onCheckedChange: (Boolean) -> Unit,
|
||||
modifier: Modifier = Modifier,
|
||||
enabled: Boolean = true,
|
||||
icon: @Composable () -> Unit,
|
||||
checkedIcon: @Composable () -> Unit = icon,
|
||||
size: Dp = NiaToggleButtonDefaults.ToggleButtonSize,
|
||||
iconSize: Dp = NiaToggleButtonDefaults.ToggleButtonIconSize,
|
||||
backgroundColor: Color = Color.Transparent,
|
||||
checkedBackgroundColor: Color = MaterialTheme.colorScheme.primaryContainer,
|
||||
iconColor: Color = contentColorFor(backgroundColor),
|
||||
checkedIconColor: Color = contentColorFor(checkedBackgroundColor)
|
||||
) {
|
||||
val radius = with(LocalDensity.current) { (size / 2).toPx() }
|
||||
IconButton(
|
||||
onClick = { onCheckedChange(!checked) },
|
||||
modifier = modifier
|
||||
.size(size)
|
||||
.toggleable(value = checked, enabled = enabled, role = Role.Button, onValueChange = {
|
||||
onCheckedChange(!checked)
|
||||
})
|
||||
.drawBehind {
|
||||
drawCircle(
|
||||
color = if (checked) checkedBackgroundColor else backgroundColor,
|
||||
radius = radius
|
||||
)
|
||||
},
|
||||
enabled = enabled,
|
||||
content = {
|
||||
Box(
|
||||
modifier = Modifier.sizeIn(
|
||||
maxWidth = iconSize,
|
||||
maxHeight = iconSize
|
||||
)
|
||||
) {
|
||||
val contentColor = if (checked) checkedIconColor else iconColor
|
||||
CompositionLocalProvider(LocalContentColor provides contentColor) {
|
||||
if (checked) checkedIcon() else icon()
|
||||
}
|
||||
}
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* Now in Android toggle button default values.
|
||||
*/
|
||||
object NiaToggleButtonDefaults {
|
||||
val ToggleButtonSize = 40.dp
|
||||
val ToggleButtonIconSize = 18.dp
|
||||
}
|
||||
Loading…
Reference in new issue