@blerp/design 1.0.86 → 1.0.87
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/index.cjs.js +79 -21
- package/dist/index.esm.js +79 -21
- package/dist/index.umd.js +79 -21
- package/package.json +1 -1
package/dist/index.cjs.js
CHANGED
|
@@ -1593,10 +1593,14 @@ var BlerpListViewPremium$1 = function BlerpListViewPremium(_ref) {
|
|
|
1593
1593
|
_ref.handleClickThreeDot;
|
|
1594
1594
|
var handleClickUnsave = _ref.handleClickUnsave,
|
|
1595
1595
|
handleClickTitle = _ref.handleClickTitle,
|
|
1596
|
+
handleSubtitleClick = _ref.handleSubtitleClick,
|
|
1597
|
+
biteSubtitle = _ref.biteSubtitle,
|
|
1596
1598
|
isLinkTitle = _ref.isLinkTitle,
|
|
1597
1599
|
isLocked = _ref.isLocked,
|
|
1598
1600
|
fluid = _ref.fluid;
|
|
1599
1601
|
_ref.props;
|
|
1602
|
+
var backgroundColor = _ref.backgroundColor,
|
|
1603
|
+
hoverColor = _ref.hoverColor;
|
|
1600
1604
|
_ref.isPremium;
|
|
1601
1605
|
var handleClickLock = _ref.handleClickLock,
|
|
1602
1606
|
handleClickPremium = _ref.handleClickPremium;
|
|
@@ -1624,12 +1628,11 @@ var BlerpListViewPremium$1 = function BlerpListViewPremium(_ref) {
|
|
|
1624
1628
|
actionButtonHovered = _useState6[0],
|
|
1625
1629
|
setActionButtonHovered = _useState6[1];
|
|
1626
1630
|
|
|
1627
|
-
console.log(data);
|
|
1628
|
-
|
|
1629
1631
|
var sizeParams;
|
|
1630
1632
|
var smallSize = {
|
|
1631
1633
|
width: 300,
|
|
1632
|
-
height:
|
|
1634
|
+
height: 52,
|
|
1635
|
+
smallFontSize: "12px",
|
|
1633
1636
|
fontSize: "16px",
|
|
1634
1637
|
imageSize: "40px",
|
|
1635
1638
|
reactionSpacing: 1,
|
|
@@ -1639,7 +1642,8 @@ var BlerpListViewPremium$1 = function BlerpListViewPremium(_ref) {
|
|
|
1639
1642
|
};
|
|
1640
1643
|
var mediumSize = {
|
|
1641
1644
|
width: 375,
|
|
1642
|
-
height:
|
|
1645
|
+
height: 60,
|
|
1646
|
+
smallFontSize: "14px",
|
|
1643
1647
|
fontSize: "18px",
|
|
1644
1648
|
imageSize: "48px",
|
|
1645
1649
|
reactionSpacing: 1,
|
|
@@ -1649,7 +1653,8 @@ var BlerpListViewPremium$1 = function BlerpListViewPremium(_ref) {
|
|
|
1649
1653
|
};
|
|
1650
1654
|
var largeSize = {
|
|
1651
1655
|
width: 440,
|
|
1652
|
-
height:
|
|
1656
|
+
height: 72,
|
|
1657
|
+
smallFontSize: "26px",
|
|
1653
1658
|
fontSize: "20px",
|
|
1654
1659
|
imageSize: "56px",
|
|
1655
1660
|
reactionSpacing: 1,
|
|
@@ -1662,7 +1667,8 @@ var BlerpListViewPremium$1 = function BlerpListViewPremium(_ref) {
|
|
|
1662
1667
|
if (fluid) {
|
|
1663
1668
|
sizeParams = {
|
|
1664
1669
|
width: "100%",
|
|
1665
|
-
height:
|
|
1670
|
+
height: 52,
|
|
1671
|
+
smallFontSize: "14px",
|
|
1666
1672
|
fontSize: "18px",
|
|
1667
1673
|
imageSize: "48px",
|
|
1668
1674
|
reactionSpacing: 1,
|
|
@@ -1707,7 +1713,7 @@ var BlerpListViewPremium$1 = function BlerpListViewPremium(_ref) {
|
|
|
1707
1713
|
// overflow: "hidden",
|
|
1708
1714
|
"&:hover": {
|
|
1709
1715
|
transition: "0.3s",
|
|
1710
|
-
bgcolor: "grey2.main"
|
|
1716
|
+
bgcolor: hoverColor ? hoverColor : "grey2.main"
|
|
1711
1717
|
}
|
|
1712
1718
|
}
|
|
1713
1719
|
}, /*#__PURE__*/React__default['default'].createElement(Stack, {
|
|
@@ -1718,7 +1724,7 @@ var BlerpListViewPremium$1 = function BlerpListViewPremium(_ref) {
|
|
|
1718
1724
|
left: "0",
|
|
1719
1725
|
right: "0",
|
|
1720
1726
|
borderRadius: "8px",
|
|
1721
|
-
background: data ? "linear-gradient(90deg, ".concat(data.vibrant, ", ").concat(theme.colors.grey5Override, ")") : "notBlack.main",
|
|
1727
|
+
background: backgroundColor ? backgroundColor : data ? "linear-gradient(90deg, ".concat(data.vibrant, ", ").concat(theme.colors.grey5Override, ")") : "notBlack.main",
|
|
1722
1728
|
transition: "opacity .15s ease-in-out",
|
|
1723
1729
|
opacity: isLocked ? isBlerpHovered ? ".8" : ".5" : isBlerpHovered ? "1" : ".8"
|
|
1724
1730
|
}
|
|
@@ -1780,7 +1786,13 @@ var BlerpListViewPremium$1 = function BlerpListViewPremium(_ref) {
|
|
|
1780
1786
|
height: "30px",
|
|
1781
1787
|
color: "white.override"
|
|
1782
1788
|
}
|
|
1783
|
-
}))),
|
|
1789
|
+
}))), /*#__PURE__*/React__default['default'].createElement(Stack, {
|
|
1790
|
+
direction: "column",
|
|
1791
|
+
alignItems: "flex-start",
|
|
1792
|
+
sx: {
|
|
1793
|
+
width: "80%"
|
|
1794
|
+
}
|
|
1795
|
+
}, isLinkTitle ? /*#__PURE__*/React__default['default'].createElement(Text, {
|
|
1784
1796
|
textAlign: "left",
|
|
1785
1797
|
fontSize: sizeParams.fontSize,
|
|
1786
1798
|
noWrap: true,
|
|
@@ -1822,7 +1834,21 @@ var BlerpListViewPremium$1 = function BlerpListViewPremium(_ref) {
|
|
|
1822
1834
|
handleClickTitle();
|
|
1823
1835
|
}
|
|
1824
1836
|
}
|
|
1825
|
-
}, bite.title)
|
|
1837
|
+
}, bite.title), biteSubtitle && /*#__PURE__*/React__default['default'].createElement(Text, {
|
|
1838
|
+
textAlign: "left",
|
|
1839
|
+
fontSize: sizeParams.smallFontSize,
|
|
1840
|
+
noWrap: true,
|
|
1841
|
+
marginLeft: "10px",
|
|
1842
|
+
width: "100%",
|
|
1843
|
+
color: "white.override",
|
|
1844
|
+
sx: {},
|
|
1845
|
+
onClick: function onClick(e) {
|
|
1846
|
+
if (handleSubtitleClick) {
|
|
1847
|
+
e.stopPropagation();
|
|
1848
|
+
handleSubtitleClick();
|
|
1849
|
+
}
|
|
1850
|
+
}
|
|
1851
|
+
}, biteSubtitle))), /*#__PURE__*/React__default['default'].createElement(Stack, {
|
|
1826
1852
|
direction: "row",
|
|
1827
1853
|
alignItems: "center"
|
|
1828
1854
|
}, primaryActionButton ? primaryActionButton : isLocked ? /*#__PURE__*/React__default['default'].createElement(SaveContainer$1, {
|
|
@@ -2007,8 +2033,12 @@ var BlerpListView$1 = function BlerpListView(_ref) {
|
|
|
2007
2033
|
handleClickThreeDot = _ref.handleClickThreeDot,
|
|
2008
2034
|
handleClickUnsave = _ref.handleClickUnsave,
|
|
2009
2035
|
handleClickTitle = _ref.handleClickTitle,
|
|
2036
|
+
handleSubtitleClick = _ref.handleSubtitleClick,
|
|
2037
|
+
biteSubtitle = _ref.biteSubtitle,
|
|
2010
2038
|
isLinkTitle = _ref.isLinkTitle,
|
|
2011
2039
|
fluid = _ref.fluid,
|
|
2040
|
+
backgroundColor = _ref.backgroundColor,
|
|
2041
|
+
hoverColor = _ref.hoverColor,
|
|
2012
2042
|
props = _ref.props,
|
|
2013
2043
|
isLocked = _ref.isLocked,
|
|
2014
2044
|
isPremium = _ref.isPremium,
|
|
@@ -2031,7 +2061,8 @@ var BlerpListView$1 = function BlerpListView(_ref) {
|
|
|
2031
2061
|
var sizeParams;
|
|
2032
2062
|
var smallSize = {
|
|
2033
2063
|
width: 300,
|
|
2034
|
-
height:
|
|
2064
|
+
height: 52,
|
|
2065
|
+
smallFontSize: "12px",
|
|
2035
2066
|
fontSize: "16px",
|
|
2036
2067
|
imageSize: "40px",
|
|
2037
2068
|
reactionSpacing: 1,
|
|
@@ -2041,7 +2072,8 @@ var BlerpListView$1 = function BlerpListView(_ref) {
|
|
|
2041
2072
|
};
|
|
2042
2073
|
var mediumSize = {
|
|
2043
2074
|
width: 375,
|
|
2044
|
-
height:
|
|
2075
|
+
height: 60,
|
|
2076
|
+
smallFontSize: "14px",
|
|
2045
2077
|
fontSize: "18px",
|
|
2046
2078
|
imageSize: "48px",
|
|
2047
2079
|
reactionSpacing: 1,
|
|
@@ -2051,7 +2083,8 @@ var BlerpListView$1 = function BlerpListView(_ref) {
|
|
|
2051
2083
|
};
|
|
2052
2084
|
var largeSize = {
|
|
2053
2085
|
width: 440,
|
|
2054
|
-
height:
|
|
2086
|
+
height: 72,
|
|
2087
|
+
smallFontSize: "26px",
|
|
2055
2088
|
fontSize: "20px",
|
|
2056
2089
|
imageSize: "56px",
|
|
2057
2090
|
reactionSpacing: 1,
|
|
@@ -2064,7 +2097,8 @@ var BlerpListView$1 = function BlerpListView(_ref) {
|
|
|
2064
2097
|
if (fluid) {
|
|
2065
2098
|
sizeParams = {
|
|
2066
2099
|
width: "100%",
|
|
2067
|
-
height:
|
|
2100
|
+
height: 52,
|
|
2101
|
+
smallFontSize: "14px",
|
|
2068
2102
|
fontSize: "18px",
|
|
2069
2103
|
imageSize: "48px",
|
|
2070
2104
|
reactionSpacing: 1,
|
|
@@ -2104,13 +2138,17 @@ var BlerpListView$1 = function BlerpListView(_ref) {
|
|
|
2104
2138
|
handleClickThreeDot: handleClickThreeDot,
|
|
2105
2139
|
handleClickUnsave: handleClickUnsave,
|
|
2106
2140
|
handleClickTitle: handleClickTitle,
|
|
2141
|
+
biteSubtitle: biteSubtitle,
|
|
2142
|
+
handleSubtitleClick: handleSubtitleClick,
|
|
2107
2143
|
isLinkTitle: isLinkTitle,
|
|
2108
2144
|
fluid: fluid,
|
|
2109
2145
|
props: props,
|
|
2110
2146
|
isLocked: isLocked,
|
|
2111
2147
|
isPremium: isPremium,
|
|
2112
2148
|
handleClickLock: handleClickLock,
|
|
2113
|
-
handleClickPremium: handleClickPremium
|
|
2149
|
+
handleClickPremium: handleClickPremium,
|
|
2150
|
+
backgroundColor: backgroundColor,
|
|
2151
|
+
hoverColor: hoverColor
|
|
2114
2152
|
});
|
|
2115
2153
|
}
|
|
2116
2154
|
|
|
@@ -2120,13 +2158,13 @@ var BlerpListView$1 = function BlerpListView(_ref) {
|
|
|
2120
2158
|
minWidth: fluid && "300px",
|
|
2121
2159
|
borderRadius: "8px",
|
|
2122
2160
|
border: "2px transparent",
|
|
2123
|
-
bgcolor: "grey2.main",
|
|
2161
|
+
bgcolor: backgroundColor ? backgroundColor : "grey2.main",
|
|
2124
2162
|
backgroundOrigin: "border-box",
|
|
2125
2163
|
backgroundClip: "content-box, border-box",
|
|
2126
2164
|
boxShadow: "2px 2px 4px 0px #999999a1;",
|
|
2127
2165
|
transition: "0.3s",
|
|
2128
2166
|
"&:hover": {
|
|
2129
|
-
bgcolor: "grey3.main"
|
|
2167
|
+
bgcolor: hoverColor ? hoverColor : "grey3.main"
|
|
2130
2168
|
}
|
|
2131
2169
|
}
|
|
2132
2170
|
}, /*#__PURE__*/React__default['default'].createElement(Box, {
|
|
@@ -2187,7 +2225,13 @@ var BlerpListView$1 = function BlerpListView(_ref) {
|
|
|
2187
2225
|
height: "30px",
|
|
2188
2226
|
color: "white.override"
|
|
2189
2227
|
}
|
|
2190
|
-
}))),
|
|
2228
|
+
}))), /*#__PURE__*/React__default['default'].createElement(Stack, {
|
|
2229
|
+
direction: "column",
|
|
2230
|
+
alignItems: "flex-start",
|
|
2231
|
+
sx: {
|
|
2232
|
+
width: "80%"
|
|
2233
|
+
}
|
|
2234
|
+
}, isLinkTitle ? /*#__PURE__*/React__default['default'].createElement("a", {
|
|
2191
2235
|
href: "/soundbites/".concat(bite._id),
|
|
2192
2236
|
style: {
|
|
2193
2237
|
textDecoration: "none",
|
|
@@ -2197,7 +2241,7 @@ var BlerpListView$1 = function BlerpListView(_ref) {
|
|
|
2197
2241
|
textAlign: "left",
|
|
2198
2242
|
fontSize: sizeParams.fontSize,
|
|
2199
2243
|
noWrap: true,
|
|
2200
|
-
width: "
|
|
2244
|
+
width: "100%",
|
|
2201
2245
|
marginLeft: "10px",
|
|
2202
2246
|
color: "white.override",
|
|
2203
2247
|
sx: {
|
|
@@ -2215,7 +2259,7 @@ var BlerpListView$1 = function BlerpListView(_ref) {
|
|
|
2215
2259
|
textAlign: "left",
|
|
2216
2260
|
fontSize: sizeParams.fontSize,
|
|
2217
2261
|
noWrap: true,
|
|
2218
|
-
width: "
|
|
2262
|
+
width: "100%",
|
|
2219
2263
|
marginLeft: "10px",
|
|
2220
2264
|
sx: {
|
|
2221
2265
|
":hover": {
|
|
@@ -2228,7 +2272,21 @@ var BlerpListView$1 = function BlerpListView(_ref) {
|
|
|
2228
2272
|
handleClickTitle();
|
|
2229
2273
|
}
|
|
2230
2274
|
}
|
|
2231
|
-
}, bite.title)
|
|
2275
|
+
}, bite.title), biteSubtitle && /*#__PURE__*/React__default['default'].createElement(Text, {
|
|
2276
|
+
textAlign: "left",
|
|
2277
|
+
fontSize: sizeParams.smallFontSize,
|
|
2278
|
+
noWrap: true,
|
|
2279
|
+
marginLeft: "10px",
|
|
2280
|
+
width: "100%",
|
|
2281
|
+
color: "white.override",
|
|
2282
|
+
sx: {},
|
|
2283
|
+
onClick: function onClick(e) {
|
|
2284
|
+
if (handleSubtitleClick) {
|
|
2285
|
+
e.stopPropagation();
|
|
2286
|
+
handleSubtitleClick();
|
|
2287
|
+
}
|
|
2288
|
+
}
|
|
2289
|
+
}, biteSubtitle))), /*#__PURE__*/React__default['default'].createElement(Stack, {
|
|
2232
2290
|
direction: "row"
|
|
2233
2291
|
}, primaryActionButton ? primaryActionButton : bite !== null && bite !== void 0 && bite.saved ? /*#__PURE__*/React__default['default'].createElement(IconButton, {
|
|
2234
2292
|
onClick: function onClick(e) {
|
package/dist/index.esm.js
CHANGED
|
@@ -1524,10 +1524,14 @@ var BlerpListViewPremium$1 = function BlerpListViewPremium(_ref) {
|
|
|
1524
1524
|
_ref.handleClickThreeDot;
|
|
1525
1525
|
var handleClickUnsave = _ref.handleClickUnsave,
|
|
1526
1526
|
handleClickTitle = _ref.handleClickTitle,
|
|
1527
|
+
handleSubtitleClick = _ref.handleSubtitleClick,
|
|
1528
|
+
biteSubtitle = _ref.biteSubtitle,
|
|
1527
1529
|
isLinkTitle = _ref.isLinkTitle,
|
|
1528
1530
|
isLocked = _ref.isLocked,
|
|
1529
1531
|
fluid = _ref.fluid;
|
|
1530
1532
|
_ref.props;
|
|
1533
|
+
var backgroundColor = _ref.backgroundColor,
|
|
1534
|
+
hoverColor = _ref.hoverColor;
|
|
1531
1535
|
_ref.isPremium;
|
|
1532
1536
|
var handleClickLock = _ref.handleClickLock,
|
|
1533
1537
|
handleClickPremium = _ref.handleClickPremium;
|
|
@@ -1555,12 +1559,11 @@ var BlerpListViewPremium$1 = function BlerpListViewPremium(_ref) {
|
|
|
1555
1559
|
actionButtonHovered = _useState6[0],
|
|
1556
1560
|
setActionButtonHovered = _useState6[1];
|
|
1557
1561
|
|
|
1558
|
-
console.log(data);
|
|
1559
|
-
|
|
1560
1562
|
var sizeParams;
|
|
1561
1563
|
var smallSize = {
|
|
1562
1564
|
width: 300,
|
|
1563
|
-
height:
|
|
1565
|
+
height: 52,
|
|
1566
|
+
smallFontSize: "12px",
|
|
1564
1567
|
fontSize: "16px",
|
|
1565
1568
|
imageSize: "40px",
|
|
1566
1569
|
reactionSpacing: 1,
|
|
@@ -1570,7 +1573,8 @@ var BlerpListViewPremium$1 = function BlerpListViewPremium(_ref) {
|
|
|
1570
1573
|
};
|
|
1571
1574
|
var mediumSize = {
|
|
1572
1575
|
width: 375,
|
|
1573
|
-
height:
|
|
1576
|
+
height: 60,
|
|
1577
|
+
smallFontSize: "14px",
|
|
1574
1578
|
fontSize: "18px",
|
|
1575
1579
|
imageSize: "48px",
|
|
1576
1580
|
reactionSpacing: 1,
|
|
@@ -1580,7 +1584,8 @@ var BlerpListViewPremium$1 = function BlerpListViewPremium(_ref) {
|
|
|
1580
1584
|
};
|
|
1581
1585
|
var largeSize = {
|
|
1582
1586
|
width: 440,
|
|
1583
|
-
height:
|
|
1587
|
+
height: 72,
|
|
1588
|
+
smallFontSize: "26px",
|
|
1584
1589
|
fontSize: "20px",
|
|
1585
1590
|
imageSize: "56px",
|
|
1586
1591
|
reactionSpacing: 1,
|
|
@@ -1593,7 +1598,8 @@ var BlerpListViewPremium$1 = function BlerpListViewPremium(_ref) {
|
|
|
1593
1598
|
if (fluid) {
|
|
1594
1599
|
sizeParams = {
|
|
1595
1600
|
width: "100%",
|
|
1596
|
-
height:
|
|
1601
|
+
height: 52,
|
|
1602
|
+
smallFontSize: "14px",
|
|
1597
1603
|
fontSize: "18px",
|
|
1598
1604
|
imageSize: "48px",
|
|
1599
1605
|
reactionSpacing: 1,
|
|
@@ -1638,7 +1644,7 @@ var BlerpListViewPremium$1 = function BlerpListViewPremium(_ref) {
|
|
|
1638
1644
|
// overflow: "hidden",
|
|
1639
1645
|
"&:hover": {
|
|
1640
1646
|
transition: "0.3s",
|
|
1641
|
-
bgcolor: "grey2.main"
|
|
1647
|
+
bgcolor: hoverColor ? hoverColor : "grey2.main"
|
|
1642
1648
|
}
|
|
1643
1649
|
}
|
|
1644
1650
|
}, /*#__PURE__*/React__default.createElement(Stack, {
|
|
@@ -1649,7 +1655,7 @@ var BlerpListViewPremium$1 = function BlerpListViewPremium(_ref) {
|
|
|
1649
1655
|
left: "0",
|
|
1650
1656
|
right: "0",
|
|
1651
1657
|
borderRadius: "8px",
|
|
1652
|
-
background: data ? "linear-gradient(90deg, ".concat(data.vibrant, ", ").concat(theme.colors.grey5Override, ")") : "notBlack.main",
|
|
1658
|
+
background: backgroundColor ? backgroundColor : data ? "linear-gradient(90deg, ".concat(data.vibrant, ", ").concat(theme.colors.grey5Override, ")") : "notBlack.main",
|
|
1653
1659
|
transition: "opacity .15s ease-in-out",
|
|
1654
1660
|
opacity: isLocked ? isBlerpHovered ? ".8" : ".5" : isBlerpHovered ? "1" : ".8"
|
|
1655
1661
|
}
|
|
@@ -1711,7 +1717,13 @@ var BlerpListViewPremium$1 = function BlerpListViewPremium(_ref) {
|
|
|
1711
1717
|
height: "30px",
|
|
1712
1718
|
color: "white.override"
|
|
1713
1719
|
}
|
|
1714
|
-
}))),
|
|
1720
|
+
}))), /*#__PURE__*/React__default.createElement(Stack, {
|
|
1721
|
+
direction: "column",
|
|
1722
|
+
alignItems: "flex-start",
|
|
1723
|
+
sx: {
|
|
1724
|
+
width: "80%"
|
|
1725
|
+
}
|
|
1726
|
+
}, isLinkTitle ? /*#__PURE__*/React__default.createElement(Text, {
|
|
1715
1727
|
textAlign: "left",
|
|
1716
1728
|
fontSize: sizeParams.fontSize,
|
|
1717
1729
|
noWrap: true,
|
|
@@ -1753,7 +1765,21 @@ var BlerpListViewPremium$1 = function BlerpListViewPremium(_ref) {
|
|
|
1753
1765
|
handleClickTitle();
|
|
1754
1766
|
}
|
|
1755
1767
|
}
|
|
1756
|
-
}, bite.title)
|
|
1768
|
+
}, bite.title), biteSubtitle && /*#__PURE__*/React__default.createElement(Text, {
|
|
1769
|
+
textAlign: "left",
|
|
1770
|
+
fontSize: sizeParams.smallFontSize,
|
|
1771
|
+
noWrap: true,
|
|
1772
|
+
marginLeft: "10px",
|
|
1773
|
+
width: "100%",
|
|
1774
|
+
color: "white.override",
|
|
1775
|
+
sx: {},
|
|
1776
|
+
onClick: function onClick(e) {
|
|
1777
|
+
if (handleSubtitleClick) {
|
|
1778
|
+
e.stopPropagation();
|
|
1779
|
+
handleSubtitleClick();
|
|
1780
|
+
}
|
|
1781
|
+
}
|
|
1782
|
+
}, biteSubtitle))), /*#__PURE__*/React__default.createElement(Stack, {
|
|
1757
1783
|
direction: "row",
|
|
1758
1784
|
alignItems: "center"
|
|
1759
1785
|
}, primaryActionButton ? primaryActionButton : isLocked ? /*#__PURE__*/React__default.createElement(SaveContainer$1, {
|
|
@@ -1938,8 +1964,12 @@ var BlerpListView$1 = function BlerpListView(_ref) {
|
|
|
1938
1964
|
handleClickThreeDot = _ref.handleClickThreeDot,
|
|
1939
1965
|
handleClickUnsave = _ref.handleClickUnsave,
|
|
1940
1966
|
handleClickTitle = _ref.handleClickTitle,
|
|
1967
|
+
handleSubtitleClick = _ref.handleSubtitleClick,
|
|
1968
|
+
biteSubtitle = _ref.biteSubtitle,
|
|
1941
1969
|
isLinkTitle = _ref.isLinkTitle,
|
|
1942
1970
|
fluid = _ref.fluid,
|
|
1971
|
+
backgroundColor = _ref.backgroundColor,
|
|
1972
|
+
hoverColor = _ref.hoverColor,
|
|
1943
1973
|
props = _ref.props,
|
|
1944
1974
|
isLocked = _ref.isLocked,
|
|
1945
1975
|
isPremium = _ref.isPremium,
|
|
@@ -1962,7 +1992,8 @@ var BlerpListView$1 = function BlerpListView(_ref) {
|
|
|
1962
1992
|
var sizeParams;
|
|
1963
1993
|
var smallSize = {
|
|
1964
1994
|
width: 300,
|
|
1965
|
-
height:
|
|
1995
|
+
height: 52,
|
|
1996
|
+
smallFontSize: "12px",
|
|
1966
1997
|
fontSize: "16px",
|
|
1967
1998
|
imageSize: "40px",
|
|
1968
1999
|
reactionSpacing: 1,
|
|
@@ -1972,7 +2003,8 @@ var BlerpListView$1 = function BlerpListView(_ref) {
|
|
|
1972
2003
|
};
|
|
1973
2004
|
var mediumSize = {
|
|
1974
2005
|
width: 375,
|
|
1975
|
-
height:
|
|
2006
|
+
height: 60,
|
|
2007
|
+
smallFontSize: "14px",
|
|
1976
2008
|
fontSize: "18px",
|
|
1977
2009
|
imageSize: "48px",
|
|
1978
2010
|
reactionSpacing: 1,
|
|
@@ -1982,7 +2014,8 @@ var BlerpListView$1 = function BlerpListView(_ref) {
|
|
|
1982
2014
|
};
|
|
1983
2015
|
var largeSize = {
|
|
1984
2016
|
width: 440,
|
|
1985
|
-
height:
|
|
2017
|
+
height: 72,
|
|
2018
|
+
smallFontSize: "26px",
|
|
1986
2019
|
fontSize: "20px",
|
|
1987
2020
|
imageSize: "56px",
|
|
1988
2021
|
reactionSpacing: 1,
|
|
@@ -1995,7 +2028,8 @@ var BlerpListView$1 = function BlerpListView(_ref) {
|
|
|
1995
2028
|
if (fluid) {
|
|
1996
2029
|
sizeParams = {
|
|
1997
2030
|
width: "100%",
|
|
1998
|
-
height:
|
|
2031
|
+
height: 52,
|
|
2032
|
+
smallFontSize: "14px",
|
|
1999
2033
|
fontSize: "18px",
|
|
2000
2034
|
imageSize: "48px",
|
|
2001
2035
|
reactionSpacing: 1,
|
|
@@ -2035,13 +2069,17 @@ var BlerpListView$1 = function BlerpListView(_ref) {
|
|
|
2035
2069
|
handleClickThreeDot: handleClickThreeDot,
|
|
2036
2070
|
handleClickUnsave: handleClickUnsave,
|
|
2037
2071
|
handleClickTitle: handleClickTitle,
|
|
2072
|
+
biteSubtitle: biteSubtitle,
|
|
2073
|
+
handleSubtitleClick: handleSubtitleClick,
|
|
2038
2074
|
isLinkTitle: isLinkTitle,
|
|
2039
2075
|
fluid: fluid,
|
|
2040
2076
|
props: props,
|
|
2041
2077
|
isLocked: isLocked,
|
|
2042
2078
|
isPremium: isPremium,
|
|
2043
2079
|
handleClickLock: handleClickLock,
|
|
2044
|
-
handleClickPremium: handleClickPremium
|
|
2080
|
+
handleClickPremium: handleClickPremium,
|
|
2081
|
+
backgroundColor: backgroundColor,
|
|
2082
|
+
hoverColor: hoverColor
|
|
2045
2083
|
});
|
|
2046
2084
|
}
|
|
2047
2085
|
|
|
@@ -2051,13 +2089,13 @@ var BlerpListView$1 = function BlerpListView(_ref) {
|
|
|
2051
2089
|
minWidth: fluid && "300px",
|
|
2052
2090
|
borderRadius: "8px",
|
|
2053
2091
|
border: "2px transparent",
|
|
2054
|
-
bgcolor: "grey2.main",
|
|
2092
|
+
bgcolor: backgroundColor ? backgroundColor : "grey2.main",
|
|
2055
2093
|
backgroundOrigin: "border-box",
|
|
2056
2094
|
backgroundClip: "content-box, border-box",
|
|
2057
2095
|
boxShadow: "2px 2px 4px 0px #999999a1;",
|
|
2058
2096
|
transition: "0.3s",
|
|
2059
2097
|
"&:hover": {
|
|
2060
|
-
bgcolor: "grey3.main"
|
|
2098
|
+
bgcolor: hoverColor ? hoverColor : "grey3.main"
|
|
2061
2099
|
}
|
|
2062
2100
|
}
|
|
2063
2101
|
}, /*#__PURE__*/React__default.createElement(Box, {
|
|
@@ -2118,7 +2156,13 @@ var BlerpListView$1 = function BlerpListView(_ref) {
|
|
|
2118
2156
|
height: "30px",
|
|
2119
2157
|
color: "white.override"
|
|
2120
2158
|
}
|
|
2121
|
-
}))),
|
|
2159
|
+
}))), /*#__PURE__*/React__default.createElement(Stack, {
|
|
2160
|
+
direction: "column",
|
|
2161
|
+
alignItems: "flex-start",
|
|
2162
|
+
sx: {
|
|
2163
|
+
width: "80%"
|
|
2164
|
+
}
|
|
2165
|
+
}, isLinkTitle ? /*#__PURE__*/React__default.createElement("a", {
|
|
2122
2166
|
href: "/soundbites/".concat(bite._id),
|
|
2123
2167
|
style: {
|
|
2124
2168
|
textDecoration: "none",
|
|
@@ -2128,7 +2172,7 @@ var BlerpListView$1 = function BlerpListView(_ref) {
|
|
|
2128
2172
|
textAlign: "left",
|
|
2129
2173
|
fontSize: sizeParams.fontSize,
|
|
2130
2174
|
noWrap: true,
|
|
2131
|
-
width: "
|
|
2175
|
+
width: "100%",
|
|
2132
2176
|
marginLeft: "10px",
|
|
2133
2177
|
color: "white.override",
|
|
2134
2178
|
sx: {
|
|
@@ -2146,7 +2190,7 @@ var BlerpListView$1 = function BlerpListView(_ref) {
|
|
|
2146
2190
|
textAlign: "left",
|
|
2147
2191
|
fontSize: sizeParams.fontSize,
|
|
2148
2192
|
noWrap: true,
|
|
2149
|
-
width: "
|
|
2193
|
+
width: "100%",
|
|
2150
2194
|
marginLeft: "10px",
|
|
2151
2195
|
sx: {
|
|
2152
2196
|
":hover": {
|
|
@@ -2159,7 +2203,21 @@ var BlerpListView$1 = function BlerpListView(_ref) {
|
|
|
2159
2203
|
handleClickTitle();
|
|
2160
2204
|
}
|
|
2161
2205
|
}
|
|
2162
|
-
}, bite.title)
|
|
2206
|
+
}, bite.title), biteSubtitle && /*#__PURE__*/React__default.createElement(Text, {
|
|
2207
|
+
textAlign: "left",
|
|
2208
|
+
fontSize: sizeParams.smallFontSize,
|
|
2209
|
+
noWrap: true,
|
|
2210
|
+
marginLeft: "10px",
|
|
2211
|
+
width: "100%",
|
|
2212
|
+
color: "white.override",
|
|
2213
|
+
sx: {},
|
|
2214
|
+
onClick: function onClick(e) {
|
|
2215
|
+
if (handleSubtitleClick) {
|
|
2216
|
+
e.stopPropagation();
|
|
2217
|
+
handleSubtitleClick();
|
|
2218
|
+
}
|
|
2219
|
+
}
|
|
2220
|
+
}, biteSubtitle))), /*#__PURE__*/React__default.createElement(Stack, {
|
|
2163
2221
|
direction: "row"
|
|
2164
2222
|
}, primaryActionButton ? primaryActionButton : bite !== null && bite !== void 0 && bite.saved ? /*#__PURE__*/React__default.createElement(IconButton, {
|
|
2165
2223
|
onClick: function onClick(e) {
|
package/dist/index.umd.js
CHANGED
|
@@ -1545,10 +1545,14 @@
|
|
|
1545
1545
|
_ref.handleClickThreeDot;
|
|
1546
1546
|
var handleClickUnsave = _ref.handleClickUnsave,
|
|
1547
1547
|
handleClickTitle = _ref.handleClickTitle,
|
|
1548
|
+
handleSubtitleClick = _ref.handleSubtitleClick,
|
|
1549
|
+
biteSubtitle = _ref.biteSubtitle,
|
|
1548
1550
|
isLinkTitle = _ref.isLinkTitle,
|
|
1549
1551
|
isLocked = _ref.isLocked,
|
|
1550
1552
|
fluid = _ref.fluid;
|
|
1551
1553
|
_ref.props;
|
|
1554
|
+
var backgroundColor = _ref.backgroundColor,
|
|
1555
|
+
hoverColor = _ref.hoverColor;
|
|
1552
1556
|
_ref.isPremium;
|
|
1553
1557
|
var handleClickLock = _ref.handleClickLock,
|
|
1554
1558
|
handleClickPremium = _ref.handleClickPremium;
|
|
@@ -1576,12 +1580,11 @@
|
|
|
1576
1580
|
actionButtonHovered = _useState6[0],
|
|
1577
1581
|
setActionButtonHovered = _useState6[1];
|
|
1578
1582
|
|
|
1579
|
-
console.log(data);
|
|
1580
|
-
|
|
1581
1583
|
var sizeParams;
|
|
1582
1584
|
var smallSize = {
|
|
1583
1585
|
width: 300,
|
|
1584
|
-
height:
|
|
1586
|
+
height: 52,
|
|
1587
|
+
smallFontSize: "12px",
|
|
1585
1588
|
fontSize: "16px",
|
|
1586
1589
|
imageSize: "40px",
|
|
1587
1590
|
reactionSpacing: 1,
|
|
@@ -1591,7 +1594,8 @@
|
|
|
1591
1594
|
};
|
|
1592
1595
|
var mediumSize = {
|
|
1593
1596
|
width: 375,
|
|
1594
|
-
height:
|
|
1597
|
+
height: 60,
|
|
1598
|
+
smallFontSize: "14px",
|
|
1595
1599
|
fontSize: "18px",
|
|
1596
1600
|
imageSize: "48px",
|
|
1597
1601
|
reactionSpacing: 1,
|
|
@@ -1601,7 +1605,8 @@
|
|
|
1601
1605
|
};
|
|
1602
1606
|
var largeSize = {
|
|
1603
1607
|
width: 440,
|
|
1604
|
-
height:
|
|
1608
|
+
height: 72,
|
|
1609
|
+
smallFontSize: "26px",
|
|
1605
1610
|
fontSize: "20px",
|
|
1606
1611
|
imageSize: "56px",
|
|
1607
1612
|
reactionSpacing: 1,
|
|
@@ -1614,7 +1619,8 @@
|
|
|
1614
1619
|
if (fluid) {
|
|
1615
1620
|
sizeParams = {
|
|
1616
1621
|
width: "100%",
|
|
1617
|
-
height:
|
|
1622
|
+
height: 52,
|
|
1623
|
+
smallFontSize: "14px",
|
|
1618
1624
|
fontSize: "18px",
|
|
1619
1625
|
imageSize: "48px",
|
|
1620
1626
|
reactionSpacing: 1,
|
|
@@ -1659,7 +1665,7 @@
|
|
|
1659
1665
|
// overflow: "hidden",
|
|
1660
1666
|
"&:hover": {
|
|
1661
1667
|
transition: "0.3s",
|
|
1662
|
-
bgcolor: "grey2.main"
|
|
1668
|
+
bgcolor: hoverColor ? hoverColor : "grey2.main"
|
|
1663
1669
|
}
|
|
1664
1670
|
}
|
|
1665
1671
|
}, /*#__PURE__*/React__default['default'].createElement(Stack, {
|
|
@@ -1670,7 +1676,7 @@
|
|
|
1670
1676
|
left: "0",
|
|
1671
1677
|
right: "0",
|
|
1672
1678
|
borderRadius: "8px",
|
|
1673
|
-
background: data ? "linear-gradient(90deg, ".concat(data.vibrant, ", ").concat(theme.colors.grey5Override, ")") : "notBlack.main",
|
|
1679
|
+
background: backgroundColor ? backgroundColor : data ? "linear-gradient(90deg, ".concat(data.vibrant, ", ").concat(theme.colors.grey5Override, ")") : "notBlack.main",
|
|
1674
1680
|
transition: "opacity .15s ease-in-out",
|
|
1675
1681
|
opacity: isLocked ? isBlerpHovered ? ".8" : ".5" : isBlerpHovered ? "1" : ".8"
|
|
1676
1682
|
}
|
|
@@ -1732,7 +1738,13 @@
|
|
|
1732
1738
|
height: "30px",
|
|
1733
1739
|
color: "white.override"
|
|
1734
1740
|
}
|
|
1735
|
-
}))),
|
|
1741
|
+
}))), /*#__PURE__*/React__default['default'].createElement(Stack, {
|
|
1742
|
+
direction: "column",
|
|
1743
|
+
alignItems: "flex-start",
|
|
1744
|
+
sx: {
|
|
1745
|
+
width: "80%"
|
|
1746
|
+
}
|
|
1747
|
+
}, isLinkTitle ? /*#__PURE__*/React__default['default'].createElement(Text, {
|
|
1736
1748
|
textAlign: "left",
|
|
1737
1749
|
fontSize: sizeParams.fontSize,
|
|
1738
1750
|
noWrap: true,
|
|
@@ -1774,7 +1786,21 @@
|
|
|
1774
1786
|
handleClickTitle();
|
|
1775
1787
|
}
|
|
1776
1788
|
}
|
|
1777
|
-
}, bite.title)
|
|
1789
|
+
}, bite.title), biteSubtitle && /*#__PURE__*/React__default['default'].createElement(Text, {
|
|
1790
|
+
textAlign: "left",
|
|
1791
|
+
fontSize: sizeParams.smallFontSize,
|
|
1792
|
+
noWrap: true,
|
|
1793
|
+
marginLeft: "10px",
|
|
1794
|
+
width: "100%",
|
|
1795
|
+
color: "white.override",
|
|
1796
|
+
sx: {},
|
|
1797
|
+
onClick: function onClick(e) {
|
|
1798
|
+
if (handleSubtitleClick) {
|
|
1799
|
+
e.stopPropagation();
|
|
1800
|
+
handleSubtitleClick();
|
|
1801
|
+
}
|
|
1802
|
+
}
|
|
1803
|
+
}, biteSubtitle))), /*#__PURE__*/React__default['default'].createElement(Stack, {
|
|
1778
1804
|
direction: "row",
|
|
1779
1805
|
alignItems: "center"
|
|
1780
1806
|
}, primaryActionButton ? primaryActionButton : isLocked ? /*#__PURE__*/React__default['default'].createElement(SaveContainer$1, {
|
|
@@ -1959,8 +1985,12 @@
|
|
|
1959
1985
|
handleClickThreeDot = _ref.handleClickThreeDot,
|
|
1960
1986
|
handleClickUnsave = _ref.handleClickUnsave,
|
|
1961
1987
|
handleClickTitle = _ref.handleClickTitle,
|
|
1988
|
+
handleSubtitleClick = _ref.handleSubtitleClick,
|
|
1989
|
+
biteSubtitle = _ref.biteSubtitle,
|
|
1962
1990
|
isLinkTitle = _ref.isLinkTitle,
|
|
1963
1991
|
fluid = _ref.fluid,
|
|
1992
|
+
backgroundColor = _ref.backgroundColor,
|
|
1993
|
+
hoverColor = _ref.hoverColor,
|
|
1964
1994
|
props = _ref.props,
|
|
1965
1995
|
isLocked = _ref.isLocked,
|
|
1966
1996
|
isPremium = _ref.isPremium,
|
|
@@ -1983,7 +2013,8 @@
|
|
|
1983
2013
|
var sizeParams;
|
|
1984
2014
|
var smallSize = {
|
|
1985
2015
|
width: 300,
|
|
1986
|
-
height:
|
|
2016
|
+
height: 52,
|
|
2017
|
+
smallFontSize: "12px",
|
|
1987
2018
|
fontSize: "16px",
|
|
1988
2019
|
imageSize: "40px",
|
|
1989
2020
|
reactionSpacing: 1,
|
|
@@ -1993,7 +2024,8 @@
|
|
|
1993
2024
|
};
|
|
1994
2025
|
var mediumSize = {
|
|
1995
2026
|
width: 375,
|
|
1996
|
-
height:
|
|
2027
|
+
height: 60,
|
|
2028
|
+
smallFontSize: "14px",
|
|
1997
2029
|
fontSize: "18px",
|
|
1998
2030
|
imageSize: "48px",
|
|
1999
2031
|
reactionSpacing: 1,
|
|
@@ -2003,7 +2035,8 @@
|
|
|
2003
2035
|
};
|
|
2004
2036
|
var largeSize = {
|
|
2005
2037
|
width: 440,
|
|
2006
|
-
height:
|
|
2038
|
+
height: 72,
|
|
2039
|
+
smallFontSize: "26px",
|
|
2007
2040
|
fontSize: "20px",
|
|
2008
2041
|
imageSize: "56px",
|
|
2009
2042
|
reactionSpacing: 1,
|
|
@@ -2016,7 +2049,8 @@
|
|
|
2016
2049
|
if (fluid) {
|
|
2017
2050
|
sizeParams = {
|
|
2018
2051
|
width: "100%",
|
|
2019
|
-
height:
|
|
2052
|
+
height: 52,
|
|
2053
|
+
smallFontSize: "14px",
|
|
2020
2054
|
fontSize: "18px",
|
|
2021
2055
|
imageSize: "48px",
|
|
2022
2056
|
reactionSpacing: 1,
|
|
@@ -2056,13 +2090,17 @@
|
|
|
2056
2090
|
handleClickThreeDot: handleClickThreeDot,
|
|
2057
2091
|
handleClickUnsave: handleClickUnsave,
|
|
2058
2092
|
handleClickTitle: handleClickTitle,
|
|
2093
|
+
biteSubtitle: biteSubtitle,
|
|
2094
|
+
handleSubtitleClick: handleSubtitleClick,
|
|
2059
2095
|
isLinkTitle: isLinkTitle,
|
|
2060
2096
|
fluid: fluid,
|
|
2061
2097
|
props: props,
|
|
2062
2098
|
isLocked: isLocked,
|
|
2063
2099
|
isPremium: isPremium,
|
|
2064
2100
|
handleClickLock: handleClickLock,
|
|
2065
|
-
handleClickPremium: handleClickPremium
|
|
2101
|
+
handleClickPremium: handleClickPremium,
|
|
2102
|
+
backgroundColor: backgroundColor,
|
|
2103
|
+
hoverColor: hoverColor
|
|
2066
2104
|
});
|
|
2067
2105
|
}
|
|
2068
2106
|
|
|
@@ -2072,13 +2110,13 @@
|
|
|
2072
2110
|
minWidth: fluid && "300px",
|
|
2073
2111
|
borderRadius: "8px",
|
|
2074
2112
|
border: "2px transparent",
|
|
2075
|
-
bgcolor: "grey2.main",
|
|
2113
|
+
bgcolor: backgroundColor ? backgroundColor : "grey2.main",
|
|
2076
2114
|
backgroundOrigin: "border-box",
|
|
2077
2115
|
backgroundClip: "content-box, border-box",
|
|
2078
2116
|
boxShadow: "2px 2px 4px 0px #999999a1;",
|
|
2079
2117
|
transition: "0.3s",
|
|
2080
2118
|
"&:hover": {
|
|
2081
|
-
bgcolor: "grey3.main"
|
|
2119
|
+
bgcolor: hoverColor ? hoverColor : "grey3.main"
|
|
2082
2120
|
}
|
|
2083
2121
|
}
|
|
2084
2122
|
}, /*#__PURE__*/React__default['default'].createElement(Box, {
|
|
@@ -2139,7 +2177,13 @@
|
|
|
2139
2177
|
height: "30px",
|
|
2140
2178
|
color: "white.override"
|
|
2141
2179
|
}
|
|
2142
|
-
}))),
|
|
2180
|
+
}))), /*#__PURE__*/React__default['default'].createElement(Stack, {
|
|
2181
|
+
direction: "column",
|
|
2182
|
+
alignItems: "flex-start",
|
|
2183
|
+
sx: {
|
|
2184
|
+
width: "80%"
|
|
2185
|
+
}
|
|
2186
|
+
}, isLinkTitle ? /*#__PURE__*/React__default['default'].createElement("a", {
|
|
2143
2187
|
href: "/soundbites/".concat(bite._id),
|
|
2144
2188
|
style: {
|
|
2145
2189
|
textDecoration: "none",
|
|
@@ -2149,7 +2193,7 @@
|
|
|
2149
2193
|
textAlign: "left",
|
|
2150
2194
|
fontSize: sizeParams.fontSize,
|
|
2151
2195
|
noWrap: true,
|
|
2152
|
-
width: "
|
|
2196
|
+
width: "100%",
|
|
2153
2197
|
marginLeft: "10px",
|
|
2154
2198
|
color: "white.override",
|
|
2155
2199
|
sx: {
|
|
@@ -2167,7 +2211,7 @@
|
|
|
2167
2211
|
textAlign: "left",
|
|
2168
2212
|
fontSize: sizeParams.fontSize,
|
|
2169
2213
|
noWrap: true,
|
|
2170
|
-
width: "
|
|
2214
|
+
width: "100%",
|
|
2171
2215
|
marginLeft: "10px",
|
|
2172
2216
|
sx: {
|
|
2173
2217
|
":hover": {
|
|
@@ -2180,7 +2224,21 @@
|
|
|
2180
2224
|
handleClickTitle();
|
|
2181
2225
|
}
|
|
2182
2226
|
}
|
|
2183
|
-
}, bite.title)
|
|
2227
|
+
}, bite.title), biteSubtitle && /*#__PURE__*/React__default['default'].createElement(Text, {
|
|
2228
|
+
textAlign: "left",
|
|
2229
|
+
fontSize: sizeParams.smallFontSize,
|
|
2230
|
+
noWrap: true,
|
|
2231
|
+
marginLeft: "10px",
|
|
2232
|
+
width: "100%",
|
|
2233
|
+
color: "white.override",
|
|
2234
|
+
sx: {},
|
|
2235
|
+
onClick: function onClick(e) {
|
|
2236
|
+
if (handleSubtitleClick) {
|
|
2237
|
+
e.stopPropagation();
|
|
2238
|
+
handleSubtitleClick();
|
|
2239
|
+
}
|
|
2240
|
+
}
|
|
2241
|
+
}, biteSubtitle))), /*#__PURE__*/React__default['default'].createElement(Stack, {
|
|
2184
2242
|
direction: "row"
|
|
2185
2243
|
}, primaryActionButton ? primaryActionButton : bite !== null && bite !== void 0 && bite.saved ? /*#__PURE__*/React__default['default'].createElement(IconButton, {
|
|
2186
2244
|
onClick: function onClick(e) {
|