react-elegant-ui
Version:
Elegant UI components, made by BEM best practices for react
191 lines (190 loc) • 7.44 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.VirtualTarget = exports.Hover = exports.BigText = void 0;
var _react = _interopRequireWildcard(require("react"));
var _usePopper = require("../../../hooks/behavior/usePopper");
var _desktop = require("../../Button/Button.bundle/desktop");
var _desktop2 = require("../Popup.bundle/desktop");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
var __assign = void 0 && (void 0).__assign || function () {
__assign = Object.assign || function (t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __read = void 0 && (void 0).__read || function (o, n) {
var m = typeof Symbol === "function" && o[Symbol.iterator];
if (!m) return o;
var i = m.call(o),
r,
ar = [],
e;
try {
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
} catch (error) {
e = {
error: error
};
} finally {
try {
if (r && !r.done && (m = i["return"])) m.call(i);
} finally {
if (e) throw e.error;
}
}
return ar;
};
var directions = {
vertical: ['top', 'bottom'],
horizontal: ['left', 'right']
};
var Content = function (props) {
return /*#__PURE__*/_react.default.createElement("div", __assign({}, props, {
style: {
padding: 8,
background: 'var(--color-essential)',
color: 'var(--color-typo-primary)',
maxWidth: '200px',
overflow: 'auto',
borderRadius: 'inherit'
}
}));
};
var Hover = function () {
var btnRef = (0, _react.useRef)(null);
var _a = __read((0, _react.useState)(false), 2),
isVisible = _a[0],
isVisibleSet = _a[1];
return /*#__PURE__*/_react.default.createElement("div", {
style: {
position: 'relative'
}
}, /*#__PURE__*/_react.default.createElement(_desktop.Button, {
innerRef: btnRef,
onMouseEnter: function () {
return isVisibleSet(true);
},
onMouseLeave: function () {
return isVisibleSet(false);
}
}, "Hover me"), /*#__PURE__*/_react.default.createElement(_desktop2.Popup, {
visible: isVisible,
view: "default",
target: "anchor",
anchor: btnRef,
direction: ['top', 'right', 'bottom', 'left'],
hasTail: true,
style: {
display: 'flex'
},
zIndex: 1
}, /*#__PURE__*/_react.default.createElement(Content, null, "Lorem ipsum dolor sit amet.")));
};
exports.Hover = Hover;
function generateGetBoundingClientRect(x, y) {
if (x === void 0) {
x = 0;
}
if (y === void 0) {
y = 0;
}
return function () {
return {
width: 10,
height: 10,
top: y,
right: x,
bottom: y,
left: x,
x: x,
y: y,
toJSON: function () {}
};
};
}
var VirtualTarget = function () {
var _a = __read((0, _react.useState)(false), 2),
isVisible = _a[0],
isVisibleSet = _a[1];
var virtualAnchor = (0, _react.useRef)({
getBoundingClientRect: generateGetBoundingClientRect(100, 200)
});
return /*#__PURE__*/_react.default.createElement("div", {
style: {
position: 'relative'
}
}, /*#__PURE__*/_react.default.createElement(_desktop.Button, {
onPress: function () {
return isVisibleSet(function (state) {
return !state;
});
}
}, "Open popup with virtual anchor"), /*#__PURE__*/_react.default.createElement(_desktop2.Popup, {
hasTail: true,
visible: isVisible,
view: "default",
target: "anchor",
anchor: virtualAnchor,
direction: directions['vertical'],
modifiers: [_usePopper.applyMaxHeight],
onClose: function () {
return isVisibleSet(false);
},
style: {
display: 'flex'
},
zIndex: 1
}, /*#__PURE__*/_react.default.createElement(Content, null, "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quos tenetur excepturi sed explicabo. Odit, nesciunt itaque. Libero itaque voluptates repudiandae fugit et illum saepe qui, expedita ducimus quidem commodi aspernatur porro! Expedita totam commodi iusto quidem tempore vero eaque dicta maxime est nostrum ipsa sunt numquam labore rem doloribus odio quam quia quo laboriosam libero, a provident consequatur sit id? Quo earum, beatae soluta optio autem amet unde eum perspiciatis repudiandae atque ipsam itaque quidem, harum obcaecati necessitatibus sint placeat est aliquid! Assumenda distinctio nesciunt vitae ut quidem itaque tempore, dolorem delectus, ad error, ipsa architecto eos maiores omnis ducimus!")));
};
exports.VirtualTarget = VirtualTarget;
var BigText = function () {
var btnRef = (0, _react.useRef)(null);
var _a = __read((0, _react.useState)(false), 2),
isVisible = _a[0],
isVisibleSet = _a[1];
var _b = __read((0, _react.useState)('vertical'), 2),
direction = _b[0],
setDirection = _b[1];
return /*#__PURE__*/_react.default.createElement("div", {
style: {
position: 'relative'
}
}, /*#__PURE__*/_react.default.createElement(_desktop.Button, {
innerRef: btnRef,
onPress: function (evt) {
if (evt.ctrlKey) {
setDirection(function (dir) {
return dir === 'vertical' ? 'horizontal' : 'vertical';
});
} else {
isVisibleSet(function (state) {
return !state;
});
}
}
}, "Click me [direction: ".concat(direction, "]")), /*#__PURE__*/_react.default.createElement(_desktop2.Popup, {
hasTail: true,
visible: isVisible,
view: "default",
target: "anchor",
anchor: btnRef,
direction: directions[direction],
modifiers: [_usePopper.applyMaxHeight],
// tailOffset={10}
onClose: function () {
return isVisibleSet(false);
},
style: {
display: 'flex'
},
zIndex: 1
}, /*#__PURE__*/_react.default.createElement(Content, null, "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quos tenetur excepturi sed explicabo. Odit, nesciunt itaque. Libero itaque voluptates repudiandae fugit et illum saepe qui, expedita ducimus quidem commodi aspernatur porro! Expedita totam commodi iusto quidem tempore vero eaque dicta maxime est nostrum ipsa sunt numquam labore rem doloribus odio quam quia quo laboriosam libero, a provident consequatur sit id? Quo earum, beatae soluta optio autem amet unde eum perspiciatis repudiandae atque ipsam itaque quidem, harum obcaecati necessitatibus sint placeat est aliquid! Assumenda distinctio nesciunt vitae ut quidem itaque tempore, dolorem delectus, ad error, ipsa architecto eos maiores omnis ducimus!")));
};
exports.BigText = BigText;