{tips || (
<>
-
+
{locale.shortpassword.tips}
>
)}
diff --git a/src/packages/sidebaritem/sidebaritem.scss b/src/packages/sidebaritem/sidebaritem.scss
index 3dc1602aef..095b99c5eb 100644
--- a/src/packages/sidebaritem/sidebaritem.scss
+++ b/src/packages/sidebaritem/sidebaritem.scss
@@ -7,7 +7,9 @@
color: $color-title;
padding: $sidebar-item-padding;
box-sizing: border-box;
+ /* #ifndef dynamic*/
overflow: auto;
+ /* #endif */
&.inactive {
overflow: visible;
diff --git a/src/packages/signature/demo.scss b/src/packages/signature/demo.scss
index 1639034617..f2201c88b6 100644
--- a/src/packages/signature/demo.scss
+++ b/src/packages/signature/demo.scss
@@ -13,7 +13,12 @@
.demo-btn {
margin-top: 0;
+ /* #ifndef dynamic*/
display: inline-flex;
+ /* #endif */
+ /* #ifdef dynamic*/
+ display: flex;
+ /* #endif */
align-items: center;
}
}
diff --git a/src/packages/skeleton/skeleton.scss b/src/packages/skeleton/skeleton.scss
index a7b0064fd9..d0d5c6956d 100644
--- a/src/packages/skeleton/skeleton.scss
+++ b/src/packages/skeleton/skeleton.scss
@@ -4,7 +4,12 @@
&-content {
position: relative;
+ /* #ifdef dynamic*/
+ display: flex;
+ /* #endif */
+ /* #ifndef dynamic*/
display: inline-flex;
+ /* #endif */
width: $skeleton-line-width;
background: $skeleton-background;
border-radius: $skeleton-line-border-radius;
diff --git a/src/packages/space/space.scss b/src/packages/space/space.scss
index 5b4f09e6ee..9203872639 100644
--- a/src/packages/space/space.scss
+++ b/src/packages/space/space.scss
@@ -30,7 +30,7 @@
&-wrap {
flex-wrap: wrap;
- margin-bottom: calc(#{$space-gap} * -1);
+ margin-bottom: calc($space-gap * -1);
&-item {
padding-bottom: $space-gap;
@@ -82,7 +82,9 @@
}
&-stretch {
+ /* #ifndef dynamic*/
justify-content: stretch;
+ /* #endif */
}
}
}
diff --git a/src/packages/step/step.scss b/src/packages/step/step.scss
index df168de948..f8b782772f 100644
--- a/src/packages/step/step.scss
+++ b/src/packages/step/step.scss
@@ -90,7 +90,6 @@
line-height: 14px;
font-size: $steps-base-title-font-size;
color: $steps-base-title-color;
- overflow: hidden;
white-space: nowrap;
}
diff --git a/src/packages/step/step.taro.tsx b/src/packages/step/step.taro.tsx
index c9f816406b..91965e65d4 100644
--- a/src/packages/step/step.taro.tsx
+++ b/src/packages/step/step.taro.tsx
@@ -86,17 +86,17 @@ export const Step: FunctionComponent<
if (!title && !description) return null
return (
-
+
{title && {title}}
{description && (
{description}
)}
-
+
)
}, [title, description])
return (
-
+
{renderHeadType}
@@ -106,7 +106,7 @@ export const Step: FunctionComponent<
{renderContent}
-
+
)
}
diff --git a/src/packages/steps/steps.scss b/src/packages/steps/steps.scss
index 17d281e6d8..c5ec372adc 100644
--- a/src/packages/steps/steps.scss
+++ b/src/packages/steps/steps.scss
@@ -13,8 +13,8 @@
&-icon {
.nut-icon {
- height: 10px;
- width: 10px;
+ height: $icon-size-10;
+ width: $icon-size-10;
}
.nut-image {
@@ -86,7 +86,9 @@
.nut-step-title {
padding-right: 8px;
+ /* #ifndef dynamic*/
width: fit-content;
+ /* #endif */
}
}
}
@@ -106,6 +108,7 @@
flex-direction: column;
align-items: center;
flex: 1;
+ min-width: 0;
&-line {
top: 0;
@@ -114,7 +117,12 @@
width: 100%;
&-inner {
+ /* #ifdef dynamic*/
+ display: flex;
+ /* #endif */
+ /* #ifndef dynamic*/
display: inline-flex;
+ /* #endif */
height: $steps-base-line-height;
width: 100%;
background: $steps-base-line-background;
@@ -123,7 +131,7 @@
&-head {
justify-content: center;
- margin-bottom: 6px;
+ margin-bottom: 5px;
&-dot-wrap,
&-icon-wrap,
@@ -138,15 +146,22 @@
width: $steps-double-head-icon-size;
.nut-icon {
- height: 12px;
- width: 12px;
+ height: $icon-size-12;
+ width: $icon-size-12;
}
}
&-main {
align-items: center;
margin-left: 0;
- margin-top: 2px;
+ }
+
+ &-title {
+ height: auto;
+ line-height: 20px;
+ white-space: normal;
+ overflow-wrap: break-word;
+ text-align: center;
}
}
@@ -207,15 +222,15 @@
&-head {
align-items: center;
justify-content: center;
- height: 18px;
+ height: 20px;
&-icon {
width: $steps-vertical-head-icon-size;
height: $steps-vertical-head-icon-size;
.nut-icon {
- height: 12px;
- width: 12px;
+ height: $icon-size-12;
+ width: $icon-size-12;
}
}
}
@@ -232,7 +247,9 @@
align-items: center;
height: $steps-vertical-line-height;
font-size: $steps-vertical-title-font-size;
+ /* #ifndef dynamic*/
overflow: auto;
+ /* #endif */
font-weight: 500;
margin-bottom: $steps-vertical-title-margin-bottom;
}
diff --git a/src/packages/steps/steps.taro.tsx b/src/packages/steps/steps.taro.tsx
index 4aea45dcfc..b88e874a6a 100644
--- a/src/packages/steps/steps.taro.tsx
+++ b/src/packages/steps/steps.taro.tsx
@@ -1,5 +1,6 @@
import React, { FunctionComponent } from 'react'
import classNames from 'classnames'
+import { View } from '@tarojs/components'
import { DataContext } from './context'
import { ComponentDefaults } from '@/utils/typings'
import { TaroStepsProps } from '@/types'
@@ -39,8 +40,7 @@ export const Steps: FunctionComponent<
classPrefix,
{
[`${classPrefix}-${direction}`]: true,
- [`${classPrefix}-${direction}-count-${React.Children.count(children)}`]:
- true,
+ [`${classPrefix}-${direction}-count-${React.Children.count(children)}`]: true,
[`${classPrefix}-${direction}-${layout}`]: true,
[`${classPrefix}-${direction}-${type}`]: true,
[`${classPrefix}-${direction}-${status}`]: true,
@@ -49,7 +49,7 @@ export const Steps: FunctionComponent<
)
return (
-
+
{React.Children.map(children, (child, index) => {
if (React.isValidElement(child)) {
return React.cloneElement(child, {
@@ -61,7 +61,7 @@ export const Steps: FunctionComponent<
}
return child
})}
-
+
)
}
diff --git a/src/packages/steps/steps.tsx b/src/packages/steps/steps.tsx
index 7080fa20a5..a3caf8ee41 100644
--- a/src/packages/steps/steps.tsx
+++ b/src/packages/steps/steps.tsx
@@ -39,8 +39,7 @@ export const Steps: FunctionComponent<
classPrefix,
{
[`${classPrefix}-${direction}`]: true,
- [`${classPrefix}-${direction}-count-${React.Children.count(children)}`]:
- true,
+ [`${classPrefix}-${direction}-count-${React.Children.count(children)}`]: true,
[`${classPrefix}-${direction}-${layout}`]: true,
[`${classPrefix}-${direction}-${type}`]: true,
[`${classPrefix}-${direction}-${status}`]: true,
diff --git a/src/packages/swipe/demos/h5/demo1.tsx b/src/packages/swipe/demos/h5/demo1.tsx
index 97115480dd..1ac6ff0b30 100644
--- a/src/packages/swipe/demos/h5/demo1.tsx
+++ b/src/packages/swipe/demos/h5/demo1.tsx
@@ -9,7 +9,7 @@ const App = () => {
diff --git a/src/packages/swipe/demos/h5/demo3.tsx b/src/packages/swipe/demos/h5/demo3.tsx
index 656f22d57a..eb2c3a3e03 100644
--- a/src/packages/swipe/demos/h5/demo3.tsx
+++ b/src/packages/swipe/demos/h5/demo3.tsx
@@ -12,7 +12,7 @@ const App = () => {
diff --git a/src/packages/swipe/demos/h5/demo4.tsx b/src/packages/swipe/demos/h5/demo4.tsx
index 8e438d040e..9d129438e3 100644
--- a/src/packages/swipe/demos/h5/demo4.tsx
+++ b/src/packages/swipe/demos/h5/demo4.tsx
@@ -11,7 +11,7 @@ const App = () => {
diff --git a/src/packages/swipe/demos/h5/demo5.tsx b/src/packages/swipe/demos/h5/demo5.tsx
index a81693e073..7afe6ac52f 100644
--- a/src/packages/swipe/demos/h5/demo5.tsx
+++ b/src/packages/swipe/demos/h5/demo5.tsx
@@ -11,7 +11,7 @@ const App = () => {
diff --git a/src/packages/swipe/demos/h5/demo6.tsx b/src/packages/swipe/demos/h5/demo6.tsx
index 3815adce7a..504efbbb12 100644
--- a/src/packages/swipe/demos/h5/demo6.tsx
+++ b/src/packages/swipe/demos/h5/demo6.tsx
@@ -9,7 +9,7 @@ const App = () => {
diff --git a/src/packages/swipe/demos/h5/demo7.tsx b/src/packages/swipe/demos/h5/demo7.tsx
index 8fcdb5eb11..c83ca63569 100644
--- a/src/packages/swipe/demos/h5/demo7.tsx
+++ b/src/packages/swipe/demos/h5/demo7.tsx
@@ -14,7 +14,7 @@ const App = () => {
type="success"
style={{
alignSelf: 'stretch',
- height: 46,
+ height: '100%',
}}
>
选择
@@ -25,14 +25,14 @@ const App = () => {
diff --git a/src/packages/swipe/demos/h5/demo8.tsx b/src/packages/swipe/demos/h5/demo8.tsx
index 64759e4f61..9cbfc5688e 100644
--- a/src/packages/swipe/demos/h5/demo8.tsx
+++ b/src/packages/swipe/demos/h5/demo8.tsx
@@ -19,7 +19,7 @@ const App = () => {
@@ -29,7 +29,7 @@ const App = () => {
diff --git a/src/packages/swipe/demos/h5/demo9.tsx b/src/packages/swipe/demos/h5/demo9.tsx
index f35de4bd9f..8a35a72b43 100644
--- a/src/packages/swipe/demos/h5/demo9.tsx
+++ b/src/packages/swipe/demos/h5/demo9.tsx
@@ -10,7 +10,7 @@ const App = () => {
diff --git a/src/packages/swipe/swipe.scss b/src/packages/swipe/swipe.scss
index 7e4c86211c..4621183833 100644
--- a/src/packages/swipe/swipe.scss
+++ b/src/packages/swipe/swipe.scss
@@ -31,7 +31,9 @@
}
&-right {
+ display: flex;
//left: 100%;
+ height: 100%;
right: 0px;
transform: translate(100%, 0px);
}
diff --git a/src/packages/swipe/swipe.taro.tsx b/src/packages/swipe/swipe.taro.tsx
index 8d5dc887e7..711dee5e1a 100644
--- a/src/packages/swipe/swipe.taro.tsx
+++ b/src/packages/swipe/swipe.taro.tsx
@@ -4,17 +4,17 @@ import React, {
useCallback,
useEffect,
useImperativeHandle,
- useLayoutEffect,
+ useMemo,
useRef,
useState,
} from 'react'
import classNames from 'classnames'
import { ITouchEvent, View } from '@tarojs/components'
import { BaseEventOrig } from '@tarojs/components/types/common'
+import { nextTick, useReady } from '@tarojs/taro'
import { useTouch } from '@/hooks/use-touch'
import { getRectInMultiPlatform } from '@/utils/taro/get-rect'
import { ComponentDefaults } from '@/utils/typings'
-import { harmony } from '@/utils/taro/platform'
import { useRefState } from '@/hooks/use-ref-state'
import { useUuid } from '@/hooks/use-uuid'
import { PositionX, SwipeRef, TaroSwipeProps } from '@/types'
@@ -46,6 +46,26 @@ export const Swipe = forwardRef<
const leftId = `swipe-left-${uid}`
const rightId = `swipe-right-${uid}`
+ const getWidth = async () => {
+ if (leftWrapper.current) {
+ const leftRect = await getRectInMultiPlatform(leftWrapper.current, leftId)
+ leftRect && setActionWidth((v: any) => ({ ...v, left: leftRect.width }))
+ }
+ if (rightWrapper.current) {
+ const rightRect = await getRectInMultiPlatform(
+ rightWrapper.current,
+ rightId
+ )
+ rightRect &&
+ setActionWidth((v: any) => ({ ...v, right: rightRect.width }))
+ }
+ }
+
+ // 获取元素的时候要在页面 onReady 后,需要参考小程序的事件周期
+ useReady(() => {
+ nextTick(() => getWidth())
+ })
+
const { children, className, style } = { ...defaultProps, ...props }
const root: any = useRef
()
@@ -57,71 +77,35 @@ export const Swipe = forwardRef<
offset: 0,
dragging: false,
})
-
const [actionWidth, updateState] = useRefState({
left: 0,
right: 0,
})
- const setActionWidth = useCallback(
- (fn: any) => {
- const res = fn()
- if (res.left !== undefined) {
- updateState({
- ...actionWidth.current,
- left: res.left,
- })
- }
- if (res.right !== undefined) {
- updateState({
- ...actionWidth.current,
- right: res.right,
- })
- }
- },
- [actionWidth, updateState]
- )
-
- // 获取元素的时候要在页面 onReady 后,需要参考小程序的事件周期
- useLayoutEffect(() => {
- const getWidth = async () => {
- if (leftWrapper.current) {
- const leftRect = await getRectInMultiPlatform(
- leftWrapper.current,
- leftId
- )
- leftRect && setActionWidth((v: any) => ({ ...v, left: leftRect.width }))
- }
- if (rightWrapper.current) {
- const rightRect = await getRectInMultiPlatform(
- rightWrapper.current,
- rightId
- )
- rightRect &&
- setActionWidth((v: any) => ({ ...v, right: rightRect.width }))
- }
+ const setActionWidth = (fn: any) => {
+ const res = fn()
+ if (res.left !== undefined) {
+ updateState({
+ ...actionWidth.current,
+ left: res.left,
+ })
}
-
- getWidth()
- }, [leftId, rightId, setActionWidth])
-
- const wrapperStyle = {
- transform: `translate(${state.offset}${!harmony() ? 'px' : ''}, 0)`,
- transitionDuration: state.dragging ? '0s' : '.6s',
- }
- const onTouchStart = async (event: BaseEventOrig) => {
- if (leftWrapper.current) {
- const leftRect = await getRectInMultiPlatform(leftWrapper.current, leftId)
- leftRect && setActionWidth((v: any) => ({ ...v, left: leftRect.width }))
+ if (res.right !== undefined) {
+ updateState({
+ ...actionWidth.current,
+ right: res.right,
+ })
}
- if (rightWrapper.current) {
- const rightRect = await getRectInMultiPlatform(
- rightWrapper.current,
- rightId
- )
- rightRect &&
- setActionWidth((v: any) => ({ ...v, right: rightRect.width }))
+ }
+ const wrapperStyle = useMemo(() => {
+ return {
+ transform: `translate(${state.offset}px, 0)`,
+ transitionDuration: state.dragging ? '0.01s' : '.6s',
}
+ }, [state.offset, state.dragging])
+
+ const onTouchStart = async (event: BaseEventOrig) => {
if (!props.disabled) {
+ getWidth()
startOffset.current = state.offset
touch.start(event)
props.onTouchStart?.(event)
@@ -129,32 +113,31 @@ export const Swipe = forwardRef<
}
const onTouchMove = (event: BaseEventOrig) => {
- if (props.disabled) {
- return
- }
-
+ if (props.disabled) return
touch.move(event)
props.onTouchMove?.(event)
if (touch.isHorizontal()) {
lockClick.current = true
- const newState = { ...state, dragging: true }
const isEdge = !opened || touch.deltaX.current * startOffset.current < 0
if (isEdge) {
preventDefault(event, true)
}
-
- newState.offset = rangeCalculation(
+ const offset = rangeCalculation(
touch.deltaX.current + startOffset.current,
-actionWidth.current.right || 0,
actionWidth.current.left || 0
)
- setState(newState)
+ setState((prevState) => ({
+ ...prevState,
+ dragging: true,
+ offset: Number(offset) || 0,
+ }))
}
}
const onTouchEnd = (event: BaseEventOrig) => {
if (state.dragging) {
- setState((v) => ({ ...v, dragging: false }))
+ setState((prevState) => ({ ...prevState, dragging: false }))
toggle(state.offset > 0 ? 'left' : 'right')
setTimeout(() => {
lockClick.current = false
@@ -181,20 +164,30 @@ export const Swipe = forwardRef<
side === 'left' ? actionWidth.current.left : -actionWidth.current.right
const name = props.name as number | string
props.onOpen?.({ name, position: side })
- setState((v) => ({ ...v, offset: Number(offset) || 0 }))
- }
- const close = (position?: PositionX) => {
- if (opened.current) {
- opened.current = false
- props.onClose?.({
- name: props.name as number | string,
- position: position || 'left',
- })
- }
- setState((v) => ({ ...v, offset: 0 }))
+ setState((prevState) => ({
+ ...prevState,
+ offset: Number(offset) || 0,
+ }))
}
+ const close = useCallback(
+ (position?: PositionX) => {
+ if (opened.current) {
+ opened.current = false
+ props.onClose?.({
+ name: props.name as number | string,
+ position: position || 'left',
+ })
+ }
+ setState((prevState) => ({
+ ...prevState,
+ offset: 0,
+ }))
+ },
+ [props]
+ )
+
const rangeCalculation = (
num: number | string,
min: number | string,
@@ -238,8 +231,7 @@ export const Swipe = forwardRef<
}))
useEffect(() => {
- if (harmony()) return
-
+ // 并没有生效
const handler: any = (event: { target: Node | null }) => {
const targets = [root]
if (
@@ -254,11 +246,10 @@ export const Swipe = forwardRef<
}
document.addEventListener('touchstart', handler)
-
return () => {
document.removeEventListener('touchstart', handler)
}
- }, [])
+ }, [close])
return (
{
const [translated] = useTranslate({
@@ -23,6 +24,7 @@ const SwitchDemo = () => {
supportText: '支持文字',
supportIcon: '支持Icon',
eventTip: '触发了 onChange 事件,开关状态:',
+ supportARIA: '支持ARIA',
},
'zh-TW': {
basic: '非受控',
@@ -33,6 +35,7 @@ const SwitchDemo = () => {
supportText: '支持文字',
supportIcon: '支持Icon',
eventTip: '觸發了 onChange 事件,開關狀態:',
+ supportARIA: '支持ARIA',
},
'en-US': {
basic: 'Uncontrolled',
@@ -43,6 +46,7 @@ const SwitchDemo = () => {
supportText: 'Support Text',
supportIcon: 'Support Icon',
eventTip: 'Emit onChange event, current state:',
+ supportARIA: 'Support ARIA',
},
})
return (
@@ -65,6 +69,8 @@ const SwitchDemo = () => {
{translated.customColor}
+ {translated.supportARIA}
+
>
)
diff --git a/src/packages/switch/demo.tsx b/src/packages/switch/demo.tsx
index 758aeaf5ad..feab634de3 100644
--- a/src/packages/switch/demo.tsx
+++ b/src/packages/switch/demo.tsx
@@ -8,6 +8,7 @@ import Demo5 from './demos/h5/demo5'
import Demo6 from './demos/h5/demo6'
import Demo7 from './demos/h5/demo7'
import Demo8 from './demos/h5/demo8'
+import Demo9 from './demos/h5/demo9'
const SwitchDemo = () => {
const [translated] = useTranslate({
@@ -20,6 +21,7 @@ const SwitchDemo = () => {
supportText: '支持文字',
supportIcon: '支持Icon',
eventTip: '触发了 onChange 事件,开关状态:',
+ supportARIA: '支持ARIA',
},
'zh-TW': {
basic: '非受控',
@@ -30,6 +32,7 @@ const SwitchDemo = () => {
supportText: '支持文字',
supportIcon: '支持Icon',
eventTip: '觸發了 onChange 事件,開關狀態:',
+ supportARIA: '支持ARIA',
},
'en-US': {
basic: 'Uncontrolled',
@@ -40,6 +43,7 @@ const SwitchDemo = () => {
supportText: 'Support Text',
supportIcon: 'Support Icon',
eventTip: 'Emit onChange event, current state:',
+ supportARIA: 'Support ARIA',
},
})
return (
@@ -61,6 +65,8 @@ const SwitchDemo = () => {
{translated.customColor}
+ {translated.supportARIA}
+
>
)
diff --git a/src/packages/switch/demos/h5/demo9.tsx b/src/packages/switch/demos/h5/demo9.tsx
new file mode 100644
index 0000000000..73e61fdbdf
--- /dev/null
+++ b/src/packages/switch/demos/h5/demo9.tsx
@@ -0,0 +1,11 @@
+import React from 'react'
+import { Cell, Switch } from '@nutui/nutui-react'
+
+const Demo9 = () => {
+ return (
+