@@ -5,11 +5,9 @@ import androidx.compose.animation.core.animateDpAsState
5
5
import androidx.compose.animation.core.animateFloatAsState
6
6
import androidx.compose.animation.core.tween
7
7
import androidx.compose.animation.expandHorizontally
8
- import androidx.compose.animation.expandVertically
9
8
import androidx.compose.animation.fadeIn
10
9
import androidx.compose.animation.fadeOut
11
10
import androidx.compose.animation.shrinkHorizontally
12
- import androidx.compose.animation.shrinkVertically
13
11
import androidx.compose.foundation.Image
14
12
import androidx.compose.foundation.background
15
13
import androidx.compose.foundation.layout.Arrangement
@@ -37,9 +35,7 @@ import androidx.compose.runtime.LaunchedEffect
37
35
import androidx.compose.runtime.getValue
38
36
import androidx.compose.runtime.livedata.observeAsState
39
37
import androidx.compose.runtime.mutableIntStateOf
40
- import androidx.compose.runtime.mutableStateOf
41
38
import androidx.compose.runtime.remember
42
- import androidx.compose.runtime.setValue
43
39
import androidx.compose.ui.Alignment
44
40
import androidx.compose.ui.Modifier
45
41
import androidx.compose.ui.graphics.painter.ColorPainter
@@ -258,7 +254,7 @@ private fun CartBodyWithItems(
258
254
key = { item -> item.id.itemNumber }
259
255
) { item ->
260
256
ProductItem (
261
- modifier = Modifier ,
257
+ modifier = Modifier .animateItem() ,
262
258
item = item,
263
259
canRemoveItems = areItemsRemovable,
264
260
onUIEvent = onUIEvent,
@@ -402,117 +398,91 @@ private fun ProductItem(
402
398
canRemoveItems : Boolean ,
403
399
onUIEvent : (WooPosCartUIEvent ) -> Unit ,
404
400
) {
405
- var hasAnimationStarted by remember { mutableStateOf(item.isAppearanceAnimationPlayed) }
406
- LaunchedEffect (Unit ) {
407
- hasAnimationStarted = true
408
- }
409
-
410
- val cardElevation = 6 .dp
411
- val elevation by animateDpAsState(
412
- targetValue = if (hasAnimationStarted) cardElevation else 0 .dp,
413
- animationSpec = tween(durationMillis = 150 , delayMillis = 250 ),
414
- label = " elevation"
415
- )
416
-
417
401
val itemContentDescription = stringResource(
418
402
id = R .string.woopos_cart_item_content_description,
419
403
item.name,
420
404
item.price
421
405
)
422
406
423
- LaunchedEffect (elevation) {
424
- if (elevation == cardElevation) {
425
- onUIEvent(WooPosCartUIEvent .OnCartItemAppearanceAnimationPlayed (item))
426
- }
427
- }
428
-
429
- AnimatedVisibility (
430
- visible = hasAnimationStarted,
431
- enter = expandVertically(
432
- animationSpec = tween(durationMillis = 200 )
433
- ),
434
- exit = shrinkVertically()
407
+ WooPosCard (
408
+ modifier = modifier
409
+ .height(96 .dp)
410
+ .semantics { contentDescription = itemContentDescription },
411
+ elevation = 6 .dp,
412
+ shadowType = ShadowType .Soft ,
413
+ shape = RoundedCornerShape (8 .dp),
435
414
) {
436
- WooPosCard (
437
- modifier = modifier
438
- .height(96 .dp)
439
- .semantics { contentDescription = itemContentDescription },
440
- elevation = elevation,
441
- shadowType = ShadowType .Soft ,
442
- shape = RoundedCornerShape (8 .dp),
415
+ Row (
416
+ horizontalArrangement = Arrangement .SpaceBetween ,
417
+ verticalAlignment = Alignment .CenterVertically
443
418
) {
444
- Row (
445
- horizontalArrangement = Arrangement .SpaceBetween ,
446
- verticalAlignment = Alignment .CenterVertically
447
- ) {
448
- AsyncImage (
449
- model = ImageRequest .Builder (LocalContext .current)
450
- .data(item.imageUrl)
451
- .crossfade(true )
452
- .build(),
453
- fallback = ColorPainter (WooPosTheme .colors.loadingSkeleton),
454
- error = ColorPainter (WooPosTheme .colors.loadingSkeleton),
455
- placeholder = ColorPainter (WooPosTheme .colors.loadingSkeleton),
456
- contentDescription = null ,
457
- contentScale = ContentScale .Crop ,
458
- modifier = Modifier .size(96 .dp)
459
- )
419
+ AsyncImage (
420
+ model = ImageRequest .Builder (LocalContext .current)
421
+ .data(item.imageUrl)
422
+ .crossfade(true )
423
+ .build(),
424
+ fallback = ColorPainter (WooPosTheme .colors.loadingSkeleton),
425
+ error = ColorPainter (WooPosTheme .colors.loadingSkeleton),
426
+ placeholder = ColorPainter (WooPosTheme .colors.loadingSkeleton),
427
+ contentDescription = null ,
428
+ contentScale = ContentScale .Crop ,
429
+ modifier = Modifier .size(96 .dp)
430
+ )
460
431
461
- Spacer (modifier = Modifier .width(16 .dp.toAdaptivePadding()))
432
+ Spacer (modifier = Modifier .width(16 .dp.toAdaptivePadding()))
462
433
463
- Column (
464
- modifier = Modifier .weight(1f )
465
- ) {
434
+ Column (
435
+ modifier = Modifier .weight(1f )
436
+ ) {
437
+ Text (
438
+ text = item.name,
439
+ style = MaterialTheme .typography.body1,
440
+ fontWeight = FontWeight .Bold ,
441
+ maxLines = 1 ,
442
+ overflow = TextOverflow .Ellipsis ,
443
+ modifier = Modifier .clearAndSetSemantics { }
444
+ )
445
+ Spacer (modifier = Modifier .height(4 .dp.toAdaptivePadding()))
446
+ if (item.description.isNotNullOrEmpty()) {
466
447
Text (
467
- text = item.name ,
448
+ text = item.description !! ,
468
449
style = MaterialTheme .typography.body1,
469
- fontWeight = FontWeight .Bold ,
470
- maxLines = 1 ,
450
+ maxLines = 2 ,
471
451
overflow = TextOverflow .Ellipsis ,
472
- modifier = Modifier .clearAndSetSemantics { }
473
- )
474
- Spacer (modifier = Modifier .height(4 .dp.toAdaptivePadding()))
475
- if (item.description.isNotNullOrEmpty()) {
476
- Text (
477
- text = item.description!! ,
478
- style = MaterialTheme .typography.body1,
479
- maxLines = 2 ,
480
- overflow = TextOverflow .Ellipsis ,
481
- color = MaterialTheme .colors.secondaryVariant,
482
- modifier = Modifier .clearAndSetSemantics { }
483
- )
484
- Spacer (modifier = Modifier .height(4 .dp.toAdaptivePadding()))
485
- }
486
- Text (
487
- text = item.price,
488
- style = MaterialTheme .typography.body1,
489
452
color = MaterialTheme .colors.secondaryVariant,
490
453
modifier = Modifier .clearAndSetSemantics { }
491
454
)
455
+ Spacer (modifier = Modifier .height(4 .dp.toAdaptivePadding()))
492
456
}
457
+ Text (
458
+ text = item.price,
459
+ style = MaterialTheme .typography.body1,
460
+ color = MaterialTheme .colors.secondaryVariant,
461
+ modifier = Modifier .clearAndSetSemantics { }
462
+ )
463
+ }
493
464
494
- if (canRemoveItems) {
495
- Spacer (modifier = Modifier .width(8 .dp.toAdaptivePadding()))
465
+ if (canRemoveItems) {
466
+ Spacer (modifier = Modifier .width(8 .dp.toAdaptivePadding()))
496
467
497
- val removeButtonContentDescription = stringResource(
498
- id = R .string.woopos_remove_item_button_from_cart_content_description,
499
- item.name
468
+ val removeButtonContentDescription = stringResource(
469
+ id = R .string.woopos_remove_item_button_from_cart_content_description,
470
+ item.name
471
+ )
472
+ IconButton (
473
+ onClick = { onUIEvent(WooPosCartUIEvent .ItemRemovedFromCart (item)) },
474
+ modifier = Modifier
475
+ .size(32 .dp)
476
+ .semantics { contentDescription = removeButtonContentDescription }
477
+ ) {
478
+ Icon (
479
+ painter = painterResource(id = R .drawable.ic_pos_remove_cart_item),
480
+ tint = MaterialTheme .colors.onBackground,
481
+ contentDescription = null ,
500
482
)
501
- IconButton (
502
- onClick = { onUIEvent(WooPosCartUIEvent .ItemRemovedFromCart (item)) },
503
- modifier = Modifier
504
- .size(32 .dp)
505
- .semantics { contentDescription = removeButtonContentDescription }
506
- ) {
507
- Icon (
508
- painter = painterResource(id = R .drawable.ic_pos_remove_cart_item),
509
- tint = MaterialTheme .colors.onBackground,
510
- contentDescription = null ,
511
- )
512
- }
513
483
}
514
- Spacer (modifier = Modifier .width(16 .dp.toAdaptivePadding()))
515
484
}
485
+ Spacer (modifier = Modifier .width(16 .dp.toAdaptivePadding()))
516
486
}
517
487
}
518
488
}
@@ -542,7 +512,6 @@ fun WooPosCartScreenProductsPreview(modifier: Modifier = Modifier) {
542
512
" VW California VW California, VW California,VW California" ,
543
513
description = " test description" ,
544
514
price = " €50,000" ,
545
- isAppearanceAnimationPlayed = true ,
546
515
productType = ProductType .Simple ,
547
516
),
548
517
WooPosCartState .Body .WithItems .Item (
@@ -556,7 +525,6 @@ fun WooPosCartScreenProductsPreview(modifier: Modifier = Modifier) {
556
525
description = " test description test description test description test description" +
557
526
" test description test description test description test description test description" ,
558
527
price = " $150,000" ,
559
- isAppearanceAnimationPlayed = true ,
560
528
productType = ProductType .Simple ,
561
529
),
562
530
WooPosCartState .Body .WithItems .Item (
@@ -569,7 +537,6 @@ fun WooPosCartScreenProductsPreview(modifier: Modifier = Modifier) {
569
537
name = " VW California" ,
570
538
description = " " ,
571
539
price = " €250,000" ,
572
- isAppearanceAnimationPlayed = true ,
573
540
productType = ProductType .Simple ,
574
541
)
575
542
)
@@ -605,7 +572,6 @@ fun WooPosCartScreenCheckoutPreview(modifier: Modifier = Modifier) {
605
572
name = " VW California" ,
606
573
description = null ,
607
574
price = " €50,000" ,
608
- isAppearanceAnimationPlayed = true ,
609
575
productType = ProductType .Simple ,
610
576
),
611
577
WooPosCartState .Body .WithItems .Item (
@@ -618,7 +584,6 @@ fun WooPosCartScreenCheckoutPreview(modifier: Modifier = Modifier) {
618
584
name = " VW California" ,
619
585
description = null ,
620
586
price = " $150,000" ,
621
- isAppearanceAnimationPlayed = true ,
622
587
productType = ProductType .Simple ,
623
588
),
624
589
WooPosCartState .Body .WithItems .Item (
@@ -631,7 +596,6 @@ fun WooPosCartScreenCheckoutPreview(modifier: Modifier = Modifier) {
631
596
name = " VW California" ,
632
597
description = null ,
633
598
price = " €250,000" ,
634
- isAppearanceAnimationPlayed = true ,
635
599
productType = ProductType .Simple ,
636
600
)
637
601
)
0 commit comments