SepantaUIKit/SepantaUiKit/SKMultiOption/SKMultiOption.qml

import QtQuick 2.13
import QtQml 2.13
import QtQuick.Layouts 1.13
import "../"
import "../aCommon"

Item {
    id: root
    height: 38
    width: 400

    property var listOfObj: []
    property var options: ["High", "Low", "Medium"]
    property var currentText: options[currentIndex]
    property var currentIndex: 0

    property var stateOfComponent: Setting.Enable
    Item {
        anchors.fill: parent

        RowLayout {
            id: idLayout
            anchors.fill: parent
            spacing: 0
        }
    }

    Rectangle {
        id: idBackGround
        anchors.fill: parent
        radius: Setting.mediumRadius
        color: "transparent"
        border.color: Colors.tertiaryEnable
        border.width: 1
        clip: true
    }

    CurrentSelectedManager {
        id: indexManager
    }

    function buildComponent() {

        let lengthOfList = listOfObj.length
        for (var k = 0; k < lengthOfList; k++) {
            listOfObj[k].destroy()
        }
        listOfObj = []

        let numberOfBtns = options.length
        let numberOfLines = numberOfBtns - 1

        let btnCompoent = Qt.createComponent("MultiOptionBtn.qml")
        let lineComponent = Qt.createComponent(
                "qrc:/SepantaUiKit/aCommon/Line.qml")

        if (numberOfLines > 0) {
            let lengthOfEachBtn = root.width / numberOfBtns
            for (var j = 0; j < numberOfBtns; j++) {
                let rightHasRadius = false
                let leftHasRadius = false
                if (j === 0) {
                    leftHasRadius = true
                } else if (j === numberOfBtns - 1) {
                    rightHasRadius = true
                }

                let sprite = btnCompoent.createObject(idLayout, {
                                                          "text": options[j],
                                                          "indexManager": indexManager,
                                                          "myIndex": j,
                                                          "leftHasRadius": leftHasRadius,
                                                          "rightHasRadius": rightHasRadius,
                                                          "radius": idBackGround.radius
                                                      })
                listOfObj.push(sprite)

                if (j !== numberOfBtns - 1) {
                    let spriteL = lineComponent.createObject(idLayout, {
                                                                 "color": Colors.tertiaryEnable,
                                                                 "Layout.fillHeight": true,
                                                                 "width": 1
                                                             })
                    listOfObj.push(spriteL)
                }
            }
        }
    }

    Line {}

    Component.onCompleted: {
        buildComponent()
    }
}