Blame - ui/ui-material/src/commonMain/kotlin/androidx/ui/material/Menu.kt - platform/frameworks/support

2020-04-28 13:52:33 +0100

[diff] [blame]

/*

*

* Licensed under the Apache License, Version 2.0 (the "License");

5

* you may not use this file except in compliance with the License.

6

* You may obtain a copy of the License at

7

*

8

* http://www.apache.org/licenses/LICENSE-2.0

9

*

10

* Unless required by applicable law or agreed to in writing, software

11

* distributed under the License is distributed on an "AS IS" BASIS,

12

* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.

13

* See the License for the specific language governing permissions and

14

* limitations under the License.

15

*/

16

17

package androidx.ui.material

18

Louis Pullen-Freilich

5bb0c471

2020-07-20 22:01:15 +0100

[diff] [blame]

19

import androidx.compose.animation.core.FloatPropKey

20

import androidx.compose.animation.core.LinearOutSlowInEasing

21

import androidx.compose.animation.core.transitionDefinition

22

import androidx.compose.animation.core.tween

Mihai Popa

2020-04-28 13:52:33 +0100

[diff] [blame]

23

import androidx.compose.Composable

Mihai Popa

2020-05-12 17:40:50 +0100

[diff] [blame]

24

import androidx.compose.Immutable

Mihai Popa

2020-05-12 03:18:57 +0100

[diff] [blame]

25

import androidx.compose.getValue

Mihai Popa

2020-06-22 13:01:36 +0100

[diff] [blame]

26

import androidx.compose.remember

Mihai Popa

2020-05-12 03:18:57 +0100

[diff] [blame]

27

import androidx.compose.setValue

28

import androidx.compose.state

Louis Pullen-Freilich

bb77c7b

2020-07-20 22:23:06 +0100

[diff] [blame]

29

import androidx.compose.animation.transition

Mihai Popa

2020-04-28 13:52:33 +0100

[diff] [blame]

30

import androidx.ui.core.DensityAmbient

Mihai Popa

2020-06-22 13:01:36 +0100

[diff] [blame]

31

import androidx.ui.core.DrawLayerModifier

Louis Pullen-Freilich

a7eeb10

2020-07-22 17:54:24 +0100

[diff] [blame]

32

import androidx.compose.ui.unit.LayoutDirection

Mihai Popa

2020-04-28 13:52:33 +0100

[diff] [blame]

33

import androidx.ui.core.Modifier

Mihai Popa

2020-05-12 17:40:50 +0100

[diff] [blame]

34

import androidx.ui.core.Popup

35

import androidx.ui.core.PopupPositionProvider

Mihai Popa

2020-06-22 13:01:36 +0100

[diff] [blame]

36

import androidx.ui.core.TransformOrigin

Louis Pullen-Freilich

ddda7be

2020-07-17 18:28:12 +0100

[diff] [blame]

37

import androidx.compose.foundation.Box

38

import androidx.compose.foundation.ContentGravity

39

import androidx.compose.foundation.ProvideTextStyle

40

import androidx.compose.foundation.ScrollableColumn

41

import androidx.compose.foundation.clickable

Louis Pullen-Freilich

623e405

2020-07-19 20:24:03 +0100

[diff] [blame]

42

import androidx.compose.foundation.layout.ColumnScope

43

import androidx.compose.foundation.layout.ExperimentalLayout

44

import androidx.compose.foundation.layout.IntrinsicSize

45

import androidx.compose.foundation.layout.fillMaxWidth

46

import androidx.compose.foundation.layout.padding

47

import androidx.compose.foundation.layout.preferredSizeIn

48

import androidx.compose.foundation.layout.preferredWidth

Mihai Popa

6df744e

2020-05-29 16:45:07 +0100

[diff] [blame]

49

import androidx.ui.material.ripple.RippleIndication

Louis Pullen-Freilich

a7eeb10

2020-07-22 17:54:24 +0100

[diff] [blame]

50

import androidx.compose.ui.unit.Density

51

import androidx.compose.ui.unit.IntBounds

52

import androidx.compose.ui.unit.IntOffset

53

import androidx.compose.ui.unit.IntSize

54

import androidx.compose.ui.unit.Position

55

import androidx.compose.ui.unit.dp

56

import androidx.compose.ui.unit.height

57

import androidx.compose.ui.unit.width

Mihai Popa

2020-06-22 13:01:36 +0100

[diff] [blame]

58

import kotlin.math.max

59

import kotlin.math.min

60

Mihai Popa

2020-04-28 13:52:33 +0100

[diff] [blame]

61

/**

62

* A Material Design [dropdown menu](https://material.io/components/menus#dropdown-menu).

63

*

64

* The menu has a [toggle], which is the element generating the menu. For example, this can be

65

* an icon which, when tapped, triggers the menu.

66

* The content of the [DropdownMenu] can be [DropdownMenuItem]s, as well as custom content.

67

* [DropdownMenuItem] can be used to achieve items as defined by the Material Design spec.

68

* [onDismissRequest] will be called when the menu should close - for example when there is a

69

* tap outside the menu, or when the back key is pressed.

Mihai Popa

2020-05-12 17:40:50 +0100

[diff] [blame]

70

* The menu will do a best effort to be fully visible on screen. It will try to expand

71

* horizontally, depending on layout direction, to the end of the [toggle], then to the start of

72

* the [toggle], and then screen end-aligned. Vertically, it will try to expand to the bottom

73

* of the [toggle], then from the top of the [toggle], and then screen top-aligned. A

74

* [dropdownOffset] can be provided to adjust the positioning of the menu for cases when the

75

* layout bounds of the [toggle] do not coincide with its visual bounds.

Mihai Popa

2020-04-28 13:52:33 +0100

[diff] [blame]

76

*

77

* Example usage:

78

* @sample androidx.ui.material.samples.MenuSample

79

*

80

* @param toggle The element generating the menu

81

* @param expanded Whether the menu is currently open or dismissed

82

* @param onDismissRequest Called when the menu should be dismiss

83

* @param toggleModifier The modifier to be applied to the toggle

Mihai Popa

2020-05-12 17:40:50 +0100

[diff] [blame]

84

* @param dropdownOffset Offset to be added to the position of the menu

Mihai Popa

2020-04-28 13:52:33 +0100

[diff] [blame]

85

* @param dropdownModifier Modifier to be applied to the menu content

*/

@Composable

fun DropdownMenu(

toggle: @Composable () -> Unit,

90

expanded: Boolean,

91

onDismissRequest: () -> Unit,

92

toggleModifier: Modifier = Modifier,

Mihai Popa

2020-05-12 17:40:50 +0100

[diff] [blame]

93

dropdownOffset: Position = Position(0.dp, 0.dp),

Mihai Popa

2020-04-28 13:52:33 +0100

[diff] [blame]

94

dropdownModifier: Modifier = Modifier,

95

dropdownContent: @Composable ColumnScope.() -> Unit

96

) {

Mihai Popa

2020-05-12 03:18:57 +0100

[diff] [blame]

97

var visibleMenu by state { expanded }

98

if (expanded) visibleMenu = true

99

Mihai Popa

2020-04-28 13:52:33 +0100

[diff] [blame]

100

Box(toggleModifier) {

101

toggle()

102

Mihai Popa

2020-05-12 03:18:57 +0100

[diff] [blame]

103

if (visibleMenu) {

Mihai Popa

2020-06-22 13:01:36 +0100

[diff] [blame]

104

var transformOrigin by state { TransformOrigin.Center }

105

val density = DensityAmbient.current

Mihai Popa

2020-05-12 17:40:50 +0100

[diff] [blame]

106

val popupPositionProvider = DropdownMenuPositionProvider(

107

dropdownOffset,

Filip Pavlis

2020-07-17 11:23:18 +0100

[diff] [blame]

108

density

Mihai Popa

2020-06-22 13:01:36 +0100

[diff] [blame]

109

) { parentBounds, menuBounds ->

110

transformOrigin = calculateTransformOrigin(parentBounds, menuBounds, density)

111

}

Mihai Popa

2020-05-12 17:40:50 +0100

[diff] [blame]

112

113

Popup(

Mihai Popa

2020-04-28 13:52:33 +0100

[diff] [blame]

114

isFocusable = true,

115

onDismissRequest = onDismissRequest,

Mihai Popa

2020-05-12 17:40:50 +0100

[diff] [blame]

116

popupPositionProvider = popupPositionProvider

Mihai Popa

2020-04-28 13:52:33 +0100

[diff] [blame]

117

) {

Doris Liu

d2aa99c

2020-07-07 15:11:15 -0700

[diff] [blame]

118

val state = transition(

Mihai Popa

2020-05-12 03:18:57 +0100

[diff] [blame]

119

definition = DropdownMenuOpenCloseTransition,

120

initState = !expanded,

121

toState = expanded,

122

onStateChangeFinished = {

123

visibleMenu = it

124

}

Doris Liu

d2aa99c

2020-07-07 15:11:15 -0700

[diff] [blame]

125

)

126

val drawLayer = remember {

127

MenuDrawLayerModifier(

{ state[Scale] },

{ state[Alpha] },

{ transformOrigin }

)

}

Card(

modifier = drawLayer

// MenuVerticalMargin corresponds to the one Material row margin

136

// required between the menu and the display edges. The

137

// MenuElevationInset is needed for drawing the elevation,

138

// otherwise it is clipped. TODO(popam): remove it after b/156890315

139

.padding(MenuElevationInset, MenuVerticalMargin),

140

elevation = MenuElevation

141

) {

142

@OptIn(ExperimentalLayout::class)

Matvei Malkov

235b4fa

2020-07-07 21:14:49 +0100

[diff] [blame]

143

ScrollableColumn(

Doris Liu

d2aa99c

2020-07-07 15:11:15 -0700

[diff] [blame]

144

modifier = dropdownModifier

145

.padding(vertical = DropdownMenuVerticalPadding)

146

.preferredWidth(IntrinsicSize.Max),

147

children = dropdownContent

148

)

Mihai Popa

2020-04-28 13:52:33 +0100

[diff] [blame]

}

}

}

}

}

/**

* A dropdown menu item, as defined by the Material Design spec.

157

*

158

* Example usage:

159

* @sample androidx.ui.material.samples.MenuSample

160

*

161

* @param onClick Called when the menu item was clicked

162

* @param modifier The modifier to be applied to the menu item

163

* @param enabled Controls the enabled state of the menu item - when `false`, the menu item

164

* will not be clickable and [onClick] will not be invoked

165

*/

166

@Composable

167

fun DropdownMenuItem(

168

onClick: () -> Unit,

169

modifier: Modifier = Modifier,

170

enabled: Boolean = true,

171

content: @Composable () -> Unit

172

) {

173

// TODO(popam, b/156911853): investigate replacing this Box with ListItem

174

Box(

175

modifier = modifier

Mihai Popa

6df744e

2020-05-29 16:45:07 +0100

[diff] [blame]

176

.clickable(enabled = enabled, onClick = onClick, indication = RippleIndication(true))

Mihai Popa

2020-04-28 13:52:33 +0100

[diff] [blame]

177

.fillMaxWidth()

178

// Preferred min and max width used during the intrinsic measurement.

179

.preferredSizeIn(

180

minWidth = DropdownMenuItemDefaultMinWidth,

181

maxWidth = DropdownMenuItemDefaultMaxWidth,

182

minHeight = DropdownMenuItemDefaultMinHeight

183

)

184

.padding(horizontal = DropdownMenuHorizontalPadding),

185

gravity = ContentGravity.CenterStart

186

) {

187

// TODO(popam, b/156912039): update emphasis if the menu item is disabled

188

val typography = MaterialTheme.typography

189

val emphasisLevels = EmphasisAmbient.current

190

ProvideTextStyle(typography.subtitle1) {

Mihai Popa

e5ad7c8

2020-05-20 18:09:41 +0100

[diff] [blame]

191

ProvideEmphasis(

192

if (enabled) emphasisLevels.high else emphasisLevels.disabled,

193

content

194

)

Mihai Popa

2020-04-28 13:52:33 +0100

[diff] [blame]

}

}

}

Mihai Popa

2020-05-12 17:40:50 +0100

[diff] [blame]

199

// Size constants.

Mihai Popa

2020-06-24 13:35:36 +0100

[diff] [blame]

200

private val MenuElevation = 8.dp

Mihai Popa

f314806

2020-06-25 13:19:45 +0100

[diff] [blame]

201

internal val MenuElevationInset = 32.dp

202

private val MenuVerticalMargin = 32.dp

Mihai Popa

2020-06-24 13:35:36 +0100

[diff] [blame]

203

private val DropdownMenuHorizontalPadding = 16.dp

Mihai Popa

2020-04-28 13:52:33 +0100

[diff] [blame]

204

internal val DropdownMenuVerticalPadding = 8.dp

Mihai Popa

2020-06-24 13:35:36 +0100

[diff] [blame]

205

private val DropdownMenuItemDefaultMinWidth = 112.dp

206

private val DropdownMenuItemDefaultMaxWidth = 280.dp

207

private val DropdownMenuItemDefaultMinHeight = 48.dp

Mihai Popa

2020-05-12 03:18:57 +0100

[diff] [blame]

208

Mihai Popa

2020-05-12 17:40:50 +0100

[diff] [blame]

209

// Menu open/close animation.

Mihai Popa

2020-05-12 03:18:57 +0100

[diff] [blame]

210

private val Scale = FloatPropKey()

211

private val Alpha = FloatPropKey()

Mihai Popa

2020-06-24 13:35:36 +0100

[diff] [blame]

212

internal const val InTransitionDuration = 120

213

internal const val OutTransitionDuration = 75

Mihai Popa

2020-05-12 03:18:57 +0100

[diff] [blame]

214

215

private val DropdownMenuOpenCloseTransition = transitionDefinition {

216

state(false) {

217

// Menu is dismissed.

Mihai Popa

da3a246

2020-06-22 13:01:36 +0100

[diff] [blame]

218

this[Scale] = 0.8f

Mihai Popa

2020-05-12 03:18:57 +0100

[diff] [blame]

this[Alpha] = 0f

}

state(true) {

// Menu is expanded.

this[Scale] = 1f

this[Alpha] = 1f

}

transition(false, true) {

227

// Dismissed to expanded.

Doris Liu

a69d17b

2020-06-19 16:39:42 -0700

[diff] [blame]

228

Scale using tween(

229

durationMillis = InTransitionDuration,

Mihai Popa

2020-05-12 03:18:57 +0100

[diff] [blame]

230

easing = LinearOutSlowInEasing

Doris Liu

a69d17b

2020-06-19 16:39:42 -0700

[diff] [blame]

)

Alpha using tween(

durationMillis = 30

)

Mihai Popa

2020-05-12 03:18:57 +0100

[diff] [blame]

235

}

236

transition(true, false) {

237

// Expanded to dismissed.

Doris Liu

a69d17b

2020-06-19 16:39:42 -0700

[diff] [blame]

238

Scale using tween(

239

durationMillis = 1,

240

delayMillis = OutTransitionDuration - 1

241

)

242

Alpha using tween(

243

durationMillis = OutTransitionDuration

244

)

Mihai Popa

2020-05-12 03:18:57 +0100

[diff] [blame]

245

}

246

}

Mihai Popa

2020-05-12 17:40:50 +0100

[diff] [blame]

247

Mihai Popa

2020-06-22 13:01:36 +0100

[diff] [blame]

248

private class MenuDrawLayerModifier(

249

val scaleProvider: () -> Float,

250

val alphaProvider: () -> Float,

251

val transformOriginProvider: () -> TransformOrigin

252

) : DrawLayerModifier {

253

override val scaleX: Float get() = scaleProvider()

254

override val scaleY: Float get() = scaleProvider()

255

override val alpha: Float get() = alphaProvider()

256

override val transformOrigin: TransformOrigin get() = transformOriginProvider()

257

override val clip: Boolean = true

258

}

259

260

private fun calculateTransformOrigin(

Mihai Popa

2020-07-06 13:25:18 +0100

[diff] [blame]

261

parentBounds: IntBounds,

262

menuBounds: IntBounds,

Mihai Popa

2020-06-22 13:01:36 +0100

[diff] [blame]

263

density: Density

264

): TransformOrigin {

Mihai Popa

2020-07-06 13:25:18 +0100

[diff] [blame]

265

val inset = with(density) { MenuElevationInset.toIntPx() }

266

val realMenuBounds = IntBounds(

Mihai Popa

2020-06-22 13:01:36 +0100

[diff] [blame]

267

menuBounds.left + inset,

268

menuBounds.top + inset,

269

menuBounds.right - inset,

270

menuBounds.bottom - inset

271

)

272

val pivotX = when {

Mihai Popa

2020-07-06 13:25:18 +0100

[diff] [blame]

273

realMenuBounds.left >= parentBounds.right -> 0

274

realMenuBounds.right <= parentBounds.left -> 1

Mihai Popa

2020-06-22 13:01:36 +0100

[diff] [blame]

275

else -> {

276

val intersectionCenter =

277

(max(parentBounds.left, realMenuBounds.left) +

278

min(parentBounds.right, realMenuBounds.right)) / 2

279

(intersectionCenter + inset - menuBounds.left) / menuBounds.width

280

}

281

}

282

val pivotY = when {

Mihai Popa

2020-07-06 13:25:18 +0100

[diff] [blame]

283

realMenuBounds.top >= parentBounds.bottom -> 0

284

realMenuBounds.bottom <= parentBounds.top -> 1

Mihai Popa

2020-06-22 13:01:36 +0100

[diff] [blame]

285

else -> {

286

val intersectionCenter =

287

(max(parentBounds.top, realMenuBounds.top) +

288

min(parentBounds.bottom, realMenuBounds.bottom)) / 2

289

(intersectionCenter + inset - menuBounds.top) / menuBounds.height

290

}

291

}

Mihai Popa

2020-07-06 13:25:18 +0100

[diff] [blame]

292

return TransformOrigin(pivotX.toFloat(), pivotY.toFloat())

Mihai Popa

2020-06-22 13:01:36 +0100

[diff] [blame]

293

}

294

Mihai Popa

2020-05-12 17:40:50 +0100

[diff] [blame]

// Menu positioning.

/**

* Calculates the position of a Material [DropdownMenu].

299

*/

300

// TODO(popam): Investigate if this can/should consider the app window size rather than screen size

301

@Immutable

302

internal data class DropdownMenuPositionProvider(

303

val contentOffset: Position,

304

val density: Density,

Mihai Popa

2020-07-06 13:25:18 +0100

[diff] [blame]

305

val onPositionCalculated: (IntBounds, IntBounds) -> Unit = { _, _ -> }

Mihai Popa

2020-05-12 17:40:50 +0100

[diff] [blame]

306

) : PopupPositionProvider {

307

override fun calculatePosition(

Filip Pavlis

2020-07-17 11:23:18 +0100

[diff] [blame]

308

parentGlobalBounds: IntBounds,

309

windowGlobalBounds: IntBounds,

Mihai Popa

2020-05-12 17:40:50 +0100

[diff] [blame]

310

layoutDirection: LayoutDirection,

Filip Pavlis

2020-07-17 11:23:18 +0100

[diff] [blame]

311

popupContentSize: IntSize

George Mount

8f23757

2020-04-30 12:08:30 -0700

[diff] [blame]

312

): IntOffset {

Mihai Popa

f314806

2020-06-25 13:19:45 +0100

[diff] [blame]

313

// The min margin above and below the menu, relative to the screen.

314

val verticalMargin = with(density) { MenuVerticalMargin.toIntPx() }

Mihai Popa

2020-05-12 17:40:50 +0100

[diff] [blame]

315

// The padding inset that accommodates elevation, needs to be taken into account.

Mihai Popa

2020-06-24 13:35:36 +0100

[diff] [blame]

316

val inset = with(density) { MenuElevationInset.toIntPx() }

Filip Pavlis

2020-07-17 11:23:18 +0100

[diff] [blame]

317

val realPopupWidth = popupContentSize.width - inset * 2

318

val realPopupHeight = popupContentSize.height - inset * 2

Mihai Popa

2020-05-12 17:40:50 +0100

[diff] [blame]

319

val contentOffsetX = with(density) { contentOffset.x.toIntPx() }

320

val contentOffsetY = with(density) { contentOffset.y.toIntPx() }

Mihai Popa

2020-05-12 17:40:50 +0100

[diff] [blame]

321

322

// Compute horizontal position.

Filip Pavlis

2020-07-17 11:23:18 +0100

[diff] [blame]

323

val toRight = parentGlobalBounds.right + contentOffsetX

324

val toLeft = parentGlobalBounds.left - contentOffsetX - realPopupWidth

325

val toDisplayRight = windowGlobalBounds.width - realPopupWidth

George Mount

8f23757

2020-04-30 12:08:30 -0700

[diff] [blame]

326

val toDisplayLeft = 0

Mihai Popa

2020-05-12 17:40:50 +0100

[diff] [blame]

327

val x = if (layoutDirection == LayoutDirection.Ltr) {

328

sequenceOf(toRight, toLeft, toDisplayRight)

329

} else {

330

sequenceOf(toLeft, toRight, toDisplayLeft)

331

}.firstOrNull {

Filip Pavlis

2020-07-17 11:23:18 +0100

[diff] [blame]

332

it >= 0 && it + realPopupWidth <= windowGlobalBounds.width

Mihai Popa

2020-05-12 17:40:50 +0100

[diff] [blame]

333

} ?: toLeft

334

335

// Compute vertical position.

Filip Pavlis

2020-07-17 11:23:18 +0100

[diff] [blame]

336

val toBottom = parentGlobalBounds.bottom + contentOffsetY

337

val toTop = parentGlobalBounds.top - contentOffsetY - realPopupHeight

338

val toCenter = parentGlobalBounds.top - realPopupHeight / 2

339

val toDisplayBottom = windowGlobalBounds.height - realPopupHeight - verticalMargin

Mihai Popa

2020-05-12 17:40:50 +0100

[diff] [blame]

340

val y = sequenceOf(toBottom, toTop, toCenter, toDisplayBottom).firstOrNull {

Mihai Popa

f314806

2020-06-25 13:19:45 +0100

[diff] [blame]

341

it >= verticalMargin &&

Filip Pavlis

2020-07-17 11:23:18 +0100

[diff] [blame]

342

it + realPopupHeight <= windowGlobalBounds.height - verticalMargin

Mihai Popa

2020-05-12 17:40:50 +0100

[diff] [blame]

343

} ?: toTop

344

Mihai Popa

2020-06-22 13:01:36 +0100

[diff] [blame]

345

onPositionCalculated(

Filip Pavlis

2020-07-17 11:23:18 +0100

[diff] [blame]

346

parentGlobalBounds,

Mihai Popa

2020-07-06 13:25:18 +0100

[diff] [blame]

347

IntBounds(x - inset, y - inset, x + inset + realPopupWidth, y + inset + realPopupHeight)

Mihai Popa

2020-06-22 13:01:36 +0100

[diff] [blame]

348

)

George Mount

8f23757

2020-04-30 12:08:30 -0700

[diff] [blame]

349

return IntOffset(x - inset, y - inset)

Mihai Popa