63 lines
1.4 KiB
TypeScript
63 lines
1.4 KiB
TypeScript
|
|
import React, { FC, useRef, forwardRef, useImperativeHandle } from 'react';
|
|
import { CompareImage, Flex, Score } from '@zhst/meta'
|
|
|
|
interface ComBineImageProps {
|
|
data: {
|
|
imgSummary: string;
|
|
compaterImage: string;
|
|
imageKey: string;
|
|
score: number;
|
|
}
|
|
prevDisable?: boolean;
|
|
nextDisable?: boolean;
|
|
onPre?: () => void;
|
|
onNext?: () => void;
|
|
openRoll?: boolean
|
|
}
|
|
|
|
const ComBineImage: FC<ComBineImageProps> = forwardRef((props, ref) => {
|
|
const {
|
|
data,
|
|
prevDisable,
|
|
nextDisable,
|
|
onNext,
|
|
onPre,
|
|
openRoll
|
|
} = props
|
|
const { imgSummary, compaterImage, score } = data
|
|
const targetImageRef = useRef(null)
|
|
const compareImageRef = useRef(null)
|
|
|
|
useImperativeHandle(ref, () => ({
|
|
compareImageRef,
|
|
targetImageRef
|
|
}));
|
|
|
|
return (
|
|
<Flex justify='space-evenly' align='center' style={{ padding:'0 32px' }}>
|
|
<CompareImage
|
|
ref={targetImageRef}
|
|
preDisable={prevDisable}
|
|
nextDisable={nextDisable}
|
|
onNext={onNext}
|
|
onPre={onPre}
|
|
showScore={false}
|
|
openRoll={openRoll}
|
|
url={imgSummary}
|
|
label="目标图"
|
|
/>
|
|
<Score score={score} />
|
|
<CompareImage
|
|
ref={compareImageRef}
|
|
url={compaterImage}
|
|
openRoll={false}
|
|
score={score}
|
|
label="对比图"
|
|
/>
|
|
</Flex>
|
|
)
|
|
})
|
|
|
|
export default ComBineImage
|