@sberdevices/plasma-temple/dist/es/pages/SuccessPage/SuccessPage.js

SberDevices CanvasApp Templates.

import React from 'react';
import styled, { css } from 'styled-components';
import { mediaQuery } from '@sberdevices/plasma-ui/utils';
import { useFocusOnMount } from '../../hooks/useFocusOnMount';
import { THROTTLE_WAIT } from '../../hooks/useThrottledCallback';
import { StateLayout } from '../../components/StateLayout/StateLayout';
import { isSberBoxLike } from '../../utils/deviceFamily';
var successIcon = "<svg width=\"126\" height=\"126\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M88.066 54.82a3 3 0 10-4.277-4.208L59.622 75.176l-17.158-14.87a3 3 0 10-3.93 4.534L57.82 81.555a3 3 0 004.104-.164L88.066 54.82z\" fill=\"url(#paint0_linear_1158_14416)\"/><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M126 63c0 34.794-28.206 63-63 63S0 97.794 0 63 28.206 0 63 0s63 28.206 63 63zm-6 0c0 31.48-25.52 57-57 57S6 94.48 6 63 31.52 6 63 6s57 25.52 57 57z\" fill=\"url(#paint1_linear_1158_14416)\"/><defs><linearGradient id=\"successIcon-paint0_linear_1158_14416\" x1=\"-22.911\" y1=\"384.716\" x2=\"-220.337\" y2=\"137.44\" gradientUnits=\"userSpaceOnUse\"><stop stop-color=\"#20DA03\"/><stop offset=\"1\" stop-color=\"#1DF\"/></linearGradient><linearGradient id=\"successIcon-paint1_linear_1158_14416\" x1=\"-22.911\" y1=\"384.716\" x2=\"-220.337\" y2=\"137.44\" gradientUnits=\"userSpaceOnUse\"><stop stop-color=\"#20DA03\"/><stop offset=\"1\" stop-color=\"#1DF\"/></linearGradient></defs></svg>";
var StyledSuccessIcon = /*#__PURE__*/styled.div.withConfig({
  componentId: "plasma-temple__sc-1ydt358-0"
})(["width:7.875rem;height:7.875rem;", " ", " background-image:url(", ");background-size:contain;margin:auto;"], /*#__PURE__*/mediaQuery('M', 2)( /*#__PURE__*/css(["width:5.25rem;height:5.25rem;"])), /*#__PURE__*/mediaQuery('S', 1)( /*#__PURE__*/css(["width:5.25rem;height:5.25rem;"])), successIcon);
/** Компонент страницы для отображения состояния успеха */

export var SuccessPage = function SuccessPage(_ref) {
  var title = _ref.title,
      subtitle = _ref.subtitle,
      buttons = _ref.buttons,
      className = _ref.className;
  var buttonRef = React.useRef(null);
  useFocusOnMount(buttonRef, {
    delay: THROTTLE_WAIT,
    prevent: !isSberBoxLike()
  });
  var buttonsToRender = React.useMemo(function () {
    if (typeof buttons === 'function') {
      return buttons(buttonRef);
    }

    return buttons;
  }, [buttons]);
  return /*#__PURE__*/React.createElement(StateLayout, {
    className: className,
    title: title,
    text: subtitle,
    button: buttonsToRender,
    image: /*#__PURE__*/React.createElement(StyledSuccessIcon, null)
  });
};
//# sourceMappingURL=SuccessPage.js.map