pixelize-design-library 1.0.47 → 1.0.49
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/DatePicker/DatePicker.js +1 -1
- package/dist/Components/Dropdown/DropDown.js +5 -5
- package/dist/Components/NoteTextArea/NoteTextArea.d.ts +1 -1
- package/dist/Components/NoteTextArea/NoteTextArea.js +35 -26
- package/dist/Components/NoteTextArea/NoteTextAreaProps.d.ts +1 -0
- package/dist/Components/NoteTextArea/NoteTextAreaProps.js +0 -5
- package/dist/Components/Timeline/Timeline.d.ts +4 -0
- package/dist/Components/Timeline/Timeline.js +141 -0
- package/dist/Components/Timeline/TimelineProps.d.ts +9 -0
- package/dist/Components/Timeline/TimelineProps.js +2 -0
- package/dist/Layout.js +38 -9
- package/package.json +1 -1
|
@@ -11,7 +11,7 @@ var react_1 = __importDefault(require("react"));
|
|
|
11
11
|
var react_datepicker_1 = __importDefault(require("react-datepicker"));
|
|
12
12
|
require("react-datepicker/dist/react-datepicker.css");
|
|
13
13
|
var styled_1 = __importDefault(require("@emotion/styled"));
|
|
14
|
-
var DatePickerContainer = styled_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n border-radius: 5px;\n
|
|
14
|
+
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: #3182ce !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: #3182ce !important;\n color: white !important;\n }\n .react-datepicker__day--keyboard-selected {\n background-color: #66bb6a !important;\n color: white !important;\n }\n"])));
|
|
15
15
|
var Label = styled_1.default.label(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: block;\n margin-bottom: 5px;\n font-weight: bold;\n"], ["\n display: block;\n margin-bottom: 5px;\n font-weight: bold;\n"])));
|
|
16
16
|
function DatePicker(_a) {
|
|
17
17
|
var selectedDate = _a.selectedDate, onChange = _a.onChange, _b = _a.placeholderText, placeholderText = _b === void 0 ? "Select a date" : _b, _c = _a.dateFormat, dateFormat = _c === void 0 ? "MM/dd/yyyy" : _c, _d = _a.showTimeSelect, showTimeSelect = _d === void 0 ? false : _d, _e = _a.timeFormat, timeFormat = _e === void 0 ? "HH:mm aa" : _e, _f = _a.timeIntervals, timeIntervals = _f === void 0 ? 30 : _f, _g = _a.timeCaption, timeCaption = _g === void 0 ? "Time" : _g, dateTimeFormat = _a.dateTimeFormat, id = _a.id, name = _a.name, label = _a.label;
|
|
@@ -34,11 +34,11 @@ var react_1 = __importStar(require("react"));
|
|
|
34
34
|
var react_2 = require("react");
|
|
35
35
|
var styled_1 = __importDefault(require("@emotion/styled"));
|
|
36
36
|
var fi_1 = require("react-icons/fi");
|
|
37
|
-
var DropdownContainer = styled_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: relative;\n display: inline-block;\n"], ["\n position: relative;\n display: inline-block;\n"])));
|
|
38
|
-
var DropdownButton = styled_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n
|
|
39
|
-
var DropdownContent = styled_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: none;\n position: absolute;\n background-color: #f9f9f9;\n min-width:
|
|
40
|
-
var ListItem = styled_1.default.li(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n color: black;\n padding: 5px 10px;\n text-decoration: none;\n display: block;\n display: flex;\n
|
|
41
|
-
var ImageContainer = styled_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n display: flex;\n justify-content: center;\n align-items: center;\n margin-left: 0.5rem;\n"], ["\n display: flex;\n justify-content: center;\n align-items: center;\n margin-left: 0.5rem;\n"])));
|
|
37
|
+
var DropdownContainer = styled_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: relative;\n display: inline-block;\n font-size: 1rem;\n font-weight: 300;\n"], ["\n position: relative;\n display: inline-block;\n font-size: 1rem;\n font-weight: 300;\n"])));
|
|
38
|
+
var DropdownButton = styled_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n color: #000000;\n padding: 0.3rem 2rem;\n border: none;\n cursor: pointer;\n border: 1px solid #3182ce;\n min-width: 200px;\n &:hover {\n // background-color: #c9dff8;\n }\n"], ["\n display: flex;\n justify-content: space-between;\n align-items: center;\n color: #000000;\n padding: 0.3rem 2rem;\n border: none;\n cursor: pointer;\n border: 1px solid #3182ce;\n min-width: 200px;\n &:hover {\n // background-color: #c9dff8;\n }\n"])));
|
|
39
|
+
var DropdownContent = styled_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: none;\n position: absolute;\n background-color: #f9f9f9;\n border: 1px solid #3182ce;\n min-width: 200px;\n width: fit-content;\n box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);\n z-index: 5;\n top: 40px;\n &.show {\n display: block;\n }\n"], ["\n display: none;\n position: absolute;\n background-color: #f9f9f9;\n border: 1px solid #3182ce;\n min-width: 200px;\n width: fit-content;\n box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);\n z-index: 5;\n top: 40px;\n &.show {\n display: block;\n }\n"])));
|
|
40
|
+
var ListItem = styled_1.default.li(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n color: black;\n padding: 5px 10px;\n text-decoration: none;\n display: block;\n display: flex;\n cursor: pointer;\n align-items: center;\n &:hover {\n background-color: #f1f1f1;\n color: #3182ce;\n }\n"], ["\n color: black;\n padding: 5px 10px;\n text-decoration: none;\n display: block;\n display: flex;\n cursor: pointer;\n align-items: center;\n &:hover {\n background-color: #f1f1f1;\n color: #3182ce;\n }\n"])));
|
|
41
|
+
var ImageContainer = styled_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n display: flex;\n justify-content: center;\n align-items: center;\n margin-left: 0.5rem;\n color: #3182ce;\n"], ["\n display: flex;\n justify-content: center;\n align-items: center;\n margin-left: 0.5rem;\n color: #3182ce;\n"])));
|
|
42
42
|
var Dropdown = function (_a) {
|
|
43
43
|
var ButtonText = _a.ButtonText, options = _a.options, handleOptionSelect = _a.handleOptionSelect;
|
|
44
44
|
var _b = (0, react_2.useState)(false), isVisible = _b[0], setIsVisible = _b[1];
|
|
@@ -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, }: NoteTextAreaProps): React.JSX.Element;
|
|
3
|
+
export default function NoteTextArea({ width, handleSubmit, handleCancel, value, title, file, isEditable, saveButtonLoading, }: NoteTextAreaProps): React.JSX.Element;
|
|
@@ -42,6 +42,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
42
42
|
var react_1 = __importStar(require("react"));
|
|
43
43
|
var fi_1 = require("react-icons/fi");
|
|
44
44
|
var styled_1 = __importDefault(require("@emotion/styled"));
|
|
45
|
+
var react_2 = require("@chakra-ui/react");
|
|
45
46
|
var Container = styled_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n border: ", ";\n border-radius: 5px;\n box-shadow: ", ";\n"], ["\n border: ", ";\n border-radius: 5px;\n box-shadow: ", ";\n"])), function (_a) {
|
|
46
47
|
var isActive = _a.isActive;
|
|
47
48
|
return isActive ? "1px solid #3182ce" : "1px solid #c0c6cc";
|
|
@@ -66,24 +67,27 @@ var NotesTextArea = styled_1.default.textarea(templateObject_5 || (templateObjec
|
|
|
66
67
|
});
|
|
67
68
|
var FileUploadLabel = styled_1.default.label(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n cursor: pointer;\n"], ["\n cursor: pointer;\n"])));
|
|
68
69
|
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
|
|
70
|
-
var isSaveButton = _a.isSaveButton, noteValue = _a.noteValue;
|
|
71
|
-
return isSaveButton ? (noteValue ? "#3182ce" : "#3182ce") : "white";
|
|
70
|
+
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) {
|
|
71
|
+
var isSaveButton = _a.isSaveButton, noteValue = _a.noteValue, isLoading = _a.isLoading;
|
|
72
|
+
return isSaveButton ? (noteValue && !isLoading ? "#3182ce" : "#3182ce") : "white";
|
|
72
73
|
}, function (_a) {
|
|
73
|
-
var isSaveButton = _a.isSaveButton;
|
|
74
|
-
return
|
|
74
|
+
var isSaveButton = _a.isSaveButton, isLoading = _a.isLoading;
|
|
75
|
+
return isSaveButton && !isLoading ? "white" : "white";
|
|
75
76
|
}, function (_a) {
|
|
76
|
-
var isSaveButton = _a.isSaveButton, noteValue = _a.noteValue;
|
|
77
|
-
return isSaveButton && !noteValue ? "0.5" : "1";
|
|
77
|
+
var isSaveButton = _a.isSaveButton, noteValue = _a.noteValue, isLoading = _a.isLoading;
|
|
78
|
+
return isSaveButton && (!noteValue || isLoading) ? "0.5" : "1";
|
|
78
79
|
}, function (_a) {
|
|
79
|
-
var isSaveButton = _a.isSaveButton, noteValue = _a.noteValue;
|
|
80
|
-
return isSaveButton && !noteValue ? "initial" : "pointer";
|
|
80
|
+
var isSaveButton = _a.isSaveButton, noteValue = _a.noteValue, isLoading = _a.isLoading;
|
|
81
|
+
return isSaveButton && (!noteValue || isLoading) ? "initial" : "pointer";
|
|
82
|
+
}, function (_a) {
|
|
83
|
+
var isLoading = _a.isLoading;
|
|
84
|
+
return (isLoading ? "none" : "auto");
|
|
81
85
|
});
|
|
82
86
|
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
87
|
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
88
|
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
89
|
function NoteTextArea(_a) {
|
|
86
|
-
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;
|
|
90
|
+
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;
|
|
87
91
|
var noteAreaRef = (0, react_1.useRef)(null);
|
|
88
92
|
var _d = (0, react_1.useState)(false), isActive = _d[0], setIsActive = _d[1];
|
|
89
93
|
var _e = (0, react_1.useState)(""), noteValue = _e[0], setNoteValue = _e[1];
|
|
@@ -92,9 +96,9 @@ function NoteTextArea(_a) {
|
|
|
92
96
|
var _h = (0, react_1.useState)([]), files = _h[0], setFiles = _h[1];
|
|
93
97
|
(0, react_1.useEffect)(function () {
|
|
94
98
|
if (isEditable) {
|
|
99
|
+
setIsActive(true);
|
|
95
100
|
if (value) {
|
|
96
101
|
setNoteValue(value);
|
|
97
|
-
setIsActive(true);
|
|
98
102
|
}
|
|
99
103
|
if (title) {
|
|
100
104
|
setTitleValue(title);
|
|
@@ -105,6 +109,20 @@ function NoteTextArea(_a) {
|
|
|
105
109
|
}
|
|
106
110
|
}
|
|
107
111
|
}, [value, title, file, isEditable]);
|
|
112
|
+
(0, react_1.useEffect)(function () {
|
|
113
|
+
if (!saveButtonLoading) {
|
|
114
|
+
setIsActive(false);
|
|
115
|
+
if (!isEditable) {
|
|
116
|
+
setNoteValue("");
|
|
117
|
+
setTitleValue("");
|
|
118
|
+
setTitleShow(false);
|
|
119
|
+
setFiles([]);
|
|
120
|
+
}
|
|
121
|
+
}
|
|
122
|
+
if (isEditable) {
|
|
123
|
+
setIsActive(true);
|
|
124
|
+
}
|
|
125
|
+
}, [saveButtonLoading, isEditable]);
|
|
108
126
|
var handleTextArea = function () {
|
|
109
127
|
setIsActive(true);
|
|
110
128
|
if (!isEditable) {
|
|
@@ -126,18 +144,6 @@ function NoteTextArea(_a) {
|
|
|
126
144
|
setFiles([]);
|
|
127
145
|
}
|
|
128
146
|
};
|
|
129
|
-
// const resetState = () => {
|
|
130
|
-
// setIsActive(false);
|
|
131
|
-
// if (handleCancel) {
|
|
132
|
-
// handleCancel(false);
|
|
133
|
-
// }
|
|
134
|
-
// if (!isEditable) {
|
|
135
|
-
// setNoteValue("");
|
|
136
|
-
// setTitleValue("");
|
|
137
|
-
// setTitleShow(false);
|
|
138
|
-
// setFiles([]);
|
|
139
|
-
// }
|
|
140
|
-
// };
|
|
141
147
|
var handleNoteChange = function (event) {
|
|
142
148
|
setNoteValue(event.target.value);
|
|
143
149
|
adjustHeight();
|
|
@@ -209,10 +215,13 @@ function NoteTextArea(_a) {
|
|
|
209
215
|
react_1.default.createElement(AddTitleButton, { onClick: handleSetTitle }, "Add a Title"))),
|
|
210
216
|
react_1.default.createElement("div", { style: { marginLeft: "auto" } },
|
|
211
217
|
react_1.default.createElement(CancelButton, { onClick: handleCloseTextArea }, "Cancel"),
|
|
212
|
-
react_1.default.createElement(Button, { isSaveButton: true, noteValue: noteValue, disabled: !noteValue, onClick: function () {
|
|
218
|
+
react_1.default.createElement(Button, { isSaveButton: true, noteValue: noteValue, disabled: !noteValue, isLoading: saveButtonLoading, onClick: function () {
|
|
213
219
|
handleSubmit(noteValue, titleValue, files);
|
|
214
|
-
handleCloseTextArea();
|
|
215
|
-
} },
|
|
220
|
+
// handleCloseTextArea();
|
|
221
|
+
} },
|
|
222
|
+
saveButtonLoading && (react_1.default.createElement("span", { style: { marginRight: "6px" } },
|
|
223
|
+
react_1.default.createElement(react_2.Spinner, { thickness: "2px", speed: "0.75s", emptyColor: "gray.200", color: "blue.500", size: "xs" }))),
|
|
224
|
+
"Save"))),
|
|
216
225
|
files.length > 0 && (react_1.default.createElement("div", null, files.map(function (item, index) { return (react_1.default.createElement(FileViewer, { key: index },
|
|
217
226
|
react_1.default.createElement(react_1.default.Fragment, null,
|
|
218
227
|
react_1.default.createElement("span", null, shortenFileName(item.name)),
|
|
@@ -0,0 +1,141 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
|
|
3
|
+
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
|
|
4
|
+
return cooked;
|
|
5
|
+
};
|
|
6
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
7
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
8
|
+
};
|
|
9
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
10
|
+
var react_1 = __importDefault(require("react"));
|
|
11
|
+
var styled_1 = __importDefault(require("@emotion/styled"));
|
|
12
|
+
var TimelineContainer = styled_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: relative;\n padding: 24px;\n margin: 0 auto;\n width: 100%;\n max-width: 800px;\n"], ["\n position: relative;\n padding: 24px;\n margin: 0 auto;\n width: 100%;\n max-width: 800px;\n"])));
|
|
13
|
+
var Line = styled_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n position: absolute;\n left: 50%;\n top: 0;\n bottom: 0;\n width: 2px;\n background-color: #007bff;\n transform: translateX(-50%);\n"], ["\n position: absolute;\n left: 50%;\n top: 0;\n bottom: 0;\n width: 2px;\n background-color: #007bff;\n transform: translateX(-50%);\n"])));
|
|
14
|
+
var EventContainer = styled_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n justify-content: ", ";\n width: 100%;\n padding: 1rem 0 1rem 0;\n box-sizing: border-box;\n position: relative;\n margin-bottom: 24px;\n align-items: center; /* Center alignment for dot and event content */\n"], ["\n display: flex;\n justify-content: ", ";\n width: 100%;\n padding: 1rem 0 1rem 0;\n box-sizing: border-box;\n position: relative;\n margin-bottom: 24px;\n align-items: center; /* Center alignment for dot and event content */\n"])), function (_a) {
|
|
15
|
+
var isLeft = _a.isLeft;
|
|
16
|
+
return (isLeft ? "flex-end" : "flex-start");
|
|
17
|
+
});
|
|
18
|
+
var Event = styled_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n background: white;\n padding: 16px;\n border: 1px solid #007bff;\n border-radius: 8px;\n width: 40%;\n position: relative;\n display: flex;\n align-items: center;\n cursor: pointer; /* Indicates that the event is clickable */\n"], ["\n background: white;\n padding: 16px;\n border: 1px solid #007bff;\n border-radius: 8px;\n width: 40%;\n position: relative;\n display: flex;\n align-items: center;\n cursor: pointer; /* Indicates that the event is clickable */\n"])));
|
|
19
|
+
var Dot = styled_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n position: absolute;\n left: 50%;\n width: 12px;\n height: 12px;\n background-color: #007bff;\n border-radius: 50%;\n transform: translateX(-50%);\n"], ["\n position: absolute;\n left: 50%;\n width: 12px;\n height: 12px;\n background-color: #007bff;\n border-radius: 50%;\n transform: translateX(-50%);\n"])));
|
|
20
|
+
var Arrow = styled_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n position: absolute;\n left: ", ";\n width: 0;\n height: 0;\n border-style: solid;\n border-width: ", ";\n border-color: transparent #007bff transparent transparent;\n transform: translateX(-50%);\n top: 50%;\n transform: translateY(-50%);\n transform: ", ";\n"], ["\n position: absolute;\n left: ", ";\n width: 0;\n height: 0;\n border-style: solid;\n border-width: ", ";\n border-color: transparent #007bff transparent transparent;\n transform: translateX(-50%);\n top: 50%;\n transform: translateY(-50%);\n transform: ", ";\n"])), function (_a) {
|
|
21
|
+
var isLeft = _a.isLeft;
|
|
22
|
+
return (isLeft ? "-10px " : "100%");
|
|
23
|
+
}, function (_a) {
|
|
24
|
+
var isLeft = _a.isLeft;
|
|
25
|
+
return isLeft ? "10px 10px 10px 0" : "10px 10px 10px 10px";
|
|
26
|
+
}, function (_a) {
|
|
27
|
+
var isLeft = _a.isLeft;
|
|
28
|
+
return isLeft ? "translateY(-50%) " : "translateY(-50%) rotate(180deg)";
|
|
29
|
+
});
|
|
30
|
+
// const Arrow = styled.div<{ isLeft: boolean }>`
|
|
31
|
+
// position: absolute;
|
|
32
|
+
// left: ${({ isLeft }) => (isLeft ? 'calc(50% - 20px)' : 'calc(50% + 8px)')}; /* Adjust position based on side */
|
|
33
|
+
// width: 0;
|
|
34
|
+
// height: 0;
|
|
35
|
+
// border-style: solid;
|
|
36
|
+
// border-width: ${({ isLeft }) => (isLeft ? '10px 10px 10px 0' : '10px 0 10px 10px')};
|
|
37
|
+
// border-color: transparent #007bff transparent transparent;
|
|
38
|
+
// transform: ${({ isLeft }) => (isLeft ? 'rotate(90deg)' : 'rotate(-90deg)')}; /* Rotate the arrow */
|
|
39
|
+
// top: 50%; /* Align the arrow vertically centered */
|
|
40
|
+
// transform: translateY(-50%) ${({ isLeft }) => (isLeft ? 'rotate(90deg)' : 'rotate(-90deg)')};
|
|
41
|
+
// `;
|
|
42
|
+
var EventContent = styled_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n margin-left: 24px;\n"], ["\n margin-left: 24px;\n"])));
|
|
43
|
+
var EventTitle = styled_1.default.h3(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n margin: 0;\n"], ["\n margin: 0;\n"])));
|
|
44
|
+
var EventDescription = styled_1.default.p(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n margin: 0;\n"], ["\n margin: 0;\n"])));
|
|
45
|
+
var EventTime = styled_1.default.span(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n display: block;\n margin-top: 8px;\n color: #6c757d;\n"], ["\n display: block;\n margin-top: 8px;\n color: #6c757d;\n"])));
|
|
46
|
+
var Timeline = function (_a) {
|
|
47
|
+
var events = _a.events, onEventClick = _a.onEventClick;
|
|
48
|
+
return (react_1.default.createElement(TimelineContainer, null,
|
|
49
|
+
react_1.default.createElement(Line, null),
|
|
50
|
+
events.map(function (event, index) { return (react_1.default.createElement(EventContainer, { key: index, isLeft: index % 2 === 0 },
|
|
51
|
+
react_1.default.createElement(Dot, null),
|
|
52
|
+
react_1.default.createElement(Event, { onClick: function () { return onEventClick && onEventClick(event, index); } },
|
|
53
|
+
react_1.default.createElement(Arrow, { isLeft: index % 2 === 0 }),
|
|
54
|
+
react_1.default.createElement(EventContent, null,
|
|
55
|
+
react_1.default.createElement(EventTitle, null, event.title),
|
|
56
|
+
react_1.default.createElement(EventDescription, null, event.description),
|
|
57
|
+
react_1.default.createElement(EventTime, null, event.time))))); })));
|
|
58
|
+
};
|
|
59
|
+
exports.default = Timeline;
|
|
60
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10;
|
|
61
|
+
// import React from 'react';
|
|
62
|
+
// import styled from '@emotion/styled';
|
|
63
|
+
// import { TimelineProps } from './TimelineProps';
|
|
64
|
+
// const TimelineContainer = styled.div`
|
|
65
|
+
// position: relative;
|
|
66
|
+
// padding: 24px;
|
|
67
|
+
// margin: 0 auto;
|
|
68
|
+
// width: 100%;
|
|
69
|
+
// max-width: 800px;
|
|
70
|
+
// `;
|
|
71
|
+
// const Line = styled.div`
|
|
72
|
+
// position: absolute;
|
|
73
|
+
// left: 50%;
|
|
74
|
+
// top: 0;
|
|
75
|
+
// bottom: 0;
|
|
76
|
+
// width: 2px;
|
|
77
|
+
// background-color: #007bff;
|
|
78
|
+
// transform: translateX(-50%);
|
|
79
|
+
// `;
|
|
80
|
+
// const EventContainer = styled.div<{ isLeft: boolean }>`
|
|
81
|
+
// display: flex;
|
|
82
|
+
// justify-content: ${({ isLeft }) => (isLeft ? 'flex-end' : 'flex-start')};
|
|
83
|
+
// width: 100%;
|
|
84
|
+
// padding: 16px;
|
|
85
|
+
// box-sizing: border-box;
|
|
86
|
+
// position: relative;
|
|
87
|
+
// margin-bottom: 24px;
|
|
88
|
+
// `;
|
|
89
|
+
// const Event = styled.div`
|
|
90
|
+
// background: white;
|
|
91
|
+
// padding: 16px;
|
|
92
|
+
// border: 1px solid #007bff;
|
|
93
|
+
// border-radius: 8px;
|
|
94
|
+
// width: 40%;
|
|
95
|
+
// position: relative;
|
|
96
|
+
// display: flex;
|
|
97
|
+
// align-items: center;
|
|
98
|
+
// `;
|
|
99
|
+
// const Dot = styled.div`
|
|
100
|
+
// position: absolute;
|
|
101
|
+
// left: 50%;
|
|
102
|
+
// width: 12px;
|
|
103
|
+
// height: 12px;
|
|
104
|
+
// background-color: #007bff;
|
|
105
|
+
// border-radius: 50%;
|
|
106
|
+
// transform: translateX(-50%);
|
|
107
|
+
// `;
|
|
108
|
+
// const EventContent = styled.div`
|
|
109
|
+
// margin-left: 24px;
|
|
110
|
+
// `;
|
|
111
|
+
// const EventTitle = styled.h3`
|
|
112
|
+
// margin: 0;
|
|
113
|
+
// `;
|
|
114
|
+
// const EventDescription = styled.p`
|
|
115
|
+
// margin: 0;
|
|
116
|
+
// `;
|
|
117
|
+
// const EventTime = styled.span`
|
|
118
|
+
// display: block;
|
|
119
|
+
// margin-top: 8px;
|
|
120
|
+
// color: #6c757d;
|
|
121
|
+
// `;
|
|
122
|
+
// const Timeline = ({ events,onEventClick}:TimelineProps) => {
|
|
123
|
+
// return (
|
|
124
|
+
// <TimelineContainer>
|
|
125
|
+
// <Line />
|
|
126
|
+
// {events.map((event, index) => (
|
|
127
|
+
// <EventContainer key={index} isLeft={index % 2 === 0} onClick={() => onEventClick && onEventClick(event, index)}>
|
|
128
|
+
// <Dot />
|
|
129
|
+
// <Event>
|
|
130
|
+
// <EventContent>
|
|
131
|
+
// <EventTitle>{event.title}</EventTitle>
|
|
132
|
+
// <EventDescription>{event.description}</EventDescription>
|
|
133
|
+
// <EventTime>{event.time}</EventTime>
|
|
134
|
+
// </EventContent>
|
|
135
|
+
// </Event>
|
|
136
|
+
// </EventContainer>
|
|
137
|
+
// ))}
|
|
138
|
+
// </TimelineContainer>
|
|
139
|
+
// );
|
|
140
|
+
// };
|
|
141
|
+
// export default Timeline;
|
package/dist/Layout.js
CHANGED
|
@@ -71,6 +71,7 @@ var Drawer_1 = __importDefault(require("./Components/Drawer/Drawer"));
|
|
|
71
71
|
var MultiSelect_1 = __importDefault(require("./Components/MultiSelect/MultiSelect"));
|
|
72
72
|
var DatePicker_1 = __importDefault(require("./Components/DatePicker/DatePicker"));
|
|
73
73
|
var Search_1 = __importDefault(require("./Components/Search/Search"));
|
|
74
|
+
var Timeline_1 = __importDefault(require("./Components/Timeline/Timeline"));
|
|
74
75
|
var Layout = function () {
|
|
75
76
|
var navmenus = [
|
|
76
77
|
{ title: "Account Settings", url: "myaccount" },
|
|
@@ -254,8 +255,13 @@ var Layout = function () {
|
|
|
254
255
|
{ id: "XLS", label: "Export as XLS" },
|
|
255
256
|
]; }, []);
|
|
256
257
|
var exportOptionss = (0, react_2.useMemo)(function () { return [
|
|
257
|
-
{ id: "PDF", label: "Export as PDF", image:
|
|
258
|
-
{ id: "XLS", label: "Export as XLS" },
|
|
258
|
+
// { id: "PDF", label: "Export as PDF", image: <FiChevronUp /> },
|
|
259
|
+
// { id: "XLS", label: "Export as XLS" },
|
|
260
|
+
{ id: 1, label: "Upload file", image: react_2.default.createElement(fi_1.FiChevronUp, null) },
|
|
261
|
+
{ id: 2, label: "Documents", image: react_2.default.createElement(fi_1.FiChevronUp, null) },
|
|
262
|
+
{ id: 3, label: "CRM workDrive", image: react_2.default.createElement(fi_1.FiChevronUp, null) },
|
|
263
|
+
{ id: 4, label: "Other Cloud Drives", image: react_2.default.createElement(fi_1.FiChevronUp, null) },
|
|
264
|
+
{ id: 5, label: "Link(URL)", image: react_2.default.createElement(fi_1.FiChevronUp, null) },
|
|
259
265
|
]; }, []);
|
|
260
266
|
var data = (0, react_2.useMemo)(function () { return Array.from({ length: 10 }, function () { return Math.floor(Math.random() * 100); }); }, []);
|
|
261
267
|
var categories = (0, react_2.useMemo)(function () { return data.map(function (_, index) { return "Category ".concat(index + 1); }); }, [data]);
|
|
@@ -267,30 +273,35 @@ var Layout = function () {
|
|
|
267
273
|
// const handleNoteValue = () => {
|
|
268
274
|
// console.log("Note value");
|
|
269
275
|
// }
|
|
276
|
+
var _j = (0, react_2.useState)(false), saveButtonLoading = _j[0], setSaveButtonLoading = _j[1];
|
|
270
277
|
var handleNoteValue = function (noteValue, titleValue, file) {
|
|
271
278
|
console.log("Title: ", titleValue);
|
|
272
279
|
console.log("Note: ", noteValue);
|
|
273
280
|
console.log("File: ", file);
|
|
281
|
+
setSaveButtonLoading(true);
|
|
282
|
+
setTimeout(function () {
|
|
283
|
+
setSaveButtonLoading(false);
|
|
284
|
+
}, 2000);
|
|
274
285
|
};
|
|
275
|
-
var
|
|
286
|
+
var _k = (0, react_2.useState)(false), drawerOpen = _k[0], setDrawerOpen = _k[1];
|
|
276
287
|
var handleOnclick3 = function () {
|
|
277
288
|
setDrawerOpen(true);
|
|
278
289
|
};
|
|
279
290
|
var handleOnclick4 = function () {
|
|
280
291
|
setDrawerOpen(false);
|
|
281
292
|
};
|
|
282
|
-
var
|
|
293
|
+
var _l = (0, react_2.useState)([
|
|
283
294
|
{
|
|
284
295
|
id: "1721664346718-1",
|
|
285
296
|
label: "Testing",
|
|
286
297
|
},
|
|
287
|
-
]), selectedOptions =
|
|
298
|
+
]), selectedOptions = _l[0], setSelectedOptions = _l[1];
|
|
288
299
|
var handleValueSelectChange = function (options) {
|
|
289
300
|
setSelectedOptions(options);
|
|
290
301
|
console.log("Selected options updated:", options);
|
|
291
302
|
};
|
|
292
|
-
var
|
|
293
|
-
var
|
|
303
|
+
var _m = (0, react_2.useState)(new Date("07/26/1995")), selectedDate = _m[0], setSelectedDate = _m[1];
|
|
304
|
+
var _o = (0, react_2.useState)(""), searchQuery = _o[0], setSearchQuery = _o[1];
|
|
294
305
|
var handleSearch = function (event) {
|
|
295
306
|
console.log("Search query:", event.target.value);
|
|
296
307
|
setSearchQuery(event.target.value);
|
|
@@ -300,6 +311,21 @@ var Layout = function () {
|
|
|
300
311
|
console.log("Search query removed");
|
|
301
312
|
setSearchQuery("");
|
|
302
313
|
};
|
|
314
|
+
var events = [
|
|
315
|
+
{ title: "Event 1", description: "Description 1", time: "10:00 AM" },
|
|
316
|
+
{ title: "Event 2", description: "Description 2", time: "11:00 AM" },
|
|
317
|
+
{ title: "Event 3", description: "Description 3", time: "12:00 AM" },
|
|
318
|
+
{ title: "Event 4", description: "Description 4", time: "1:00 AM" },
|
|
319
|
+
{ title: "Event 5", description: "Description 5", time: "2:00 AM" },
|
|
320
|
+
{ title: "Event 6", description: "Description 6", time: "3:00 AM" },
|
|
321
|
+
{ title: "Event 7", description: "Description 7", time: "4:00 AM" },
|
|
322
|
+
{ title: "Event 8", description: "Description 8", time: "5:00 AM" },
|
|
323
|
+
{ title: "Event 9", description: "Description 9", time: "6:00 AM" },
|
|
324
|
+
{ title: "Event 10", description: "Description 10", time: "7:00 AM" },
|
|
325
|
+
];
|
|
326
|
+
var handleTimelineChange = function (event, index) {
|
|
327
|
+
console.log("Event clicked:", event, "at index:", index);
|
|
328
|
+
};
|
|
303
329
|
return (react_2.default.createElement(react_1.Box, { minH: "100vh", bg: "gray.100", overflow: "hidden" },
|
|
304
330
|
react_2.default.createElement(Loading_1.default, { text: "PIXELIZE CRM", isLoading: false, onlytext: true }),
|
|
305
331
|
react_2.default.createElement(react_1.Flex, null,
|
|
@@ -433,7 +459,7 @@ var Layout = function () {
|
|
|
433
459
|
react_2.default.createElement("br", null),
|
|
434
460
|
react_2.default.createElement(NoteTextArea_1.default, { width: "720px", handleSubmit: function (noteValue, titleValue, file) {
|
|
435
461
|
handleNoteValue(noteValue, titleValue, file);
|
|
436
|
-
}, value: "text", title: "hello", isEditable:
|
|
462
|
+
}, value: "text", title: "hello", isEditable: true, saveButtonLoading: saveButtonLoading, handleCancel: function (isActive) {
|
|
437
463
|
console.log("isActive", isActive);
|
|
438
464
|
} }),
|
|
439
465
|
react_2.default.createElement("br", null),
|
|
@@ -474,6 +500,9 @@ var Layout = function () {
|
|
|
474
500
|
selectedDate.toISOString()))),
|
|
475
501
|
react_2.default.createElement("br", null),
|
|
476
502
|
react_2.default.createElement("br", null),
|
|
477
|
-
react_2.default.createElement(Search_1.default, { onSearch: handleSearch, onclose: handleRemoveSearch, query: searchQuery })
|
|
503
|
+
react_2.default.createElement(Search_1.default, { onSearch: handleSearch, onclose: handleRemoveSearch, query: searchQuery }),
|
|
504
|
+
react_2.default.createElement("br", null),
|
|
505
|
+
react_2.default.createElement("br", null),
|
|
506
|
+
react_2.default.createElement(Timeline_1.default, { events: events, onEventClick: handleTimelineChange }))))));
|
|
478
507
|
};
|
|
479
508
|
exports.default = Layout;
|