feat: radio 适配微信 (#989)

* feat: radio 适配微信

* feat: radio 适配微信

* feat: radio 适配微信

---------

Co-authored-by: DiamondYuan <fandi.yfd@antgroup.com>

compiled/alipay/demo/pages/Radio/index.js

@@ -9,5 +9,5 @@ Page({
         this.setData({
             checked: checked,
         });
-    }
+    },
 });

compiled/alipay/demo/pages/RadioGroup/index.axml

@@ -1,41 +1,41 @@
-<container title="基础用法">
-  <radio-group
+<ant-container title="基础用法">
+  <ant-radio-group
     options="{{ options }}"
     onChange="onChange" />
-</container>
+</ant-container>
 
-<container title="初始值">
-  <radio-group
+<ant-container title="初始值">
+  <ant-radio-group
     defaultValue="banana"
     options="{{ options }}"
     onChange="onChange" />
-</container>
+</ant-container>
 
-<container title="横向布局">
-  <radio-group
+<ant-container title="横向布局">
+  <ant-radio-group
     options="{{ options }}"
     position="horizontal" />
-</container>
+</ant-container>
 
-<container title="禁用模式-所有禁用">
-  <radio-group
+<ant-container title="禁用模式-所有禁用">
+  <ant-radio-group
     options="{{ options }}"
     disabled />
-</container>
+</ant-container>
 
-<container title="禁用模式-其中有的禁用">
-  <radio-group options="{{ optionsWithDisabled }}" />
-</container>
+<ant-container title="禁用模式-其中有的禁用">
+  <ant-radio-group options="{{ optionsWithDisabled }}" />
+</ant-container>
 
-<container title="控制模式">
-  <radio-group
-    value="{{value}}"
+<ant-container title="控制模式">
+  <ant-radio-group
+    value="{{ value }}"
     options="{{ options }}"
     onChange="handleChange" />
-</container>
+</ant-container>
 
-<container title="自定义">
-  <radio-group
+<ant-container title="自定义">
+  <ant-radio-group
     options="{{ options }}"
     color="red"
     defaultValue="banana">
@@ -44,5 +44,5 @@
       slot-scope="item">
       {{ item.index + 1 }} {{ item.value.label }}
     </view>
-  </radio-group>
-</container>
+  </ant-radio-group>
+</ant-container>

compiled/alipay/demo/pages/RadioGroup/index.js

@@ -16,11 +16,6 @@ Page({
     onChange: function (value, e) {
         console.log(value, e);
     },
-    onSubmit: function (e) {
-        my.alert({
-            content: e.detail.value,
-        });
-    },
     handleChange: function (value) {
         this.setData({
             value: value,

compiled/alipay/demo/pages/RadioGroup/index.json

@@ -1,7 +1,7 @@
 {
   "defaultTitle": "RadioGroup",
   "usingComponents": {
-    "radio-group": "../../../src/Radio/RadioGroup/index",
-    "container": "../../../src/Container/index"
+    "ant-radio-group": "../../../src/Radio/RadioGroup/index",
+    "ant-container": "../../../src/Container/index"
   }
 }

compiled/alipay/src/Radio/RadioGroup/index.ts

@@ -9,6 +9,8 @@ const RadioGroup = (props: IRadioGroupProps) => {
     value: props.value,
   });
   const { triggerEvent } = useComponentEvent(props);
+
+
   useEvent('onChange', (_, e) => {
     const index = e.currentTarget.dataset.index;
     const value = props.options[index].value;
@@ -17,6 +19,7 @@ const RadioGroup = (props: IRadioGroupProps) => {
     }
     triggerEvent('change', value, e);
   });
+
   return {
     mixin: {
       value,

compiled/alipay/src/Radio/index.axml

@@ -17,7 +17,7 @@
         <view
           class="ant-radio-item-fake-{{ componentUtils.getClassName(mixin.value, disabled) }}"
           style="{{ mixin.value && !disabled && color ? 'background:' + color : '' }}">
-          <icon
+          <ant-icon
             a:if="{{ mixin.value }}"
             type="CheckOutline"
             className="ant-radio-item-fake-{{ componentUtils.getClassName(mixin.value, disabled) }}-icon" />

compiled/alipay/src/Radio/index.json

@@ -1,7 +1,6 @@
 {
   "component": true,
   "usingComponents": {
-    "list-item": "../List/ListItem/index",
-    "icon": "../Icon/index"
+    "ant-icon": "../Icon/index"
   }
 }

compiled/alipay/src/Radio/index.less

@@ -6,6 +6,7 @@
   color: @COLOR_TEXT_PRIMARY;
   margin-right: 16 * @rpx;
 
+
   &-container {
     display: flex;
     align-items: center;

compiled/alipay/src/Radio/index.ts

@@ -15,13 +15,15 @@ const Radio = (props: IRadioProps) => {
 
   const { triggerEvent } = useComponentEvent(props);
 
+
   useEvent('onChange', (e) => {
     const value = e.detail.value;
     if (!isControlled) {
       update(value);
     }
     triggerEvent('change', value, e);
   });
+
   return {
     mixin: {
       value: radioValue,
@@ -30,7 +32,9 @@ const Radio = (props: IRadioProps) => {
 };
 
 mountComponent(Radio, {
+  value: null,
   defaultChecked: null,
+  color: '',
   checked: null,
   disabled: false,
 });

compiled/wechat/app.json

@@ -1,5 +1,7 @@
 {
   "pages": [
+    "demo/pages/RadioGroup/index",
+    "demo/pages/Radio/index",
     "demo/pages/ImageUploadControl/index",
     "demo/pages/ImageUpload/index",
     "demo/pages/DatePicker/index",

compiled/wechat/demo/pages/Radio/index.js

@@ -0,0 +1,13 @@
+Page({
+    data: {
+        checked: false,
+    },
+    onChange: function (value, e) {
+        console.log(value, e);
+    },
+    handleChange: function (checked) {
+        this.setData({
+            checked: checked.detail,
+        });
+    },
+});

compiled/wechat/demo/pages/Radio/index.json

@@ -0,0 +1,8 @@
+{
+  "defaultTitle": "Radio",
+  "usingComponents": {
+    "radio": "../../../src/Radio/index",
+    "container": "../../../src/Container/index",
+    "icon": "../../../src/Icon/index"
+  }
+}

compiled/wechat/demo/pages/Radio/index.wxml

@@ -0,0 +1,32 @@
+<container title="基础用法">
+  <radio bind:change="onChange">Radio</radio>
+</container>
+
+<container title="初始值">
+  <radio defaultChecked="{{ true }}">Radio</radio>
+</container>
+
+<container title="禁用模式">
+  <radio disabled>Radio1</radio>
+  <radio
+    defaultChecked
+    disabled>
+    Radio2
+  </radio>
+</container>
+
+<container title="自定义颜色">
+  <radio
+    color="red"
+    defaultChecked>
+    Radio
+  </radio>
+</container>
+
+<container title="控制模式">
+  <radio
+    checked="{{ checked }}"
+    bind:change="handleChange">
+    Radio
+  </radio>
+</container>

compiled/wechat/demo/pages/RadioGroup/index.js

@@ -0,0 +1,24 @@
+Page({
+    data: {
+        value: 'banana',
+        options: [
+            { value: 'apple', label: '苹果' },
+            { value: 'orange', label: '橘子' },
+            { value: 'banana', label: '香蕉' },
+        ],
+        optionsWithDisabled: [
+            { value: 'apple', label: '苹果' },
+            { value: 'orange', label: '橘子' },
+            { value: 'watermelon', label: '西瓜', disabled: true },
+            { value: 'banana', label: '香蕉' },
+        ],
+    },
+    onChange: function (value, e) {
+        console.log(value, e);
+    },
+    handleChange: function (value) {
+        this.setData({
+            value: value.detail,
+        });
+    },
+});

compiled/wechat/demo/pages/RadioGroup/index.json

@@ -0,0 +1,7 @@
+{
+  "defaultTitle": "RadioGroup",
+  "usingComponents": {
+    "ant-radio-group": "../../../src/Radio/RadioGroup/index",
+    "ant-container": "../../../src/Container/index"
+  }
+}

compiled/wechat/demo/pages/RadioGroup/index.wxml

@@ -0,0 +1,35 @@
+<ant-container title="基础用法">
+  <ant-radio-group
+    options="{{ options }}"
+    bind:change="onChange" />
+</ant-container>
+
+<ant-container title="初始值">
+  <ant-radio-group
+    defaultValue="banana"
+    options="{{ options }}"
+    bind:change="onChange" />
+</ant-container>
+
+<ant-container title="横向布局">
+  <ant-radio-group
+    options="{{ options }}"
+    position="horizontal" />
+</ant-container>
+
+<ant-container title="禁用模式-所有禁用">
+  <ant-radio-group
+    options="{{ options }}"
+    disabled />
+</ant-container>
+
+<ant-container title="禁用模式-其中有的禁用">
+  <ant-radio-group options="{{ optionsWithDisabled }}" />
+</ant-container>
+
+<ant-container title="控制模式">
+  <ant-radio-group
+    value="{{ value }}"
+    options="{{ options }}"
+    bind:change="handleChange" />
+</ant-container>

compiled/wechat/demo/pages/RadioGroup/index.wxss

@@ -0,0 +1,18 @@
+.icon {
+  border: 1px solid #CCCCCC;
+  border-radius: 50vh;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.checked {
+  background-color: red;
+  color: #fff;
+  font-size: 14px;
+}
+.disabled {
+  opacity: 0.4;
+}

compiled/wechat/src/Radio/RadioGroup/index.js

@@ -0,0 +1,32 @@
+import { mountComponent } from '../../_util/component';
+import { useMixState } from '../../_util/hooks/useMixState';
+import { useEvent } from 'functional-mini/component';
+import { useComponentEvent } from '../../_util/hooks/useComponentEvent';
+var RadioGroup = function (props) {
+    var _a = useMixState(props.defaultValue, {
+        value: props.value,
+    }), value = _a[0], _b = _a[1], isControlled = _b.isControlled, update = _b.update;
+    var triggerEvent = useComponentEvent(props).triggerEvent;
+    useEvent('onChange', function (e) {
+        var index = e.currentTarget.dataset.index;
+        var value = props.options[index].value;
+        if (!isControlled) {
+            update(value);
+        }
+        triggerEvent('change', value, e);
+    });
+    return {
+        mixin: {
+            value: value,
+        },
+    };
+};
+mountComponent(RadioGroup, {
+    value: null,
+    defaultValue: null,
+    name: '',
+    disabled: false,
+    color: '',
+    position: 'vertical',
+    options: [],
+});

compiled/wechat/src/Radio/RadioGroup/index.json

@@ -0,0 +1,8 @@
+{
+  "component": true,
+  "usingComponents": {
+    "list": "../../List/index",
+    "list-item": "../../List/ListItem/index",
+    "radio": "../index"
+  }
+}