Утилиты

animatedScrollToX / animatedScrollToY

Плавная прокрутка по оси X и Y.

import React from 'react';import { animatedScrollToX } from '@salutejs/plasma-ui';
const ScrollComponent: React.FC = ({ children }) => {    const ref = React.useRef(null);
    React.useLayoutEffect(() => {        if (ref.current) {            // Плавный скролл на 400px после первого рендера компонента            animatedScrollToX(ref.current, 400);        }    }, []);
    return <div ref={ref}>{children}</div>;};

convertRoundnessMatrix

По заданному шаблону-матрице выводит значения для border-radius. Значение символов: r - радиус стандартный, h - радиус округлый (вычисляется из высоты).

import styled from 'styled-components';import { convertRoundnessMatrix } from '@salutejs/plasma-ui';
// Выведет значение для border-radius, равное '1em 2em 2em 1em'const Box = styled.div`    border-radius: ${convertPinsMatrix('r h h r', '1em', '2em')};`;

detectDevice

Возвращает тип устройства, на котором запущено приложение. При запуске в серверном окружении возвращает sberBox. Для определения устройства используется navigator.userAgent.

import { detectDevice } from '@salutejs/plasma-ui';
// Вернет "SberPortal" или "SberBox" или "mobile" (для всех остальных устройств)const deviceKind = detectDevice();

mediaQuery

Обертка над css-медиазапросами с заранее определенными брейкпоинтами.

Для корректной работы на разных поверхностях, необходимо указывать второй параметр deviceScale.

import styled, { css } from 'styled-components';import { mediaQuery, breakpoints } from '@salutejs/plasma-ui';
// Определяем поверхностьconst deviceScale = 2;
// Блок Box примет красный цвет фона на больших экранахconst Box = styled.div`    ${mediaQuery('XL', deviceScale)(css`        background: red;    `)};`;
// Возможно использование массива `breakpoints`, в котором перечислен список разрешенийconst colors = {    xl: 'azure'    lg: 'aliceblue'    md: 'aquamarine'    sm: 'cadetblue'};const Text = styled.span`    ${breakpoints.map((breakpoint) =>        mediaQuery(breakpoint)(css`            color: ${colors[breakpoint]};        `)    )}`;