Blame - ui/ui-material/src/main/java/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

Mihai Popa

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

[diff] [blame]

19

import android.util.DisplayMetrics

Mihai Popa

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

[diff] [blame]

20

import androidx.animation.FloatPropKey

21

import androidx.animation.LinearOutSlowInEasing

22

import androidx.animation.transitionDefinition

Doris Liu

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

[diff] [blame]

23

import androidx.animation.tween

Mihai Popa

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

[diff] [blame]

24

import androidx.compose.Composable

Mihai Popa

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

[diff] [blame]

25

import androidx.compose.Immutable

Mihai Popa

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

[diff] [blame]

26

import androidx.compose.getValue

Mihai Popa

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

[diff] [blame]

27

import androidx.compose.remember

Mihai Popa

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

[diff] [blame]

28

import androidx.compose.setValue

29

import androidx.compose.state

30

import androidx.ui.animation.Transition

Mihai Popa

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

[diff] [blame]

31

import androidx.ui.core.ContextAmbient

Mihai Popa

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

[diff] [blame]

32

import androidx.ui.core.DensityAmbient

Mihai Popa

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

[diff] [blame]

33

import androidx.ui.core.DrawLayerModifier

Mihai Popa

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

[diff] [blame]

34

import androidx.ui.core.LayoutDirection

Mihai Popa

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

[diff] [blame]

35

import androidx.ui.core.Modifier

Mihai Popa

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

[diff] [blame]

36

import androidx.ui.core.Popup

37

import androidx.ui.core.PopupPositionProvider

Mihai Popa

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

[diff] [blame]

38

import androidx.ui.core.TransformOrigin

Mihai Popa

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

[diff] [blame]

39

import androidx.ui.unit.Position

Mihai Popa

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

[diff] [blame]

40

import androidx.ui.foundation.Box

41

import androidx.ui.foundation.ContentGravity

42

import androidx.ui.foundation.ProvideTextStyle

43

import androidx.ui.foundation.clickable

44

import androidx.ui.layout.Column

45

import androidx.ui.layout.ColumnScope

Mihai Popa

a22885d

2020-05-26 18:31:21 +0100

[diff] [blame]

46

import androidx.ui.layout.ExperimentalLayout

Mihai Popa

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

[diff] [blame]

47

import androidx.ui.layout.IntrinsicSize

48

import androidx.ui.layout.fillMaxWidth

49

import androidx.ui.layout.padding

50

import androidx.ui.layout.preferredSizeIn

51

import androidx.ui.layout.preferredWidth

Mihai Popa

6df744e

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

[diff] [blame]

52

import androidx.ui.material.ripple.RippleIndication

Mihai Popa

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

[diff] [blame]

53

import androidx.ui.unit.Density

George Mount

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

[diff] [blame]

54

import androidx.ui.unit.IntOffset

55

import androidx.ui.unit.IntSize

Mihai Popa

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

[diff] [blame]

56

import androidx.ui.unit.PxBounds

Mihai Popa

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

[diff] [blame]

57

import androidx.ui.unit.dp

Mihai Popa

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

[diff] [blame]

58

import androidx.ui.unit.height

59

import androidx.ui.unit.toOffset

60

import androidx.ui.unit.toSize

61

import androidx.ui.unit.width

62

import kotlin.math.max

63

import kotlin.math.min

64

Mihai Popa

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

[diff] [blame]

65

/**

66

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

67

*

68

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

69

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

70

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

71

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

72

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

73

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

Mihai Popa

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

[diff] [blame]

74

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

75

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

76

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

77

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

78

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

79

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

Mihai Popa

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

[diff] [blame]

80

*

81

* Example usage:

82

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

83

*

84

* @param toggle The element generating the menu

85

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

86

* @param onDismissRequest Called when the menu should be dismiss

87

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

Mihai Popa

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

[diff] [blame]

88

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

Mihai Popa

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

[diff] [blame]

89

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

*/

@Composable

fun DropdownMenu(

toggle: @Composable () -> Unit,

94

expanded: Boolean,

95

onDismissRequest: () -> Unit,

96

toggleModifier: Modifier = Modifier,

Mihai Popa

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

[diff] [blame]

97

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

Mihai Popa

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

[diff] [blame]

98

dropdownModifier: Modifier = Modifier,

99

dropdownContent: @Composable ColumnScope.() -> Unit

100

) {

Mihai Popa

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

[diff] [blame]

101

var visibleMenu by state { expanded }

102

if (expanded) visibleMenu = true

103

Mihai Popa

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

[diff] [blame]

104

Box(toggleModifier) {

105

toggle()

106

Mihai Popa

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

[diff] [blame]

107

if (visibleMenu) {

Mihai Popa

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

[diff] [blame]

108

var transformOrigin by state { TransformOrigin.Center }

109

val density = DensityAmbient.current

Mihai Popa

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

[diff] [blame]

110

val popupPositionProvider = DropdownMenuPositionProvider(

111

dropdownOffset,

Mihai Popa

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

[diff] [blame]

112

density,

Mihai Popa

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

[diff] [blame]

113

ContextAmbient.current.resources.displayMetrics

Mihai Popa

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

[diff] [blame]

114

) { parentBounds, menuBounds ->

115

transformOrigin = calculateTransformOrigin(parentBounds, menuBounds, density)

116

}

Mihai Popa

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

[diff] [blame]

117

118

Popup(

Mihai Popa

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

[diff] [blame]

119

isFocusable = true,

120

onDismissRequest = onDismissRequest,

Mihai Popa

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

[diff] [blame]

121

popupPositionProvider = popupPositionProvider

Mihai Popa

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

[diff] [blame]

122

) {

Mihai Popa

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

[diff] [blame]

123

Transition(

124

definition = DropdownMenuOpenCloseTransition,

125

initState = !expanded,

126

toState = expanded,

127

onStateChangeFinished = {

128

visibleMenu = it

129

}

130

) { state ->

Mihai Popa

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

[diff] [blame]

131

val drawLayer = remember {

132

MenuDrawLayerModifier(

{ state[Scale] },

{ state[Alpha] },

{ transformOrigin }

)

}

Mihai Popa

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

[diff] [blame]

138

Card(

Mihai Popa

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

[diff] [blame]

139

modifier = drawLayer

Mihai Popa

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

[diff] [blame]

140

// Padding to account for the elevation, otherwise it is clipped.

Mihai Popa

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

[diff] [blame^]

141

.padding(MenuElevationInset),

Mihai Popa

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

[diff] [blame]

142

elevation = MenuElevation

143

) {

Mihai Popa

a22885d

2020-05-26 18:31:21 +0100

[diff] [blame]

144

@OptIn(ExperimentalLayout::class)

Mihai Popa

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

[diff] [blame]

145

Column(

Mihai Popa

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

[diff] [blame]

146

modifier = dropdownModifier

Mihai Popa

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

[diff] [blame]

147

.padding(vertical = DropdownMenuVerticalPadding)

148

.preferredWidth(IntrinsicSize.Max),

149

children = dropdownContent

150

)

151

}

Mihai Popa

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

[diff] [blame]

}

}

}

}

}

/**

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

160

*

161

* Example usage:

162

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

163

*

164

* @param onClick Called when the menu item was clicked

165

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

166

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

167

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

168

*/

169

@Composable

170

fun DropdownMenuItem(

171

onClick: () -> Unit,

172

modifier: Modifier = Modifier,

173

enabled: Boolean = true,

174

content: @Composable () -> Unit

175

) {

176

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

177

Box(

178

modifier = modifier

Mihai Popa

6df744e

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

[diff] [blame]

179

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

Mihai Popa

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

[diff] [blame]

180

.fillMaxWidth()

181

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

182

.preferredSizeIn(

183

minWidth = DropdownMenuItemDefaultMinWidth,

184

maxWidth = DropdownMenuItemDefaultMaxWidth,

185

minHeight = DropdownMenuItemDefaultMinHeight

186

)

187

.padding(horizontal = DropdownMenuHorizontalPadding),

188

gravity = ContentGravity.CenterStart

189

) {

190

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

191

val typography = MaterialTheme.typography

192

val emphasisLevels = EmphasisAmbient.current

193

ProvideTextStyle(typography.subtitle1) {

Mihai Popa

e5ad7c8

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

[diff] [blame]

194

ProvideEmphasis(

195

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

196

content

197

)

Mihai Popa

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

[diff] [blame]

}

}

}

Mihai Popa

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

[diff] [blame]

202

// Size constants.

Mihai Popa

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

[diff] [blame^]

203

private val MenuElevation = 8.dp

204

internal val MenuElevationInset = 16.dp

205

private val DropdownMenuHorizontalPadding = 16.dp

Mihai Popa

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

[diff] [blame]

206

internal val DropdownMenuVerticalPadding = 8.dp

Mihai Popa

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

[diff] [blame^]

207

private val DropdownMenuItemDefaultMinWidth = 112.dp

208

private val DropdownMenuItemDefaultMaxWidth = 280.dp

209

private val DropdownMenuItemDefaultMinHeight = 48.dp

Mihai Popa

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

[diff] [blame]

210

Mihai Popa

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

[diff] [blame]

211

// Menu open/close animation.

Mihai Popa

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

[diff] [blame]

212

private val Scale = FloatPropKey()

213

private val Alpha = FloatPropKey()

Mihai Popa

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

[diff] [blame^]

214

internal const val InTransitionDuration = 120

215

internal const val OutTransitionDuration = 75

Mihai Popa

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

[diff] [blame]

216

217

private val DropdownMenuOpenCloseTransition = transitionDefinition {

218

state(false) {

219

// Menu is dismissed.

Mihai Popa

da3a246

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

[diff] [blame]

220

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) {

229

// Dismissed to expanded.

Doris Liu

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

[diff] [blame]

230

Scale using tween(

231

durationMillis = InTransitionDuration,

Mihai Popa

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

[diff] [blame]

232

easing = LinearOutSlowInEasing

Doris Liu

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]

237

}

238

transition(true, false) {

239

// Expanded to dismissed.

Doris Liu

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

[diff] [blame]

240

Scale using tween(

241

durationMillis = 1,

242

delayMillis = OutTransitionDuration - 1

243

)

244

Alpha using tween(

245

durationMillis = OutTransitionDuration

246

)

Mihai Popa

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

[diff] [blame]

247

}

248

}

Mihai Popa

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

[diff] [blame]

249

Mihai Popa

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

[diff] [blame]

250

private class MenuDrawLayerModifier(

251

val scaleProvider: () -> Float,

252

val alphaProvider: () -> Float,

253

val transformOriginProvider: () -> TransformOrigin

254

) : DrawLayerModifier {

255

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

256

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

257

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

258

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

259

override val clip: Boolean = true

260

}

261

262

private fun calculateTransformOrigin(

263

parentBounds: PxBounds,

264

menuBounds: PxBounds,

265

density: Density

266

): TransformOrigin {

Mihai Popa

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

[diff] [blame^]

267

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

Mihai Popa

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

[diff] [blame]

268

val realMenuBounds = PxBounds(

269

menuBounds.left + inset,

270

menuBounds.top + inset,

271

menuBounds.right - inset,

272

menuBounds.bottom - inset

273

)

274

val pivotX = when {

275

realMenuBounds.left >= parentBounds.right -> 0f

276

realMenuBounds.right <= parentBounds.left -> 1f

277

else -> {

278

val intersectionCenter =

279

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

280

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

281

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

}

}

val pivotY = when {

realMenuBounds.top >= parentBounds.bottom -> 0f

286

realMenuBounds.bottom <= parentBounds.top -> 1f

287

else -> {

288

val intersectionCenter =

289

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

290

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

291

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

292

}

293

}

294

return TransformOrigin(pivotX, pivotY)

295

}

296

Mihai Popa

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

[diff] [blame]

// Menu positioning.

/**

* Calculates the position of a Material [DropdownMenu].

301

*/

302

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

303

@Immutable

304

internal data class DropdownMenuPositionProvider(

305

val contentOffset: Position,

306

val density: Density,

Mihai Popa

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

[diff] [blame]

307

val displayMetrics: DisplayMetrics,

308

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

Mihai Popa

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

[diff] [blame]

309

) : PopupPositionProvider {

310

override fun calculatePosition(

George Mount

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

[diff] [blame]

311

parentLayoutPosition: IntOffset,

312

parentLayoutSize: IntSize,

Mihai Popa

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

[diff] [blame]

313

layoutDirection: LayoutDirection,

George Mount

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

[diff] [blame]

314

popupSize: IntSize

315

): IntOffset {

Mihai Popa

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

[diff] [blame]

316

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

Mihai Popa

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

[diff] [blame^]

317

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

Mihai Popa

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

[diff] [blame]

318

val realPopupWidth = popupSize.width - inset * 2

319

val realPopupHeight = popupSize.height - inset * 2

320

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

321

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

322

val parentRight = parentLayoutPosition.x + parentLayoutSize.width

323

val parentBottom = parentLayoutPosition.y + parentLayoutSize.height

324

325

// Compute horizontal position.

326

val toRight = parentRight + contentOffsetX

327

val toLeft = parentLayoutPosition.x - contentOffsetX - realPopupWidth

George Mount

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

[diff] [blame]

328

val toDisplayRight = displayMetrics.widthPixels - realPopupWidth

329

val toDisplayLeft = 0

Mihai Popa

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

[diff] [blame]

330

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

331

sequenceOf(toRight, toLeft, toDisplayRight)

332

} else {

333

sequenceOf(toLeft, toRight, toDisplayLeft)

334

}.firstOrNull {

George Mount

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

[diff] [blame]

335

it >= 0 && it + realPopupWidth <= displayMetrics.widthPixels

Mihai Popa

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

[diff] [blame]

336

} ?: toLeft

337

338

// Compute vertical position.

339

val toBottom = parentBottom + contentOffsetY

340

val toTop = parentLayoutPosition.y - contentOffsetY - realPopupHeight

341

val toCenter = parentLayoutPosition.y - realPopupHeight / 2

George Mount

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

[diff] [blame]

342

val toDisplayBottom = displayMetrics.heightPixels - realPopupHeight

Mihai Popa

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

[diff] [blame]

343

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

George Mount

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

[diff] [blame]

344

it >= 0 && it + realPopupHeight <= displayMetrics.heightPixels

Mihai Popa

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

[diff] [blame]

345

} ?: toTop

346

Mihai Popa

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

[diff] [blame]

347

// TODO(popam, b/159596546): we should probably have androidx.ui.unit.IntBounds instead

348

onPositionCalculated(

349

PxBounds(parentLayoutPosition.toOffset(), parentLayoutSize.toSize()),

PxBounds(

x.toFloat() - inset,

y.toFloat() - inset,

x.toFloat() + inset + realPopupWidth,

354

y.toFloat() + inset + realPopupHeight

355

)

356

)

George Mount

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

[diff] [blame]

357

return IntOffset(x - inset, y - inset)

Mihai Popa