pixelize-design-library 1.0.67 → 1.0.69
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/Components/Accordion/Accordion.js +3 -3
- package/dist/Components/Accordion/AccordionProps.d.ts +1 -0
- package/dist/Components/Card/Card.js +1 -1
- package/dist/Components/Dropdown/DropDown.d.ts +1 -1
- package/dist/Components/Dropdown/DropDown.js +5 -5
- package/dist/Components/Dropdown/DropdownProps.d.ts +5 -6
- package/dist/Components/ProfileCard/ProfileCard.d.ts +1 -1
- package/dist/Components/ProfileCard/ProfileCard.js +2 -2
- package/dist/Components/ProfileCard/ProfileCardProps.d.ts +1 -0
- package/dist/Components/Select/Select.d.ts +1 -1
- package/dist/Components/Select/Select.js +9 -2
- package/dist/Components/Select/SelectProps.d.ts +2 -1
- package/dist/Layout.js +202 -197
- package/package.json +1 -1
|
@@ -30,11 +30,11 @@ var react_2 = require("@chakra-ui/react");
|
|
|
30
30
|
var Accordion = function (_a) {
|
|
31
31
|
var allowMultiple = _a.allowMultiple, allowToggle = _a.allowToggle, index = _a.index, onChange = _a.onChange, reduceMotion = _a.reduceMotion, items = _a.items, rest = __rest(_a, ["allowMultiple", "allowToggle", "index", "onChange", "reduceMotion", "items"]);
|
|
32
32
|
return (react_1.default.createElement(react_2.Accordion, __assign({ allowMultiple: allowMultiple, allowToggle: allowToggle, index: index, onChange: onChange, reduceMotion: reduceMotion }, rest), items.map(function (item, idx) {
|
|
33
|
-
var _a, _b, _c;
|
|
33
|
+
var _a, _b, _c, _d;
|
|
34
34
|
return (react_1.default.createElement(react_2.AccordionItem, __assign({ key: idx }, item.itemProps, { sx: (_a = item.customStyles) === null || _a === void 0 ? void 0 : _a.itemStyle }),
|
|
35
35
|
react_1.default.createElement("h2", null,
|
|
36
|
-
react_1.default.createElement(react_2.AccordionButton, __assign({}, item.buttonProps, { sx: __assign(__assign({}, (_b = item.customStyles) === null || _b === void 0 ? void 0 : _b.buttonStyle), {
|
|
37
|
-
react_1.default.createElement(react_2.AccordionPanel, __assign({}, item.panelProps, { sx: (
|
|
36
|
+
react_1.default.createElement(react_2.AccordionButton, __assign({}, item.buttonProps, { sx: __assign(__assign({}, (_b = item.customStyles) === null || _b === void 0 ? void 0 : _b.buttonStyle), { '&:hover': __assign({}, (_c = item.customStyles) === null || _c === void 0 ? void 0 : _c.hoverbuttonStyle) }) }), item.header)),
|
|
37
|
+
react_1.default.createElement(react_2.AccordionPanel, __assign({}, item.panelProps, { sx: (_d = item.customStyles) === null || _d === void 0 ? void 0 : _d.panelStyle }), item.content)));
|
|
38
38
|
})));
|
|
39
39
|
};
|
|
40
40
|
exports.default = Accordion;
|
|
@@ -9,6 +9,7 @@ export type AccordionProps = ChakraAccordionProps & {
|
|
|
9
9
|
itemProps?: AccordionItemProps;
|
|
10
10
|
customStyles?: {
|
|
11
11
|
buttonStyle?: React.CSSProperties;
|
|
12
|
+
hoverbuttonStyle?: React.CSSProperties;
|
|
12
13
|
panelStyle?: React.CSSProperties;
|
|
13
14
|
itemStyle?: React.CSSProperties;
|
|
14
15
|
};
|
|
@@ -7,6 +7,6 @@ var react_1 = __importDefault(require("react"));
|
|
|
7
7
|
var react_2 = require("@chakra-ui/react");
|
|
8
8
|
function Card(_a) {
|
|
9
9
|
var key = _a.key, maxW = _a.maxW, align = _a.align, variant = _a.variant, direction = _a.direction, justify = _a.justify, children = _a.children, size = _a.size, color = _a.color, overflow = _a.overflow;
|
|
10
|
-
return (react_1.default.createElement(react_2.Card, { key: key, maxW: maxW, align: align, variant: variant, direction: direction, justify: justify, size: size, overflow: overflow, colorScheme: color
|
|
10
|
+
return (react_1.default.createElement(react_2.Card, { key: key, maxW: maxW, align: align, variant: variant, direction: direction, justify: justify, size: size, overflow: overflow, colorScheme: color }, children));
|
|
11
11
|
}
|
|
12
12
|
exports.default = Card;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { DropdownProps } from "./DropdownProps";
|
|
3
|
-
declare const Dropdown: ({ dropDownButtonStyle, ButtonText, options, handleOptionSelect, dropdownType, text, DropdownIcon, isVisibleIconShow, buttonProps,
|
|
3
|
+
declare const Dropdown: ({ dropDownButtonStyle, ButtonText, options, handleOptionSelect, dropdownType, text, DropdownIcon, isVisibleIconShow, buttonProps, headStyle, ListStyle, ItemStyle, LabelStyle, ImageStyle }: DropdownProps) => React.JSX.Element;
|
|
4
4
|
export default Dropdown;
|
|
@@ -40,7 +40,7 @@ var fi_1 = require("react-icons/fi");
|
|
|
40
40
|
var framer_motion_1 = require("framer-motion");
|
|
41
41
|
var MotionBox = (0, framer_motion_1.motion)(react_2.Box);
|
|
42
42
|
var Dropdown = function (_a) {
|
|
43
|
-
var dropDownButtonStyle = _a.dropDownButtonStyle, ButtonText = _a.ButtonText, options = _a.options, handleOptionSelect = _a.handleOptionSelect, _b = _a.dropdownType, dropdownType = _b === void 0 ? "button" : _b, text = _a.text, DropdownIcon = _a.DropdownIcon, _c = _a.isVisibleIconShow, isVisibleIconShow = _c === void 0 ? true : _c, buttonProps = _a.buttonProps,
|
|
43
|
+
var dropDownButtonStyle = _a.dropDownButtonStyle, ButtonText = _a.ButtonText, options = _a.options, handleOptionSelect = _a.handleOptionSelect, _b = _a.dropdownType, dropdownType = _b === void 0 ? "button" : _b, text = _a.text, DropdownIcon = _a.DropdownIcon, _c = _a.isVisibleIconShow, isVisibleIconShow = _c === void 0 ? true : _c, buttonProps = _a.buttonProps, headStyle = _a.headStyle, ListStyle = _a.ListStyle, ItemStyle = _a.ItemStyle, LabelStyle = _a.LabelStyle, ImageStyle = _a.ImageStyle;
|
|
44
44
|
var _d = (0, react_2.useDisclosure)(), isOpen = _d.isOpen, onToggle = _d.onToggle, onClose = _d.onClose;
|
|
45
45
|
var dropdownRef = (0, react_1.useRef)(null);
|
|
46
46
|
var handleListItemClick = function (optionId, optionLabel) {
|
|
@@ -73,12 +73,12 @@ var Dropdown = function (_a) {
|
|
|
73
73
|
return dropdownType === "button" ? ButtonToggle : TextToggle;
|
|
74
74
|
};
|
|
75
75
|
var DropdownContentRender = function () {
|
|
76
|
-
return (react_1.default.createElement(react_2.List, { bg: "white", border: "1px solid", borderColor: "blue.500", shadow: "md", p: 2, mt: 2, minWidth: "200px" }, options.map(function (option) { return (react_1.default.createElement(react_2.ListItem, { key: option.id, onClick: function () { return handleListItemClick(option.id, option.label); }, p: 2, _hover: { bg: "gray.100", color: "blue.500" }, display: "flex", alignItems: "center", cursor: "pointer" },
|
|
77
|
-
(option === null || option === void 0 ? void 0 : option.image) && (react_1.default.createElement(react_2.Icon, { as: option.image, boxSize: "1.5rem", mr: 2 })),
|
|
78
|
-
react_1.default.createElement(react_2.Box, { as: "span", isTruncated: true }, option.label))); })));
|
|
76
|
+
return (react_1.default.createElement(react_2.List, { bg: "white", border: "1px solid", borderColor: "blue.500", shadow: "md", p: 2, mt: 2, minWidth: "200px", style: ListStyle }, options.map(function (option) { return (react_1.default.createElement(react_2.ListItem, { key: option.id, onClick: function () { return handleListItemClick(option.id, option.label); }, p: 2, _hover: { bg: "gray.100", color: "blue.500" }, display: "flex", alignItems: "center", cursor: "pointer", style: ItemStyle },
|
|
77
|
+
(option === null || option === void 0 ? void 0 : option.image) && (react_1.default.createElement(react_2.Icon, { as: option.image, boxSize: "1.5rem", mr: 2, style: ImageStyle })),
|
|
78
|
+
react_1.default.createElement(react_2.Box, { as: "span", isTruncated: true, style: LabelStyle }, option.label))); })));
|
|
79
79
|
};
|
|
80
80
|
return (react_1.default.createElement(react_2.Box, { ref: dropdownRef, position: "relative", display: "inline-block", width: "100%" },
|
|
81
81
|
dropDownToggleOption(),
|
|
82
|
-
isOpen && (react_1.default.createElement(MotionBox, { position: "absolute", zIndex: 5, initial: { opacity: 0, y: -10 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: -10 }, style:
|
|
82
|
+
isOpen && (react_1.default.createElement(MotionBox, { position: "absolute", zIndex: 5, initial: { opacity: 0, y: -10 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: -10 }, style: headStyle }, DropdownContentRender()))));
|
|
83
83
|
};
|
|
84
84
|
exports.default = Dropdown;
|
|
@@ -10,12 +10,11 @@ export type DropdownProps = {
|
|
|
10
10
|
dropDownButtonStyle?: React.CSSProperties;
|
|
11
11
|
isVisibleIconShow?: boolean;
|
|
12
12
|
buttonProps?: ButtonProps;
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
};
|
|
13
|
+
headStyle?: React.CSSProperties;
|
|
14
|
+
ListStyle?: React.CSSProperties;
|
|
15
|
+
ItemStyle?: React.CSSProperties;
|
|
16
|
+
LabelStyle?: React.CSSProperties;
|
|
17
|
+
ImageStyle?: React.CSSProperties;
|
|
19
18
|
};
|
|
20
19
|
type Option = {
|
|
21
20
|
id: string | number;
|
|
@@ -9,4 +9,4 @@ export declare const ProfileCardBody: React.FC<{
|
|
|
9
9
|
export declare const ProfileCardFooter: React.FC<{
|
|
10
10
|
children: React.ReactNode;
|
|
11
11
|
}>;
|
|
12
|
-
export default function ProfileCard({ maxW, align, variant, direction, justify, children, size, color, overflow, dividercolor, dividersize, dividervariant, }: ProfileCardProps): React.JSX.Element;
|
|
12
|
+
export default function ProfileCard({ maxW, align, variant, direction, justify, children, size, color, overflow, dividercolor, dividersize, dividervariant, CardStyle }: ProfileCardProps): React.JSX.Element;
|
|
@@ -22,14 +22,14 @@ var ProfileCardFooter = function (_a) {
|
|
|
22
22
|
};
|
|
23
23
|
exports.ProfileCardFooter = ProfileCardFooter;
|
|
24
24
|
function ProfileCard(_a) {
|
|
25
|
-
var maxW = _a.maxW, align = _a.align, variant = _a.variant, direction = _a.direction, justify = _a.justify, children = _a.children, size = _a.size, color = _a.color, overflow = _a.overflow, _b = _a.dividercolor, dividercolor = _b === void 0 ? "#d5cfcf" : _b, _c = _a.dividersize, dividersize = _c === void 0 ? "0.5px" : _c, _d = _a.dividervariant, dividervariant = _d === void 0 ? "solid" : _d;
|
|
25
|
+
var maxW = _a.maxW, align = _a.align, variant = _a.variant, direction = _a.direction, justify = _a.justify, children = _a.children, size = _a.size, color = _a.color, overflow = _a.overflow, _b = _a.dividercolor, dividercolor = _b === void 0 ? "#d5cfcf" : _b, _c = _a.dividersize, dividersize = _c === void 0 ? "0.5px" : _c, _d = _a.dividervariant, dividervariant = _d === void 0 ? "solid" : _d, CardStyle = _a.CardStyle;
|
|
26
26
|
var isReactElement = function (child) {
|
|
27
27
|
return child !== null && typeof child === "object" && "type" in child;
|
|
28
28
|
};
|
|
29
29
|
var header = react_1.default.Children.toArray(children).find(function (child) { return isReactElement(child) && child.type === exports.ProfileCardHeader; });
|
|
30
30
|
var body = react_1.default.Children.toArray(children).find(function (child) { return isReactElement(child) && child.type === exports.ProfileCardBody; });
|
|
31
31
|
var footer = react_1.default.Children.toArray(children).find(function (child) { return isReactElement(child) && child.type === exports.ProfileCardFooter; });
|
|
32
|
-
return (react_1.default.createElement(react_2.Card, { maxW: maxW, align: align, variant: variant, direction: direction, justify: justify, size: size, overflow: overflow, colorScheme: color,
|
|
32
|
+
return (react_1.default.createElement(react_2.Card, { maxW: maxW, align: align, variant: variant, direction: direction, justify: justify, size: size, overflow: overflow, colorScheme: color, style: CardStyle },
|
|
33
33
|
header && (react_1.default.createElement(react_1.default.Fragment, null,
|
|
34
34
|
react_1.default.createElement(react_2.CardHeader, { style: { fontWeight: "bold" } }, header),
|
|
35
35
|
react_1.default.createElement(react_2.Divider, { style: {
|
|
@@ -8,4 +8,5 @@ export type ProfileCardProps = Pick<CardProps, "direction" | "maxW" | "align" |
|
|
|
8
8
|
dividercolor?: string;
|
|
9
9
|
dividersize?: string;
|
|
10
10
|
dividervariant?: "solid" | "dashed" | "dotted" | "double" | "groove" | "ridge" | "inset" | "outset";
|
|
11
|
+
CardStyle?: React.CSSProperties;
|
|
11
12
|
};
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { chakraSelectProps } from "./SelectProps";
|
|
3
|
-
export default function Select({ placeholder, size, variant, icon, bg, borderColor, color,
|
|
3
|
+
export default function Select({ placeholder, size, variant, icon, bg, borderColor, color, onChange, onBlur, onFocus, errorBorderColor, isDisabled, isReadOnly, isRequired, value, colorScheme, label, error, errorMessage, helperText, options, width, }: chakraSelectProps): React.JSX.Element;
|
|
@@ -7,15 +7,22 @@ var react_1 = __importDefault(require("react"));
|
|
|
7
7
|
var react_2 = require("@chakra-ui/react");
|
|
8
8
|
var react_3 = require("react");
|
|
9
9
|
function Select(_a) {
|
|
10
|
-
var _b = _a.placeholder, placeholder = _b === void 0 ? "Select Option" : _b, _c = _a.size, size = _c === void 0 ? "md" : _c, _d = _a.variant, variant = _d === void 0 ? "outline" : _d, icon = _a.icon, bg = _a.bg, borderColor = _a.borderColor, color = _a.color,
|
|
10
|
+
var _b = _a.placeholder, placeholder = _b === void 0 ? "Select Option" : _b, _c = _a.size, size = _c === void 0 ? "md" : _c, _d = _a.variant, variant = _d === void 0 ? "outline" : _d, icon = _a.icon, bg = _a.bg, borderColor = _a.borderColor, color = _a.color, onChange = _a.onChange, onBlur = _a.onBlur, onFocus = _a.onFocus, errorBorderColor = _a.errorBorderColor, isDisabled = _a.isDisabled, isReadOnly = _a.isReadOnly, isRequired = _a.isRequired, _e = _a.value, value = _e === void 0 ? "" : _e, colorScheme = _a.colorScheme, label = _a.label, error = _a.error, errorMessage = _a.errorMessage, helperText = _a.helperText, _f = _a.options, options = _f === void 0 ? [] : _f, _g = _a.width, width = _g === void 0 ? 500 : _g;
|
|
11
11
|
var getOptionsList = (0, react_3.useCallback)(function () {
|
|
12
12
|
if (!options.length)
|
|
13
13
|
return react_1.default.createElement("option", { value: "" }, "No Options");
|
|
14
14
|
return options.map(function (option) { return (react_1.default.createElement("option", { key: option.id, value: option.id }, option.label)); });
|
|
15
15
|
}, [options]);
|
|
16
|
+
var handleOnChange = function (event) {
|
|
17
|
+
var selectedValue = event.target.value;
|
|
18
|
+
var selectedOption = options.find(function (option) { return option.id === Number(selectedValue); });
|
|
19
|
+
if (selectedOption && onChange) {
|
|
20
|
+
onChange(selectedOption);
|
|
21
|
+
}
|
|
22
|
+
};
|
|
16
23
|
return (react_1.default.createElement(react_2.FormControl, { isRequired: isRequired, isInvalid: error },
|
|
17
24
|
label && react_1.default.createElement(react_2.FormLabel, { mb: "0.25rem" }, label),
|
|
18
|
-
react_1.default.createElement(react_2.Select, { placeholder: placeholder, size: size, variant: variant, icon: icon, bg: bg, borderColor: borderColor, color: color, isInvalid: error, value: value, onChange:
|
|
25
|
+
react_1.default.createElement(react_2.Select, { placeholder: placeholder, size: size, variant: variant, icon: icon, bg: bg, borderColor: borderColor, color: color, isInvalid: error, value: value, onChange: handleOnChange, width: width, onBlur: onBlur, onFocus: onFocus, isDisabled: isDisabled, isReadOnly: isReadOnly, colorScheme: colorScheme, errorBorderColor: errorBorderColor }, getOptionsList()),
|
|
19
26
|
error && react_1.default.createElement(react_2.FormErrorMessage, { pl: 4 }, errorMessage),
|
|
20
27
|
helperText && !error && (react_1.default.createElement(react_2.FormHelperText, { pl: 4 }, helperText))));
|
|
21
28
|
}
|
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
import { SelectProps } from "@chakra-ui/react";
|
|
2
|
-
export type chakraSelectProps = Pick<SelectProps, "placeholder" | "size" | "variant" | "icon" | "bg" | "borderColor" | "color" | "
|
|
2
|
+
export type chakraSelectProps = Pick<SelectProps, "placeholder" | "size" | "variant" | "icon" | "bg" | "borderColor" | "color" | "onBlur" | "onFocus" | "errorBorderColor" | "isDisabled" | "isReadOnly" | "isRequired" | "value" | "colorScheme"> & {
|
|
3
3
|
label?: string;
|
|
4
4
|
error?: boolean;
|
|
5
5
|
errorMessage?: string;
|
|
6
6
|
helperText?: string;
|
|
7
7
|
options: OptionProp[];
|
|
8
8
|
width?: string | number;
|
|
9
|
+
onChange: (selectedOption: OptionProp | undefined) => void;
|
|
9
10
|
};
|
|
10
11
|
export type OptionProp = {
|
|
11
12
|
id: string | number;
|
package/dist/Layout.js
CHANGED
|
@@ -35,8 +35,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
35
35
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
36
36
|
};
|
|
37
37
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
38
|
-
var react_1 = require("
|
|
39
|
-
var react_2 =
|
|
38
|
+
var react_1 = __importStar(require("react"));
|
|
39
|
+
var react_2 = require("@chakra-ui/react");
|
|
40
40
|
var Button_1 = __importDefault(require("./Components/Button/Button"));
|
|
41
41
|
var Checkbox_1 = __importDefault(require("./Components/Checkbox/Checkbox"));
|
|
42
42
|
var TextInput_1 = __importDefault(require("./Components/Input/TextInput"));
|
|
@@ -89,8 +89,8 @@ var Layout = function () {
|
|
|
89
89
|
//console.log("Logout");
|
|
90
90
|
};
|
|
91
91
|
var showToast = (0, Toaster_1.useToaster)().showToast;
|
|
92
|
-
var _a = (0,
|
|
93
|
-
var _b = (0,
|
|
92
|
+
var _a = (0, react_1.useState)(false), isOpen = _a[0], setIsOpen = _a[1];
|
|
93
|
+
var _b = (0, react_1.useState)(""), selected = _b[0], setSelected = _b[1];
|
|
94
94
|
var handleOnclick = function () {
|
|
95
95
|
showToast({
|
|
96
96
|
title: "Hello",
|
|
@@ -102,8 +102,8 @@ var Layout = function () {
|
|
|
102
102
|
var handleOnclick2 = function () {
|
|
103
103
|
setIsOpen(true);
|
|
104
104
|
};
|
|
105
|
-
var handleOnChange = function (
|
|
106
|
-
var checked =
|
|
105
|
+
var handleOnChange = function (selectedOption) {
|
|
106
|
+
var checked = selectedOption.id;
|
|
107
107
|
setSelected(checked);
|
|
108
108
|
};
|
|
109
109
|
var menu = [
|
|
@@ -153,14 +153,14 @@ var Layout = function () {
|
|
|
153
153
|
],
|
|
154
154
|
},
|
|
155
155
|
];
|
|
156
|
-
var _c = (0,
|
|
157
|
-
var _d = (0,
|
|
156
|
+
var _c = (0, react_1.useState)(true), toggle = _c[0], changeToggle = _c[1];
|
|
157
|
+
var _d = (0, react_1.useState)(""), activeMenu = _d[0], setActiveMenu = _d[1];
|
|
158
158
|
var handleMenuClick = function (title, url) {
|
|
159
159
|
setActiveMenu(title);
|
|
160
160
|
//console.log(title);
|
|
161
161
|
//console.log(url);
|
|
162
162
|
};
|
|
163
|
-
var _e = (0,
|
|
163
|
+
var _e = (0, react_1.useState)("1"), selectedValue = _e[0], setSelectedValue = _e[1];
|
|
164
164
|
var radioOptions = [
|
|
165
165
|
{ label: "Option 1", id: "1" },
|
|
166
166
|
{ label: "Option 2", id: "2" },
|
|
@@ -169,7 +169,7 @@ var Layout = function () {
|
|
|
169
169
|
var handleChange = function (value) {
|
|
170
170
|
setSelectedValue(value);
|
|
171
171
|
};
|
|
172
|
-
var _f = (0,
|
|
172
|
+
var _f = (0, react_1.useState)("0"), numbetInputValue = _f[0], setNumbetInputValue = _f[1];
|
|
173
173
|
var handleNumberinput = function (value) {
|
|
174
174
|
setNumbetInputValue(value);
|
|
175
175
|
};
|
|
@@ -181,7 +181,7 @@ var Layout = function () {
|
|
|
181
181
|
var handleClick = function (path) {
|
|
182
182
|
console.log("Navigating to ".concat(path));
|
|
183
183
|
};
|
|
184
|
-
var tableDataheader = (0,
|
|
184
|
+
var tableDataheader = (0, react_1.useMemo)(function () { return [
|
|
185
185
|
{
|
|
186
186
|
label: "name",
|
|
187
187
|
accessor_key: "name",
|
|
@@ -201,7 +201,7 @@ var Layout = function () {
|
|
|
201
201
|
sort: true,
|
|
202
202
|
search: true,
|
|
203
203
|
accessor_function: function (value) {
|
|
204
|
-
return (
|
|
204
|
+
return (react_1.default.createElement("div", { onClick: function () { return console.log("hello"); } }, value.toUpperCase()));
|
|
205
205
|
},
|
|
206
206
|
},
|
|
207
207
|
{ label: "age", accessor_key: "age", sort: false, search: true },
|
|
@@ -216,7 +216,7 @@ var Layout = function () {
|
|
|
216
216
|
{ label: "age9", accessor_key: "age9", sort: true, search: true },
|
|
217
217
|
{ label: "age10", accessor_key: "age10", sort: true, search: true },
|
|
218
218
|
]; }, []);
|
|
219
|
-
var tableData = (0,
|
|
219
|
+
var tableData = (0, react_1.useMemo)(function () {
|
|
220
220
|
return Array.from({ length: 9 }, function (_, i) { return ({
|
|
221
221
|
id: i + 1,
|
|
222
222
|
name: "User ".concat(i + 1),
|
|
@@ -236,11 +236,11 @@ var Layout = function () {
|
|
|
236
236
|
}); });
|
|
237
237
|
}, []);
|
|
238
238
|
function useWindowSize() {
|
|
239
|
-
var _a = (0,
|
|
239
|
+
var _a = (0, react_1.useState)({
|
|
240
240
|
width: 0,
|
|
241
241
|
height: 0,
|
|
242
242
|
}), windowSize = _a[0], setWindowSize = _a[1];
|
|
243
|
-
(0,
|
|
243
|
+
(0, react_1.useEffect)(function () {
|
|
244
244
|
function handleResize() {
|
|
245
245
|
setWindowSize({
|
|
246
246
|
width: window.innerWidth,
|
|
@@ -254,11 +254,11 @@ var Layout = function () {
|
|
|
254
254
|
return windowSize;
|
|
255
255
|
}
|
|
256
256
|
var _g = useWindowSize(), width = _g.width, height = _g.height;
|
|
257
|
-
var exportOptions = (0,
|
|
257
|
+
var exportOptions = (0, react_1.useMemo)(function () { return [
|
|
258
258
|
{ id: "PDF", label: "Export as PDF" },
|
|
259
259
|
{ id: "XLS", label: "Export as XLS" },
|
|
260
260
|
]; }, []);
|
|
261
|
-
var exportOptionss = (0,
|
|
261
|
+
var exportOptionss = (0, react_1.useMemo)(function () { return [
|
|
262
262
|
// { id: "PDF", label: "Export as PDF", image: <FiChevronUp /> },
|
|
263
263
|
// { id: "XLS", label: "Export as XLS" },
|
|
264
264
|
{ id: 1, label: "Upload file" },
|
|
@@ -267,9 +267,9 @@ var Layout = function () {
|
|
|
267
267
|
{ id: 4, label: "Other Cloud Drives", image: fi_1.FiChevronUp },
|
|
268
268
|
{ id: 5, label: "Link(URL)", image: fi_1.FiChevronUp },
|
|
269
269
|
]; }, []);
|
|
270
|
-
var data = (0,
|
|
271
|
-
var categories = (0,
|
|
272
|
-
var _h = (0,
|
|
270
|
+
var data = (0, react_1.useMemo)(function () { return Array.from({ length: 10 }, function () { return Math.floor(Math.random() * 100); }); }, []);
|
|
271
|
+
var categories = (0, react_1.useMemo)(function () { return data.map(function (_, index) { return "Category ".concat(index + 1); }); }, [data]);
|
|
272
|
+
var _h = (0, react_1.useState)("left"), switchActive = _h[0], setSwitchActive = _h[1];
|
|
273
273
|
var handleSwitchToggle = function (value) {
|
|
274
274
|
// console.log(value);
|
|
275
275
|
setSwitchActive(value);
|
|
@@ -277,7 +277,7 @@ var Layout = function () {
|
|
|
277
277
|
// const handleNoteValue = () => {
|
|
278
278
|
// console.log("Note value");
|
|
279
279
|
// }
|
|
280
|
-
var _j = (0,
|
|
280
|
+
var _j = (0, react_1.useState)(false), saveButtonLoading = _j[0], setSaveButtonLoading = _j[1];
|
|
281
281
|
var handleNoteValue = function (noteValue, titleValue, file) {
|
|
282
282
|
console.log("Title: ", titleValue);
|
|
283
283
|
console.log("Note: ", noteValue);
|
|
@@ -287,14 +287,14 @@ var Layout = function () {
|
|
|
287
287
|
setSaveButtonLoading(false);
|
|
288
288
|
}, 2000);
|
|
289
289
|
};
|
|
290
|
-
var _k = (0,
|
|
290
|
+
var _k = (0, react_1.useState)(false), drawerOpen = _k[0], setDrawerOpen = _k[1];
|
|
291
291
|
var handleOnclick3 = function () {
|
|
292
292
|
setDrawerOpen(true);
|
|
293
293
|
};
|
|
294
294
|
var handleOnclick4 = function () {
|
|
295
295
|
setDrawerOpen(false);
|
|
296
296
|
};
|
|
297
|
-
var _l = (0,
|
|
297
|
+
var _l = (0, react_1.useState)([
|
|
298
298
|
{
|
|
299
299
|
id: "1721664346718-1",
|
|
300
300
|
label: "Testing",
|
|
@@ -304,8 +304,8 @@ var Layout = function () {
|
|
|
304
304
|
setSelectedOptions(options);
|
|
305
305
|
console.log("Selected options updated:", options);
|
|
306
306
|
};
|
|
307
|
-
var _m = (0,
|
|
308
|
-
var _o = (0,
|
|
307
|
+
var _m = (0, react_1.useState)(new Date("07/26/1995")), selectedDate = _m[0], setSelectedDate = _m[1];
|
|
308
|
+
var _o = (0, react_1.useState)(""), searchQuery = _o[0], setSearchQuery = _o[1];
|
|
309
309
|
var handleSearch = function (event) {
|
|
310
310
|
console.log("Search query:", event.target.value);
|
|
311
311
|
setSearchQuery(event.target.value);
|
|
@@ -380,8 +380,8 @@ var Layout = function () {
|
|
|
380
380
|
// const handleTimelineChange = (event: any, index: number) => {
|
|
381
381
|
// console.log("Event clicked:", event, "at index:", index);
|
|
382
382
|
// };
|
|
383
|
-
var _p = (0,
|
|
384
|
-
(0,
|
|
383
|
+
var _p = (0, react_1.useState)(true), isModelLoading = _p[0], setIsModelLoading = _p[1];
|
|
384
|
+
(0, react_1.useEffect)(function () {
|
|
385
385
|
var timer = setTimeout(function () {
|
|
386
386
|
setIsModelLoading(false);
|
|
387
387
|
}, 5000);
|
|
@@ -391,22 +391,22 @@ var Layout = function () {
|
|
|
391
391
|
var handleSelectClick = function (option) {
|
|
392
392
|
console.log("Selected option:", option);
|
|
393
393
|
};
|
|
394
|
-
var _q = (0,
|
|
395
|
-
var leastDestructiveRef =
|
|
394
|
+
var _q = (0, react_1.useState)(false), alertActive = _q[0], setAlertActive = _q[1];
|
|
395
|
+
var leastDestructiveRef = react_1.default.useRef();
|
|
396
396
|
var handleAlert = function () {
|
|
397
397
|
setAlertActive(!alertActive);
|
|
398
398
|
};
|
|
399
|
-
return (
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
399
|
+
return (react_1.default.createElement(react_2.Box, { minH: "100vh", bg: "gray.100", overflow: "hidden" },
|
|
400
|
+
react_1.default.createElement(Loading_1.default, { text: "PIXELIZE CRM", isLoading: false, onlytext: true }),
|
|
401
|
+
react_1.default.createElement(react_2.Flex, null,
|
|
402
|
+
react_1.default.createElement(react_2.Box, null,
|
|
403
|
+
react_1.default.createElement(SideBar_1.default, { menus: menu, activeMenu: activeMenu, handleMenuClick: handleMenuClick, toggle: toggle, changeToggle: function () { return changeToggle(!toggle); }, logo: "https://bit.ly/dan-abramov", companyName: "PIXELIZE" })),
|
|
404
|
+
react_1.default.createElement(react_2.Box, { flex: "1", maxWidth: width, overflow: "hidden" },
|
|
405
|
+
react_1.default.createElement(NavigationBar_1.default, { userAvathar: "https://bit.ly/dan-abramov", userName: "PIXELIZE", navMenu: navmenus, handleNavOnClick: handleNavOnClick, handleLogout: handleLogout, logoutText: "Logout", key: "navbar" }),
|
|
406
|
+
react_1.default.createElement("br", null),
|
|
407
|
+
react_1.default.createElement(Breadcrumbs_1.default, { separator: react_1.default.createElement(icons_1.ChevronRightIcon, { color: "gray.500" }), items: breadcrumbItems, handleClick: handleClick }),
|
|
408
|
+
react_1.default.createElement(react_2.Box, { p: "50px", height: height - 160, overflowY: "scroll", width: width - 75 },
|
|
409
|
+
react_1.default.createElement(TextInput_1.default
|
|
410
410
|
//label="hello"
|
|
411
411
|
, {
|
|
412
412
|
//label="hello"
|
|
@@ -425,112 +425,112 @@ var Layout = function () {
|
|
|
425
425
|
inputStyle: { border: "0px solid", padding: "0px" }, inputGroupStyle: { border: "0px solid", padding: "0px" }, onChange: function (e) {
|
|
426
426
|
console.log(e.target.files);
|
|
427
427
|
} }),
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
428
|
+
react_1.default.createElement("br", null),
|
|
429
|
+
react_1.default.createElement("br", null),
|
|
430
|
+
react_1.default.createElement(Button_1.default, { label: "TestButton", onClick: function () {
|
|
431
431
|
console.log("hello");
|
|
432
432
|
}, variant: "solid", color: "blue", size: "md", width: 100, type: "submit" }),
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
433
|
+
react_1.default.createElement("br", null),
|
|
434
|
+
react_1.default.createElement("br", null),
|
|
435
|
+
react_1.default.createElement(Button_1.default, { label: "Tosterbutton", onClick: handleOnclick, variant: "solid", color: "blue", size: "md", width: 100 }),
|
|
436
|
+
react_1.default.createElement("br", null),
|
|
437
|
+
react_1.default.createElement("br", null),
|
|
438
|
+
react_1.default.createElement(Checkbox_1.default, { label: "hello world" }),
|
|
439
|
+
react_1.default.createElement("br", null),
|
|
440
|
+
react_1.default.createElement("br", null),
|
|
441
|
+
react_1.default.createElement(Button_1.default, { label: "ModelButton", onClick: handleOnclick2, width: 250, variant: "solid", color: "blue" }),
|
|
442
|
+
react_1.default.createElement("br", null),
|
|
443
|
+
react_1.default.createElement(Modal_1.default, { isOpen: isOpen, onClose: function () { return setIsOpen(false); },
|
|
444
444
|
// overlaybg={"blackAlpha.300"}
|
|
445
445
|
// overlaybackdropFilter={"blur(10px) hue-rotate(90deg)"}
|
|
446
446
|
size: "sm", isCentered: true, isLoading: isModelLoading },
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
{ id: 1, label: "
|
|
447
|
+
react_1.default.createElement(Modal_1.ModalHeader, null, "hai"),
|
|
448
|
+
react_1.default.createElement(Modal_1.ModalBody, null, "heelo"),
|
|
449
|
+
react_1.default.createElement(Modal_1.ModalFooter, null, "welcome")),
|
|
450
|
+
react_1.default.createElement("br", null),
|
|
451
|
+
react_1.default.createElement(Select_1.default, { options: [
|
|
452
|
+
{ id: 1, label: "magesssssss" },
|
|
453
453
|
{ id: 2, label: "sjdfg" },
|
|
454
|
-
], onChange: handleOnChange, value: selected, width: 200 }),
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
|
|
454
|
+
], onChange: handleOnChange, value: selected, width: 200, placeholder: "", color: "red", colorScheme: "red" }),
|
|
455
|
+
react_1.default.createElement("br", null),
|
|
456
|
+
react_1.default.createElement("br", null),
|
|
457
|
+
react_1.default.createElement(react_2.Box, { width: "150px" },
|
|
458
|
+
react_1.default.createElement(Skeletons_1.default, { type: "skeleton" }),
|
|
459
|
+
react_1.default.createElement("br", null),
|
|
460
|
+
react_1.default.createElement(Skeletons_1.default, { type: "circle" }),
|
|
461
|
+
react_1.default.createElement("br", null),
|
|
462
|
+
react_1.default.createElement(Skeletons_1.default, { type: "text", mt: 4 }),
|
|
463
|
+
react_1.default.createElement("br", null),
|
|
464
|
+
react_1.default.createElement("br", null),
|
|
465
|
+
react_1.default.createElement(Skeletons_1.default, { height: "10px", isLoaded: false, fadeDuration: 4, bg: "blue.500", color: "white", type: "skeleton" },
|
|
466
|
+
react_1.default.createElement(react_2.Box, null, "Hello ChakraUI!"))),
|
|
467
|
+
react_1.default.createElement("br", null),
|
|
468
|
+
react_1.default.createElement("br", null),
|
|
469
|
+
react_1.default.createElement(RadioButton_1.RadioButton, { label: "dinesh" }),
|
|
470
|
+
react_1.default.createElement("br", null),
|
|
471
|
+
react_1.default.createElement("br", null),
|
|
472
|
+
react_1.default.createElement(RadioButton_1.RadioButtonGroup, { options: radioOptions, value: selectedValue, onChange: handleChange, colorScheme: "blue", size: "md" }),
|
|
473
|
+
react_1.default.createElement("br", null),
|
|
474
|
+
react_1.default.createElement("br", null),
|
|
475
|
+
react_1.default.createElement(ButtonGroupIcon_1.default, { buttonText: "hello", rightIcon: react_1.default.createElement(fi_1.FiHome, null), size: "md", variant: "solid", color: "red" }),
|
|
476
|
+
react_1.default.createElement("br", null),
|
|
477
477
|
" ",
|
|
478
|
-
|
|
479
|
-
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
|
|
490
|
-
|
|
491
|
-
|
|
492
|
-
|
|
493
|
-
|
|
494
|
-
|
|
495
|
-
|
|
496
|
-
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
|
|
478
|
+
react_1.default.createElement("br", null),
|
|
479
|
+
react_1.default.createElement(ProgressBar_1.default, { min: 10, max: 0, isIndeterminate: true, size: "xs" }),
|
|
480
|
+
react_1.default.createElement("br", null),
|
|
481
|
+
react_1.default.createElement("br", null),
|
|
482
|
+
react_1.default.createElement(NumberInput_1.default, { min: 0, max: 20, value: numbetInputValue, onChange: handleNumberinput }),
|
|
483
|
+
react_1.default.createElement("br", null),
|
|
484
|
+
react_1.default.createElement("br", null),
|
|
485
|
+
react_1.default.createElement(PinInput_1.default, { pins: 5, label: "Enter pin" }),
|
|
486
|
+
react_1.default.createElement("br", null),
|
|
487
|
+
react_1.default.createElement("br", null),
|
|
488
|
+
react_1.default.createElement(ProfileCard_1.default, { CardStyle: { marginRight: "10px" } },
|
|
489
|
+
react_1.default.createElement(ProfileCard_1.ProfileCardHeader, null, "Customer dashboard"),
|
|
490
|
+
react_1.default.createElement(ProfileCard_1.ProfileCardBody, null,
|
|
491
|
+
react_1.default.createElement(react_2.Text, null, "View a summary of all your customers over the last month.")),
|
|
492
|
+
react_1.default.createElement(ProfileCard_1.ProfileCardFooter, null,
|
|
493
|
+
react_1.default.createElement(react_2.Button, { colorScheme: "blue" }, "View here"))),
|
|
494
|
+
react_1.default.createElement("br", null),
|
|
495
|
+
react_1.default.createElement("br", null),
|
|
496
|
+
react_1.default.createElement(Card_1.default, null,
|
|
497
|
+
react_1.default.createElement("div", null, "hello")),
|
|
498
|
+
react_1.default.createElement("br", null),
|
|
499
|
+
react_1.default.createElement(Table_1.default, { data: tableData, headers: tableDataheader,
|
|
500
500
|
// handleCellClick={(row, header) => {
|
|
501
501
|
// console.log("Cell clicked", row, header);
|
|
502
502
|
// }}
|
|
503
503
|
exportOptions: exportOptions, handleExportChange: function (value) {
|
|
504
504
|
console.log("click label", value);
|
|
505
|
-
}, isLoading: false, loadingContaxt:
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
|
|
511
|
-
|
|
512
|
-
|
|
513
|
-
__spreadArray([], Array(5), true).map(function (_, index) { return (
|
|
514
|
-
|
|
515
|
-
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
|
|
520
|
-
|
|
521
|
-
|
|
522
|
-
|
|
523
|
-
|
|
524
|
-
|
|
505
|
+
}, isLoading: false, loadingContaxt: react_1.default.createElement(react_2.Stack, { spacing: 4 },
|
|
506
|
+
react_1.default.createElement(react_2.Stack, { direction: "row", justifyContent: "space-between", paddingX: "4", paddingY: "2" },
|
|
507
|
+
react_1.default.createElement(react_2.Skeleton, { height: "20px", width: "10%" }),
|
|
508
|
+
react_1.default.createElement(react_2.Skeleton, { height: "20px", width: "20%" }),
|
|
509
|
+
react_1.default.createElement(react_2.Skeleton, { height: "20px", width: "15%" }),
|
|
510
|
+
react_1.default.createElement(react_2.Skeleton, { height: "20px", width: "25%" }),
|
|
511
|
+
react_1.default.createElement(react_2.Skeleton, { height: "20px", width: "10%" }),
|
|
512
|
+
react_1.default.createElement(react_2.Skeleton, { height: "20px", width: "20%" })),
|
|
513
|
+
__spreadArray([], Array(5), true).map(function (_, index) { return (react_1.default.createElement(react_2.Stack, { key: index, direction: "row", justifyContent: "space-between", paddingX: "4", paddingY: "2", borderWidth: "1px", borderRadius: "md" },
|
|
514
|
+
react_1.default.createElement(react_2.Skeleton, { height: "20px", width: "10%" }),
|
|
515
|
+
react_1.default.createElement(react_2.Skeleton, { height: "20px", width: "20%" }),
|
|
516
|
+
react_1.default.createElement(react_2.Skeleton, { height: "20px", width: "15%" }),
|
|
517
|
+
react_1.default.createElement(react_2.Skeleton, { height: "20px", width: "25%" }),
|
|
518
|
+
react_1.default.createElement(react_2.Skeleton, { height: "20px", width: "10%" }),
|
|
519
|
+
react_1.default.createElement(react_2.Skeleton, { height: "20px", width: "20%" }))); })), loadingBoxStyle: { padding: "10px", width: "100%" }, isVisiblity: false }),
|
|
520
|
+
react_1.default.createElement(ToolTip_1.default, { label: "Hello", placement: "top", hasArrow: true, size: "20", width: "300px", height: "100px", bg: "green" }, "hai"),
|
|
521
|
+
react_1.default.createElement("br", null),
|
|
522
|
+
react_1.default.createElement(react_2.Box, null,
|
|
523
|
+
react_1.default.createElement("div", { style: { display: "flex", justifyContent: "space-around" } },
|
|
524
|
+
react_1.default.createElement(ApexBarChart_1.default, { data: data, Labels: categories, title: "Bar Chart", titlePosition: "left",
|
|
525
525
|
// barColor={["#00E396"]}
|
|
526
526
|
// xAxisStyle={{ colors: "#00E396", fontSize: "12px" }}
|
|
527
527
|
// yAxisStyle={{ colors: "#00E396", fontSize: "12px" }}
|
|
528
528
|
titleStyle: { color: "#00E396" } }),
|
|
529
|
-
|
|
529
|
+
react_1.default.createElement(ApexPieChart_1.default, { data: data, labels: categories, title: "Pie Chart", titlePosition: "left",
|
|
530
530
|
// chartColor={["#00E396", "#3182ce", "#ff4757", "#ff6348", "#e84393"]}
|
|
531
531
|
titleStyle: { color: "#00E396" } }))),
|
|
532
|
-
|
|
533
|
-
|
|
532
|
+
react_1.default.createElement("br", null),
|
|
533
|
+
react_1.default.createElement(ProfilePhotoViewer_1.default
|
|
534
534
|
// photoUrl=""
|
|
535
535
|
, {
|
|
536
536
|
// photoUrl=""
|
|
@@ -540,69 +540,69 @@ var Layout = function () {
|
|
|
540
540
|
// "https://docs.google.com/file/d/0B2qlP_VOf718Q3BPaGd0czhmZjg/edit?resourcekey=0-NnzZa3RIV8dL44Tv4mjZng"
|
|
541
541
|
// }
|
|
542
542
|
onPhotoChange: function (file) { return console.log(file); }, isEditable: true, isView: true, fallbackText: "" }),
|
|
543
|
-
|
|
544
|
-
|
|
545
|
-
|
|
546
|
-
|
|
543
|
+
react_1.default.createElement("br", null),
|
|
544
|
+
react_1.default.createElement(Switch_1.default, { leftText: "Overview", rightText: "Timeline", switchActive: switchActive, onSwitchToggle: handleSwitchToggle }),
|
|
545
|
+
react_1.default.createElement("br", null),
|
|
546
|
+
react_1.default.createElement(NoteTextArea_1.default, { width: "720px", handleSubmit: function (noteValue, titleValue, file) {
|
|
547
547
|
handleNoteValue(noteValue, titleValue, file);
|
|
548
548
|
}, value: "text", title: "hello", isEditable: false, saveButtonLoading: saveButtonLoading, handleCancel: function (isActive) {
|
|
549
549
|
console.log("isActive", isActive);
|
|
550
550
|
} }),
|
|
551
|
-
|
|
552
|
-
|
|
551
|
+
react_1.default.createElement("br", null),
|
|
552
|
+
react_1.default.createElement(DropDown_1.default, { ButtonText: "Visibility", options: exportOptionss,
|
|
553
553
|
// dropDownButtonStyle={{ color: "red" }}
|
|
554
|
-
dropdownType: "text", text: "Visibility", DropdownIcon:
|
|
554
|
+
dropdownType: "text", text: "Visibility", DropdownIcon: react_1.default.createElement(fi_1.FiMoreHorizontal, { color: "gray.500" }), handleOptionSelect: function (id, label) {
|
|
555
555
|
console.log("optionid", id, label);
|
|
556
|
-
} }),
|
|
557
|
-
|
|
558
|
-
|
|
559
|
-
|
|
556
|
+
}, headStyle: { top: "50px", left: "0px" } }),
|
|
557
|
+
react_1.default.createElement("br", null),
|
|
558
|
+
react_1.default.createElement("br", null),
|
|
559
|
+
react_1.default.createElement(DropDown_1.default, { ButtonText: "hello", options: exportOptionss,
|
|
560
560
|
// dropDownButtonStyle={{ color: "red" }}
|
|
561
|
-
DropdownIcon:
|
|
561
|
+
DropdownIcon: react_1.default.createElement(fi_1.FiMoreHorizontal, { color: "gray.500" }), dropdownType: "button", handleOptionSelect: function (id, label) {
|
|
562
562
|
console.log("optionid", id, label);
|
|
563
563
|
}, buttonProps: { variant: "solid", colorScheme: "red" }, isVisibleIconShow: true }),
|
|
564
|
-
|
|
565
|
-
|
|
566
|
-
|
|
567
|
-
|
|
564
|
+
react_1.default.createElement("div", null,
|
|
565
|
+
react_1.default.createElement("br", null),
|
|
566
|
+
react_1.default.createElement("br", null)),
|
|
567
|
+
react_1.default.createElement(Editor_1.default, { value: "heeeeejhbjhvbjhvbhj jbhkjhbiubviu iuhiuhiuhiu", config: { readonly: false, width: "900px" }, onChange: function (val) {
|
|
568
568
|
//console.log(val);
|
|
569
569
|
} }),
|
|
570
|
-
|
|
571
|
-
|
|
570
|
+
react_1.default.createElement("br", null),
|
|
571
|
+
react_1.default.createElement(VerifyEmailOtp_1.default, { resendMaill: function () {
|
|
572
572
|
console.log("hello");
|
|
573
573
|
}, onChange: function (val) {
|
|
574
574
|
console.log("onchange", val);
|
|
575
575
|
}, onComplete: function (val) {
|
|
576
576
|
console.log("onComplete", val);
|
|
577
577
|
}, pins: 6, title: "Please Verify Account", description: "Enter the six digit code we sent to your email address to verify", styles: { width: "70%", padding: "2px" } }),
|
|
578
|
-
|
|
579
|
-
|
|
580
|
-
|
|
581
|
-
|
|
582
|
-
|
|
583
|
-
|
|
584
|
-
|
|
585
|
-
|
|
586
|
-
|
|
587
|
-
|
|
588
|
-
|
|
589
|
-
|
|
590
|
-
|
|
591
|
-
|
|
578
|
+
react_1.default.createElement("br", null),
|
|
579
|
+
react_1.default.createElement(Button_1.default, { label: "DrawerButton", onClick: handleOnclick3, width: 250, variant: "solid" }),
|
|
580
|
+
react_1.default.createElement("br", null),
|
|
581
|
+
react_1.default.createElement(Drawer_1.default, { isOpen: drawerOpen, onClose: handleOnclick4, size: "xl" },
|
|
582
|
+
react_1.default.createElement(Drawer_1.DrawerHeader, null, "Drawer Header"),
|
|
583
|
+
react_1.default.createElement(Drawer_1.DrawerBody, null, "Drawer Body"),
|
|
584
|
+
react_1.default.createElement(Drawer_1.DrawerFooter, null, "Drawer Footer")),
|
|
585
|
+
react_1.default.createElement("br", null),
|
|
586
|
+
react_1.default.createElement("br", null),
|
|
587
|
+
react_1.default.createElement(MultiSelect_1.default, { value: selectedOptions, onValueChange: handleValueSelectChange }),
|
|
588
|
+
react_1.default.createElement("br", null),
|
|
589
|
+
react_1.default.createElement("br", null),
|
|
590
|
+
react_1.default.createElement("div", { style: { width: "200px" } },
|
|
591
|
+
react_1.default.createElement(DatePicker_1.default, { selectedDate: selectedDate, onChange: function (date) { return setSelectedDate(date); },
|
|
592
592
|
// showTimeSelect={true}
|
|
593
593
|
label: "Select Date" }),
|
|
594
|
-
selectedDate && (
|
|
594
|
+
selectedDate && (react_1.default.createElement("p", null,
|
|
595
595
|
"Selected Date: ",
|
|
596
596
|
selectedDate.toISOString()))),
|
|
597
|
-
|
|
598
|
-
|
|
599
|
-
|
|
600
|
-
|
|
601
|
-
|
|
602
|
-
|
|
603
|
-
|
|
604
|
-
|
|
605
|
-
|
|
597
|
+
react_1.default.createElement("br", null),
|
|
598
|
+
react_1.default.createElement("br", null),
|
|
599
|
+
react_1.default.createElement(Search_1.default, { onSearch: handleSearch, onclose: handleRemoveSearch, query: searchQuery }),
|
|
600
|
+
react_1.default.createElement("br", null),
|
|
601
|
+
react_1.default.createElement("br", null),
|
|
602
|
+
react_1.default.createElement(Timeline_1.default, { timelineEvents: timeline }),
|
|
603
|
+
react_1.default.createElement("br", null),
|
|
604
|
+
react_1.default.createElement("br", null),
|
|
605
|
+
react_1.default.createElement(SelectSearch_1.default, { options: [
|
|
606
606
|
{ id: "1", label: "Option 1" },
|
|
607
607
|
{ id: "2", label: "select 2" },
|
|
608
608
|
{
|
|
@@ -614,39 +614,44 @@ var Layout = function () {
|
|
|
614
614
|
}, initialSelectedOption: { id: "1", label: "Option 1" }, onOptionSelect: handleSelectClick, name: "hai",
|
|
615
615
|
// isOptionLoading={true}
|
|
616
616
|
label: "SelectSearch" }),
|
|
617
|
-
|
|
618
|
-
|
|
619
|
-
|
|
620
|
-
|
|
617
|
+
react_1.default.createElement("br", null),
|
|
618
|
+
react_1.default.createElement("br", null),
|
|
619
|
+
react_1.default.createElement(react_2.Text, null, "Accordion"),
|
|
620
|
+
react_1.default.createElement(Accordion_1.default, { allowToggle: true, items: [
|
|
621
621
|
{
|
|
622
|
-
header: (
|
|
623
|
-
|
|
624
|
-
|
|
625
|
-
content: (
|
|
626
|
-
|
|
627
|
-
|
|
628
|
-
|
|
629
|
-
|
|
630
|
-
|
|
622
|
+
header: (react_1.default.createElement(react_1.default.Fragment, null,
|
|
623
|
+
react_1.default.createElement(react_2.Box, { as: "span", flex: "1", textAlign: "left" }, "Section 1 title"),
|
|
624
|
+
react_1.default.createElement(fa_1.FaChevronDown, { style: { marginRight: "8px" } }))),
|
|
625
|
+
content: (react_1.default.createElement("div", null,
|
|
626
|
+
react_1.default.createElement(react_2.Text, null, "This is text inside Section 1."),
|
|
627
|
+
react_1.default.createElement(react_2.Box, { bg: "gray.200", p: 4, mt: 2 }, "This is a box with more content inside Section 1."),
|
|
628
|
+
react_1.default.createElement(react_2.Flex, { mt: 2 },
|
|
629
|
+
react_1.default.createElement(react_2.Box, { flex: "1", bg: "blue.200", p: 4 }, "Box 1"),
|
|
630
|
+
react_1.default.createElement(react_2.Box, { flex: "1", bg: "green.200", p: 4, ml: 2 }, "Box 2")))),
|
|
631
|
+
customStyles: {
|
|
632
|
+
buttonStyle: { backgroundColor: "yellow" },
|
|
633
|
+
hoverbuttonStyle: { backgroundColor: "orange" },
|
|
634
|
+
},
|
|
635
|
+
// buttonProps: { backgroundColor: "red" }
|
|
631
636
|
},
|
|
632
637
|
{
|
|
633
|
-
header: (
|
|
634
|
-
|
|
635
|
-
|
|
636
|
-
content: (
|
|
637
|
-
|
|
638
|
-
|
|
639
|
-
|
|
640
|
-
|
|
641
|
-
|
|
638
|
+
header: (react_1.default.createElement(react_1.default.Fragment, null,
|
|
639
|
+
react_1.default.createElement(react_2.Box, { as: "span", flex: "1", textAlign: "left" }, "Section 1 title"),
|
|
640
|
+
react_1.default.createElement(fa_1.FaChevronDown, { style: { marginRight: "8px" } }))),
|
|
641
|
+
content: (react_1.default.createElement("div", null,
|
|
642
|
+
react_1.default.createElement(react_2.Text, null, "This is text inside Section 1."),
|
|
643
|
+
react_1.default.createElement(react_2.Box, { bg: "gray.200", p: 4, mt: 2 }, "This is a box with more content inside Section 1."),
|
|
644
|
+
react_1.default.createElement(react_2.Flex, { mt: 2 },
|
|
645
|
+
react_1.default.createElement(react_2.Box, { flex: "1", bg: "blue.200", p: 4 }, "Box 1"),
|
|
646
|
+
react_1.default.createElement(react_2.Box, { flex: "1", bg: "green.200", p: 4, ml: 2 }, "Box 2")))),
|
|
642
647
|
},
|
|
643
648
|
] }),
|
|
644
|
-
|
|
645
|
-
|
|
646
|
-
|
|
647
|
-
|
|
649
|
+
react_1.default.createElement("br", null),
|
|
650
|
+
react_1.default.createElement("br", null),
|
|
651
|
+
react_1.default.createElement("br", null),
|
|
652
|
+
react_1.default.createElement(react_2.Button, { onClick: function () {
|
|
648
653
|
setAlertActive(true);
|
|
649
654
|
} }, "AlertDialog"),
|
|
650
|
-
|
|
655
|
+
react_1.default.createElement(AlertDialog_1.default, { isOpen: alertActive, onClose: handleAlert, leastDestructiveRef: leastDestructiveRef, title: "hello", content: "hellobody", onConfirm: function () { return handleAlert(); }, size: "500" }))))));
|
|
651
656
|
};
|
|
652
657
|
exports.default = Layout;
|