Skip to content

Commit da28f6b

Browse files
ShreckYeShreckYe
committed
WIP
1 parent 6e170ef commit da28f6b

File tree

6 files changed

+85
-11
lines changed

6 files changed

+85
-11
lines changed

‎demo/src/commonMain/kotlin/com/huanshankeji/compose/material/demo/Material3.kt‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -209,7 +209,7 @@ fun Material3(/*modifier: Modifier = Modifier*/
209209
ExposedDropdownMenuBoxWithTextField(
210210
expanded, setExpanded,
211211
textFieldArgs = ExposedDropdownMenuBoxTextFieldArgs(
212-
selection?.name ?: "", label = "Please select"
212+
selection?.name ?: "", label = "Please select", readOnly = false
213213
),
214214
exposedDropdownMenuArgs = ExposedDropdownMenuArgs(expanded, close, close) {
215215
DropdownMenuContent(setSelection, close)

‎material3/src/commonMain/kotlin/com/huanshankeji/compose/material3/Badge.kt‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import com.huanshankeji.compose.ui.Modifier
1414
@Deprecated(
1515
"This component is not displayed correctly on JS DOM. " +
1616
"It seems to be displayed with absolute position. " +
17-
"See https://github.com/material-components/material-web/blob/main/labs/badge/internal/_badge.scss#L40."
17+
"See https://github.com/material-components/material-web/blob/516cbc02bf770b7c3c5c6b546f1e5d81939b9f23/labs/badge/internal/_badge.scss#L40 ."
1818
)
1919
@Composable
2020
expect fun Badge(

‎material3/src/commonMain/kotlin/com/huanshankeji/compose/material3/ext/ExposedDropdownMenu.kt‎

Lines changed: 39 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -41,8 +41,6 @@ expect class ExposedDropdownMenuBoxScope {
4141
//TODO for `DropdownMenuItem`: `contentPadding = ExposedDropdownMenuDefaults.ItemContentPadding`
4242
}
4343

44-
45-
// TODO rename to `ExposedDropdownMenuBoxWithFilledTextField`
4644
@Composable
4745
fun ExposedDropdownMenuBoxWithTextField(
4846
expanded: Boolean,
@@ -62,6 +60,39 @@ fun ExposedDropdownMenuBoxWithTextField(
6260
}
6361
}
6462

63+
/**
64+
* An alias of [ExposedDropdownMenuBoxWithTextField].
65+
*/
66+
@Composable
67+
fun ExposedDropdownMenuBoxWithFilledTextField(
68+
expanded: Boolean,
69+
onExpandedChange: (Boolean) -> Unit,
70+
modifier: Modifier = Modifier,
71+
textFieldArgs: ExposedDropdownMenuBoxTextFieldArgs,
72+
//scrollState: ScrollState = rememberScrollState(),
73+
exposedDropdownMenuArgs: ExposedDropdownMenuArgs
74+
) =
75+
ExposedDropdownMenuBoxWithTextField(expanded, onExpandedChange, modifier, textFieldArgs, exposedDropdownMenuArgs)
76+
77+
@Composable
78+
fun ExposedDropdownMenuBoxWithOutlinedTextField(
79+
expanded: Boolean,
80+
onExpandedChange: (Boolean) -> Unit,
81+
modifier: Modifier = Modifier,
82+
textFieldArgs: ExposedDropdownMenuBoxTextFieldArgs,
83+
//scrollState: ScrollState = rememberScrollState(),
84+
exposedDropdownMenuArgs: ExposedDropdownMenuArgs
85+
) =
86+
// adapted from the examples in https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#ExposedDropdownMenuBox(kotlin.Boolean,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Function1)
87+
ExposedDropdownMenuBox(expanded, onExpandedChange, modifier) {
88+
ExposedDropdownMenuBoxOutlinedTextField(expanded, textFieldArgs)
89+
with(exposedDropdownMenuArgs) {
90+
ExposedDropdownMenu(
91+
this.expanded, onDismissRequestComposeUi, onCloseJsDom, this.modifier, content
92+
)
93+
}
94+
}
95+
6596
class ExposedDropdownMenuBoxTextFieldArgs(
6697
val value: String,
6798
val onValueChange: (String) -> Unit = {}, // pass this only when specifying custom values in the text field
@@ -77,6 +108,12 @@ expect fun ExposedDropdownMenuBoxScope.ExposedDropdownMenuBoxTextField(
77108
)
78109
// TODO Set `menuAnchor` on the icon too when the text field is editable and `MenuAnchorType.SecondaryEditable` is supported. See https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#ExposedDropdownMenuBox(kotlin.Boolean,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Function1).
79110

111+
@Composable
112+
expect fun ExposedDropdownMenuBoxScope.ExposedDropdownMenuBoxOutlinedTextField(
113+
expanded: Boolean,
114+
args: ExposedDropdownMenuBoxTextFieldArgs
115+
)
116+
80117
class ExposedDropdownMenuArgs(
81118
val expanded: Boolean,
82119
val onDismissRequestComposeUi: () -> Unit,

‎material3/src/composeUiMain/kotlin/com/huanshankeji/compose/material3/ext/ExposedDropdownMenu.composeUi.kt‎

Lines changed: 22 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,6 @@
11
package com.huanshankeji.compose.material3.ext
22

3-
import androidx.compose.material3.ExperimentalMaterial3Api
4-
import androidx.compose.material3.ExposedDropdownMenuDefaults
5-
import androidx.compose.material3.Text
6-
import androidx.compose.material3.TextField
3+
import androidx.compose.material3.*
74
import androidx.compose.runtime.Composable
85
import com.huanshankeji.compose.ui.Modifier
96
import com.huanshankeji.compose.ui.PlatformModifier
@@ -23,7 +20,7 @@ actual fun ExposedDropdownMenuBox(
2320
@OptIn(ExperimentalMaterial3Api::class)
2421
actual class ExposedDropdownMenuBoxScope(val platformValue: androidx.compose.material3.ExposedDropdownMenuBoxScope) {
2522
actual fun Modifier.menuAnchor(): Modifier =
26-
platformModify { with(platformValue) { menuAnchor() } } // TODO add `type`
23+
platformModify { with(platformValue) { menuAnchor() } } // TODO add `type` and `disabled` and try to unify the behavior with JS
2724

2825
@Composable
2926
actual fun ExposedDropdownMenu(
@@ -60,4 +57,24 @@ actual fun ExposedDropdownMenuBoxScope.ExposedDropdownMenuBoxTextField(
6057
)
6158
}
6259

60+
@Composable
61+
actual fun ExposedDropdownMenuBoxScope.ExposedDropdownMenuBoxOutlinedTextField(
62+
expanded: Boolean,
63+
args: ExposedDropdownMenuBoxTextFieldArgs
64+
) =
65+
with(args) {
66+
@OptIn(ExperimentalMaterial3Api::class)
67+
OutlinedTextField(
68+
// TODO add `type`
69+
modifier = with(platformValue) { PlatformModifier.menuAnchor(/*MenuAnchorType.PrimaryNotEditable*/) }, // `MenuAnchorType` seems to be not supported in the latest version of Compose Multiplatform yet
70+
value = value,
71+
onValueChange = onValueChange,
72+
readOnly = readOnly,
73+
singleLine = singleLine,
74+
label = { Text(label) },
75+
trailingIcon = { ExposedDropdownMenuDefaults.TrailingIcon(expanded = expanded) },
76+
colors = ExposedDropdownMenuDefaults.textFieldColors(),
77+
)
78+
}
79+
6380
//internal expect fun menuAnchorModifier(editable: Boolean)

‎material3/src/jsMain/kotlin/com/huanshankeji/compose/material3/ext/ExposedDropdownMenu.js.kt‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -100,3 +100,23 @@ actual fun ExposedDropdownMenuBoxScope.ExposedDropdownMenuBoxTextField(
100100
}
101101
)
102102
}
103+
104+
@Composable
105+
actual fun ExposedDropdownMenuBoxScope.ExposedDropdownMenuBoxOutlinedTextField(
106+
expanded: Boolean,
107+
args: ExposedDropdownMenuBoxTextFieldArgs
108+
) =
109+
with(args) {
110+
// adapted from the `composeUi` one
111+
OutlinedTextField(
112+
modifier = Modifier.menuAnchor(/*MenuAnchorType.PrimaryNotEditable*/),
113+
value = value,
114+
onValueChange = onValueChange,
115+
readOnly = readOnly,
116+
singleLine = singleLine,
117+
label = label,
118+
trailingIcon = { modifier ->
119+
Icon(Icons.Filled.ArrowDropDown, null, if (expanded) modifier.rotate(180f) else modifier)
120+
}
121+
)
122+
}

‎material3/src/jsMain/kotlin/com/huanshankeji/compose/material3/ext/Menu.js.kt‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,14 @@ import androidx.compose.web.events.SyntheticEvent
66
import com.huanshankeji.compose.html.material3.*
77
import com.huanshankeji.compose.ui.Modifier
88
import com.huanshankeji.compose.ui.toAttrs
9-
import com.huanshankeji.compose.web.attributes.Attrs
109
import com.huanshankeji.compose.web.attributes.isFalseOrNull
1110
import com.huanshankeji.compose.web.attributes.isTrueOrNull
1211
import com.varabyte.kobweb.compose.ui.attrsModifier
1312
import com.varabyte.kobweb.compose.ui.toAttrs
1413
import org.jetbrains.compose.web.attributes.AttrsScope
1514
import org.jetbrains.compose.web.css.Position
1615
import org.jetbrains.compose.web.css.position
16+
import org.jetbrains.compose.web.dom.AttrBuilderContext
1717
import org.jetbrains.compose.web.dom.Div
1818
import org.jetbrains.compose.web.dom.ElementScope
1919
import org.w3c.dom.HTMLDivElement
@@ -25,7 +25,7 @@ internal fun CommonDropdownMenu(
2525
expanded: Boolean,
2626
onCloseJsDom: () -> Unit,
2727
//onDismissRequest: () -> Unit,
28-
attrs: Attrs<MdMenuElement>?,
28+
attrs: AttrBuilderContext<MdMenuElement>?,
2929
offset: DpOffset = defaultDpOffset,
3030
content: @Composable ElementScope<MdMenuElement>.() -> Unit
3131
//onExpandedChange: ((Boolean) -> Unit)? = null

0 commit comments

Comments
 (0)