169 похожих чатов

Пожалуйста, помогите вычислить в коде переменную delimiter. Этот код нужен

для компонента, который умеет запрашивать у Api необходимое разрешение картинки под
разрешение устройства пользователя, передавая параметр imageWidth. В принципе, из комментариев понятно чего я хочу.
const deviceSizes = [300, 400, 500, 600, 700, 800, 900, 1150]; // из файла констант (настройка размеров экранов), по нему библиотека будет формировать srcset
для браузера

// это Реакт компонент

const AdaptiveImage = ({
delimiters = [1,1,1], // это будет приходить из пропсов. так я буду задавать в каком соотношении к ширине экрана будет картинка в зависимости от типа устройства
src,
width,
height,
alt,
...rest
}) => {

// например delimiters = [1, 1, 2];
// 1 - означает, что картинка будет на весь экран на мобилах
// 1 - на планшетах тоже на весь экран
// 2 - на пол-экрана будет картинка на десктопах

// этот хук получает ширину экрана в пикселях, а также тип текущего устройства
const {
width: screen, isMobile, isTablet, isDesktop,
} = useAdaptive();

const delimiter = // ??? например isDesktop = true, тогда должен быть равен 2 - согласно [1, 1, 2] (на пол-экрана картинка)

// соотношение ширины и высоты картинки, чтобы рассчитать правильно пропорции
const ratio = width / height;

// подсчитанная ширина (разрешение) изображения под размер экрана пользователя
const adaptiveWidth = deviceSizes.reduce((prev, curr) => (Math.abs(curr - screen) < Math.abs(prev - screen) ? curr : prev));

// подсчитанная необходимая высота картинки, чтобы сохранить пропорции
const adaptiveHeight = adaptiveWidth / ratio;

return (
<Image
loader={({ src: imageSrc, width: imageWidth }) => loaderImage(imageSrc, imageWidth)}
src={src}
width={adaptiveWidth}
height={adaptiveHeight}
alt={alt}
{...rest}
/>
);
};

3 ответов

11 просмотров

let delimeter; if(isMobile) { delimeter = delimiters[0] }else if(isTablet){ delimeter = delimiters[1] }else if(isDesktop){ delimeter = delimiters[2] } ну вот так?

N0rda_a Миролюбов
хакер))

Не, по хакерски это вот так delimeters[isMobile * 1 + isTablet *2 + isDesktop * 3] работать будет, но не в коем случае так не делай.

Похожие вопросы

Обсуждают сегодня

Если у меня есть такой класс: Object = {} function Object:new(a_name, a_transform, a_color, a_mesh, a_material, a_shader, a_textures) local private = {} private.n...
Cuarno Vile
4
я не магистр хаскеля, но разве не может лейзи тип конвертнуться в не-лейзи запросив вычисление содержимого прям при инициализации?
deadgnom32 λ madao
100
зачем же переименовывать ? чтобы кол-во участников возросло или вдруг IBM от этого снова на свифте начнет кодить ? Я не понимаю что страшного в том что свифт гавно, если это т...
Oleh Nerzh
10
А еще в перле можно уже @arr1 + @arr2?
Sergei Zhmylove
53
@MrMiscipitlick А можешь макрос написать, который будет вычислять смещение относительно переданных меток? Просто .label1-.label2, и вернуть значение.
КТ315
35
здравствуйте. совершаю вот такую вещь: strcpy(line, (char)current_number); где current number — неподписанный шорт, line — массив чаров. ругань следующая: main.c:29:30: error...
Roberto's Ширгозиев
13
@NikaBelurgHR Бот? Ассемблер?
КТ315
11
юзеры Jetpack Compose тут?
Qtless Qtless
8
Добрый день! Подскажите, пожалуйста: какими компетенциями нужно обладать, чтобы претендовать на работу эрланг (отдельная благодарность, если про элексир тоже подскажете) разр...
via ☸️ led
20
Привет всем. появился вопрос. Разрабатываю сайт, в данный момент он запущен. Хостинг beget. Добавляю на сайт яндекс метрику с помощью полей client-settings (взято отсюда http...
Andrew
2
Карта сайта