@veniceswap/uikit 0.65.12 → 0.65.19
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 +1 @@
|
|
1
|
-
|
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/)
|
1
|
+
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
|
package/dist/index.cjs.js
CHANGED
@@ -3241,8 +3241,11 @@ var templateObject_1$q, templateObject_2$h;
|
|
3241
3241
|
|
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
|
-
|
3245
|
-
|
3244
|
+
var isExternal = /https|http/.test(href || '');
|
3245
|
+
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
|
+
React__default["default"].createElement(StyledMenuItem, __assign({ as: reactRouterDom.Link, to: href || '', "$isActive": isActive, "$variant": variant, "$statusColor": statusColor }, props), children)
|
3247
|
+
:
|
3248
|
+
React__default["default"].createElement(StyledMenuItem, __assign({ as: 'div', "$variant": variant, "$statusColor": statusColor }, props), children))));
|
3246
3249
|
};
|
3247
3250
|
|
3248
3251
|
var StyledSubMenuItems = styled__default["default"](Flex)(templateObject_1$p || (templateObject_1$p = __makeTemplateObject(["\n background-color: ", ";\n box-shadow: inset 0px -2px 0px -8px rgba(133, 133, 133, 0.1);\n overflow-x: scroll;\n scrollbar-width: none;\n -ms-overflow-style: none;\n &::-webkit-scrollbar {\n display: none;\n }\n"], ["\n background-color: ", ";\n box-shadow: inset 0px -2px 0px -8px rgba(133, 133, 133, 0.1);\n overflow-x: scroll;\n scrollbar-width: none;\n -ms-overflow-style: none;\n &::-webkit-scrollbar {\n display: none;\n }\n"])), function (_a) {
|
@@ -4432,7 +4435,7 @@ var BottomNavItem = function (_a) {
|
|
4432
4435
|
var bottomNavItemContent = (React__default["default"].createElement(Flex, { flexDirection: "column", justifyContent: "center", alignItems: "center", height: "100%" },
|
4433
4436
|
iconName && (React__default["default"].createElement(AnimatedIconComponent, { iconName: iconName, height: "22px", width: "21px", color: isActive ? "secondary" : "textSubtle", isActive: isActive, activeBackgroundColor: "backgroundAlt" })),
|
4434
4437
|
React__default["default"].createElement(StyledBottomNavText, { color: isActive ? "text" : "textSubtle", fontWeight: isActive ? "600" : "400", fontSize: "10px" }, label)));
|
4435
|
-
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));
|
4438
|
+
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)));
|
4436
4439
|
};
|
4437
4440
|
|
4438
4441
|
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
@@ -3209,8 +3209,11 @@ var templateObject_1$q, templateObject_2$h;
|
|
3209
3209
|
|
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
|
-
|
3213
|
-
|
3212
|
+
var isExternal = /https|http/.test(href || '');
|
3213
|
+
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
|
+
React__default.createElement(StyledMenuItem, __assign({ as: Link$1, to: href || '', "$isActive": isActive, "$variant": variant, "$statusColor": statusColor }, props), children)
|
3215
|
+
:
|
3216
|
+
React__default.createElement(StyledMenuItem, __assign({ as: 'div', "$variant": variant, "$statusColor": statusColor }, props), children))));
|
3214
3217
|
};
|
3215
3218
|
|
3216
3219
|
var StyledSubMenuItems = styled(Flex)(templateObject_1$p || (templateObject_1$p = __makeTemplateObject(["\n background-color: ", ";\n box-shadow: inset 0px -2px 0px -8px rgba(133, 133, 133, 0.1);\n overflow-x: scroll;\n scrollbar-width: none;\n -ms-overflow-style: none;\n &::-webkit-scrollbar {\n display: none;\n }\n"], ["\n background-color: ", ";\n box-shadow: inset 0px -2px 0px -8px rgba(133, 133, 133, 0.1);\n overflow-x: scroll;\n scrollbar-width: none;\n -ms-overflow-style: none;\n &::-webkit-scrollbar {\n display: none;\n }\n"])), function (_a) {
|
@@ -4400,7 +4403,7 @@ var BottomNavItem = function (_a) {
|
|
4400
4403
|
var bottomNavItemContent = (React__default.createElement(Flex, { flexDirection: "column", justifyContent: "center", alignItems: "center", height: "100%" },
|
4401
4404
|
iconName && (React__default.createElement(AnimatedIconComponent, { iconName: iconName, height: "22px", width: "21px", color: isActive ? "secondary" : "textSubtle", isActive: isActive, activeBackgroundColor: "backgroundAlt" })),
|
4402
4405
|
React__default.createElement(StyledBottomNavText, { color: isActive ? "text" : "textSubtle", fontWeight: isActive ? "600" : "400", fontSize: "10px" }, label)));
|
4403
|
-
return showItemsOnMobile ? (React__default.createElement(StyledBottomNavItem, __assign({ type: "button" }, props), bottomNavItemContent)) : (React__default.createElement(StyledBottomNavItem, __assign({ as: Link$1, to: href }, props), bottomNavItemContent));
|
4406
|
+
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)));
|
4404
4407
|
};
|
4405
4408
|
|
4406
4409
|
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) {
|