react-elegant-ui
Version:
Elegant UI components, made by BEM best practices for react
180 lines • 6.13 kB
JavaScript
var __assign = this && this.__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 = this && this.__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;
};
import React, { useRef, useState } from 'react';
import { applyMaxHeight } from '../../../hooks/behavior/usePopper';
import { Button } from '../../Button/Button.bundle/desktop';
import { Popup } from '../Popup.bundle/desktop';
var directions = {
vertical: ['top', 'bottom'],
horizontal: ['left', 'right']
};
var Content = function (props) {
return /*#__PURE__*/React.createElement("div", __assign({}, props, {
style: {
padding: 8,
background: 'var(--color-essential)',
color: 'var(--color-typo-primary)',
maxWidth: '200px',
overflow: 'auto',
borderRadius: 'inherit'
}
}));
};
export var Hover = function () {
var btnRef = useRef(null);
var _a = __read(useState(false), 2),
isVisible = _a[0],
isVisibleSet = _a[1];
return /*#__PURE__*/React.createElement("div", {
style: {
position: 'relative'
}
}, /*#__PURE__*/React.createElement(Button, {
innerRef: btnRef,
onMouseEnter: function () {
return isVisibleSet(true);
},
onMouseLeave: function () {
return isVisibleSet(false);
}
}, "Hover me"), /*#__PURE__*/React.createElement(Popup, {
visible: isVisible,
view: "default",
target: "anchor",
anchor: btnRef,
direction: ['top', 'right', 'bottom', 'left'],
hasTail: true,
style: {
display: 'flex'
},
zIndex: 1
}, /*#__PURE__*/React.createElement(Content, null, "Lorem ipsum dolor sit amet.")));
};
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 () {}
};
};
}
export var VirtualTarget = function () {
var _a = __read(useState(false), 2),
isVisible = _a[0],
isVisibleSet = _a[1];
var virtualAnchor = useRef({
getBoundingClientRect: generateGetBoundingClientRect(100, 200)
});
return /*#__PURE__*/React.createElement("div", {
style: {
position: 'relative'
}
}, /*#__PURE__*/React.createElement(Button, {
onPress: function () {
return isVisibleSet(function (state) {
return !state;
});
}
}, "Open popup with virtual anchor"), /*#__PURE__*/React.createElement(Popup, {
hasTail: true,
visible: isVisible,
view: "default",
target: "anchor",
anchor: virtualAnchor,
direction: directions['vertical'],
modifiers: [applyMaxHeight],
onClose: function () {
return isVisibleSet(false);
},
style: {
display: 'flex'
},
zIndex: 1
}, /*#__PURE__*/React.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!")));
};
export var BigText = function () {
var btnRef = useRef(null);
var _a = __read(useState(false), 2),
isVisible = _a[0],
isVisibleSet = _a[1];
var _b = __read(useState('vertical'), 2),
direction = _b[0],
setDirection = _b[1];
return /*#__PURE__*/React.createElement("div", {
style: {
position: 'relative'
}
}, /*#__PURE__*/React.createElement(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.createElement(Popup, {
hasTail: true,
visible: isVisible,
view: "default",
target: "anchor",
anchor: btnRef,
direction: directions[direction],
modifiers: [applyMaxHeight],
// tailOffset={10}
onClose: function () {
return isVisibleSet(false);
},
style: {
display: 'flex'
},
zIndex: 1
}, /*#__PURE__*/React.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!")));
};