MCPcopy Create free account
hub / github.com/Caldis/react-zmage / componentDidUpdate

Method componentDidUpdate

packages/core/src/components/Image/Image.tsx:209–327  ·  view source on GitHub ↗
(prevProps: BrowsingParams, prevState: StateType)

Source from the content-addressed store, hash-verified

207 }
208
209 componentDidUpdate (prevProps: BrowsingParams, prevState: StateType) {
210 const { show: prevShow, zoom: prevZoom, rotate: prevRotate, page: prevPage } = prevProps
211 const { show: currShow, zoom: currZoom, rotate: currRotate, page: currPage } = this.props
212 const { animate, presetIsMobile } = this.context
213 const keyboardZoomEnter = !prevZoom && currZoom && this.context.zoomTrigger === 'keyboard'
214 const pinchZoomEnter = !prevZoom && currZoom && this.context.zoomTrigger === 'pinch'
215 const doubleTapZoomEnter = !prevZoom && currZoom && this.context.zoomTrigger === 'doubleTap'
216 if (prevShow !== currShow || prevPage !== currPage || (prevZoom && !currZoom)) {
217 this.resetZoomMotionState()
218 }
219 // 快速重新打开会让 closing RAF 持续覆盖打开动画的 inline transform — 切换到 show=true 时主动取消
220 if (!prevShow && currShow) {
221 this.cancelClosingFollow()
222 }
223 if (prevRotate !== currRotate && currShow) {
224 this.completeBrowsingFollow()
225 this.reportCanZoom()
226 }
227 if (!prevZoom && currZoom) {
228 this.cancelCoverFollow()
229 if (keyboardZoomEnter) {
230 this.startKeyboardZoomEnter()
231 } else if (pinchZoomEnter && this.pinchTargetStyle) {
232 this.applyZoomStyleImmediately(this.pinchTargetStyle)
233 } else if (doubleTapZoomEnter) {
234 this.startStoredZoomEnter()
235 } else {
236 this.startZoomEnter()
237 }
238 }
239 // 状态改变时更新样式 (Page 导致的 src 变化的 update 交给图片自身的 onload 调用)
240 if (prevShow !== currShow || prevZoom !== currZoom || prevRotate !== currRotate) {
241 const updateStyle = () => {
242 if (keyboardZoomEnter) {
243 this.updateCurrentImageStyleForKeyboardZoom()
244 } else if (pinchZoomEnter && this.pinchTargetStyle) {
245 this.setCurrentStyle(this.pinchTargetStyle)
246 } else if (doubleTapZoomEnter) {
247 this.updateCurrentImageStyleForStoredZoom()
248 } else if (prevShow !== currShow && animate?.browsing === false) {
249 this.updateCurrentImageStyleWithoutBrowsingTransition()
250 } else if (!prevShow && currShow) {
251 this.startBrowsingInTransition()
252 } else if (prevShow && !currShow) {
253 // 关闭路径: 启动 RAF 实时追踪 cover 视口位置, 避免 350ms transition 期间 target snapshot 导致的滚动滞后
254 this.startClosingFollow()
255 } else if (prevZoom && !currZoom) {
256 this.updateCurrentImageStyle()
257 } else {
258 this.debounceUpdateCurrentImageStyle()
259 }
260 }
261 // 显示状态切换
262 if (!prevShow) {
263 // 显示
264 updateStyle()
265 this.handleDetectImageLoadComplete()
266 presetIsMobile && lockTouchInteraction()

Callers

nothing calls this directly

Calls 3

lockTouchInteractionFunction · 0.90
selectFlipKindFunction · 0.90
computeMinPageDistanceFunction · 0.90

Tested by

no test coverage detected