@blerp/design 1.4.5 → 1.4.6
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.
- package/dist/cjs/Blerp/BlerpImageRow.js +22 -15
- package/dist/cjs/Blerp/BlerpSavePopup.js +20 -11
- package/dist/cjs/Blerp/BlerpTitleRow.js +16 -10
- package/dist/cjs/Blerp/BlerpTopRow.js +32 -25
- package/dist/cjs/Blerp.js +8 -7
- package/dist/cjs/BlerpListViewPremium.js +24 -20
- package/dist/cjs/BlerpListViewSkeleton.js +6 -6
- package/dist/cjs/CollectionCard.js +29 -25
- package/dist/cjs/CollectionListViewPremium.js +16 -13
- package/dist/cjs/CollectionSkeleton.js +5 -5
- package/dist/cjs/Dropdown.js +27 -24
- package/dist/cjs/EllipsisLoader.js +4 -3
- package/dist/cjs/GroupCard.js +8 -7
- package/dist/cjs/ImageEditor.js +4 -1
- package/dist/cjs/ImageUpload.js +23 -16
- package/dist/cjs/NewBlerp.js +41 -37
- package/dist/cjs/NewCollectionModal.js +27 -22
- package/dist/cjs/PremiumCollectionCard.js +10 -8
- package/dist/cjs/PurchaseModals/CheckoutModal.js +7 -3
- package/dist/cjs/PurchaseModals/PremiumBlerpCheckoutModal.js +7 -3
- package/dist/cjs/PurchaseModals/PremiumCollectionCheckoutModal.js +7 -3
- package/dist/cjs/PurchaseModals/PremiumSubscriptionCheckoutModal.js +7 -3
- package/dist/cjs/ReactionButtons.js +10 -5
- package/dist/cjs/Theme.js +102 -31
- package/dist/cjs/Toggle.js +1 -1
- package/dist/cjs/UserCard.js +13 -12
- package/dist/cjs/UserPage/LibraryControls.js +40 -29
- package/dist/cjs/UserPage/UserLibraryHeader.js +14 -8
- package/dist/cjs/UserPage/UserProfileHeader.js +28 -19
- package/dist/cjs/UsernameWithPopout.js +6 -4
- package/dist/cjs/colors.js +2 -1
- package/dist/cjs/icons.js +4 -1
- package/dist/cjs/index.js +135 -216
- package/dist/cjs/neo-components/Navigation.js +0 -2
- package/dist/cjs/neo-components/withSx.js +0 -1
- package/dist/cjs/neo-utils/sxToStyle.js +0 -2
- package/dist/esm/Blerp/BlerpImageRow.js +8 -3
- package/dist/esm/Blerp/BlerpSavePopup.js +9 -2
- package/dist/esm/Blerp/BlerpTitleRow.js +9 -5
- package/dist/esm/Blerp/BlerpTopRow.js +10 -5
- package/dist/esm/Blerp.js +2 -1
- package/dist/esm/BlerpListViewPremium.js +9 -5
- package/dist/esm/BlerpListViewSkeleton.js +1 -1
- package/dist/esm/CollectionCard.js +10 -6
- package/dist/esm/CollectionListViewPremium.js +7 -4
- package/dist/esm/CollectionSkeleton.js +1 -1
- package/dist/esm/Dropdown.js +10 -7
- package/dist/esm/EllipsisLoader.js +3 -2
- package/dist/esm/GroupCard.js +4 -3
- package/dist/esm/ImageEditor.js +2 -1
- package/dist/esm/ImageUpload.js +11 -6
- package/dist/esm/NewBlerp.js +13 -9
- package/dist/esm/NewCollectionModal.js +16 -11
- package/dist/esm/PremiumCollectionCard.js +4 -2
- package/dist/esm/PurchaseModals/CheckoutModal.js +4 -2
- package/dist/esm/PurchaseModals/PremiumBlerpCheckoutModal.js +4 -2
- package/dist/esm/PurchaseModals/PremiumCollectionCheckoutModal.js +4 -2
- package/dist/esm/PurchaseModals/PremiumSubscriptionCheckoutModal.js +4 -2
- package/dist/esm/ReactionButtons.js +5 -2
- package/dist/esm/Theme.js +100 -29
- package/dist/esm/Toggle.js +1 -1
- package/dist/esm/UserCard.js +7 -6
- package/dist/esm/UserPage/LibraryControls.js +20 -11
- package/dist/esm/UserPage/UserLibraryHeader.js +6 -2
- package/dist/esm/UserPage/UserProfileHeader.js +12 -5
- package/dist/esm/UsernameWithPopout.js +4 -2
- package/dist/esm/colors.js +2 -1
- package/dist/esm/icons.js +2 -1
- package/dist/esm/index.js +44 -129
- package/dist/esm/neo-components/Navigation.js +0 -2
- package/dist/esm/neo-components/ThemeProvider.js +1 -1
- package/dist/esm/neo-components/withSx.js +0 -1
- package/dist/esm/neo-utils/sxToStyle.js +0 -2
- package/package.json +34 -9
|
@@ -1,12 +1,17 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
3
5
|
var _extends = require('@babel/runtime/helpers/extends');
|
|
4
6
|
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
|
|
5
7
|
var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
|
|
6
8
|
var React = require('react');
|
|
7
|
-
var index = require('../index.js');
|
|
8
9
|
var Theme = require('../Theme.js');
|
|
10
|
+
var Stack = require('../neo-components/Stack.js');
|
|
11
|
+
var Box = require('../neo-components/Box.js');
|
|
12
|
+
var Text = require('../neo-components/Text.js');
|
|
9
13
|
var Icons = require('../Icons/Icons.js');
|
|
14
|
+
var Misc = require('../neo-components/Misc.js');
|
|
10
15
|
|
|
11
16
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
12
17
|
|
|
@@ -29,7 +34,7 @@ const Icon = _ref => {
|
|
|
29
34
|
} = _ref,
|
|
30
35
|
props = _objectWithoutProperties__default["default"](_ref, _excluded);
|
|
31
36
|
|
|
32
|
-
return /*#__PURE__*/React__default["default"].createElement(
|
|
37
|
+
return /*#__PURE__*/React__default["default"].createElement(Box.Box, _extends__default["default"]({
|
|
33
38
|
component: "svg",
|
|
34
39
|
viewBox: "0 0 24 24",
|
|
35
40
|
width: size,
|
|
@@ -74,10 +79,10 @@ const BlerpImageRow = _ref2 => {
|
|
|
74
79
|
const theme = Theme.useBlerpTheme();
|
|
75
80
|
|
|
76
81
|
if (bite.visibility === "PRIVATE" && !isOwner) {
|
|
77
|
-
return /*#__PURE__*/React__default["default"].createElement(
|
|
82
|
+
return /*#__PURE__*/React__default["default"].createElement(Stack.Stack, {
|
|
78
83
|
direction: "row",
|
|
79
84
|
marginTop: sizeParams.buttonSize === "small" && "28px"
|
|
80
|
-
}, /*#__PURE__*/React__default["default"].createElement(
|
|
85
|
+
}, /*#__PURE__*/React__default["default"].createElement(Box.Box, {
|
|
81
86
|
sx: {
|
|
82
87
|
height: sizeParams.imageSize,
|
|
83
88
|
width: sizeParams.imageSize,
|
|
@@ -89,7 +94,7 @@ const BlerpImageRow = _ref2 => {
|
|
|
89
94
|
transform: "scale(1.1)"
|
|
90
95
|
}
|
|
91
96
|
}
|
|
92
|
-
}, /*#__PURE__*/React__default["default"].createElement(
|
|
97
|
+
}, /*#__PURE__*/React__default["default"].createElement(Box.Box, {
|
|
93
98
|
id: "blerp-image-scrim-private",
|
|
94
99
|
sx: {
|
|
95
100
|
height: sizeParams.imageSize,
|
|
@@ -111,7 +116,7 @@ const BlerpImageRow = _ref2 => {
|
|
|
111
116
|
display: "none"
|
|
112
117
|
}
|
|
113
118
|
}
|
|
114
|
-
}, /*#__PURE__*/React__default["default"].createElement(
|
|
119
|
+
}, /*#__PURE__*/React__default["default"].createElement(Text.Typography, {
|
|
115
120
|
sx: {
|
|
116
121
|
display: "none",
|
|
117
122
|
fontWeight: "regular",
|
|
@@ -128,10 +133,10 @@ const BlerpImageRow = _ref2 => {
|
|
|
128
133
|
}))));
|
|
129
134
|
}
|
|
130
135
|
|
|
131
|
-
return /*#__PURE__*/React__default["default"].createElement(
|
|
136
|
+
return /*#__PURE__*/React__default["default"].createElement(Stack.Stack, {
|
|
132
137
|
direction: "row",
|
|
133
138
|
marginTop: sizeParams.buttonSize === "small" && "28px"
|
|
134
|
-
}, /*#__PURE__*/React__default["default"].createElement(
|
|
139
|
+
}, /*#__PURE__*/React__default["default"].createElement(Box.Box, {
|
|
135
140
|
sx: {
|
|
136
141
|
height: sizeParams.imageSize,
|
|
137
142
|
width: sizeParams.imageSize,
|
|
@@ -144,7 +149,7 @@ const BlerpImageRow = _ref2 => {
|
|
|
144
149
|
transform: "scale(1.1)"
|
|
145
150
|
}
|
|
146
151
|
}
|
|
147
|
-
}, /*#__PURE__*/React__default["default"].createElement(
|
|
152
|
+
}, /*#__PURE__*/React__default["default"].createElement(Box.Box, {
|
|
148
153
|
onClick: () => handleClickPlay(),
|
|
149
154
|
sx: {
|
|
150
155
|
height: sizeParams.imageSize,
|
|
@@ -176,7 +181,7 @@ const BlerpImageRow = _ref2 => {
|
|
|
176
181
|
height: "40px",
|
|
177
182
|
color: "white.override"
|
|
178
183
|
}
|
|
179
|
-
}), isPremium && isLocked ? /*#__PURE__*/React__default["default"].createElement(
|
|
184
|
+
}), isPremium && isLocked ? /*#__PURE__*/React__default["default"].createElement(Box.Box, {
|
|
180
185
|
className: "save-container",
|
|
181
186
|
onClick: e => {
|
|
182
187
|
e.stopPropagation();
|
|
@@ -205,7 +210,7 @@ const BlerpImageRow = _ref2 => {
|
|
|
205
210
|
color: theme.colors.white
|
|
206
211
|
}
|
|
207
212
|
}
|
|
208
|
-
}, /*#__PURE__*/React__default["default"].createElement(
|
|
213
|
+
}, /*#__PURE__*/React__default["default"].createElement(Stack.Stack, {
|
|
209
214
|
sx: {
|
|
210
215
|
position: "relative",
|
|
211
216
|
top: "1px",
|
|
@@ -213,7 +218,7 @@ const BlerpImageRow = _ref2 => {
|
|
|
213
218
|
color: "white.main"
|
|
214
219
|
}
|
|
215
220
|
}
|
|
216
|
-
}, /*#__PURE__*/React__default["default"].createElement(
|
|
221
|
+
}, /*#__PURE__*/React__default["default"].createElement(Misc.Tooltip, {
|
|
217
222
|
title: "Unlock"
|
|
218
223
|
}, actionButtonHovered ? /*#__PURE__*/React__default["default"].createElement(Icons.OpenLockIcon, {
|
|
219
224
|
sx: {
|
|
@@ -229,7 +234,7 @@ const BlerpImageRow = _ref2 => {
|
|
|
229
234
|
sx: {
|
|
230
235
|
color: "notBlack.override"
|
|
231
236
|
}
|
|
232
|
-
})))) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, primaryActionButton ? primaryActionButton : /*#__PURE__*/React__default["default"].createElement(
|
|
237
|
+
})))) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, primaryActionButton ? primaryActionButton : /*#__PURE__*/React__default["default"].createElement(Box.Box, {
|
|
233
238
|
className: "save-container",
|
|
234
239
|
onClick: e => {
|
|
235
240
|
e.stopPropagation();
|
|
@@ -263,7 +268,7 @@ const BlerpImageRow = _ref2 => {
|
|
|
263
268
|
color: theme.colors.white
|
|
264
269
|
}
|
|
265
270
|
}
|
|
266
|
-
}, /*#__PURE__*/React__default["default"].createElement(
|
|
271
|
+
}, /*#__PURE__*/React__default["default"].createElement(Stack.Stack, {
|
|
267
272
|
sx: {
|
|
268
273
|
position: "relative",
|
|
269
274
|
top: "1px",
|
|
@@ -283,4 +288,6 @@ const BlerpImageRow = _ref2 => {
|
|
|
283
288
|
}) : /*#__PURE__*/React__default["default"].createElement(Icons.BookmarkAddRounded, null)))))));
|
|
284
289
|
};
|
|
285
290
|
|
|
286
|
-
|
|
291
|
+
var BlerpImageRow$1 = BlerpImageRow;
|
|
292
|
+
|
|
293
|
+
exports["default"] = BlerpImageRow$1;
|
|
@@ -1,8 +1,15 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
3
5
|
var React = require('react');
|
|
4
|
-
var index = require('../index.js');
|
|
5
6
|
var Theme = require('../Theme.js');
|
|
7
|
+
var Navigation = require('../neo-components/Navigation.js');
|
|
8
|
+
var Grid = require('../neo-components/Grid.js');
|
|
9
|
+
var Misc = require('../neo-components/Misc.js');
|
|
10
|
+
var Box = require('../neo-components/Box.js');
|
|
11
|
+
var Stack = require('../neo-components/Stack.js');
|
|
12
|
+
var Button = require('../neo-components/Button.js');
|
|
6
13
|
|
|
7
14
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
8
15
|
|
|
@@ -35,7 +42,7 @@ const BlerpSavePopup = _ref => {
|
|
|
35
42
|
anchorRef
|
|
36
43
|
} = _ref;
|
|
37
44
|
const theme = Theme.useBlerpTheme();
|
|
38
|
-
return /*#__PURE__*/React__default["default"].createElement(
|
|
45
|
+
return /*#__PURE__*/React__default["default"].createElement(Navigation.Popover, {
|
|
39
46
|
open: openSave,
|
|
40
47
|
onClose: () => setOpenSave(false),
|
|
41
48
|
anchorEl: anchorRef.current,
|
|
@@ -60,7 +67,7 @@ const BlerpSavePopup = _ref => {
|
|
|
60
67
|
vertical: "center",
|
|
61
68
|
horizontal: "center"
|
|
62
69
|
}
|
|
63
|
-
}, /*#__PURE__*/React__default["default"].createElement(
|
|
70
|
+
}, /*#__PURE__*/React__default["default"].createElement(Grid.Grid, {
|
|
64
71
|
display: "grid",
|
|
65
72
|
gridTemplateColumns: "repeat(5, 1fr)",
|
|
66
73
|
alignItems: "center",
|
|
@@ -70,14 +77,14 @@ const BlerpSavePopup = _ref => {
|
|
|
70
77
|
var _bite$userReactions;
|
|
71
78
|
|
|
72
79
|
const isActive = bite === null || bite === void 0 ? void 0 : (_bite$userReactions = bite.userReactions) === null || _bite$userReactions === void 0 ? void 0 : _bite$userReactions.reactions.includes(reaction);
|
|
73
|
-
return /*#__PURE__*/React__default["default"].createElement(
|
|
80
|
+
return /*#__PURE__*/React__default["default"].createElement(Grid.Grid, {
|
|
74
81
|
key: "".concat(reaction, "-button"),
|
|
75
82
|
gridColumn: "span 1",
|
|
76
83
|
display: "flex",
|
|
77
84
|
justifyContent: "center"
|
|
78
|
-
}, /*#__PURE__*/React__default["default"].createElement(
|
|
85
|
+
}, /*#__PURE__*/React__default["default"].createElement(Misc.Tooltip, {
|
|
79
86
|
title: reaction
|
|
80
|
-
}, /*#__PURE__*/React__default["default"].createElement(
|
|
87
|
+
}, /*#__PURE__*/React__default["default"].createElement(Box.Box, {
|
|
81
88
|
onClick: () => {
|
|
82
89
|
var _bite$userReactions2;
|
|
83
90
|
|
|
@@ -107,13 +114,13 @@ const BlerpSavePopup = _ref => {
|
|
|
107
114
|
height: "100%",
|
|
108
115
|
src: reactionIconUrls[reaction]
|
|
109
116
|
}))));
|
|
110
|
-
})), /*#__PURE__*/React__default["default"].createElement(
|
|
117
|
+
})), /*#__PURE__*/React__default["default"].createElement(Stack.Stack, {
|
|
111
118
|
justifyContent: "space-around",
|
|
112
119
|
alignItems: "center",
|
|
113
120
|
direction: "row",
|
|
114
121
|
width: "100%",
|
|
115
122
|
flexWrap: "wrap"
|
|
116
|
-
}, /*#__PURE__*/React__default["default"].createElement(
|
|
123
|
+
}, /*#__PURE__*/React__default["default"].createElement(Button.Button, {
|
|
117
124
|
variant: "contained",
|
|
118
125
|
color: "seafoam",
|
|
119
126
|
size: "small",
|
|
@@ -123,7 +130,7 @@ const BlerpSavePopup = _ref => {
|
|
|
123
130
|
fontSize: (sizeParams === null || sizeParams === void 0 ? void 0 : sizeParams.buttonSize) === "small" ? "10px" : "16px"
|
|
124
131
|
},
|
|
125
132
|
onClick: () => setOpenSave(false)
|
|
126
|
-
}, "DONE"), unsaveButton ? unsaveButton : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, (!bite.isPremium || !bite.owned) && /*#__PURE__*/React__default["default"].createElement(
|
|
133
|
+
}, "DONE"), unsaveButton ? unsaveButton : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, (!bite.isPremium || !bite.owned) && /*#__PURE__*/React__default["default"].createElement(Button.Button, {
|
|
127
134
|
onClick: () => {
|
|
128
135
|
handleClickUnsave();
|
|
129
136
|
setOpenSave(false);
|
|
@@ -144,7 +151,7 @@ const BlerpSavePopup = _ref => {
|
|
|
144
151
|
margin: "0"
|
|
145
152
|
}
|
|
146
153
|
})
|
|
147
|
-
}, "UNSAVE")), organizeButton ? organizeButton : /*#__PURE__*/React__default["default"].createElement(
|
|
154
|
+
}, "UNSAVE")), organizeButton ? organizeButton : /*#__PURE__*/React__default["default"].createElement(Button.Button, {
|
|
148
155
|
variant: "text",
|
|
149
156
|
color: "grey4",
|
|
150
157
|
sx: {
|
|
@@ -158,4 +165,6 @@ const BlerpSavePopup = _ref => {
|
|
|
158
165
|
}, "Organize")));
|
|
159
166
|
};
|
|
160
167
|
|
|
161
|
-
|
|
168
|
+
var BlerpSavePopup$1 = BlerpSavePopup;
|
|
169
|
+
|
|
170
|
+
exports["default"] = BlerpSavePopup$1;
|
|
@@ -1,7 +1,11 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
3
5
|
var React = require('react');
|
|
4
|
-
var
|
|
6
|
+
var Stack = require('../neo-components/Stack.js');
|
|
7
|
+
var Box = require('../neo-components/Box.js');
|
|
8
|
+
var Text = require('../neo-components/Text.js');
|
|
5
9
|
|
|
6
10
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
7
11
|
|
|
@@ -20,7 +24,7 @@ const BlerpTitleRow = _ref => {
|
|
|
20
24
|
} = _ref;
|
|
21
25
|
|
|
22
26
|
if (bite.visibility === "PRIVATE" && !isOwner) {
|
|
23
|
-
return /*#__PURE__*/React__default["default"].createElement(
|
|
27
|
+
return /*#__PURE__*/React__default["default"].createElement(Stack.Stack, {
|
|
24
28
|
direction: "row",
|
|
25
29
|
sx: {
|
|
26
30
|
width: "90%",
|
|
@@ -30,7 +34,7 @@ const BlerpTitleRow = _ref => {
|
|
|
30
34
|
justifyContent: "center",
|
|
31
35
|
margin: "auto"
|
|
32
36
|
}
|
|
33
|
-
}, /*#__PURE__*/React__default["default"].createElement(
|
|
37
|
+
}, /*#__PURE__*/React__default["default"].createElement(Box.Box, {
|
|
34
38
|
onClick: e => {
|
|
35
39
|
if (handleClickTitle) {
|
|
36
40
|
e.stopPropagation();
|
|
@@ -45,7 +49,7 @@ const BlerpTitleRow = _ref => {
|
|
|
45
49
|
textOverflow: "ellipsis",
|
|
46
50
|
overflow: "hidden"
|
|
47
51
|
}
|
|
48
|
-
}, /*#__PURE__*/React__default["default"].createElement(
|
|
52
|
+
}, /*#__PURE__*/React__default["default"].createElement(Text.Typography, {
|
|
49
53
|
textAlign: "center",
|
|
50
54
|
fontSize: sizeParams.fontSize,
|
|
51
55
|
color: isPremium && !isLocked ? "white.override" : "white.override",
|
|
@@ -59,7 +63,7 @@ const BlerpTitleRow = _ref => {
|
|
|
59
63
|
}, title || bite.title)));
|
|
60
64
|
}
|
|
61
65
|
|
|
62
|
-
return /*#__PURE__*/React__default["default"].createElement(
|
|
66
|
+
return /*#__PURE__*/React__default["default"].createElement(Stack.Stack, {
|
|
63
67
|
direction: "row",
|
|
64
68
|
sx: {
|
|
65
69
|
width: "90%",
|
|
@@ -70,7 +74,7 @@ const BlerpTitleRow = _ref => {
|
|
|
70
74
|
justifyContent: "center",
|
|
71
75
|
margin: "auto"
|
|
72
76
|
}
|
|
73
|
-
}, isLinkTitle ? /*#__PURE__*/React__default["default"].createElement(
|
|
77
|
+
}, isLinkTitle ? /*#__PURE__*/React__default["default"].createElement(Box.Box, {
|
|
74
78
|
onClick: e => {
|
|
75
79
|
if (handleClickTitle) {
|
|
76
80
|
e.stopPropagation();
|
|
@@ -90,7 +94,7 @@ const BlerpTitleRow = _ref => {
|
|
|
90
94
|
style: {
|
|
91
95
|
textDecoration: "none"
|
|
92
96
|
}
|
|
93
|
-
}, /*#__PURE__*/React__default["default"].createElement(
|
|
97
|
+
}, /*#__PURE__*/React__default["default"].createElement(Text.Typography, {
|
|
94
98
|
textAlign: "center",
|
|
95
99
|
fontSize: sizeParams.fontSize,
|
|
96
100
|
color: isPremium ? "white.override" : "white.override",
|
|
@@ -101,7 +105,7 @@ const BlerpTitleRow = _ref => {
|
|
|
101
105
|
textOverflow: "ellipsis"
|
|
102
106
|
},
|
|
103
107
|
lineHeight: sizeParams.buttonSize === "small" ? "16px" : "24px"
|
|
104
|
-
}, title || bite.title))) : /*#__PURE__*/React__default["default"].createElement(
|
|
108
|
+
}, title || bite.title))) : /*#__PURE__*/React__default["default"].createElement(Box.Box, {
|
|
105
109
|
onClick: e => {
|
|
106
110
|
if (handleClickTitle) {
|
|
107
111
|
e.stopPropagation();
|
|
@@ -116,7 +120,7 @@ const BlerpTitleRow = _ref => {
|
|
|
116
120
|
textOverflow: "ellipsis",
|
|
117
121
|
overflow: "hidden"
|
|
118
122
|
}
|
|
119
|
-
}, /*#__PURE__*/React__default["default"].createElement(
|
|
123
|
+
}, /*#__PURE__*/React__default["default"].createElement(Text.Typography, {
|
|
120
124
|
textAlign: "center",
|
|
121
125
|
fontSize: sizeParams.fontSize,
|
|
122
126
|
color: isPremium ? "white.override" : "white.override",
|
|
@@ -130,4 +134,6 @@ const BlerpTitleRow = _ref => {
|
|
|
130
134
|
}, title || bite.title)));
|
|
131
135
|
};
|
|
132
136
|
|
|
133
|
-
|
|
137
|
+
var BlerpTitleRow$1 = BlerpTitleRow;
|
|
138
|
+
|
|
139
|
+
exports["default"] = BlerpTitleRow$1;
|
|
@@ -1,10 +1,15 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
3
5
|
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
|
|
4
6
|
var React = require('react');
|
|
5
7
|
var Blerp = require('../Blerp.js');
|
|
6
8
|
var Icons = require('../Icons/Icons.js');
|
|
7
|
-
var
|
|
9
|
+
var Stack = require('../neo-components/Stack.js');
|
|
10
|
+
var Text = require('../neo-components/Text.js');
|
|
11
|
+
var Misc = require('../neo-components/Misc.js');
|
|
12
|
+
var IconButton = require('../neo-components/IconButton.js');
|
|
8
13
|
|
|
9
14
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
10
15
|
|
|
@@ -121,14 +126,14 @@ const BlerpTopRow = _ref5 => {
|
|
|
121
126
|
return n.toString();
|
|
122
127
|
}
|
|
123
128
|
|
|
124
|
-
return /*#__PURE__*/React__default["default"].createElement(
|
|
129
|
+
return /*#__PURE__*/React__default["default"].createElement(Stack.Stack, {
|
|
125
130
|
direction: "row",
|
|
126
131
|
width: "100%",
|
|
127
132
|
justifyContent: "space-between",
|
|
128
133
|
alignItems: "center",
|
|
129
134
|
height: bite.visibility !== "PRIVATE" || isOwner ? "30px" : "30px",
|
|
130
135
|
position: sizeParams.buttonSize === "small" && "absolute"
|
|
131
|
-
}, (bite.visibility !== "PRIVATE" || isOwner) && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(
|
|
136
|
+
}, (bite.visibility !== "PRIVATE" || isOwner) && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Text.Typography, {
|
|
132
137
|
fontSize: "12px",
|
|
133
138
|
color: isPremium && !isLocked ? "white.main" : "notBlack.main",
|
|
134
139
|
sx: {
|
|
@@ -136,7 +141,7 @@ const BlerpTopRow = _ref5 => {
|
|
|
136
141
|
top: "30px",
|
|
137
142
|
left: "10px"
|
|
138
143
|
}
|
|
139
|
-
}, bite === null || bite === void 0 ? void 0 : bite.audienceRating), (bite === null || bite === void 0 ? void 0 : bite.audioDuration) && /*#__PURE__*/React__default["default"].createElement(
|
|
144
|
+
}, bite === null || bite === void 0 ? void 0 : bite.audienceRating), (bite === null || bite === void 0 ? void 0 : bite.audioDuration) && /*#__PURE__*/React__default["default"].createElement(Text.Typography, {
|
|
140
145
|
fontSize: "8px",
|
|
141
146
|
color: isPremium ? "waxwing.main" : "grey5.main",
|
|
142
147
|
sx: {
|
|
@@ -148,12 +153,12 @@ const BlerpTopRow = _ref5 => {
|
|
|
148
153
|
right: "8px",
|
|
149
154
|
opacity: isBlerpHovered ? 1 : 0.78
|
|
150
155
|
}
|
|
151
|
-
}, (Number(bite === null || bite === void 0 ? void 0 : bite.audioDuration) / 1000).toFixed(1), sizeParams.buttonSize === "small" ? "s" : "sec"), (bite === null || bite === void 0 ? void 0 : bite.listingType) === "UNSAFE" && /*#__PURE__*/React__default["default"].createElement(
|
|
156
|
+
}, (Number(bite === null || bite === void 0 ? void 0 : bite.audioDuration) / 1000).toFixed(1), sizeParams.buttonSize === "small" ? "s" : "sec"), (bite === null || bite === void 0 ? void 0 : bite.listingType) === "UNSAFE" && /*#__PURE__*/React__default["default"].createElement(Misc.Tooltip, {
|
|
152
157
|
title: "May contain potentially sensitive content",
|
|
153
158
|
sx: {
|
|
154
159
|
wordWrap: "break-word"
|
|
155
160
|
}
|
|
156
|
-
}, /*#__PURE__*/React__default["default"].createElement(
|
|
161
|
+
}, /*#__PURE__*/React__default["default"].createElement(IconButton.IconButton, {
|
|
157
162
|
className: "unsafe-icon-blrp",
|
|
158
163
|
sx: {
|
|
159
164
|
position: "absolute",
|
|
@@ -166,7 +171,7 @@ const BlerpTopRow = _ref5 => {
|
|
|
166
171
|
fontSize: "18px",
|
|
167
172
|
color: "ibisRed.main"
|
|
168
173
|
}
|
|
169
|
-
}))), /*#__PURE__*/React__default["default"].createElement(
|
|
174
|
+
}))), /*#__PURE__*/React__default["default"].createElement(Stack.Stack, {
|
|
170
175
|
direction: "row",
|
|
171
176
|
alignItems: "center",
|
|
172
177
|
justifyContent: "space-between",
|
|
@@ -177,7 +182,7 @@ const BlerpTopRow = _ref5 => {
|
|
|
177
182
|
position: "relative",
|
|
178
183
|
left: "2px"
|
|
179
184
|
}
|
|
180
|
-
}, /*#__PURE__*/React__default["default"].createElement(
|
|
185
|
+
}, /*#__PURE__*/React__default["default"].createElement(Stack.Stack, {
|
|
181
186
|
sx: {
|
|
182
187
|
backgroundColor: "white.main",
|
|
183
188
|
opacity: ".4",
|
|
@@ -187,7 +192,7 @@ const BlerpTopRow = _ref5 => {
|
|
|
187
192
|
left: "0",
|
|
188
193
|
right: "0"
|
|
189
194
|
}
|
|
190
|
-
}), bite !== null && bite !== void 0 && bite.saved ? /*#__PURE__*/React__default["default"].createElement(
|
|
195
|
+
}), bite !== null && bite !== void 0 && bite.saved ? /*#__PURE__*/React__default["default"].createElement(IconButton.IconButton, {
|
|
191
196
|
onClick: e => {
|
|
192
197
|
e.stopPropagation();
|
|
193
198
|
getUserReactions();
|
|
@@ -199,7 +204,7 @@ const BlerpTopRow = _ref5 => {
|
|
|
199
204
|
}
|
|
200
205
|
}, /*#__PURE__*/React__default["default"].createElement(IconBookmarkFilled, {
|
|
201
206
|
fontSize: "small"
|
|
202
|
-
})) : /*#__PURE__*/React__default["default"].createElement(
|
|
207
|
+
})) : /*#__PURE__*/React__default["default"].createElement(IconButton.IconButton, {
|
|
203
208
|
onClick: e => {
|
|
204
209
|
e.stopPropagation();
|
|
205
210
|
getUserReactions();
|
|
@@ -212,7 +217,7 @@ const BlerpTopRow = _ref5 => {
|
|
|
212
217
|
}
|
|
213
218
|
}, /*#__PURE__*/React__default["default"].createElement(Icons.BookmarkAddRounded, {
|
|
214
219
|
fontSize: "small"
|
|
215
|
-
})), !!(sizeParams.buttonSize === "small" && !(bite !== null && bite !== void 0 && (_bite$topReactions = bite.topReactions) !== null && _bite$topReactions !== void 0 && _bite$topReactions.length) || sizeParams.buttonSize !== "small") && /*#__PURE__*/React__default["default"].createElement(
|
|
220
|
+
})), !!(sizeParams.buttonSize === "small" && !(bite !== null && bite !== void 0 && (_bite$topReactions = bite.topReactions) !== null && _bite$topReactions !== void 0 && _bite$topReactions.length) || sizeParams.buttonSize !== "small") && /*#__PURE__*/React__default["default"].createElement(Text.Typography, {
|
|
216
221
|
color: "notBlack.main",
|
|
217
222
|
fontWeight: "light",
|
|
218
223
|
fontSize: "12px",
|
|
@@ -220,15 +225,15 @@ const BlerpTopRow = _ref5 => {
|
|
|
220
225
|
sx: {
|
|
221
226
|
zIndex: "1"
|
|
222
227
|
}
|
|
223
|
-
}, formatNumber((bite === null || bite === void 0 ? void 0 : bite.totalSaveCount) > 0 ? bite === null || bite === void 0 ? void 0 : bite.totalSaveCount : "")), !!(bite !== null && bite !== void 0 && (_bite$topReactions2 = bite.topReactions) !== null && _bite$topReactions2 !== void 0 && _bite$topReactions2.length) && /*#__PURE__*/React__default["default"].createElement(
|
|
228
|
+
}, formatNumber((bite === null || bite === void 0 ? void 0 : bite.totalSaveCount) > 0 ? bite === null || bite === void 0 ? void 0 : bite.totalSaveCount : "")), !!(bite !== null && bite !== void 0 && (_bite$topReactions2 = bite.topReactions) !== null && _bite$topReactions2 !== void 0 && _bite$topReactions2.length) && /*#__PURE__*/React__default["default"].createElement(Stack.Stack, {
|
|
224
229
|
direction: "row",
|
|
225
230
|
alignItems: "center",
|
|
226
231
|
position: "relative",
|
|
227
232
|
width: "40px",
|
|
228
233
|
height: "20px"
|
|
229
|
-
}, bite === null || bite === void 0 ? void 0 : (_bite$topReactions3 = bite.topReactions) === null || _bite$topReactions3 === void 0 ? void 0 : _bite$topReactions3.map((reaction, index
|
|
234
|
+
}, bite === null || bite === void 0 ? void 0 : (_bite$topReactions3 = bite.topReactions) === null || _bite$topReactions3 === void 0 ? void 0 : _bite$topReactions3.map((reaction, index) => /*#__PURE__*/React__default["default"].createElement(Misc.Tooltip, {
|
|
230
235
|
title: reaction,
|
|
231
|
-
key: index
|
|
236
|
+
key: index
|
|
232
237
|
}, /*#__PURE__*/React__default["default"].createElement("img", {
|
|
233
238
|
alt: reaction,
|
|
234
239
|
className: "reaction-icon-blrp",
|
|
@@ -237,7 +242,7 @@ const BlerpTopRow = _ref5 => {
|
|
|
237
242
|
height: "16px",
|
|
238
243
|
position: "relative",
|
|
239
244
|
margin: "-3px",
|
|
240
|
-
zIndex: index
|
|
245
|
+
zIndex: index
|
|
241
246
|
},
|
|
242
247
|
src: Blerp.reactionIconUrls[reaction]
|
|
243
248
|
})))), isPremium ? /*#__PURE__*/React__default["default"].createElement(Icons.DiamondIcon, {
|
|
@@ -246,13 +251,13 @@ const BlerpTopRow = _ref5 => {
|
|
|
246
251
|
marginRight: "4px",
|
|
247
252
|
zIndex: "1"
|
|
248
253
|
}
|
|
249
|
-
}) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null))), /*#__PURE__*/React__default["default"].createElement(
|
|
254
|
+
}) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null))), /*#__PURE__*/React__default["default"].createElement(Stack.Stack, {
|
|
250
255
|
direction: "row",
|
|
251
256
|
alignItems: "center",
|
|
252
257
|
justifyContent: "space-between"
|
|
253
|
-
}, bite.edgeType === "NewTwitchBiteEdge" && /*#__PURE__*/React__default["default"].createElement(
|
|
258
|
+
}, bite.edgeType === "NewTwitchBiteEdge" && /*#__PURE__*/React__default["default"].createElement(Misc.Tooltip, {
|
|
254
259
|
title: "Featured on Twitch Bits"
|
|
255
|
-
}, /*#__PURE__*/React__default["default"].createElement(
|
|
260
|
+
}, /*#__PURE__*/React__default["default"].createElement(Stack.Stack, {
|
|
256
261
|
sx: {
|
|
257
262
|
alignItems: "center",
|
|
258
263
|
margin: "5px"
|
|
@@ -262,9 +267,9 @@ const BlerpTopRow = _ref5 => {
|
|
|
262
267
|
zIndex: "1",
|
|
263
268
|
fontSize: "18px"
|
|
264
269
|
}
|
|
265
|
-
}))), bite.edgeType === "ChannelPointsBiteEdge" && /*#__PURE__*/React__default["default"].createElement(
|
|
270
|
+
}))), bite.edgeType === "ChannelPointsBiteEdge" && /*#__PURE__*/React__default["default"].createElement(Misc.Tooltip, {
|
|
266
271
|
title: "Featured on Twitch Channel Points"
|
|
267
|
-
}, /*#__PURE__*/React__default["default"].createElement(
|
|
272
|
+
}, /*#__PURE__*/React__default["default"].createElement(Stack.Stack, {
|
|
268
273
|
sx: {
|
|
269
274
|
alignItems: "center",
|
|
270
275
|
margin: "5px"
|
|
@@ -274,25 +279,25 @@ const BlerpTopRow = _ref5 => {
|
|
|
274
279
|
zIndex: "1",
|
|
275
280
|
fontSize: "18px"
|
|
276
281
|
}
|
|
277
|
-
}))), (bite.visibility !== "PUBLIC" || !isOwner) && /*#__PURE__*/React__default["default"].createElement("div", null), bite.visibility !== "PUBLIC" && /*#__PURE__*/React__default["default"].createElement(
|
|
282
|
+
}))), (bite.visibility !== "PUBLIC" || !isOwner) && /*#__PURE__*/React__default["default"].createElement("div", null), bite.visibility !== "PUBLIC" && /*#__PURE__*/React__default["default"].createElement(Stack.Stack, {
|
|
278
283
|
direction: "row",
|
|
279
284
|
sx: {
|
|
280
285
|
alignItems: "center",
|
|
281
286
|
margin: "5px"
|
|
282
287
|
}
|
|
283
|
-
}, bite.visibility === "UNLISTED" && /*#__PURE__*/React__default["default"].createElement(
|
|
288
|
+
}, bite.visibility === "UNLISTED" && /*#__PURE__*/React__default["default"].createElement(Misc.Tooltip, {
|
|
284
289
|
title: "Unlisted"
|
|
285
290
|
}, /*#__PURE__*/React__default["default"].createElement("span", null, /*#__PURE__*/React__default["default"].createElement(IconVisibilityOff, {
|
|
286
291
|
sx: {
|
|
287
292
|
fontSize: "15px"
|
|
288
293
|
}
|
|
289
|
-
}))), bite.visibility === "PRIVATE" && isOwner && /*#__PURE__*/React__default["default"].createElement(
|
|
294
|
+
}))), bite.visibility === "PRIVATE" && isOwner && /*#__PURE__*/React__default["default"].createElement(Misc.Tooltip, {
|
|
290
295
|
title: "Private"
|
|
291
296
|
}, /*#__PURE__*/React__default["default"].createElement("span", null, /*#__PURE__*/React__default["default"].createElement(IconLock, {
|
|
292
297
|
sx: {
|
|
293
298
|
fontSize: "15px"
|
|
294
299
|
}
|
|
295
|
-
})))), secondaryActionButton ? secondaryActionButton : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, isBlerpHovered ? /*#__PURE__*/React__default["default"].createElement(
|
|
300
|
+
})))), secondaryActionButton ? secondaryActionButton : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, isBlerpHovered ? /*#__PURE__*/React__default["default"].createElement(IconButton.IconButton, {
|
|
296
301
|
onClick: e => {
|
|
297
302
|
handleClickThreeDot(e);
|
|
298
303
|
},
|
|
@@ -309,4 +314,6 @@ const BlerpTopRow = _ref5 => {
|
|
|
309
314
|
}, /*#__PURE__*/React__default["default"].createElement(IconMoreHoriz, null)) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null))));
|
|
310
315
|
};
|
|
311
316
|
|
|
312
|
-
|
|
317
|
+
var BlerpTopRow$1 = BlerpTopRow;
|
|
318
|
+
|
|
319
|
+
exports["default"] = BlerpTopRow$1;
|
package/dist/cjs/Blerp.js
CHANGED
|
@@ -7,9 +7,10 @@ var BlerpImageRow = require('./Blerp/BlerpImageRow.js');
|
|
|
7
7
|
var BlerpSavePopup = require('./Blerp/BlerpSavePopup.js');
|
|
8
8
|
var BlerpTitleRow = require('./Blerp/BlerpTitleRow.js');
|
|
9
9
|
var BlerpTopRow = require('./Blerp/BlerpTopRow.js');
|
|
10
|
-
var index = require('./index.js');
|
|
11
10
|
var ScreenSizeHook = require('./ScreenSizeHook.js');
|
|
12
11
|
var Theme = require('./Theme.js');
|
|
12
|
+
var Box = require('./neo-components/Box.js');
|
|
13
|
+
var Stack = require('./neo-components/Stack.js');
|
|
13
14
|
|
|
14
15
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
15
16
|
|
|
@@ -136,7 +137,7 @@ const Blerp = _ref => {
|
|
|
136
137
|
}
|
|
137
138
|
}
|
|
138
139
|
|
|
139
|
-
return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(
|
|
140
|
+
return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Box.Box, {
|
|
140
141
|
id: "blerp-component-".concat(bite._id),
|
|
141
142
|
onClick: e => {
|
|
142
143
|
e.stopPropagation();
|
|
@@ -167,7 +168,7 @@ const Blerp = _ref => {
|
|
|
167
168
|
border: isPremium ? "none" : "2px solid transparent"
|
|
168
169
|
}
|
|
169
170
|
}
|
|
170
|
-
}, /*#__PURE__*/React__default["default"].createElement(
|
|
171
|
+
}, /*#__PURE__*/React__default["default"].createElement(Stack.Stack, {
|
|
171
172
|
sx: {
|
|
172
173
|
position: "absolute",
|
|
173
174
|
top: "0",
|
|
@@ -178,7 +179,7 @@ const Blerp = _ref => {
|
|
|
178
179
|
background: profileColors ? "linear-gradient(180deg, ".concat(profileColors[0]).concat(isPremium ? isLocked ? isBlerpHovered ? "C4" : "78" : isBlerpHovered ? "" : "C4" : "0", ", ").concat(theme.colors.grey5Override).concat(isPremium ? isLocked ? isBlerpHovered ? "C4" : "78" : isBlerpHovered ? "" : "C4" : "0", ")") : "",
|
|
179
180
|
backgroundColor: isPremium && !profileColors && "grey5.override"
|
|
180
181
|
}
|
|
181
|
-
}), /*#__PURE__*/React__default["default"].createElement(BlerpTopRow, {
|
|
182
|
+
}), /*#__PURE__*/React__default["default"].createElement(BlerpTopRow["default"], {
|
|
182
183
|
bite: bite,
|
|
183
184
|
isOwner: isOwner,
|
|
184
185
|
sizeParams: sizeParams,
|
|
@@ -190,7 +191,7 @@ const Blerp = _ref => {
|
|
|
190
191
|
secondaryActionButton: secondaryActionButton,
|
|
191
192
|
isBlerpHovered: isBlerpHovered,
|
|
192
193
|
handleClickThreeDot: handleClickThreeDot
|
|
193
|
-
}), /*#__PURE__*/React__default["default"].createElement(BlerpImageRow, {
|
|
194
|
+
}), /*#__PURE__*/React__default["default"].createElement(BlerpImageRow["default"], {
|
|
194
195
|
bite: bite,
|
|
195
196
|
isOwner: isOwner,
|
|
196
197
|
sizeParams: sizeParams,
|
|
@@ -204,7 +205,7 @@ const Blerp = _ref => {
|
|
|
204
205
|
isBlerpHovered: isBlerpHovered,
|
|
205
206
|
handleClickPlay: handleClickPlay,
|
|
206
207
|
handleClickLock: handleClickLock
|
|
207
|
-
}), /*#__PURE__*/React__default["default"].createElement(BlerpTitleRow, {
|
|
208
|
+
}), /*#__PURE__*/React__default["default"].createElement(BlerpTitleRow["default"], {
|
|
208
209
|
bite: bite,
|
|
209
210
|
title: title,
|
|
210
211
|
isLinkTitle: isLinkTitle,
|
|
@@ -213,7 +214,7 @@ const Blerp = _ref => {
|
|
|
213
214
|
isLocked: isLocked,
|
|
214
215
|
isOwner: isOwner,
|
|
215
216
|
sizeParams: sizeParams
|
|
216
|
-
}), openSave && /*#__PURE__*/React__default["default"].createElement(BlerpSavePopup, {
|
|
217
|
+
}), openSave && /*#__PURE__*/React__default["default"].createElement(BlerpSavePopup["default"], {
|
|
217
218
|
bite: bite,
|
|
218
219
|
anchorRef: anchorRef,
|
|
219
220
|
setOpenSave: setOpenSave,
|