pixelize-design-library 2.1.51 → 2.1.53
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.
|
@@ -15,16 +15,17 @@ var HeaderActions = function (_a) {
|
|
|
15
15
|
var colors = (0, useCustomTheme_1.useCustomTheme)().colors;
|
|
16
16
|
var elements = [];
|
|
17
17
|
if (select === null || select === void 0 ? void 0 : select.isSelect) {
|
|
18
|
-
elements.push(react_2.default.createElement(
|
|
18
|
+
elements.push(react_2.default.createElement(react_1.Box, { key: "select", width: (_b = select.width) !== null && _b !== void 0 ? _b : "12.5rem" },
|
|
19
|
+
react_2.default.createElement(Select_1.default, { key: "select", options: (_c = select.options) !== null && _c !== void 0 ? _c : [], placeholder: select.selectPlaceholderText, onChange: function (option) { var _a; return (_a = select.onSelectChange) === null || _a === void 0 ? void 0 : _a.call(select, option); }, value: select.value })));
|
|
19
20
|
}
|
|
20
21
|
if (edit === null || edit === void 0 ? void 0 : edit.isEditable) {
|
|
21
22
|
elements.push(react_2.default.createElement(react_1.Box, { key: "edit", display: "flex", alignItems: "center", gap: "0.375rem", cursor: "pointer", fontSize: 14, onClick: function () { var _a; return (_a = edit.onEdit) === null || _a === void 0 ? void 0 : _a.call(edit); } },
|
|
22
|
-
react_2.default.createElement(lucide_react_1.SquarePen, { size:
|
|
23
|
+
react_2.default.createElement(lucide_react_1.SquarePen, { size: 16, color: (_d = colors === null || colors === void 0 ? void 0 : colors.text) === null || _d === void 0 ? void 0 : _d[500] }),
|
|
23
24
|
react_2.default.createElement(react_1.Text, { color: (_e = colors === null || colors === void 0 ? void 0 : colors.secondary) === null || _e === void 0 ? void 0 : _e[500] }, edit.label ? edit.label : "Edit Layout")));
|
|
24
25
|
}
|
|
25
26
|
if (create === null || create === void 0 ? void 0 : create.isCreatable) {
|
|
26
27
|
elements.push(react_2.default.createElement(react_1.Box, { key: "create", display: "flex", alignItems: "center", gap: "0.375rem", cursor: "pointer", fontSize: 14, onClick: function () { var _a; return (_a = create.onCreate) === null || _a === void 0 ? void 0 : _a.call(create); } },
|
|
27
|
-
react_2.default.createElement(lucide_react_1.CirclePlus, { size:
|
|
28
|
+
react_2.default.createElement(lucide_react_1.CirclePlus, { size: 16, color: (_f = colors === null || colors === void 0 ? void 0 : colors.text) === null || _f === void 0 ? void 0 : _f[500] }),
|
|
28
29
|
react_2.default.createElement(react_1.Text, { color: (_g = colors === null || colors === void 0 ? void 0 : colors.secondary) === null || _g === void 0 ? void 0 : _g[500] },
|
|
29
30
|
" ",
|
|
30
31
|
create.label ? create.label : "Create New",
|
|
@@ -97,7 +97,7 @@ var KanbanBoard = function (_a) {
|
|
|
97
97
|
return (react_1.default.createElement(react_1.default.Fragment, null,
|
|
98
98
|
react_1.default.createElement(HeaderActions_1.default, { select: kanbanSelect, edit: kanbanEdit, create: kanbanCreate }),
|
|
99
99
|
react_1.default.createElement(dnd_1.DragDropContext, { onDragEnd: onDragEnd },
|
|
100
|
-
react_1.default.createElement(react_2.Flex, { gap: 4, p: 4, bg: (_b = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _b === void 0 ? void 0 : _b[200], minH: "100vh", overflowX: "auto", maxWidth: "100vw" }, isLoading ? ((_c = Array.from({ length: 5 })) === null || _c === void 0 ? void 0 : _c.map(function (_, idx) {
|
|
100
|
+
react_1.default.createElement(react_2.Flex, { gap: 4, p: 4, mt: 2, bg: (_b = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _b === void 0 ? void 0 : _b[200], minH: "100vh", overflowX: "auto", maxWidth: "100vw" }, isLoading ? ((_c = Array.from({ length: 5 })) === null || _c === void 0 ? void 0 : _c.map(function (_, idx) {
|
|
101
101
|
var _a, _b;
|
|
102
102
|
return (react_1.default.createElement(react_2.Box, { key: idx, width: "17.5rem", p: 4, borderRadius: "0.5rem", bg: (_a = colors === null || colors === void 0 ? void 0 : colors.background) === null || _a === void 0 ? void 0 : _a[100], border: "0.125rem solid ".concat((_b = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _b === void 0 ? void 0 : _b[200]), flexShrink: 0 },
|
|
103
103
|
react_1.default.createElement(react_2.Skeleton, { height: "2.75rem", mb: 4, borderRadius: "0.25rem" }),
|
|
@@ -109,7 +109,131 @@ var initialData = {
|
|
|
109
109
|
],
|
|
110
110
|
},
|
|
111
111
|
};
|
|
112
|
+
var viewListData = [
|
|
113
|
+
{
|
|
114
|
+
"view_id": 5,
|
|
115
|
+
"type": "contact",
|
|
116
|
+
"viewName": "status",
|
|
117
|
+
"groupBy": "Lead Source",
|
|
118
|
+
"selectedField": [
|
|
119
|
+
"contact_owner",
|
|
120
|
+
"first_name",
|
|
121
|
+
"last_name",
|
|
122
|
+
"title",
|
|
123
|
+
"assistant",
|
|
124
|
+
"email",
|
|
125
|
+
"mobile",
|
|
126
|
+
"lead_source",
|
|
127
|
+
"dob",
|
|
128
|
+
"skype_id",
|
|
129
|
+
"twitter",
|
|
130
|
+
"sec_email",
|
|
131
|
+
"mail_street",
|
|
132
|
+
"mail_city",
|
|
133
|
+
"mail_state",
|
|
134
|
+
"mail_zip",
|
|
135
|
+
"mail_country",
|
|
136
|
+
"other_street",
|
|
137
|
+
"other_city",
|
|
138
|
+
"other_state",
|
|
139
|
+
"other_zip",
|
|
140
|
+
"other_country",
|
|
141
|
+
"fax",
|
|
142
|
+
"description"
|
|
143
|
+
],
|
|
144
|
+
"moduleId": null,
|
|
145
|
+
"created_at": 1756720852175,
|
|
146
|
+
"updated_at": 1756720852175
|
|
147
|
+
},
|
|
148
|
+
{
|
|
149
|
+
"view_id": 4,
|
|
150
|
+
"type": "contact",
|
|
151
|
+
"viewName": "demo",
|
|
152
|
+
"groupBy": "Lead Source",
|
|
153
|
+
"selectedField": [
|
|
154
|
+
"contact_owner",
|
|
155
|
+
"first_name",
|
|
156
|
+
"last_name",
|
|
157
|
+
"title",
|
|
158
|
+
"assistant",
|
|
159
|
+
"email",
|
|
160
|
+
"mobile",
|
|
161
|
+
"lead_source",
|
|
162
|
+
"dob",
|
|
163
|
+
"skype_id",
|
|
164
|
+
"twitter",
|
|
165
|
+
"sec_email",
|
|
166
|
+
"mail_street",
|
|
167
|
+
"mail_city",
|
|
168
|
+
"mail_state",
|
|
169
|
+
"mail_zip",
|
|
170
|
+
"mail_country",
|
|
171
|
+
"other_street",
|
|
172
|
+
"other_city",
|
|
173
|
+
"other_state",
|
|
174
|
+
"other_zip",
|
|
175
|
+
"other_country",
|
|
176
|
+
"fax",
|
|
177
|
+
"description"
|
|
178
|
+
],
|
|
179
|
+
"moduleId": null,
|
|
180
|
+
"created_at": 1756720474429,
|
|
181
|
+
"updated_at": 1756720474429
|
|
182
|
+
},
|
|
183
|
+
{
|
|
184
|
+
"view_id": 2,
|
|
185
|
+
"type": "contact",
|
|
186
|
+
"viewName": "kanabana",
|
|
187
|
+
"groupBy": "Lead Source",
|
|
188
|
+
"selectedField": [
|
|
189
|
+
"contact_owner",
|
|
190
|
+
"first_name",
|
|
191
|
+
"last_name",
|
|
192
|
+
"title",
|
|
193
|
+
"assistant",
|
|
194
|
+
"email",
|
|
195
|
+
"mobile",
|
|
196
|
+
"lead_source",
|
|
197
|
+
"dob",
|
|
198
|
+
"skype_id",
|
|
199
|
+
"twitter",
|
|
200
|
+
"sec_email",
|
|
201
|
+
"mail_street",
|
|
202
|
+
"mail_city",
|
|
203
|
+
"mail_state",
|
|
204
|
+
"mail_zip",
|
|
205
|
+
"mail_country",
|
|
206
|
+
"other_street",
|
|
207
|
+
"other_city",
|
|
208
|
+
"other_state",
|
|
209
|
+
"other_zip",
|
|
210
|
+
"other_country",
|
|
211
|
+
"fax",
|
|
212
|
+
"description"
|
|
213
|
+
],
|
|
214
|
+
"moduleId": null,
|
|
215
|
+
"created_at": 1756457931264,
|
|
216
|
+
"updated_at": 1756457931264
|
|
217
|
+
}
|
|
218
|
+
];
|
|
112
219
|
var KanbanBoardExample = function () {
|
|
113
|
-
return (react_1.default.createElement(KanbanBoard_1.default, { data: initialData, onDelete: function (item) { return console.log("Delete", item); }, onOpen: function (item) { return console.log("Open", item); }, onDrag: function (updatedColumns) { return console.log("New State", updatedColumns); }, onColumnDelete: function (updatedColumns) { return console.log("New Del", updatedColumns); }, isLoading: false
|
|
220
|
+
return (react_1.default.createElement(KanbanBoard_1.default, { data: initialData, onDelete: function (item) { return console.log("Delete", item); }, onOpen: function (item) { return console.log("Open", item); }, onDrag: function (updatedColumns) { return console.log("New State", updatedColumns); }, onColumnDelete: function (updatedColumns) { return console.log("New Del", updatedColumns); }, isLoading: false, kanbanCreate: {
|
|
221
|
+
isCreatable: true,
|
|
222
|
+
onCreate: function () { },
|
|
223
|
+
}, kanbanEdit: {
|
|
224
|
+
isEditable: true,
|
|
225
|
+
onEdit: function () { },
|
|
226
|
+
label: "Edit",
|
|
227
|
+
}, kanbanSelect: {
|
|
228
|
+
isSelect: true,
|
|
229
|
+
options: viewListData === null || viewListData === void 0 ? void 0 : viewListData.map(function (item) { return ({
|
|
230
|
+
label: item === null || item === void 0 ? void 0 : item.viewName,
|
|
231
|
+
id: String(item === null || item === void 0 ? void 0 : item.view_id),
|
|
232
|
+
}); }),
|
|
233
|
+
onSelectChange: function (option) { },
|
|
234
|
+
selectPlaceholderText: "",
|
|
235
|
+
width: "200px",
|
|
236
|
+
value: "kanbanSelectValue",
|
|
237
|
+
} }));
|
|
114
238
|
};
|
|
115
239
|
exports.default = KanbanBoardExample;
|