grid-template-columns: minmax(262px, max-content) minmax(188px, max-content) minmax(108px, max-content);grid-template-columns: 262px 188px 108px;
grid-template-columns: 262px 188px 108px; тогда в контейнере будет скролл, из-за статических размеров колонок....grid-template-columns: 262px 188px 108px; наверное...) import React, { FC } from 'react';
import ReactCrop, { Crop } from 'react-image-crop';
import { useTranslation } from 'react-i18next';
import Icon from '../icon/Icon';
import 'react-image-crop/dist/ReactCrop.css';
import Style from './CropImage.module.scss';
interface ICropImage {
minWidth?: number;
minHeight?: number;
classes?: string;
imageSrc: any;
crop: Crop;
setCrop: any;
imgRef: any;
onSelectFile: any;
onLoad: any;
}
const CropImage: FC<ICropImage> = ({
classes,
minWidth = 250,
minHeight = 250,
imageSrc,
crop,
setCrop,
imgRef,
onSelectFile,
onLoad
}) => {
const { t } = useTranslation();
return (
<div className={classes ? classes : ''}>
{imageSrc ? (
<div className={Style.cropWrapper}>
<ReactCrop
crop={crop}
minWidth={minWidth}
minHeight={minHeight}
onChange={(c) => setCrop(c)}
aspect={1 / 1}
>
<img ref={imgRef} src={imageSrc} onLoad={onLoad} alt="crop image" />
</ReactCrop>
</div>
) : (
<label
className={Style.inputImage}
title={t('crop-image.upload-a-photo')}
>
<input type="file" accept="image/*" onChange={onSelectFile} />
<Icon id="attach" width={24} height={22} />
<span>{t('crop-image.upload-a-photo')}</span>
</label>
)}
</div>
);
};
export default CropImage;import React, { useCallback, useRef, useState } from 'react';
import { Crop } from 'react-image-crop';
export const useCropImage = (
width: number,
height: number,
minWidth = 250,
minHeight = 250
) => {
const imgRef = useRef<HTMLImageElement>(null);
const [crop, setCrop] = useState<Crop>({
unit: 'px',
x: 130,
y: 36,
width: width < minWidth ? minWidth : width,
height: height < minHeight ? minHeight : height
});
const [imageSrc, setImageSrc] = useState<any>();
const [image, setImage] = useState<HTMLImageElement>();
const onSelectFile = (event: React.ChangeEvent<HTMLInputElement>) => {
if (event.target.files && event.target.files.length > 0) {
const reader = new FileReader();
reader.readAsDataURL(event.target.files[0]);
reader.addEventListener('load', () => setImageSrc(reader.result));
}
};
const onLoad = useCallback((evt: any) => setImage(evt.target), []);
const getCroppedImg = () => {
if (image) {
const canvas = document.createElement('canvas') as HTMLCanvasElement;
const scaleX = image.naturalWidth / image.width;
const scaleY = image.naturalHeight / image.height;
canvas.width = crop.width;
canvas.height = crop.height;
canvas
.getContext('2d')!
.drawImage(
image,
crop.x * scaleX,
crop.y * scaleY,
crop.width * scaleX,
crop.height * scaleY,
0,
0,
crop.width,
crop.height
);
return canvas
.toDataURL('image/jpeg')
.replace('image/png', 'image/octet-stream');
}
};
return {
crop,
imgRef,
onLoad,
setCrop,
imageSrc,
minWidth,
minHeight,
setImageSrc,
onSelectFile,
getCroppedImg
};
};Откуда вы взяли, что методы контекста можно вызывать в отрыве от, м-м-м, КОНТЕКСТА?
<svg width="5" height="8" viewBox="0 0 5 8" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 7L4 4L1 1" stroke-width="0.5"/>
</svg>.icon-angle-right {
width: 3px;
height: 6px;
}
grid-template-columns: 1.3fr 0.93fr 0.5fr;