@yandex/ui
Version:
Yandex UI components
37 lines (36 loc) • 2.05 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Default = void 0;
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importStar(require("react"));
var withZIndex_1 = require("@yandex-lego/components/withZIndex");
var bundle_1 = require("@yandex-lego/components/Button/desktop/bundle");
var Component = function (_a) {
var zIndex = _a.zIndex, innerRef = _a.innerRef, top = _a.top, left = _a.left, bgColor = _a.bgColor, style = _a.style, rest = tslib_1.__rest(_a, ["zIndex", "innerRef", "top", "left", "bgColor", "style"]);
return (react_1.default.createElement("div", tslib_1.__assign({ style: {
width: '50px',
height: '50px',
position: 'absolute',
top: top,
left: left,
backgroundColor: bgColor,
zIndex: zIndex,
}, ref: innerRef }, rest)));
};
var ComponentWithZIndex1 = withZIndex_1.withZIndex(Component);
var ComponentWithZIndex2 = withZIndex_1.withZIndex(Component);
var Default = function () {
var _a = tslib_1.__read(react_1.useState(true), 2), first = _a[0], setFirst = _a[1];
var _b = tslib_1.__read(react_1.useState(true), 2), visible = _b[0], setVisible = _b[1];
var handleSwap = function () {
setFirst(function (prev) { return !prev; });
setVisible(false);
setTimeout(function () { return setVisible(true); }, 100);
};
return (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement("div", { style: { position: 'relative', float: 'left' } },
react_1.default.createElement(ComponentWithZIndex1, { top: -10, left: 80, bgColor: "lightgray", visible: visible, zIndexGroupLevel: first ? 1 : 0 }),
react_1.default.createElement(ComponentWithZIndex2, { top: 0, left: 90, bgColor: "#fc0", visible: visible, zIndexGroupLevel: first ? 0 : 1 })),
react_1.default.createElement(bundle_1.Button, { view: "action", size: "m", onClick: handleSwap }, "Swap")));
};
exports.Default = Default;