@yandex/ui
Version:
Yandex UI components
35 lines (34 loc) • 2.43 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.LoadErrorStub = void 0;
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importStar(require("react"));
var Image_1 = require("@yandex-lego/components/Image");
var LoadErrorStub = function () {
var _a = tslib_1.__read(react_1.useState('http://not-found-image'), 2), imageUrl = _a[0], setImage = _a[1];
var stub = (react_1.default.createElement("img", { src: require('../Image.assets/2x1@1x.png'), style: { position: 'absolute', width: '100%', height: '100%' } }));
react_1.useEffect(function () {
setTimeout(function () { return setImage(require('../Image.assets/img-700w.png')); }, 2000);
}, []);
return (react_1.default.createElement("div", { style: { display: 'grid', gridTemplateColumns: '50% 50%' } },
react_1.default.createElement("div", null,
react_1.default.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_1.default.createElement("pre", null, [
'src="http://not-found-image"',
'fallback="/img-not-found-fallback.png"',
].join('\n')),
react_1.default.createElement(Image_1.Image, { src: "http://not-found-image", fallbackSrc: require('../Image.assets/img-not-found.png'), width: 250 })),
react_1.default.createElement("div", null,
react_1.default.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_1.default.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_1.default.createElement(Image_1.Image, { src: imageUrl, stub: stub, width: 320, height: 160 }))));
};
exports.LoadErrorStub = LoadErrorStub;
exports.LoadErrorStub.story = {
name: 'load error stub',
};