Feat a part of component support wechat

config/wechat/package.json

@@ -7,7 +7,6 @@
     "fast-deep-equal": "3.1.3",
     "lodash.filter": "^4.6.0",
     "lodash.get": "^4.4.2",
-    "lodash.isequal": "^4.5.0",
     "lodash.isfunction": "^3.0.9",
     "lodash.kebabcase": "^4.1.1",
     "lodash.reduce": "^4.6.0",

demo/pages/IndexBarControl/index.axml → demo/pages/IndexBar/index.axml

@@ -6,6 +6,7 @@
     items="{{items}}"
     current="{{current}}"
     onChange="onChange">
+    <!-- #if ALIPAY -->
     <view slot-scope="props">
       <list header="{{props.value.label}}">
         <list-item
@@ -15,5 +16,6 @@
         </list-item>
       </list>
     </view>
+    <!-- #endif -->
   </ant-index-bar>
 </view>

demo/pages/IndexBarControl/index.acss → demo/pages/IndexBar/index.less

@@ -1,6 +1,6 @@
 .base {
   width: 100%;
-  height: 100vh;
+  height: 80vh;
 }
 .indexbar {
   position: fixed;

demo/pages/IndexBarControl/index.js → demo/pages/IndexBar/index.ts

@@ -1,3 +1,4 @@
+/// #if ALIPAY
 const nameMap = {
   'A': ['Alice', 'Andy', 'Amanda'],
   'B': ['Bob', 'Brian', 'Bella'],
@@ -26,27 +27,38 @@ const nameMap = {
   'Y': ['Yara', 'Yuri', 'Yvonne'],
   'Z': ['Zoe', 'Zach', 'Zane'],
 };
-
+/// #endif
 Page({
   data: {
+    /// #if ALIPAY
     nameMap,
+    /// #endif
     items: [],
     current: '',
   },
   onLoad() {
     // 异步获取数据
     setTimeout(() => {
       this.setData({
+        /// #if ALIPAY
         nameMap,
+        /// #endif
         items: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('').map((u) => {
           return { label: u, disablePreview: true };
         }),
         current: 'S',
       });
     }, 1000);
   },
-  onChange(item, index) {
+  onChange(...args) {
+    /// #if ALIPAY
+    const [item, index] = args;
     console.log(item, index);
     this.setData({ current: item.label });
+    /// #endif
+    /// #if WECHAT
+    console.log(...args[0].detail);
+    this.setData({ current: args[0].detail[0].label });
+    /// #endif
   },
 });

demo/pages/NumberInput/index.ts

@@ -4,41 +4,69 @@ Page({
     value2: '',
     value3: '',
     maxValue: 5800,
-    quickAmounts: ['500', '1000', '2000']
+    quickAmounts: ['500', '1000', '2000'],
   },
 
-  handleChange1(value) {
+  handleChange1(val) {
+    let value = val;
+    /// #if WECHAT
+    value = val.detail;
+    /// #endif
+    console.log(value);
     this.setData({
-      value1: value
+      value1: value,
     });
   },
-  handleChange2(value) {
+  handleChange2(val) {
+    let value = val;
+    /// #if WECHAT
+    value = val.detail;
+    /// #endif
+    console.log(value);
     this.setData({
-      value2: value
+      value2: value,
     });
   },
-  handleChange3(value) {
+  handleChange3(val) {
+    let value = val;
+    /// #if WECHAT
+    value = val.detail;
+    /// #endif
+    console.log(value);
     if (Number(value) > this.data.maxValue) {
       my.alert({
         title: '提示',
-        content: `提现金额不能大于${this.data.maxValue}`
+        content: `提现金额不能大于${this.data.maxValue}`,
       });
       return;
     }
     this.setData({
-      value3: value
+      value3: value,
     });
   },
   handleLinkTap() {
+    /// #if ALIPAY
     my.alert({
+      content: '交易明细',
+    });
+    /// #endif
+    /// #if WECHAT
+    // @ts-ignore
+    wx.showToast({
       title: '交易明细',
-      content: '交易明细'
     });
+    /// #endif
   },
   handleAllWithdraw() {
     this.input.update(this.data.maxValue);
   },
   handleRef(input) {
+    /// #if WECHAT
+    this.input = input.detail;
+    /// #endif
+
+    /// #if ALIPAY
     this.input = input;
-  }
+    /// #endif
+  },
 });

demo/pages/Voucher/index.axml

@@ -16,13 +16,15 @@
   <voucher size="small" onTap="onTap" dataSource="{{dataSource3}}" />
 </ant-container>
 
+<!-- #if ALIPAY -->
 <ant-container title="基础用法-small-整体禁用-插槽">
   <voucher size="small" dataSource="{{dataSource4}}" >
     <view slot="voucher-action-area" class="slot-demo">
       已过期
     </view>
   </voucher>
 </ant-container>
+<!-- #endif -->
 
 <ant-container title="水平排列">
   <voucher
@@ -53,6 +55,7 @@
   />
 </ant-container>
 
+<!-- #if ALIPAY -->
 <ant-container title="多列（多列样式不区分small和large）">
   <voucher
     direction="multipleColumn"
@@ -65,3 +68,4 @@
     </view>
   </voucher>
 </ant-container>
+<!-- #endif -->

demo/utils/constants.ts

@@ -39,9 +39,9 @@ export const componentList = [
       { name: 'Card', nameZN: '基础卡片', path: '/pages/Card/index' },
       { name: 'Avatar', nameZN: '头像', path: '/pages/Avatar/index' },
       {
-        name: 'IndexBarControl',
-        nameZN: '索引-控制',
-        path: '/pages/IndexBarControl/index',
+        name: 'IndexBar',
+        nameZN: '索引',
+        path: '/pages/IndexBar/index',
       },
       { name: 'Collapse', nameZN: '折叠面板', path: '/pages/Collapse/index' },
       { name: 'Grid', nameZN: '宫格', path: '/pages/Grid/index' },

package.json

@@ -38,7 +38,6 @@
     "fast-deep-equal": "3.1.3",
     "lodash.filter": "^4.6.0",
     "lodash.get": "^4.4.2",
-    "lodash.isequal": "^4.5.0",
     "lodash.isfunction": "^3.0.9",
     "lodash.kebabcase": "^4.1.1",
     "lodash.reduce": "^4.6.0",
@@ -157,4 +156,4 @@
   ],
   "license": "MIT",
   "homepage": "https://github.com/ant-design/ant-design-mini"
-}
+}

scripts/axml/mapping.ts

@@ -3,6 +3,9 @@ export const wechatCustomMapping = {
     onTouchStart: 'bindtouchstart',
     onTouchMove: 'bindtouchmove',
     onTouchEnd: 'bindtouchend',
+    catchTouchStart: 'catchtouchstart',
+    catchTouchMove: 'catchtouchmove',
+    catchTouchEnd: 'catchtouchend',
     onAnimationEnd: 'bindanimationend',
   },
   'scroll-view': {
@@ -182,4 +185,8 @@ export const wechatCustomMapping = {
     onCountdownFinish: 'bindcountdownfinish',
     onReadChange: 'bindreadchange',
   },
+  'ant-number-input': {
+    onChange: 'bindchange',
+    onLinkTap: 'bindlinktap',
+  },
 };

src/ActionSheet/index.en.md

@@ -26,7 +26,7 @@ In `index.json` Introducing Components in
 }
 ```
 
-## Code Sample
+## Code example
 
 ### Basic use
 
@@ -106,7 +106,7 @@ Page({
 
 ### Option Status
 
-> [actions](#actionsheetitem) Each of the provided `icon` `danger` `description` `disabled` Used to set the option state.
+> [actions](#actionsheetitem) Each of the items provided `icon` `danger` `description` `disabled` Used to set the option state.
 
 ```xml
 <ant-action-sheet
@@ -189,7 +189,7 @@ Page({
 
 #### Style Variables
 
-Component provides the following CSS variables, which can be used to customize styles. For more information, see ConfigProvider Components.
+Component provides the following CSS variables, which can be used to customize styles. For details, see ConfigProvider Components.
 
 | Variable name                       | Default Value                                                                                            | Dark Mode Default                                                                                    | Remarks           |
 | ---------------------------- | ------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- | -------------- |

src/AutoResize/index.en.md

@@ -36,6 +36,6 @@ In `index.json` Introducing Components in
 | ----------- | ----------------------------------------------------------------------------------------------------------------------- | ------- | ------ |
 | text        | Text to be passed in, used to calculate the width                                                                                              | string  | -      |
 | minFontSize | The minimum font size limit can be set according to the business.                                                                                      | number  | 30     |
-| maxFontSize | The original design font size of the area, the maximum size cannot exceed this font size.                                                                                  | number  | 36     |
+| maxFontSize | The original design font size of this area, which cannot exceed this font size at most.                                                                                  | number  | 36     |
 | wrap        | Whether to support line feed                                                                                                            | boolean | false  |
 | ratio       | Copy width ratio, calculated `maxFontSize / ratio * Copy length`, there are scenes where the English characters are long but the container width is enough to display, but the font is reduced, which can be increased at this time. |

src/Badge/index.en.md

@@ -26,7 +26,7 @@ In `index.json` Introducing Components in
 }
 ```
 
-## Code Sample
+## Code example
 
 ### Basic use
 

src/Button/index.en.md

@@ -136,7 +136,7 @@ Component provides the following CSS variables, which can be used to customize s
 | --button-primary-color                   | <div style="width: 150px; height: 40px; background-color: #FFFFFF; color: #333333;">#FFFFFF</div>                     | <div style="width: 150px; height: 40px; background-color: #FFFFFF; color: #000000;">#FFFFFF</div>                     | Main button color         |
 | --button-primary-aide-border-color       | <div style="width: 150px; height: 40px; background-color: #E7F1FF; color: #333333;">#E7F1FF</div>                     | <div style="width: 150px; height: 40px; background-color: #0D2543; color: #FFFFFF;">#0D2543</div>                     | Primary Secondary Button Border Color |
 | --button-primary-aide-color              | <div style="width: 150px; height: 40px; background-color: #1677FF;">#1677FF</div>                                     | <div style="width: 150px; height: 40px; background-color: #3086FF;">#3086FF</div>                                     | Primary Auxiliary Button Color     |
-| --button-default-aide-border-color       | <div style="width: 150px; height: 40px; background-color: #F5F5F5; color: #333333;">#F5F5F5</div>                     | <div style="width: 150px; height: 40px; background-color: #121212; color: #FFFFFF;">#121212</div>                     | Default Auxiliary Button Border Color |
+| --button-default-aide-border-color       | <div style="width: 150px; height: 40px; background-color: #F5F5F5; color: #333333;">#F5F5F5</div>                     | <div style="width: 150px; height: 40px; background-color: #121212; color: #FFFFFF;">#121212</div>                     | Default Secondary Button Border Color |
 | --button-default-aide-background-color   | <div style="width: 150px; height: 40px; background-color: #FFFFFF; color: #333333;">#FFFFFF</div>                     | <div style="width: 150px; height: 40px; background-color: #1a1a1a; color: #FFFFFF;">#1a1a1a</div>                     | Default Auxiliary Button Background Color |
 | --button-default-aide-color              | <div style="width: 150px; height: 40px; background-color: #333333; color: #FFFFFF;">#333333</div>                     | <div style="width: 150px; height: 40px; background-color: #C5CAD1; color: #FFFFFF;">#C5CAD1</div>                     | Default Auxiliary Button Color     |
 | --button-primary-danger-background-color | <div style="width: 150px; height: 40px; background-color: #FF3141;">#FF3141</div>                                     | <div style="width: 150px; height: 40px; background-color: #FF4A58;">#FF4A58</div>                                     | Primary Danger Button Background Color |
@@ -145,7 +145,7 @@ Component provides the following CSS variables, which can be used to customize s
 | --button-default-danger-background-color | <div style="width: 150px; height: 40px; background-color: #FFFFFF; color: #333333;">#FFFFFF</div>                     | <div style="width: 150px; height: 40px; background-color: #1a1a1a; color: #ffffff;">#1a1a1a</div>                     | Default Hazard Button Background Color |
 | --button-default-danger-border-color     | <div style="width: 150px; height: 40px; background-color: #FF3141;">#FF3141</div>                                     | <div style="width: 150px; height: 40px; background-color: #FF4A58;">#FF4A58</div>                                     | Default Hazard Button Border Color |
 | --button-default-danger-color            | <div style="width: 150px; height: 40px; background-color: #FF3141;">#FF3141</div>                                     | <div style="width: 150px; height: 40px; background-color: #FF4A58;">#FF4A58</div>                                     | Default Hazard Button Color     |
-| --button-text-danger-color               | <div style="width: 150px; height: 40px; background-color: #FF3141;">#FF3141</div>                                     | <div style="width: 150px; height: 40px; background-color: #FF4A58;">#FF4A58</div>                                     | Hazard button text color     |
+| --button-text-danger-color               | <div style="width: 150px; height: 40px; background-color: #FF3141;">#FF3141</div>                                     | <div style="width: 150px; height: 40px; background-color: #FF4A58;">#FF4A58</div>                                     | Hazard Button Text Color     |
 | --button-danger-default-color            | <div style="width: 150px; height: 40px; background-color: #FF3141;">#FF3141</div>                                     | <div style="width: 150px; height: 40px; background-color: #FF4A58;">#FF4A58</div>                                     | Danger Button Default Color     |
 | --button-active-bg                       | <div style="width: 150px; height: 40px; background-color: rgba(255, 255, 255, 0.08);">rgba(255, 255, 255, 0.08)</div> | <div style="width: 150px; height: 40px; background-color: rgba(255, 255, 255, 0.08);">rgba(255, 255, 255, 0.08)</div> | Button to activate background color     |
 

src/Calendar/index.en.md

@@ -26,7 +26,7 @@ In `index.json` Introducing Components in
 }
 ```
 
-## Code Sample
+## Code example
 
 ### Basic use
 
@@ -252,7 +252,7 @@ interface CellState {
 
 #### Style Variables
 
-Component provides the following CSS variables, which can be used to customize styles. For more information, see ConfigProvider Components.
+Component provides the following CSS variables, which can be used to customize styles. For details, see ConfigProvider Components.
 
 | Variable name                           | Default Value                                                                                                                            | Dark Mode Default                                                                                                                    | Remarks                 |
 | -------------------------------- | --------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------- | -------------------- |

src/Card/index.en.md

@@ -26,7 +26,7 @@ In `index.json` Introducing Components in
 }
 ```
 
-## Code Sample
+## Code example
 
 ### Basic Usage
 
@@ -61,7 +61,7 @@ In `index.json` Introducing Components in
 </ant-card>
 ```
 
-### Heading ceiling
+### Title ceiling
 
 ```xml
 <ant-card
@@ -144,7 +144,7 @@ In `index.json` Introducing Components in
 
 | Name        | Description                 |
 | ----------- | -------------------- |
-| Default slot    | Card Content             |
+| Default Slot    | Card Content             |
 | headerTitle | Custom Title Bar Left Title |
 | headerRight | Customize the right content of the title bar |
 

src/Checkbox/index.en.md

@@ -9,7 +9,7 @@ toc: 'content'
 
 # Checkbox
 
-Multiple selection in a set of options. When used alone, it can represent a switch between two states, and `switch` Similar. The difference is that switching `switch` will directly trigger a state change, while `checkbox` Generally used for status markers and needs to be coordinated with the submit operation.
+Make multiple selections in a set of options. When used alone, it can represent a switch between two states, and `switch` Similar. The difference is that switching `switch` will directly trigger a state change, while `checkbox` Generally used for status markers and needs to be coordinated with the submit operation.
 
 ## Introduction
 
@@ -252,7 +252,7 @@ Page({
 
 #### Style Variables
 
-Component provides the following CSS variables, which can be used to customize styles. For more information, see ConfigProvider Components.
+Component provides the following CSS variables, which can be used to customize styles. For details, see ConfigProvider Components.
 
 | Variable name                                | Default Value                                                                                            | Dark Mode Default                                                                                    | Remarks                 |
 | ------------------------------------- | ------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- | -------------------- |

src/Checklist/index.en.md

@@ -165,7 +165,7 @@ Page({
 
 #### Style Variables
 
-Component provides the following CSS variables, which can be used to customize styles. For details, see ConfigProvider Components.
+Component provides the following CSS variables, which can be used to customize styles. For more information, see ConfigProvider Components.
 
 | Variable name                                   | Default Value                                                                                            | Dark Mode Default                                                                                    | Remarks               |
 | ---------------------------------------- | ------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- | ------------------ |

src/Collapse/index.en.md

@@ -203,7 +203,7 @@ Page({
 
 #### Style Variables
 
-Component provides the following CSS variables, which can be used to customize styles. For more information, see ConfigProvider Components.
+Component provides the following CSS variables, which can be used to customize styles. For details, see ConfigProvider Components.
 | Variable name | Default Value | Dark Mode Default | Remarks |
 | ---------------------------------------- | --------------------------------------------------------------------------------------------------------------------- | -------------------- | -------------------- |
 | --collapse-title-background-color | <div style="width: 150px; height: 30px; background-color: #ffffff; color: #333333;">#ffffff</div> | <div style="width: 150px; height: 30px; background-color: #1a1a1a; color: #fff;">#1a1a1a</div> | Collapse Panel Title Background Color |

src/Container/index.en.md

@@ -26,7 +26,7 @@ In `index.json` Introducing Components in
 }
 ```
 
-## Code Sample
+## Code example
 
 ### Basic use
 

src/Countdown/index.en.md

@@ -97,6 +97,6 @@ Component provides the following CSS variables, which can be used to customize s
 
 | Name   | Description       |
 | ------ | ---------- |
-| -      | Default slot   |
+| -      | Default Slot   |
 | prefix | Countdown Head |
 | suffix | Countdown Tail |