feat: stepper 支持微信

ant-design · Nov 15, 2023 · 783492a · 783492a
1 parent 2351012
commit 783492a
Show file tree

Hide file tree

Showing 45 changed files with 526 additions and 68 deletions.
diff --git a/compiled/alipay/demo/pages/Stepper/index.js b/compiled/alipay/demo/pages/Stepper/index.js
@@ -1,3 +1,4 @@
+import { resolveEventValue } from './utils';
 Page({
     data: {},
     onChange: function (value) {
@@ -15,7 +16,7 @@ Page({
     handleChange: function (value) {
         console.log('onChange', value);
         this.setData({
-            value: value,
+            value: resolveEventValue(value),
         });
     },
     add: function () {
@@ -25,7 +26,7 @@ Page({
     },
     minus: function () {
         this.setData({
-            value: this.data.value - 1,
+            value: (this.data.value || 0) - 1,
         });
     },
     clear: function () {

diff --git a/compiled/alipay/demo/pages/Stepper/utils.js b/compiled/alipay/demo/pages/Stepper/utils.js
@@ -0,0 +1,6 @@
+export function resolveEventValue(event) {
+    if (typeof event.detail !== 'undefined') {
+        return event.detail;
+    }
+    return event;
+}
diff --git a/compiled/alipay/src/Button/index.axml b/compiled/alipay/src/Button/index.axml
@@ -18,7 +18,7 @@
   class="ant-button {{ inline ? 'ant-button-inline ' + utils.getClass(size) : '' }} {{ 'ant-button-' + type + (danger ? '-danger' : '') }} {{ disabled || loading ? 'ant-button-disabled' : '' }} {{ className ? className : '' }}"
   style="{{ style }}">
   <view class="ant-button-wrap">
-    <icon
+    <ant-icon
       a:if="{{ !!icon }}"
       type="{{ icon }}" />
     <view

diff --git a/compiled/alipay/src/Button/index.json b/compiled/alipay/src/Button/index.json
@@ -2,6 +2,6 @@
   "component": true,
   "usingComponents": {
     "loading": "../Loading/index",
-    "icon": "../Icon/index"
+    "ant-icon": "../Icon/index"
   }
 }
diff --git a/compiled/alipay/src/Input/InputBlur/index.axml b/compiled/alipay/src/Input/InputBlur/index.axml
@@ -19,7 +19,7 @@
   selection-start="{{ selectionStart }}"
   selection-end="{{ selectionEnd }}"
   random-number="{{ randomNumber }}"
-  onInput="{{ onChange }}"
-  onConfirm="{{ onConfirm }}"
-  onFocus="{{ onFocus }}"
-  onBlur="{{ onBlur }}" />
+  onInput="onChange"
+  onConfirm="onConfirm"
+  onFocus="onFocus"
+  onBlur="onBlur" />
diff --git a/compiled/alipay/src/Input/InputBlur/index.ts b/compiled/alipay/src/Input/InputBlur/index.ts
@@ -89,7 +89,6 @@ mountComponent<InputBlurProps>(InputBlur, {
   selectionEnd: null,
   cursor: null,
   controlled: null,
-  maxLength: null,
   inputClassName: null,
   inputStyle: null,
   focus: null,

diff --git a/compiled/alipay/src/Stepper/index.axml b/compiled/alipay/src/Stepper/index.axml
@@ -32,6 +32,6 @@
     icon="AddOutline"
     type="text"
     data-mode="add"
-    disabled="{{ disabled || mixin.value >= max }}"
+    disabled="{{ disabled || (mixin.value !== '' && mixin.value >= max) }}"
     onTap="onTap" />
 </view>
diff --git a/compiled/alipay/src/Stepper/index.less b/compiled/alipay/src/Stepper/index.less
@@ -52,6 +52,7 @@
     color: @COLOR_TEXT_PRIMARY;
     box-sizing: border-box;
     background-color: @COLOR_BACKGROUND;
+    // 在微信会导致 input 显示不居中
     padding: 7 * @rpx 14 * @rpx;
     caret-color: @COLOR_BRAND1;
 

diff --git a/compiled/alipay/src/Stepper/index.ts b/compiled/alipay/src/Stepper/index.ts
@@ -3,6 +3,7 @@ import '../_util/assert-component2';
 import { mountComponent } from '../_util/component';
 import { useComponentEvent } from '../_util/hooks/useComponentEvent';
 import { useMixState } from '../_util/hooks/useMixState';
+import { resolveEventValue } from '../_util/platform';
 import { IStepperProps } from './props';
 import { getPrecision, getValidNumber } from './utils';
 
@@ -40,13 +41,9 @@ const Stepper = (props: IStepperProps) => {
   useEvent(
     'onChange',
     (v, event) => {
-      const state = update(v);
+      const state = update(resolveEventValue(v));
       if (state.changed) {
-        triggerEvent(
-          'change',
-          state.newValue === '' ? null : Number(state.newValue),
-          event
-        );
+        triggerEvent('change', toNumber(state.newValue), event);
       }
     },
     [value]
@@ -60,7 +57,7 @@ const Stepper = (props: IStepperProps) => {
   );
   useEvent(
     'onBlur',
-    (event) => {
+    (_v, event) => {
       if (isControlled) {
         const state = update(props.value);
         if (state.changed) {
@@ -87,7 +84,7 @@ const Stepper = (props: IStepperProps) => {
         const { mode } = e.currentTarget.dataset;
         let result = newValue;
         const precision =
-          props.precision >= 0
+          typeof props.precision === 'number' && props.precision >= 0
             ? props.precision
             : Math.max(getPrecision(newValue), getPrecision(step));
         if (mode === 'minus') {
@@ -125,13 +122,13 @@ const Stepper = (props: IStepperProps) => {
 
 mountComponent(Stepper, {
   value: null,
-  min: null,
-  max: null,
+  defaultValue: null,
+  precision: -1,
+  min: Number.MIN_SAFE_INTEGER,
+  max: Number.MAX_SAFE_INTEGER,
   step: 1,
   type: 'digit',
-  precision: null,
   inputClassName: '',
   inputStyle: '',
   disabled: false,
-  defaultValue: null,
 });
diff --git a/compiled/alipay/src/Stepper/utils.ts b/compiled/alipay/src/Stepper/utils.ts
@@ -10,8 +10,13 @@ export function getPrecision(value: number): number {
   return p;
 }
 
-
-export function getValidNumber(value: any, min = -Infinity, max = Infinity, step: number, precision?: number) {
+export function getValidNumber(
+  value: any,
+  min = -Infinity,
+  max = Infinity,
+  step: number,
+  precision?: number
+) {
   if (typeof value === 'undefined' || value === null) {
     return {
       valid: true,
@@ -38,13 +43,13 @@ export function getValidNumber(value: any, min = -Infinity, max = Infinity, step
     num = min;
   }
   if (typeof num === 'number' && !isNaN(num)) {
-    if (precision >= 0) {
+    if (typeof precision === 'number' && precision >= 0) {
       return {
         valid: true,
         value: num.toFixed(precision),
       };
     }
-    precision = Math.max(getPrecision(num), getPrecision(step))
+    precision = Math.max(getPrecision(num), getPrecision(step));
     return {
       valid: true,
       value: num.toFixed(precision),

diff --git a/compiled/alipay/src/_util/platform.ts b/compiled/alipay/src/_util/platform.ts
@@ -13,3 +13,8 @@ export function platform() {
 
   return platform;
 }
+
+export function resolveEventValue(value) {
+
+  return value;
+}
diff --git a/compiled/wechat/app.json b/compiled/wechat/app.json
@@ -1,5 +1,6 @@
 {
   "pages": [
+    "demo/pages/Stepper/index",
     "demo/pages/Input/index",
     "demo/pages/InputCustom/index",
     "demo/pages/InputSearchBar/index",

diff --git a/compiled/wechat/demo/pages/InputSearchBar/index.wxml b/compiled/wechat/demo/pages/InputSearchBar/index.wxml
@@ -7,7 +7,7 @@
     confirm-type="search"
     allowClear
     focus
-    onConfirm="onConfirm">
+    bind:confirm="onConfirm">
     <icon
       slot="prefix"
       type="SearchOutline" />

diff --git a/compiled/wechat/demo/pages/Stepper/index.js b/compiled/wechat/demo/pages/Stepper/index.js
@@ -0,0 +1,43 @@
+import { resolveEventValue } from './utils';
+Page({
+    data: {},
+    onChange: function (value) {
+        console.log('onChange', value);
+    },
+    onFocus: function (value) {
+        console.log('onFocus', value);
+    },
+    onConfirm: function (value) {
+        console.log('onConfirm', value);
+    },
+    onBlur: function (value) {
+        console.log('onBlur', value);
+    },
+    handleChange: function (value) {
+        console.log('onChange', value);
+        this.setData({
+            value: resolveEventValue(value),
+        });
+    },
+    add: function () {
+        this.setData({
+            value: (this.data.value || 0) + 1,
+        });
+    },
+    minus: function () {
+        this.setData({
+            value: (this.data.value || 0) - 1,
+        });
+    },
+    clear: function () {
+        this.setData({
+            value: null,
+        });
+    },
+    handleAddValue: function () {
+        this.setData({ value: this.data.value + 1 });
+    },
+    handleMinusValue: function () {
+        this.setData({ value: this.data.value - 1 });
+    },
+});
diff --git a/compiled/wechat/demo/pages/Stepper/index.json b/compiled/wechat/demo/pages/Stepper/index.json
@@ -0,0 +1,8 @@
+{
+  "defaultTitle": "Stepper",
+  "usingComponents": {
+    "stepper": "../../../src/Stepper/index",
+    "container": "../../../src/Container/index",
+    "ant-button": "../../../src/Button/index"
+  }
+}
diff --git a/compiled/wechat/demo/pages/Stepper/index.wxml b/compiled/wechat/demo/pages/Stepper/index.wxml
@@ -0,0 +1,61 @@
+<container title="基础用法">
+  <stepper
+    bind:change="onChange"
+    onBlur="onBlur"
+    onConfirm="onConfirm"
+    onFocus="onFocus" />
+</container>
+<container title="初始值">
+  <stepper defaultValue="{{ 0 }}" />
+</container>
+<container title="step 0.01">
+  <stepper
+    defaultValue="{{ 0 }}"
+    step="{{ 0.01 }}"
+    inputStyle="width: 60px" />
+</container>
+<container title="precision 1">
+  <stepper
+    defaultValue="{{ 0 }}"
+    precision="{{ 1 }}"
+    inputStyle="width: 60px" />
+</container>
+<container title="限制输入范围 [0, 10]">
+  <stepper
+    defaultValue="{{ 0 }}"
+    min="{{ 0 }}"
+    max="{{ 10 }}"
+    step="{{ 1 }}" />
+</container>
+<container title="禁用状态">
+  <stepper
+    defaultValue="{{ 0 }}"
+    disabled />
+</container>
+<container title="受控组件">
+  <stepper
+    value="{{ value }}"
+    bind:change="handleChange"
+    style="margin: 8px 0"
+    onBlur="onBlur"
+    onConfirm="onConfirm"
+    onFocus="onFocus" />
+  value: {{ value }}
+  <view class="list">
+    <ant-button
+      inline
+      bind:tap="add">
+      add
+    </ant-button>
+    <ant-button
+      inline
+      bind:tap="minus">
+      minus
+    </ant-button>
+    <ant-button
+      inline
+      bind:tap="clear">
+      clear
+    </ant-button>
+  </view>
+</container>
diff --git a/compiled/wechat/demo/pages/Stepper/index.wxss b/compiled/wechat/demo/pages/Stepper/index.wxss
@@ -0,0 +1,3 @@
+.list button {
+  margin-right: 8px;
+}
diff --git a/compiled/wechat/demo/pages/Stepper/utils.js b/compiled/wechat/demo/pages/Stepper/utils.js
@@ -0,0 +1,6 @@
+export function resolveEventValue(event) {
+    if (typeof event.detail !== 'undefined') {
+        return event.detail;
+    }
+    return event;
+}
diff --git a/compiled/wechat/src/Button/index.json b/compiled/wechat/src/Button/index.json
@@ -2,6 +2,6 @@
   "component": true,
   "usingComponents": {
     "loading": "../Loading/index",
-    "icon": "../Icon/index"
+    "ant-icon": "../Icon/index"
   }
 }
diff --git a/compiled/wechat/src/Button/index.wxml b/compiled/wechat/src/Button/index.wxml
@@ -20,7 +20,7 @@
   class="ant-button {{ inline ? 'ant-button-inline ' + utils.getClass(size) : '' }} {{ 'ant-button-' + type + (danger ? '-danger' : '') }} {{ disabled || loading ? 'ant-button-disabled' : '' }} {{ className ? className : '' }}"
   style="{{ style }}">
   <view class="ant-button-wrap">
-    <icon
+    <ant-icon
       wx:if="{{ !!icon }}"
       type="{{ icon }}" />
     <view

diff --git a/compiled/wechat/src/Input/InputBlur/index.js b/compiled/wechat/src/Input/InputBlur/index.js
@@ -65,7 +65,6 @@ mountComponent(InputBlur, {
     selectionEnd: null,
     cursor: null,
     controlled: null,
-    maxLength: null,
     inputClassName: null,
     inputStyle: null,
     focus: null,
@@ -74,4 +73,5 @@ mountComponent(InputBlur, {
     name: null,
     type: null,
     randomNumber: null,
+    maxLength: -1,
 });
diff --git a/compiled/wechat/src/Input/InputBlur/index.wxml b/compiled/wechat/src/Input/InputBlur/index.wxml
@@ -19,7 +19,7 @@
   selection-start="{{ selectionStart }}"
   selection-end="{{ selectionEnd }}"
   random-number="{{ randomNumber }}"
-  bindinput="{{ onChange }}"
-  bindconfirm="{{ onConfirm }}"
-  bindfocus="{{ onFocus }}"
-  bindblur="{{ onBlur }}" />
+  bindinput="onChange"
+  bindconfirm="onConfirm"
+  bindfocus="onFocus"
+  bindblur="onBlur" />