VerticalLine.kt

/*
 * Copyright 2020 The Android Open Source Project
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */


import androidx.compose.Composable
import androidx.ui.core.Modifier
import androidx.ui.core.WithConstraints
import androidx.ui.foundation.Box
import androidx.ui.foundation.Text
import androidx.ui.foundation.VerticalScroller
import androidx.ui.foundation.drawBackground
import androidx.ui.graphics.Color
import androidx.ui.layout.*
import androidx.ui.text.FirstBaseline
import androidx.ui.tooling.preview.Preview
import androidx.ui.unit.dp

@ExperimentalLayout
@Composable
fun VerticalText(text: String) {
    // Size the row by using the "minimum" height of the children after layout
    // Since the incoming constraints from the vertical scroller allow infinite height, this is
    // required to tighten the constraints to the "minimum" required to place the children.

    // By specifying the height of IntrinsicSize.Min, the children will be measured at the
    // constrained width and the height of the `Row` will be constrained to the minimum size needed.

    // This allows `.fillMaxHeight()` to expand to the minimum size required by the text
    // without this, `.fillMaxHeight()` would produce a 0-height because it won't expand to infinite
    // height allowed by the vertical scroller
    Row(Modifier.preferredHeight(IntrinsicSize.Min)
        .padding(vertical = 8.dp)) {
        Box(Modifier.padding(start = 16.dp, end = 8.dp)
            .preferredWidth(5.dp)
            .fillMaxHeight()
            .drawBackground(Color.Green))
        // This weight is required today in order for the text to size correctly, but should not be.
        // Filed as https://issuetracker.google.com/issues/158778859
        Text(text, Modifier.weight(1f))
    }
}

@ExperimentalLayout
@Composable
fun VerticalTextConstraintLayout(text: String) {
    ConstraintLayout(Modifier.padding(vertical = 8.dp)
        .fillMaxWidth()) {
        val (lineRef, textRef) = createRefs()

        Box(Modifier.preferredWidth(5.dp)
            .constrainAs(lineRef) {
                top.linkTo(parent.top)
                bottom.linkTo(parent.bottom)
                start.linkTo(parent.start, margin = 16.dp)
                height = Dimension.fillToConstraints
            }
            .drawBackground(Color.Green))
        Text(text, Modifier.constrainAs(textRef) {
            top.linkTo(parent.top)
            bottom.linkTo(parent.bottom)
            start.linkTo(lineRef.end, margin = 8.dp)
            end.linkTo(parent.end, margin = 8.dp)
            // These Dimension values will correctly size the text. We started a discussion about
            // better ways to express this, and would love to hear your thoughts. Note that other
            // options such as `fillToConstraints` will not lead to a correctly sized text.
            width = Dimension.preferredWrapContent
            height = Dimension.wrapContent
        })
    }
}

@ExperimentalLayout
@Preview
@Composable
fun _VerticalText()  {
    // Add a VerticalScroller since that's what causes the above component to break. A
    // VerticalScroller allows for infinite vertical size on it's children, which plays poorly with
    // fillMaxSize (fillMaxSize will opt not to create an infinite-height component, instead
    // producing a 0.dp height)
    VerticalScroller {
        VerticalText("""
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris suscipit metus nulla, sit amet consectetur mi consectetur et. Sed id blandit turpis. Fusce feugiat imperdiet ex, volutpat luctus orci mattis sit amet. Donec orci leo, malesuada ac convallis nec, auctor sed enim. Sed aliquam nisi in mi volutpat, vel rhoncus nunc blandit. Curabitur nec iaculis magna. Duis in orci quis velit accumsan condimentum vitae nec arcu. Donec quis sapien ac mauris tincidunt suscipit a quis nunc. Pellentesque placerat elementum urna in luctus.
        
            Nunc tempor hendrerit lectus, id faucibus dui aliquet non. Aliquam quis arcu a purus pretium ultrices. Morbi eu tortor vitae nibh rutrum faucibus. Vivamus eu purus orci. Nunc tellus lorem, gravida quis ornare at, pulvinar at dui. Curabitur a ante sem. Curabitur porttitor dolor venenatis, posuere erat vel, congue mauris. Morbi eu accumsan nisi. Quisque vel elementum risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Cras lorem ante, ultricies eget tortor ac, maximus maximus nibh.
        
            Morbi non augue varius, tempus justo sit amet, tempus enim. Etiam elit tortor, vehicula nec leo vitae, luctus fermentum sapien. Fusce id mauris orci. Integer rutrum ut lectus non malesuada. Donec diam est, ullamcorper a pharetra quis, gravida vel sapien. Fusce ullamcorper, enim at placerat euismod, est turpis scelerisque diam, in interdum lacus velit ut metus. Sed eu leo in velit tempus tincidunt in eget eros.
        
            Nullam quis purus et justo tristique bibendum sit amet ac elit. Vivamus vulputate lectus ac tincidunt condimentum. Praesent in felis dapibus lectus tristique molestie. Donec ante sem, mollis quis est at, lacinia laoreet risus. Mauris finibus neque vitae felis rhoncus, eget sagittis ex ornare. Nulla id mollis felis. Proin congue, risus quis vehicula bibendum, nunc tellus dictum massa, non consectetur nisl leo in leo. Duis maximus est non nisl molestie, ut imperdiet tellus bibendum.
        
            Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer tempor turpis eget risus sagittis volutpat. Quisque et lacus lacinia, elementum lectus ac, finibus ante. Sed hendrerit nisl interdum, ullamcorper neque quis, varius felis. Praesent erat turpis, porttitor molestie feugiat at, elementum a lectus. Donec eget eleifend nunc, vitae suscipit turpis. Cras vitae justo in eros cursus porttitor sit amet a leo. Nunc gravida quam sed suscipit sagittis. Morbi congue diam id ipsum interdum, vitae varius nisi tempor. Aliquam aliquam, tellus cursus euismod vestibulum, est ex laoreet orci, sollicitudin consequat nisi velit non libero.
        """.trimIndent())
    }
}


@ExperimentalLayout
@Preview
@Composable
fun _VerticalText_ConstraintLayout()  {
    VerticalScroller {
        VerticalTextConstraintLayout("""
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris suscipit metus nulla, sit amet consectetur mi consectetur et. Sed id blandit turpis. Fusce feugiat imperdiet ex, volutpat luctus orci mattis sit amet. Donec orci leo, malesuada ac convallis nec, auctor sed enim. Sed aliquam nisi in mi volutpat, vel rhoncus nunc blandit. Curabitur nec iaculis magna. Duis in orci quis velit accumsan condimentum vitae nec arcu. Donec quis sapien ac mauris tincidunt suscipit a quis nunc. Pellentesque placerat elementum urna in luctus.
        
            Nunc tempor hendrerit lectus, id faucibus dui aliquet non. Aliquam quis arcu a purus pretium ultrices. Morbi eu tortor vitae nibh rutrum faucibus. Vivamus eu purus orci. Nunc tellus lorem, gravida quis ornare at, pulvinar at dui. Curabitur a ante sem. Curabitur porttitor dolor venenatis, posuere erat vel, congue mauris. Morbi eu accumsan nisi. Quisque vel elementum risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Cras lorem ante, ultricies eget tortor ac, maximus maximus nibh.
        
            Morbi non augue varius, tempus justo sit amet, tempus enim. Etiam elit tortor, vehicula nec leo vitae, luctus fermentum sapien. Fusce id mauris orci. Integer rutrum ut lectus non malesuada. Donec diam est, ullamcorper a pharetra quis, gravida vel sapien. Fusce ullamcorper, enim at placerat euismod, est turpis scelerisque diam, in interdum lacus velit ut metus. Sed eu leo in velit tempus tincidunt in eget eros.
        
            Nullam quis purus et justo tristique bibendum sit amet ac elit. Vivamus vulputate lectus ac tincidunt condimentum. Praesent in felis dapibus lectus tristique molestie. Donec ante sem, mollis quis est at, lacinia laoreet risus. Mauris finibus neque vitae felis rhoncus, eget sagittis ex ornare. Nulla id mollis felis. Proin congue, risus quis vehicula bibendum, nunc tellus dictum massa, non consectetur nisl leo in leo. Duis maximus est non nisl molestie, ut imperdiet tellus bibendum.
        
            Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer tempor turpis eget risus sagittis volutpat. Quisque et lacus lacinia, elementum lectus ac, finibus ante. Sed hendrerit nisl interdum, ullamcorper neque quis, varius felis. Praesent erat turpis, porttitor molestie feugiat at, elementum a lectus. Donec eget eleifend nunc, vitae suscipit turpis. Cras vitae justo in eros cursus porttitor sit amet a leo. Nunc gravida quam sed suscipit sagittis. Morbi congue diam id ipsum interdum, vitae varius nisi tempor. Aliquam aliquam, tellus cursus euismod vestibulum, est ex laoreet orci, sollicitudin consequat nisi velit non libero.
        """.trimIndent())
    }
}

@ExperimentalLayout
@Preview
@Composable
fun _VerticalText_small() {
    VerticalScroller {
        VerticalText("Short string")
    }
}