From c7223bdcb184b53f049d739b6a6c7a5f702a7df7 Mon Sep 17 00:00:00 2001 From: Shagen Ogandzhanian Date: Sun, 6 Jun 2021 14:32:21 +0200 Subject: [PATCH] CSSUnitValue is an interface --- .../kotlin/androidx/compose/web/css/CSS.kt | 8 +- .../androidx/compose/web/css/CSSProperties.kt | 17 +- .../androidx/compose/web/css/CSSUnits.kt | 204 ++++++++++++++---- web/core/src/jsTest/kotlin/CSSUnitApiTests.kt | 3 +- 4 files changed, 182 insertions(+), 50 deletions(-) diff --git a/web/core/src/jsMain/kotlin/androidx/compose/web/css/CSS.kt b/web/core/src/jsMain/kotlin/androidx/compose/web/css/CSS.kt index 8ab5de8f66..be350d3c22 100644 --- a/web/core/src/jsMain/kotlin/androidx/compose/web/css/CSS.kt +++ b/web/core/src/jsMain/kotlin/androidx/compose/web/css/CSS.kt @@ -142,8 +142,10 @@ external interface CSSNumericValue : CSSStyleValue { // } } -open class CSSUnitValue(val value: Number, val unit: String) : CSSNumericValue { - override fun toString(): String = "${value}${unit}" +interface CSSUnitValue : CSSNumericValue { + val value: Number + val unit: String + fun asString(): String = "${value}${unit}" } // declare enum CSSMathOperator { @@ -329,7 +331,7 @@ external interface StylePropertyValue fun String.asStylePropertyValue() = unsafeCast() fun Number.asStylePropertyValue() = unsafeCast() fun CSSStyleValue.asStylePropertyValue() = unsafeCast() -fun CSSUnitValue.asStylePropertyValue() = toString().asStylePropertyValue() +fun CSSUnitValue.asStylePropertyValue() = asString().asStylePropertyValue() external class StylePropertyMap : StylePropertyMapReadOnly { fun set(property: String, vararg values: StylePropertyValue) diff --git a/web/core/src/jsMain/kotlin/androidx/compose/web/css/CSSProperties.kt b/web/core/src/jsMain/kotlin/androidx/compose/web/css/CSSProperties.kt index 400cacaf5f..db03363241 100644 --- a/web/core/src/jsMain/kotlin/androidx/compose/web/css/CSSProperties.kt +++ b/web/core/src/jsMain/kotlin/androidx/compose/web/css/CSSProperties.kt @@ -296,7 +296,7 @@ fun StyleBuilder.borderRadius(r: CSSUnitValue) { } fun StyleBuilder.borderRadius(topLeft: CSSUnitValue, bottomRight: CSSUnitValue) { - property("border-radius", "$topLeft $bottomRight".asStylePropertyValue()) + property("border-radius", "${topLeft.asString()} ${bottomRight.asString()}".asStylePropertyValue()) } fun StyleBuilder.borderRadius( @@ -304,7 +304,7 @@ fun StyleBuilder.borderRadius( topRightAndBottomLeft: CSSUnitValue, bottomRight: CSSUnitValue ) { - property("border-radius", "$topLeft $topRightAndBottomLeft $bottomRight".asStylePropertyValue()) + property("border-radius", "${topLeft.asString()} ${topRightAndBottomLeft.asString()} ${bottomRight.asString()}".asStylePropertyValue()) } fun StyleBuilder.borderRadius( @@ -313,7 +313,10 @@ fun StyleBuilder.borderRadius( bottomRight: CSSUnitValue, bottomLeft: CSSUnitValue ) { - property("border-radius", "$topLeft $topRight $bottomRight $bottomLeft".asStylePropertyValue()) + property( + "border-radius", + "${topLeft.asString()} ${topRight.asString()} ${bottomRight.asString()} ${bottomLeft.asString()}".asStylePropertyValue() + ) } fun StyleBuilder.width(value: CSSUnitValue) { @@ -370,18 +373,18 @@ fun StyleBuilder.fontSize(value: CSSUnitValue) { fun StyleBuilder.margin(value: CSSUnitValue) { // marign hasn't Typed OM yet - property("margin", value(value.toString())) + property("margin", value(value.asString())) } fun StyleBuilder.marginLeft(value: CSSUnitValue) { - property("margin-left", value(value.toString())) + property("margin-left", value(value.asString())) } fun StyleBuilder.marginTop(value: CSSUnitValue) { - property("margin-top", value(value.toString())) + property("margin-top", value(value.asString())) } fun StyleBuilder.padding(value: CSSUnitValue) { // padding hasn't Typed OM yet - property("padding", value(value.toString())) + property("padding", value(value.asString())) } diff --git a/web/core/src/jsMain/kotlin/androidx/compose/web/css/CSSUnits.kt b/web/core/src/jsMain/kotlin/androidx/compose/web/css/CSSUnits.kt index 27e73db800..9d639f4a49 100644 --- a/web/core/src/jsMain/kotlin/androidx/compose/web/css/CSSUnits.kt +++ b/web/core/src/jsMain/kotlin/androidx/compose/web/css/CSSUnits.kt @@ -8,47 +8,173 @@ interface CSSFrequencyValue interface CSSResolutionValue interface CSSFlexValue -class CSSpercentValue(value: Number) : CSSUnitValue(value, "percent"), CSSRelValue -class CSSemValue(value: Number) : CSSUnitValue(value, "em"), CSSRelValue -class CSSexValue(value: Number) : CSSUnitValue(value, "ex"), CSSRelValue -class CSSchValue(value: Number) : CSSUnitValue(value, "ch"), CSSRelValue -class CSSicValue(value: Number) : CSSUnitValue(value, "ic"), CSSRelValue -class CSSremValue(value: Number) : CSSUnitValue(value, "rem"), CSSRelValue -class CSSlhValue(value: Number) : CSSUnitValue(value, "lh"), CSSRelValue -class CSSrlhValue(value: Number) : CSSUnitValue(value, "rlh"), CSSRelValue -class CSSvwValue(value: Number) : CSSUnitValue(value, "vw"), CSSRelValue -class CSSvhValue(value: Number) : CSSUnitValue(value, "vh"), CSSRelValue -class CSSviValue(value: Number) : CSSUnitValue(value, "vi"), CSSRelValue -class CSSvbValue(value: Number) : CSSUnitValue(value, "vb"), CSSRelValue -class CSSvminValue(value: Number) : CSSUnitValue(value, "vmin"), CSSRelValue -class CSSvmaxValue(value: Number) : CSSUnitValue(value, "vmax"), CSSRelValue -class CSScmValue(value: Number) : CSSUnitValue(value, "cm"), CSSRelValue -class CSSmmValue(value: Number) : CSSUnitValue(value, "mm"), CSSRelValue -class CSSQValue(value: Number) : CSSUnitValue(value, "q"), CSSRelValue - -class CSSptValue(value: Number) : CSSUnitValue(value, "pt"), CSSAbsValue -class CSSpcValue(value: Number) : CSSUnitValue(value, "pc"), CSSAbsValue -class CSSpxValue(value: Number) : CSSUnitValue(value, "px"), CSSAbsValue - -class CSSdegValue(value: Number) : CSSUnitValue(value, "deg"), CSSAngleValue -class CSSgradValue(value: Number) : CSSUnitValue(value, "grad"), CSSAngleValue -class CSSradValue(value: Number) : CSSUnitValue(value, "rad"), CSSAngleValue -class CSSturnValue(value: Number) : CSSUnitValue(value, "turn"), CSSAngleValue - -class CSSsValue(value: Number) : CSSUnitValue(value, "s"), CSSTimeValue -class CSSmsValue(value: Number) : CSSUnitValue(value, "ms"), CSSTimeValue - -class CSSHzValue(value: Number) : CSSUnitValue(value, "hz"), CSSFrequencyValue -class CSSkHzValue(value: Number) : CSSUnitValue(value, "khz"), CSSFrequencyValue - -class CSSdpiValue(value: Number) : CSSUnitValue(value, "dpi"), CSSResolutionValue -class CSSdpcmValue(value: Number) : CSSUnitValue(value, "dpcm"), CSSResolutionValue -class CSSdppxValue(value: Number) : CSSUnitValue(value, "dppx"), CSSResolutionValue - -class CSSfrValue(value: Number) : CSSUnitValue(value, "fr"), CSSFlexValue +class CSSpercentValue(override val value: Number) : CSSUnitValue, CSSRelValue { + override val unit: String + get() = "percent" +} + +class CSSemValue(override val value: Number) : CSSUnitValue, CSSRelValue { + override val unit: String + get() = "em" +} + +class CSSexValue(override val value: Number) : CSSUnitValue, CSSRelValue { + override val unit: String + get() = "ex" +} + +class CSSchValue(override val value: Number) : CSSUnitValue, CSSRelValue { + override val unit: String + get() = "ch" +} + +class CSSicValue(override val value: Number) : CSSUnitValue, CSSRelValue { + override val unit: String + get() = "ic" +} + +class CSSremValue(override val value: Number) : CSSUnitValue, CSSRelValue { + override val unit: String + get() = "rem" +} + +class CSSlhValue(override val value: Number) : CSSUnitValue, CSSRelValue { + override val unit: String + get() = "lh" +} + +class CSSrlhValue(override val value: Number) : CSSUnitValue, CSSRelValue { + override val unit: String + get() = "rlh" +} + +class CSSvwValue(override val value: Number) : CSSUnitValue, CSSRelValue { + override val unit: String + get() = "vw" +} + +class CSSvhValue(override val value: Number) : CSSUnitValue, CSSRelValue { + override val unit: String + get() = "vh" +} + +class CSSviValue(override val value: Number) : CSSUnitValue, CSSRelValue { + override val unit: String + get() = "vi" +} + +class CSSvbValue(override val value: Number) : CSSUnitValue, CSSRelValue { + override val unit: String + get() = "vb" +} + +class CSSvminValue(override val value: Number) : CSSUnitValue, CSSRelValue { + override val unit: String + get() = "vmin" +} + +class CSSvmaxValue(override val value: Number) : CSSUnitValue, CSSRelValue { + override val unit: String + get() = "vmax" +} + +class CSScmValue(override val value: Number) : CSSUnitValue, CSSRelValue { + override val unit: String + get() = "cm" +} + +class CSSmmValue(override val value: Number) : CSSUnitValue, CSSRelValue { + override val unit: String + get() = "mm" +} + +class CSSQValue(override val value: Number) : CSSUnitValue, CSSRelValue { + override val unit: String + get() = "q" +} + +class CSSptValue(override val value: Number) : CSSUnitValue, CSSAbsValue { + override val unit: String + get() = "pt" +} + +class CSSpcValue(override val value: Number) : CSSUnitValue, CSSAbsValue { + override val unit: String + get() = "pc" +} + +class CSSpxValue(override val value: Number) : CSSUnitValue, CSSAbsValue { + override val unit: String + get() = "px" +} + +class CSSdegValue(override val value: Number) : CSSUnitValue, CSSAngleValue { + override val unit: String + get() = "deg" +} + +class CSSgradValue(override val value: Number) : CSSUnitValue, CSSAngleValue { + override val unit: String + get() = "grad" +} + +class CSSradValue(override val value: Number) : CSSUnitValue, CSSAngleValue { + override val unit: String + get() = "rad" +} + +class CSSturnValue(override val value: Number) : CSSUnitValue, CSSAngleValue { + override val unit: String + get() = "turn" +} + +class CSSsValue(override val value: Number) : CSSUnitValue, CSSTimeValue { + override val unit: String + get() = "s" +} + +class CSSmsValue(override val value: Number) : CSSUnitValue, CSSTimeValue { + override val unit: String + get() = "ms" +} + +class CSSHzValue(override val value: Number) : CSSUnitValue, CSSFrequencyValue { + override val unit: String + get() = "hz" +} + +class CSSkHzValue(override val value: Number) : CSSUnitValue, CSSFrequencyValue { + override val unit: String + get() = "khz" +} + +class CSSdpiValue(override val value: Number) : CSSUnitValue, CSSResolutionValue { + override val unit: String + get() = "dpi" +} + +class CSSdpcmValue(override val value: Number) : CSSUnitValue, CSSResolutionValue { + override val unit: String + get() = "dpcm" +} + +class CSSdppxValue(override val value: Number) : CSSUnitValue, CSSResolutionValue { + override val unit: String + get() = "dppx" +} + +class CSSfrValue(override val value: Number) : CSSUnitValue, CSSFlexValue { + override val unit: String + get() = "fr" +} + +class CSSnumberValue(override val value: Number) : CSSUnitValue, CSSFlexValue { + override val unit: String + get() = "number" +} val Number.number - get(): CSSUnitValue = CSSUnitValue(this, "number") + get(): CSSUnitValue = CSSnumberValue(this) val Number.percent get(): CSSpercentValue = CSSpercentValue(this) diff --git a/web/core/src/jsTest/kotlin/CSSUnitApiTests.kt b/web/core/src/jsTest/kotlin/CSSUnitApiTests.kt index 946753ed1e..ccf348d194 100644 --- a/web/core/src/jsTest/kotlin/CSSUnitApiTests.kt +++ b/web/core/src/jsTest/kotlin/CSSUnitApiTests.kt @@ -18,6 +18,7 @@ import org.jetbrains.compose.web.css.CSSfrValue import org.jetbrains.compose.web.css.CSSgradValue import org.jetbrains.compose.web.css.CSSmmValue import org.jetbrains.compose.web.css.CSSmsValue +import org.jetbrains.compose.web.css.CSSnumberValue import org.jetbrains.compose.web.css.CSSpcValue import org.jetbrains.compose.web.css.CSSpercentValue import org.jetbrains.compose.web.css.CSSptValue @@ -109,7 +110,7 @@ class CSSUnitApiTests { @Test fun postfixInvocation() { - 4.number.assertStructure(CSSUnitValue(4, "number"), "number postfix") + 4.number.assertStructure(CSSnumberValue(4), "number postfix") 4.percent.assertStructure(CSSpercentValue(4), "percent posfix") 4.em.assertStructure(CSSemValue(4), "em postfix")