Skip to content

Commit

Permalink
fix(image-viewer): 箭头函数及props检测
Browse files Browse the repository at this point in the history 
closed #1402
  • Loading branch information
@sinbadmaster
sinbadmaster committed Sep 3, 2022
1 parent 6137507 commit 4398a53
Show file tree
Hide file tree
Showing 5 changed files with 142 additions and 151 deletions.
84 changes: 41 additions & 43 deletions src/image-viewer/base/ImageItem.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,52 +45,50 @@ export default defineComponent({
},
);

return () => {
return (
<div class={`${classPrefix.value}-image-viewer__modal--pic`}>
<div class={`${classPrefix.value}-image-viewer__modal--box`} style={boxStyle.value}>
{error.value && (
<div class={`${classPrefix.value}-image-viewer__img-error`}>
{/* 脱离文档流 */}
<div class={`${classPrefix.value}-image-viewer__img-error--content`}>
<ImageErrorIcon size="4em" />
<div class={`${classPrefix.value}-image-viewer__img-error--text`}>图片加载失败，可尝试重新加载</div>
</div>
return () => (
<div class={`${classPrefix.value}-image-viewer__modal--pic`}>
<div class={`${classPrefix.value}-image-viewer__modal--box`} style={boxStyle.value}>
{error.value && (
<div class={`${classPrefix.value}-image-viewer__img-error`}>
{/* 脱离文档流 */}
<div class={`${classPrefix.value}-image-viewer__img-error--content`}>
<ImageErrorIcon size="4em" />
<div class={`${classPrefix.value}-image-viewer__img-error--text`}>图片加载失败，可尝试重新加载</div>
</div>
)}
</div>
)}

{!error.value && !!props.placementSrc && (
<img
class={`${classPrefix.value}-image-viewer__modal--image`}
onMousedown={(event: MouseEvent) => {
event.stopPropagation();
mouseDownHandler(event);
}}
src={props.placementSrc}
style={placementImgStyle.value}
alt="image"
draggable="false"
/>
)}
{!error.value && !!props.placementSrc && (
<img
class={`${classPrefix.value}-image-viewer__modal--image`}
onMousedown={(event: MouseEvent) => {
event.stopPropagation();
mouseDownHandler(event);
}}
src={props.placementSrc}
style={placementImgStyle.value}
alt="image"
draggable="false"
/>
)}

{!error.value && (
<img
class={`${classPrefix.value}-image-viewer__modal--image`}
onMousedown={(event: MouseEvent) => {
event.stopPropagation();
mouseDownHandler(event);
}}
src={props.src}
onLoad={() => (loaded.value = true)}
onError={() => (error.value = true)}
style={imgStyle.value}
alt="image"
draggable="false"
/>
)}
</div>
{!error.value && (
<img
class={`${classPrefix.value}-image-viewer__modal--image`}
onMousedown={(event: MouseEvent) => {
event.stopPropagation();
mouseDownHandler(event);
}}
src={props.src}
onLoad={() => (loaded.value = true)}
onError={() => (error.value = true)}
style={imgStyle.value}
alt="image"
draggable="false"
/>
)}
</div>
);
};
</div>
);
},
});
14 changes: 6 additions & 8 deletions src/image-viewer/base/ImageModalIcon.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,13 +21,11 @@ export default defineComponent({
},
]);

return () => {
return (
<div class={wrapClass.value} onClick={props.onClick}>
{renderTNodeJSX('icon')}
{props.label && <span class={`${classPrefix.value}-image-viewer__modal--icon-label`}>{props.label}</span>}
</div>
);
};
return () => (
<div class={wrapClass.value} onClick={props.onClick}>
{renderTNodeJSX('icon')}
{props.label && <span class={`${classPrefix.value}-image-viewer__modal--icon-label`}>{props.label}</span>}
</div>
);
},
});
119 changes: 59 additions & 60 deletions src/image-viewer/base/ImageViewerModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { computed, defineComponent, PropType } from 'vue';
import { CloseIcon } from 'tdesign-icons-vue-next';
import TDialog from '../../dialog';
import TImageItem from './ImageItem';
import TImageViewerUtils, { PropFn } from './ImageViewerUtils';
import TImageViewerUtils from './ImageViewerUtils';
import { usePrefixClass } from '../../hooks/useConfig';
import { useTNodeJSX } from '../../hooks/tnode';
import { ImageInfo, TdImageViewerProps } from '../type';
Expand All @@ -24,12 +24,12 @@ export default defineComponent({
return {};
},
},
onRotate: Function as PropType<PropFn>,
onZoomIn: Function as PropType<PropFn>,
onZoomOut: Function as PropType<PropFn>,
onMirror: Function as PropType<PropFn>,
onReset: Function as PropType<PropFn>,
onClose: Function as PropType<TdImageViewerProps['onClose']>,
onRotate: Function as PropType<() => void>,
onZoomIn: Function as PropType<() => void>,
onZoomOut: Function as PropType<() => void>,
onMirror: Function as PropType<() => void>,
onReset: Function as PropType<() => void>,
onClose: props.onClose,
draggable: {
type: Boolean,
default: true,
Expand All @@ -50,61 +50,60 @@ export default defineComponent({
minWidth: props.viewerScale.minWidth,
minHeight: props.viewerScale.minHeight,
}));
return () => {
return (
<TDialog
destroyOnClose
attach="body"
onClose={props.onClose}
visible={props.visible}
placement="center"
mode="modeless"
width={1000}
cancelBtn={null}
confirmBtn={null}
closeBtn={false}
draggable={props.draggable}
zIndex={props.zIndex}
showOverlay={props.showOverlay}
class={`${classPrefix.value}-image-viewer__dialog`}
header={() => (
<div class={`${classPrefix.value}-image-viewer__mini--header`}>
{`${props.index + 1}/${props.images.length}`}
<span
class={`${classPrefix.value}-image-viewer__mini--close`}
onClick={(e: MouseEvent) => {
props.onClose({ e, trigger: 'close-btn' });
}}
>
{renderJSX('closeBtn', <CloseIcon size="1.5rem" />)}
</span>
</div>
)}
footer={() => (
<div class={`${classPrefix.value}-image-viewer-mini__footer`}>
<TImageViewerUtils
onZoomIn={props.onZoomIn}
onZoomOut={props.onZoomOut}
scale={props.scale}
currentImage={props.currentImage}
onRotate={props.onRotate}
onMirror={props.onMirror}
onReset={props.onReset}
/>
</div>
)}
>
<div class={`${classPrefix.value}-image-viewer-mini__content`} style={style.value}>
<TImageItem
rotate={props.rotate}

return () => (
<TDialog
destroyOnClose
attach="body"
onClose={props.onClose}
visible={props.visible}
placement="center"
mode="modeless"
width={1000}
cancelBtn={null}
confirmBtn={null}
closeBtn={false}
draggable={props.draggable}
zIndex={props.zIndex}
showOverlay={props.showOverlay}
class={`${classPrefix.value}-image-viewer__dialog`}
header={() => (
<div class={`${classPrefix.value}-image-viewer__mini--header`}>
{`${props.index + 1}/${props.images.length}`}
<span
class={`${classPrefix.value}-image-viewer__mini--close`}
onClick={(e: MouseEvent) => {
props.onClose({ e, trigger: 'close-btn' });
}}
>
{renderJSX('closeBtn', <CloseIcon size="1.5rem" />)}
</span>
</div>
)}
footer={() => (
<div class={`${classPrefix.value}-image-viewer-mini__footer`}>
<TImageViewerUtils
onZoomIn={props.onZoomIn}
onZoomOut={props.onZoomOut}
scale={props.scale}
mirror={props.mirror}
src={props.currentImage.mainImage}
placementSrc={props.currentImage.thumbnail}
currentImage={props.currentImage}
onRotate={props.onRotate}
onMirror={props.onMirror}
onReset={props.onReset}
/>
</div>
</TDialog>
);
};
)}
>
<div class={`${classPrefix.value}-image-viewer-mini__content`} style={style.value}>
<TImageItem
rotate={props.rotate}
scale={props.scale}
mirror={props.mirror}
src={props.currentImage.mainImage}
placementSrc={props.currentImage.thumbnail}
/>
</div>
</TDialog>
);
},
});
12 changes: 5 additions & 7 deletions src/image-viewer/base/ImageViewerUtils.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,17 +8,15 @@ import { downloadFile } from '../utils';

import { ImageInfo } from '../type';

export type PropFn = () => void;

export default defineComponent({
name: 'TImageViewerUtils',
props: {
scale: Number,
onRotate: Function as PropType<PropFn>,
onZoomIn: Function as PropType<PropFn>,
onZoomOut: Function as PropType<PropFn>,
onMirror: Function as PropType<PropFn>,
onReset: Function as PropType<PropFn>,
onRotate: Function as PropType<() => void>,
onZoomIn: Function as PropType<() => void>,
onZoomOut: Function as PropType<() => void>,
onMirror: Function as PropType<() => void>,
onReset: Function as PropType<() => void>,
currentImage: {
type: Object as PropType<ImageInfo>,
default() {
Expand Down
64 changes: 31 additions & 33 deletions src/image-viewer/image-viewer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -124,41 +124,39 @@ export default defineComponent({

const transStyle = computed(() => ({ transform: `translateX(-${indexValue.value * 84}px)` }));

const renderHeader = () => {
return (
<div class={headerClass.value}>
<TImageViewerIcon
icon={() => <ChevronDownIcon size="20px" />}
class={`${COMPONENT_NAME.value}__header--pre__bt`}
onClick={toggleExpand}
/>
<div class={`${COMPONENT_NAME.value}__header--prev`}>
<div class={`${COMPONENT_NAME.value}__bokeh--left`} />
<div class={`${COMPONENT_NAME.value}__bokeh--right`} />
<div class={`${COMPONENT_NAME.value}__header--trans`} style={transStyle.value}>
{images.value.map((image, index) => (
<div
key={index}
class={[
`${COMPONENT_NAME.value}__header--box`,
{
[`${classPrefix.value}-is-active`]: index === indexValue.value,
},
]}
>
<img
alt=""
src={image.thumbnail || image.mainImage}
className={`${COMPONENT_NAME.value}__header--img`}
onClick={() => onImgClick(index)}
/>
</div>
))}
</div>
const renderHeader = () => (
<div class={headerClass.value}>
<TImageViewerIcon
icon={() => <ChevronDownIcon size="20px" />}
class={`${COMPONENT_NAME.value}__header--pre__bt`}
onClick={toggleExpand}
/>
<div class={`${COMPONENT_NAME.value}__header--prev`}>
<div class={`${COMPONENT_NAME.value}__bokeh--left`} />
<div class={`${COMPONENT_NAME.value}__bokeh--right`} />
<div class={`${COMPONENT_NAME.value}__header--trans`} style={transStyle.value}>
{images.value.map((image, index) => (
<div
key={index}
class={[
`${COMPONENT_NAME.value}__header--box`,
{
[`${classPrefix.value}-is-active`]: index === indexValue.value,
},
]}
>
<img
alt=""
src={image.thumbnail || image.mainImage}
className={`${COMPONENT_NAME.value}__header--img`}
onClick={() => onImgClick(index)}
/>
</div>
))}
</div>
</div>
);
};
</div>
);
const renderNavigationArrow = (type: 'prev' | 'next') => {
const rotateDeg = type === 'prev' ? 0 : 180;
const icon = renderTNodeJSX(
Expand Down

0 comments on commit 4398a53

Please sign in to comment.