pixelize-design-library 1.1.30 → 1.1.32

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 (24) hide show
  1. package/dist/Components/ButtonGroupIcon/ButtonGoupIconProps.d.ts +1 -0
  2. package/dist/Components/ButtonGroupIcon/ButtonGroupIcon.d.ts +1 -1
  3. package/dist/Components/ButtonGroupIcon/ButtonGroupIcon.js +4 -4
  4. package/dist/Components/DatePicker/DatePicker.js +1 -1
  5. package/dist/Components/EmailCards/VerifyEmailOtp/VerifyEmailOtp.d.ts +1 -1
  6. package/dist/Components/EmailCards/VerifyEmailOtp/VerifyEmailOtp.js +2 -2
  7. package/dist/Components/EmailCards/VerifyEmailOtp/VerifyEmailOtpProps.d.ts +1 -1
  8. package/dist/Components/MultiSelect/MultiSelect.d.ts +1 -1
  9. package/dist/Components/MultiSelect/MultiSelect.js +34 -5
  10. package/dist/Components/MultiSelect/MultiSelectProps.d.ts +12 -0
  11. package/dist/Components/NoteTextArea/NoteTextArea.d.ts +1 -1
  12. package/dist/Components/NoteTextArea/NoteTextArea.js +37 -13
  13. package/dist/Components/NoteTextArea/NoteTextAreaProps.d.ts +1 -0
  14. package/dist/Components/SelectSearch/SelectSearch.d.ts +1 -1
  15. package/dist/Components/SelectSearch/SelectSearch.js +10 -8
  16. package/dist/Components/SelectSearch/SelectSearchProps.d.ts +1 -1
  17. package/dist/Components/Switch/Switch.js +1 -1
  18. package/dist/Pages/selectSearch.js +3 -5
  19. package/dist/Pages/verifyEmail.js +1 -1
  20. package/dist/Theme/Default/fonts.d.ts +35 -0
  21. package/dist/Theme/Default/fonts.js +37 -0
  22. package/package.json +1 -1
  23. package/dist/Pages/katable.d.ts +0 -3
  24. package/dist/Pages/katable.js +0 -194
package/dist/Components/ButtonGroupIcon/ButtonGoupIconProps.d.ts CHANGED
@@ -28,4 +28,5 @@ export type ButtonGroupIconProps = {
28
28
  rightIconDropdown?: boolean;
29
29
  menulistStyle?: React.CSSProperties;
30
30
  menuItemStyle?: React.CSSProperties;
31
+ isLoading?: boolean;
31
32
  };
package/dist/Components/ButtonGroupIcon/ButtonGroupIcon.d.ts CHANGED
@@ -2,4 +2,4 @@ import React from "react";
2
2
  import { ButtonGroupIconProps } from "./ButtonGoupIconProps";
3
3
  export default function ButtonGroupIcon({ leftIcon, rightIcon, onLeftIconClick, onRightIconClick, buttonText, onButtonClick, onButtongroupClick, size, variant, color, buttonGroupStyle, buttonGroupLeftIconStyle, buttonGroupRightIconStyle, buttonStyle, onBlurLeftIcon, onBlurRightIcon, dropdownOptions, // New prop for dropdown options
4
4
  onDropdownOptionClick, // New prop to handle option clicks
5
- rightIconDropdown, menulistStyle, menuItemStyle }: ButtonGroupIconProps): React.JSX.Element;
5
+ rightIconDropdown, menulistStyle, menuItemStyle, isLoading, }: ButtonGroupIconProps): React.JSX.Element;
package/dist/Components/ButtonGroupIcon/ButtonGroupIcon.js CHANGED
@@ -29,7 +29,7 @@ var useCustomTheme_1 = require("../../Theme/useCustomTheme");
29
29
  function ButtonGroupIcon(_a) {
30
30
  var leftIcon = _a.leftIcon, rightIcon = _a.rightIcon, onLeftIconClick = _a.onLeftIconClick, onRightIconClick = _a.onRightIconClick, buttonText = _a.buttonText, onButtonClick = _a.onButtonClick, onButtongroupClick = _a.onButtongroupClick, size = _a.size, variant = _a.variant, color = _a.color, buttonGroupStyle = _a.buttonGroupStyle, buttonGroupLeftIconStyle = _a.buttonGroupLeftIconStyle, buttonGroupRightIconStyle = _a.buttonGroupRightIconStyle, buttonStyle = _a.buttonStyle, onBlurLeftIcon = _a.onBlurLeftIcon, onBlurRightIcon = _a.onBlurRightIcon, dropdownOptions = _a.dropdownOptions, // New prop for dropdown options
31
31
  onDropdownOptionClick = _a.onDropdownOptionClick, // New prop to handle option clicks
32
- rightIconDropdown = _a.rightIconDropdown, menulistStyle = _a.menulistStyle, menuItemStyle = _a.menuItemStyle;
32
+ rightIconDropdown = _a.rightIconDropdown, menulistStyle = _a.menulistStyle, menuItemStyle = _a.menuItemStyle, isLoading = _a.isLoading;
33
33
  var theme = (0, useCustomTheme_1.useCustomTheme)();
34
34
  var _b = (0, react_1.useState)(false), isDropdownOpen = _b[0], setIsDropdownOpen = _b[1];
35
35
  var handleRightIconClick = function () {
@@ -52,7 +52,7 @@ function ButtonGroupIcon(_a) {
52
52
  backgroundColor: theme.colors.primary[400],
53
53
  },
54
54
  } })),
55
- react_1.default.createElement(react_2.Button, { onClick: onButtonClick, style: buttonStyle, sx: {
55
+ react_1.default.createElement(react_2.Button, { onClick: onButtonClick, style: buttonStyle, isLoading: isLoading, sx: {
56
56
  backgroundColor: theme.colors.primary[500],
57
57
  "&:hover": {
58
58
  backgroundColor: theme.colors.primary[400],
@@ -68,11 +68,11 @@ function ButtonGroupIcon(_a) {
68
68
  react_1.default.createElement(react_2.Portal, null,
69
69
  react_1.default.createElement(react_2.MenuList, { style: menulistStyle }, dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions.map(function (option, index) { return (react_1.default.createElement(react_2.MenuItem, { key: index, onClick: function (event) { return handleMenuClick(event, option); }, style: menuItemStyle }, option === null || option === void 0 ? void 0 :
70
70
  option.image,
71
- option.label)); }))))) : rightIcon && (react_1.default.createElement(react_2.IconButton, { "aria-label": "Right icon button", icon: rightIcon, onClick: onRightIconClick, onBlur: onBlurRightIcon, style: buttonGroupRightIconStyle, sx: {
71
+ option.label)); }))))) : (rightIcon && (react_1.default.createElement(react_2.IconButton, { "aria-label": "Right icon button", icon: rightIcon, onClick: onRightIconClick, onBlur: onBlurRightIcon, style: buttonGroupRightIconStyle, sx: {
72
72
  backgroundColor: theme.colors.primary[500],
73
73
  "&:hover": {
74
74
  backgroundColor: theme.colors.primary[400],
75
75
  },
76
- } }))));
76
+ } })))));
77
77
  }
78
78
  exports.default = ButtonGroupIcon;
package/dist/Components/DatePicker/DatePicker.js CHANGED
@@ -16,7 +16,7 @@ var FormLabel_1 = require("../Common/FormLabel");
16
16
  var ErrorMessage_1 = __importDefault(require("../Common/ErrorMessage"));
17
17
  var HelperText_1 = __importDefault(require("../Common/HelperText"));
18
18
  var useCustomTheme_1 = require("../../Theme/useCustomTheme");
19
- var DatePickerContainer = styled_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n border-radius: 5px;\n font-family: Arial, sans-serif;\n font-size: 16px;\n color: #333;\n .react-datepicker-wrapper {\n width: 100%;\n }\n .react-datepicker__input-container input {\n width: 100%;\n padding: 8px;\n border: none;\n border-radius: 5px;\n box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);\n }\n .react-datepicker__input-container input:focus {\n outline: none;\n box-shadow: 0 0 5px rgb(49 130 206);\n }\n .react-datepicker__day--selected {\n background-color: ", " !important;\n color: white !important;\n }\n .react-datepicker__day--keyboard-selected {\n background-color: #66bb6a !important;\n color: white !important;\n }\n"], ["\n border-radius: 5px;\n font-family: Arial, sans-serif;\n font-size: 16px;\n color: #333;\n .react-datepicker-wrapper {\n width: 100%;\n }\n .react-datepicker__input-container input {\n width: 100%;\n padding: 8px;\n border: none;\n border-radius: 5px;\n box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);\n }\n .react-datepicker__input-container input:focus {\n outline: none;\n box-shadow: 0 0 5px rgb(49 130 206);\n }\n .react-datepicker__day--selected {\n background-color: ", " !important;\n color: white !important;\n }\n .react-datepicker__day--keyboard-selected {\n background-color: #66bb6a !important;\n color: white !important;\n }\n"])), function (props) { return props.theme.colors.primary[500]; });
19
+ var DatePickerContainer = styled_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n border-radius: 5px;\n font-family: Arial, sans-serif;\n font-size: 16px;\n color: #333;\n .react-datepicker-wrapper {\n width: 100%;\n }\n .react-datepicker__input-container input {\n width: 100%;\n padding: 8px;\n border: none;\n border-radius: 5px;\n box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);\n font-size: 14px;\n }\n .react-datepicker__input-container input:focus {\n outline: none;\n box-shadow: 0 0 5px rgb(49 130 206);\n }\n .react-datepicker__day--selected {\n background-color: ", " !important;\n color: white !important;\n }\n .react-datepicker__day--keyboard-selected {\n background-color: #66bb6a !important;\n color: white !important;\n }\n"], ["\n border-radius: 5px;\n font-family: Arial, sans-serif;\n font-size: 16px;\n color: #333;\n .react-datepicker-wrapper {\n width: 100%;\n }\n .react-datepicker__input-container input {\n width: 100%;\n padding: 8px;\n border: none;\n border-radius: 5px;\n box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);\n font-size: 14px;\n }\n .react-datepicker__input-container input:focus {\n outline: none;\n box-shadow: 0 0 5px rgb(49 130 206);\n }\n .react-datepicker__day--selected {\n background-color: ", " !important;\n color: white !important;\n }\n .react-datepicker__day--keyboard-selected {\n background-color: #66bb6a !important;\n color: white !important;\n }\n"])), function (props) { return props.theme.colors.primary[500]; });
20
20
  // const Label = styled.label`
21
21
  // display: block;
22
22
  // margin-bottom: 5px;
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, styles, }: VerifyEmailOtpProps): React.JSX.Element;
3
+ export default function VerifyEmailOtp({ resendMail, onChange, onComplete, placeholder, pins, description, title, isDisabled, isInvalid, styles, }: VerifyEmailOtpProps): React.JSX.Element;
package/dist/Components/EmailCards/VerifyEmailOtp/VerifyEmailOtp.js CHANGED
@@ -8,7 +8,7 @@ var react_2 = require("@chakra-ui/react");
8
8
  var lu_1 = require("react-icons/lu");
9
9
  var useCustomTheme_1 = require("../../../Theme/useCustomTheme");
10
10
  function VerifyEmailOtp(_a) {
11
- 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
+ var resendMail = _a.resendMail, 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;
12
12
  var theme = (0, useCustomTheme_1.useCustomTheme)();
13
13
  return (react_1.default.createElement("div", { style: styles },
14
14
  react_1.default.createElement("div", { style: {
@@ -31,7 +31,7 @@ function VerifyEmailOtp(_a) {
31
31
  react_1.default.createElement("p", { style: { textAlign: "center", marginBottom: "2%" } },
32
32
  "Didn't receive the code?",
33
33
  " ",
34
- react_1.default.createElement("button", { onClick: function () { return resendMaill(); }, style: {
34
+ react_1.default.createElement("button", { onClick: function () { return resendMail(); }, style: {
35
35
  background: "none",
36
36
  color: theme.colors.primary[700],
37
37
  border: "none",
package/dist/Components/EmailCards/VerifyEmailOtp/VerifyEmailOtpProps.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  /// <reference types="react" />
2
2
  export type VerifyEmailOtpProps = {
3
- resendMaill: () => void;
3
+ resendMail: () => void;
4
4
  onChange: (value: string) => void;
5
5
  onComplete: (value: string) => void;
6
6
  placeholder?: string;
package/dist/Components/MultiSelect/MultiSelect.d.ts CHANGED
@@ -1,3 +1,3 @@
1
1
  import React from "react";
2
2
  import { MultiSelectProps } from "./MultiSelectProps";
3
- export default function MultiSelect({ value, onValueChange, }: MultiSelectProps): React.JSX.Element;
3
+ export default function MultiSelect({ value, onValueChange, width, label, isRequired, isInformation, informationMessage, name, id, placeholderText, isDisabled, isReadOnly, size, inputStyle, }: MultiSelectProps): React.JSX.Element;
package/dist/Components/MultiSelect/MultiSelect.js CHANGED
@@ -1,4 +1,15 @@
1
1
  "use strict";
2
+ var __assign = (this && this.__assign) || function () {
3
+ __assign = Object.assign || function(t) {
4
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
5
+ s = arguments[i];
6
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
7
+ t[p] = s[p];
8
+ }
9
+ return t;
10
+ };
11
+ return __assign.apply(this, arguments);
12
+ };
2
13
  var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
14
  if (k2 === undefined) k2 = k;
4
15
  var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -34,6 +45,8 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
34
45
  Object.defineProperty(exports, "__esModule", { value: true });
35
46
  var react_1 = __importStar(require("react"));
36
47
  var react_2 = require("@chakra-ui/react");
48
+ var FormLabel_1 = require("../Common/FormLabel");
49
+ var useCustomTheme_1 = require("../../Theme/useCustomTheme");
37
50
  var generateUniqueId = (function () {
38
51
  var counter = 0;
39
52
  return function () {
@@ -42,18 +55,32 @@ var generateUniqueId = (function () {
42
55
  };
43
56
  })();
44
57
  function MultiSelect(_a) {
45
- var value = _a.value, onValueChange = _a.onValueChange;
46
- var _b = (0, react_1.useState)(value), options = _b[0], setOptions = _b[1];
47
- var _c = (0, react_1.useState)(""), inputValue = _c[0], setInputValue = _c[1];
58
+ var value = _a.value, onValueChange = _a.onValueChange, _b = _a.width, width = _b === void 0 ? "100%" : _b, _c = _a.label, label = _c === void 0 ? "label" : _c, _d = _a.isRequired, isRequired = _d === void 0 ? true : _d, _e = _a.isInformation, isInformation = _e === void 0 ? false : _e, _f = _a.informationMessage, informationMessage = _f === void 0 ? "" : _f, name = _a.name, id = _a.id, _g = _a.placeholderText, placeholderText = _g === void 0 ? "Type valid email and press enter" : _g, isDisabled = _a.isDisabled, isReadOnly = _a.isReadOnly, size = _a.size, inputStyle = _a.inputStyle;
59
+ var theme = (0, useCustomTheme_1.useCustomTheme)();
60
+ var getPadding = function () {
61
+ return "0.5rem";
62
+ };
63
+ var _h = (0, react_1.useState)(value), options = _h[0], setOptions = _h[1];
64
+ var _j = (0, react_1.useState)(""), inputValue = _j[0], setInputValue = _j[1];
65
+ var _k = (0, react_1.useState)(""), error = _k[0], setError = _k[1];
48
66
  var inputRef = (0, react_1.useRef)(null);
49
67
  (0, react_1.useEffect)(function () {
50
68
  setOptions(value);
51
69
  }, [value]);
52
70
  var handleInputChange = function (e) {
53
71
  setInputValue(e.target.value);
72
+ setError("");
73
+ };
74
+ var validateEmail = function (email) {
75
+ var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
76
+ return emailRegex.test(email);
54
77
  };
55
78
  var handleKeyDown = function (e) {
56
79
  if (e.key === "Enter" && inputValue.trim() !== "") {
80
+ if (!validateEmail(inputValue)) {
81
+ setError("Invalid email address");
82
+ return;
83
+ }
57
84
  var existingOption = options.find(function (option) { return option.label === inputValue; });
58
85
  if (!existingOption) {
59
86
  var newOption = { id: generateUniqueId(), label: inputValue };
@@ -77,10 +104,12 @@ function MultiSelect(_a) {
77
104
  setOptions(updatedOptions);
78
105
  onValueChange(updatedOptions);
79
106
  };
80
- return (react_1.default.createElement(react_2.Box, { width: "100%", borderRadius: "md", padding: "2", backgroundColor: "white" },
107
+ return (react_1.default.createElement(react_2.Box, { width: width, borderRadius: "md", padding: "2", backgroundColor: "white" },
108
+ label && (react_1.default.createElement(FormLabel_1.TextLabel, { label: label, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })),
81
109
  react_1.default.createElement(react_2.Flex, { wrap: "wrap", gap: 2 }, options.map(function (option) { return (react_1.default.createElement(react_2.Tag, { key: option.id, size: "md", variant: "solid", colorScheme: "gray" },
82
110
  react_1.default.createElement(react_2.TagLabel, null, option.label),
83
111
  react_1.default.createElement(react_2.TagCloseButton, { onClick: function () { return handleRemove(option); } }))); })),
84
- react_1.default.createElement(react_2.Input, { ref: inputRef, type: "text", value: inputValue, onChange: handleInputChange, onKeyDown: handleKeyDown, placeholder: "Type and press enter", marginTop: 2, marginLeft: 1 })));
112
+ react_1.default.createElement(react_2.Input, { ref: inputRef, type: "text", value: inputValue, isDisabled: isDisabled, isReadOnly: isReadOnly, id: id, name: name, size: size, style: __assign(__assign({}, inputStyle), { backgroundColor: theme.colors.backgroundColor.light, fontWeight: 600, color: theme.colors.gray[600], padding: getPadding(), fontSize: 15, letterSpacing: 0.7, borderRadius: "0.125rem" }), onChange: handleInputChange, onKeyDown: handleKeyDown, placeholder: placeholderText, marginTop: 2, marginLeft: 1 }),
113
+ error && (react_1.default.createElement(react_2.Text, { color: "red.500", marginTop: 2, marginLeft: 1 }, error))));
85
114
  }
86
115
  exports.default = MultiSelect;
package/dist/Components/MultiSelect/MultiSelectProps.d.ts CHANGED
@@ -1,6 +1,18 @@
1
1
  export type MultiSelectProps = {
2
2
  value: MultiSelctOPtions[];
3
3
  onValueChange: (options: MultiSelctOPtions[]) => void;
4
+ width?: string;
5
+ label?: string;
6
+ id?: string;
7
+ name?: string;
8
+ isRequired?: boolean;
9
+ isInformation?: boolean;
10
+ informationMessage?: string;
11
+ placeholderText?: string;
12
+ isDisabled?: boolean;
13
+ isReadOnly?: boolean;
14
+ size?: string;
15
+ inputStyle?: {};
4
16
  };
5
17
  export type MultiSelctOPtions = {
6
18
  id: string;
package/dist/Components/NoteTextArea/NoteTextArea.d.ts CHANGED
@@ -1,3 +1,3 @@
1
1
  import React from "react";
2
2
  import { NoteTextAreaProps } from "./NoteTextAreaProps";
3
- export default function NoteTextArea({ width, handleSubmit, handleCancel, value, title, file, isEditable, saveButtonLoading, maxFileSize, maxFilesSizeError, }: NoteTextAreaProps): React.JSX.Element;
3
+ export default function NoteTextArea({ width, handleSubmit, handleCancel, value, title, file, isEditable, saveButtonLoading, maxFileSize, maxFilesSizeError, maxNoteWordCount, }: NoteTextAreaProps): React.JSX.Element;
package/dist/Components/NoteTextArea/NoteTextArea.js CHANGED
@@ -70,16 +70,22 @@ var FileUploadLabel = styled_1.default.label(templateObject_6 || (templateObject
70
70
  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"])));
71
71
  var Button = styled_1.default.button(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n border: none;\n padding: 3px 15px;\n text-align: center;\n text-decoration: none;\n background: ", ";\n color: ", ";\n font-size: 1rem;\n margin-right: 5px;\n border-radius: 5px;\n opacity: ", ";\n cursor: ", ";\n pointer-events: ", ";\n"], ["\n border: none;\n padding: 3px 15px;\n text-align: center;\n text-decoration: none;\n background: ", ";\n color: ", ";\n font-size: 1rem;\n margin-right: 5px;\n border-radius: 5px;\n opacity: ", ";\n cursor: ", ";\n pointer-events: ", ";\n"])), function (_a) {
72
72
  var isSaveButton = _a.isSaveButton, noteValue = _a.noteValue, isLoading = _a.isLoading, theme = _a.theme;
73
- return isSaveButton ? (noteValue && !isLoading ? theme.colors.primary[500] : theme.colors.primary[500]) : "white";
73
+ return isSaveButton
74
+ ? noteValue && !isLoading
75
+ ? theme.colors.primary[500]
76
+ : theme.colors.primary[500]
77
+ : "white";
74
78
  }, function (_a) {
75
79
  var isSaveButton = _a.isSaveButton, isLoading = _a.isLoading;
76
80
  return isSaveButton && !isLoading ? "white" : "white";
77
81
  }, function (_a) {
78
- var isSaveButton = _a.isSaveButton, noteValue = _a.noteValue, isLoading = _a.isLoading;
79
- return isSaveButton && (!noteValue || isLoading) ? "0.5" : "1";
82
+ var isSaveButton = _a.isSaveButton, noteValue = _a.noteValue, isLoading = _a.isLoading, disabled = _a.disabled;
83
+ return isSaveButton && (!noteValue || isLoading || disabled) ? "0.5" : "1";
80
84
  }, function (_a) {
81
- var isSaveButton = _a.isSaveButton, noteValue = _a.noteValue, isLoading = _a.isLoading;
82
- return isSaveButton && (!noteValue || isLoading) ? "initial" : "pointer";
85
+ var isSaveButton = _a.isSaveButton, noteValue = _a.noteValue, isLoading = _a.isLoading, disabled = _a.disabled;
86
+ return isSaveButton && (!noteValue || isLoading || disabled)
87
+ ? "initial"
88
+ : "pointer";
83
89
  }, function (_a) {
84
90
  var isLoading = _a.isLoading;
85
91
  return (isLoading ? "none" : "auto");
@@ -88,16 +94,28 @@ var CancelButton = styled_1.default.button(templateObject_9 || (templateObject_9
88
94
  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"])));
89
95
  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"])));
90
96
  var ErrorText = styled_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n color: #ff0000;\n font-size: 0.8rem;\n margin-top: 8px;\n"], ["\n color: #ff0000;\n font-size: 0.8rem;\n margin-top: 8px;\n"])));
97
+ var countWords = function (text) {
98
+ return text.trim().split(/\s+/).length;
99
+ };
91
100
  function NoteTextArea(_a) {
92
- var _b = _a.width, width = _b === void 0 ? "100%" : _b, handleSubmit = _a.handleSubmit, handleCancel = _a.handleCancel, value = _a.value, title = _a.title, file = _a.file, _c = _a.isEditable, isEditable = _c === void 0 ? false : _c, saveButtonLoading = _a.saveButtonLoading, _d = _a.maxFileSize, maxFileSize = _d === void 0 ? 1 * 1024 * 1024 : _d, _e = _a.maxFilesSizeError, maxFilesSizeError = _e === void 0 ? "Some files are too large. Maximum allowed size is" : _e;
101
+ var _b = _a.width, width = _b === void 0 ? "100%" : _b, handleSubmit = _a.handleSubmit, handleCancel = _a.handleCancel, value = _a.value, title = _a.title, file = _a.file, _c = _a.isEditable, isEditable = _c === void 0 ? false : _c, saveButtonLoading = _a.saveButtonLoading, _d = _a.maxFileSize, maxFileSize = _d === void 0 ? 1 * 1024 * 1024 : _d, _e = _a.maxFilesSizeError, maxFilesSizeError = _e === void 0 ? "Some files are too large. Maximum allowed size is" : _e, _f = _a.maxNoteWordCount, maxNoteWordCount = _f === void 0 ? 15 : _f;
93
102
  var theme = (0, useCustomTheme_1.useCustomTheme)();
94
103
  var noteAreaRef = (0, react_1.useRef)(null);
95
- var _f = (0, react_1.useState)(false), isActive = _f[0], setIsActive = _f[1];
96
- var _g = (0, react_1.useState)(""), noteValue = _g[0], setNoteValue = _g[1];
97
- var _h = (0, react_1.useState)(""), titleValue = _h[0], setTitleValue = _h[1];
98
- var _j = (0, react_1.useState)(false), titleShow = _j[0], setTitleShow = _j[1];
99
- var _k = (0, react_1.useState)([]), files = _k[0], setFiles = _k[1];
100
- var _l = (0, react_1.useState)(""), fileError = _l[0], setFileError = _l[1];
104
+ var _g = (0, react_1.useState)(false), isActive = _g[0], setIsActive = _g[1];
105
+ var _h = (0, react_1.useState)(""), noteValue = _h[0], setNoteValue = _h[1];
106
+ var _j = (0, react_1.useState)(""), titleValue = _j[0], setTitleValue = _j[1];
107
+ var _k = (0, react_1.useState)(false), titleShow = _k[0], setTitleShow = _k[1];
108
+ var _l = (0, react_1.useState)([]), files = _l[0], setFiles = _l[1];
109
+ var _m = (0, react_1.useState)(""), fileError = _m[0], setFileError = _m[1];
110
+ var _o = (0, react_1.useState)(false), isSaveDisabled = _o[0], setIsSaveDisabled = _o[1];
111
+ (0, react_1.useEffect)(function () {
112
+ var titleWordCount = countWords(titleValue);
113
+ setIsSaveDisabled(titleWordCount > maxNoteWordCount);
114
+ }, [titleValue, maxNoteWordCount]);
115
+ (0, react_1.useEffect)(function () {
116
+ var noteWordCount = countWords(noteValue);
117
+ setIsSaveDisabled(noteWordCount > maxNoteWordCount);
118
+ }, [noteValue, maxNoteWordCount]);
101
119
  (0, react_1.useEffect)(function () {
102
120
  if (isEditable) {
103
121
  setIsActive(true);
@@ -228,13 +246,19 @@ function NoteTextArea(_a) {
228
246
  react_1.default.createElement(AddTitleButton, { onClick: handleSetTitle }, "Add a Title"))),
229
247
  react_1.default.createElement("div", { style: { marginLeft: "auto" } },
230
248
  react_1.default.createElement(CancelButton, { onClick: handleCloseTextArea }, "Cancel"),
231
- react_1.default.createElement(Button, { isSaveButton: true, noteValue: noteValue, disabled: !noteValue, isLoading: saveButtonLoading, theme: theme, onClick: function () {
249
+ react_1.default.createElement(Button, { isSaveButton: true, noteValue: noteValue, isLoading: saveButtonLoading, disabled: !noteValue || isSaveDisabled, theme: theme, onClick: function () {
232
250
  handleSubmit(noteValue, titleValue, files);
233
251
  // handleCloseTextArea();
234
252
  } },
235
253
  saveButtonLoading && (react_1.default.createElement("span", { style: { marginRight: "6px" } },
236
254
  react_1.default.createElement(react_2.Spinner, { thickness: "2px", speed: "0.75s", emptyColor: "gray.200", color: "blue.500", size: "xs" }))),
237
255
  "Save"))),
256
+ react_1.default.createElement("div", { style: { display: "flex", gap: "10px" } },
257
+ react_1.default.createElement("div", null, "Note:"),
258
+ react_1.default.createElement("div", null,
259
+ "You can add up to ",
260
+ maxNoteWordCount,
261
+ " words only")),
238
262
  fileError && react_1.default.createElement(ErrorText, null, fileError),
239
263
  " ",
240
264
  files.length > 0 && (react_1.default.createElement("div", null, files.map(function (item, index) { return (react_1.default.createElement(FileViewer, { key: index },
package/dist/Components/NoteTextArea/NoteTextAreaProps.d.ts CHANGED
@@ -9,4 +9,5 @@ export type NoteTextAreaProps = {
9
9
  saveButtonLoading: boolean;
10
10
  maxFileSize?: number;
11
11
  maxFilesSizeError?: string;
12
+ maxNoteWordCount?: number;
12
13
  };
package/dist/Components/SelectSearch/SelectSearch.d.ts CHANGED
@@ -1,3 +1,3 @@
1
1
  import React from "react";
2
2
  import { SelectSearchProps } from "./SelectSearchProps";
3
- export default function SelectSearch({ options, initialSelectedOption, onOptionSelect, inputOnchange, id, name, label, inputStyle, dropdownStyle, isOptionLoading, loadingText, boxStyle, placeholder, searchQuery, isInformation, informationMessage, rightIcon, rightElementStyle, isMultipleSelect, isRequired, onOptionMultiSelect, }: Readonly<SelectSearchProps>): React.JSX.Element;
3
+ export default function SelectSearch({ options, initialSelectedOption, onOptionSelect, inputOnchange, id, name, label, dropdownStyle, inputStyle, isOptionLoading, loadingText, boxStyle, placeholder, searchQuery, isInformation, informationMessage, rightIcon, rightElementStyle, isMultipleSelect, isRequired, onOptionMultiSelect, }: Readonly<SelectSearchProps>): React.JSX.Element;
package/dist/Components/SelectSearch/SelectSearch.js CHANGED
@@ -313,17 +313,17 @@ var RenderOptions = function (_a) {
313
313
  return (react_1.default.createElement(react_2.Text, { px: 4, py: 2, color: "gray.500" }, "No options found"));
314
314
  };
315
315
  function SelectSearch(_a) {
316
- var options = _a.options, initialSelectedOption = _a.initialSelectedOption, onOptionSelect = _a.onOptionSelect, inputOnchange = _a.inputOnchange, id = _a.id, name = _a.name, label = _a.label, inputStyle = _a.inputStyle, dropdownStyle = _a.dropdownStyle, isOptionLoading = _a.isOptionLoading, _b = _a.loadingText, loadingText = _b === void 0 ? "loading" : _b, boxStyle = _a.boxStyle, _c = _a.placeholder, placeholder = _c === void 0 ? "Select Option" : _c, _d = _a.searchQuery, searchQuery = _d === void 0 ? "" : _d, _e = _a.isInformation, isInformation = _e === void 0 ? false : _e, informationMessage = _a.informationMessage, rightIcon = _a.rightIcon, rightElementStyle = _a.rightElementStyle, isMultipleSelect = _a.isMultipleSelect, _f = _a.isRequired, isRequired = _f === void 0 ? false : _f, onOptionMultiSelect = _a.onOptionMultiSelect;
316
+ var options = _a.options, initialSelectedOption = _a.initialSelectedOption, onOptionSelect = _a.onOptionSelect, inputOnchange = _a.inputOnchange, id = _a.id, name = _a.name, label = _a.label, dropdownStyle = _a.dropdownStyle, inputStyle = _a.inputStyle, isOptionLoading = _a.isOptionLoading, _b = _a.loadingText, loadingText = _b === void 0 ? "loading" : _b, boxStyle = _a.boxStyle, _c = _a.placeholder, placeholder = _c === void 0 ? "Select Option" : _c, _d = _a.searchQuery, searchQuery = _d === void 0 ? null : _d, _e = _a.isInformation, isInformation = _e === void 0 ? false : _e, informationMessage = _a.informationMessage, rightIcon = _a.rightIcon, rightElementStyle = _a.rightElementStyle, _f = _a.isMultipleSelect, isMultipleSelect = _f === void 0 ? false : _f, _g = _a.isRequired, isRequired = _g === void 0 ? false : _g, onOptionMultiSelect = _a.onOptionMultiSelect;
317
317
  var theme = (0, useCustomTheme_1.useCustomTheme)();
318
- var _g = (0, react_1.useState)(initialSelectedOption ? [initialSelectedOption] : []), selectedOptions = _g[0], setSelectedOptions = _g[1];
319
- var _h = (0, react_1.useState)(searchQuery), inputValue = _h[0], setInputValue = _h[1];
320
- var _j = (0, react_1.useState)(false), isOpen = _j[0], setIsOpen = _j[1];
321
- var _k = (0, react_1.useState)("below"), position = _k[0], setPosition = _k[1];
318
+ var _h = (0, react_1.useState)(initialSelectedOption ? [initialSelectedOption] : []), selectedOptions = _h[0], setSelectedOptions = _h[1];
319
+ var _j = (0, react_1.useState)(searchQuery), inputValue = _j[0], setInputValue = _j[1];
320
+ var _k = (0, react_1.useState)(false), isOpen = _k[0], setIsOpen = _k[1];
321
+ var _l = (0, react_1.useState)("below"), position = _l[0], setPosition = _l[1];
322
322
  var inputRef = (0, react_1.useRef)(null);
323
323
  var dropdownRef = (0, react_1.useRef)(null);
324
324
  var filteredOptions = (0, react_1.useMemo)(function () {
325
325
  return options.filter(function (option) {
326
- return option.label.toLowerCase().includes(inputValue.toLowerCase());
326
+ return option.label.toLowerCase().includes((inputValue !== null && inputValue !== void 0 ? inputValue : "").toLowerCase());
327
327
  });
328
328
  }, [options, inputValue]);
329
329
  // const handleOptionClick = useCallback(
@@ -390,7 +390,9 @@ function SelectSearch(_a) {
390
390
  };
391
391
  var handleKeyDown = function (e) {
392
392
  if (e.key === "Enter") {
393
- var matchingOption = options.find(function (option) { return option.label.toLowerCase() === inputValue.toLowerCase(); });
393
+ var matchingOption = options.find(function (option) {
394
+ return option.label.toLowerCase() === (inputValue !== null && inputValue !== void 0 ? inputValue : "").toLowerCase();
395
+ });
394
396
  if (matchingOption) {
395
397
  handleOptionClick(matchingOption);
396
398
  }
@@ -437,7 +439,7 @@ function SelectSearch(_a) {
437
439
  react_1.default.createElement(react_2.TagLabel, { width: "50px" }, option.label),
438
440
  react_1.default.createElement(react_2.TagCloseButton, { onClick: function () { return handleRemoveOption(option); } }))); }))),
439
441
  react_1.default.createElement(react_2.InputGroup, null,
440
- react_1.default.createElement(react_2.Input, { ref: inputRef, variant: "flushed", value: inputValue, onClick: function () { return setIsOpen(true); }, onChange: function (e) { return handleInputChange(e.target.value); }, placeholder: placeholder, onKeyDown: handleKeyDown, id: id, name: name, cursor: "pointer", borderColor: "gray.300", _hover: { borderColor: "blue.500" }, _focus: { borderColor: "blue.500" }, style: __assign(__assign({}, inputStyle), { backgroundColor: theme.colors.backgroundColor.main, fontWeight: 800, color: theme.colors.gray[700], padding: "0 0.5rem", fontSize: 15, letterSpacing: 0.7 }) }),
442
+ react_1.default.createElement(react_2.Input, { ref: inputRef, variant: "flushed", value: inputValue ? inputValue : "", onClick: function () { return setIsOpen(true); }, onChange: function (e) { return handleInputChange(e.target.value); }, placeholder: placeholder, onKeyDown: handleKeyDown, id: id, name: name, cursor: "pointer", borderColor: "gray.300", _hover: { borderColor: "blue.500" }, _focus: { borderColor: "blue.500" }, style: __assign(__assign({}, inputStyle), { backgroundColor: theme.colors.backgroundColor.main, fontWeight: 800, color: theme.colors.gray[700], padding: "0 0.5rem", fontSize: 15, letterSpacing: 0.7 }) }),
441
443
  rightIcon && (react_1.default.createElement(react_2.InputRightElement, { pointerEvents: "none", children: rightIcon, style: __assign({}, rightElementStyle) }))),
442
444
  isOpen && (react_1.default.createElement(react_2.Box, { ref: dropdownRef, position: "absolute", top: position === "below" ? "100%" : "auto", bottom: position === "above" ? "100%" : "auto", left: 0, right: 0, border: "1px solid", borderColor: "gray.300", borderRadius: "md", bg: "white", maxHeight: "150px", overflowY: "auto", zIndex: 10 },
443
445
  react_1.default.createElement(RenderOptions, { isOptionLoading: isOptionLoading, filteredOptions: filteredOptions, loadingText: loadingText, handleOptionClick: handleOptionClick })))));
package/dist/Components/SelectSearch/SelectSearchProps.d.ts CHANGED
@@ -15,7 +15,7 @@ export type SelectSearchProps = {
15
15
  isOptionLoading?: boolean;
16
16
  loadingText?: string;
17
17
  placeholder?: string;
18
- searchQuery: string;
18
+ searchQuery: string | null;
19
19
  isInformation?: boolean;
20
20
  informationMessage?: string;
21
21
  rightIcon?: React.ReactNode;
package/dist/Components/Switch/Switch.js CHANGED
@@ -19,7 +19,7 @@ var Highlight = styled_1.default.div(templateObject_2 || (templateObject_2 = __m
19
19
  var SwitchList = styled_1.default.ul(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n list-style-type: none;\n margin: 0;\n padding: 1px;\n height: 100%;\n z-index: 1;\n"], ["\n display: flex;\n list-style-type: none;\n margin: 0;\n padding: 1px;\n height: 100%;\n z-index: 1;\n"])));
20
20
  var SwitchOption = styled_1.default.li(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n width: 110px;\n height: 100%;\n color: black;\n transition: color 0.3s ease;\n font-weight: 400;\n padding: 2px;\n ", "\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n width: 110px;\n height: 100%;\n color: black;\n transition: color 0.3s ease;\n font-weight: 400;\n padding: 2px;\n ", "\n"])), function (_a) {
21
21
  var isActive = _a.isActive;
22
- return isActive && (0, react_2.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n font-weight: 500;\n background-color: transparent;\n z-index: 1;\n "], ["\n font-weight: 500;\n background-color: transparent;\n z-index: 1;\n "])));
22
+ return isActive && (0, react_2.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n font-weight: 700;\n background-color: transparent;\n z-index: 1;\n "], ["\n font-weight: 700;\n background-color: transparent;\n z-index: 1;\n "])));
23
23
  });
24
24
  var SwitchContainerHeader = styled_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n background-color: white;\n height: auto;\n padding: 3px 3px 3px 3px;\n width: 200px;\n border-radius: 20px;\n border: 1px solid #e2e7ee;\n"], ["\n background-color: white;\n height: auto;\n padding: 3px 3px 3px 3px;\n width: 200px;\n border-radius: 20px;\n border: 1px solid #e2e7ee;\n"])));
25
25
  function Switch(_a) {
package/dist/Pages/selectSearch.js CHANGED
@@ -30,7 +30,7 @@ var react_1 = __importStar(require("react"));
30
30
  var SelectSearch_1 = __importDefault(require("../Components/SelectSearch/SelectSearch"));
31
31
  var fi_1 = require("react-icons/fi");
32
32
  var SelectSearchs = function () {
33
- var _a = (0, react_1.useState)("Option 1"), selectSearchText = _a[0], setSelectSearchText = _a[1];
33
+ var _a = (0, react_1.useState)(""), selectSearchText = _a[0], setSelectSearchText = _a[1];
34
34
  var _b = (0, react_1.useState)(), selectedOption = _b[0], setSelectedOption = _b[1];
35
35
  return (react_1.default.createElement("div", null,
36
36
  react_1.default.createElement(SelectSearch_1.default, { options: [
@@ -44,11 +44,9 @@ var SelectSearchs = function () {
44
44
  setSelectSearchText(value.toString());
45
45
  console.log(value);
46
46
  }, initialSelectedOption: { id: "1", label: "Option 1" }, onOptionSelect: function (data) {
47
- // setSelectSearchText(label);
48
- console.log("Selected option:", data);
49
- }, name: "hai", label: "SelectSearch", searchQuery: selectSearchText, rightIcon: react_1.default.createElement(fi_1.FiUser, { color: "gray.300" }), isMultipleSelect: true, onOptionMultiSelect: function (data) {
47
+ setSelectSearchText(data.label);
48
+ }, name: "hai", label: "SelectSearch", searchQuery: selectSearchText, rightIcon: react_1.default.createElement(fi_1.FiUser, { color: "gray.300" }), isMultipleSelect: false, onOptionMultiSelect: function (data) {
50
49
  setSelectedOption(data);
51
- console.log("Selected option:", data);
52
50
  } })));
53
51
  };
54
52
  exports.default = SelectSearchs;
package/dist/Pages/verifyEmail.js CHANGED
@@ -7,7 +7,7 @@ var react_1 = __importDefault(require("react"));
7
7
  var VerifyEmailOtp_1 = __importDefault(require("../Components/EmailCards/VerifyEmailOtp/VerifyEmailOtp"));
8
8
  var VerifyEmailPage = function () {
9
9
  return (react_1.default.createElement("div", null,
10
- react_1.default.createElement(VerifyEmailOtp_1.default, { resendMaill: function () {
10
+ react_1.default.createElement(VerifyEmailOtp_1.default, { resendMail: function () {
11
11
  console.log("hello");
12
12
  }, onChange: function (val) {
13
13
  console.log("onchange", val);
package/dist/Theme/Default/fonts.d.ts ADDED
@@ -0,0 +1,35 @@
1
+ import "@fontsource/ubuntu-sans";
2
+ declare const fontOptions: {
3
+ fonts: {
4
+ body: string;
5
+ heading: string;
6
+ mono: string;
7
+ };
8
+ fontSizes: {
9
+ xs: string;
10
+ sm: string;
11
+ md: string;
12
+ lg: string;
13
+ xl: string;
14
+ "2xl": string;
15
+ "3xl": string;
16
+ "4xl": string;
17
+ "5xl": string;
18
+ "6xl": string;
19
+ "7xl": string;
20
+ "8xl": string;
21
+ "9xl": string;
22
+ };
23
+ fontWeights: {
24
+ hairline: number;
25
+ thin: number;
26
+ light: number;
27
+ normal: number;
28
+ medium: number;
29
+ semibold: number;
30
+ bold: number;
31
+ extrabold: number;
32
+ black: number;
33
+ };
34
+ };
35
+ export default fontOptions;
package/dist/Theme/Default/fonts.js ADDED
@@ -0,0 +1,37 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ require("@fontsource/ubuntu-sans");
4
+ var fontOptions = {
5
+ fonts: {
6
+ body: "Ubuntu Sans, serif",
7
+ heading: "Ubuntu Sans, serif",
8
+ mono: "Ubuntu Sans, monospace",
9
+ },
10
+ fontSizes: {
11
+ xs: "0.75rem",
12
+ sm: "0.875rem",
13
+ md: "1rem",
14
+ lg: "1.125rem",
15
+ xl: "1.25rem",
16
+ "2xl": "1.5rem",
17
+ "3xl": "1.875rem",
18
+ "4xl": "2.25rem",
19
+ "5xl": "3rem",
20
+ "6xl": "3.75rem",
21
+ "7xl": "4.5rem",
22
+ "8xl": "6rem",
23
+ "9xl": "8rem",
24
+ },
25
+ fontWeights: {
26
+ hairline: 100,
27
+ thin: 200,
28
+ light: 300,
29
+ normal: 400,
30
+ medium: 500,
31
+ semibold: 600,
32
+ bold: 700,
33
+ extrabold: 800,
34
+ black: 900,
35
+ },
36
+ };
37
+ exports.default = fontOptions;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pixelize-design-library",
3
- "version": "1.1.30",
3
+ "version": "1.1.32",
4
4
  "private": false,
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.js",
package/dist/Pages/katable.d.ts DELETED
@@ -1,3 +0,0 @@
1
- import React from "react";
2
- declare const katable: () => React.JSX.Element;
3
- export default katable;
package/dist/Pages/katable.js DELETED
@@ -1,194 +0,0 @@
1
- "use strict";
2
- var __assign = (this && this.__assign) || function () {
3
- __assign = Object.assign || function(t) {
4
- for (var s, i = 1, n = arguments.length; i < n; i++) {
5
- s = arguments[i];
6
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
7
- t[p] = s[p];
8
- }
9
- return t;
10
- };
11
- return __assign.apply(this, arguments);
12
- };
13
- var __importDefault = (this && this.__importDefault) || function (mod) {
14
- return (mod && mod.__esModule) ? mod : { "default": mod };
15
- };
16
- Object.defineProperty(exports, "__esModule", { value: true });
17
- var react_1 = __importDefault(require("react"));
18
- var KaTable_1 = __importDefault(require("../Components/KaTable/KaTable"));
19
- var KaTable_2 = require("../Components/KaTable/KaTable");
20
- var icons_1 = require("@chakra-ui/icons");
21
- var katable = function () {
22
- var DataType = KaTable_2.TableEnums.DataType;
23
- var dataArray = Array(50)
24
- .fill(undefined)
25
- .map(function (_, index) { return ({
26
- column1: index % 2 === 0,
27
- column2: "column:2 row:".concat(index + 1),
28
- column3: index + 5,
29
- column4: index + 10,
30
- column5: index + 15,
31
- column6: index + 20,
32
- column7: index + 25,
33
- column8: index + 30,
34
- column9: index + 35,
35
- column10: index + 40,
36
- column11: index + 45,
37
- column12: index + 50,
38
- column13: index + 55,
39
- column14: index + 60,
40
- column15: new Date(2022, 11, index),
41
- id: index + 1,
42
- }); });
43
- var columns = [
44
- {
45
- key: "column1",
46
- title: "Column 1",
47
- dataType: DataType.Boolean,
48
- width: 150,
49
- columnFreeze: true,
50
- customHeader: false,
51
- },
52
- {
53
- key: "column2",
54
- title: "Column 2",
55
- dataType: DataType.String,
56
- width: 150,
57
- },
58
- {
59
- key: "column3",
60
- title: "Column 3",
61
- dataType: DataType.Number,
62
- width: 150,
63
- },
64
- {
65
- key: "column4",
66
- title: "Column 4",
67
- dataType: DataType.Number,
68
- width: 150,
69
- },
70
- {
71
- key: "column5",
72
- title: "Column 5",
73
- dataType: DataType.Number,
74
- width: 150,
75
- },
76
- {
77
- key: "column6",
78
- title: "Column 6",
79
- dataType: DataType.Number,
80
- width: 150,
81
- },
82
- {
83
- key: "column7",
84
- title: "Column 7",
85
- dataType: DataType.Number,
86
- width: 150,
87
- },
88
- {
89
- key: "column8",
90
- title: "Column 8",
91
- dataType: DataType.Number,
92
- width: 150,
93
- },
94
- {
95
- key: "column9",
96
- title: "Column 9",
97
- dataType: DataType.Number,
98
- width: 150,
99
- },
100
- {
101
- key: "column10",
102
- title: "Column 10",
103
- dataType: DataType.Number,
104
- width: 150,
105
- },
106
- {
107
- key: "column11",
108
- title: "Column 11",
109
- dataType: DataType.Number,
110
- width: 150,
111
- },
112
- {
113
- key: "column12",
114
- title: "Column 12",
115
- dataType: DataType.Number,
116
- width: 150,
117
- },
118
- {
119
- key: "column13",
120
- title: "Column 13",
121
- dataType: DataType.Number,
122
- width: 150,
123
- },
124
- {
125
- key: "column14",
126
- title: "Column 14",
127
- dataType: DataType.Number,
128
- width: 150,
129
- },
130
- {
131
- key: "column15",
132
- title: "Column 15",
133
- dataType: DataType.Date,
134
- width: 150,
135
- },
136
- {
137
- key: "editColumn",
138
- width: 80,
139
- customHeader: false,
140
- },
141
- ];
142
- var kaTableFormat = function (props) {
143
- if (props.column.dataType === DataType.Date) {
144
- return (props.value &&
145
- props.value.toLocaleDateString("en", {
146
- month: "2-digit",
147
- day: "2-digit",
148
- year: "numeric",
149
- }));
150
- }
151
- };
152
- var EditButton = function (_a) {
153
- var dispatch = _a.dispatch, rowKeyValue = _a.rowKeyValue;
154
- return (react_1.default.createElement("div", { className: "edit-cell-button" },
155
- react_1.default.createElement(icons_1.EditIcon, null),
156
- react_1.default.createElement(icons_1.DeleteIcon, null)));
157
- };
158
- var handleSortChange = function (newSortState, columnName) {
159
- console.log("Sort state for ".concat(columnName, " changed to:"), newSortState);
160
- };
161
- var handleMenuItemClick = function (action, columnName) {
162
- console.log("Menu item clicked for ".concat(columnName, ":"), action);
163
- };
164
- var menuItems = [
165
- { label: "Sort", action: "Sort" },
166
- { label: "Hide column", action: "Hide column" },
167
- {
168
- label: "Filter",
169
- submenu: [
170
- { label: "Filter by Date", action: "Filter by Date" },
171
- { label: "Filter by Name", action: "Filter by Name" },
172
- { label: "Filter by Status", action: "Filter by Status" },
173
- ],
174
- },
175
- ];
176
- return (react_1.default.createElement("div", null,
177
- react_1.default.createElement(KaTable_1.default, { data: dataArray, columns: columns, checkSelect: true, onRowClick: function (rowKeyValue) {
178
- console.log("Row clicked", rowKeyValue);
179
- }, onSelectionChange: function (selectedRows) {
180
- console.log("Selected rows:", selectedRows);
181
- }, menuItems: menuItems, onSortChange: handleSortChange, onMenuItemClick: handleMenuItemClick, format: kaTableFormat, childComponents: {
182
- cellText: {
183
- content: function (props) {
184
- if (props.column.key === "editColumn") {
185
- return react_1.default.createElement(EditButton, __assign({}, props));
186
- }
187
- },
188
- },
189
- }, loading: {
190
- enabled: false,
191
- text: "Loading data",
192
- } })));
193
- };
194
- exports.default = katable;