feat: Rate Custom 迁移到微信 (#992)

* feat: 新增 range custom * fix: 重命名标签 * fix: 修复 axml * chore: 更新 css * feat: 更新 demo --------- Co-authored-by: DiamondYuan <fandi.yfd@antgroup.com>
ant-design · Dec 19, 2023 · 37a9f08 · 37a9f08
1 parent e3089b1
commit 37a9f08
Show file tree

Hide file tree

Showing 27 changed files with 314 additions and 176 deletions.
diff --git a/compiled/alipay/demo/pages/Rate/index.axml b/compiled/alipay/demo/pages/Rate/index.axml
@@ -36,14 +36,23 @@
 </ant-container>
 
 <ant-container title="受控模式">
-  <ant-rate
-    value="{{ value }}"
-    onChange="handleChange" />
-  <view style="margin-top: 8px">
-    <ant-stepper
-      value="{{ value }}"
-      min="{{ 0 }}"
-      max="{{ 5 }}"
-      onChange="handleChange" />
+  <view style="display: flex; justify-content: space-around">
+    <view>
+      <ant-rate
+        value="{{ value }}"
+        onChange="handleChange" />
+
+      <view style="margin-top: 8px">
+        <ant-stepper
+          value="{{ value }}"
+          min="{{ 0 }}"
+          max="{{ 5 }}"
+          onChange="handleChange" />
+      </view>
+    </view>
+    <view>
+      <ant-rate value="{{ value }}" />
+      <view class="description">无 onChange 函数</view>
+    </view>
   </view>
 </ant-container>
diff --git a/compiled/alipay/demo/pages/RateCustom/index.axml b/compiled/alipay/demo/pages/RateCustom/index.axml
@@ -1,84 +1,84 @@
-<container title="自定义间距">
-  <rate
-    defaultValue="{{3}}"
-    gutter="{{8}}" />
+<ant-container title="自定义间距">
+  <ant-rate
+    defaultValue="{{ 3 }}"
+    gutter="{{ 8 }}" />
   <view class="description">8px</view>
 
-  <rate
-    defaultValue="{{4}}"
-    gutter="{{16}}" />
+  <ant-rate
+    defaultValue="{{ 4 }}"
+    gutter="{{ 16 }}" />
   <view class="description">16px</view>
-</container>
+</ant-container>
 
-<container title="自定义大小">
-  <rate
-    defaultValue="{{3}}"
+<ant-container title="自定义大小">
+  <ant-rate
+    defaultValue="{{ 3 }}"
     className="rate" />
   <view class="description">30px</view>
 
-  <rate
-    defaultValue="{{3}}"
+  <ant-rate
+    defaultValue="{{ 3 }}"
     style="font-size: 40px" />
   <view class="description">40px</view>
-</container>
+</ant-container>
 
-<container title="自定义颜色">
-  <rate
-    defaultValue="{{3}}"
+<ant-container title="自定义颜色">
+  <ant-rate
+    defaultValue="{{ 3 }}"
     characterClassName="star"
     characterActiveClassName="star-active" />
   <view class="description">基础</view>
 
-  <rate
-    defaultValue="{{3}}"
+  <ant-rate
+    defaultValue="{{ 3 }}"
     characterClassName="star-gradient"
     characterActiveClassName="star-active-gradient" />
   <view class="description">渐变</view>
-</container>
+</ant-container>
 
-<container title="自定义图标">
-  <rate defaultValue="{{3}}">
-    <icon
+<ant-container title="自定义图标">
+  <ant-rate defaultValue="{{ 3 }}">
+    <ant-icon
       slot="character"
       type="HeartFill" />
-  </rate>
+  </ant-rate>
   <view class="description">自定义为HeartFill</view>
 
-  <rate
-    defaultValue="{{3.5}}"
+  <ant-rate
+    defaultValue="{{ 3.5 }}"
     allowHalf>
-    <icon
+    <ant-icon
       slot="character"
       type="StarOutline" />
-  </rate>
+  </ant-rate>
   <view class="description">自定义为StarOutline</view>
 
-  <rate
-    defaultValue="{{3.5}}"
+  <ant-rate
+    defaultValue="{{ 3.5 }}"
     allowHalf
     characterClassName="character">
     <view slot="character">正</view>
-  </rate>
+  </ant-rate>
   <view class="description">自定义为正</view>
 
-  <rate
-    defaultValue="{{2.5}}"
+  <ant-rate
+    defaultValue="{{ 2.5 }}"
     allowHalf
     characterClassName="character">
     <view slot="character">A</view>
-  </rate>
+  </ant-rate>
   <view class="description">自定义为A</view>
 
-  <rate
-    defaultValue="{{2.5}}"
+  <ant-rate
+    defaultValue="{{ 2.5 }}"
     allowHalf
-    gutter="{{20}}"
+    gutter="{{ 20 }}"
     characterClassName="character">
     <view
       slot="character"
       slot-scope="rate">
-      {{rate.index}}
+      {{ rate.index }}
     </view>
-  </rate>
+  </ant-rate>
   <view class="description">自定义为索引</view>
-</container>
+</ant-container>
diff --git a/compiled/alipay/demo/pages/RateCustom/index.js b/compiled/alipay/demo/pages/RateCustom/index.js
@@ -1,5 +1,5 @@
 Page({
-  onChange (value) {
-    console.log(value);
-  },
+    onChange: function (value) {
+        console.log(value);
+    },
 });
diff --git a/compiled/alipay/demo/pages/RateCustom/index.json b/compiled/alipay/demo/pages/RateCustom/index.json
@@ -1,9 +1,9 @@
 {
   "defaultTitle": "Rate",
   "usingComponents": {
-    "rate": "../../../src/Rate/index",
-    "icon": "../../../src/Icon/index",
-    "container": "../../../src/Container/index"
+    "ant-rate": "../../../src/Rate/index",
+    "ant-icon": "../../../src/Icon/index",
+    "ant-container": "../../../src/Container/index"
   },
   "allowsBounceVertical": "NO"
 }
diff --git a/compiled/alipay/demo/pages/RateCustom/index.less b/compiled/alipay/demo/pages/RateCustom/index.less
@@ -1,11 +1,12 @@
-@import "../../../src/style/themes/color.less";
+@import '../../../src/style/themes/color.less';
 
 .star {
   color: rgb(118, 118, 118);
 }
 
 .star-active {
   color: red;
+
 }
 
 .description {
@@ -14,17 +15,25 @@
 }
 
 .star-gradient {
-  background-image: linear-gradient(to right, rgb(151, 151, 151), rgb(255, 255, 255),);
+  background-image: linear-gradient(
+    to right,
+    rgb(151, 151, 151),
+    rgb(255, 255, 255)
+  );
   -webkit-background-clip: text;
+
+
   color: transparent;
 }
 
 .star-active-gradient {
   background-image: linear-gradient(to right, orange, yellow);
   -webkit-background-clip: text;
+
+
   color: transparent;
 }
 
 .character {
   font-size: 40px;
-}
+}
diff --git a/compiled/alipay/src/Rate/index.axml b/compiled/alipay/src/Rate/index.axml
@@ -22,15 +22,15 @@
             name="character"
             index="{{ index }}"
             isActive="{{ true }}">
-            <icon type="StarFill" />
+            <ant-icon type="StarFill" />
           </slot>
         </view>
         <view
           class="ant-rate-star-icon {{ mixin.value >= index + 1 ? 'ant-rate-star-icon-active' + ' ' + (characterClassName || '') + ' ' + (characterActiveClassName || '') : characterClassName }}">
           <slot
             name="character"
             index="{{ index }}">
-            <icon type="StarFill" />
+            <ant-icon type="StarFill" />
           </slot>
         </view>
       </view>

diff --git a/compiled/alipay/src/Rate/index.json b/compiled/alipay/src/Rate/index.json
@@ -1,6 +1,6 @@
 {
-	"component": true,
-	"usingComponents": {
-    "icon": "../Icon/index"
+  "component": true,
+  "usingComponents": {
+    "ant-icon": "../Icon/index"
   }
 }
diff --git a/compiled/alipay/src/Rate/index.less b/compiled/alipay/src/Rate/index.less
@@ -35,4 +35,5 @@
       overflow: hidden;
     }
   }
+
 }
diff --git a/compiled/wechat/app.json b/compiled/wechat/app.json
@@ -1,5 +1,6 @@
 {
   "pages": [
+    "demo/pages/RateCustom/index",
     "demo/pages/RadioGroup/index",
     "demo/pages/Radio/index",
     "demo/pages/Rate/index",

diff --git a/compiled/wechat/demo/pages/Rate/index.wxml b/compiled/wechat/demo/pages/Rate/index.wxml
@@ -36,14 +36,23 @@
 </ant-container>
 
 <ant-container title="受控模式">
-  <ant-rate
-    value="{{ value }}"
-    bind:change="handleChange" />
-  <view style="margin-top: 8px">
-    <ant-stepper
-      value="{{ value }}"
-      min="{{ 0 }}"
-      max="{{ 5 }}"
-      bind:change="handleChange" />
+  <view style="display: flex; justify-content: space-around">
+    <view>
+      <ant-rate
+        value="{{ value }}"
+        bind:change="handleChange" />
+
+      <view style="margin-top: 8px">
+        <ant-stepper
+          value="{{ value }}"
+          min="{{ 0 }}"
+          max="{{ 5 }}"
+          bind:change="handleChange" />
+      </view>
+    </view>
+    <view>
+      <ant-rate value="{{ value }}" />
+      <view class="description">无 onChange 函数</view>
+    </view>
   </view>
 </ant-container>
diff --git a/compiled/wechat/demo/pages/RateCustom/index.js b/compiled/wechat/demo/pages/RateCustom/index.js
@@ -0,0 +1,5 @@
+Page({
+    onChange: function (value) {
+        console.log(value);
+    },
+});
diff --git a/compiled/wechat/demo/pages/RateCustom/index.json b/compiled/wechat/demo/pages/RateCustom/index.json
@@ -0,0 +1,9 @@
+{
+  "defaultTitle": "Rate",
+  "usingComponents": {
+    "ant-rate": "../../../src/Rate/index",
+    "ant-icon": "../../../src/Icon/index",
+    "ant-container": "../../../src/Container/index"
+  },
+  "allowsBounceVertical": "NO"
+}
diff --git a/compiled/wechat/demo/pages/RateCustom/index.wxml b/compiled/wechat/demo/pages/RateCustom/index.wxml
@@ -0,0 +1,37 @@
+<ant-container title="自定义间距">
+  <ant-rate
+    defaultValue="{{ 3 }}"
+    gutter="{{ 8 }}" />
+  <view class="description">8px</view>
+
+  <ant-rate
+    defaultValue="{{ 4 }}"
+    gutter="{{ 16 }}" />
+  <view class="description">16px</view>
+</ant-container>
+
+<ant-container title="自定义大小">
+  <ant-rate
+    defaultValue="{{ 3 }}"
+    className="rate" />
+  <view class="description">30px</view>
+
+  <ant-rate
+    defaultValue="{{ 3 }}"
+    style="font-size: 40px" />
+  <view class="description">40px</view>
+</ant-container>
+
+<ant-container title="自定义颜色">
+  <ant-rate
+    defaultValue="{{ 3 }}"
+    characterClassName="star"
+    characterActiveClassName="star-active" />
+  <view class="description">基础</view>
+
+  <ant-rate
+    defaultValue="{{ 3 }}"
+    characterClassName="star-gradient"
+    characterActiveClassName="star-active-gradient" />
+  <view class="description">渐变</view>
+</ant-container>
diff --git a/compiled/wechat/demo/pages/RateCustom/index.wxss b/compiled/wechat/demo/pages/RateCustom/index.wxss
@@ -0,0 +1,23 @@
+.star {
+  color: #767676;
+}
+.star-active {
+  color: red !important;
+}
+.description {
+  margin: 4px 0 16px 0;
+  color: #333333;
+}
+.star-gradient {
+  background-image: linear-gradient(to right, #979797, #ffffff);
+  -webkit-background-clip: text;
+  color: transparent !important;
+}
+.star-active-gradient {
+  background-image: linear-gradient(to right, orange, yellow);
+  -webkit-background-clip: text;
+  color: transparent !important;
+}
+.character {
+  font-size: 40px;
+}
diff --git a/compiled/wechat/src/Rate/index.json b/compiled/wechat/src/Rate/index.json
@@ -1,6 +1,6 @@
 {
-	"component": true,
-	"usingComponents": {
-    "icon": "../Icon/index"
+  "component": true,
+  "usingComponents": {
+    "ant-icon": "../Icon/index"
   }
 }
diff --git a/compiled/wechat/src/Rate/index.wxml b/compiled/wechat/src/Rate/index.wxml
@@ -18,11 +18,11 @@
         <view
           wx:if="{{ allowHalf && mixin.value === index + 0.5 }}"
           class="ant-rate-star-icon-active {{ characterClassName || '' }} {{ characterActiveClassName || '' }} ant-rate-star-icon-half-active">
-          <icon type="StarFill" />
+          <ant-icon type="StarFill" />
         </view>
         <view
           class="ant-rate-star-icon {{ mixin.value >= index + 1 ? 'ant-rate-star-icon-active' + ' ' + (characterClassName || '') + ' ' + (characterActiveClassName || '') : characterClassName }}">
-          <icon type="StarFill" />
+          <ant-icon type="StarFill" />
         </view>
       </view>
     </block>