116 lines
4.4 KiB
TypeScript
116 lines
4.4 KiB
TypeScript
import CropGeneral from "@ui_kit/Modal/CropModal/cropGeneral";
|
|
import DevaceDesktopIcon from "@ui_kit/Modal/CropModal/IconCropModal/DevaceDesktopIcon";
|
|
import DevaceTabletIcon from "@ui_kit/Modal/CropModal/IconCropModal/DevaceTabletIcon";
|
|
import DevaceMobileIcon from "@ui_kit/Modal/CropModal/IconCropModal/DevaceMobileIcon";
|
|
import DevaceSmallIcon from "@ui_kit/Modal/CropModal/IconCropModal/DevaceSmallIcon";
|
|
import {PercentCrop} from "react-image-crop";
|
|
import {MutableRefObject} from "react";
|
|
|
|
const modalProps = {
|
|
"desktop": {name: "Десктоп", icon: <DevaceDesktopIcon/>},
|
|
"tablet": {name:"Планшет", icon: <DevaceTabletIcon/>},
|
|
"mobile": {name:"Телефон", icon: <DevaceMobileIcon/>},
|
|
"small": {name:"Самые узкие экраны", icon: <DevaceSmallIcon/>}
|
|
}
|
|
|
|
interface Props{
|
|
imageUrl: null | string;
|
|
handleSizeChange: (a: number)=> void;
|
|
handleRotateClick: Promise<void>;
|
|
getInitialCrop: (imageWidth: number, imageHeight: number, aspectRatio: number)=> PercentCrop;
|
|
modalProps: {string:{}};
|
|
modalStep: string;
|
|
stepIndex: number;
|
|
onClose: () => void;
|
|
cropImageElementRef: MutableRefObject<HTMLImageElement>;
|
|
onDeleteClick?: () => void;
|
|
cropAspectRatio?: {
|
|
width: number;
|
|
height: number;
|
|
};
|
|
}
|
|
|
|
export default function SwitchCaseCrop ({imageUrl,
|
|
cropAspectRatio,
|
|
handleSizeChange,
|
|
handleRotateClick,
|
|
getInitialCrop,
|
|
onDeleteClick,
|
|
onClose,
|
|
modalStep,
|
|
stepIndex,
|
|
cropImageElementRef}: Props) {
|
|
switch (modalStep) {
|
|
case "desktop": {
|
|
return(
|
|
<>
|
|
<CropGeneral
|
|
imageUrl={imageUrl}
|
|
handleSizeChange={handleSizeChange}
|
|
handleRotateClick={handleRotateClick}
|
|
getInitialCrop={getInitialCrop}
|
|
cropAspectRatio={cropAspectRatio}
|
|
onDeleteClick={onDeleteClick}
|
|
onClose={onClose}
|
|
modalProps={modalProps.desktop}
|
|
modalStep={stepIndex}
|
|
cropImageElementRef={cropImageElementRef}
|
|
/>
|
|
</>
|
|
|
|
)
|
|
}
|
|
case "tablet": {
|
|
return(
|
|
<>
|
|
<CropGeneral
|
|
imageUrl={imageUrl}
|
|
handleSizeChange={handleSizeChange}
|
|
handleRotateClick={handleRotateClick}
|
|
getInitialCrop={getInitialCrop}
|
|
cropAspectRatio={cropAspectRatio}
|
|
onDeleteClick={onDeleteClick}
|
|
onClose={onClose}
|
|
modalProps={modalProps.tablet}
|
|
modalStep={stepIndex}
|
|
cropImageElementRef={cropImageElementRef}
|
|
/>
|
|
|
|
</>
|
|
|
|
)
|
|
}
|
|
case "mobile": {
|
|
return(
|
|
<CropGeneral
|
|
imageUrl={imageUrl}
|
|
handleSizeChange={handleSizeChange}
|
|
handleRotateClick={handleRotateClick}
|
|
getInitialCrop={getInitialCrop}
|
|
cropAspectRatio={cropAspectRatio}
|
|
onDeleteClick={onDeleteClick}
|
|
onClose={onClose}
|
|
modalProps={modalProps.mobile}
|
|
modalStep={stepIndex}
|
|
cropImageElementRef={cropImageElementRef}
|
|
/>
|
|
)
|
|
}
|
|
case "small": {
|
|
return(
|
|
<CropGeneral
|
|
imageUrl={imageUrl}
|
|
handleSizeChange={handleSizeChange}
|
|
handleRotateClick={handleRotateClick}
|
|
getInitialCrop={getInitialCrop}
|
|
cropAspectRatio={cropAspectRatio}
|
|
onDeleteClick={onDeleteClick}
|
|
onClose={onClose}
|
|
modalProps={modalProps.small}
|
|
modalStep={stepIndex}
|
|
cropImageElementRef={cropImageElementRef}
|
|
/>
|
|
)
|
|
}
|
|
}
|
|
} |