From 422b2e6db1a4037ee11055ee35f3f2a400f5c032 Mon Sep 17 00:00:00 2001 From: InsanusMokrassar Date: Tue, 13 Sep 2022 22:01:02 +0600 Subject: [PATCH] improve SkeletonAnimation --- .../common/compose/SkeletonAnimation.kt | 18 ++++++++++++------ 1 file changed, 12 insertions(+), 6 deletions(-) diff --git a/common/compose/src/jsMain/kotlin/dev/inmo/micro_utils/common/compose/SkeletonAnimation.kt b/common/compose/src/jsMain/kotlin/dev/inmo/micro_utils/common/compose/SkeletonAnimation.kt index 01cdc48c1b6..f3c2bb2e9c3 100644 --- a/common/compose/src/jsMain/kotlin/dev/inmo/micro_utils/common/compose/SkeletonAnimation.kt +++ b/common/compose/src/jsMain/kotlin/dev/inmo/micro_utils/common/compose/SkeletonAnimation.kt @@ -7,12 +7,14 @@ object SkeletonAnimation : StyleSheet() { to { backgroundPosition("-20% 0") } } - fun CSSBuilder.createSkeletonStyle( + fun CSSBuilder.includeSkeletonStyle( duration: CSSSizeValue = 2.s, timingFunction: AnimationTimingFunction = AnimationTimingFunction.EaseInOut, iterationCount: Int? = null, direction: AnimationDirection = AnimationDirection.Normal, - keyFrames: CSSNamedKeyframes = skeletonKeyFrames + keyFrames: CSSNamedKeyframes = skeletonKeyFrames, + hideChildren: Boolean = true, + hideText: Boolean = hideChildren ) { backgroundImage("linear-gradient(110deg, rgb(236, 236, 236) 40%, rgb(245, 245, 245) 50%, rgb(236, 236, 236) 65%)") backgroundSize("200% 100%") @@ -23,15 +25,19 @@ object SkeletonAnimation : StyleSheet() { iterationCount(iterationCount) direction(direction) } - property("color", "${Color.transparent} !important") + if (hideText) { + property("color", "${Color.transparent} !important") + } - child(self, universal) style { - property("visibility", "hidden") + if (hideChildren) { + child(self, universal) style { + property("visibility", "hidden") + } } } val skeleton by style { - createSkeletonStyle() + includeSkeletonStyle() } }