@veniceswap/uikit 0.65.13 → 0.65.20
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/README.md
CHANGED
@@ -1,40 +0,0 @@
|
|
1
|
-
# 🥞 Pancake UIkit
|
2
|
-
|
3
|
-
[](https://www.npmjs.com/package/@pancakeswap-libs/uikit) [](https://www.npmjs.com/package/@pancakeswap-libs/uikit)
|
4
|
-
|
5
|
-
Pancake UIkit is a set of React components and hooks used to build pages on Pancake's apps. It also contains a theme file for dark and light mode.
|
6
|
-
|
7
|
-
## Install
|
8
|
-
|
9
|
-
`yarn add @pancakeswap-libs/uikit`
|
10
|
-
|
11
|
-
## Setup
|
12
|
-
|
13
|
-
### Theme
|
14
|
-
|
15
|
-
Before using Pancake UIkit, you need to provide the theme file to styled-component.
|
16
|
-
|
17
|
-
```
|
18
|
-
import { ThemeProvider } from 'styled-components'
|
19
|
-
import { light, dark } from '@pancakeswap-libs/uikit'
|
20
|
-
...
|
21
|
-
<ThemeProvider theme={isDark}>...</ThemeProvider>
|
22
|
-
```
|
23
|
-
|
24
|
-
### Reset
|
25
|
-
|
26
|
-
A reset CSS is available as a global styled component.
|
27
|
-
|
28
|
-
```
|
29
|
-
import { ResetCSS } from '@pancakeswap-libs/uikit'
|
30
|
-
...
|
31
|
-
<ResetCSS />
|
32
|
-
```
|
33
|
-
|
34
|
-
### Types
|
35
|
-
|
36
|
-
This project is built with Typescript and export all the relevant types.
|
37
|
-
|
38
|
-
## How to use the UIkit
|
39
|
-
|
40
|
-
If you want to use components from the UIkit, check the [Storybook documentation](https://pancakeswap.github.io/pancake-uikit/)
|
package/dist/index.cjs.js
CHANGED
@@ -3242,6 +3242,7 @@ var templateObject_1$q, templateObject_2$h;
|
|
3242
3242
|
var MenuItem$1 = function (_a) {
|
3243
3243
|
var children = _a.children, href = _a.href, _b = _a.isActive, isActive = _b === void 0 ? false : _b, _c = _a.variant, variant = _c === void 0 ? "default" : _c, statusColor = _a.statusColor, props = __rest(_a, ["children", "href", "isActive", "variant", "statusColor"]);
|
3244
3244
|
var isExternal = /https|http/.test(href || '');
|
3245
|
+
console.log(href, isExternal);
|
3245
3246
|
return (React__default["default"].createElement(StyledMenuItemContainer, { "$isActive": isActive, "$variant": variant }, isExternal ? (React__default["default"].createElement(StyledMenuItem, __assign({ href: href, target: "_blank", "$isActive": isActive, "$variant": variant, "$statusColor": statusColor }, props), children)) : (href ?
|
3246
3247
|
React__default["default"].createElement(StyledMenuItem, __assign({ as: reactRouterDom.Link, to: href || '', "$isActive": isActive, "$variant": variant, "$statusColor": statusColor }, props), children)
|
3247
3248
|
:
|
@@ -4435,7 +4436,7 @@ var BottomNavItem = function (_a) {
|
|
4435
4436
|
var bottomNavItemContent = (React__default["default"].createElement(Flex, { flexDirection: "column", justifyContent: "center", alignItems: "center", height: "100%" },
|
4436
4437
|
iconName && (React__default["default"].createElement(AnimatedIconComponent, { iconName: iconName, height: "22px", width: "21px", color: isActive ? "secondary" : "textSubtle", isActive: isActive, activeBackgroundColor: "backgroundAlt" })),
|
4437
4438
|
React__default["default"].createElement(StyledBottomNavText, { color: isActive ? "text" : "textSubtle", fontWeight: isActive ? "600" : "400", fontSize: "10px" }, label)));
|
4438
|
-
return showItemsOnMobile ? (React__default["default"].createElement(StyledBottomNavItem, __assign({ type: "button" }, props), bottomNavItemContent)) : (React__default["default"].createElement(StyledBottomNavItem, __assign({ as: reactRouterDom.Link, to: href }, props), bottomNavItemContent));
|
4439
|
+
return showItemsOnMobile ? (React__default["default"].createElement(StyledBottomNavItem, __assign({ type: "button" }, props), bottomNavItemContent)) : (href ? (React__default["default"].createElement(StyledBottomNavItem, __assign({ as: reactRouterDom.Link, to: href }, props), bottomNavItemContent)) : (React__default["default"].createElement(StyledBottomNavItem, __assign({ as: 'div' }, props), bottomNavItemContent)));
|
4439
4440
|
};
|
4440
4441
|
|
4441
4442
|
var StyledBottomNav = styled__default["default"](Flex)(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n position: fixed;\n bottom: 0px;\n width: 100%;\n padding: 5px 8px;\n background: ", ";\n border-top: 1px solid ", ";\n padding-bottom: env(safe-area-inset-bottom);\n html[data-useragent*=\"TokenPocket_iOS\"] & {\n padding-bottom: 45px;\n }\n"], ["\n position: fixed;\n bottom: 0px;\n width: 100%;\n padding: 5px 8px;\n background: ", ";\n border-top: 1px solid ", ";\n padding-bottom: env(safe-area-inset-bottom);\n html[data-useragent*=\"TokenPocket_iOS\"] & {\n padding-bottom: 45px;\n }\n"])), function (_a) {
|
package/dist/index.esm.js
CHANGED
@@ -3210,6 +3210,7 @@ var templateObject_1$q, templateObject_2$h;
|
|
3210
3210
|
var MenuItem$1 = function (_a) {
|
3211
3211
|
var children = _a.children, href = _a.href, _b = _a.isActive, isActive = _b === void 0 ? false : _b, _c = _a.variant, variant = _c === void 0 ? "default" : _c, statusColor = _a.statusColor, props = __rest(_a, ["children", "href", "isActive", "variant", "statusColor"]);
|
3212
3212
|
var isExternal = /https|http/.test(href || '');
|
3213
|
+
console.log(href, isExternal);
|
3213
3214
|
return (React__default.createElement(StyledMenuItemContainer, { "$isActive": isActive, "$variant": variant }, isExternal ? (React__default.createElement(StyledMenuItem, __assign({ href: href, target: "_blank", "$isActive": isActive, "$variant": variant, "$statusColor": statusColor }, props), children)) : (href ?
|
3214
3215
|
React__default.createElement(StyledMenuItem, __assign({ as: Link$1, to: href || '', "$isActive": isActive, "$variant": variant, "$statusColor": statusColor }, props), children)
|
3215
3216
|
:
|
@@ -4403,7 +4404,7 @@ var BottomNavItem = function (_a) {
|
|
4403
4404
|
var bottomNavItemContent = (React__default.createElement(Flex, { flexDirection: "column", justifyContent: "center", alignItems: "center", height: "100%" },
|
4404
4405
|
iconName && (React__default.createElement(AnimatedIconComponent, { iconName: iconName, height: "22px", width: "21px", color: isActive ? "secondary" : "textSubtle", isActive: isActive, activeBackgroundColor: "backgroundAlt" })),
|
4405
4406
|
React__default.createElement(StyledBottomNavText, { color: isActive ? "text" : "textSubtle", fontWeight: isActive ? "600" : "400", fontSize: "10px" }, label)));
|
4406
|
-
return showItemsOnMobile ? (React__default.createElement(StyledBottomNavItem, __assign({ type: "button" }, props), bottomNavItemContent)) : (React__default.createElement(StyledBottomNavItem, __assign({ as: Link$1, to: href }, props), bottomNavItemContent));
|
4407
|
+
return showItemsOnMobile ? (React__default.createElement(StyledBottomNavItem, __assign({ type: "button" }, props), bottomNavItemContent)) : (href ? (React__default.createElement(StyledBottomNavItem, __assign({ as: Link$1, to: href }, props), bottomNavItemContent)) : (React__default.createElement(StyledBottomNavItem, __assign({ as: 'div' }, props), bottomNavItemContent)));
|
4407
4408
|
};
|
4408
4409
|
|
4409
4410
|
var StyledBottomNav = styled(Flex)(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n position: fixed;\n bottom: 0px;\n width: 100%;\n padding: 5px 8px;\n background: ", ";\n border-top: 1px solid ", ";\n padding-bottom: env(safe-area-inset-bottom);\n html[data-useragent*=\"TokenPocket_iOS\"] & {\n padding-bottom: 45px;\n }\n"], ["\n position: fixed;\n bottom: 0px;\n width: 100%;\n padding: 5px 8px;\n background: ", ";\n border-top: 1px solid ", ";\n padding-bottom: env(safe-area-inset-bottom);\n html[data-useragent*=\"TokenPocket_iOS\"] & {\n padding-bottom: 45px;\n }\n"])), function (_a) {
|