Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(radio): turn into controlled component #143

Merged
merged 3 commits into from
Jan 24, 2022
Merged

fix(radio): turn into controlled component #143

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
8ded39d
fix(radio): turn into controlled component
LeeJim Jan 22, 2022
ff8ce97
refactor(radio): finish property under controlled
LeeJim Jan 23, 2022
d953e6c
docs(radio): update document
LeeJim Jan 24, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 9 additions & 9 deletions example/pages/radio/radio.wxml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<view class="demo-title">radio 单选框</view>
<view class="demo-desc">用于在预设的一组选项中执行单项选择，并呈现选择结果。</view>
<t-demo title="01 类型" desc="左侧圆形单选框">
<t-radio-group bind:change="onChange" value="radio1">
<t-radio-group bind:change="onChange" defaultValue="radio1">
<t-radio value="radio1" label="单选" />
<t-radio value="radio2" label="单选" />
<t-radio
Expand All @@ -16,7 +16,7 @@
</t-demo>

<t-demo title="" desc="右侧圆形单选框">
<t-radio-group bind:change="onChange" value="radio1">
<t-radio-group bind:change="onChange" defaultValue="radio1">
<t-radio value="radio1" label="单选" align="right" />
<t-radio value="radio2" label="单选" align="right" />
<t-radio value="radio3" align="right" label="多选"></t-radio>
Expand All @@ -31,7 +31,7 @@
</t-demo>

<t-demo title="" desc="左侧勾形单选框">
<t-radio-group value="radio4" bind:change="onChange">
<t-radio-group defaultValue="radio4" bind:change="onChange">
<t-radio value="radio1" label="单选" icon="stroke-line"> </t-radio>
<t-radio value="radio2" icon="stroke-line" label="单选"> </t-radio>
<t-radio
Expand All @@ -47,7 +47,7 @@
</t-demo>

<t-demo title="" desc="右侧勾形单选框">
<t-radio-group value="radio4" bind:change="onChange">
<t-radio-group defaultValue="radio4" bind:change="onChange">
<t-radio value="radio1" label="单选" icon="stroke-line" align="right"> </t-radio>
<t-radio value="radio2" label="单选" icon="stroke-line" align="right"> </t-radio>
<t-radio value="radio3" icon="stroke-line" align="right" label="单选"> </t-radio>
Expand All @@ -63,7 +63,7 @@
</t-demo>

<t-demo title="02 状态" desc="单选框禁状态">
<t-radio-group value="radio2" disabled="{{true}}">
<t-radio-group defaultValue="radio2" disabled="{{true}}">
<t-radio value="radio1" label="单选" />
<t-radio value="radio2" label="单选" />
</t-radio-group>
Expand All @@ -82,7 +82,7 @@
</t-demo>

<t-demo title="03 特殊类型" desc="自定义图标单选框">
<t-radio-group value="radio1">
<t-radio-group defaultValue="radio1">
<t-radio value="radio1" label="单选" icon="{{[activeImage,inActiveImage]}}" />
<t-radio value="radio2" label="单选" icon="{{[activeImage,inActiveImage]}}" />
</t-radio-group>
Expand All @@ -93,7 +93,7 @@
<t-radio value="radio2" label="单选H56" t-class="t-radio-demo" checked />
</t-demo>
<view style="height: 74rpx"></view>
<!-- <t-demo>
<t-radio-group options="{{options}}" value="数字" bindchange="onChange"></t-radio-group>
</t-demo> -->
<t-demo>
<t-radio-group options="{{options}}" defaultValue="数字" bind:change="onChange"></t-radio-group>
</t-demo>
</view>
76 changes: 32 additions & 44 deletions src/radio-group/radio-group.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,72 +18,62 @@ export default class RadioGroup extends SuperComponent {
relations = {
'../radio/radio': {
type: 'descendant' as 'descendant',
linked() {
this.updateChildren();
linked(target) {
const { value, disabled } = this.data;
target.setData({
checked: value === target.data.value,
});
target.setDisabled(disabled);
},
},
};

properties = Props;

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

lifetimes = {
attached() {
this.handleCreateMulRadio();
this.initWithOptions();
},
};

observers = {
value: function () {
this.updateChildren();
value() {
this.getChilds().forEach((item) => {
item.setData({
checked: this.data.value === item.data.value,
});
});
},
};

methods = {
updateChildren() {
getChilds() {
let items = this.getRelationNodes('../radio/radio');
if (!items.length) {
items = this.selectAllComponents(`.${prefix}-radio-option`);
}
const { value, disabled } = this.data;
if (items.length > 0) {
items.forEach((item) => {
item.changeActive(value === item.data.value);
item.setDisabled(disabled);
});
}
},
updateValue(item) {
this.setData({
value: item.name,
});
this.updateChildren();
this.triggerEvent('change', item.name);
return items;
},
// 处理 group选项
handleGroupSelect(e) {
const { name } = e.detail;
this.setData({
value: name,
});
this.triggerEvent('change', name);
const items = this.selectAllComponents(`.${prefix}-radio-option`);
if (items.length > 0) {
items.forEach((item) => {
item.changeActive(name === item.data.value);
});
}

updateValue(value) {
this._trigger('change', { value });
},
// 设置option选项
handleOptionLinked() {
const items = this.selectAllComponents(`.${prefix}-radio-option`);
if (this.data.radioOptions.length) {
items.forEach((item) => {
item.setOptionLinked(true);
});
}

handleRadioChange(e) {
const { value } = e.target.dataset;

this.updateValue(value);
},

// 支持自定义options
handleCreateMulRadio() {
initWithOptions() {
const { options } = this.data;
// 数字数组｜字符串数组｜对像数组
if (!options?.length || !Array.isArray(options)) {
Expand All @@ -107,8 +97,6 @@ export default class RadioGroup extends SuperComponent {
this.setData({
radioOptions: optionsValue,
});
this.handleOptionLinked();
this.updateChildren();
} catch (error) {
console.error('error', error);
}
Expand Down
3 changes: 2 additions & 1 deletion src/radio-group/radio-group.wxml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,9 @@
class="{{prefix}}-radio-option"
label="{{item.label}}"
value="{{item.value}}"
data-value="{{item.value}}"
disabled="{{item.disabled}}"
bind:toggleGroupSelect="handleGroupSelect"
bind:change="handleRadioChange"
/>
</block>
</view>
102 changes: 73 additions & 29 deletions src/radio/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ isComponent: true
<img src="https://tdesign.gtimg.com/miniprogram/readme/radio.png" width="375px" height="50%">

```html
<t-radio-group bind:change="onChange" value="radio1">
<t-radio-group bind:change="onChange" defaultValue="radio1">
<t-radio value="radio1" label="单选" />
<t-radio value="radio2" label="单选" />
<t-radio
Expand All @@ -36,43 +36,87 @@ isComponent: true
</t-radio-group>
```

## API
### 受控用法

```html
<t-radio-group bind:change="onChange" value="{{value}}">
<t-radio value="radio1" label="单选" />
<t-radio value="radio2" label="单选" />
</t-radio-group>
```

```js
Page({
data: {
value: 'radio1'
},
onChange(e) {
const { value } = e.detail;

this.setData({
value
})
}
})
```

### 使用 options

```html
<t-radio-group options="{{options}}" defaultValue="数字" bind:change="onChange"></t-radio-group>
```

```js
Page({
data: {
options: [
'string', // => { label: 'string', value: 'string', disabled: false }
'number', // => { label: 'number', value: 'number', disabled: false }
{ label: '对象', value: 'object', disabled: true },
],
},
onChange(e) {
console.log(e.detail.value)
}
})
```

## API
### Radio Props

| 名称 | 类型 | 默认值 | 说明 | 必传 |
| ---------------- | ------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- |
| align | String | left | 复选框和内容相对位置。可选项：left/right | N |
| checked | Boolean | - | 是否选中 | N |
| color | String | #0052d9 | 单选按钮颜色 | N |
| content | String / Slot | - | 单选内容 | N |
| content-disabled | Boolean | - | 是否禁用组件内容（content）触发选中 | N |
| disabled | Boolean | undefined | 是否为禁用态 | N |
| external-classes | Array | - | 组件类名，分别用于设置 组件外层、单选图标、主文案、内容 等元素类名。`['t-class', 't-class-icon', 't-class-label', 't-class-content']` | N |
| icon | String / Array | 'fill-circle' | 自定义选中图标和非选中图标。示例：[选中态图标，非选中态图标]。值为 fill-circle 表示图标为填充型图标，值为 stroke-line 表示图标为描边型图标。TS 类型：`'fill-circle' | 'stroke-line' | Array<string>` | N |
| label | String / Slot | - | 主文案 | N |
| max-content-row | Number | 5 | 内容最大行数限制 | N |
| max-label-row | Number | 3 | 主文案最大行数限制 | N |
| name | String | - | HTM 元素原生属性 | N |
| value | String / Number / Boolean | undefined | 单选按钮的值。TS 类型：`RadioValue`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/radio/type.ts) | N |
名称 | 类型 | 默认值 | 说明 | 必传
-- | -- | -- | -- | --
align | String | left | 复选框和内容相对位置。可选项：left/right | N
checked | Boolean | - | 是否选中 | N
color | String | #0052d9 | 单选按钮颜色 | N
content | String / Slot | - | 单选内容 | N
content-disabled | Boolean | - | 是否禁用组件内容（content）触发选中 | N
disabled | Boolean | undefined | 是否为禁用态 | N
external-classes | Array | - | 组件类名，分别用于设置 组件外层、单选图标、主文案、内容 等元素类名。`['t-class', 't-class-icon', 't-class-label', 't-class-content']` | N
icon | String / Array | 'fill-circle' | 自定义选中图标和非选中图标。示例：[选中态图标，非选中态图标]。值为 fill-circle 表示图标为填充型图标，值为 stroke-line 表示图标为描边型图标。TS 类型：`'fill-circle' | 'stroke-line' | Array<string>` | N
label | String / Slot | - | 主文案 | N
max-content-row | Number | 5 | 内容最大行数限制 | N
max-label-row | Number | 3 | 主文案最大行数限制 | N
name | String | - | HTML 元素原生属性 | N
value | String / Number / Boolean | undefined | 单选按钮的值。TS 类型：`RadioValue`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/radio/type.ts) | N

### Radio Events

| 名称 | 参数 | 描述 |
| ------ | -------------------- | ------------ |
| change | `(checked: boolean)` | 值变化时触发 |
名称 | 参数 | 描述
-- | -- | --
change | `(checked: boolean)` | 值变化时触发

### RadioGroup Props

| 名称 | 类型 | 默认值 | 说明 | 必传 |
| -------- | ------------------------- | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---- |
| disabled | Boolean | undefined | 是否禁用全部子单选框 | N |
| name | String | - | HTML 元素原生属性 | N |
| options | Array | - | 单选组件按钮形式。RadioOption 数据类型为 string 或 number 时，表示 label 和 value 值相同。TS 类型：`Array<RadioOption>`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/radio/type.ts) | N |
| value | String / Number / Boolean | undefined | 选中的值。TS 类型：`RadioValue` | N |
名称 | 类型 | 默认值 | 说明 | 必传
-- | -- | -- | -- | --
disabled | Boolean | undefined | 是否禁用全部子单选框 | N
name | String | - | HTML 元素原生属性 | N
options | Array | - | 单选组件按钮形式。RadioOption 数据类型为 string 或 number 时，表示 label 和 value 值相同。TS 类型：`Array<RadioOption>`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/radio/type.ts) | N
value | String / Number / Boolean | undefined | 选中的值。TS 类型：`RadioValue` | N

### RadioGroup Events

| 名称 | 参数 | 描述 |
| ------ | --------------------- | -------------------- |
| change | `(value: RadioValue)` | 选中值发生变化时触发 |
名称 | 参数 | 描述
-- | -- | --
change | `(value: RadioValue)` | 选中值发生变化时触发
8 changes: 6 additions & 2 deletions src/radio/props.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@

/**
* 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
* updated at 2021-11-24 10:58:05
* */

import { TdRadioProps } from './type';
Expand All @@ -16,6 +15,11 @@ const props: TdRadioProps = {
checked: {
type: Boolean,
},
/** 是否选中，非受控属性 */
defaultChecked: {
type: null,
value: undefined,
},
/** 单选按钮颜色 */
color: {
type: String,
Expand Down Expand Up @@ -66,7 +70,7 @@ const props: TdRadioProps = {
/** 单选按钮的值 */
value: {
type: String,
optionalTypes: [Number,Boolean],
optionalTypes: [Number, Boolean],
value: undefined,
},
};
Expand Down
8 changes: 6 additions & 2 deletions src/radio/radio-group-props.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@

/**
* 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
* updated at 2021-11-24 10:58:05
* */

import { TdRadioGroupProps } from './type';
Expand All @@ -24,7 +23,12 @@ const props: TdRadioGroupProps = {
/** 选中的值 */
value: {
type: String,
optionalTypes: [Number,Boolean],
optionalTypes: [Number, Boolean],
value: undefined,
},
/** 选中的值，非受控属性 */
defaultValue: {
type: null,
value: undefined,
},
};
Expand Down
Loading