pixelize-design-library 1.0.41 → 1.0.43

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.
Files changed (15) hide show
  1. package/dist/Components/EmailCards/VerifyEmailOtp/VerifyEmailOtp.d.ts +1 -1
  2. package/dist/Components/EmailCards/VerifyEmailOtp/VerifyEmailOtp.js +31 -31
  3. package/dist/Components/EmailCards/VerifyEmailOtp/VerifyEmailOtpProps.d.ts +2 -0
  4. package/dist/Components/Modal/Modal.d.ts +1 -1
  5. package/dist/Components/Modal/Modal.js +13 -8
  6. package/dist/Components/Modal/ModalProps.d.ts +2 -2
  7. package/dist/Components/NoteTextArea/NoteTextArea.js +14 -10
  8. package/dist/Components/ProfilePhotoViewer/ProfilePhotoViewer.d.ts +1 -1
  9. package/dist/Components/ProfilePhotoViewer/ProfilePhotoViewer.js +4 -3
  10. package/dist/Components/ProfilePhotoViewer/ProfilePhotoViewerProps.d.ts +3 -0
  11. package/dist/Components/Table/Table.d.ts +1 -1
  12. package/dist/Components/Table/Table.js +18 -16
  13. package/dist/Components/Table/TableProps.d.ts +2 -1
  14. package/dist/Layout.js +15 -6
  15. package/package.json +1 -1
package/dist/Components/EmailCards/VerifyEmailOtp/VerifyEmailOtp.d.ts CHANGED
@@ -1,3 +1,3 @@
1
1
  import React from "react";
2
2
  import { VerifyEmailOtpProps } from "./VerifyEmailOtpProps";
3
- export default function VerifyEmailOtp({ resendMaill, onChange, onComplete, placeholder, pins, description, title, isDisabled, isInvalid, }: VerifyEmailOtpProps): React.JSX.Element;
3
+ export default function VerifyEmailOtp({ resendMaill, onChange, onComplete, placeholder, pins, description, title, isDisabled, isInvalid, styles, }: VerifyEmailOtpProps): React.JSX.Element;
package/dist/Components/EmailCards/VerifyEmailOtp/VerifyEmailOtp.js CHANGED
@@ -7,36 +7,36 @@ var react_1 = __importDefault(require("react"));
7
7
  var react_2 = require("@chakra-ui/react");
8
8
  var lu_1 = require("react-icons/lu");
9
9
  function VerifyEmailOtp(_a) {
10
- var resendMaill = _a.resendMaill, onChange = _a.onChange, onComplete = _a.onComplete, _b = _a.placeholder, placeholder = _b === void 0 ? "" : _b, _c = _a.pins, pins = _c === void 0 ? 5 : _c, description = _a.description, title = _a.title, _d = _a.isDisabled, isDisabled = _d === void 0 ? false : _d, _e = _a.isInvalid, isInvalid = _e === void 0 ? false : _e;
11
- return (react_1.default.createElement("div", { style: {
12
- display: "flex",
13
- flexDirection: "column",
14
- alignItems: "center",
15
- justifyContent: "center",
16
- padding: "3%",
17
- background: "#ffffff",
18
- } },
19
- react_1.default.createElement("div", { style: { padding: "3%" } },
20
- react_1.default.createElement(lu_1.LuMailCheck, { size: "100", color: "#3182ce" })),
21
- react_1.default.createElement("h1", { style: { fontSize: "2rem", fontWeight: "bold", marginBottom: "2%" } }, title),
22
- react_1.default.createElement("p", { style: { textAlign: "center", marginBottom: "2%" } },
23
- description,
24
- react_1.default.createElement("br", null),
25
- " your new Pixel Account"),
26
- react_1.default.createElement("div", { style: { marginBottom: "2%" } },
27
- react_1.default.createElement(react_2.HStack, null,
28
- react_1.default.createElement(react_2.PinInput, { placeholder: placeholder, onChange: onChange, onComplete: onComplete, isDisabled: isDisabled, isInvalid: isInvalid }, Array.from({ length: pins }).map(function (_, index) { return (react_1.default.createElement(react_2.PinInputField, { key: index })); })))),
29
- react_1.default.createElement("p", { style: { textAlign: "center", marginBottom: "2%" } },
30
- "Didn't receive the code?",
31
- " ",
32
- react_1.default.createElement("button", { onClick: function () { return resendMaill(); }, style: {
33
- background: "none",
34
- color: "#3182ce",
35
- border: "none",
36
- padding: "0",
37
- font: "inherit",
38
- cursor: "pointer",
39
- outline: "inherit",
40
- } }, "Resend Code"))));
10
+ var resendMaill = _a.resendMaill, onChange = _a.onChange, onComplete = _a.onComplete, _b = _a.placeholder, placeholder = _b === void 0 ? "" : _b, _c = _a.pins, pins = _c === void 0 ? 5 : _c, description = _a.description, title = _a.title, _d = _a.isDisabled, isDisabled = _d === void 0 ? false : _d, _e = _a.isInvalid, isInvalid = _e === void 0 ? false : _e, styles = _a.styles;
11
+ return (react_1.default.createElement("div", { style: styles },
12
+ react_1.default.createElement("div", { style: {
13
+ display: "flex",
14
+ flexDirection: "column",
15
+ alignItems: "center",
16
+ justifyContent: "center",
17
+ padding: "3%",
18
+ } },
19
+ react_1.default.createElement("div", { style: { padding: "3%" } },
20
+ react_1.default.createElement(lu_1.LuMailCheck, { size: "100", color: "#3182ce" })),
21
+ react_1.default.createElement("h1", { style: { fontSize: "2rem", fontWeight: "bold", marginBottom: "2%" } }, title),
22
+ react_1.default.createElement("p", { style: { textAlign: "center", marginBottom: "2%" } },
23
+ description,
24
+ react_1.default.createElement("br", null),
25
+ " your new Pixel Account"),
26
+ react_1.default.createElement("div", { style: { marginBottom: "2%" } },
27
+ react_1.default.createElement(react_2.HStack, null,
28
+ react_1.default.createElement(react_2.PinInput, { placeholder: placeholder, onChange: onChange, onComplete: onComplete, isDisabled: isDisabled, isInvalid: isInvalid }, Array.from({ length: pins }).map(function (_, index) { return (react_1.default.createElement(react_2.PinInputField, { key: index })); })))),
29
+ react_1.default.createElement("p", { style: { textAlign: "center", marginBottom: "2%" } },
30
+ "Didn't receive the code?",
31
+ " ",
32
+ react_1.default.createElement("button", { onClick: function () { return resendMaill(); }, style: {
33
+ background: "none",
34
+ color: "#3182ce",
35
+ border: "none",
36
+ padding: "0",
37
+ font: "inherit",
38
+ cursor: "pointer",
39
+ outline: "inherit",
40
+ } }, "Resend Code")))));
41
41
  }
42
42
  exports.default = VerifyEmailOtp;
package/dist/Components/EmailCards/VerifyEmailOtp/VerifyEmailOtpProps.d.ts CHANGED
@@ -1,3 +1,4 @@
1
+ /// <reference types="react" />
1
2
  export type VerifyEmailOtpProps = {
2
3
  resendMaill: () => void;
3
4
  onChange: (value: string) => void;
@@ -8,4 +9,5 @@ export type VerifyEmailOtpProps = {
8
9
  description: string;
9
10
  isDisabled?: boolean;
10
11
  isInvalid?: boolean;
12
+ styles?: React.CSSProperties;
11
13
  };
package/dist/Components/Modal/Modal.d.ts CHANGED
@@ -1,3 +1,3 @@
1
1
  import React from "react";
2
2
  import { ChakraModelProps } from "./ModalProps";
3
- export default function Modal({ size, isOpen, onClose, title, footer, overlaybg, overlaybackdropFilter, overlaybackdropInvert, overlaybackdropBlur, isCentered, finalFocusRef, blockScrollOnMount, initialFocusRef, closeOnOverlayClick, motionPreset, scrollBehavior, children, }: ChakraModelProps): React.JSX.Element;
3
+ export default function Modal({ size, isOpen, onClose, header, footer, overlaybg, overlaybackdropFilter, overlaybackdropInvert, overlaybackdropBlur, isCentered, finalFocusRef, blockScrollOnMount, initialFocusRef, closeOnOverlayClick, motionPreset, scrollBehavior, children, }: ChakraModelProps): React.JSX.Element;
package/dist/Components/Modal/Modal.js CHANGED
@@ -6,19 +6,24 @@ Object.defineProperty(exports, "__esModule", { value: true });
6
6
  var react_1 = __importDefault(require("react"));
7
7
  var react_2 = require("@chakra-ui/react");
8
8
  function Modal(_a) {
9
- var size = _a.size, _b = _a.isOpen, isOpen = _b === void 0 ? false : _b, onClose = _a.onClose, title = _a.title, footer = _a.footer, _c = _a.overlaybg, overlaybg = _c === void 0 ? "blackAlpha.300" : _c, _d = _a.overlaybackdropFilter, overlaybackdropFilter = _d === void 0 ? "blur(10px) hue-rotate(90deg)" : _d, overlaybackdropInvert = _a.overlaybackdropInvert, overlaybackdropBlur = _a.overlaybackdropBlur, isCentered = _a.isCentered, finalFocusRef = _a.finalFocusRef, blockScrollOnMount = _a.blockScrollOnMount, initialFocusRef = _a.initialFocusRef, closeOnOverlayClick = _a.closeOnOverlayClick, motionPreset = _a.motionPreset, scrollBehavior = _a.scrollBehavior, children = _a.children;
9
+ var size = _a.size, _b = _a.isOpen, isOpen = _b === void 0 ? false : _b, onClose = _a.onClose, header = _a.header, footer = _a.footer, _c = _a.overlaybg, overlaybg = _c === void 0 ? "blackAlpha.300" : _c, _d = _a.overlaybackdropFilter, overlaybackdropFilter = _d === void 0 ? "blur(10px) hue-rotate(90deg)" : _d, overlaybackdropInvert = _a.overlaybackdropInvert, overlaybackdropBlur = _a.overlaybackdropBlur, isCentered = _a.isCentered, finalFocusRef = _a.finalFocusRef, blockScrollOnMount = _a.blockScrollOnMount, initialFocusRef = _a.initialFocusRef, closeOnOverlayClick = _a.closeOnOverlayClick, motionPreset = _a.motionPreset, scrollBehavior = _a.scrollBehavior, children = _a.children;
10
10
  if (!isOpen)
11
11
  return react_1.default.createElement(react_1.default.Fragment, null);
12
+ var filterChildren = function (type) {
13
+ return react_1.default.Children.map(children, function (child) {
14
+ if (child.type === type)
15
+ return child.props.children;
16
+ }).filter(Boolean)[0]; // Get the first (and should be only) element's children
17
+ };
18
+ var headerContent = filterChildren("header");
19
+ var bodyContent = filterChildren("body");
20
+ var footerContent = filterChildren("footer");
12
21
  return (react_1.default.createElement(react_2.Modal, { isOpen: true, onClose: onClose, size: size, isCentered: isCentered, finalFocusRef: finalFocusRef, blockScrollOnMount: blockScrollOnMount, initialFocusRef: initialFocusRef, closeOnOverlayClick: closeOnOverlayClick, motionPreset: motionPreset, scrollBehavior: scrollBehavior },
13
22
  react_1.default.createElement(react_2.ModalOverlay, { bg: overlaybg, backdropFilter: overlaybackdropFilter, backdropInvert: overlaybackdropInvert, backdropBlur: overlaybackdropBlur }),
14
23
  react_1.default.createElement(react_2.ModalContent, null,
15
- react_1.default.createElement(react_2.ModalHeader, null, title),
24
+ headerContent && react_1.default.createElement(react_2.ModalHeader, null, headerContent),
16
25
  react_1.default.createElement(react_2.ModalCloseButton, null),
17
- react_1.default.createElement(react_2.ModalBody, { sx: {
18
- whiteSpace: "normal",
19
- wordBreak: "break-word",
20
- overflowWrap: "break-word",
21
- } }, children),
22
- react_1.default.createElement(react_2.ModalFooter, null, footer))));
26
+ react_1.default.createElement(react_2.ModalBody, null, bodyContent),
27
+ footerContent && react_1.default.createElement(react_2.ModalFooter, null, footerContent))));
23
28
  }
24
29
  exports.default = Modal;
package/dist/Components/Modal/ModalProps.d.ts CHANGED
@@ -1,11 +1,11 @@
1
1
  import { ModalProps } from "@chakra-ui/react";
2
2
  export type ChakraModelProps = Pick<ModalProps, "isOpen" | "onClose" | "finalFocusRef" | "blockScrollOnMount" | "initialFocusRef" | "closeOnOverlayClick" | "isCentered" | "motionPreset" | "scrollBehavior"> & {
3
- title?: string;
3
+ header?: any;
4
4
  footer?: any;
5
5
  overlaybg?: string;
6
6
  overlaybackdropFilter?: string;
7
7
  overlaybackdropInvert?: string;
8
8
  overlaybackdropBlur?: string;
9
- size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
9
+ size: "xs" | "sm" | "md" | "lg" | "xl" | "full";
10
10
  children?: any;
11
11
  };
package/dist/Components/NoteTextArea/NoteTextArea.js CHANGED
@@ -66,7 +66,7 @@ var NotesTextArea = styled_1.default.textarea(templateObject_5 || (templateObjec
66
66
  });
67
67
  var FileUploadLabel = styled_1.default.label(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n cursor: pointer;\n"], ["\n cursor: pointer;\n"])));
68
68
  var AddTitleButton = styled_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n color: #616e88;\n cursor: pointer;\n fontsize: 0.8rem;\n"], ["\n color: #616e88;\n cursor: pointer;\n fontsize: 0.8rem;\n"])));
69
- var Button = styled_1.default.button(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n border: none;\n padding: 3px 15px;\n textalign: center;\n textdecoration: none;\n background: ", ";\n color: ", ";\n fontsize: 1rem;\n marginright: 5px;\n borderradius: 2px;\n opacity: ", ";\n cursor: ", ";\n"], ["\n border: none;\n padding: 3px 15px;\n textalign: center;\n textdecoration: none;\n background: ", ";\n color: ", ";\n fontsize: 1rem;\n marginright: 5px;\n borderradius: 2px;\n opacity: ", ";\n cursor: ", ";\n"])), function (_a) {
69
+ var Button = styled_1.default.button(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n border: none;\n padding: 3px 15px;\n textalign: center;\n textdecoration: none;\n background: ", ";\n color: ", ";\n fontsize: 1rem;\n marginright: 5px;\n borderradius: 5px;\n opacity: ", ";\n cursor: ", ";\n"], ["\n border: none;\n padding: 3px 15px;\n textalign: center;\n textdecoration: none;\n background: ", ";\n color: ", ";\n fontsize: 1rem;\n marginright: 5px;\n borderradius: 5px;\n opacity: ", ";\n cursor: ", ";\n"])), function (_a) {
70
70
  var isSaveButton = _a.isSaveButton, noteValue = _a.noteValue;
71
71
  return isSaveButton ? (noteValue ? "#3182ce" : "#3182ce") : "white";
72
72
  }, function (_a) {
@@ -79,7 +79,7 @@ var Button = styled_1.default.button(templateObject_8 || (templateObject_8 = __m
79
79
  var isSaveButton = _a.isSaveButton, noteValue = _a.noteValue;
80
80
  return isSaveButton && !noteValue ? "initial" : "pointer";
81
81
  });
82
- var CancelButton = styled_1.default.button(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n border: none;\n color: #5e5c5c;\n padding: 3px 15px;\n text-align: center;\n text-decoration: none;\n background: white;\n font-size: 1rem;\n margin-right: 5px;\n border-radius: 2px;\n"], ["\n border: none;\n color: #5e5c5c;\n padding: 3px 15px;\n text-align: center;\n text-decoration: none;\n background: white;\n font-size: 1rem;\n margin-right: 5px;\n border-radius: 2px;\n"])));
82
+ var CancelButton = styled_1.default.button(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n border: none;\n color: #5e5c5c;\n padding: 3px 15px;\n text-align: center;\n text-decoration: none;\n background: white;\n font-size: 1rem;\n margin-right: 5px;\n border-radius: 5px;\n"], ["\n border: none;\n color: #5e5c5c;\n padding: 3px 15px;\n text-align: center;\n text-decoration: none;\n background: white;\n font-size: 1rem;\n margin-right: 5px;\n border-radius: 5px;\n"])));
83
83
  var FileViewer = styled_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 300px;\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 300px;\n"])));
84
84
  var FileEdit = (0, styled_1.default)(fi_1.FiX)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n cursor: pointer;\n color: #ff0000;\n"], ["\n cursor: pointer;\n color: #ff0000;\n"])));
85
85
  function NoteTextArea(_a) {
@@ -107,17 +107,21 @@ function NoteTextArea(_a) {
107
107
  }, [value, title, file, isEditable]);
108
108
  var handleTextArea = function () {
109
109
  setIsActive(!isActive);
110
- setNoteValue("");
111
- setTitleValue("");
112
- setTitleShow(false);
113
- setFiles([]);
110
+ if (!isEditable) {
111
+ setNoteValue("");
112
+ setTitleValue("");
113
+ setTitleShow(false);
114
+ setFiles([]);
115
+ }
114
116
  };
115
117
  var resetState = function () {
116
118
  setIsActive(false);
117
- setNoteValue("");
118
- setTitleValue("");
119
- setTitleShow(false);
120
- setFiles([]);
119
+ if (!isEditable) {
120
+ setNoteValue("");
121
+ setTitleValue("");
122
+ setTitleShow(false);
123
+ setFiles([]);
124
+ }
121
125
  };
122
126
  var handleNoteChange = function (event) {
123
127
  setNoteValue(event.target.value);
package/dist/Components/ProfilePhotoViewer/ProfilePhotoViewer.d.ts CHANGED
@@ -1,3 +1,3 @@
1
1
  import React from "react";
2
2
  import { ProfilePhotoViewerProps } from "./ProfilePhotoViewerProps";
3
- export default function ProfilePhotoViewer({ photoUrl, onPhotoChange, imageWidth, imageAlt, imageObjectFit, imageBorderRadius, editIconSize, editIconPositionRight, editIconPositionBottom, isRound, boxStyle, isEditable, }: ProfilePhotoViewerProps): React.JSX.Element;
3
+ export default function ProfilePhotoViewer({ photoUrl, onPhotoChange, imageWidth, imageAlt, imageObjectFit, imageBorderRadius, editIconSize, editIconPositionRight, editIconPositionBottom, isRound, boxStyle, isEditable, isView, style, handleIsView, }: ProfilePhotoViewerProps): React.JSX.Element;
package/dist/Components/ProfilePhotoViewer/ProfilePhotoViewer.js CHANGED
@@ -8,8 +8,8 @@ var react_2 = require("@chakra-ui/react");
8
8
  var react_3 = require("react");
9
9
  var icons_1 = require("@chakra-ui/icons"); // Ensure you have @chakra-ui/icons installed
10
10
  function ProfilePhotoViewer(_a) {
11
- var photoUrl = _a.photoUrl, onPhotoChange = _a.onPhotoChange, _b = _a.imageWidth, imageWidth = _b === void 0 ? "100px" : _b, _c = _a.imageAlt, imageAlt = _c === void 0 ? "Profile Photo" : _c, _d = _a.imageObjectFit, imageObjectFit = _d === void 0 ? "cover" : _d, _e = _a.imageBorderRadius, imageBorderRadius = _e === void 0 ? "full" : _e, _f = _a.editIconSize, editIconSize = _f === void 0 ? "sm" : _f, _g = _a.editIconPositionRight, editIconPositionRight = _g === void 0 ? "5px" : _g, _h = _a.editIconPositionBottom, editIconPositionBottom = _h === void 0 ? "5px" : _h, _j = _a.isRound, isRound = _j === void 0 ? true : _j, boxStyle = _a.boxStyle, _k = _a.isEditable, isEditable = _k === void 0 ? false : _k;
12
- var _l = (0, react_3.useState)(photoUrl), photo = _l[0], setPhoto = _l[1];
11
+ var photoUrl = _a.photoUrl, onPhotoChange = _a.onPhotoChange, _b = _a.imageWidth, imageWidth = _b === void 0 ? "100px" : _b, _c = _a.imageAlt, imageAlt = _c === void 0 ? "Profile Photo" : _c, _d = _a.imageObjectFit, imageObjectFit = _d === void 0 ? "cover" : _d, _e = _a.imageBorderRadius, imageBorderRadius = _e === void 0 ? "full" : _e, _f = _a.editIconSize, editIconSize = _f === void 0 ? "sm" : _f, _g = _a.editIconPositionRight, editIconPositionRight = _g === void 0 ? "5px" : _g, _h = _a.editIconPositionBottom, editIconPositionBottom = _h === void 0 ? "5px" : _h, _j = _a.isRound, isRound = _j === void 0 ? true : _j, boxStyle = _a.boxStyle, _k = _a.isEditable, isEditable = _k === void 0 ? false : _k, _l = _a.isView, isView = _l === void 0 ? false : _l, style = _a.style, handleIsView = _a.handleIsView;
12
+ var _m = (0, react_3.useState)(photoUrl), photo = _m[0], setPhoto = _m[1];
13
13
  var fileInputRef = (0, react_3.useRef)(null);
14
14
  var handlePhotoChange = function (event) {
15
15
  var _a;
@@ -36,6 +36,7 @@ function ProfilePhotoViewer(_a) {
36
36
  react_1.default.createElement(react_2.Image, { src: photo, alt: imageAlt, boxSize: imageWidth, objectFit: imageObjectFit, borderRadius: imageBorderRadius }),
37
37
  isEditable && (react_1.default.createElement(react_1.default.Fragment, null,
38
38
  react_1.default.createElement(react_2.IconButton, { icon: react_1.default.createElement(icons_1.EditIcon, null), isRound: isRound, size: editIconSize, position: "absolute", right: editIconPositionRight, bottom: editIconPositionBottom, onClick: handleClick, "aria-label": "Edit photo" }),
39
- react_1.default.createElement(react_2.Input, { type: "file", accept: "image/*", onChange: handlePhotoChange, hidden: true, ref: fileInputRef })))));
39
+ react_1.default.createElement(react_2.Input, { type: "file", accept: "image/*", onChange: handlePhotoChange, hidden: true, ref: fileInputRef }))),
40
+ isView && (react_1.default.createElement(react_2.IconButton, { icon: react_1.default.createElement(icons_1.ViewIcon, null), isRound: isRound, size: editIconSize, position: "absolute", right: editIconPositionRight, bottom: editIconPositionBottom, onClick: handleIsView, "aria-label": "View photo", style: style }))));
40
41
  }
41
42
  exports.default = ProfilePhotoViewer;
package/dist/Components/ProfilePhotoViewer/ProfilePhotoViewerProps.d.ts CHANGED
@@ -12,4 +12,7 @@ export type ProfilePhotoViewerProps = {
12
12
  editIconPositionBottom?: string;
13
13
  isRound?: boolean;
14
14
  boxStyle?: React.CSSProperties;
15
+ isView?: boolean;
16
+ style?: React.CSSProperties;
17
+ handleIsView?: () => void;
15
18
  };
package/dist/Components/Table/Table.d.ts CHANGED
@@ -1,3 +1,3 @@
1
1
  import React from "react";
2
2
  import { TableProps } from "./TableProps";
3
- export default function Table({ data, headers, tableHeaderBgColor, tableHeaderColor, handleExportChange, exportOptions, exportLabel, isLoading, loadingContaxt, loadingBoxStyle, }: TableProps): React.JSX.Element;
3
+ export default function Table({ data, headers, tableHeaderBgColor, tableHeaderColor, handleExportChange, exportOptions, exportLabel, isLoading, loadingContaxt, loadingBoxStyle, isVisiblity, }: TableProps): React.JSX.Element;
package/dist/Components/Table/Table.js CHANGED
@@ -29,21 +29,21 @@ var react_3 = require("@chakra-ui/react");
29
29
  var react_4 = require("react");
30
30
  var icons_1 = require("@chakra-ui/icons");
31
31
  function Table(_a) {
32
- var data = _a.data, headers = _a.headers, _b = _a.tableHeaderBgColor, tableHeaderBgColor = _b === void 0 ? "#3182ce" : _b, _c = _a.tableHeaderColor, tableHeaderColor = _c === void 0 ? "white" : _c, handleExportChange = _a.handleExportChange, exportOptions = _a.exportOptions, exportLabel = _a.exportLabel, isLoading = _a.isLoading, loadingContaxt = _a.loadingContaxt, loadingBoxStyle = _a.loadingBoxStyle;
33
- var _d = (0, react_4.useState)(0), currentPage = _d[0], setCurrentPage = _d[1];
34
- var _e = (0, react_4.useState)(5), rowsPerPage = _e[0], setRowsPerPage = _e[1];
35
- var _f = (0, react_4.useState)(null), sortField = _f[0], setSortField = _f[1];
36
- var _g = (0, react_4.useState)(null), sortDirection = _g[0], setSortDirection = _g[1];
37
- var _h = (0, react_4.useState)(false), isPopoverOpen = _h[0], setPopoverOpen = _h[1];
38
- var _j = (0, react_4.useState)(null), activeHeader = _j[0], setActiveHeader = _j[1];
39
- var _k = (0, react_4.useState)({}), searchTerms = _k[0], setSearchTerms = _k[1];
40
- var _l = (0, react_4.useState)({}), searchOperation = _l[0], setSearchOperation = _l[1];
41
- var _m = (0, react_4.useState)({}), betweenValues = _m[0], setBetweenValues = _m[1];
42
- var _o = (0, react_4.useState)(null), hoveredHeaderIndex = _o[0], setHoveredHeaderIndex = _o[1];
43
- var _p = (0, react_4.useState)(headers.reduce(function (acc, curr) {
32
+ var data = _a.data, headers = _a.headers, _b = _a.tableHeaderBgColor, tableHeaderBgColor = _b === void 0 ? "#3182ce" : _b, _c = _a.tableHeaderColor, tableHeaderColor = _c === void 0 ? "white" : _c, handleExportChange = _a.handleExportChange, exportOptions = _a.exportOptions, exportLabel = _a.exportLabel, isLoading = _a.isLoading, loadingContaxt = _a.loadingContaxt, loadingBoxStyle = _a.loadingBoxStyle, _d = _a.isVisiblity, isVisiblity = _d === void 0 ? true : _d;
33
+ var _e = (0, react_4.useState)(0), currentPage = _e[0], setCurrentPage = _e[1];
34
+ var _f = (0, react_4.useState)(5), rowsPerPage = _f[0], setRowsPerPage = _f[1];
35
+ var _g = (0, react_4.useState)(null), sortField = _g[0], setSortField = _g[1];
36
+ var _h = (0, react_4.useState)(null), sortDirection = _h[0], setSortDirection = _h[1];
37
+ var _j = (0, react_4.useState)(false), isPopoverOpen = _j[0], setPopoverOpen = _j[1];
38
+ var _k = (0, react_4.useState)(null), activeHeader = _k[0], setActiveHeader = _k[1];
39
+ var _l = (0, react_4.useState)({}), searchTerms = _l[0], setSearchTerms = _l[1];
40
+ var _m = (0, react_4.useState)({}), searchOperation = _m[0], setSearchOperation = _m[1];
41
+ var _o = (0, react_4.useState)({}), betweenValues = _o[0], setBetweenValues = _o[1];
42
+ var _p = (0, react_4.useState)(null), hoveredHeaderIndex = _p[0], setHoveredHeaderIndex = _p[1];
43
+ var _q = (0, react_4.useState)(headers.reduce(function (acc, curr) {
44
44
  var _a;
45
45
  return (__assign(__assign({}, acc), (_a = {}, _a[curr.label] = true, _a)));
46
- }, {})), visibleColumns = _p[0], setVisibleColumns = _p[1];
46
+ }, {})), visibleColumns = _q[0], setVisibleColumns = _q[1];
47
47
  if (isLoading) {
48
48
  return (react_1.default.createElement(react_2.Box, { width: "full", overflowX: "auto", style: loadingBoxStyle }, loadingContaxt ? (loadingContaxt) : (react_1.default.createElement(react_2.Spinner, { thickness: "4px", speed: "0.65s", emptyColor: "gray.200", color: "blue.500", size: "xl" }))));
49
49
  }
@@ -51,7 +51,7 @@ function Table(_a) {
51
51
  setRowsPerPage(Number(event.target.value));
52
52
  setCurrentPage(0);
53
53
  };
54
- var pageSizeOptions = [5, 10, 20, 30, 40, 50, 75, 100].filter(function (size) { return size <= data.length; });
54
+ var pageSizeOptions = [1, 2, 3, 4, 5, 10, 20, 30, 40, 50, 75, 100].filter(function (size) { return size <= data.length; });
55
55
  var sortedData = __spreadArray([], data, true).sort(function (a, b) {
56
56
  if (!sortField)
57
57
  return 0;
@@ -359,11 +359,13 @@ function Table(_a) {
359
359
  : row[header.accessor_key])));
360
360
  }))); })))),
361
361
  react_1.default.createElement(react_2.Flex, { justify: "flex-end", align: "center", mt: 4 },
362
- react_1.default.createElement(react_2.Flex, { mr: 4 },
362
+ isVisiblity && (react_1.default.createElement(react_2.Flex, { mr: 4 },
363
363
  react_1.default.createElement(react_2.Menu, null,
364
364
  react_1.default.createElement(react_2.MenuButton, { as: react_2.Button, rightIcon: react_1.default.createElement(icons_1.ChevronDownIcon, null), colorScheme: "blue", variant: "outline" }, "Visiblity"),
365
365
  react_1.default.createElement(react_2.MenuList, { height: 150, overflow: "scroll", zIndex: "2" }, headers.map(function (header, index) { return (react_1.default.createElement(react_2.MenuItem, { key: index },
366
- react_1.default.createElement(react_2.Checkbox, { isChecked: visibleColumns[header.label], onChange: function () { return handleColumnVisibilityChange(header.label); } }, header.label))); })))),
366
+ react_1.default.createElement(react_2.Checkbox, { isChecked: visibleColumns[header.label], onChange: function () {
367
+ return handleColumnVisibilityChange(header.label);
368
+ } }, header.label))); }))))),
367
369
  react_1.default.createElement(react_2.Text, { mr: 4 },
368
370
  startRow + 1,
369
371
  " to ",
package/dist/Components/Table/TableProps.d.ts CHANGED
@@ -8,9 +8,10 @@ export type TableProps = {
8
8
  exportOptions?: ExportOption[];
9
9
  exportLabel?: string;
10
10
  isLoading?: boolean;
11
- loadingType?: 'skeleton' | 'spinner';
11
+ loadingType?: "skeleton" | "spinner";
12
12
  loadingContaxt?: ReactNode;
13
13
  loadingBoxStyle?: React.CSSProperties;
14
+ isVisiblity?: boolean;
14
15
  };
15
16
  export type DataObject = {
16
17
  id: number;
package/dist/Layout.js CHANGED
@@ -258,10 +258,10 @@ var Layout = function () {
258
258
  var data = (0, react_2.useMemo)(function () { return Array.from({ length: 10 }, function () { return Math.floor(Math.random() * 100); }); }, []);
259
259
  var categories = (0, react_2.useMemo)(function () { return data.map(function (_, index) { return "Category ".concat(index + 1); }); }, [data]);
260
260
  var _h = (0, react_2.useState)("left"), switchActive = _h[0], setSwitchActive = _h[1];
261
- var handleSwitchToggle = (0, react_2.useCallback)(function (value) {
261
+ var handleSwitchToggle = function (value) {
262
262
  // console.log(value);
263
263
  setSwitchActive(value);
264
- }, []);
264
+ };
265
265
  // const handleNoteValue = () => {
266
266
  // console.log("Note value");
267
267
  // }
@@ -325,7 +325,10 @@ var Layout = function () {
325
325
  react_2.default.createElement("br", null),
326
326
  react_2.default.createElement(Button_1.default, { label: "ModelButton", onClick: handleOnclick2, width: 250, variant: "solid", color: "blue" }),
327
327
  react_2.default.createElement("br", null),
328
- react_2.default.createElement(Modal_1.default, { isOpen: isOpen, onClose: function () { return setIsOpen(false); }, overlaybg: "blackAlpha.300", overlaybackdropFilter: "blur(10px) hue-rotate(90deg)", size: "sm", isCentered: true }, "helldddddlokdfjsvhbsdflijvbsdfpijvbdfpsivb pdfisjbnvpdfjibnvpidfjbnvpidfjnbvpdfijnvpdifjnvpijdfbnvijdfnvpijdfbovu hbdsouhv bdsohu vbsdhv bskhj bsdkh"),
328
+ react_2.default.createElement(Modal_1.default, { isOpen: isOpen, onClose: function () { return setIsOpen(false); }, overlaybg: "blackAlpha.300", overlaybackdropFilter: "blur(10px) hue-rotate(90deg)", size: "sm", isCentered: true },
329
+ react_2.default.createElement("header", null, "hai"),
330
+ react_2.default.createElement("body", null, "heelo"),
331
+ react_2.default.createElement("footer", null, "welcome")),
329
332
  react_2.default.createElement("br", null),
330
333
  react_2.default.createElement(Select_1.default, { options: [
331
334
  { id: 1, label: "mages" },
@@ -391,7 +394,7 @@ var Layout = function () {
391
394
  react_2.default.createElement(react_1.Skeleton, { height: "20px", width: "15%" }),
392
395
  react_2.default.createElement(react_1.Skeleton, { height: "20px", width: "25%" }),
393
396
  react_2.default.createElement(react_1.Skeleton, { height: "20px", width: "10%" }),
394
- react_2.default.createElement(react_1.Skeleton, { height: "20px", width: "20%" }))); })), loadingBoxStyle: { padding: "10px", width: "100%" } }),
397
+ react_2.default.createElement(react_1.Skeleton, { height: "20px", width: "20%" }))); })), loadingBoxStyle: { padding: "10px", width: "100%" }, isVisiblity: false }),
395
398
  react_2.default.createElement(ToolTip_1.default, { label: "Hello", placement: "top", hasArrow: true, size: "20", width: "300px", height: "100px", bg: "green" }, "hai"),
396
399
  react_2.default.createElement("br", null),
397
400
  react_2.default.createElement(react_1.Box, null,
@@ -405,7 +408,13 @@ var Layout = function () {
405
408
  // chartColor={["#00E396", "#3182ce", "#ff4757", "#ff6348", "#e84393"]}
406
409
  titleStyle: { color: "#00E396" } }))),
407
410
  react_2.default.createElement("br", null),
408
- react_2.default.createElement(ProfilePhotoViewer_1.default, { photoUrl: "https://bit.ly/dan-abramov", onPhotoChange: function (file) { return console.log(file); } }),
411
+ react_2.default.createElement(ProfilePhotoViewer_1.default
412
+ //photoUrl="https://bit.ly/dan-abramov"
413
+ , {
414
+ //photoUrl="https://bit.ly/dan-abramov"
415
+ photoUrl: "https://media.istockphoto.com/id/2000672702/photo/happy-smiling-mature-indian-or-latin-business-man-ceo-trader-using-computer-typing-working-in.jpg?s=1024x1024&w=is&k=20&c=D1vOFvPH5YG87jlDs8g9THoClPfmdbAsHx2J4PdDtcI=" !== null && "https://media.istockphoto.com/id/2000672702/photo/happy-smiling-mature-indian-or-latin-business-man-ceo-trader-using-computer-typing-working-in.jpg?s=1024x1024&w=is&k=20&c=D1vOFvPH5YG87jlDs8g9THoClPfmdbAsHx2J4PdDtcI=" !== void 0 ? "https://media.istockphoto.com/id/2000672702/photo/happy-smiling-mature-indian-or-latin-business-man-ceo-trader-using-computer-typing-working-in.jpg?s=1024x1024&w=is&k=20&c=D1vOFvPH5YG87jlDs8g9THoClPfmdbAsHx2J4PdDtcI=" : "https://bit.ly/dan-abramov", onPhotoChange: function (file) { return console.log(file); },
416
+ // isEditable={true}
417
+ isView: true }),
409
418
  react_2.default.createElement("br", null),
410
419
  react_2.default.createElement(Switch_1.default, { leftText: "left", rightText: "right", switchActive: switchActive, onSwitchToggle: handleSwitchToggle }),
411
420
  react_2.default.createElement("br", null),
@@ -429,7 +438,7 @@ var Layout = function () {
429
438
  console.log("onchange", val);
430
439
  }, onComplete: function (val) {
431
440
  console.log("onComplete", val);
432
- }, pins: 6, title: "Please Verify Account", description: "Enter the six digit code we sent to your email address to verify" }),
441
+ }, 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" } }),
433
442
  react_2.default.createElement("br", null),
434
443
  react_2.default.createElement(Button_1.default, { label: "DrawerButton", onClick: handleOnclick3, width: 250, variant: "solid" }),
435
444
  react_2.default.createElement(Drawer_1.default, { isOpen: drawerOpen, onClose: handleOnclick4, size: "xl" },
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pixelize-design-library",
3
- "version": "1.0.41",
3
+ "version": "1.0.43",
4
4
  "private": false,
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.js",