# All files / src/components ColumnGroup.js

100% Statements 40/40
100% Branches 8/8
100% Functions 7/7
100% Lines 35/35

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    1091x
    1x

    1x
    1x
    1x
    1x
    1x

    1x

    31x
    31x

    31x

    31x

    31x

    1x

    31x
    22x

    1x

    31x
    18x

    1x

    31x
    14x

    1x

    31x

    31x

    85x
    85x

    4x
    4x
    4x
    4x

    4x

    1x
    1x
    1x

     import '../styles/icons.styl'
    import '../styles/column.styl'

    import dropDown from 'v-dropdown'
    import data from '../mixins/data'
    import method from '../mixins/method'
    import selector from '../mixins/selector'
    import column from './Column'

    import { PROVINCE_LEVEL } from '../constants.js'

    export default {
      name: 'ColumnGroup',
      mixins: [data, method, selector],
      inheritAttrs: false,
      components: {
        dropdown: dropDown,
        'v-column': column
      },
      render (h) {
        const child = []

        child.push(this.buildCaller(h))

        const column = []
        // province
        column.push(h(...this.build({
          list: this.listProvince,
          haveChild: this.city,
          value: this.region.province,
          callback: val => {
            this.region.province = val
          }
        })))
        // city
        if (this.listCity.length) {
          column.push(h(...this.build({
            list: this.listCity,
            haveChild: this.area,
            value: this.region.city,
            callback: val => {
              this.region.city = val
            }
          })))
        }
        // area
        if (this.listArea.length) {
          column.push(h(...this.build({
            list: this.listArea,
            haveChild: this.town,
            value: this.region.area,
            callback: val => {
              this.region.area = val
            }
          })))
        }
        // town
        if (this.listTown.length) {
          column.push(h(...this.build({
            list: this.listTown,
            haveChild: false,
            value: this.region.town,
            callback: val => {
              this.region.town = val
            }
          })))
        }

        child.push(h('div', { class: 'rg-column-container' }, column))

        return h('dropdown', {
          ref: 'drop',
          props: {
            border: false
          },
          on: {
            show: this.showChange
          }
        }, child)
      },
      methods: {
        build ({ list, haveChild, value, callback }) {
          return ['v-column', {
            props: {
              list: list,
              haveChild: haveChild,
              value: value
            },
            on: {
              input: val => {
                callback(val)
                this.change()
                this.adjust()
                if (this.isDone()) this.close()
              }
            }
          }]
        },
        isDone () {
          return this.availableLevels.join(',') === this.currentLevels.join(',')
        },
        clear () {
          this.clearRegion(PROVINCE_LEVEL)
          this.change()
          this.close()
        }
      }
    }