From 783492aee80f50d7598c444ab170a37aed2368d1 Mon Sep 17 00:00:00 2001 From: DiamondYuan Date: Tue, 14 Nov 2023 15:20:27 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20stepper=20=E6=94=AF=E6=8C=81=E5=BE=AE?= =?UTF-8?q?=E4=BF=A1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- compiled/alipay/demo/pages/Stepper/index.js | 5 +- compiled/alipay/demo/pages/Stepper/utils.js | 6 ++ compiled/alipay/src/Button/index.axml | 2 +- compiled/alipay/src/Button/index.json | 2 +- .../alipay/src/Input/InputBlur/index.axml | 8 +- compiled/alipay/src/Input/InputBlur/index.ts | 1 - compiled/alipay/src/Stepper/index.axml | 2 +- compiled/alipay/src/Stepper/index.less | 1 + compiled/alipay/src/Stepper/index.ts | 21 ++--- compiled/alipay/src/Stepper/utils.ts | 13 ++- compiled/alipay/src/_util/platform.ts | 5 + compiled/wechat/app.json | 1 + .../demo/pages/InputSearchBar/index.wxml | 2 +- compiled/wechat/demo/pages/Stepper/index.js | 43 +++++++++ compiled/wechat/demo/pages/Stepper/index.json | 8 ++ compiled/wechat/demo/pages/Stepper/index.wxml | 61 +++++++++++++ compiled/wechat/demo/pages/Stepper/index.wxss | 3 + compiled/wechat/demo/pages/Stepper/utils.js | 6 ++ compiled/wechat/src/Button/index.json | 2 +- compiled/wechat/src/Button/index.wxml | 2 +- compiled/wechat/src/Input/InputBlur/index.js | 2 +- .../wechat/src/Input/InputBlur/index.wxml | 8 +- compiled/wechat/src/Stepper/index.js | 91 +++++++++++++++++++ compiled/wechat/src/Stepper/index.json | 7 ++ compiled/wechat/src/Stepper/index.md | 40 ++++++++ compiled/wechat/src/Stepper/index.wxml | 37 ++++++++ compiled/wechat/src/Stepper/index.wxss | 50 ++++++++++ compiled/wechat/src/Stepper/props.js | 5 + compiled/wechat/src/Stepper/utils.js | 58 ++++++++++++ compiled/wechat/src/Stepper/variable.wxss | 0 compiled/wechat/src/_util/platform.js | 6 ++ config/wechat.json | 4 +- demo/pages/Stepper/index.axml.tsx | 2 +- demo/pages/Stepper/index.ts | 9 +- demo/pages/Stepper/utils.ts | 6 ++ scripts/tsxml/platform.ts | 3 + src/Button/index.axml.tsx | 4 +- src/Button/index.json | 2 +- src/Input/InputBlur/index.axml.tsx | 12 +-- src/Input/InputBlur/index.ts | 4 +- src/Stepper/index.axml.tsx | 2 +- src/Stepper/index.less | 3 + src/Stepper/index.ts | 21 ++--- src/Stepper/utils.ts | 13 ++- src/_util/platform.ts | 11 +++ 45 files changed, 526 insertions(+), 68 deletions(-) create mode 100644 compiled/alipay/demo/pages/Stepper/utils.js create mode 100644 compiled/wechat/demo/pages/Stepper/index.js create mode 100644 compiled/wechat/demo/pages/Stepper/index.json create mode 100644 compiled/wechat/demo/pages/Stepper/index.wxml create mode 100644 compiled/wechat/demo/pages/Stepper/index.wxss create mode 100644 compiled/wechat/demo/pages/Stepper/utils.js create mode 100644 compiled/wechat/src/Stepper/index.js create mode 100644 compiled/wechat/src/Stepper/index.json create mode 100644 compiled/wechat/src/Stepper/index.md create mode 100644 compiled/wechat/src/Stepper/index.wxml create mode 100644 compiled/wechat/src/Stepper/index.wxss create mode 100644 compiled/wechat/src/Stepper/props.js create mode 100644 compiled/wechat/src/Stepper/utils.js create mode 100644 compiled/wechat/src/Stepper/variable.wxss create mode 100644 demo/pages/Stepper/utils.ts diff --git a/compiled/alipay/demo/pages/Stepper/index.js b/compiled/alipay/demo/pages/Stepper/index.js index afd7a3b4a..71e383f03 100644 --- 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 new file mode 100644 index 000000000..c6ad68009 --- /dev/null +++ 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 index 6c8376a4b..a52ac73be 100644 --- 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 }}"> - + 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 index f49236035..31091f44a 100644 --- a/compiled/alipay/src/Input/InputBlur/index.ts +++ b/compiled/alipay/src/Input/InputBlur/index.ts @@ -89,7 +89,6 @@ mountComponent(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 index 845c50018..c6cdf530d 100644 --- 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" /> diff --git a/compiled/alipay/src/Stepper/index.less b/compiled/alipay/src/Stepper/index.less index 8a0576a89..dec8ec6c9 100644 --- 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 index 964a55c2f..83552bdbe 100644 --- 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 index 310e60dc9..607868588 100644 --- 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 index 3c325ff1f..7ab1f0876 100644 --- 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 index dbb87d155..faab4f9d2 100644 --- 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 index 2641d688f..2324c778e 100644 --- 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"> diff --git a/compiled/wechat/demo/pages/Stepper/index.js b/compiled/wechat/demo/pages/Stepper/index.js new file mode 100644 index 000000000..71e383f03 --- /dev/null +++ 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 new file mode 100644 index 000000000..2b39da59c --- /dev/null +++ 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 new file mode 100644 index 000000000..4438c1e9f --- /dev/null +++ b/compiled/wechat/demo/pages/Stepper/index.wxml @@ -0,0 +1,61 @@ + + + + + + + + + + + + + + + + + + + + + value: {{ value }} + + + add + + + minus + + + clear + + + diff --git a/compiled/wechat/demo/pages/Stepper/index.wxss b/compiled/wechat/demo/pages/Stepper/index.wxss new file mode 100644 index 000000000..337f144c5 --- /dev/null +++ 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 new file mode 100644 index 000000000..c6ad68009 --- /dev/null +++ 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 index 9813a4dc6..f6bbf1425 100644 --- 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 index 9a36428cd..f00610af4 100644 --- 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 }}"> - + bindinput="onChange" + bindconfirm="onConfirm" + bindfocus="onFocus" + bindblur="onBlur" /> diff --git a/compiled/wechat/src/Stepper/index.js b/compiled/wechat/src/Stepper/index.js new file mode 100644 index 000000000..64dd41f19 --- /dev/null +++ b/compiled/wechat/src/Stepper/index.js @@ -0,0 +1,91 @@ +import { useEvent } from 'functional-mini/component'; +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 { getPrecision, getValidNumber } from './utils'; +var Stepper = function (props) { + var _a = useMixState(props.defaultValue, { + value: props.value, + postState: function (num, precision) { + var _a = getValidNumber(num, props.min, props.max, props.step, precision >= 0 ? precision : props.precision), valid = _a.valid, value = _a.value; + if (valid) { + return { valid: valid, value: value }; + } + return { valid: false }; + }, + }), value = _a[0], _b = _a[1], isControlled = _b.isControlled, update = _b.update; + var triggerEvent = useComponentEvent(props).triggerEvent; + var toNumber = function (v) { return (v === '' ? null : Number(v)); }; + useEvent('onFocus', function (e) { + triggerEvent('focus', toNumber(value), e); + }, [value]); + useEvent('onChange', function (v, event) { + var state = update(resolveEventValue(v)); + if (state.changed) { + triggerEvent('change', toNumber(state.newValue), event); + } + }, [value]); + useEvent('onConfirm', function (_v, event) { + triggerEvent('confirm', value === '' ? null : Number(value), event); + }, [value]); + useEvent('onBlur', function (_v, event) { + if (isControlled) { + var state = update(props.value); + if (state.changed) { + triggerEvent('blur', state.newValue === '' ? null : Number(state.newValue), event); + } + else { + triggerEvent('blur', value === '' ? null : Number(value), event); + } + } + else { + triggerEvent('blur', value === '' ? null : Number(value), event); + } + }, [value, props]); + useEvent('onTap', function (e) { + var step = props.step, disabled = props.disabled, _a = props.min, min = _a === void 0 ? -Infinity : _a, _b = props.max, max = _b === void 0 ? Infinity : _b; + var newValue = Number(value); + if (!disabled) { + var mode = e.currentTarget.dataset.mode; + var result = newValue; + var precision = typeof props.precision === 'number' && props.precision >= 0 + ? props.precision + : Math.max(getPrecision(newValue), getPrecision(step)); + if (mode === 'minus') { + result = newValue - step; + if (result < min) { + result = min; + } + } + else if (mode === 'add') { + result = newValue + step; + if (result > max) { + result = max; + } + } + if (!isControlled) { + var changed = update(result, precision).changed; + if (!changed) { + return; + } + } + var validValue = getValidNumber(result, min, max, step, precision).value; + triggerEvent('change', Number(validValue), e); + } + }, [value, props]); + return { mixin: { value: value } }; +}; +mountComponent(Stepper, { + value: null, + defaultValue: null, + precision: -1, + min: Number.MIN_SAFE_INTEGER, + max: Number.MAX_SAFE_INTEGER, + step: 1, + type: 'digit', + inputClassName: '', + inputStyle: '', + disabled: false, +}); diff --git a/compiled/wechat/src/Stepper/index.json b/compiled/wechat/src/Stepper/index.json new file mode 100644 index 000000000..12bdacc36 --- /dev/null +++ b/compiled/wechat/src/Stepper/index.json @@ -0,0 +1,7 @@ +{ + "component": true, + "usingComponents": { + "ant-button": "../Button/index", + "ant-input": "../Input/InputBlur/index" + } +} diff --git a/compiled/wechat/src/Stepper/index.md b/compiled/wechat/src/Stepper/index.md new file mode 100644 index 000000000..e541be48d --- /dev/null +++ b/compiled/wechat/src/Stepper/index.md @@ -0,0 +1,40 @@ +--- +nav: + path: /components +group: + title: 信息输入 + order: 10 +toc: 'content' +--- + +# Stepper 步进器 + + + +一种两段式控制，增加、减少或修改数值 +## 何时使用 +用于在一定范围内输入、调整当前数值 + +## 代码示例 + + +## API +| 属性 | 说明 | 类型 | 默认值 | +| -----|-----|-----|----- | +| className | 类名 | string | - | +| disabled | 是否禁用 | boolean | false | +| defaultValue | 初始值 | number | - | +| focus | 输入框选中状态 | boolean | false | +| inputClassName | 输入框类型 | string | - | +| inputStyle | 输入框样式 | string | - | +| max | 最大值 | number | - | +| min | 最小值 | number | - | +| precision | 计算精度，保留几位小数 [详见](https://github.com/ant-design/ant-design/issues/5998) | number | - | +| style | 样式 | string | - | +| step | 步距，即每次加减的值 | number | 1 | +| type | 输入框唤起键盘类型，可选 `number` `digit` | string | `digit` | +| value | 输入框的值, 表单提交的时候有效 | number | - | +| onBlur | 输入框失去焦点时，触发此回调 | (value: number | null, event: [Event](https://opendocs.alipay.com/mini/framework/event-object)) => void | +| onChange | 数据变化后，触发此回调 | ( value: number | null, [Event](https://opendocs.alipay.com/mini/framework/event-object)) => void | +| onConfirm | 点击键盘完成时触发此回调 | (value: number | null, event: [Event](https://opendocs.alipay.com/mini/framework/event-object)) => void | +| onFocus | 输入框聚焦时，触发此回调 | (value: number | null, event: [Event](https://opendocs.alipay.com/mini/framework/event-object)) => void | \ No newline at end of file diff --git a/compiled/wechat/src/Stepper/index.wxml b/compiled/wechat/src/Stepper/index.wxml new file mode 100644 index 000000000..46677785c --- /dev/null +++ b/compiled/wechat/src/Stepper/index.wxml @@ -0,0 +1,37 @@ + + + + + + + diff --git a/compiled/wechat/src/Stepper/index.wxss b/compiled/wechat/src/Stepper/index.wxss new file mode 100644 index 000000000..81a2dae1d --- /dev/null +++ b/compiled/wechat/src/Stepper/index.wxss @@ -0,0 +1,50 @@ +.ant-stepper { + position: relative; + display: inline-flex; + flex-wrap: nowrap; + height: 28px; + overflow: hidden; + box-sizing: border-box; +} +.ant-stepper .ant-stepper-button { + width: 28px; + height: 28px; + line-height: 28px; + padding: 0; + color: #1677ff; + background-color: #f5f5f5; +} +.ant-stepper .ant-stepper-button-hover { + background-color: rgba(0, 0, 0, 0.08); +} +.ant-stepper .ant-stepper-button-up { + border-top-left-radius: 0; + border-top-right-radius: 2px; + border-bottom-left-radius: 0; + border-bottom-right-radius: 2px; +} +.ant-stepper .ant-stepper-button-down { + border-top-right-radius: 0; + border-top-left-radius: 2px; + border-bottom-right-radius: 0; + border-bottom-left-radius: 2px; +} +.ant-stepper .ant-stepper-button-disabled { + color: #999999; +} +.ant-stepper-input { + width: 44px; + height: 28px; + margin-left: 2px; + margin-right: 2px; + text-align: center; + line-height: normal; + font-size: 15px; + color: #333333; + box-sizing: border-box; + background-color: #f5f5f5; + caret-color: #1677ff; +} +.ant-stepper-input-disabled { + opacity: 0.4; +} diff --git a/compiled/wechat/src/Stepper/props.js b/compiled/wechat/src/Stepper/props.js new file mode 100644 index 000000000..29c0dadb2 --- /dev/null +++ b/compiled/wechat/src/Stepper/props.js @@ -0,0 +1,5 @@ +export var StepperDefaultProps = { + step: 1, + disabled: false, + type: 'digit', +}; diff --git a/compiled/wechat/src/Stepper/utils.js b/compiled/wechat/src/Stepper/utils.js new file mode 100644 index 000000000..c17a19708 --- /dev/null +++ b/compiled/wechat/src/Stepper/utils.js @@ -0,0 +1,58 @@ +export function getPrecision(value) { + var valueString = String(value); + if (valueString.indexOf('e-') >= 0) { + return parseInt(valueString.slice(valueString.indexOf('e-') + 2), 10); + } + var p = 0; + if (valueString.indexOf('.') >= 0) { + p = valueString.length - valueString.indexOf('.') - 1; + } + return p; +} +export function getValidNumber(value, min, max, step, precision) { + if (min === void 0) { min = -Infinity; } + if (max === void 0) { max = Infinity; } + if (typeof value === 'undefined' || value === null) { + return { + valid: true, + value: '', + }; + } + var num; + if (typeof value === 'string') { + if (/^\s*$/.test(value)) { + return { + valid: true, + value: '', + }; + } + if (!isNaN(Number(value))) { + num = Number(value); + } + } + else { + num = value; + } + if (num > max) { + num = max; + } + else if (num < min) { + num = min; + } + if (typeof num === 'number' && !isNaN(num)) { + if (typeof precision === 'number' && precision >= 0) { + return { + valid: true, + value: num.toFixed(precision), + }; + } + precision = Math.max(getPrecision(num), getPrecision(step)); + return { + valid: true, + value: num.toFixed(precision), + }; + } + return { + valid: false, + }; +} diff --git a/compiled/wechat/src/Stepper/variable.wxss b/compiled/wechat/src/Stepper/variable.wxss new file mode 100644 index 000000000..e69de29bb diff --git a/compiled/wechat/src/_util/platform.js b/compiled/wechat/src/_util/platform.js index 279c9b966..207cfcb0c 100644 --- a/compiled/wechat/src/_util/platform.js +++ b/compiled/wechat/src/_util/platform.js @@ -8,3 +8,9 @@ export function platform() { platform = 'wechat'; return platform; } +export function resolveEventValue(value) { + if (platform() === 'wechat') { + return value.detail; + } + return value; +} diff --git a/config/wechat.json b/config/wechat.json index cca404bf4..7a0f8e1cb 100644 --- a/config/wechat.json +++ b/config/wechat.json @@ -1,6 +1,7 @@ { "pages": [ "pages/Container", + "pages/Stepper", "pages/Button", "pages/ButtonIcon", "pages/ButtonCustom", @@ -35,6 +36,7 @@ "ImageIcon", "Result", "Popover", - "Mask" + "Mask", + "Stepper" ] } diff --git a/demo/pages/Stepper/index.axml.tsx b/demo/pages/Stepper/index.axml.tsx index 6fb8eb96d..9a0979c41 100644 --- a/demo/pages/Stepper/index.axml.tsx +++ b/demo/pages/Stepper/index.axml.tsx @@ -3,7 +3,7 @@ import AntButton from '../../../src/Button/index.axml'; import Container from '../../../src/Container/index.axml'; import Stepper from '../../../src/Stepper/index.axml'; -export default (_, { value }: InternalData) => ( +export default (_, { value, }: InternalData) => ( - {!!icon && } + {!!icon && } , { inputValue } ) => ( @@ -52,9 +48,9 @@ export default ( 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/src/Input/InputBlur/index.ts b/src/Input/InputBlur/index.ts index f49236035..c5c8f0bc8 100644 --- a/src/Input/InputBlur/index.ts +++ b/src/Input/InputBlur/index.ts @@ -89,7 +89,6 @@ mountComponent(InputBlur, { selectionEnd: null, cursor: null, controlled: null, - maxLength: null, inputClassName: null, inputStyle: null, focus: null, @@ -98,4 +97,7 @@ mountComponent(InputBlur, { name: null, type: null, randomNumber: null, + /// #if WECHAT + maxLength: -1, + /// #endif }); diff --git a/src/Stepper/index.axml.tsx b/src/Stepper/index.axml.tsx index 7df235a7a..b0eee4d02 100644 --- a/src/Stepper/index.axml.tsx +++ b/src/Stepper/index.axml.tsx @@ -60,7 +60,7 @@ export default ( icon="AddOutline" type="text" data-mode="add" - disabled={disabled || mixin.value >= max} + disabled={disabled || (mixin.value !== '' && mixin.value >= max)} onTap="onTap" /> diff --git a/src/Stepper/index.less b/src/Stepper/index.less index 8a0576a89..daecc849d 100644 --- a/src/Stepper/index.less +++ b/src/Stepper/index.less @@ -52,7 +52,10 @@ color: @COLOR_TEXT_PRIMARY; box-sizing: border-box; background-color: @COLOR_BACKGROUND; + /// #if ALIPAY + // 在微信会导致 input 显示不居中 padding: 7 * @rpx 14 * @rpx; + /// #endif caret-color: @COLOR_BRAND1; &-disabled { diff --git a/src/Stepper/index.ts b/src/Stepper/index.ts index 964a55c2f..83552bdbe 100644 --- a/src/Stepper/index.ts +++ b/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/src/Stepper/utils.ts b/src/Stepper/utils.ts index 310e60dc9..607868588 100644 --- a/src/Stepper/utils.ts +++ b/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/src/_util/platform.ts b/src/_util/platform.ts index 2166b80de..f7414ba03 100644 --- a/src/_util/platform.ts +++ b/src/_util/platform.ts @@ -21,3 +21,14 @@ export function platform() { return platform; } + +export function resolveEventValue(value) { + /// #if WECHAT + + if (platform() === 'wechat') { + return value.detail; + } + /// #endif + + return value; +}