@ape.swap/bonds-sdk 1.0.159 → 1.0.161

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -59,8 +59,6 @@ import Svg from '../uikit/Svg';
59
59
  import '../../scss/Bonds.scss';
60
60
  import { BigNumber } from 'bignumber.js';
61
61
  import { ChainId } from '../../config/chains';
62
- import ProgressBarWrapper from '../ProgressBar/ProgressBarWrapper';
63
- import ProgressBar from '../ProgressBar/ProgressBar';
64
62
  var Bonds = function (_a) {
65
63
  var connectionString = _a.connectionString;
66
64
  var _b = useWeb3React(), account = _b.account, isActive = _b.isActive;
@@ -165,13 +163,7 @@ var Bonds = function (_a) {
165
163
  };
166
164
  return (_jsxs(ThemeUIProvider, __assign({ theme: defaultTheme }, { children: [isActive && account && _jsx("p", { children: account }), isActive && account && _jsx("button", __assign({ onClick: handleApprove }, { children: "Approve USDT" })), _jsxs(Flex, __assign({ className: "container table-container" }, { children: [_jsxs(Flex, __assign({ className: "container header-container" }, { children: [_jsx(Flex, __assign({ className: "column column-header" }, { children: "Tokens" })), _jsx(Flex, __assign({ className: "column column-header" }, { children: "Discount" })), _jsx(Flex, __assign({ className: "column column-header" }, { children: "ARR" })), _jsx(Flex, __assign({ className: "column column-header" }, { children: "Terms" })), _jsx(Flex, __assign({ className: "column column-header" }, { children: "Tokens Remaining" })), _jsx(Flex, { className: "column column-header" })] })), sortedBonds.map(function (bond) {
167
165
  var _a, _b, _c;
168
- return (_jsxs(Flex, __assign({ className: "container bondrow-container", onClick: function () { return rowClick(bond); } }, { children: [_jsx(Flex, __assign({ className: "column column-token" }, { children: bond.showcaseTokenName })), _jsx(Flex, __assign({ className: "column column-discount ".concat(getDiscountColor(bond === null || bond === void 0 ? void 0 : bond.discount)) }, { children: "".concat((_a = bond === null || bond === void 0 ? void 0 : bond.discount) === null || _a === void 0 ? void 0 : _a.toFixed(2), "%") })), _jsx(Flex, __assign({ className: "column column-arr" }, { children: "".concat(((((_b = bond === null || bond === void 0 ? void 0 : bond.discount) !== null && _b !== void 0 ? _b : 0) * 365) / vestingTime(bond.vestingTerm).days).toFixed(2), "%") })), _jsx(Flex, __assign({ className: "column column-term" }, { children: vestingTime(bond.vestingTerm).days ? "".concat(vestingTime(bond.vestingTerm).days, " D") : '-' })), _jsxs(Flex, __assign({ className: "column column-tokensremaining" }, { children: [_jsx(ProgressBarWrapper, { title: '', value: _jsx(ProgressBar, { value: new BigNumber(bond.tokensRemaining).div(bond.maxTotalPayout).times(100).toNumber() }), style: {
169
- width: '127px',
170
- height: '25px',
171
- flexDirection: 'column',
172
- justifyContent: 'center',
173
- display: ['none', 'none', 'none', 'flex'],
174
- }, showTooltip: true }), bond.tokensRemaining.split('.')[0]] })), _jsx(Flex, __assign({ className: "column column-hotbond" }, { children: _jsx(Flex, __assign({ className: "column column-icon" }, { children: hotBonds.includes(bond.billAddress.toLowerCase()) && ((_c = bond.discount) !== null && _c !== void 0 ? _c : 0) > 0 && (_jsx(Svg, { icon: "fire", width: "20px" })) })) }))] }), bond.billAddress));
166
+ return (_jsxs(Flex, __assign({ className: "container bondrow-container", onClick: function () { return rowClick(bond); } }, { children: [_jsx(Flex, __assign({ className: "column column-token" }, { children: bond.showcaseTokenName })), _jsx(Flex, __assign({ className: "column column-discount ".concat(getDiscountColor(bond === null || bond === void 0 ? void 0 : bond.discount)) }, { children: "".concat((_a = bond === null || bond === void 0 ? void 0 : bond.discount) === null || _a === void 0 ? void 0 : _a.toFixed(2), "%") })), _jsx(Flex, __assign({ className: "column column-arr" }, { children: "".concat(((((_b = bond === null || bond === void 0 ? void 0 : bond.discount) !== null && _b !== void 0 ? _b : 0) * 365) / vestingTime(bond.vestingTerm).days).toFixed(2), "%") })), _jsx(Flex, __assign({ className: "column column-term" }, { children: vestingTime(bond.vestingTerm).days ? "".concat(vestingTime(bond.vestingTerm).days, " D") : '-' })), _jsx(Flex, __assign({ className: "column column-tokensremaining" }, { children: bond.tokensRemaining.split('.')[0] })), _jsx(Flex, __assign({ className: "column column-hotbond" }, { children: _jsx(Flex, __assign({ className: "column column-icon" }, { children: hotBonds.includes(bond.billAddress.toLowerCase()) && ((_c = bond.discount) !== null && _c !== void 0 ? _c : 0) > 0 && (_jsx(Svg, { icon: "fire", width: "20px" })) })) }))] }), bond.billAddress));
175
167
  })] }))] })));
176
168
  };
177
169
  export default Bonds;
@@ -34,6 +34,15 @@
34
34
  }
35
35
  }
36
36
 
37
+ .column {
38
+ display: flex;
39
+ justify-content: center;
40
+ align-items: center;
41
+ flex: 1; /* Adjust the flex basis as needed for each column */
42
+ min-width: 120px; /* Example min-width, adjust based on content */
43
+ text-align: center; /* Ensure text is centered if that's your design */
44
+ }
45
+
37
46
  .column.column-token {
38
47
  width: 100px;
39
48
  flex-direction: column;
package/package.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "description": "Ape Bond SDK",
4
4
  "author": "Ape Bond",
5
5
  "license": "MIT",
6
- "version": "1.0.159",
6
+ "version": "1.0.161",
7
7
  "main": "dist/index.js",
8
8
  "module": "dist/index.es.js",
9
9
  "types": "dist/index.d.ts",
@@ -1,3 +0,0 @@
1
- import React from 'react';
2
- declare const Flex: ({ children, ...props }: any) => React.JSX.Element;
3
- export default Flex;
@@ -1,29 +0,0 @@
1
- var __assign = (this && this.__assign) || function () {
2
- __assign = Object.assign || function(t) {
3
- for (var s, i = 1, n = arguments.length; i < n; i++) {
4
- s = arguments[i];
5
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
6
- t[p] = s[p];
7
- }
8
- return t;
9
- };
10
- return __assign.apply(this, arguments);
11
- };
12
- var __rest = (this && this.__rest) || function (s, e) {
13
- var t = {};
14
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
15
- t[p] = s[p];
16
- if (s != null && typeof Object.getOwnPropertySymbols === "function")
17
- for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
18
- if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
19
- t[p[i]] = s[p[i]];
20
- }
21
- return t;
22
- };
23
- import { jsx as _jsx } from "theme-ui/jsx-runtime";
24
- import { Flex as ThemeUIFlex } from 'theme-ui';
25
- var Flex = function (_a) {
26
- var children = _a.children, props = __rest(_a, ["children"]);
27
- return _jsx(ThemeUIFlex, __assign({}, props, { children: children }));
28
- };
29
- export default Flex;
@@ -1,7 +0,0 @@
1
- import React from 'react';
2
- interface ProgressBarProps {
3
- value: number;
4
- color?: string;
5
- }
6
- declare const ProgressBar: React.FC<ProgressBarProps>;
7
- export default ProgressBar;
@@ -1,29 +0,0 @@
1
- var __assign = (this && this.__assign) || function () {
2
- __assign = Object.assign || function(t) {
3
- for (var s, i = 1, n = arguments.length; i < n; i++) {
4
- s = arguments[i];
5
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
6
- t[p] = s[p];
7
- }
8
- return t;
9
- };
10
- return __assign.apply(this, arguments);
11
- };
12
- import { jsx as _jsx } from "theme-ui/jsx-runtime";
13
- import { Box, Flex } from 'theme-ui';
14
- var ProgressBar = function (_a) {
15
- var value = _a.value, _b = _a.color, color = _b === void 0 ? 'text' : _b;
16
- return (_jsx(Flex, __assign({ sx: { width: ['100px', '100px', '100px', '100%'], alignItems: 'center', flexDirection: 'row', mt: '5px' } }, { children: _jsx(Box, __assign({ sx: {
17
- width: '100%',
18
- height: '5px',
19
- backgroundColor: 'white4',
20
- borderRadius: '10px',
21
- overflow: 'hidden',
22
- } }, { children: _jsx(Box, { sx: {
23
- width: "".concat(value <= 3 ? 3 : value, "%"),
24
- background: color,
25
- borderRadius: '10px',
26
- height: '100%',
27
- } }) })) })));
28
- };
29
- export default ProgressBar;
@@ -1,14 +0,0 @@
1
- import React from 'react';
2
- import { ThemeUIStyleObject } from 'theme-ui';
3
- export interface ProgressBarWrapperProps {
4
- title?: string;
5
- value?: React.ReactNode;
6
- value2Direction?: 'column' | 'row';
7
- toolTip?: string;
8
- toolTipPlacement?: 'topLeft' | 'topRight' | 'bottomRight' | 'bottomLeft';
9
- toolTipTransform?: string;
10
- style?: ThemeUIStyleObject;
11
- showTooltip?: boolean;
12
- }
13
- declare const _default: React.NamedExoticComponent<ProgressBarWrapperProps>;
14
- export default _default;
@@ -1,25 +0,0 @@
1
- var __assign = (this && this.__assign) || function () {
2
- __assign = Object.assign || function(t) {
3
- for (var s, i = 1, n = arguments.length; i < n; i++) {
4
- s = arguments[i];
5
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
6
- t[p] = s[p];
7
- }
8
- return t;
9
- };
10
- return __assign.apply(this, arguments);
11
- };
12
- import { jsx as _jsx, jsxs as _jsxs } from "theme-ui/jsx-runtime";
13
- import React from 'react';
14
- import { useTranslation } from '../../contexts/Localization';
15
- import { styles } from './styles';
16
- import { Flex } from 'theme-ui';
17
- import TooltipBubble from '../Tooltip';
18
- import Skeleton from '../Skeleton';
19
- import Text from '../Text';
20
- var ProgressBarWrapper = function (_a) {
21
- var title = _a.title, value = _a.value, style = _a.style, showTooltip = _a.showTooltip, toolTipPlacement = _a.toolTipPlacement, toolTipTransform = _a.toolTipTransform, toolTip = _a.toolTip;
22
- var t = useTranslation().t;
23
- return (_jsxs(Flex, __assign({ sx: style }, { children: [_jsx(Flex, __assign({ sx: { alignItems: 'center' } }, { children: _jsx(Text, __assign({ sx: styles.titleText }, { children: t("".concat(title)) })) })), showTooltip ? (_jsx(Flex, __assign({ sx: { alignItems: 'center', width: '100%' } }, { children: _jsx(TooltipBubble, __assign({ placement: toolTipPlacement, transformTip: toolTipTransform, body: _jsx(Flex, __assign({ sx: { justifyContent: 'center' } }, { children: toolTip })), width: "250px" }, { children: _jsx(Flex, __assign({ sx: { justifyContent: 'center', alignItems: 'center', width: '127px' } }, { children: value ? value : _jsx(Skeleton, { sx: styles.skeleton }) })) })) }))) : (_jsx(Flex, __assign({ sx: { justifyContent: 'center', alignItems: 'center' } }, { children: value ? value : _jsx(Skeleton, { sx: styles.skeleton }) })))] })));
24
- };
25
- export default React.memo(ProgressBarWrapper);
@@ -1,2 +0,0 @@
1
- import { ThemeUIStyleObject } from 'theme-ui';
2
- export declare const styles: Record<'listCardContainer' | 'listViewContainer' | 'titleContainer' | 'infoContentMobile' | 'tokensContainer' | 'titleText' | 'skeleton' | 'valueText' | 'secondaryText' | 'cardContentContainer' | 'animationDiv' | 'expandedWrapper', ThemeUIStyleObject>;
@@ -1,82 +0,0 @@
1
- export var styles = {
2
- listCardContainer: {
3
- borderRadius: 0,
4
- flexDirection: ['column', 'column', 'column', 'row'],
5
- alignItems: 'center',
6
- justifyContent: 'space-between',
7
- background: 'white2',
8
- borderBottom: '1px solid rgba(226, 226, 226, .2)',
9
- padding: ['10px 20px 10px 20px', '10px 20px 10px 20px', '10px 20px 10px 20px', '0 30px 0 30px'],
10
- margin: '0 10px 0 10px',
11
- maxWidth: ['500px', '500px', '500px', '100%'],
12
- minWidth: '300px',
13
- width: '100%',
14
- height: ['unset', 'unset', 'unset', '86px'],
15
- },
16
- listViewContainer: {
17
- display: 'flex',
18
- flexDirection: 'column',
19
- alignItems: 'center',
20
- width: '100%',
21
- },
22
- titleContainer: {
23
- width: '100%',
24
- justifyContent: 'space-between',
25
- my: '5px',
26
- },
27
- infoContentMobile: {
28
- display: ['flex', 'flex', 'flex', 'none'],
29
- alignItems: 'center',
30
- },
31
- tokensContainer: {
32
- alignItems: 'center',
33
- height: '100%',
34
- width: '100%',
35
- },
36
- titleText: {
37
- opacity: 0.6,
38
- fontSize: '12px',
39
- lineHeight: ['16px', '16px', '16px', '24px'],
40
- fontWeight: 400,
41
- },
42
- skeleton: {
43
- width: ['45px', '45px', '60px'],
44
- maxHeight: '18px',
45
- minHeight: '18px',
46
- },
47
- valueText: {
48
- fontSize: ['12px', '12px', '12px', '14px'],
49
- color: 'primaryBright',
50
- lineHeight: '16px',
51
- fontWeight: 700,
52
- mr: '5px',
53
- display: 'flex',
54
- alignItems: 'center',
55
- },
56
- secondaryText: {
57
- fontSize: '12px',
58
- color: 'gray',
59
- lineHeight: '16px',
60
- fontWeight: 400,
61
- },
62
- cardContentContainer: {
63
- width: '100%',
64
- height: '100%',
65
- alignItems: 'center',
66
- justifyContent: 'flex-end',
67
- },
68
- animationDiv: {
69
- position: 'relative',
70
- width: '100%',
71
- maxWidth: ['500px', '500px', '500px', '100%'],
72
- minWidth: '300px',
73
- },
74
- expandedWrapper: {
75
- background: 'white3',
76
- flexDirection: 'column',
77
- justifyContent: 'space-between',
78
- padding: '15px 10px',
79
- flexWrap: 'wrap',
80
- alignItems: 'center',
81
- },
82
- };
@@ -1,4 +0,0 @@
1
- import React from 'react';
2
- import { SkeletonProps } from './types';
3
- declare const Skeleton: ({ variant, animation, ...props }: SkeletonProps | any) => React.JSX.Element;
4
- export default Skeleton;
@@ -1,31 +0,0 @@
1
- var __assign = (this && this.__assign) || function () {
2
- __assign = Object.assign || function(t) {
3
- for (var s, i = 1, n = arguments.length; i < n; i++) {
4
- s = arguments[i];
5
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
6
- t[p] = s[p];
7
- }
8
- return t;
9
- };
10
- return __assign.apply(this, arguments);
11
- };
12
- var __rest = (this && this.__rest) || function (s, e) {
13
- var t = {};
14
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
15
- t[p] = s[p];
16
- if (s != null && typeof Object.getOwnPropertySymbols === "function")
17
- for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
18
- if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
19
- t[p[i]] = s[p[i]];
20
- }
21
- return t;
22
- };
23
- import { jsx as _jsx } from "theme-ui/jsx-runtime";
24
- import { Box } from 'theme-ui';
25
- import { animation as ANIMATION, variant as VARIANT } from './types';
26
- import styles from './styles';
27
- var Skeleton = function (_a) {
28
- var _b = _a.variant, variant = _b === void 0 ? VARIANT.RECT : _b, _c = _a.animation, animation = _c === void 0 ? ANIMATION.PULSE : _c, props = __rest(_a, ["variant", "animation"]);
29
- return (_jsx(Box, __assign({}, props, { sx: __assign(__assign({}, (animation === ANIMATION.WAVES ? styles.waves : styles.pulse)), { height: props.height, width: props.width, borderRadius: variant === VARIANT.RECT ? '10px' : '50%' }) })));
30
- };
31
- export default Skeleton;
@@ -1,5 +0,0 @@
1
- import { ThemeUIStyleObject } from 'theme-ui';
2
- export declare const waves: import("@emotion/serialize").Keyframes;
3
- export declare const pulse: import("@emotion/serialize").Keyframes;
4
- declare const styles: Record<string, ThemeUIStyleObject>;
5
- export default styles;
@@ -1,40 +0,0 @@
1
- import { keyframes } from '@emotion/react';
2
- export var waves = keyframes({
3
- from: { left: '-150px' },
4
- to: { left: '100%' },
5
- });
6
- export var pulse = keyframes({
7
- '0%': { opacity: 1 },
8
- '50%': { opacity: 0.4 },
9
- '100%': { opacity: 1 },
10
- });
11
- var styles = {
12
- waves: {
13
- position: 'relative',
14
- overflow: 'hidden',
15
- transform: 'translate3d(0, 0, 0)',
16
- borderRadius: '',
17
- minHeight: '20px',
18
- display: 'block',
19
- backgroundColor: 'backgroundDisabled',
20
- '&:before': {
21
- content: "\"\"",
22
- position: 'absolute',
23
- backgroundImage: 'linear-gradient(90deg, transparent, rgba(243, 243, 243, 0.3), transparent)',
24
- top: 0,
25
- left: '-150px',
26
- height: '100%',
27
- width: '250px',
28
- animation: "".concat(waves, " 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite"),
29
- },
30
- },
31
- pulse: {
32
- animation: "".concat(pulse, " 2s infinite ease-out"),
33
- transform: 'translate3d(0, 0, 0)',
34
- borderRadius: '2px',
35
- minHeight: '20px',
36
- display: 'block',
37
- backgroundColor: 'backgroundDisabled',
38
- },
39
- };
40
- export default styles;
@@ -1,18 +0,0 @@
1
- import { BoxProps } from 'theme-ui';
2
- export declare enum animation {
3
- WAVES = "waves",
4
- PULSE = "pulse"
5
- }
6
- export declare enum variant {
7
- RECT = "rect",
8
- CIRCLE = "circle"
9
- }
10
- type Animation = `${animation}`;
11
- type Variant = `${variant}`;
12
- export interface SkeletonProps extends BoxProps {
13
- animation?: Animation;
14
- variant?: Variant;
15
- width?: string | number;
16
- height?: string | number;
17
- }
18
- export {};
@@ -1,10 +0,0 @@
1
- export var animation;
2
- (function (animation) {
3
- animation["WAVES"] = "waves";
4
- animation["PULSE"] = "pulse";
5
- })(animation || (animation = {}));
6
- export var variant;
7
- (function (variant) {
8
- variant["RECT"] = "rect";
9
- variant["CIRCLE"] = "circle";
10
- })(variant || (variant = {}));
@@ -1,4 +0,0 @@
1
- import React from 'react';
2
- import { TextProps } from './types';
3
- declare const Text: ({ variant, weight, size, children, color, ...props }: TextProps | any) => React.JSX.Element;
4
- export default Text;
@@ -1,35 +0,0 @@
1
- var __assign = (this && this.__assign) || function () {
2
- __assign = Object.assign || function(t) {
3
- for (var s, i = 1, n = arguments.length; i < n; i++) {
4
- s = arguments[i];
5
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
6
- t[p] = s[p];
7
- }
8
- return t;
9
- };
10
- return __assign.apply(this, arguments);
11
- };
12
- var __rest = (this && this.__rest) || function (s, e) {
13
- var t = {};
14
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
15
- t[p] = s[p];
16
- if (s != null && typeof Object.getOwnPropertySymbols === "function")
17
- for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
18
- if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
19
- t[p[i]] = s[p[i]];
20
- }
21
- return t;
22
- };
23
- import { jsx as _jsx } from "theme-ui/jsx-runtime";
24
- import { Text as ThemeUIText } from 'theme-ui';
25
- import { variants } from './types';
26
- var Text = function (_a) {
27
- var _b = _a.variant, variant = _b === void 0 ? variants.NORMAL : _b, _c = _a.weight, weight = _c === void 0 ? variants.NORMAL : _c, size = _a.size, children = _a.children, _d = _a.color, color = _d === void 0 ? 'text' : _d, props = __rest(_a, ["variant", "weight", "size", "children", "color"]);
28
- return (_jsx(ThemeUIText, __assign({}, props, { sx: {
29
- variant: variant === variants.LINK ? "flex.".concat(variant) : "text.".concat(variant),
30
- color: color,
31
- fontWeight: weight,
32
- fontSize: size,
33
- } }, { children: children })));
34
- };
35
- export default Text;
@@ -1,23 +0,0 @@
1
- import { TextProps as ThemeUITextProps } from 'theme-ui';
2
- export declare enum variants {
3
- SMALL = "sm",
4
- NORMAL = "md",
5
- LARGE = "lg",
6
- LINK = "link"
7
- }
8
- export declare enum weights {
9
- LIGHT = "light",
10
- NORMAL = "normal",
11
- BOLD = "bold"
12
- }
13
- type variantProps = `${variants}`;
14
- type weightProps = `${weights}` | number;
15
- type sizeProps = string;
16
- export interface TextProps extends Omit<ThemeUITextProps, 'sx'> {
17
- variant?: variantProps;
18
- weight?: weightProps;
19
- color?: string;
20
- size?: sizeProps;
21
- [key: string]: any;
22
- }
23
- export {};
@@ -1,13 +0,0 @@
1
- export var variants;
2
- (function (variants) {
3
- variants["SMALL"] = "sm";
4
- variants["NORMAL"] = "md";
5
- variants["LARGE"] = "lg";
6
- variants["LINK"] = "link";
7
- })(variants || (variants = {}));
8
- export var weights;
9
- (function (weights) {
10
- weights["LIGHT"] = "light";
11
- weights["NORMAL"] = "normal";
12
- weights["BOLD"] = "bold";
13
- })(weights || (weights = {}));
@@ -1,4 +0,0 @@
1
- import React from 'react';
2
- import { TooltipProps } from './types';
3
- declare const TooltipBubble: React.FC<TooltipProps>;
4
- export default TooltipBubble;
@@ -1,66 +0,0 @@
1
- var __assign = (this && this.__assign) || function () {
2
- __assign = Object.assign || function(t) {
3
- for (var s, i = 1, n = arguments.length; i < n; i++) {
4
- s = arguments[i];
5
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
6
- t[p] = s[p];
7
- }
8
- return t;
9
- };
10
- return __assign.apply(this, arguments);
11
- };
12
- var __rest = (this && this.__rest) || function (s, e) {
13
- var t = {};
14
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
15
- t[p] = s[p];
16
- if (s != null && typeof Object.getOwnPropertySymbols === "function")
17
- for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
18
- if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
19
- t[p[i]] = s[p[i]];
20
- }
21
- return t;
22
- };
23
- var _a;
24
- import { jsx as _jsx, jsxs as _jsxs } from "theme-ui/jsx-runtime";
25
- import { Box } from 'theme-ui';
26
- import { placements } from './types';
27
- import style, { container } from './styles';
28
- var placementStyles = (_a = {},
29
- _a[placements.BOTTOMLEFT] = {
30
- top: 'calc(100% + 15px)',
31
- left: 0,
32
- },
33
- _a[placements.BOTTOMRIGHT] = {
34
- top: 'calc(100% + 15px)',
35
- right: 0,
36
- },
37
- _a[placements.TOPLEFT] = {
38
- bottom: 'calc(100% + 15px)',
39
- left: 0,
40
- },
41
- _a[placements.TOPRIGHT] = {
42
- bottom: 'calc(100% + 15px)',
43
- right: 0,
44
- },
45
- _a[placements.ONLYCONTAINERRIGHT] = {
46
- top: 'calc(100% + 15px)',
47
- right: 0,
48
- },
49
- _a);
50
- var TooltipBubble = function (_a) {
51
- var width = _a.width, _b = _a.placement, placement = _b === void 0 ? placements.BOTTOMRIGHT : _b, body = _a.body, backgroundColor = _a.backgroundColor, hideTooltip = _a.hideTooltip, children = _a.children, transformTip = _a.transformTip, props = __rest(_a, ["width", "placement", "body", "backgroundColor", "hideTooltip", "children", "transformTip"]);
52
- var backgroundColorStyle = backgroundColor
53
- ? {
54
- backgroundColor: backgroundColor,
55
- '&:before': {
56
- borderBottomColor: placement === placements.BOTTOMLEFT || placement === placements.BOTTOMRIGHT ? backgroundColor : undefined,
57
- borderTopColor: placement === placements.TOPLEFT || placement === placements.TOPRIGHT ? backgroundColor : undefined,
58
- },
59
- }
60
- : {};
61
- var handleClick = function (event) {
62
- event.stopPropagation();
63
- };
64
- return (_jsxs(Box, __assign({ sx: container(hideTooltip), onClick: handleClick }, { children: [_jsx(Box, __assign({ sx: __assign({ position: 'absolute' }, (placementStyles[placement] || {})) }, { children: _jsx(Box, __assign({ sx: __assign(__assign(__assign(__assign({ position: 'relative' }, style.default), style[placement]), backgroundColorStyle), { width: width, transform: transformTip }) }, props, { children: body })) })), children] })));
65
- };
66
- export default TooltipBubble;
@@ -1,4 +0,0 @@
1
- import { ThemeUIStyleObject } from 'theme-ui';
2
- export declare const container: (hide?: boolean) => ThemeUIStyleObject;
3
- declare const styles: Record<string, ThemeUIStyleObject>;
4
- export default styles;
@@ -1,60 +0,0 @@
1
- var __assign = (this && this.__assign) || function () {
2
- __assign = Object.assign || function(t) {
3
- for (var s, i = 1, n = arguments.length; i < n; i++) {
4
- s = arguments[i];
5
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
6
- t[p] = s[p];
7
- }
8
- return t;
9
- };
10
- return __assign.apply(this, arguments);
11
- };
12
- var baseStyle = {
13
- p: 9,
14
- borderRadius: 'normal',
15
- background: 'white2',
16
- width: 'max-content',
17
- zIndex: 'modal',
18
- boxShadow: "0px 0px 30px rgb(200,200,200, .4)",
19
- };
20
- var baseDirectionArrow = {
21
- content: '""',
22
- display: 'block',
23
- width: 0,
24
- border: '12px solid transparent',
25
- };
26
- var topArrow = __assign(__assign({ bottom: 0 }, baseDirectionArrow), { borderBottom: 0, borderTopWidth: '15px', borderTopStyle: 'solid', transform: 'translate(-50%, calc(100%))' });
27
- var bottomArrow = __assign(__assign({ top: 0 }, baseDirectionArrow), { borderTop: 0, borderBottomWidth: '15px', borderBottomStyle: 'solid', transform: 'translate(-50%, calc(-100%))' });
28
- export var container = function (hide) { return ({
29
- position: 'relative',
30
- display: 'inline-block',
31
- '& > div:first-of-type': {
32
- display: 'none',
33
- },
34
- '&:hover > div:first-of-type': {
35
- display: hide ? 'none' : 'block',
36
- },
37
- }); };
38
- var styles = {
39
- default: __assign({ color: 'text', fontSize: 0, lineHeight: '18px', fontWeight: 'normal' }, baseStyle),
40
- bottomRight: {
41
- '&::before': __assign(__assign({ position: 'absolute' }, bottomArrow), { right: '3%', borderBottomColor: 'white2' }),
42
- },
43
- bottomLeft: {
44
- '&::before': __assign(__assign({ position: 'absolute' }, bottomArrow), { left: 'calc(3% + 15px)', borderBottomColor: 'white2' }),
45
- },
46
- topRight: {
47
- '&::before': __assign(__assign({ position: 'absolute' }, topArrow), { right: '3%', borderTopColor: 'white2' }),
48
- },
49
- topLeft: {
50
- '&::before': __assign(__assign({ position: 'absolute' }, topArrow), { left: 'calc(3% + 15px)', borderTopColor: 'white2' }),
51
- },
52
- onlyContainerRight: {
53
- '&::before': {
54
- position: 'absolute',
55
- right: '3%',
56
- borderBottomColor: 'white2',
57
- },
58
- },
59
- };
60
- export default styles;
@@ -1,17 +0,0 @@
1
- import { ReactNode } from 'react';
2
- import { BoxProps } from 'theme-ui';
3
- export declare enum placements {
4
- TOPRIGHT = "topRight",
5
- TOPLEFT = "topLeft",
6
- BOTTOMRIGHT = "bottomRight",
7
- BOTTOMLEFT = "bottomLeft",
8
- ONLYCONTAINERRIGHT = "onlyContainerRight"
9
- }
10
- export type placementProps = `${placements}`;
11
- export interface TooltipProps extends BoxProps {
12
- width?: string;
13
- placement?: placementProps;
14
- body: ReactNode;
15
- hideTooltip?: boolean;
16
- transformTip?: string;
17
- }
@@ -1,8 +0,0 @@
1
- export var placements;
2
- (function (placements) {
3
- placements["TOPRIGHT"] = "topRight";
4
- placements["TOPLEFT"] = "topLeft";
5
- placements["BOTTOMRIGHT"] = "bottomRight";
6
- placements["BOTTOMLEFT"] = "bottomLeft";
7
- placements["ONLYCONTAINERRIGHT"] = "onlyContainerRight";
8
- })(placements || (placements = {}));