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.

141

.padding(MenuElevation),

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-04-28 13:52:33 +0100

[diff] [blame]

203

internal val MenuElevation = 8.dp

204

internal val DropdownMenuHorizontalPadding = 16.dp

205

internal val DropdownMenuVerticalPadding = 8.dp

206

internal val DropdownMenuItemDefaultMinWidth = 112.dp

207

internal val DropdownMenuItemDefaultMaxWidth = 280.dp

208

internal val DropdownMenuItemDefaultMinHeight = 48.dp

Mihai Popa

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

[diff] [blame]

209

Mihai Popa

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

[diff] [blame]

210

// Menu open/close animation.

Mihai Popa

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

[diff] [blame]

211

private val Scale = FloatPropKey()

212

private val Alpha = FloatPropKey()

213

internal val InTransitionDuration = 120

214

internal val OutTransitionDuration = 75

215

216

private val DropdownMenuOpenCloseTransition = transitionDefinition {

217

state(false) {

218

// Menu is dismissed.

Mihai Popa

da3a246

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

[diff] [blame]

219

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

228

// Dismissed to expanded.

Doris Liu

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

[diff] [blame^]

229

Scale using tween(

230

durationMillis = InTransitionDuration,

Mihai Popa

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

[diff] [blame]

231

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]

236

}

237

transition(true, false) {

238

// Expanded to dismissed.

Doris Liu

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

[diff] [blame^]

239

Scale using tween(

240

durationMillis = 1,

241

delayMillis = OutTransitionDuration - 1

242

)

243

Alpha using tween(

244

durationMillis = OutTransitionDuration

245

)

Mihai Popa

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

[diff] [blame]

246

}

247

}

Mihai Popa

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

[diff] [blame]

248

Mihai Popa

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

[diff] [blame]

249

private class MenuDrawLayerModifier(

250

val scaleProvider: () -> Float,

251

val alphaProvider: () -> Float,

252

val transformOriginProvider: () -> TransformOrigin

253

) : DrawLayerModifier {

254

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

255

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

256

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

257

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

258

override val clip: Boolean = true

259

}

260

261

private fun calculateTransformOrigin(

262

parentBounds: PxBounds,

263

menuBounds: PxBounds,

264

density: Density

265

): TransformOrigin {

266

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

267

val realMenuBounds = PxBounds(

268

menuBounds.left + inset,

269

menuBounds.top + inset,

270

menuBounds.right - inset,

271

menuBounds.bottom - inset

272

)

273

val pivotX = when {

274

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

275

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

276

else -> {

277

val intersectionCenter =

278

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

279

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

280

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

}

}

val pivotY = when {

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

285

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

286

else -> {

287

val intersectionCenter =

288

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

289

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

290

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

291

}

292

}

293

return TransformOrigin(pivotX, pivotY)

294

}

295

Mihai Popa

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

[diff] [blame]

// Menu positioning.

/**

* Calculates the position of a Material [DropdownMenu].

300

*/

301

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

302

@Immutable

303

internal data class DropdownMenuPositionProvider(

304

val contentOffset: Position,

305

val density: Density,

Mihai Popa

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

[diff] [blame]

306

val displayMetrics: DisplayMetrics,

307

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

Mihai Popa

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

[diff] [blame]

308

) : PopupPositionProvider {

309

override fun calculatePosition(

George Mount

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

[diff] [blame]

310

parentLayoutPosition: IntOffset,

311

parentLayoutSize: IntSize,

Mihai Popa

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

[diff] [blame]

312

layoutDirection: LayoutDirection,

George Mount

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

[diff] [blame]

313

popupSize: IntSize

314

): IntOffset {

Mihai Popa

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

[diff] [blame]

315

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

316

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

317

val realPopupWidth = popupSize.width - inset * 2

318

val realPopupHeight = popupSize.height - inset * 2

319

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

320

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

321

val parentRight = parentLayoutPosition.x + parentLayoutSize.width

322

val parentBottom = parentLayoutPosition.y + parentLayoutSize.height

323

324

// Compute horizontal position.

325

val toRight = parentRight + contentOffsetX

326

val toLeft = parentLayoutPosition.x - contentOffsetX - realPopupWidth

George Mount

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

[diff] [blame]

327

val toDisplayRight = displayMetrics.widthPixels - realPopupWidth

328

val toDisplayLeft = 0

Mihai Popa

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

[diff] [blame]

329

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

330

sequenceOf(toRight, toLeft, toDisplayRight)

331

} else {

332

sequenceOf(toLeft, toRight, toDisplayLeft)

333

}.firstOrNull {

George Mount

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

[diff] [blame]

334

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

Mihai Popa

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

[diff] [blame]

335

} ?: toLeft

336

337

// Compute vertical position.

338

val toBottom = parentBottom + contentOffsetY

339

val toTop = parentLayoutPosition.y - contentOffsetY - realPopupHeight

340

val toCenter = parentLayoutPosition.y - realPopupHeight / 2

George Mount

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

[diff] [blame]

341

val toDisplayBottom = displayMetrics.heightPixels - realPopupHeight

Mihai Popa

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

[diff] [blame]

342

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

George Mount

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

[diff] [blame]

343

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

Mihai Popa

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

[diff] [blame]

344

} ?: toTop

345

Mihai Popa

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

[diff] [blame]

346

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

347

onPositionCalculated(

348

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

PxBounds(

x.toFloat() - inset,

y.toFloat() - inset,

x.toFloat() + inset + realPopupWidth,

353

y.toFloat() + inset + realPopupHeight

354

)

355

)

George Mount

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

[diff] [blame]

356

return IntOffset(x - inset, y - inset)

Mihai Popa