Skip to content

Commit

Permalink
inline a few variables to reduce clutter
Browse files Browse the repository at this point in the history 
Signed-off-by: Ivan Morgillo <imorgillo@gmail.com>
  • Loading branch information
@hamen
hamen committed Sep 23, 2024
1 parent 45e2ee5 commit 4b2e24d
Showing 1 changed file with 101 additions and 102 deletions.
203 changes: 101 additions & 102 deletions ui/src/main/kotlin/org/jetbrains/jewel/ui/component/ComboBox.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,6 @@ public fun ComboBox(
textStyle: TextStyle = JewelTheme.defaultTextStyle,
menuContent: MenuScope.() -> Unit,
) {
var skipNextClick by remember { mutableStateOf(false) }
var popupExpanded by remember { mutableStateOf(false) }
var comboBoxState by remember { mutableStateOf(DropdownState.of(enabled = isEnabled)) }
var isFocused by remember { mutableStateOf(false) }
Expand All @@ -92,124 +91,124 @@ public fun ComboBox(
when (interaction) {
is PressInteraction.Press -> comboBoxState = comboBoxState.copy(pressed = true)
is PressInteraction.Cancel,
is PressInteraction.Release -> comboBoxState = comboBoxState.copy(pressed = false)
is PressInteraction.Release
-> comboBoxState = comboBoxState.copy(pressed = false)

is HoverInteraction.Enter -> comboBoxState = comboBoxState.copy(hovered = true)
is HoverInteraction.Exit -> comboBoxState = comboBoxState.copy(hovered = false)
}
}
}

val colors = style.colors
val metrics = style.metrics
val shape = RoundedCornerShape(style.metrics.cornerSize)
val minSize = metrics.minSize
val arrowMinSize = style.metrics.arrowMinSize
val borderColor by colors.borderFor(comboBoxState)
val hasNoOutline = outline == Outline.None
val borderColor by style.colors.borderFor(comboBoxState)

var componentWidth by remember { mutableIntStateOf(-1) }
var initialTextFieldWidth by remember { mutableStateOf<Int?>(null) }
Box(
modifier =
modifier
.thenIf(!isEditable) {
Modifier.focusable(isEnabled, interactionSource).focusRequester(focusRequester).onFocusChanged {
focusState ->
modifier
.thenIf(!isEditable) {
Modifier.focusable(isEnabled, interactionSource)
.focusRequester(focusRequester)
.onFocusChanged { focusState ->
isFocused = focusState.isFocused
}
}
.background(colors.backgroundFor(comboBoxState, isEditable).value, shape)
.thenIf(hasNoOutline) {
focusOutline(state = comboBoxState, outlineShape = shape, alignment = Stroke.Alignment.Center)
.border(
alignment = Stroke.Alignment.Inside,
width = style.metrics.borderWidth,
color = borderColor,
shape = shape,
)
}
.outline(
state = comboBoxState,
outline = outline,
outlineShape = shape,
alignment = Stroke.Alignment.Center,
)
.defaultMinSize(minSize.width, minSize.height)
.onSizeChanged { componentWidth = it.width }
// Ensure the clickable modifier is after handling the focus and background
.combinedClickable(
interactionSource = interactionSource,
indication = null,
enabled = isEnabled,
role = Role.Button,
onClick = {
popupExpanded = !popupExpanded
if (isEnabled) {
if (isEditable) {
focusRequester.requestFocus()
}
.background(style.colors.backgroundFor(comboBoxState, isEditable).value, shape)
.thenIf(outline == Outline.None) {
focusOutline(state = comboBoxState, outlineShape = shape, alignment = Stroke.Alignment.Center)
.border(
alignment = Stroke.Alignment.Inside,
width = style.metrics.borderWidth,
color = borderColor,
shape = shape,
)
}
.outline(
state = comboBoxState,
outline = outline,
outlineShape = shape,
alignment = Stroke.Alignment.Center,
)
.defaultMinSize(style.metrics.minSize.width, style.metrics.minSize.height)
.onSizeChanged { componentWidth = it.width }
// Ensure the clickable modifier is after handling the focus and background
.combinedClickable(
interactionSource = interactionSource,
indication = null,
enabled = isEnabled,
role = Role.Button,
onClick = {
popupExpanded = !popupExpanded
if (isEnabled) {
if (isEditable) {
focusRequester.requestFocus()
} else {
// For non-editable, we toggle focus
if (isFocused) {
// If already focused, do nothing (keep focus)
} else {
// For non-editable, we toggle focus
if (isFocused) {
// If already focused, do nothing (keep focus)
} else {
focusRequester.requestFocus()
}
focusRequester.requestFocus()
}
}
},
)
.onKeyEvent { keyEvent ->
if (isFocused) {
// When focused, let the BasicTextField handle the key events
false
} else {
// Handle spacebar and enter keys to expand/collapse the popup
if (keyEvent.type == KeyEventType.KeyDown) {
when (keyEvent.key) {
Key.Spacebar,
Key.Enter -> {
popupExpanded = !popupExpanded
true
}
else -> false
}
},
)
.onKeyEvent { keyEvent ->
if (isFocused) {
// When focused, let the BasicTextField handle the key events
false
} else {
// Handle spacebar and enter keys to expand/collapse the popup
if (keyEvent.type == KeyEventType.KeyDown) {
when (keyEvent.key) {
Key.Spacebar,
Key.Enter
-> {
popupExpanded = !popupExpanded
true
}
} else {
false

else -> false
}
} else {
false
}
},
}
},
contentAlignment = Alignment.CenterStart,
) {
CompositionLocalProvider(LocalContentColor provides colors.contentFor(comboBoxState).value) {
CompositionLocalProvider(LocalContentColor provides style.colors.contentFor(comboBoxState).value) {
Box(
modifier =
modifier.padding(end = arrowMinSize.width).onFocusChanged {
comboBoxState = comboBoxState.copy(focused = it.isFocused)
},
modifier.padding(end = style.metrics.arrowMinSize.width).onFocusChanged {
comboBoxState = comboBoxState.copy(focused = it.isFocused)
},
contentAlignment = Alignment.CenterStart,
) {
if (isEditable) {
BasicTextField(
state = inputTextFieldState,
modifier =
modifier
.padding(style.metrics.contentPadding)
.onSizeChanged { size ->
// Track the size of the BasicTextField when it first
// renders
if (initialTextFieldWidth == null) {
initialTextFieldWidth = size.width
}
modifier
.padding(style.metrics.contentPadding)
.onSizeChanged { size ->
// Track the size of the BasicTextField when it first
// renders
if (initialTextFieldWidth == null) {
initialTextFieldWidth = size.width
}
.focusRequester(focusRequester)
.onFocusChanged { focusState -> isFocused = focusState.isFocused }
.then(
// Apply the initial width to prevent expansion
initialTextFieldWidth?.let { Modifier.width(it.dp) } ?: Modifier
),
}
.focusRequester(focusRequester)
.onFocusChanged { focusState -> isFocused = focusState.isFocused }
.then(
// Apply the initial width to prevent expansion
initialTextFieldWidth?.let { Modifier.width(it.dp) } ?: Modifier
),
lineLimits = TextFieldLineLimits.SingleLine,
textStyle = textStyle.copy(color = colors.content),
cursorBrush = SolidColor(colors.content),
textStyle = textStyle.copy(color = style.colors.content),
cursorBrush = SolidColor(style.colors.content),
interactionSource = interactionSource,
)
} else {
Expand All @@ -219,32 +218,32 @@ public fun ComboBox(
maxLines = 1,
overflow = TextOverflow.Ellipsis,
modifier =
Modifier.fillMaxWidth().padding(metrics.contentPadding).onFocusChanged { focusState ->
isFocused = focusState.isFocused
},
Modifier.fillMaxWidth().padding(style.metrics.contentPadding).onFocusChanged { focusState ->
isFocused = focusState.isFocused
},
)
}
}

Box(
modifier =
Modifier.height(IntrinsicSize.Min)
.defaultMinSize(arrowMinSize.width, arrowMinSize.height)
.align(Alignment.CenterEnd),
Modifier.height(IntrinsicSize.Min)
.defaultMinSize(style.metrics.arrowMinSize.width, style.metrics.arrowMinSize.height)
.align(Alignment.CenterEnd),
contentAlignment = Alignment.Center,
) {
if (isEditable) {
Divider(
orientation = Orientation.Vertical,
thickness = metrics.borderWidth,
color = colors.border,
thickness = style.metrics.borderWidth,
color = style.colors.border,
modifier =
Modifier.align(Alignment.CenterStart).thenIf(comboBoxState.isFocused) {
padding(vertical = 2.dp)
},
Modifier.align(Alignment.CenterStart).thenIf(comboBoxState.isFocused) {
padding(vertical = 2.dp)
},
)
}
Icon(key = style.icons.chevronDown, contentDescription = null, tint = colors.iconTint)
Icon(key = style.icons.chevronDown, contentDescription = null, tint = style.colors.iconTint)
}
}

Expand All @@ -260,9 +259,9 @@ public fun ComboBox(
true
},
modifier =
menuModifier
.focusProperties { canFocus = true }
.defaultMinSize(minWidth = with(density) { componentWidth.toDp() }),
menuModifier
.focusProperties { canFocus = true }
.defaultMinSize(minWidth = with(density) { componentWidth.toDp() }),
style = style.menuStyle,
horizontalAlignment = Alignment.Start,
content = menuContent,
Expand Down

0 comments on commit 4b2e24d

Please sign in to comment.