{nameDic[iconType_]}
+{nameDic[iconType_]}
)}
{props.cancelText}
diff --git a/src/components/auto-center/auto-center.tsx b/src/components/auto-center/auto-center.tsx
index bb648d9d19..1b785422f3 100644
--- a/src/components/auto-center/auto-center.tsx
+++ b/src/components/auto-center/auto-center.tsx
@@ -6,11 +6,10 @@ const classPrefix = 'adm-auto-center'
export type AutoCenterProps = { children?: ReactNode } & NativeProps
-export const AutoCenter: FC = props => {
- return withNativeProps(
+export const AutoCenter: FC = props =>
+ withNativeProps(
props,
)
-}
diff --git a/src/components/badge/badge.less b/src/components/badge/badge.less
index 99f3a54211..fe421d0746 100644
--- a/src/components/badge/badge.less
+++ b/src/components/badge/badge.less
@@ -13,7 +13,7 @@
background-color: var(--color);
--right: 0;
--top: 0;
- --color: var(--adm-badge-color, #ff411c);
+ --color: var(--adm-badge-color, var(--adm-color-highlight));
&-content {
color: var(--adm-color-text-light-solid);
diff --git a/src/components/badge/badge.tsx b/src/components/badge/badge.tsx
index cb5d005f82..9220df6c2d 100644
--- a/src/components/badge/badge.tsx
+++ b/src/components/badge/badge.tsx
@@ -21,19 +21,18 @@ export const Badge: FC = props => {
const isDot = content === dot
- const badgeCls = classNames(
- classPrefix,
- !!children && `${classPrefix}-fixed`,
- isDot && `${classPrefix}-dot`,
- props.bordered && `${classPrefix}-bordered`
- )
+ const badgeClass = classNames(classPrefix, {
+ [`${classPrefix}-fixed`]: !!children,
+ [`${classPrefix}-dot`]: isDot,
+ [`${classPrefix}-bordered`]: props.bordered,
+ })
const element =
content || content === 0
? withNativeProps(
props,
{props.children}
((p, ref) => {
onClick={handleClick}
className={classNames(
classPrefix,
- props.color ? `${classPrefix}-${props.color}` : null,
{
+ [`${classPrefix}-${props.color}`]: props.color,
[`${classPrefix}-block`]: props.block,
[`${classPrefix}-disabled`]: disabled,
[`${classPrefix}-fill-outline`]: props.fill === 'outline',
diff --git a/src/components/cascader-view/cascader-view.tsx b/src/components/cascader-view/cascader-view.tsx
index 90d5c3d749..5b4d38c058 100644
--- a/src/components/cascader-view/cascader-view.tsx
+++ b/src/components/cascader-view/cascader-view.tsx
@@ -2,7 +2,7 @@ import React, { useState, useEffect, useMemo } from 'react'
import type { FC, ReactNode } from 'react'
import classNames from 'classnames'
import Tabs from '../tabs'
-import CheckList from '../check-list'
+import CheckList, { CheckListValue } from '../check-list'
import { NativeProps, withNativeProps } from '../../utils/native-props'
import { mergeProps } from '../../utils/with-default-props'
import { usePropsValue } from '../../utils/use-props-value'
@@ -16,7 +16,7 @@ import type { FieldNamesType, BaseOptionType } from '../../hooks'
const classPrefix = `adm-cascader-view`
-export type CascaderValue = string
+export type CascaderValue = CheckListValue
export type CascaderOption = {
label?: string
diff --git a/src/components/center-popup/center-popup.tsx b/src/components/center-popup/center-popup.tsx
index 38a597b3ae..193600c029 100644
--- a/src/components/center-popup/center-popup.tsx
+++ b/src/components/center-popup/center-popup.tsx
@@ -115,7 +115,15 @@ export const CenterPopup: FC = p => {
role={props.role}
aria-label={props['aria-label']}
>
-
+
+ v === 1 ? 'unset' : 'none'
+ ),
+ }}
+ ref={ref}
+ >
{props.showCloseButton && (
& {
- value: string
+ value: CheckListValue
readOnly?: boolean
} & NativeProps
diff --git a/src/components/check-list/check-list.tsx b/src/components/check-list/check-list.tsx
index 24bd234664..c83efe1365 100644
--- a/src/components/check-list/check-list.tsx
+++ b/src/components/check-list/check-list.tsx
@@ -9,10 +9,12 @@ import { CheckOutline } from 'antd-mobile-icons'
const classPrefix = 'adm-check-list'
+export type CheckListValue = string | number
+
export type CheckListProps = Pick & {
- defaultValue?: string[]
- value?: string[]
- onChange?: (val: string[]) => void
+ defaultValue?: CheckListValue[]
+ value?: CheckListValue[]
+ onChange?: (val: CheckListValue[]) => void
multiple?: boolean
activeIcon?: ReactNode
extra?: (active: boolean) => ReactNode
@@ -32,7 +34,7 @@ export const CheckList: FC = p => {
const [value, setValue] = usePropsValue(props)
- function check(val: string) {
+ function check(val: CheckListValue) {
if (props.multiple) {
setValue([...value, val])
} else {
@@ -40,7 +42,7 @@ export const CheckList: FC = p => {
}
}
- function uncheck(val: string) {
+ function uncheck(val: CheckListValue) {
setValue(value.filter(item => item !== val))
}
diff --git a/src/components/check-list/context.tsx b/src/components/check-list/context.tsx
index f75b7cfccd..4af764ac20 100644
--- a/src/components/check-list/context.tsx
+++ b/src/components/check-list/context.tsx
@@ -1,10 +1,11 @@
+import { CheckListValue } from '.'
import { createContext } from 'react'
import type { ReactNode } from 'react'
export const CheckListContext = createContext<{
- value: string[]
- check: (val: string) => void
- uncheck: (val: string) => void
+ value: CheckListValue[]
+ check: (val: CheckListValue) => void
+ uncheck: (val: CheckListValue) => void
activeIcon?: ReactNode
extra?: (active: boolean) => ReactNode
disabled?: boolean
diff --git a/src/components/check-list/index.tsx b/src/components/check-list/index.tsx
index 20f0f77fe1..7f892a60c1 100644
--- a/src/components/check-list/index.tsx
+++ b/src/components/check-list/index.tsx
@@ -3,7 +3,7 @@ import { CheckList } from './check-list'
import { attachPropertiesToComponent } from '../../utils/attach-properties-to-component'
import { CheckListItem } from './check-list-item'
-export type { CheckListProps } from './check-list'
+export type { CheckListValue, CheckListProps } from './check-list'
export type { CheckListItemProps } from './check-list-item'
export default attachPropertiesToComponent(CheckList, {
diff --git a/src/components/checkbox/checkbox.less b/src/components/checkbox/checkbox.less
index 409e853730..5c0b5a606a 100644
--- a/src/components/checkbox/checkbox.less
+++ b/src/components/checkbox/checkbox.less
@@ -41,7 +41,7 @@
opacity: 0.4;
}
.@{class-prefix-checkbox}-icon.@{class-prefix-checkbox}-icon {
- color: #b7b7b7;
+ color: var(--adm-color-light);
border-color: var(--adm-color-light);
background-color: var(--adm-color-fill-content);
}
diff --git a/src/components/config-provider/tests/__snapshots__/config-provider.test.tsx.snap b/src/components/config-provider/tests/__snapshots__/config-provider.test.tsx.snap
index 3986cb00ea..032fdb81b8 100644
--- a/src/components/config-provider/tests/__snapshots__/config-provider.test.tsx.snap
+++ b/src/components/config-provider/tests/__snapshots__/config-provider.test.tsx.snap
@@ -60372,6 +60372,4650 @@ exports[`ConfigProvider should display the text as ru 1`] = `
`;
+exports[`ConfigProvider should display the text as tr-TR 1`] = `
+
+
+`;
+
exports[`ConfigProvider should display the text as zh-CH 1`] = `
+
+
+
+
+
+ Paz
+
+
+ Pzt
+
+
+ Sal
+
+
+ Çar
+
+
+ Per
+
+
+ Cum
+
+
+ Cmt
+
+
+
+
+
+
+ 27
+
+
+
+
+
+ 28
+
+
+
+
+
+ 1
+
+
+
+
+
+ 2
+
+
+
+
+
+ 3
+
+
+
+
+
+ 4
+
+
+
+
+
+ 5
+
+
+
+
+
+ 6
+
+
+
+
+
+ 7
+
+
+
+
+
+ 8
+
+
+
+
+
+ 9
+
+
+
+
+
+ 10
+
+
+
+
+
+ 11
+
+
+
+
+
+ 12
+
+
+
+
+
+ 13
+
+
+
+
+
+ 14
+
+
+
+
+
+ 15
+
+
+
+
+
+ 16
+
+
+
+
+
+ 17
+
+
+
+
+
+ 18
+
+
+
+
+
+ 19
+
+
+
+
+
+ 20
+
+
+
+
+
+ 21
+
+
+
+
+
+ 22
+
+
+
+
+
+ 23
+
+
+
+
+
+ 24
+
+
+
+
+
+ 25
+
+
+
+
+
+ 26
+
+
+
+
+
+ 27
+
+
+
+
+
+ 28
+
+
+
+
+
+ 29
+
+
+
+
+
+ 30
+
+
+
+
+
+ 31
+
+
+
+
+
+ 1
+
+
+
+
+
+ 2
+
+
+
+
+
+ 3
+
+
+
+
+
+ 4
+
+
+
+
+
+ 5
+
+
+
+
+
+ 6
+
+
+
+
+
+ 7
+
+
+
+
+
+ 8
+
+
+
+
+
+ 9
+
+
+
+
+
+
+
+ Date selection
+
+
+
+
+ Paz
+
+
+ Pzt
+
+
+ Sal
+
+
+ Çar
+
+
+ Per
+
+
+ Cum
+
+
+ Cmt
+
+
+
+
+
+
+ 2022/3
+
+
+
+
+
+
+
+
+
+ 1
+
+
+
+
+
+
+ 2
+
+
+
+
+
+
+ 3
+
+
+
+
+
+
+ 4
+
+
+
+
+
+
+ 5
+
+
+
+
+
+
+ 6
+
+
+
+
+
+
+ 7
+
+
+
+
+
+
+ 8
+
+
+
+
+
+
+ 9
+
+
+
+
+
+
+ 10
+
+
+
+
+
+
+ 11
+
+
+
+
+
+
+ 12
+
+
+
+
+
+
+ 13
+
+
+
+
+
+
+ 14
+
+
+
+
+
+
+ 15
+
+
+
+
+
+
+ 16
+
+
+
+
+
+
+ 17
+
+
+
+
+
+
+ 18
+
+
+
+
+
+
+ 19
+
+
+
+
+
+
+ 20
+
+
+
+
+
+
+ 21
+
+
+
+
+
+ today
+
+
+ 22
+
+
+
+
+
+
+ 23
+
+
+
+
+
+
+ 24
+
+
+
+
+
+
+ 25
+
+
+
+
+
+
+ 26
+
+
+
+
+
+
+ 27
+
+
+
+
+
+
+ 28
+
+
+
+
+
+
+ 29
+
+
+
+
+
+
+ 30
+
+
+
+
+
+
+ 31
+
+
+
+
+
+ 2022/4
+
+
+
+
+
+
+
+
+
+
+
+
+ 1
+
+
+
+
+
+
+ 2
+
+
+
+
+
+
+ 3
+
+
+
+
+
+
+ 4
+
+
+
+
+
+
+ 5
+
+
+
+
+
+
+ 6
+
+
+
+
+
+
+ 7
+
+
+
+
+
+
+ 8
+
+
+
+
+
+
+ 9
+
+
+
+
+
+
+ 10
+
+
+
+
+
+
+ 11
+
+
+
+
+
+
+ 12
+
+
+
+
+
+
+ 13
+
+
+
+
+
+
+ 14
+
+
+
+
+
+
+ 15
+
+
+
+
+
+
+ 16
+
+
+
+
+
+
+ 17
+
+
+
+
+
+
+ 18
+
+
+
+
+
+
+ 19
+
+
+
+
+
+
+ 20
+
+
+
+
+
+
+ 21
+
+
+
+
+
+
+ 22
+
+
+
+
+
+
+ 23
+
+
+
+
+
+
+ 24
+
+
+
+
+
+
+ 25
+
+
+
+
+
+
+ 26
+
+
+
+
+
+
+ 27
+
+
+
+
+
+
+ 28
+
+
+
+
+
+
+ 29
+
+
+
+
+
+
+ 30
+
+
+
+
+
+ 2022/5
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 1
+
+
+
+
+
+
+ 2
+
+
+
+
+
+
+ 3
+
+
+
+
+
+
+ 4
+
+
+
+
+
+
+ 5
+
+
+
+
+
+
+ 6
+
+
+
+
+
+
+ 7
+
+
+
+
+
+
+ 8
+
+
+
+
+
+
+ 9
+
+
+
+
+
+
+ 10
+
+
+
+
+
+
+ 11
+
+
+
+
+
+
+ 12
+
+
+
+
+
+
+ 13
+
+
+
+
+
+
+ 14
+
+
+
+
+
+
+ 15
+
+
+
+
+
+
+ 16
+
+
+
+
+
+
+ 17
+
+
+
+
+
+
+ 18
+
+
+
+
+
+
+ 19
+
+
+
+
+
+
+ 20
+
+
+
+
+
+
+ 21
+
+
+
+
+
+
+ 22
+
+
+
+
+
+
+ 23
+
+
+
+
+
+
+ 24
+
+
+
+
+
+
+ 25
+
+
+
+
+
+
+ 26
+
+
+
+
+
+
+ 27
+
+
+
+
+
+
+ 28
+
+
+
+
+
+
+ 29
+
+
+
+
+
+
+ 30
+
+
+
+
+
+
+ 31
+
+
+
+
+
+ 2022/6
+
+
+
+
+
+
+
+
+
+
+ 1
+
+
+
+
+
+
+ 2
+
+
+
+
+
+
+ 3
+
+
+
+
+
+
+ 4
+
+
+
+
+
+
+ 5
+
+
+
+
+
+
+ 6
+
+
+
+
+
+
+ 7
+
+
+
+
+
+
+ 8
+
+
+
+
+
+
+ 9
+
+
+
+
+
+
+ 10
+
+
+
+
+
+
+ 11
+
+
+
+
+
+
+ 12
+
+
+
+
+
+
+ 13
+
+
+
+
+
+
+ 14
+
+
+
+
+
+
+ 15
+
+
+
+
+
+
+ 16
+
+
+
+
+
+
+ 17
+
+
+
+
+
+
+ 18
+
+
+
+
+
+
+ 19
+
+
+
+
+
+
+ 20
+
+
+
+
+
+
+ 21
+
+
+
+
+
+
+ 22
+
+
+
+
+
+
+ 23
+
+
+
+
+
+
+ 24
+
+
+
+
+
+
+ 25
+
+
+
+
+
+
+ 26
+
+
+
+
+
+
+ 27
+
+
+
+
+
+
+ 28
+
+
+
+
+
+
+ 29
+
+
+
+
+
+
+ 30
+
+
+
+
+
+ 2022/7
+
+
+
+
+
+
+
+
+
+
+
+
+ 1
+
+
+
+
+
+
+ 2
+
+
+
+
+
+
+ 3
+
+
+
+
+
+
+ 4
+
+
+
+
+
+
+ 5
+
+
+
+
+
+
+ 6
+
+
+
+
+
+
+ 7
+
+
+
+
+
+
+ 8
+
+
+
+
+
+
+ 9
+
+
+
+
+
+
+ 10
+
+
+
+
+
+
+ 11
+
+
+
+
+
+
+ 12
+
+
+
+
+
+
+ 13
+
+
+
+
+
+
+ 14
+
+
+
+
+
+
+ 15
+
+
+
+
+
+
+ 16
+
+
+
+
+
+
+ 17
+
+
+
+
+
+
+ 18
+
+
+
+
+
+
+ 19
+
+
+
+
+
+
+ 20
+
+
+
+
+
+
+ 21
+
+
+
+
+
+
+ 22
+
+
+
+
+
+
+ 23
+
+
+
+
+
+
+ 24
+
+
+
+
+
+
+ 25
+
+
+
+
+
+
+ 26
+
+
+
+
+
+
+ 27
+
+
+
+
+
+
+ 28
+
+
+
+
+
+
+ 29
+
+
+
+
+
+
+ 30
+
+
+
+
+
+
+ 31
+
+
+
+
+
+ 2022/8
+
+
+
+
+
+
+
+
+ 1
+
+
+
+
+
+
+ 2
+
+
+
+
+
+
+ 3
+
+
+
+
+
+
+ 4
+
+
+
+
+
+
+ 5
+
+
+
+
+
+
+ 6
+
+
+
+
+
+
+ 7
+
+
+
+
+
+
+ 8
+
+
+
+
+
+
+ 9
+
+
+
+
+
+
+ 10
+
+
+
+
+
+
+ 11
+
+
+
+
+
+
+ 12
+
+
+
+
+
+
+ 13
+
+
+
+
+
+
+ 14
+
+
+
+
+
+
+ 15
+
+
+
+
+
+
+ 16
+
+
+
+
+
+
+ 17
+
+
+
+
+
+
+ 18
+
+
+
+
+
+
+ 19
+
+
+
+
+
+
+ 20
+
+
+
+
+
+
+ 21
+
+
+
+
+
+
+ 22
+
+
+
+
+
+
+ 23
+
+
+
+
+
+
+ 24
+
+
+
+
+
+
+ 25
+
+
+
+
+
+
+ 26
+
+
+
+
+
+
+ 27
+
+
+
+
+
+
+ 28
+
+
+
+
+
+
+ 29
+
+
+
+
+
+
+ 30
+
+
+
+
+
+
+ 31
+
+
+
+
+
+ 2022/9
+
+
+
+
+
+
+
+
+
+
+
+ 1
+
+
+
+
+
+
+ 2
+
+
+
+
+
+
+ 3
+
+
+
+
+
+
+ 4
+
+
+
+
+
+
+ 5
+
+
+
+
+
+
+ 6
+
+
+
+
+
+
+ 7
+
+
+
+
+
+
+ 8
+
+
+
+
+
+
+ 9
+
+
+
+
+
+
+ 10
+
+
+
+
+
+
+ 11
+
+
+
+
+
+
+ 12
+
+
+
+
+
+
+ 13
+
+
+
+
+
+
+ 14
+
+
+
+
+
+
+ 15
+
+
+
+
+
+
+ 16
+
+
+
+
+
+
+ 17
+
+
+
+
+
+
+ 18
+
+
+
+
+
+
+ 19
+
+
+
+
+
+
+ 20
+
+
+
+
+
+
+ 21
+
+
+
+
+
+
+ 22
+
+
+
+
+
+
+ 23
+
+
+
+
+
+
+ 24
+
+
+
+
+
+
+ 25
+
+
+
+
+
+
+ 26
+
+
+
+
+
+
+ 27
+
+
+
+
+
+
+ 28
+
+
+
+
+
+
+ 29
+
+
+
+
+
+
+ 30
+
+
+
+
+
+
+
+
+
+
+
+
+ Hata, sanırım bir şeyler ters gitti
+
+
+ Lütfen bir dakika bekleyip tekrar deneyin
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+
+ {
diff --git a/src/components/ellipsis/ellipsis.tsx b/src/components/ellipsis/ellipsis.tsx
index 84153347aa..08d966035c 100644
--- a/src/components/ellipsis/ellipsis.tsx
+++ b/src/components/ellipsis/ellipsis.tsx
@@ -75,7 +75,6 @@ export const Ellipsis: FC = p => {
container.style.minHeight = 'auto'
container.style.maxHeight = 'auto'
container.style.textOverflow = 'clip'
- container.style.whiteSpace = 'normal'
container.style.webkitLineClamp = 'unset'
container.style.display = 'block'
diff --git a/src/components/ellipsis/tests/ellipsis.test.tsx b/src/components/ellipsis/tests/ellipsis.test.tsx
index 763afca207..fdb89ed8bd 100644
--- a/src/components/ellipsis/tests/ellipsis.test.tsx
+++ b/src/components/ellipsis/tests/ellipsis.test.tsx
@@ -151,4 +151,22 @@ describe('Ellipsis', () => {
fireEvent.click(getByText('expand'))
expect(getByText('collapse')).toBeInTheDocument()
})
+
+ test('the `whiteSpace` style of the calc container should be the same as Ellipsis', () => {
+ let container: Element | null = null
+ Object.defineProperty(HTMLElement.prototype, 'removeChild', {
+ value: (child: Element) => {
+ container = child
+ },
+ })
+ render(
+ = p => {
{props.image && (
{
- props.onClose?.()
- }}
+ onTap={props.onClose}
maxZoom={props.maxZoom}
/>
)}
@@ -99,11 +97,12 @@ export const MultiImageViewer = forwardRef<
}))
const onSlideChange = useCallback(
- (index: number) => {
- setIndex(index)
- props.onIndexChange?.(index)
+ (newIndex: number) => {
+ if (newIndex === index) return
+ setIndex(newIndex)
+ props.onIndexChange?.(newIndex)
},
- [props.onIndexChange]
+ [props.onIndexChange, index]
)
const node = (
@@ -121,9 +120,7 @@ export const MultiImageViewer = forwardRef<
defaultIndex={index}
onIndexChange={onSlideChange}
images={props.images}
- onTap={() => {
- props.onClose?.()
- }}
+ onTap={props.onClose}
maxZoom={props.maxZoom}
/>
)}
diff --git a/src/components/image-viewer/slide.tsx b/src/components/image-viewer/slide.tsx
index d29fe97ba2..50e680fa14 100644
--- a/src/components/image-viewer/slide.tsx
+++ b/src/components/image-viewer/slide.tsx
@@ -13,13 +13,14 @@ const classPrefix = `adm-image-viewer`
type Props = {
image: string
maxZoom: number | 'auto'
- onTap: () => void
+ onTap?: () => void
onZoomChange?: (zoom: number) => void
dragLockRef?: MutableRefObject
}
export const Slide: FC = props => {
const { dragLockRef, maxZoom } = props
+ const initialMartix = useRef([])
const controlRef = useRef(null)
const imgRef = useRef(null)
const [{ matrix }, api] = useSpring(() => ({
@@ -32,6 +33,83 @@ export const Slide: FC = props => {
const pinchLockRef = useRef(false)
+ /**
+ * Calculate the min and max value of x and y
+ */
+ const getMinAndMax = (
+ nextMatrix: Matrix
+ ): {
+ x: {
+ position: number
+ minX: number
+ maxX: number
+ }
+ y: {
+ position: number
+ minY: number
+ maxY: number
+ }
+ } => {
+ if (!controlSize || !imgSize)
+ return {
+ x: {
+ position: 0,
+ minX: 0,
+ maxX: 0,
+ },
+ y: {
+ position: 0,
+ minY: 0,
+ maxY: 0,
+ },
+ }
+ const controlLeft = -controlSize.width / 2
+ const controlTop = -controlSize.height / 2
+
+ const imgLeft = -imgSize.width / 2
+ const imgTop = -imgSize.height / 2
+
+ const zoom = mat.getScaleX(nextMatrix)
+ const scaledImgWidth = zoom * imgSize.width
+ const scaledImgHeight = zoom * imgSize.height
+
+ const minX = controlLeft - (scaledImgWidth - controlSize.width)
+ const maxX = controlLeft
+
+ const minY = controlTop - (scaledImgHeight - controlSize.height)
+ const maxY = controlTop
+
+ const [x, y] = mat.apply(nextMatrix, [imgLeft, imgTop])
+
+ return {
+ x: {
+ position: x,
+ minX,
+ maxX,
+ },
+ y: {
+ position: y,
+ minY,
+ maxY,
+ },
+ }
+ }
+
+ /**
+ * Check if is reach the bound
+ */
+ const getReachBound = (
+ position: number,
+ min: number,
+ max: number,
+ buffer = 0
+ ) => {
+ return [position <= min - buffer, position >= max + buffer]
+ }
+
+ /**
+ * Limit the matrix in the bound
+ */
const boundMatrix = (
nextMatrix: Matrix,
type: 'translate' | 'scale',
@@ -39,22 +117,19 @@ export const Slide: FC = props => {
): Matrix => {
if (!controlSize || !imgSize) return nextMatrix
- const controlLeft = -controlSize.width / 2
- const controlTop = -controlSize.height / 2
- const imgLeft = -imgSize.width / 2
- const imgTop = -imgSize.height / 2
-
const zoom = mat.getScaleX(nextMatrix)
const scaledImgWidth = zoom * imgSize.width
const scaledImgHeight = zoom * imgSize.height
- const [x, y] = mat.apply(nextMatrix, [imgLeft, imgTop])
+
+ const {
+ x: { position: x, minX, maxX },
+ y: { position: y, minY, maxY },
+ } = getMinAndMax(nextMatrix)
if (type === 'translate') {
let boundedX = x
let boundedY = y
if (scaledImgWidth > controlSize.width) {
- const minX = controlLeft - (scaledImgWidth - controlSize.width)
- const maxX = controlLeft
boundedX = last
? bound(x, minX, maxX)
: rubberbandIfOutOfBounds(x, minX, maxX, zoom * 50)
@@ -63,8 +138,6 @@ export const Slide: FC = props => {
}
if (scaledImgHeight > controlSize.height) {
- const minY = controlTop - (scaledImgHeight - controlSize.height)
- const maxY = controlTop
boundedY = last
? bound(y, minY, maxY)
: rubberbandIfOutOfBounds(y, minY, maxY, zoom * 50)
@@ -78,18 +151,10 @@ export const Slide: FC = props => {
if (type === 'scale' && last) {
const [boundedX, boundedY] = [
scaledImgWidth > controlSize.width
- ? bound(
- x,
- controlLeft - (scaledImgWidth - controlSize.width),
- controlLeft
- )
+ ? bound(x, minX, maxX)
: -scaledImgWidth / 2,
scaledImgHeight > controlSize.height
- ? bound(
- y,
- controlTop - (scaledImgHeight - controlSize.height),
- controlTop
- )
+ ? bound(y, minY, maxY)
: -scaledImgHeight / 2,
]
return mat.translate(nextMatrix, boundedX - x, boundedY - y)
@@ -101,15 +166,20 @@ export const Slide: FC = props => {
useDragAndPinch(
{
onDrag: state => {
- if (state.first) return
+ if (state.first) {
+ const {
+ x: { position: x, minX, maxX },
+ } = getMinAndMax(matrix.get())
+ initialMartix.current = getReachBound(x, minX, maxX)
+ return
+ }
if (state.pinching) return state.cancel()
if (state.tap && state.elapsedTime > 0 && state.elapsedTime < 1000) {
// 判断点击时间>0是为了过滤掉非正常操作，例如用户长按选择图片之后的取消操作（也是一次点击）
- props.onTap()
+ props.onTap?.()
return
}
-
const currentZoom = mat.getScaleX(matrix.get())
if (dragLockRef) {
dragLockRef.current = currentZoom !== 1
@@ -139,6 +209,23 @@ export const Slide: FC = props => {
matrix: boundMatrix(nextMatrix, 'translate', state.last),
immediate: !state.last,
})
+
+ const {
+ x: { position: x, minX, maxX },
+ } = getMinAndMax(nextMatrix)
+ if (
+ state.last &&
+ initialMartix.current.some(i => i) &&
+ getReachBound(x, minX, maxX).some(i => i)
+ ) {
+ if (dragLockRef) {
+ dragLockRef.current = false
+ }
+
+ api.start({
+ matrix: mat.create(),
+ })
+ }
}
},
onPinch: state => {
@@ -182,12 +269,10 @@ export const Slide: FC = props => {
)
nextMatrix = mat.scale(nextMatrix, nextZoom / currentZoom)
nextMatrix = mat.translate(nextMatrix, originOffsetX, originOffsetY)
-
api.start({
matrix: boundMatrix(nextMatrix, 'scale', state.last),
immediate: !state.last,
})
-
if (dragLockRef) {
dragLockRef.current = true
}
@@ -211,14 +296,7 @@ export const Slide: FC = props => {
)
return (
-
{
- if (mat.getScaleX(matrix.get()) !== 1) {
- e.stopPropagation()
- }
- }}
- >
+
void
+ onTap?: () => void
maxZoom: number
defaultIndex: number
onIndexChange?: (index: number) => void
@@ -67,12 +67,10 @@ export const Slides = forwardRef((props, ref) => {
{
transform: ([x, y]) => [-x, y],
from: () => [x.get(), 0],
- bounds: () => {
- return {
- left: 0,
- right: (count - 1) * slideWidth,
- }
- },
+ bounds: () => ({
+ left: 0,
+ right: (count - 1) * slideWidth,
+ }),
rubberband: true,
axis: 'x',
pointer: { touch: true },
diff --git a/src/components/image-viewer/tests/__snapshots__/image-viewer.test.tsx.snap b/src/components/image-viewer/tests/__snapshots__/image-viewer.test.tsx.snap
index eed59bddde..20c54a4c12 100644
--- a/src/components/image-viewer/tests/__snapshots__/image-viewer.test.tsx.snap
+++ b/src/components/image-viewer/tests/__snapshots__/image-viewer.test.tsx.snap
@@ -110,9 +110,9 @@ exports[`ImageViewer.Multi calling ref.current.swipeTo before initialization 2`]
style="transform: matrix(1,0,0,1,0,0);"
>
diff --git a/src/components/image-viewer/tests/image-viewer.test.tsx b/src/components/image-viewer/tests/image-viewer.test.tsx
index 0fa411ac04..9e85d70f98 100644
--- a/src/components/image-viewer/tests/image-viewer.test.tsx
+++ b/src/components/image-viewer/tests/image-viewer.test.tsx
@@ -11,14 +11,14 @@ import {
} from 'testing'
import ImageViewer, { MultiImageViewerRef } from '../index'
import Button from '../../button'
-
+import image from './image.json'
const classPrefix = `adm-image-viewer`
const demoImages = [
'https://images.unsplash.com/photo-1620476214170-1d8080f65cdb?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=3150&q=80',
'https://images.unsplash.com/photo-1601128533718-374ffcca299b?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=3128&q=80',
'https://images.unsplash.com/photo-1567945716310-4745a6b7844b?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=3113&q=80',
- 'https://images.unsplash.com/photo-1624993590528-4ee743c9896e?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=200&h=1000&q=80',
+ `data:image/avif;base64,${image.content}`,
]
const G = global as any
@@ -87,49 +87,6 @@ jest.mock('../../../utils/use-drag-and-pinch', () => {
}
})
-describe('ImageViewer', () => {
- test('a11y', async () => {
- await testA11y( = p => {
{isNodeWithContent(description) ? (
{description}
) : null}
- {details.length ? (
+ {details?.length ? (
{(collapse ? details.slice(0, 3) : details).map((detail, index) => {
return (
@@ -118,35 +118,37 @@ export const ResultPage: FC = p => {
)
}
diff --git a/src/components/result-page/tests/result-page.test.tsx b/src/components/result-page/tests/result-page.test.tsx
new file mode 100644
index 0000000000..d34b804a88
--- /dev/null
+++ b/src/components/result-page/tests/result-page.test.tsx
@@ -0,0 +1,44 @@
+import React from 'react'
+import { render, screen } from 'testing'
+import ResultPage from '..'
+
+const classPrefix = 'adm-result-page'
+
+describe('ResultPage', () => {
+ test('renders with success status', () => {
+ render(
+ {props.children}
-
- {showSecondaryButton && (
-
- )}
- {showPrimaryButton && showSecondaryButton && (
-
- )}
- {showPrimaryButton && (
-
- )}
-
+ {(showPrimaryButton || showSecondaryButton) && (
+
+ {showSecondaryButton && (
+
+ )}
+ {showPrimaryButton && showSecondaryButton && (
+
+ )}
+ {showPrimaryButton && (
+
+ )}
+
+ )}