generated from mpetuska/template-kmp-library
-
-
Notifications
You must be signed in to change notification settings - Fork 11
kmdc-menu and kmdc-menu-surface #67
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Merged
Merged
Changes from all commits
Commits
Show all changes
9 commits
Select commit
Hold shift + click to select a range
7dbb6cb
kmdc-menu and kmdc-menu-surface
pocharlebois 08e6c32
Refactor MDCMenu based on newer MDC components
pocharlebois 24910ef
kmdc-menu - remove text opts for MenuItem
pocharlebois f4eca9f
kmdc-menu - correct use of scope
pocharlebois 12ebf42
kmdc-menu - Separate SideEffect for each opts
pocharlebois 36a86ba
kmdc-menu - Remove unnecessary MenuSurfaceAnchorAttrsScope
pocharlebois 03ba656
kmdc-menu - Fix setAnchorCorner
pocharlebois f617fb2
kmdc-menu - setAnchorCorder as Byte
pocharlebois e4f3b02
kdmc-menu - Import Corner byte definition from Material API
pocharlebois File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| import util.mdcVersion | ||
|
|
||
| plugins { | ||
| id("plugin.library-compose") | ||
| id("plugin.publishing-mpp") | ||
| } | ||
|
|
||
| kotlin { | ||
| sourceSets { | ||
| named("jsMain") { | ||
| dependencies { | ||
| api(project(":kmdc:kmdc-core")) | ||
| api(npm("@material/menu-surface", mdcVersion)) | ||
| } | ||
| } | ||
| } | ||
| } |
40 changes: 40 additions & 0 deletions
40
kmdc/kmdc-menu-surface/src/jsMain/kotlin/MDCMenuSurface.kt
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,40 @@ | ||
| package dev.petuska.kmdc.menu.surface | ||
|
|
||
| import androidx.compose.runtime.Composable | ||
| import dev.petuska.kmdc.core.Builder | ||
| import dev.petuska.kmdc.core.MDCDsl | ||
| import dev.petuska.kmdc.core.initialiseMDC | ||
| import org.jetbrains.compose.web.attributes.AttrsBuilder | ||
| import org.jetbrains.compose.web.dom.ContentBuilder | ||
| import org.jetbrains.compose.web.dom.Div | ||
| import org.w3c.dom.HTMLDivElement | ||
|
|
||
| @JsModule("@material/menu-surface/dist/mdc.menu-surface.css") | ||
| private external val MDCMenuSurfaceStyle: dynamic | ||
|
|
||
| public data class MDCMenuSurfaceOpts( | ||
| public var fixed: Boolean = false, | ||
| ) | ||
|
|
||
| /** | ||
| * [JS API](https://github.com/material-components/material-components-web/tree/v13.0.0/packages/mdc-menu-surface) | ||
| */ | ||
| @MDCDsl | ||
| @Composable | ||
| public fun MDCMenuSurface( | ||
| opts: Builder<MDCMenuSurfaceOpts>? = null, | ||
| attrs: Builder<AttrsBuilder<HTMLDivElement>>? = null, | ||
| content: ContentBuilder<HTMLDivElement>? = null, | ||
| ) { | ||
| MDCMenuSurfaceStyle | ||
| val options = MDCMenuSurfaceOpts().apply { opts?.invoke(this) } | ||
| Div( | ||
| attrs = { | ||
| classes("mdc-menu-surface") | ||
| if (options.fixed) classes("mdc-menu-surface--fixed") | ||
| initialiseMDC(MDCMenuSurfaceModule.MDCMenuSurface::attachTo) | ||
| attrs?.invoke(this) | ||
| }, | ||
| content = content | ||
| ) | ||
| } |
24 changes: 24 additions & 0 deletions
24
kmdc/kmdc-menu-surface/src/jsMain/kotlin/MDCMenuSurfaceAnchor.kt
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | F438Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,24 @@ | ||
| package dev.petuska.kmdc.menu.surface | ||
|
|
||
| import androidx.compose.runtime.Composable | ||
| import dev.petuska.kmdc.core.Builder | ||
| import dev.petuska.kmdc.core.MDCDsl | ||
| import org.jetbrains.compose.web.attributes.AttrsBuilder | ||
| import org.jetbrains.compose.web.dom.ContentBuilder | ||
| import org.jetbrains.compose.web.dom.Div | ||
| import org.w3c.dom.HTMLDivElement | ||
|
|
||
| @MDCDsl | ||
| @Composable | ||
| public fun MDCMenuSurfaceAnchor( | ||
| attrs: Builder<AttrsBuilder<HTMLDivElement>>? = null, | ||
| content: ContentBuilder<HTMLDivElement>? = null, | ||
| ) { | ||
| Div( | ||
| attrs = { | ||
| classes("mdc-menu-surface--anchor") | ||
| attrs?.invoke(this.unsafeCast<AttrsBuilder<HTMLDivElement>>()) | ||
| }, | ||
| content = content | ||
| ) | ||
| } |
37 changes: 37 additions & 0 deletions
37
kmdc/kmdc-menu-surface/src/jsMain/kotlin/MDCMenuSurfaceModule.kt
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,37 @@ | ||
| package dev.petuska.kmdc.menu.surface | ||
| import dev.petuska.kmdc.core.Destroyable | ||
| import org.w3c.dom.Element | ||
| import org.w3c.dom.HTMLElement | ||
|
|
||
| @JsModule("@material/menu-surface") | ||
| public external object MDCMenuSurfaceModule { | ||
| public class MDCMenuSurface(element: Element) : Destroyable { | ||
| public companion object { | ||
| public fun attachTo(element: Element): MDCMenuSurface | ||
| } | ||
|
|
||
| public override fun destroy() | ||
|
|
||
| public var anchorElement: HTMLElement | ||
|
|
||
| public fun isOpen(): Boolean | ||
| public fun open() | ||
| public fun close(skipRestoreFocus: Boolean) | ||
| public fun setAnchorCorner(corner: Byte) | ||
| } | ||
|
|
||
| // As of 1.6.20-M1, enum will be supported https://youtrack.jetbrains.com/issue/KT-37916 | ||
| // public enum class Corner { TOP_LEFT, ... } | ||
mpetuska marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
|
||
| // Until then, we import the Corner definition under object | ||
| public object Corner { | ||
| public val TOP_LEFT: Byte | ||
| public val TOP_RIGHT: Byte | ||
| public val BOTTOM_LEFT: Byte | ||
| public val BOTTOM_RIGHT: Byte | ||
| public val TOP_START: Byte | ||
| public val TOP_END: Byte | ||
| public val BOTTOM_START: Byte | ||
| public val BOTTOM_END: Byte | ||
| } | ||
| } | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| import util.mdcVersion | ||
|
|
||
| plugins { | ||
| id("plugin.library-compose") | ||
| id("plugin.publishing-mpp") | ||
| } | ||
|
|
||
| kotlin { | ||
| sourceSets { | ||
| named("jsMain") { | ||
| dependencies { | ||
| api(project(":kmdc:kmdc-core")) | ||
| api(project(":kmdc:kmdc-list")) | ||
| api(project(":kmdc:kmdc-menu-surface")) | ||
| api(npm("@material/menu", mdcVersion)) | ||
| } | ||
| } | ||
| } | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,76 @@ | ||
| package dev.petuska.kmdc.menu | ||
|
|
||
| import androidx.compose.runtime.Composable | ||
| import dev.petuska.kmdc.core.* | ||
| import dev.petuska.kmdc.list.MDCList | ||
| import dev.petuska.kmdc.list.MDCListScope | ||
| import dev.petuska.kmdc.menu.surface.MDCMenuSurface | ||
| import org.jetbrains.compose.web.attributes.AttrsBuilder | ||
| import org.jetbrains.compose.web.dom.ElementScope | ||
| import org.w3c.dom.HTMLDivElement | ||
| import org.w3c.dom.HTMLUListElement | ||
|
|
||
| @JsModule("@material/menu/dist/mdc.menu.css") | ||
| private external val MDCMenuStyle: dynamic | ||
|
|
||
| public data class MDCMenuOpts( | ||
| var open: Boolean = false, | ||
| var fixed: Boolean = false, | ||
| var wrapFocus: Boolean? = null, | ||
| var anchorCorner: Byte? = null, | ||
| var selectedIndex: Int? = null, | ||
| var absolutePosition: Point? = null | ||
| ) { | ||
| public data class Point(var x: Double = 0.0, var y: Double = 0.0) | ||
| } | ||
|
|
||
| public class MDCMenuAttrsScope private constructor() : AttrsBuilder<HTMLDivElement>() | ||
|
|
||
| public class MDCMenuScope(scope: ElementScope<HTMLUListElement>) : MDCListScope<HTMLUListElement>(scope) | ||
|
|
||
| /** | ||
| * [JS API](https://github.com/material-components/material-components-web/tree/v13.0.0/packages/mdc-menu) | ||
| */ | ||
| @MDCDsl | ||
| @Composable | ||
| public fun MDCMenu( | ||
| opts: Builder<MDCMenuOpts>? = null, | ||
| attrs: Builder<MDCMenuAttrsScope>? = null, | ||
| content: ComposableBuilder<MDCMenuScope>? = null, | ||
| ) { | ||
| MDCMenuStyle | ||
| val options = MDCMenuOpts().apply { opts?.invoke(this) } | ||
| MDCMenuSurface(attrs = { | ||
| classes("mdc-menu") | ||
| initialiseMDC(MDCMenuModule.MDCMenu::attachTo) | ||
| attrs?.invoke(this.unsafeCast<MDCMenuAttrsScope>()) | ||
| }) { | ||
| DomSideEffect(options.open) { scope -> | ||
| scope.mdc<MDCMenuModule.MDCMenu> { open = options.open } | ||
| } | ||
| DomSideEffect(options.fixed) { scope -> | ||
| scope.mdc<MDCMenuModule.MDCMenu> { setFixedPosition(options.fixed) } | ||
| } | ||
| DomSideEffect(options.wrapFocus) { scope -> | ||
| scope.mdc<MDCMenuModule.MDCMenu> { options.wrapFocus?.let { wrapFocus = it } } | ||
| } | ||
| DomSideEffect(options.selectedIndex) { scope -> | ||
| scope.mdc<MDCMenuModule.MDCMenu> { options.selectedIndex?.let { setSelectedIndex(it) } } | ||
| } | ||
| DomSideEffect(options.absolutePosition) { scope -> | ||
| scope.mdc<MDCMenuModule.MDCMenu> { options.absolutePosition?.let { setAbsolutePosition(it.x, it.y) } } | ||
| } | ||
| DomSideEffect(options.anchorCorner) { scope -> | ||
| scope.mdc<MDCMenuModule.MDCMenu> { options.anchorCorner?.let { setAnchorCorner(it) } } | ||
| } | ||
| MDCList( | ||
| attrs = { | ||
| role("menu") | ||
| attr("aria-hidden", "true") | ||
| attr("aria-orientation", "vertical") | ||
| tabIndex(-1) | ||
| }, | ||
| content = content?.let { { MDCMenuScope(this).it() } } | ||
| ) | ||
| } | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| package dev.petuska.kmdc.menu | ||
mpetuska marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
|
||
| import androidx.compose.runtime.Composable | ||
| import dev.petuska.kmdc.core.Builder | ||
| import dev.petuska.kmdc.core.ComposableBuilder | ||
| import dev.petuska.kmdc.core.MDCDsl | ||
| import dev.petuska.kmdc.list.MDCListItem | ||
| import dev.petuska.kmdc.list.MDCListItemOpts | ||
| import dev.petuska.kmdc.list.MDCListItemScope | ||
| import org.jetbrains.compose.web.attributes.AttrsBuilder | ||
| import org.w3c.dom.HTMLLIElement | ||
|
|
||
| @MDCDsl | ||
| @Composable | ||
| public fun MDCMenuScope.MDCMenuItem( | ||
| opts: Builder<MDCListItemOpts>? = null, | ||
| attrs: Builder<AttrsBuilder<HTMLLIElement>>? = null, | ||
| content: ComposableBuilder<MDCListItemScope<HTMLLIElement>>? = null, | ||
| ) { | ||
| MDCListItem(attrs = { | ||
| attrs?.invoke(this) | ||
| }, opts = opts, content = content) | ||
| } | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,42 @@ | ||
| package dev.petuska.kmdc.menu | ||
|
|
||
| import dev.petuska.kmdc.core.Destroyable | ||
| import dev.petuska.kmdc.core.MDCEvent | ||
| import org.w3c.dom.Element | ||
| import org.w3c.dom.HTMLElement | ||
|
|
||
| @JsModule("@material/menu") | ||
| public external object MDCMenuModule { | ||
| public class MDCMenu(element: Element) : Destroyable { | ||
| public companion object { | ||
| public fun attachTo(element: Element): MDCMenu | ||
| } | ||
|
|
||
| override fun destroy() | ||
|
|
||
| public var open: Boolean | ||
| public var wrapFocus: Boolean | ||
|
|
||
| public fun setAnchorCorner(corner: Byte) | ||
| public fun setAbsolutePosition(x: Double, y: Double) | ||
| public fun setFixedPosition(isFixed: Boolean) | ||
| public fun setSelectedIndex(index: Int) | ||
| public fun setIsHoisted(isHoisted: Boolean) | ||
| public fun setAnchorElement(element: HTMLElement) | ||
| public fun getPrimaryTextAtIndex(index: Int): String | ||
| public fun setEnabled(index: Int, isEnabled: Boolean) | ||
| public fun typeaheadMatchItem(nextChar: String): Int | ||
| } | ||
|
|
||
| @Suppress("ClassName") | ||
| public object strings { | ||
| public val SELECTED_EVENT: String | ||
| } | ||
|
|
||
| public class MDCMenuSelectedEventDetail { | ||
| public val item: Element | ||
| public val index: Int | ||
| } | ||
|
|
||
| public class MDCMenuSelectedEvent : MDCEvent<MDCMenuSelectedEventDetail> | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| import dev.petuska.kmdc.core.MDCAttrsDsl | ||
| import dev.petuska.kmdc.menu.MDCMenuAttrsScope | ||
| import dev.petuska.kmdc.menu.MDCMenuModule | ||
|
|
||
| /** | ||
| * [JS API](https://github.com/material-components/material-components-web/tree/v13.0.0/packages/mdc-menu) | ||
| */ | ||
| @MDCAttrsDsl | ||
| public fun MDCMenuAttrsScope.onSelected(listener: (event: MDCMenuMo B41A dule.MDCMenuSelectedEvent) -> Unit) { | ||
mpetuska marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| addEventListener(MDCMenuModule.strings.SELECTED_EVENT) { | ||
| listener(it.nativeEvent.unsafeCast<MDCMenuModule.MDCMenuSelectedEvent>()) | ||
| } | ||
| } | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.