@douyinfe/semi-ui 2.50.0-alpha.1 → 2.50.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/dist/css/semi.css +3 -0
- package/dist/css/semi.min.css +1 -1
- package/dist/umd/semi-ui.js +523 -416
- package/dist/umd/semi-ui.js.map +1 -1
- package/dist/umd/semi-ui.min.js +1 -1
- package/dist/umd/semi-ui.min.js.map +1 -1
- package/lib/cjs/datePicker/yearAndMonth.js +1 -5
- package/lib/cjs/form/baseForm.d.ts +1 -1
- package/lib/cjs/form/field.d.ts +1 -1
- package/lib/cjs/image/interface.d.ts +3 -3
- package/lib/cjs/image/previewFooter.js +5 -8
- package/lib/cjs/image/previewHeader.d.ts +2 -2
- package/lib/cjs/image/previewHeader.js +9 -8
- package/lib/cjs/image/previewImage.d.ts +1 -12
- package/lib/cjs/image/previewImage.js +23 -83
- package/lib/cjs/image/previewInner.d.ts +12 -3
- package/lib/cjs/image/previewInner.js +65 -44
- package/lib/cjs/index.d.ts +2 -0
- package/lib/cjs/index.js +14 -0
- package/lib/cjs/notification/index.js +6 -5
- package/lib/cjs/select/index.d.ts +1 -1
- package/lib/cjs/timePicker/TimePicker.d.ts +1 -1
- package/lib/cjs/treeSelect/index.d.ts +2 -2
- package/lib/cjs/treeSelect/index.js +117 -29
- package/lib/es/datePicker/yearAndMonth.js +1 -5
- package/lib/es/form/baseForm.d.ts +1 -1
- package/lib/es/form/field.d.ts +1 -1
- package/lib/es/image/interface.d.ts +3 -3
- package/lib/es/image/previewFooter.js +5 -8
- package/lib/es/image/previewHeader.d.ts +2 -2
- package/lib/es/image/previewHeader.js +4 -3
- package/lib/es/image/previewImage.d.ts +1 -12
- package/lib/es/image/previewImage.js +23 -83
- package/lib/es/image/previewInner.d.ts +12 -3
- package/lib/es/image/previewInner.js +65 -44
- package/lib/es/index.d.ts +2 -0
- package/lib/es/index.js +2 -0
- package/lib/es/notification/index.js +6 -5
- package/lib/es/select/index.d.ts +1 -1
- package/lib/es/timePicker/TimePicker.d.ts +1 -1
- package/lib/es/treeSelect/index.d.ts +2 -2
- package/lib/es/treeSelect/index.js +118 -30
- package/package.json +8 -8
|
@@ -6,38 +6,14 @@ import Spin from "../spin";
|
|
|
6
6
|
import PreviewImageFoundation from '@douyinfe/semi-foundation/lib/es/image/previewImageFoundation';
|
|
7
7
|
const prefixCls = cssClasses.PREFIX;
|
|
8
8
|
const preViewImgPrefixCls = `${prefixCls}-preview-image`;
|
|
9
|
-
let originImageWidth = null;
|
|
10
|
-
let originImageHeight = null;
|
|
11
|
-
let startMouseMove = false;
|
|
12
|
-
// startMouseOffset:The offset of the mouse relative to the left and top of the picture
|
|
13
|
-
let startMouseOffset = {
|
|
14
|
-
x: 0,
|
|
15
|
-
y: 0
|
|
16
|
-
};
|
|
17
9
|
export default class PreviewImage extends BaseComponent {
|
|
18
10
|
get adapter() {
|
|
19
11
|
return Object.assign(Object.assign({}, super.adapter), {
|
|
20
|
-
getOriginImageSize: () => ({
|
|
21
|
-
originImageWidth,
|
|
22
|
-
originImageHeight
|
|
23
|
-
}),
|
|
24
|
-
setOriginImageSize: size => {
|
|
25
|
-
originImageWidth = size.originImageWidth;
|
|
26
|
-
originImageHeight = size.originImageHeight;
|
|
27
|
-
},
|
|
28
12
|
getContainer: () => {
|
|
29
13
|
return this.containerRef.current;
|
|
30
14
|
},
|
|
31
15
|
getImage: () => {
|
|
32
|
-
return this.imageRef;
|
|
33
|
-
},
|
|
34
|
-
getMouseMove: () => startMouseMove,
|
|
35
|
-
setStartMouseMove: move => {
|
|
36
|
-
startMouseMove = move;
|
|
37
|
-
},
|
|
38
|
-
getMouseOffset: () => startMouseOffset,
|
|
39
|
-
setStartMouseOffset: offset => {
|
|
40
|
-
startMouseOffset = offset;
|
|
16
|
+
return this.imageRef.current;
|
|
41
17
|
},
|
|
42
18
|
setLoading: loading => {
|
|
43
19
|
this.setState({
|
|
@@ -45,7 +21,7 @@ export default class PreviewImage extends BaseComponent {
|
|
|
45
21
|
});
|
|
46
22
|
},
|
|
47
23
|
setImageCursor: canDrag => {
|
|
48
|
-
this.imageRef.style.cursor = canDrag ? "grab" : "default";
|
|
24
|
+
this.imageRef.current.style.cursor = canDrag ? "grab" : "default";
|
|
49
25
|
}
|
|
50
26
|
});
|
|
51
27
|
}
|
|
@@ -54,52 +30,22 @@ export default class PreviewImage extends BaseComponent {
|
|
|
54
30
|
this.onWindowResize = () => {
|
|
55
31
|
this.foundation.handleWindowResize();
|
|
56
32
|
};
|
|
57
|
-
this.handleZoomChange = (newZoom, e) => {
|
|
58
|
-
this.foundation.handleZoomChange(newZoom, e);
|
|
59
|
-
};
|
|
60
33
|
// Determine the response method of right click according to the disableDownload parameter in props
|
|
61
34
|
this.handleRightClickImage = e => {
|
|
62
35
|
this.foundation.handleRightClickImage(e);
|
|
63
36
|
};
|
|
64
|
-
this.handleWheel = e => {
|
|
65
|
-
this.foundation.handleWheel(e);
|
|
66
|
-
};
|
|
67
37
|
this.handleLoad = e => {
|
|
68
38
|
this.foundation.handleLoad(e);
|
|
69
39
|
};
|
|
70
40
|
this.handleError = e => {
|
|
71
41
|
this.foundation.handleError(e);
|
|
72
42
|
};
|
|
73
|
-
this.resizeImage = () => {
|
|
74
|
-
this.foundation.handleResizeImage();
|
|
75
|
-
};
|
|
76
43
|
this.handleMoveImage = e => {
|
|
77
44
|
this.foundation.handleMoveImage(e);
|
|
78
45
|
};
|
|
79
|
-
// 为什么通过ref注册wheel而不是使用onWheel事件?
|
|
80
|
-
// 因为对于wheel事件,浏览器将 addEventListener 的 passive 默认值更改为 true。如此,事件监听器便不能取消事件,也不会在用户滚动页面时阻止页面呈现。
|
|
81
|
-
// 这里我们需要保持页面不动,仅放大图片,因此此处需要将 passive 更改设置为 false。
|
|
82
|
-
// Why register wheel via ref instead of using onWheel event?
|
|
83
|
-
// Because for wheel events, the browser changes the passive default of addEventListener to true. This way, the event listener cannot cancel the event, nor prevent the page from rendering when the user scrolls.
|
|
84
|
-
// Here we need to keep the page still and only zoom in on the image, so here we need to set the passive change to false.
|
|
85
|
-
// https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#improving_scrolling_performance_with_passive_listeners。
|
|
86
|
-
this.registryImageRef = ref => {
|
|
87
|
-
if (this.imageRef) {
|
|
88
|
-
this.imageRef.removeEventListener("wheel", this.handleWheel);
|
|
89
|
-
}
|
|
90
|
-
if (ref) {
|
|
91
|
-
ref.addEventListener("wheel", this.handleWheel, {
|
|
92
|
-
passive: false
|
|
93
|
-
});
|
|
94
|
-
}
|
|
95
|
-
this.imageRef = ref;
|
|
96
|
-
};
|
|
97
46
|
this.onImageMouseDown = e => {
|
|
98
47
|
this.foundation.handleImageMouseDown(e);
|
|
99
48
|
};
|
|
100
|
-
this.onImageMouseUp = () => {
|
|
101
|
-
this.foundation.handleImageMouseUp();
|
|
102
|
-
};
|
|
103
49
|
this.state = {
|
|
104
50
|
width: 0,
|
|
105
51
|
height: 0,
|
|
@@ -113,7 +59,7 @@ export default class PreviewImage extends BaseComponent {
|
|
|
113
59
|
left: 0
|
|
114
60
|
};
|
|
115
61
|
this.containerRef = /*#__PURE__*/React.createRef();
|
|
116
|
-
this.imageRef =
|
|
62
|
+
this.imageRef = /*#__PURE__*/React.createRef();
|
|
117
63
|
this.foundation = new PreviewImageFoundation(this.adapter);
|
|
118
64
|
}
|
|
119
65
|
componentDidMount() {
|
|
@@ -124,27 +70,22 @@ export default class PreviewImage extends BaseComponent {
|
|
|
124
70
|
}
|
|
125
71
|
componentDidUpdate(prevProps, prevStates) {
|
|
126
72
|
// If src changes, start a new loading
|
|
127
|
-
|
|
73
|
+
const zoomChange = "zoom" in this.props && this.props.zoom !== this.state.currZoom;
|
|
74
|
+
const srcChange = this.props.src && this.props.src !== prevProps.src;
|
|
75
|
+
if (srcChange) {
|
|
128
76
|
this.foundation.setLoading(true);
|
|
129
77
|
}
|
|
130
78
|
// If the incoming zoom changes, other content changes are determined based on the new zoom value
|
|
131
|
-
if (
|
|
132
|
-
this.
|
|
79
|
+
if (zoomChange) {
|
|
80
|
+
this.foundation.calculatePreviewImage(this.props.zoom, null);
|
|
133
81
|
}
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
} else {
|
|
141
|
-
this.props.onZoom(1);
|
|
142
|
-
}
|
|
82
|
+
if (!zoomChange && !srcChange && prevProps) {
|
|
83
|
+
if ("ratio" in this.props && this.props.ratio !== prevProps.ratio) {
|
|
84
|
+
this.foundation.handleRatioChange();
|
|
85
|
+
}
|
|
86
|
+
if ("rotation" in this.props && this.props.rotation !== prevProps.rotation) {
|
|
87
|
+
this.onWindowResize();
|
|
143
88
|
}
|
|
144
|
-
}
|
|
145
|
-
// When the incoming rotation angle of the image changes, it needs to be resized to make the image fit on the page
|
|
146
|
-
if ("rotation" in this.props && this.props.rotation !== prevProps.rotation) {
|
|
147
|
-
this.onWindowResize();
|
|
148
89
|
}
|
|
149
90
|
}
|
|
150
91
|
render() {
|
|
@@ -166,21 +107,20 @@ export default class PreviewImage extends BaseComponent {
|
|
|
166
107
|
transform: `rotate(${-rotation}deg)`,
|
|
167
108
|
top,
|
|
168
109
|
left,
|
|
169
|
-
width
|
|
170
|
-
height
|
|
110
|
+
width,
|
|
111
|
+
height
|
|
171
112
|
};
|
|
172
113
|
return /*#__PURE__*/React.createElement("div", {
|
|
173
114
|
className: `${preViewImgPrefixCls}`,
|
|
174
115
|
ref: this.containerRef
|
|
175
116
|
}, /*#__PURE__*/React.createElement("img", {
|
|
176
|
-
ref: this.
|
|
117
|
+
ref: this.imageRef,
|
|
177
118
|
src: src,
|
|
178
119
|
alt: "previewImag",
|
|
179
120
|
className: `${preViewImgPrefixCls}-img`,
|
|
180
121
|
key: src,
|
|
181
122
|
onMouseMove: this.handleMoveImage,
|
|
182
123
|
onMouseDown: this.onImageMouseDown,
|
|
183
|
-
onMouseUp: this.onImageMouseUp,
|
|
184
124
|
onContextMenu: this.handleRightClickImage,
|
|
185
125
|
onDragStart: e => e.preventDefault(),
|
|
186
126
|
onLoad: this.handleLoad,
|
|
@@ -197,9 +137,9 @@ PreviewImage.propTypes = {
|
|
|
197
137
|
src: PropTypes.string,
|
|
198
138
|
rotation: PropTypes.number,
|
|
199
139
|
style: PropTypes.object,
|
|
200
|
-
maxZoom: PropTypes.number,
|
|
201
|
-
minZoom: PropTypes.number,
|
|
202
|
-
zoomStep: PropTypes.number,
|
|
140
|
+
// maxZoom: PropTypes.number,
|
|
141
|
+
// minZoom: PropTypes.number,
|
|
142
|
+
// zoomStep: PropTypes.number,
|
|
203
143
|
zoom: PropTypes.number,
|
|
204
144
|
ratio: PropTypes.string,
|
|
205
145
|
disableDownload: PropTypes.bool,
|
|
@@ -210,8 +150,8 @@ PreviewImage.propTypes = {
|
|
|
210
150
|
onError: PropTypes.func
|
|
211
151
|
};
|
|
212
152
|
PreviewImage.defaultProps = {
|
|
213
|
-
maxZoom: 5,
|
|
214
|
-
minZoom: 0.1,
|
|
215
|
-
zoomStep: 0.1,
|
|
153
|
+
// maxZoom: 5,
|
|
154
|
+
// minZoom: 0.1,
|
|
155
|
+
// zoomStep: 0.1,
|
|
216
156
|
zoom: undefined
|
|
217
157
|
};
|
|
@@ -33,6 +33,8 @@ export default class PreviewInner extends BaseComponent<PreviewInnerProps, Previ
|
|
|
33
33
|
disableDownload: PropTypes.Requireable<boolean>;
|
|
34
34
|
viewerVisibleDelay: PropTypes.Requireable<number>;
|
|
35
35
|
zIndex: PropTypes.Requireable<number>;
|
|
36
|
+
maxZoom: PropTypes.Requireable<number>;
|
|
37
|
+
minZoom: PropTypes.Requireable<number>;
|
|
36
38
|
renderHeader: PropTypes.Requireable<(...args: any[]) => any>;
|
|
37
39
|
renderPreviewMenu: PropTypes.Requireable<(...args: any[]) => any>;
|
|
38
40
|
getPopupContainer: PropTypes.Requireable<(...args: any[]) => any>;
|
|
@@ -58,14 +60,20 @@ export default class PreviewInner extends BaseComponent<PreviewInnerProps, Previ
|
|
|
58
60
|
zIndex: number;
|
|
59
61
|
maskClosable: boolean;
|
|
60
62
|
viewerVisibleDelay: number;
|
|
63
|
+
maxZoom: number;
|
|
64
|
+
minZoom: number;
|
|
61
65
|
};
|
|
62
66
|
private bodyOverflow;
|
|
63
67
|
private scrollBarWidth;
|
|
64
68
|
private originBodyWidth;
|
|
65
69
|
get adapter(): PreviewInnerAdapter<PreviewInnerProps, PreviewInnerStates>;
|
|
66
|
-
timer: any;
|
|
67
70
|
context: PreviewContextProps;
|
|
68
71
|
foundation: PreviewInnerFoundation;
|
|
72
|
+
imageWrapRef: React.RefObject<HTMLDivElement>;
|
|
73
|
+
headerRef: React.RefObject<HTMLElement>;
|
|
74
|
+
footerRef: React.RefObject<HTMLElement>;
|
|
75
|
+
leftIconRef: React.RefObject<HTMLDivElement>;
|
|
76
|
+
rightIconRef: React.RefObject<HTMLDivElement>;
|
|
69
77
|
constructor(props: PreviewInnerProps);
|
|
70
78
|
static getDerivedStateFromProps(props: PreviewInnerProps, state: PreviewInnerStates): Partial<PreviewInnerStates>;
|
|
71
79
|
componentDidMount(): void;
|
|
@@ -78,13 +86,14 @@ export default class PreviewInner extends BaseComponent<PreviewInnerProps, Previ
|
|
|
78
86
|
handlePreviewClose: () => void;
|
|
79
87
|
handleAdjustRatio: (type: RatioType) => void;
|
|
80
88
|
handleRotateImage: (direction: any) => void;
|
|
81
|
-
handleZoomImage: (newZoom: number) => void;
|
|
89
|
+
handleZoomImage: (newZoom: number, notify?: boolean) => void;
|
|
82
90
|
handleMouseUp: (e: any) => void;
|
|
83
91
|
handleMouseMove: (e: any) => void;
|
|
84
|
-
handleMouseEvent: (e: any, event: string) => void;
|
|
85
92
|
handleKeyDown: (e: KeyboardEvent) => void;
|
|
86
93
|
onImageError: () => void;
|
|
87
94
|
onImageLoad: (src: any) => void;
|
|
88
95
|
handleMouseDown: (e: any) => void;
|
|
96
|
+
handleWheel: (e: any) => void;
|
|
97
|
+
registryImageWrapRef: (ref: any) => void;
|
|
89
98
|
render(): JSX.Element;
|
|
90
99
|
}
|
|
@@ -14,14 +14,6 @@ import PreviewInnerFoundation from '@douyinfe/semi-foundation/lib/es/image/previ
|
|
|
14
14
|
import { PreviewContext } from "./previewContext";
|
|
15
15
|
import { getScrollbarWidth } from "../_utils";
|
|
16
16
|
const prefixCls = cssClasses.PREFIX;
|
|
17
|
-
let startMouseDown = {
|
|
18
|
-
x: 0,
|
|
19
|
-
y: 0
|
|
20
|
-
};
|
|
21
|
-
let mouseActiveTime = null;
|
|
22
|
-
let stopTiming = false;
|
|
23
|
-
let timer = null;
|
|
24
|
-
// let bodyOverflowValue = document.body.style.overflow;
|
|
25
17
|
export default class PreviewInner extends BaseComponent {
|
|
26
18
|
get adapter() {
|
|
27
19
|
return Object.assign(Object.assign({}, super.adapter), {
|
|
@@ -105,35 +97,29 @@ export default class PreviewInner extends BaseComponent {
|
|
|
105
97
|
unregisterKeyDownListener: () => {
|
|
106
98
|
window && window.removeEventListener("keydown", this.handleKeyDown);
|
|
107
99
|
},
|
|
108
|
-
getMouseActiveTime: () => {
|
|
109
|
-
return mouseActiveTime;
|
|
110
|
-
},
|
|
111
|
-
getStopTiming: () => {
|
|
112
|
-
return stopTiming;
|
|
113
|
-
},
|
|
114
|
-
setStopTiming: value => {
|
|
115
|
-
stopTiming = value;
|
|
116
|
-
},
|
|
117
|
-
getStartMouseDown: () => {
|
|
118
|
-
return startMouseDown;
|
|
119
|
-
},
|
|
120
|
-
setStartMouseDown: (x, y) => {
|
|
121
|
-
startMouseDown = {
|
|
122
|
-
x,
|
|
123
|
-
y
|
|
124
|
-
};
|
|
125
|
-
},
|
|
126
|
-
setMouseActiveTime: time => {
|
|
127
|
-
mouseActiveTime = time;
|
|
128
|
-
},
|
|
129
100
|
getSetDownloadFunc: () => {
|
|
130
101
|
var _a, _b;
|
|
131
102
|
return (_b = (_a = this.context) === null || _a === void 0 ? void 0 : _a.setDownloadName) !== null && _b !== void 0 ? _b : this.props.setDownloadName;
|
|
103
|
+
},
|
|
104
|
+
isValidTarget: e => {
|
|
105
|
+
const headerDom = this.headerRef && this.headerRef.current;
|
|
106
|
+
const footerDom = this.footerRef && this.footerRef.current;
|
|
107
|
+
const leftIconDom = this.leftIconRef && this.leftIconRef.current;
|
|
108
|
+
const rightIconDom = this.rightIconRef && this.rightIconRef.current;
|
|
109
|
+
const target = e.target;
|
|
110
|
+
if (headerDom && headerDom.contains(target) || footerDom && footerDom.contains(target) || leftIconDom && leftIconDom.contains(target) || rightIconDom && rightIconDom.contains(target)) {
|
|
111
|
+
// Move in the operation area, return false
|
|
112
|
+
return false;
|
|
113
|
+
}
|
|
114
|
+
// Move in the preview area except the operation area, return true
|
|
115
|
+
return true;
|
|
132
116
|
}
|
|
133
117
|
});
|
|
134
118
|
}
|
|
135
119
|
constructor(props) {
|
|
120
|
+
var _this;
|
|
136
121
|
super(props);
|
|
122
|
+
_this = this;
|
|
137
123
|
this.viewVisibleChange = () => {
|
|
138
124
|
this.foundation.handleViewVisibleChange();
|
|
139
125
|
};
|
|
@@ -152,8 +138,9 @@ export default class PreviewInner extends BaseComponent {
|
|
|
152
138
|
this.handleRotateImage = direction => {
|
|
153
139
|
this.foundation.handleRotateImage(direction);
|
|
154
140
|
};
|
|
155
|
-
this.handleZoomImage = newZoom
|
|
156
|
-
|
|
141
|
+
this.handleZoomImage = function (newZoom) {
|
|
142
|
+
let notify = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
|
|
143
|
+
_this.foundation.handleZoomImage(newZoom, notify);
|
|
157
144
|
};
|
|
158
145
|
this.handleMouseUp = e => {
|
|
159
146
|
this.foundation.handleMouseUp(e.nativeEvent);
|
|
@@ -161,9 +148,6 @@ export default class PreviewInner extends BaseComponent {
|
|
|
161
148
|
this.handleMouseMove = e => {
|
|
162
149
|
this.foundation.handleMouseMove(e);
|
|
163
150
|
};
|
|
164
|
-
this.handleMouseEvent = (e, event) => {
|
|
165
|
-
this.foundation.handleMouseMoveEvent(e, event);
|
|
166
|
-
};
|
|
167
151
|
this.handleKeyDown = e => {
|
|
168
152
|
this.foundation.handleKeyDown(e);
|
|
169
153
|
};
|
|
@@ -176,6 +160,31 @@ export default class PreviewInner extends BaseComponent {
|
|
|
176
160
|
this.handleMouseDown = e => {
|
|
177
161
|
this.foundation.handleMouseDown(e);
|
|
178
162
|
};
|
|
163
|
+
this.handleWheel = e => {
|
|
164
|
+
this.foundation.handleWheel(e);
|
|
165
|
+
};
|
|
166
|
+
// 为什么通过 addEventListener 注册 wheel 事件而不是使用 onWheel 事件?
|
|
167
|
+
// 因为 Passive Event Listeners(https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#improving_scrolling_performance_with_passive_listeners)
|
|
168
|
+
// Passive Event Listeners 是一种优化技术,用于提高滚动性能。在默认情况下,浏览器会假设事件的监听器不会调用
|
|
169
|
+
// preventDefault() 方法来阻止事件的默认行为,从而允许进行一些优化操作,例如滚动平滑。
|
|
170
|
+
// 对于 Image 而言,如果使用触控板,双指朝不同方向分开放大图片,则需要 preventDefault 防止页面整体放大。
|
|
171
|
+
// Why register wheel event through addEventListener instead of using onWheel event?
|
|
172
|
+
// Because of Passive Event Listeners(an optimization technique used to improve scrolling performance. By default,
|
|
173
|
+
// the browser will assume that event listeners will not call preventDefault() method to prevent the default behavior of the event,
|
|
174
|
+
// allowing some optimization operations such as scroll smoothing.)
|
|
175
|
+
// For Image, if we use the trackpad and spread your fingers in different directions to enlarge the image, we need to preventDefault
|
|
176
|
+
// to prevent the page from being enlarged as a whole.
|
|
177
|
+
this.registryImageWrapRef = ref => {
|
|
178
|
+
if (this.imageWrapRef) {
|
|
179
|
+
this.imageWrapRef.removeEventListener("wheel", this.handleWheel);
|
|
180
|
+
}
|
|
181
|
+
if (ref) {
|
|
182
|
+
ref.addEventListener("wheel", this.handleWheel, {
|
|
183
|
+
passive: false
|
|
184
|
+
});
|
|
185
|
+
}
|
|
186
|
+
this.imageWrapRef = ref;
|
|
187
|
+
};
|
|
179
188
|
this.state = {
|
|
180
189
|
imgSrc: [],
|
|
181
190
|
imgLoadStatus: new Map(),
|
|
@@ -192,6 +201,11 @@ export default class PreviewInner extends BaseComponent {
|
|
|
192
201
|
this.bodyOverflow = '';
|
|
193
202
|
this.originBodyWidth = '100%';
|
|
194
203
|
this.scrollBarWidth = 0;
|
|
204
|
+
this.imageWrapRef = null;
|
|
205
|
+
this.headerRef = /*#__PURE__*/React.createRef();
|
|
206
|
+
this.footerRef = /*#__PURE__*/React.createRef();
|
|
207
|
+
this.leftIconRef = /*#__PURE__*/React.createRef();
|
|
208
|
+
this.rightIconRef = /*#__PURE__*/React.createRef();
|
|
195
209
|
}
|
|
196
210
|
static getDerivedStateFromProps(props, state) {
|
|
197
211
|
const willUpdateStates = {};
|
|
@@ -207,6 +221,9 @@ export default class PreviewInner extends BaseComponent {
|
|
|
207
221
|
willUpdateStates.visible = props.visible;
|
|
208
222
|
if (props.visible) {
|
|
209
223
|
willUpdateStates.preloadAfterVisibleChange = true;
|
|
224
|
+
willUpdateStates.viewerVisible = true;
|
|
225
|
+
willUpdateStates.rotation = 0;
|
|
226
|
+
willUpdateStates.ratio = 'adaptation';
|
|
210
227
|
}
|
|
211
228
|
}
|
|
212
229
|
if ("currentIndex" in props && props.currentIndex !== state.currentIndex) {
|
|
@@ -225,10 +242,8 @@ export default class PreviewInner extends BaseComponent {
|
|
|
225
242
|
}
|
|
226
243
|
}
|
|
227
244
|
componentDidUpdate(prevProps, prevState) {
|
|
228
|
-
if (
|
|
229
|
-
|
|
230
|
-
timer && clearInterval(timer);
|
|
231
|
-
timer = setInterval(this.viewVisibleChange, 1000);
|
|
245
|
+
if (prevProps.src !== this.props.src) {
|
|
246
|
+
this.foundation.updateTimer();
|
|
232
247
|
}
|
|
233
248
|
// hide => show
|
|
234
249
|
if (!prevProps.visible && this.props.visible) {
|
|
@@ -240,7 +255,7 @@ export default class PreviewInner extends BaseComponent {
|
|
|
240
255
|
}
|
|
241
256
|
}
|
|
242
257
|
componentWillUnmount() {
|
|
243
|
-
|
|
258
|
+
this.foundation.clearTimer();
|
|
244
259
|
}
|
|
245
260
|
isInGroup() {
|
|
246
261
|
return Boolean(this.context && this.context.isGroup);
|
|
@@ -305,10 +320,10 @@ export default class PreviewInner extends BaseComponent {
|
|
|
305
320
|
style: style,
|
|
306
321
|
onMouseDown: this.handleMouseDown,
|
|
307
322
|
onMouseUp: this.handleMouseUp,
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
onMouseOut: e => this.handleMouseEvent(e.nativeEvent, "out")
|
|
323
|
+
ref: this.registryImageWrapRef,
|
|
324
|
+
onMouseMove: this.handleMouseMove
|
|
311
325
|
}, /*#__PURE__*/React.createElement(Header, {
|
|
326
|
+
ref: this.headerRef,
|
|
312
327
|
className: cls(hideViewerCls),
|
|
313
328
|
onClose: this.handlePreviewClose,
|
|
314
329
|
renderHeader: renderHeader
|
|
@@ -319,7 +334,6 @@ export default class PreviewInner extends BaseComponent {
|
|
|
319
334
|
setRatio: this.handleAdjustRatio,
|
|
320
335
|
zoom: zoom,
|
|
321
336
|
ratio: ratio,
|
|
322
|
-
zoomStep: zoomStep,
|
|
323
337
|
rotation: rotation,
|
|
324
338
|
crossOrigin: crossOrigin,
|
|
325
339
|
onError: this.onImageError,
|
|
@@ -328,6 +342,7 @@ export default class PreviewInner extends BaseComponent {
|
|
|
328
342
|
/*#__PURE__*/
|
|
329
343
|
// eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
|
|
330
344
|
React.createElement("div", {
|
|
345
|
+
ref: this.leftIconRef,
|
|
331
346
|
className: cls(`${previewPrefixCls}-icon`, `${previewPrefixCls}-prev`, hideViewerCls),
|
|
332
347
|
onClick: () => this.handleSwitchImage("prev")
|
|
333
348
|
}, /*#__PURE__*/React.createElement(IconArrowLeft, {
|
|
@@ -336,11 +351,13 @@ export default class PreviewInner extends BaseComponent {
|
|
|
336
351
|
/*#__PURE__*/
|
|
337
352
|
// eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
|
|
338
353
|
React.createElement("div", {
|
|
354
|
+
ref: this.rightIconRef,
|
|
339
355
|
className: cls(`${previewPrefixCls}-icon`, `${previewPrefixCls}-next`, hideViewerCls),
|
|
340
356
|
onClick: () => this.handleSwitchImage("next")
|
|
341
357
|
}, /*#__PURE__*/React.createElement(IconArrowRight, {
|
|
342
358
|
size: "large"
|
|
343
359
|
})), /*#__PURE__*/React.createElement(Footer, {
|
|
360
|
+
forwardRef: this.footerRef,
|
|
344
361
|
className: hideViewerCls,
|
|
345
362
|
totalNum: total,
|
|
346
363
|
curPage: currentIndex + 1,
|
|
@@ -398,6 +415,8 @@ PreviewInner.propTypes = {
|
|
|
398
415
|
disableDownload: PropTypes.bool,
|
|
399
416
|
viewerVisibleDelay: PropTypes.number,
|
|
400
417
|
zIndex: PropTypes.number,
|
|
418
|
+
maxZoom: PropTypes.number,
|
|
419
|
+
minZoom: PropTypes.number,
|
|
401
420
|
renderHeader: PropTypes.func,
|
|
402
421
|
renderPreviewMenu: PropTypes.func,
|
|
403
422
|
getPopupContainer: PropTypes.func,
|
|
@@ -422,5 +441,7 @@ PreviewInner.defaultProps = {
|
|
|
422
441
|
preLoadGap: 2,
|
|
423
442
|
zIndex: 1000,
|
|
424
443
|
maskClosable: true,
|
|
425
|
-
viewerVisibleDelay: 10000
|
|
444
|
+
viewerVisibleDelay: 10000,
|
|
445
|
+
maxZoom: 5,
|
|
446
|
+
minZoom: 0.1
|
|
426
447
|
};
|
package/lib/es/index.d.ts
CHANGED
|
@@ -1,4 +1,6 @@
|
|
|
1
1
|
import './_base/base.css';
|
|
2
|
+
export { default as BaseFoundation } from '@douyinfe/semi-foundation/lib/es/base/foundation';
|
|
3
|
+
export { default as BaseComponent } from "./_base/baseComponent";
|
|
2
4
|
export { default as Anchor } from './anchor';
|
|
3
5
|
export { default as AutoComplete } from './autoComplete';
|
|
4
6
|
export { default as Avatar } from './avatar';
|
package/lib/es/index.js
CHANGED
|
@@ -1,4 +1,6 @@
|
|
|
1
1
|
import './_base/base.css';
|
|
2
|
+
export { default as BaseFoundation } from '@douyinfe/semi-foundation/lib/es/base/foundation';
|
|
3
|
+
export { default as BaseComponent } from "./_base/baseComponent";
|
|
2
4
|
export { default as Anchor } from './anchor';
|
|
3
5
|
export { default as AutoComplete } from './autoComplete';
|
|
4
6
|
export { default as Avatar } from './avatar';
|
|
@@ -110,6 +110,7 @@ class NotificationList extends BaseComponent {
|
|
|
110
110
|
}
|
|
111
111
|
static addNotice(notice) {
|
|
112
112
|
var _a;
|
|
113
|
+
notice = Object.assign(Object.assign({}, defaultConfig), notice);
|
|
113
114
|
const id = (_a = notice.id) !== null && _a !== void 0 ? _a : getUuid('notification');
|
|
114
115
|
if (!ref) {
|
|
115
116
|
const {
|
|
@@ -153,27 +154,27 @@ class NotificationList extends BaseComponent {
|
|
|
153
154
|
return id;
|
|
154
155
|
}
|
|
155
156
|
static info(opts) {
|
|
156
|
-
return this.addNotice(Object.assign(Object.assign(
|
|
157
|
+
return this.addNotice(Object.assign(Object.assign({}, opts), {
|
|
157
158
|
type: 'info'
|
|
158
159
|
}));
|
|
159
160
|
}
|
|
160
161
|
static success(opts) {
|
|
161
|
-
return this.addNotice(Object.assign(Object.assign(
|
|
162
|
+
return this.addNotice(Object.assign(Object.assign({}, opts), {
|
|
162
163
|
type: 'success'
|
|
163
164
|
}));
|
|
164
165
|
}
|
|
165
166
|
static error(opts) {
|
|
166
|
-
return this.addNotice(Object.assign(Object.assign(
|
|
167
|
+
return this.addNotice(Object.assign(Object.assign({}, opts), {
|
|
167
168
|
type: 'error'
|
|
168
169
|
}));
|
|
169
170
|
}
|
|
170
171
|
static warning(opts) {
|
|
171
|
-
return this.addNotice(Object.assign(Object.assign(
|
|
172
|
+
return this.addNotice(Object.assign(Object.assign({}, opts), {
|
|
172
173
|
type: 'warning'
|
|
173
174
|
}));
|
|
174
175
|
}
|
|
175
176
|
static open(opts) {
|
|
176
|
-
return this.addNotice(Object.assign(Object.assign(
|
|
177
|
+
return this.addNotice(Object.assign(Object.assign({}, opts), {
|
|
177
178
|
type: 'default'
|
|
178
179
|
}));
|
|
179
180
|
}
|
package/lib/es/select/index.d.ts
CHANGED
|
@@ -139,7 +139,7 @@ export type SelectProps = {
|
|
|
139
139
|
onDeselect?: (value: SelectProps['value'], option: Record<string, any>) => void;
|
|
140
140
|
onSelect?: (value: SelectProps['value'], option: Record<string, any>) => void;
|
|
141
141
|
allowCreate?: boolean;
|
|
142
|
-
triggerRender?: (props
|
|
142
|
+
triggerRender?: (props: TriggerRenderProps) => React.ReactNode;
|
|
143
143
|
onClear?: () => void;
|
|
144
144
|
virtualize?: virtualListProps;
|
|
145
145
|
onFocus?: (e: React.FocusEvent) => void;
|
|
@@ -63,7 +63,7 @@ export type TimePickerProps = {
|
|
|
63
63
|
secondStep?: number;
|
|
64
64
|
showClear?: boolean;
|
|
65
65
|
size?: InputSize;
|
|
66
|
-
stopPropagation
|
|
66
|
+
stopPropagation?: boolean;
|
|
67
67
|
style?: React.CSSProperties;
|
|
68
68
|
timeZone?: string | number;
|
|
69
69
|
triggerRender?: (props?: any) => React.ReactNode;
|
|
@@ -77,7 +77,7 @@ export interface TreeSelectProps extends Omit<BasicTreeSelectProps, OverrideComm
|
|
|
77
77
|
onSelect?: (selectedKey: string, selected: boolean, selectedNode: TreeNodeData) => void;
|
|
78
78
|
renderSelectedItem?: RenderSelectedItem;
|
|
79
79
|
getPopupContainer?: () => HTMLElement;
|
|
80
|
-
triggerRender?: (props
|
|
80
|
+
triggerRender?: (props: TriggerRenderProps) => React.ReactNode;
|
|
81
81
|
onBlur?: (e: React.MouseEvent) => void;
|
|
82
82
|
onChange?: OnChange;
|
|
83
83
|
onFocus?: (e: React.MouseEvent) => void;
|
|
@@ -191,7 +191,6 @@ declare class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState>
|
|
|
191
191
|
triggerRef: React.RefObject<HTMLDivElement>;
|
|
192
192
|
optionsRef: React.RefObject<any>;
|
|
193
193
|
clickOutsideHandler: any;
|
|
194
|
-
_flattenNodes: TreeState['flattenNodes'];
|
|
195
194
|
onNodeClick: any;
|
|
196
195
|
onNodeDoubleClick: any;
|
|
197
196
|
onMotionEnd: any;
|
|
@@ -248,6 +247,7 @@ declare class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState>
|
|
|
248
247
|
};
|
|
249
248
|
getTreeNodeKey: (treeNode: TreeNodeData) => string;
|
|
250
249
|
handlePopoverClose: (isVisible: any) => void;
|
|
250
|
+
afterClose: () => void;
|
|
251
251
|
renderTreeNode: (treeNode: FlattenNode, ind: number, style: React.CSSProperties) => JSX.Element;
|
|
252
252
|
itemKey: (index: number, data: Record<string, any>) => any;
|
|
253
253
|
renderNodeList: () => JSX.Element;
|