antd-mobile 5.38.1 → 5.39.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/2x/bundle/antd-mobile.cjs.development.js +158 -124
- package/2x/bundle/antd-mobile.cjs.js +7 -7
- package/2x/bundle/antd-mobile.es.development.js +158 -124
- package/2x/bundle/antd-mobile.es.js +3726 -3707
- package/2x/bundle/antd-mobile.umd.development.js +158 -124
- package/2x/bundle/antd-mobile.umd.js +7 -7
- package/2x/bundle/style.css +16 -2
- package/2x/cjs/components/calendar-picker/calendar-picker.d.ts +9 -9
- package/2x/cjs/components/calendar-picker-view/calendar-picker-view.d.ts +5 -4
- package/2x/cjs/components/calendar-picker-view/calendar-picker-view.js +18 -11
- package/2x/cjs/components/date-picker/date-picker-week-utils.js +2 -2
- package/2x/cjs/components/ellipsis/useMeasure.js +7 -3
- package/2x/cjs/components/floating-panel/floating-panel.css +16 -2
- package/2x/cjs/components/floating-panel/floating-panel.d.ts +3 -1
- package/2x/cjs/components/floating-panel/floating-panel.js +43 -30
- package/2x/cjs/components/image-uploader/image-uploader.d.ts +3 -3
- package/2x/cjs/components/image-uploader/image-uploader.js +11 -11
- package/2x/cjs/components/image-viewer/image-viewer.d.ts +13 -4
- package/2x/cjs/components/image-viewer/image-viewer.js +8 -6
- package/2x/cjs/components/image-viewer/index.d.ts +4 -1
- package/2x/cjs/components/image-viewer/slide.d.ts +5 -1
- package/2x/cjs/components/image-viewer/slide.js +10 -5
- package/2x/cjs/components/image-viewer/slides.d.ts +4 -1
- package/2x/cjs/components/image-viewer/slides.js +14 -12
- package/2x/cjs/components/passcode-input/passcode-input.d.ts +7 -5
- package/2x/cjs/components/passcode-input/passcode-input.js +7 -6
- package/2x/cjs/components/popover/popover.d.ts +2 -2
- package/2x/cjs/components/popover/popover.js +11 -11
- package/2x/cjs/components/swipe-action/swipe-action.d.ts +3 -1
- package/2x/cjs/components/swipe-action/swipe-action.js +25 -23
- package/2x/es/components/calendar-picker/calendar-picker.d.ts +9 -9
- package/2x/es/components/calendar-picker-view/calendar-picker-view.d.ts +5 -4
- package/2x/es/components/calendar-picker-view/calendar-picker-view.js +18 -11
- package/2x/es/components/date-picker/date-picker-week-utils.js +2 -2
- package/2x/es/components/ellipsis/useMeasure.js +7 -3
- package/2x/es/components/floating-panel/floating-panel.css +16 -2
- package/2x/es/components/floating-panel/floating-panel.d.ts +3 -1
- package/2x/es/components/floating-panel/floating-panel.js +31 -19
- package/2x/es/components/image-uploader/image-uploader.d.ts +3 -3
- package/2x/es/components/image-uploader/image-uploader.js +11 -11
- package/2x/es/components/image-viewer/image-viewer.d.ts +13 -4
- package/2x/es/components/image-viewer/image-viewer.js +8 -6
- package/2x/es/components/image-viewer/index.d.ts +4 -1
- package/2x/es/components/image-viewer/slide.d.ts +5 -1
- package/2x/es/components/image-viewer/slide.js +11 -6
- package/2x/es/components/image-viewer/slides.d.ts +4 -1
- package/2x/es/components/image-viewer/slides.js +6 -4
- package/2x/es/components/passcode-input/passcode-input.d.ts +7 -5
- package/2x/es/components/passcode-input/passcode-input.js +6 -5
- package/2x/es/components/popover/popover.d.ts +2 -2
- package/2x/es/components/popover/popover.js +10 -10
- package/2x/es/components/swipe-action/swipe-action.d.ts +3 -1
- package/2x/es/components/swipe-action/swipe-action.js +9 -7
- package/2x/package.json +1 -1
- package/bundle/antd-mobile.cjs.development.js +158 -124
- package/bundle/antd-mobile.cjs.js +7 -7
- package/bundle/antd-mobile.compatible.umd.js +1 -1
- package/bundle/antd-mobile.es.development.js +158 -124
- package/bundle/antd-mobile.es.js +3726 -3707
- package/bundle/antd-mobile.umd.development.js +158 -124
- package/bundle/antd-mobile.umd.js +7 -7
- package/bundle/style.css +1 -1
- package/cjs/components/calendar-picker/calendar-picker.d.ts +9 -9
- package/cjs/components/calendar-picker-view/calendar-picker-view.d.ts +5 -4
- package/cjs/components/calendar-picker-view/calendar-picker-view.js +18 -11
- package/cjs/components/date-picker/date-picker-week-utils.js +2 -2
- package/cjs/components/ellipsis/useMeasure.js +7 -3
- package/cjs/components/floating-panel/floating-panel.css +12 -2
- package/cjs/components/floating-panel/floating-panel.d.ts +3 -1
- package/cjs/components/floating-panel/floating-panel.js +43 -30
- package/cjs/components/image-uploader/image-uploader.d.ts +3 -3
- package/cjs/components/image-uploader/image-uploader.js +11 -11
- package/cjs/components/image-viewer/image-viewer.d.ts +13 -4
- package/cjs/components/image-viewer/image-viewer.js +8 -6
- package/cjs/components/image-viewer/index.d.ts +4 -1
- package/cjs/components/image-viewer/slide.d.ts +5 -1
- package/cjs/components/image-viewer/slide.js +10 -5
- package/cjs/components/image-viewer/slides.d.ts +4 -1
- package/cjs/components/image-viewer/slides.js +14 -12
- package/cjs/components/passcode-input/passcode-input.d.ts +7 -5
- package/cjs/components/passcode-input/passcode-input.js +7 -6
- package/cjs/components/popover/popover.d.ts +2 -2
- package/cjs/components/popover/popover.js +11 -11
- package/cjs/components/swipe-action/swipe-action.d.ts +3 -1
- package/cjs/components/swipe-action/swipe-action.js +25 -23
- package/es/components/calendar-picker/calendar-picker.d.ts +9 -9
- package/es/components/calendar-picker-view/calendar-picker-view.d.ts +5 -4
- package/es/components/calendar-picker-view/calendar-picker-view.js +18 -11
- package/es/components/date-picker/date-picker-week-utils.js +2 -2
- package/es/components/ellipsis/useMeasure.js +7 -3
- package/es/components/floating-panel/floating-panel.css +12 -2
- package/es/components/floating-panel/floating-panel.d.ts +3 -1
- package/es/components/floating-panel/floating-panel.js +31 -19
- package/es/components/image-uploader/image-uploader.d.ts +3 -3
- package/es/components/image-uploader/image-uploader.js +11 -11
- package/es/components/image-viewer/image-viewer.d.ts +13 -4
- package/es/components/image-viewer/image-viewer.js +8 -6
- package/es/components/image-viewer/index.d.ts +4 -1
- package/es/components/image-viewer/slide.d.ts +5 -1
- package/es/components/image-viewer/slide.js +11 -6
- package/es/components/image-viewer/slides.d.ts +4 -1
- package/es/components/image-viewer/slides.js +6 -4
- package/es/components/passcode-input/passcode-input.d.ts +7 -5
- package/es/components/passcode-input/passcode-input.js +6 -5
- package/es/components/popover/popover.d.ts +2 -2
- package/es/components/popover/popover.js +10 -10
- package/es/components/swipe-action/swipe-action.d.ts +3 -1
- package/es/components/swipe-action/swipe-action.js +9 -7
- package/package.json +1 -1
- package/umd/antd-mobile.js +1 -1
|
@@ -1,12 +1,13 @@
|
|
|
1
|
+
import { animated, useSpring } from '@react-spring/web';
|
|
2
|
+
import { useDrag } from '@use-gesture/react';
|
|
3
|
+
import { useMemoizedFn } from 'ahooks';
|
|
4
|
+
import classNames from 'classnames';
|
|
1
5
|
import React, { forwardRef, useImperativeHandle, useRef, useState } from 'react';
|
|
2
6
|
import { withNativeProps } from '../../utils/native-props';
|
|
3
|
-
import { useDrag } from '@use-gesture/react';
|
|
4
|
-
import { useSpring, animated } from '@react-spring/web';
|
|
5
|
-
import { supportsPassive } from '../../utils/supports-passive';
|
|
6
7
|
import { nearest } from '../../utils/nearest';
|
|
7
|
-
import {
|
|
8
|
+
import { supportsPassive } from '../../utils/supports-passive';
|
|
8
9
|
import { useLockScroll } from '../../utils/use-lock-scroll';
|
|
9
|
-
import {
|
|
10
|
+
import { mergeProps } from '../../utils/with-default-props';
|
|
10
11
|
const classPrefix = 'adm-floating-panel';
|
|
11
12
|
const defaultProps = {
|
|
12
13
|
handleDraggingOfContent: true
|
|
@@ -15,24 +16,26 @@ export const FloatingPanel = forwardRef((p, ref) => {
|
|
|
15
16
|
var _a, _b;
|
|
16
17
|
const props = mergeProps(defaultProps, p);
|
|
17
18
|
const {
|
|
18
|
-
anchors
|
|
19
|
+
anchors,
|
|
20
|
+
placement = 'bottom'
|
|
19
21
|
} = props;
|
|
20
22
|
const maxHeight = (_a = anchors[anchors.length - 1]) !== null && _a !== void 0 ? _a : window.innerHeight;
|
|
21
|
-
const
|
|
23
|
+
const isBottomPlacement = placement !== 'top';
|
|
24
|
+
const possibles = isBottomPlacement ? anchors.map(x => -x) : anchors;
|
|
22
25
|
const elementRef = useRef(null);
|
|
23
26
|
const headerRef = useRef(null);
|
|
24
27
|
const contentRef = useRef(null);
|
|
25
28
|
const [pulling, setPulling] = useState(false);
|
|
26
29
|
const pullingRef = useRef(false);
|
|
27
30
|
const bounds = {
|
|
28
|
-
top: possibles
|
|
29
|
-
bottom: possibles
|
|
31
|
+
top: Math.min(...possibles),
|
|
32
|
+
bottom: Math.max(...possibles)
|
|
30
33
|
};
|
|
31
34
|
const onHeightChange = useMemoizedFn((_b = props.onHeightChange) !== null && _b !== void 0 ? _b : () => {});
|
|
32
35
|
const [{
|
|
33
36
|
y
|
|
34
37
|
}, api] = useSpring(() => ({
|
|
35
|
-
y: bounds.bottom,
|
|
38
|
+
y: isBottomPlacement ? bounds.bottom : bounds.top,
|
|
36
39
|
config: {
|
|
37
40
|
tension: 300
|
|
38
41
|
},
|
|
@@ -101,25 +104,34 @@ export const FloatingPanel = forwardRef((p, ref) => {
|
|
|
101
104
|
}
|
|
102
105
|
}), [api]);
|
|
103
106
|
useLockScroll(elementRef, true);
|
|
107
|
+
const HeaderNode = React.createElement("div", {
|
|
108
|
+
className: `${classPrefix}-header`,
|
|
109
|
+
ref: headerRef
|
|
110
|
+
}, React.createElement("div", {
|
|
111
|
+
className: `${classPrefix}-bar`
|
|
112
|
+
}));
|
|
104
113
|
return withNativeProps(props, React.createElement(animated.div, {
|
|
105
114
|
ref: elementRef,
|
|
106
|
-
className: classPrefix,
|
|
115
|
+
className: classNames(classPrefix, `${classPrefix}-${placement}`),
|
|
107
116
|
style: {
|
|
108
117
|
height: Math.round(maxHeight),
|
|
109
|
-
translateY: y.to(y =>
|
|
118
|
+
translateY: y.to(y => {
|
|
119
|
+
if (isBottomPlacement) {
|
|
120
|
+
return `calc(100% + (${Math.round(y)}px))`;
|
|
121
|
+
}
|
|
122
|
+
if (placement === 'top') {
|
|
123
|
+
return `calc(-100% + (${Math.round(y)}px))`;
|
|
124
|
+
}
|
|
125
|
+
return y;
|
|
126
|
+
})
|
|
110
127
|
}
|
|
111
128
|
}, React.createElement("div", {
|
|
112
129
|
className: `${classPrefix}-mask`,
|
|
113
130
|
style: {
|
|
114
131
|
display: pulling ? 'block' : 'none'
|
|
115
132
|
}
|
|
116
|
-
}), React.createElement("div", {
|
|
117
|
-
className: `${classPrefix}-header`,
|
|
118
|
-
ref: headerRef
|
|
119
|
-
}, React.createElement("div", {
|
|
120
|
-
className: `${classPrefix}-bar`
|
|
121
|
-
})), React.createElement("div", {
|
|
133
|
+
}), isBottomPlacement && HeaderNode, React.createElement("div", {
|
|
122
134
|
className: `${classPrefix}-content`,
|
|
123
135
|
ref: contentRef
|
|
124
|
-
}, props.children)));
|
|
136
|
+
}, props.children), placement === 'top' && HeaderNode));
|
|
125
137
|
});
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
+
import type { CSSProperties, InputHTMLAttributes, ReactElement, ReactNode } from 'react';
|
|
1
2
|
import React from 'react';
|
|
2
|
-
import type { ReactNode, InputHTMLAttributes, ReactElement } from 'react';
|
|
3
3
|
import { NativeProps } from '../../utils/native-props';
|
|
4
|
-
import type { ImageProps } from '../image';
|
|
5
4
|
import { GridProps } from '../grid';
|
|
5
|
+
import type { ImageProps } from '../image';
|
|
6
6
|
export declare type TaskStatus = 'pending' | 'fail' | 'success';
|
|
7
7
|
export interface ImageUploadItem {
|
|
8
8
|
key?: string | number;
|
|
@@ -71,7 +71,7 @@ export declare const ImageUploader: React.ForwardRefExoticComponent<{
|
|
|
71
71
|
renderItem?: ((originNode: ReactElement, file: ImageUploadItem, fileList: ImageUploadItem[]) => ReactNode) | undefined;
|
|
72
72
|
} & {
|
|
73
73
|
className?: string | undefined;
|
|
74
|
-
style?: (
|
|
74
|
+
style?: (CSSProperties & Partial<Record<"--gap" | "--gap-vertical" | "--gap-horizontal" | "--cell-size", string>>) | undefined;
|
|
75
75
|
tabIndex?: number | undefined;
|
|
76
76
|
} & React.AriaAttributes & React.RefAttributes<ImageUploaderRef>>;
|
|
77
77
|
export {};
|
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
import { __awaiter } from "tslib";
|
|
2
|
-
import
|
|
2
|
+
import { useIsomorphicLayoutEffect, useSize, useUnmount } from 'ahooks';
|
|
3
3
|
import { AddOutline, CloseOutline } from 'antd-mobile-icons';
|
|
4
|
-
import {
|
|
5
|
-
import ImageViewer from '../image-viewer';
|
|
6
|
-
import PreviewItem from './preview-item';
|
|
7
|
-
import { usePropsValue } from '../../utils/use-props-value';
|
|
8
|
-
import { useIsomorphicLayoutEffect, useUnmount, useSize } from 'ahooks';
|
|
9
|
-
import Space from '../space';
|
|
10
|
-
import { withNativeProps } from '../../utils/native-props';
|
|
4
|
+
import React, { forwardRef, useImperativeHandle, useRef, useState } from 'react';
|
|
11
5
|
import { measureCSSLength } from '../../utils/measure-css-length';
|
|
6
|
+
import { withNativeProps } from '../../utils/native-props';
|
|
7
|
+
import { usePropsValue } from '../../utils/use-props-value';
|
|
8
|
+
import { mergeProps } from '../../utils/with-default-props';
|
|
12
9
|
import { useConfig } from '../config-provider';
|
|
13
10
|
import Grid from '../grid';
|
|
11
|
+
import ImageViewer from '../image-viewer';
|
|
12
|
+
import Space from '../space';
|
|
13
|
+
import PreviewItem from './preview-item';
|
|
14
14
|
const classPrefix = `adm-image-uploader`;
|
|
15
15
|
const defaultProps = {
|
|
16
16
|
disableUpload: false,
|
|
@@ -144,10 +144,10 @@ export const ImageUploader = forwardRef((p, ref) => {
|
|
|
144
144
|
return task;
|
|
145
145
|
});
|
|
146
146
|
});
|
|
147
|
-
|
|
147
|
+
console.error(e);
|
|
148
148
|
}
|
|
149
|
-
})))
|
|
150
|
-
setValue(prev => prev.concat(newVal));
|
|
149
|
+
})));
|
|
150
|
+
setValue(prev => prev.concat(newVal).filter(Boolean));
|
|
151
151
|
});
|
|
152
152
|
}
|
|
153
153
|
const imageViewerHandlerRef = useRef(null);
|
|
@@ -1,15 +1,18 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
1
|
import type { FC, ReactNode } from 'react';
|
|
2
|
+
import React from 'react';
|
|
3
3
|
import { GetContainer } from '../../utils/render-to-container';
|
|
4
4
|
import { SlidesRef } from './slides';
|
|
5
5
|
export declare type ImageViewerProps = {
|
|
6
|
-
image
|
|
6
|
+
image: string;
|
|
7
7
|
maxZoom?: number | 'auto';
|
|
8
8
|
getContainer?: GetContainer;
|
|
9
9
|
visible?: boolean;
|
|
10
10
|
onClose?: () => void;
|
|
11
11
|
afterClose?: () => void;
|
|
12
12
|
renderFooter?: (image: string) => ReactNode;
|
|
13
|
+
imageRender?: (image: string, { index }: {
|
|
14
|
+
index: number;
|
|
15
|
+
}) => ReactNode;
|
|
13
16
|
classNames?: {
|
|
14
17
|
mask?: string;
|
|
15
18
|
body?: string;
|
|
@@ -17,15 +20,21 @@ export declare type ImageViewerProps = {
|
|
|
17
20
|
};
|
|
18
21
|
export declare const ImageViewer: FC<ImageViewerProps>;
|
|
19
22
|
export declare type MultiImageViewerRef = SlidesRef;
|
|
20
|
-
export declare type MultiImageViewerProps = Omit<ImageViewerProps, 'image' | 'renderFooter'> & {
|
|
23
|
+
export declare type MultiImageViewerProps = Omit<ImageViewerProps, 'image' | 'renderFooter' | 'imageRender'> & {
|
|
21
24
|
images?: string[];
|
|
22
25
|
defaultIndex?: number;
|
|
23
26
|
onIndexChange?: (index: number) => void;
|
|
24
27
|
renderFooter?: (image: string, index: number) => ReactNode;
|
|
28
|
+
imageRender?: (image: string, { index }: {
|
|
29
|
+
index: number;
|
|
30
|
+
}) => ReactNode;
|
|
25
31
|
};
|
|
26
|
-
export declare const MultiImageViewer: React.ForwardRefExoticComponent<Omit<ImageViewerProps, "image" | "renderFooter"> & {
|
|
32
|
+
export declare const MultiImageViewer: React.ForwardRefExoticComponent<Omit<ImageViewerProps, "image" | "imageRender" | "renderFooter"> & {
|
|
27
33
|
images?: string[] | undefined;
|
|
28
34
|
defaultIndex?: number | undefined;
|
|
29
35
|
onIndexChange?: ((index: number) => void) | undefined;
|
|
30
36
|
renderFooter?: ((image: string, index: number) => ReactNode) | undefined;
|
|
37
|
+
imageRender?: ((image: string, { index }: {
|
|
38
|
+
index: number;
|
|
39
|
+
}) => ReactNode) | undefined;
|
|
31
40
|
} & React.RefAttributes<SlidesRef>>;
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import
|
|
2
|
-
import {
|
|
1
|
+
import classNames from 'classnames';
|
|
2
|
+
import React, { forwardRef, useCallback, useImperativeHandle, useRef, useState } from 'react';
|
|
3
3
|
import { renderToContainer } from '../../utils/render-to-container';
|
|
4
|
+
import { mergeProps } from '../../utils/with-default-props';
|
|
4
5
|
import Mask from '../mask';
|
|
5
6
|
import SafeArea from '../safe-area';
|
|
6
7
|
import { Slide } from './slide';
|
|
7
8
|
import { Slides } from './slides';
|
|
8
|
-
import classNames from 'classnames';
|
|
9
9
|
const classPrefix = `adm-image-viewer`;
|
|
10
10
|
const defaultProps = {
|
|
11
11
|
maxZoom: 3,
|
|
@@ -24,10 +24,11 @@ export const ImageViewer = p => {
|
|
|
24
24
|
className: (_a = props === null || props === void 0 ? void 0 : props.classNames) === null || _a === void 0 ? void 0 : _a.mask
|
|
25
25
|
}, React.createElement("div", {
|
|
26
26
|
className: classNames(`${classPrefix}-content`, (_b = props === null || props === void 0 ? void 0 : props.classNames) === null || _b === void 0 ? void 0 : _b.body)
|
|
27
|
-
}, props.image && React.createElement(Slide, {
|
|
27
|
+
}, (props.image || typeof props.imageRender === 'function') && React.createElement(Slide, {
|
|
28
28
|
image: props.image,
|
|
29
29
|
onTap: props.onClose,
|
|
30
|
-
maxZoom: props.maxZoom
|
|
30
|
+
maxZoom: props.maxZoom,
|
|
31
|
+
imageRender: props.imageRender
|
|
31
32
|
})), props.image && React.createElement("div", {
|
|
32
33
|
className: `${classPrefix}-footer`
|
|
33
34
|
}, (_c = props.renderFooter) === null || _c === void 0 ? void 0 : _c.call(props, props.image), React.createElement(SafeArea, {
|
|
@@ -71,7 +72,8 @@ export const MultiImageViewer = forwardRef((p, ref) => {
|
|
|
71
72
|
onIndexChange: onSlideChange,
|
|
72
73
|
images: props.images,
|
|
73
74
|
onTap: props.onClose,
|
|
74
|
-
maxZoom: props.maxZoom
|
|
75
|
+
maxZoom: props.maxZoom,
|
|
76
|
+
imageRender: props.imageRender
|
|
75
77
|
})), props.images && React.createElement("div", {
|
|
76
78
|
className: `${classPrefix}-footer`
|
|
77
79
|
}, (_c = props.renderFooter) === null || _c === void 0 ? void 0 : _c.call(props, props.images[index], index), React.createElement(SafeArea, {
|
|
@@ -3,11 +3,14 @@ import { showMultiImageViewer, showImageViewer, clearImageViewer } from './metho
|
|
|
3
3
|
export type { ImageViewerProps, MultiImageViewerProps, MultiImageViewerRef, } from './image-viewer';
|
|
4
4
|
export type { ImageViewerShowHandler } from './methods';
|
|
5
5
|
declare const _default: import("react").FC<import("./image-viewer").ImageViewerProps> & {
|
|
6
|
-
Multi: import("react").ForwardRefExoticComponent<Omit<import("./image-viewer").ImageViewerProps, "image" | "renderFooter"> & {
|
|
6
|
+
Multi: import("react").ForwardRefExoticComponent<Omit<import("./image-viewer").ImageViewerProps, "image" | "imageRender" | "renderFooter"> & {
|
|
7
7
|
images?: string[] | undefined;
|
|
8
8
|
defaultIndex?: number | undefined;
|
|
9
9
|
onIndexChange?: ((index: number) => void) | undefined;
|
|
10
10
|
renderFooter?: ((image: string, index: number) => import("react").ReactNode) | undefined;
|
|
11
|
+
imageRender?: ((image: string, { index }: {
|
|
12
|
+
index: number;
|
|
13
|
+
}) => import("react").ReactNode) | undefined;
|
|
11
14
|
} & import("react").RefAttributes<import("./slides").SlidesRef>> & {
|
|
12
15
|
show: typeof showMultiImageViewer;
|
|
13
16
|
};
|
|
@@ -1,10 +1,14 @@
|
|
|
1
|
-
import type { FC, MutableRefObject } from 'react';
|
|
1
|
+
import type { FC, MutableRefObject, ReactNode } from 'react';
|
|
2
2
|
declare type Props = {
|
|
3
3
|
image: string;
|
|
4
4
|
maxZoom: number | 'auto';
|
|
5
5
|
onTap?: () => void;
|
|
6
6
|
onZoomChange?: (zoom: number) => void;
|
|
7
7
|
dragLockRef?: MutableRefObject<boolean>;
|
|
8
|
+
imageRender?: (image: string, { index }: {
|
|
9
|
+
index: number;
|
|
10
|
+
}) => ReactNode;
|
|
11
|
+
index?: number;
|
|
8
12
|
};
|
|
9
13
|
export declare const Slide: FC<Props>;
|
|
10
14
|
export {};
|
|
@@ -1,15 +1,17 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { useSpring, animated } from '@react-spring/web';
|
|
1
|
+
import { animated, useSpring } from '@react-spring/web';
|
|
3
2
|
import { useSize } from 'ahooks';
|
|
4
|
-
import {
|
|
5
|
-
import { useDragAndPinch } from '../../utils/use-drag-and-pinch';
|
|
3
|
+
import React, { useRef } from 'react';
|
|
6
4
|
import { bound } from '../../utils/bound';
|
|
7
5
|
import * as mat from '../../utils/matrix';
|
|
6
|
+
import { rubberbandIfOutOfBounds } from '../../utils/rubberband';
|
|
7
|
+
import { useDragAndPinch } from '../../utils/use-drag-and-pinch';
|
|
8
8
|
const classPrefix = `adm-image-viewer`;
|
|
9
9
|
export const Slide = props => {
|
|
10
10
|
const {
|
|
11
11
|
dragLockRef,
|
|
12
|
-
maxZoom
|
|
12
|
+
maxZoom,
|
|
13
|
+
imageRender,
|
|
14
|
+
index
|
|
13
15
|
} = props;
|
|
14
16
|
const initialMartix = useRef([]);
|
|
15
17
|
const controlRef = useRef(null);
|
|
@@ -219,6 +221,9 @@ export const Slide = props => {
|
|
|
219
221
|
}
|
|
220
222
|
}
|
|
221
223
|
});
|
|
224
|
+
const customRendering = typeof imageRender === 'function' && imageRender(props.image, {
|
|
225
|
+
index
|
|
226
|
+
});
|
|
222
227
|
return React.createElement("div", {
|
|
223
228
|
className: `${classPrefix}-slide`
|
|
224
229
|
}, React.createElement("div", {
|
|
@@ -229,7 +234,7 @@ export const Slide = props => {
|
|
|
229
234
|
style: {
|
|
230
235
|
matrix
|
|
231
236
|
}
|
|
232
|
-
}, React.createElement("img", {
|
|
237
|
+
}, customRendering ? customRendering : React.createElement("img", {
|
|
233
238
|
ref: imgRef,
|
|
234
239
|
src: props.image,
|
|
235
240
|
draggable: false,
|
|
@@ -1,10 +1,13 @@
|
|
|
1
|
-
import React from 'react';
|
|
1
|
+
import React, { ReactNode } from 'react';
|
|
2
2
|
export declare type SlidesType = {
|
|
3
3
|
images: string[];
|
|
4
4
|
onTap?: () => void;
|
|
5
5
|
maxZoom: number;
|
|
6
6
|
defaultIndex: number;
|
|
7
7
|
onIndexChange?: (index: number) => void;
|
|
8
|
+
imageRender?: (image: string, { index }: {
|
|
9
|
+
index: number;
|
|
10
|
+
}) => ReactNode;
|
|
8
11
|
};
|
|
9
12
|
export declare type SlidesRef = {
|
|
10
13
|
swipeTo: (index: number, immediate?: boolean) => void;
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { animated, useSpring } from '@react-spring/web';
|
|
2
2
|
import { useDrag } from '@use-gesture/react';
|
|
3
|
-
import {
|
|
4
|
-
import { Slide } from './slide';
|
|
5
|
-
import { convertPx } from '../../utils/convert-px';
|
|
3
|
+
import React, { forwardRef, useImperativeHandle, useRef } from 'react';
|
|
6
4
|
import { bound } from '../../utils/bound';
|
|
5
|
+
import { convertPx } from '../../utils/convert-px';
|
|
6
|
+
import { Slide } from './slide';
|
|
7
7
|
const classPrefix = `adm-image-viewer`;
|
|
8
8
|
export const Slides = forwardRef((props, ref) => {
|
|
9
9
|
const slideWidth = window.innerWidth + convertPx(16);
|
|
@@ -74,6 +74,8 @@ export const Slides = forwardRef((props, ref) => {
|
|
|
74
74
|
image: image,
|
|
75
75
|
onTap: props.onTap,
|
|
76
76
|
maxZoom: props.maxZoom,
|
|
77
|
+
imageRender: props.imageRender,
|
|
78
|
+
index: index,
|
|
77
79
|
onZoomChange: zoom => {
|
|
78
80
|
if (zoom !== 1) {
|
|
79
81
|
const index = Math.round(x.get() / slideWidth);
|
|
@@ -1,19 +1,20 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
1
|
import type { ReactElement } from 'react';
|
|
2
|
+
import React from 'react';
|
|
3
3
|
import { NativeProps } from '../../utils/native-props';
|
|
4
4
|
import type { NumberKeyboardProps } from '../number-keyboard';
|
|
5
5
|
export declare type PasscodeInputProps = {
|
|
6
6
|
value?: string;
|
|
7
7
|
defaultValue?: string;
|
|
8
|
-
onChange?: (val: string) => void;
|
|
9
8
|
length?: number;
|
|
10
9
|
plain?: boolean;
|
|
11
10
|
error?: boolean;
|
|
12
11
|
caret?: boolean;
|
|
13
12
|
seperated?: boolean;
|
|
13
|
+
keyboard?: ReactElement<NumberKeyboardProps>;
|
|
14
|
+
inputMode?: 'numeric' | 'text';
|
|
14
15
|
onBlur?: () => void;
|
|
15
16
|
onFocus?: () => void;
|
|
16
|
-
|
|
17
|
+
onChange?: (val: string) => void;
|
|
17
18
|
onFill?: (val: string) => void;
|
|
18
19
|
} & NativeProps<'--cell-gap' | '--cell-size' | '--dot-size' | '--border-color' | '--border-radius'>;
|
|
19
20
|
export declare type PasscodeInputRef = {
|
|
@@ -23,15 +24,16 @@ export declare type PasscodeInputRef = {
|
|
|
23
24
|
export declare const PasscodeInput: React.ForwardRefExoticComponent<{
|
|
24
25
|
value?: string | undefined;
|
|
25
26
|
defaultValue?: string | undefined;
|
|
26
|
-
onChange?: ((val: string) => void) | undefined;
|
|
27
27
|
length?: number | undefined;
|
|
28
28
|
plain?: boolean | undefined;
|
|
29
29
|
error?: boolean | undefined;
|
|
30
30
|
caret?: boolean | undefined;
|
|
31
31
|
seperated?: boolean | undefined;
|
|
32
|
+
keyboard?: ReactElement<NumberKeyboardProps, string | React.JSXElementConstructor<any>> | undefined;
|
|
33
|
+
inputMode?: "text" | "numeric" | undefined;
|
|
32
34
|
onBlur?: (() => void) | undefined;
|
|
33
35
|
onFocus?: (() => void) | undefined;
|
|
34
|
-
|
|
36
|
+
onChange?: ((val: string) => void) | undefined;
|
|
35
37
|
onFill?: ((val: string) => void) | undefined;
|
|
36
38
|
} & {
|
|
37
39
|
className?: string | undefined;
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import React, { useState, useEffect, useRef, forwardRef, useImperativeHandle } from 'react';
|
|
2
|
-
import { mergeProps } from '../../utils/with-default-props';
|
|
3
|
-
import { withNativeProps } from '../../utils/native-props';
|
|
4
1
|
import classNames from 'classnames';
|
|
2
|
+
import React, { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
|
|
5
3
|
import { bound } from '../../utils/bound';
|
|
4
|
+
import { withNativeProps } from '../../utils/native-props';
|
|
6
5
|
import { usePropsValue } from '../../utils/use-props-value';
|
|
6
|
+
import { mergeProps } from '../../utils/with-default-props';
|
|
7
7
|
import { useConfig } from '../config-provider';
|
|
8
8
|
const classPrefix = 'adm-passcode-input';
|
|
9
9
|
const defaultProps = {
|
|
@@ -12,7 +12,8 @@ const defaultProps = {
|
|
|
12
12
|
plain: false,
|
|
13
13
|
error: false,
|
|
14
14
|
seperated: false,
|
|
15
|
-
caret: true
|
|
15
|
+
caret: true,
|
|
16
|
+
inputMode: 'numeric'
|
|
16
17
|
};
|
|
17
18
|
export const PasscodeInput = forwardRef((p, ref) => {
|
|
18
19
|
const props = mergeProps(defaultProps, p);
|
|
@@ -107,7 +108,7 @@ export const PasscodeInput = forwardRef((p, ref) => {
|
|
|
107
108
|
value: value,
|
|
108
109
|
type: 'text',
|
|
109
110
|
pattern: '[0-9]*',
|
|
110
|
-
inputMode:
|
|
111
|
+
inputMode: props.inputMode,
|
|
111
112
|
onChange: e => {
|
|
112
113
|
setValue(e.target.value.slice(0, props.length));
|
|
113
114
|
},
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
+
import type { ReactElement, ReactNode } from 'react';
|
|
1
2
|
import React from 'react';
|
|
2
|
-
import type { ReactNode, ReactElement } from 'react';
|
|
3
3
|
import { NativeProps } from '../../utils/native-props';
|
|
4
|
-
import { PropagationEvent } from '../../utils/with-stop-propagation';
|
|
5
4
|
import { GetContainer } from '../../utils/render-to-container';
|
|
5
|
+
import { PropagationEvent } from '../../utils/with-stop-propagation';
|
|
6
6
|
import { DeprecatedPlacement, Placement } from './index';
|
|
7
7
|
export declare type PopoverProps = {
|
|
8
8
|
defaultVisible?: boolean;
|
|
@@ -1,18 +1,18 @@
|
|
|
1
1
|
import { __awaiter } from "tslib";
|
|
2
|
-
import
|
|
2
|
+
import { arrow, autoUpdate, computePosition, flip, hide, limitShift, offset, shift } from '@floating-ui/dom';
|
|
3
|
+
import { useClickAway, useIsomorphicLayoutEffect } from 'ahooks';
|
|
3
4
|
import classNames from 'classnames';
|
|
5
|
+
import React, { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
|
|
6
|
+
import { convertPx } from '../../utils/convert-px';
|
|
7
|
+
import { withNativeProps } from '../../utils/native-props';
|
|
8
|
+
import { renderToContainer } from '../../utils/render-to-container';
|
|
9
|
+
import { useShouldRender } from '../../utils/should-render';
|
|
4
10
|
import { usePropsValue } from '../../utils/use-props-value';
|
|
5
11
|
import { mergeProps } from '../../utils/with-default-props';
|
|
6
|
-
import { withNativeProps } from '../../utils/native-props';
|
|
7
12
|
import { withStopPropagation } from '../../utils/with-stop-propagation';
|
|
8
13
|
import { Arrow } from './arrow';
|
|
9
|
-
import { renderToContainer } from '../../utils/render-to-container';
|
|
10
|
-
import { arrow, computePosition, flip, offset, autoUpdate, hide, shift, limitShift } from '@floating-ui/dom';
|
|
11
|
-
import { Wrapper } from './wrapper';
|
|
12
|
-
import { useShouldRender } from '../../utils/should-render';
|
|
13
|
-
import { useClickAway, useIsomorphicLayoutEffect } from 'ahooks';
|
|
14
14
|
import { normalizePlacement } from './normalize-placement';
|
|
15
|
-
import {
|
|
15
|
+
import { Wrapper } from './wrapper';
|
|
16
16
|
const classPrefix = `adm-popover`;
|
|
17
17
|
const defaultProps = {
|
|
18
18
|
placement: 'top',
|
|
@@ -124,11 +124,11 @@ export const Popover = forwardRef((p, ref) => {
|
|
|
124
124
|
}, [targetElement, props.trigger]);
|
|
125
125
|
useEffect(() => {
|
|
126
126
|
const floatingElement = floatingRef.current;
|
|
127
|
-
if (!targetElement || !floatingElement) return;
|
|
127
|
+
if (!targetElement || !floatingElement || !visible) return;
|
|
128
128
|
return autoUpdate(targetElement, floatingElement, update, {
|
|
129
129
|
elementResize: typeof ResizeObserver !== 'undefined'
|
|
130
130
|
});
|
|
131
|
-
}, [targetElement]);
|
|
131
|
+
}, [targetElement, visible]);
|
|
132
132
|
useClickAway(() => {
|
|
133
133
|
if (!props.trigger) return;
|
|
134
134
|
setVisible(false);
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
1
|
import type { ReactNode } from 'react';
|
|
2
|
+
import React from 'react';
|
|
3
3
|
import { NativeProps } from '../../utils/native-props';
|
|
4
4
|
import { PropagationEvent } from '../../utils/with-stop-propagation';
|
|
5
5
|
declare type SideType = 'left' | 'right';
|
|
@@ -23,6 +23,7 @@ export declare type SwipeActionProps = {
|
|
|
23
23
|
children: ReactNode;
|
|
24
24
|
stopPropagation?: PropagationEvent[];
|
|
25
25
|
onActionsReveal?: (side: SideType) => void;
|
|
26
|
+
onClose?: () => void;
|
|
26
27
|
} & NativeProps<'--background'>;
|
|
27
28
|
export declare const SwipeAction: React.ForwardRefExoticComponent<{
|
|
28
29
|
rightActions?: Action[] | undefined;
|
|
@@ -33,6 +34,7 @@ export declare const SwipeAction: React.ForwardRefExoticComponent<{
|
|
|
33
34
|
children: ReactNode;
|
|
34
35
|
stopPropagation?: PropagationEvent[] | undefined;
|
|
35
36
|
onActionsReveal?: ((side: SideType) => void) | undefined;
|
|
37
|
+
onClose?: (() => void) | undefined;
|
|
36
38
|
} & {
|
|
37
39
|
className?: string | undefined;
|
|
38
40
|
style?: (React.CSSProperties & Partial<Record<"--background", string>>) | undefined;
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { mergeProps } from '../../utils/with-default-props';
|
|
3
|
-
import { useSpring, animated } from '@react-spring/web';
|
|
1
|
+
import { animated, useSpring } from '@react-spring/web';
|
|
4
2
|
import { useDrag } from '@use-gesture/react';
|
|
5
|
-
import
|
|
6
|
-
import { nearest } from '../../utils/nearest';
|
|
3
|
+
import React, { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
|
|
7
4
|
import { withNativeProps } from '../../utils/native-props';
|
|
5
|
+
import { nearest } from '../../utils/nearest';
|
|
6
|
+
import { mergeProps } from '../../utils/with-default-props';
|
|
8
7
|
import { withStopPropagation } from '../../utils/with-stop-propagation';
|
|
8
|
+
import Button from '../button';
|
|
9
9
|
const classPrefix = `adm-swipe-action`;
|
|
10
10
|
const defaultProps = {
|
|
11
11
|
rightActions: [],
|
|
@@ -99,12 +99,14 @@ export const SwipeAction = forwardRef((p, ref) => {
|
|
|
99
99
|
},
|
|
100
100
|
triggerAllEvents: true
|
|
101
101
|
});
|
|
102
|
-
|
|
102
|
+
const close = () => {
|
|
103
|
+
var _a;
|
|
103
104
|
api.start({
|
|
104
105
|
x: 0
|
|
105
106
|
});
|
|
106
107
|
forceCancelDrag();
|
|
107
|
-
|
|
108
|
+
(_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props);
|
|
109
|
+
};
|
|
108
110
|
useImperativeHandle(ref, () => ({
|
|
109
111
|
show: (side = 'right') => {
|
|
110
112
|
var _a;
|