Skip to content

Commit

Permalink
Bugfix/checkbox controlled (#158)
Browse files Browse the repository at this point in the history 
* fix:单个checkbox受控

* update：处理radio checked受控

* update：组件初始化

* update:disabled状态的选项排除

* update：stash

* feat: checkboxc受控属性

* feat: 文档更新

* feat: 重置radio更新

* feat: 删除更新

Co-authored-by: amberlwang <[email protected]>
  • Loading branch information
@amberlwan
amberlwan and amberlwang authored Jan 28, 2022
1 parent 52fc521 commit c257e7d
Show file tree
Hide file tree
Showing 9 changed files with 255 additions and 119 deletions.
38 changes: 32 additions & 6 deletions example/pages/checkbox/checkbox.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,15 @@ Page({
demoCheckboxMax: ['checkbox1', 'checkbox2'],
demoCheckbox3: ['checkbox2', 'checkbox4'],
controledData: [],
checked: true,
checked1: true,
options: [
{ label: '全选', checkAll: true },
'多选1',
'多选2',
{ label: '多选3', value: '多选3' },
],
checkAllValues: ['多选1', '多选2', '多选3'],
checkAllValues: ['多选1', '多选2', ''],
activeImage:
'https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/miniprogram/checkbox-checked.png',
inActiveImage:
Expand All @@ -20,21 +22,24 @@ Page({
checkAll1: ['checkbox1'],
},
handleGroupChange(event) {
console.log('group', event.detail);
console.log('group', event.detail.value);
this.setData({
demoCheckbox1: event.detail.value,
});
},
onChange(event) {
console.log('checkbox', event.detail);
console.log('checkbox', event.detail.value);
},
onCheckAllChange(event) {
console.log('checkbox', event.detail);
console.log('checkbox', event.detail.value);
this.setData({
checkAllValues: event.detail,
});
},
toggle5(e) {
console.log('checkbox', e.detail);
console.log('checkbox', e.detail.value);
this.setData({
check5: e.detail,
check5: e.detail.value,
});
},
handleControled() {
Expand All @@ -45,4 +50,25 @@ Page({
controledData: data,
});
},
testControll(val) {
console.log(val.detail);
},
// 受控
controlledHandler(e) {
console.log(e.detail.value);
this.setData({
checked1: e.detail.checked,
});
},
buttonControl() {
console.log(!this.data.checked1);
this.setData({
checked1: !this.data.checked1,
});
},
changeChecked(e) {
this.setData({
checked: e.detail.checked,
});
},
});
45 changes: 36 additions & 9 deletions example/pages/checkbox/checkbox.wxml
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,23 @@
<view class="checkbox-demo">
<view class="demo-title">Checkbox多选框</view>
<view class="demo-desc">用于预设的一组选项中执行多项选择，并呈现选择结果。</view>
<!-- <t-demo title="测试受控 checked">
<t-checkbox defaultChecked="{{checked}}" label="多选" bind:change="testControll" />
<t-checkbox checked="{{checked1}}" label="多选" bind:change="controlledHandler" />

<button bind:tap="buttonControl">dede</button>
</t-demo> -->
<!-- <t-demo title="全选disabled测试" desc="自定义图标多选框">
<t-checkbox-group defaultValue="{{demoCheckbox2}}" bindchange="onChange">
<t-checkbox checkAll value="" label="全选"> </t-checkbox>
<t-checkbox value="checkbox2" label="多选" disabled> </t-checkbox>
<t-checkbox value="checkbox3" label="多选"> </t-checkbox>
<t-checkbox value="checkbox1" label="多选"> </t-checkbox>
</t-checkbox-group>
</t-demo> -->

<t-demo title="01 类型" desc="基础多选框">
<t-checkbox-group value="{{demoCheckbox1}}" bind:change="onChange">
<t-checkbox-group value="{{demoCheckbox1}}" bind:change="handleGroupChange">
<t-checkbox value="checkbox1" label="多选" />
<t-checkbox value="checkbox2" label="多选" />
<t-checkbox value="checkbox3" label="多选" />
Expand All @@ -18,7 +33,7 @@
</t-demo>

<t-demo title="" desc="右侧多选框">
<t-checkbox-group value="{{demoCheckbox2}}" bind:change="onChange">
<t-checkbox-group defaultValue="{{demoCheckbox2}}" bind:change="onChange">
<t-checkbox value="checkbox1" label="多选" align="right" />
<t-checkbox value="checkbox2" label="多选" align="right"></t-checkbox>
<t-checkbox value="checkbox3" label="多选" align="right"></t-checkbox>
Expand All @@ -35,21 +50,21 @@
<t-demo title="" desc="带全选多选框">
<t-checkbox-group
options="{{options}}"
value="{{checkAllValues}}"
defaultValue="{{checkAllValues}}"
bind:change="onCheckAllChange"
></t-checkbox-group>
</t-demo>

<t-demo title="" desc="限制最多可选数量">
<t-checkbox-group max="{{2}}" bind:change="onChange" value="{{demoCheckboxMax}}">
<t-checkbox-group max="{{2}}" bind:change="onChange" defaultValue="{{demoCheckboxMax}}">
<t-checkbox value="checkbox1" label="多选" />
<t-checkbox value="checkbox2" label="多选" />
<t-checkbox value="checkbox3" label="多选" />
</t-checkbox-group>
</t-demo>

<t-demo title="02 禁用状态" desc="多选框禁用态">
<t-checkbox-group value="{{demoCheckbox3}}" disabled>
<t-checkbox-group defaultValue="{{demoCheckbox3}}" disabled>
<t-checkbox value="checkbox1" label="多选" />
<t-checkbox value="checkbox2" label="多选" />
<t-checkbox value="checkbox3" label="多选" align="right" />
Expand All @@ -58,11 +73,11 @@
</t-demo>

<t-demo title="" desc="多选半选态">
<t-checkbox label="半选" indeterminate readonly></t-checkbox>
<t-checkbox label="半选" indeterminate readonly defaultChecked="{{true}}"></t-checkbox>
</t-demo>

<t-demo title="03 特殊类型" desc="自定义图标多选框">
<t-checkbox-group value="{{demoCheckbox2}}" bindchange="onChange">
<t-checkbox-group defaultValue="{{demoCheckbox2}}" bindchange="onChange">
<t-checkbox value="checkbox1" label="多选" icon="{{[activeImage,inActiveImage]}}">
</t-checkbox>
<t-checkbox value="checkbox2" label="多选" icon="{{[activeImage,inActiveImage]}}">
Expand All @@ -73,9 +88,21 @@
</t-demo>

<t-demo title="04 规格" desc="多选框尺寸规格">
<t-checkbox value="checkbox1" label="多选H48" t-class="t-checkbox-padding" checked>
<t-checkbox
value="checkbox1"
label="多选H48"
t-class="t-checkbox-padding"
checked="{{checked}}"
bind:change="changeChecked"
>
</t-checkbox>
<t-checkbox
value="checkbox2"
t-class="t-checkbox-demo"
label="多选H56"
defaultChecked="{{checked}}"
>
</t-checkbox>
<t-checkbox value="checkbox2" t-class="t-checkbox-demo" label="多选H56" checked> </t-checkbox>
</t-demo>
<view style="height: 74rpx"></view>
</view>
8 changes: 4 additions & 4 deletions src/checkbox-group/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,12 +28,12 @@ isComponent: true

```html
<!-- page.wxml -->
<t-checkbox-group bordered value="checkbox1" bind:change="onChange">
<t-checkbox title="单行标题" name="checkbox1" />
<t-checkbox title="单行标题" label="辅助信息" name="checkbox2" />
<t-checkbox-group bordered defaultValue="checkbox1" bind:change="onChange">
<t-checkbox title="单行标题" value="checkbox1" />
<t-checkbox title="单行标题" label="辅助信息" value="checkbox2" />
</t-checkbox-group>
```

<t-checkbox title="单行标题" value="checkbox1" defaultChecked="{{true}}"/>
## API

### `<t-checkbox-group>` 组件
Expand Down
105 changes: 65 additions & 40 deletions src/checkbox-group/checkbox-group.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,11 +22,17 @@ export default class CheckBoxGroup extends SuperComponent {
checkboxOptions: [],
};

properties = Props;
properties = {
...Props,
defaultValue: {
type: null,
value: undefined,
},
};

observers = {
value: function () {
this.updateChildren('slot');
this.updateChildren();
},
};

Expand All @@ -36,31 +42,45 @@ export default class CheckBoxGroup extends SuperComponent {
},
};

controlledProps = [
{
key: 'value',
event: 'change',
},
];

methods = {
// slot插入选项
updateChildren(type = 'slot') {
let items = [];
if (type === 'not-slot') {
getChilds() {
let items = this.getRelationNodes('../checkbox/checkbox');
if (!items.length) {
items = this.selectAllComponents('.t-checkbox-option');
} else {
items = this.getRelationNodes('../checkbox/checkbox');
}
return items || [];
},

// slot插入选项
updateChildren() {
const items = this.getChilds();

const { value, disabled } = this.data;
if (items.length > 0) {
items.forEach((item: any) => {
!item.data.checkAll && item.changeActive(value.indexOf(item.data.value) > -1);
!item.data.checkAll &&
item.setData({
checked: value?.indexOf(item.data.value) > -1,
});
item.setDisabled(disabled);
});
// 关联可全选项
if (items.findIndex((item) => item.data.checkAll) > -1) {
items.forEach((item) => {
item.setOptionLinked(true);
});
this.handleHalfCheck(type, items.length);
this.handleHalfCheck(items.length);
}
}
},
updateValue({ name, checked }, type = 'slot') {
updateValue({ name, checked }) {
const { value, max } = this.data;
let newValue = value;
if (max && checked && newValue.length === max) {
Expand All @@ -72,11 +92,11 @@ export default class CheckBoxGroup extends SuperComponent {
const index = newValue.findIndex((v: string) => v === name);
newValue.splice(index, 1);
}
this.setData({
value: newValue,
});
this.updateChildren(type);
this.triggerEvent('change', newValue);
// this.setData({
// value: newValue,
// });
// this.updateChildren();
this._trigger('change', { value: newValue });
},
// 支持自定义options
handleCreateMulCheckbox() {
Expand All @@ -103,57 +123,62 @@ export default class CheckBoxGroup extends SuperComponent {
this.setData({
checkboxOptions: optionsValue,
});
this.updateChildren('not-slot');
this.updateChildren();
} catch (error) {
console.error('error', error);
}
},
// 处理全选
handleCheckAll(e) {
const { checked, option, name, type } = e.detail || e;
let items = [];
if (type === 'not-slot') {
items = this.selectAllComponents('.t-checkbox-option');
} else {
items = this.getRelationNodes('../checkbox/checkbox');
}
const { checked, option, name } = e.detail || e;
const items = this.getChilds();

if (!option) {
if (!items?.length) {
return;
}
this.setData({
// this.setData({
// value: items
// .map((item) => {
// if (item.data.disabled) {
// return this.data.value.includes(item.data.value) ? item.data.value : '';
// }
// item.changeActive(checked);
// return checked && !item.data.checkAll ? item.data.value : '';
// })
// .filter((val) => val),
// });
this._trigger('change', {
value: items
.map((item) => {
if (item.data.disabled) {
return '';
return this.data.value.includes(item.data.value) ? item.data.value : '';
}
item.changeActive(checked);
// item.changeActive(checked);
return checked && !item.data.checkAll ? item.data.value : '';
})
.filter((val) => val),
});
this.triggerEvent('change', this.data.value);
this.handleHalfCheck(type, items.length);
// this.handleHalfCheck(items.length);
} else {
this.updateValue({ name, checked }, type);
this.updateValue({ name, checked });
}
},
// 处理options半选
handleHalfCheck(type: string, len: number) {
let items = [];
if (type === 'not-slot') {
items = this.selectAllComponents('.t-checkbox-option');
} else {
items = this.getRelationNodes('../checkbox/checkbox');
}
handleHalfCheck(len: number) {
const items = this.getChilds();
const all = items.filter((i) => !i.data.checkAll).map((item) => item.data.value);
const currentVal = Array.from(new Set(this.data.value.filter((i) => all.indexOf(i) > -1)));
const excludeDisableArr = items
.filter((i) => !i.data.checkAll && i.data.value && !i.data.disabled)
.map((item) => item.data.value);
const currentVal = Array.from(new Set(this.data.value?.filter((i) => all.indexOf(i) > -1)));
const element = items.find((item) => item.data.checkAll);
if (currentVal.length) {
element?.changeActive(true);
element?.setData({ checked: true });
element?.changeCheckAllHalfStatus(currentVal.length !== len - 1);
element?.setCancel(currentVal.length >= excludeDisableArr.length);
} else {
element?.changeActive(false);
element?.setData({ checked: false });
}
},
// 设置可全选option选项
Expand Down
Loading

0 comments on commit c257e7d

Please sign in to comment.