增加微信小程序版

liferestartWX/utils/wux/checkbox-group/index.js

@@ -0,0 +1,148 @@
+import baseComponent from '../helpers/baseComponent'
+import eventsMixin from '../helpers/eventsMixin'
+
+function getOptions(options = []) {
+    return options.map((option, index) => {
+        if (typeof option === 'string') {
+            return {
+                title: option,
+                value: option,
+                index,
+            }
+        }
+        return {
+            ...option,
+            index,
+        }
+    })
+}
+
+function getCheckedValues(newVal, oldVal = []) {
+    let checkedValues = [...oldVal]
+    checkedValues = checkedValues.indexOf(newVal) !== -1 ? checkedValues.filter((n) => n !== newVal) : [...checkedValues, newVal]
+    return checkedValues
+}
+
+baseComponent({
+    useField: true,
+    behaviors: [eventsMixin()],
+    relations: {
+        '../field/index': {
+            type: 'ancestor',
+        },
+        '../checkbox/index': {
+            type: 'descendant',
+            observer() {
+                this.debounce(this.changeValue)
+            },
+        },
+    },
+    properties: {
+        prefixCls: {
+            type: String,
+            value: 'wux-checkbox-group',
+        },
+        cellGroupPrefixCls: {
+            type: String,
+            value: 'wux-cell-group',
+        },
+        value: {
+            type: Array,
+            value: [],
+        },
+        title: {
+            type: String,
+            value: '',
+        },
+        label: {
+            type: String,
+            value: '',
+        },
+        options: {
+            type: Array,
+            value: [],
+        },
+    },
+    data: {
+        inputValue: [],
+        keys: [],
+    },
+    observers: {
+        value(newVal) {
+            if (this.hasFieldDecorator) return
+            this.updated(newVal)
+            this.changeValue(newVal)
+        },
+        inputValue(newVal) {
+            if (this.hasFieldDecorator) {
+                this.changeValue(newVal)
+            }
+        },
+        options(newVal) {
+            this.changeValue(this.data.inputValue, newVal)
+        },
+    },
+    methods: {
+        updated(inputValue) {
+            if (this.data.inputValue !== inputValue) {
+                this.setData({ inputValue })
+            }
+        },
+        changeValue(value = this.data.inputValue, options = this.data.options) {
+            const showOptions = getOptions(options)
+            const elements = this.getRelationNodes('../checkbox/index')
+            const keys = showOptions.length > 0 ? showOptions : elements ? elements.map((element) => element.data) : []
+
+            // Elements should be updated when not using the options
+            if (!showOptions.length && elements && elements.length > 0) {
+                elements.forEach((element, index) => {
+                    element.changeValue(Array.isArray(value) && value.includes(element.data.value), index)
+                })
+            }
+
+            if (this.data.keys !== keys) {
+                this.setData({
+                    keys,
+                })
+            }
+        },
+        onChange(item) {
+            const checkedValues = getCheckedValues(item.value, this.data.inputValue)
+
+            // 如果使用 <Field /> 组件包裹时，value 返回值为数组
+            if (this.hasFieldDecorator) {
+                item.value = checkedValues
+            }
+
+            this.triggerEvent('change', {
+                ...this.getValue(checkedValues),
+                ...item,
+                name: this.data.name,
+                value: item.value, // 兼容 3.6.1 之前版本，不改变 value
+            })
+        },
+        onCheckboxChange(e) {
+            // Set real index
+            const { index } = e.currentTarget.dataset
+            this.onChange({ ...e.detail, index })
+        },
+        getValue(value = this.data.inputValue, cols = this.data.keys) {
+            const checkedValues = cols.filter((option) => value.includes(option.value))
+            const displayValue = checkedValues.map((option) => option.title) || []
+            const allValues = cols.map((option) => option.value)
+            const selectedIndex = value.map((n) => allValues.indexOf(n))
+
+            return {
+                value,
+                displayValue,
+                selectedIndex,
+                selectedValue: value,
+                cols,
+            }
+        },
+        getBoundingClientRect(callback) {
+            this.cellGroup = this.cellGroup || this.selectComponent('#wux-cell-group')
+            return this.cellGroup && this.cellGroup.getBoundingClientRect(callback)
+        },
+    },
+})

liferestartWX/utils/wux/checkbox-group/index.json

@@ -0,0 +1,7 @@
+{
+    "component": true,
+    "usingComponents": {
+        "wux-cell-group": "../cell-group/index",
+        "wux-checkbox": "../checkbox/index"
+    }
+}

liferestartWX/utils/wux/checkbox-group/index.wxml

@@ -0,0 +1,26 @@
+<wux-cell-group id="wux-cell-group" wux-class="{{ prefixCls }}" prefixCls="{{ cellGroupPrefixCls }}" title="{{ title }}" label="{{ label }}">
+    <block wx:for="{{ common.getOptions(options) }}" wx:for-item="option" wx:key="index" wx:if="{{ options.length > 0 }}">
+        <wux-checkbox
+            prefixCls="{{ option.prefixCls || 'wux-checkbox' }}"
+            cellPrefixCls="{{ option.cellPrefixCls || 'wux-cell' }}"
+            selectablePrefixCls="{{ option.selectablePrefixCls || 'wux-selectable' }}"
+            title="{{ option.title }}"
+            label="{{ option.label }}"
+            extra="{{ option.extra }}"
+            value="{{ option.value }}"
+            checked="{{ common.getChecked(inputValue, option) }}"
+            disabled="{{ option.disabled }}"
+            color="{{ option.color || 'balanced' }}"
+            data-index="{{ index }}"
+            bind:change="onCheckboxChange"
+        />
+    </block>
+    <block wx:if="{{ options.length === 0 }}">
+        <slot></slot>
+    </block>
+</wux-cell-group>
+
+<wxs module="common">
+    module.exports.getOptions = function(options) { return options.map(function(option) { if (option.constructor === 'String') { return { title: option, value: option } } return option }) }
+    module.exports.getChecked = function(values, option) { return values.indexOf(option.value) !== -1 }
+</wxs>