venice-ui 2.1.0 → 2.1.2
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/components/Checkbox/index.js +17 -0
- package/dist/cjs/components/DropdownMenu/DropdownMenu.js +2 -3
- package/dist/cjs/components/DropdownMenu/DropdownMenu.styles.js +8 -1
- package/dist/cjs/index.js +1 -0
- package/dist/esm/components/Checkbox/index.js +1 -0
- package/dist/esm/components/DropdownMenu/DropdownMenu.js +3 -4
- package/dist/esm/components/DropdownMenu/DropdownMenu.styles.js +7 -0
- package/dist/esm/index.js +1 -0
- package/dist/types/components/Checkbox/index.d.ts +1 -0
- package/dist/types/components/DropdownMenu/DropdownMenu.d.ts +2 -0
- package/dist/types/components/DropdownMenu/DropdownMenu.styles.d.ts +6 -0
- package/dist/types/index.d.ts +1 -0
- package/package.json +1 -1
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
14
|
+
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
15
|
+
};
|
|
16
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
+
__exportStar(require("./Checkbox"), exports);
|
|
@@ -32,7 +32,7 @@ const DropdownMenu_styles_1 = require("./DropdownMenu.styles");
|
|
|
32
32
|
const Aligment_1 = require("../Aligment");
|
|
33
33
|
const Typography_1 = require("../Typography");
|
|
34
34
|
const react_dom_1 = require("react-dom");
|
|
35
|
-
const DropdownMenu = ({ size = 'medium', iconName = 'more_vert', header = false, headerTitle, headerSubtitle, footer = false, footerText, footerAction, options, right = false, left = false, targetID, iconColor = Theme_1.mainTheme.iconColor, iconHoverColor = Theme_1.mainTheme.iconHoverColor, iconBgColor = Theme_1.mainTheme.iconBgColor, iconBgHoverColor = Theme_1.mainTheme.iconBgHoverColor, position = 'left', zIndex, }) => {
|
|
35
|
+
const DropdownMenu = ({ size = 'medium', iconName = 'more_vert', header = false, headerTitle, headerSubtitle, footer = false, footerText, footerAction, options, right = false, left = false, targetID, iconColor = Theme_1.mainTheme.iconColor, iconHoverColor = Theme_1.mainTheme.iconHoverColor, iconBgColor = Theme_1.mainTheme.iconBgColor, iconBgHoverColor = Theme_1.mainTheme.iconBgHoverColor, position = 'left', zIndex, textMode = false, label = '', }) => {
|
|
36
36
|
const [open, toogleOpen] = (0, react_1.useState)(false);
|
|
37
37
|
const ref = (0, react_1.useRef)(null);
|
|
38
38
|
const sourceRef = (0, react_1.useRef)(null);
|
|
@@ -101,8 +101,7 @@ const DropdownMenu = ({ size = 'medium', iconName = 'more_vert', header = false,
|
|
|
101
101
|
};
|
|
102
102
|
}, [open]);
|
|
103
103
|
return (react_1.default.createElement(DropdownMenu_styles_1.DropdownMenuElement, null,
|
|
104
|
-
react_1.default.createElement("div", { ref: sourceRef, onClick: () => toogle(!open) },
|
|
105
|
-
react_1.default.createElement(Icons_1.Icon, { name: iconName, size: (0, common_1.setIconSize)(size), isActive: open, right: right, left: left, iconColor: iconColor, iconHoverColor: iconHoverColor, iconBgColor: iconBgColor, iconBgHoverColor: iconBgHoverColor })),
|
|
104
|
+
react_1.default.createElement("div", { ref: sourceRef, onClick: () => toogle(!open) }, textMode ? (react_1.default.createElement(DropdownMenu_styles_1.DropdownMenuLabel, { size: size }, label)) : (react_1.default.createElement(Icons_1.Icon, { name: iconName, size: (0, common_1.setIconSize)(size), isActive: open, right: right, left: left, iconColor: iconColor, iconHoverColor: iconHoverColor, iconBgColor: iconBgColor, iconBgHoverColor: iconBgHoverColor }))),
|
|
106
105
|
open &&
|
|
107
106
|
(0, react_dom_1.createPortal)(react_1.default.createElement(common_1.Panel, { style: dropdownStyles, ref: ref, size: size, zIndex: zIndex },
|
|
108
107
|
react_1.default.createElement(Aligment_1.Aligment, { direction: "column" },
|
|
@@ -3,11 +3,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
3
3
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
4
|
};
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
exports.DropdownMenuOption = exports.DropdownMenuContent = exports.DropdownMenuFooter = exports.DropdownMenuHeader = exports.DropdownMenuElement = void 0;
|
|
6
|
+
exports.DropdownMenuLabel = exports.DropdownMenuOption = exports.DropdownMenuContent = exports.DropdownMenuFooter = exports.DropdownMenuHeader = exports.DropdownMenuElement = void 0;
|
|
7
7
|
const polished_1 = require("polished");
|
|
8
8
|
const styled_components_1 = __importDefault(require("styled-components"));
|
|
9
9
|
const Theme_1 = require("../../Theme");
|
|
10
|
+
const common_1 = require("../common");
|
|
10
11
|
exports.DropdownMenuElement = styled_components_1.default.div `
|
|
12
|
+
cursor: pointer;
|
|
11
13
|
position: relative;
|
|
12
14
|
width: auto;
|
|
13
15
|
display: flex;
|
|
@@ -41,3 +43,8 @@ exports.DropdownMenuOption = styled_components_1.default.div `
|
|
|
41
43
|
background-color: ${(p) => p.isDisable ? Theme_1.Theme.colors.gray_4 : (0, polished_1.lighten)(0.4, Theme_1.Theme.colors.primary)};
|
|
42
44
|
}
|
|
43
45
|
`;
|
|
46
|
+
exports.DropdownMenuLabel = styled_components_1.default.div `
|
|
47
|
+
display: flex;
|
|
48
|
+
${(p) => (0, common_1.setSize)(p.size)}
|
|
49
|
+
color:${p => p.theme.optionActiveColor};
|
|
50
|
+
`;
|
package/dist/cjs/index.js
CHANGED
|
@@ -18,6 +18,7 @@ __exportStar(require("./components/Aligment"), exports);
|
|
|
18
18
|
__exportStar(require("./components/Button"), exports);
|
|
19
19
|
__exportStar(require("./components/ButtonsFooter"), exports);
|
|
20
20
|
__exportStar(require("./components/Card"), exports);
|
|
21
|
+
__exportStar(require("./components/Checkbox"), exports);
|
|
21
22
|
__exportStar(require("./components/Chips"), exports);
|
|
22
23
|
__exportStar(require("./components/DatePicker"), exports);
|
|
23
24
|
__exportStar(require("./components/Dropdown"), exports);
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './Checkbox';
|
|
@@ -2,11 +2,11 @@ import { Panel, setIconSize } from '../common';
|
|
|
2
2
|
import React, { useState, useRef, useEffect } from 'react';
|
|
3
3
|
import { Theme, mainTheme } from '../../Theme';
|
|
4
4
|
import { Icon } from '../Icons';
|
|
5
|
-
import { DropdownMenuOption, DropdownMenuElement, DropdownMenuContent, DropdownMenuFooter, DropdownMenuHeader, } from './DropdownMenu.styles';
|
|
5
|
+
import { DropdownMenuOption, DropdownMenuElement, DropdownMenuContent, DropdownMenuFooter, DropdownMenuHeader, DropdownMenuLabel, } from './DropdownMenu.styles';
|
|
6
6
|
import { Aligment } from '../Aligment';
|
|
7
7
|
import { TextAccent, TextLabel, Text } from '../Typography';
|
|
8
8
|
import { createPortal } from 'react-dom';
|
|
9
|
-
export const DropdownMenu = ({ size = 'medium', iconName = 'more_vert', header = false, headerTitle, headerSubtitle, footer = false, footerText, footerAction, options, right = false, left = false, targetID, iconColor = mainTheme.iconColor, iconHoverColor = mainTheme.iconHoverColor, iconBgColor = mainTheme.iconBgColor, iconBgHoverColor = mainTheme.iconBgHoverColor, position = 'left', zIndex, }) => {
|
|
9
|
+
export const DropdownMenu = ({ size = 'medium', iconName = 'more_vert', header = false, headerTitle, headerSubtitle, footer = false, footerText, footerAction, options, right = false, left = false, targetID, iconColor = mainTheme.iconColor, iconHoverColor = mainTheme.iconHoverColor, iconBgColor = mainTheme.iconBgColor, iconBgHoverColor = mainTheme.iconBgHoverColor, position = 'left', zIndex, textMode = false, label = '', }) => {
|
|
10
10
|
const [open, toogleOpen] = useState(false);
|
|
11
11
|
const ref = useRef(null);
|
|
12
12
|
const sourceRef = useRef(null);
|
|
@@ -75,8 +75,7 @@ export const DropdownMenu = ({ size = 'medium', iconName = 'more_vert', header =
|
|
|
75
75
|
};
|
|
76
76
|
}, [open]);
|
|
77
77
|
return (React.createElement(DropdownMenuElement, null,
|
|
78
|
-
React.createElement("div", { ref: sourceRef, onClick: () => toogle(!open) },
|
|
79
|
-
React.createElement(Icon, { name: iconName, size: setIconSize(size), isActive: open, right: right, left: left, iconColor: iconColor, iconHoverColor: iconHoverColor, iconBgColor: iconBgColor, iconBgHoverColor: iconBgHoverColor })),
|
|
78
|
+
React.createElement("div", { ref: sourceRef, onClick: () => toogle(!open) }, textMode ? (React.createElement(DropdownMenuLabel, { size: size }, label)) : (React.createElement(Icon, { name: iconName, size: setIconSize(size), isActive: open, right: right, left: left, iconColor: iconColor, iconHoverColor: iconHoverColor, iconBgColor: iconBgColor, iconBgHoverColor: iconBgHoverColor }))),
|
|
80
79
|
open &&
|
|
81
80
|
createPortal(React.createElement(Panel, { style: dropdownStyles, ref: ref, size: size, zIndex: zIndex },
|
|
82
81
|
React.createElement(Aligment, { direction: "column" },
|
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
import { lighten } from 'polished';
|
|
2
2
|
import styled from 'styled-components';
|
|
3
3
|
import { Theme } from '../../Theme';
|
|
4
|
+
import { setSize } from '../common';
|
|
4
5
|
export const DropdownMenuElement = styled.div `
|
|
6
|
+
cursor: pointer;
|
|
5
7
|
position: relative;
|
|
6
8
|
width: auto;
|
|
7
9
|
display: flex;
|
|
@@ -35,3 +37,8 @@ export const DropdownMenuOption = styled.div `
|
|
|
35
37
|
background-color: ${(p) => p.isDisable ? Theme.colors.gray_4 : lighten(0.4, Theme.colors.primary)};
|
|
36
38
|
}
|
|
37
39
|
`;
|
|
40
|
+
export const DropdownMenuLabel = styled.div `
|
|
41
|
+
display: flex;
|
|
42
|
+
${(p) => setSize(p.size)}
|
|
43
|
+
color:${p => p.theme.optionActiveColor};
|
|
44
|
+
`;
|
package/dist/esm/index.js
CHANGED
|
@@ -2,6 +2,7 @@ export * from './components/Aligment';
|
|
|
2
2
|
export * from './components/Button';
|
|
3
3
|
export * from './components/ButtonsFooter';
|
|
4
4
|
export * from './components/Card';
|
|
5
|
+
export * from './components/Checkbox';
|
|
5
6
|
export * from './components/Chips';
|
|
6
7
|
export * from './components/DatePicker';
|
|
7
8
|
export * from './components/Dropdown';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './Checkbox';
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { InputSize } from '../../types';
|
|
1
2
|
export declare const DropdownMenuElement: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
2
3
|
export declare const DropdownMenuHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
3
4
|
export declare const DropdownMenuFooter: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
@@ -7,4 +8,9 @@ interface IPanelOptionStyle {
|
|
|
7
8
|
isDisable: boolean;
|
|
8
9
|
}
|
|
9
10
|
export declare const DropdownMenuOption: import("styled-components").StyledComponent<"div", any, IPanelOptionStyle, never>;
|
|
11
|
+
interface IDropdownMenuLabel {
|
|
12
|
+
size: InputSize;
|
|
13
|
+
theme: any;
|
|
14
|
+
}
|
|
15
|
+
export declare const DropdownMenuLabel: import("styled-components").StyledComponent<"div", any, IDropdownMenuLabel, never>;
|
|
10
16
|
export {};
|
package/dist/types/index.d.ts
CHANGED
|
@@ -2,6 +2,7 @@ export * from './components/Aligment';
|
|
|
2
2
|
export * from './components/Button';
|
|
3
3
|
export * from './components/ButtonsFooter';
|
|
4
4
|
export * from './components/Card';
|
|
5
|
+
export * from './components/Checkbox';
|
|
5
6
|
export * from './components/Chips';
|
|
6
7
|
export * from './components/DatePicker';
|
|
7
8
|
export * from './components/Dropdown';
|