@yandex/ui
Version:
Yandex UI components
31 lines (30 loc) • 2.14 kB
JavaScript
import { __read } from "tslib";
import React, { useEffect, useState } from 'react';
import { Image } from '@yandex-lego/components/Image';
export var LoadErrorStub = function () {
var _a = __read(useState('http://not-found-image'), 2), imageUrl = _a[0], setImage = _a[1];
var stub = (React.createElement("img", { src: require('../Image.assets/2x1@1x.png'), style: { position: 'absolute', width: '100%', height: '100%' } }));
useEffect(function () {
setTimeout(function () { return setImage(require('../Image.assets/img-700w.png')); }, 2000);
}, []);
return (React.createElement("div", { style: { display: 'grid', gridTemplateColumns: '50% 50%' } },
React.createElement("div", null,
React.createElement("p", null, "\u041E\u0448\u0438\u0431\u043A\u0430 \u0437\u0430\u0433\u0440\u0443\u0437\u043A\u0438 \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u044F, \u043F\u043E\u0434\u0441\u0442\u0430\u0432\u043B\u044F\u0435\u043C fallback"),
React.createElement("pre", null, [
'src="http://not-found-image"',
'fallback="/img-not-found-fallback.png"',
].join('\n')),
React.createElement(Image, { src: "http://not-found-image", fallbackSrc: require('../Image.assets/img-not-found.png'), width: 250 })),
React.createElement("div", null,
React.createElement("p", null, "\u041F\u043E\u043A\u0430\u0437\u044B\u0432\u0430\u0435\u043C \u043F\u043E\u0434\u043B\u043E\u0436\u043A\u0443 \u043D\u0430 \u0432\u0440\u0435\u043C\u044F \u0437\u0430\u0433\u0440\u0443\u0437\u043A\u0438 \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u044F"),
React.createElement("pre", null,
'.stub { position: absolute; width: 100%; height: 100% }\n\n',
[
'src="./Image.assets/img-700w.png"',
'stub={<img className="stub" src="loading.png"} />',
].join('\n')),
React.createElement(Image, { src: imageUrl, stub: stub, width: 320, height: 160 }))));
};
LoadErrorStub.story = {
name: 'load error stub',
};