next-recomponents 1.6.89 → 1.6.91
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/index.d.mts +2 -2
- package/dist/index.d.ts +2 -2
- package/dist/index.js +57 -49
- package/dist/index.mjs +57 -49
- package/package.json +3 -3
- package/src/index.tsx +0 -1
- package/src/use-excel/index.tsx +6 -4
- package/dist/index.css +0 -132
- package/src/calendar/calendar.css +0 -155
- package/src/calendar/calendar.icon.tsx +0 -15
- package/src/calendar/index.tsx +0 -91
package/dist/index.d.mts
CHANGED
|
@@ -161,8 +161,8 @@ declare function useDates(): {
|
|
|
161
161
|
|
|
162
162
|
declare function useExcel(): {
|
|
163
163
|
import: (file: File) => Promise<any[][]>;
|
|
164
|
-
export: (data: any[][], fileName?: string) => void
|
|
165
|
-
exportAllPages: (data: Record<string, any[]>, fileName?: string) => void
|
|
164
|
+
export: (data: any[][], fileName?: string) => Promise<void>;
|
|
165
|
+
exportAllPages: (data: Record<string, any[]>, fileName?: string) => Promise<void>;
|
|
166
166
|
importAllPages: (file: File) => Promise<Record<string, any[]>>;
|
|
167
167
|
};
|
|
168
168
|
|
package/dist/index.d.ts
CHANGED
|
@@ -161,8 +161,8 @@ declare function useDates(): {
|
|
|
161
161
|
|
|
162
162
|
declare function useExcel(): {
|
|
163
163
|
import: (file: File) => Promise<any[][]>;
|
|
164
|
-
export: (data: any[][], fileName?: string) => void
|
|
165
|
-
exportAllPages: (data: Record<string, any[]>, fileName?: string) => void
|
|
164
|
+
export: (data: any[][], fileName?: string) => Promise<void>;
|
|
165
|
+
exportAllPages: (data: Record<string, any[]>, fileName?: string) => Promise<void>;
|
|
166
166
|
importAllPages: (file: File) => Promise<Record<string, any[]>>;
|
|
167
167
|
};
|
|
168
168
|
|
package/dist/index.js
CHANGED
|
@@ -44354,64 +44354,72 @@ function useDates() {
|
|
|
44354
44354
|
// src/use-excel/index.tsx
|
|
44355
44355
|
function useExcel() {
|
|
44356
44356
|
function importFileAllPages(file) {
|
|
44357
|
-
return
|
|
44358
|
-
|
|
44359
|
-
|
|
44360
|
-
|
|
44361
|
-
|
|
44362
|
-
|
|
44363
|
-
|
|
44364
|
-
|
|
44365
|
-
|
|
44366
|
-
|
|
44367
|
-
|
|
44368
|
-
|
|
44369
|
-
|
|
44370
|
-
|
|
44371
|
-
|
|
44372
|
-
|
|
44373
|
-
|
|
44374
|
-
|
|
44375
|
-
|
|
44376
|
-
|
|
44357
|
+
return __async(this, null, function* () {
|
|
44358
|
+
return new Promise((resolve, reject) => {
|
|
44359
|
+
const reader = new FileReader();
|
|
44360
|
+
reader.onload = (event) => {
|
|
44361
|
+
var _a;
|
|
44362
|
+
try {
|
|
44363
|
+
const data = new Uint8Array((_a = event.target) == null ? void 0 : _a.result);
|
|
44364
|
+
const workbook = readSync(data, { type: "array" });
|
|
44365
|
+
const allSheetsData = {};
|
|
44366
|
+
workbook.SheetNames.forEach((sheetName) => {
|
|
44367
|
+
const sheet = workbook.Sheets[sheetName];
|
|
44368
|
+
const jsonData = utils.sheet_to_json(sheet);
|
|
44369
|
+
allSheetsData[sheetName] = jsonData;
|
|
44370
|
+
});
|
|
44371
|
+
resolve(allSheetsData);
|
|
44372
|
+
} catch (error) {
|
|
44373
|
+
reject(error);
|
|
44374
|
+
}
|
|
44375
|
+
};
|
|
44376
|
+
reader.onerror = () => reject(reader.error);
|
|
44377
|
+
reader.readAsArrayBuffer(file);
|
|
44378
|
+
});
|
|
44377
44379
|
});
|
|
44378
44380
|
}
|
|
44379
44381
|
function importFile(file) {
|
|
44380
|
-
return
|
|
44381
|
-
|
|
44382
|
-
|
|
44383
|
-
|
|
44384
|
-
|
|
44385
|
-
|
|
44386
|
-
|
|
44387
|
-
|
|
44388
|
-
|
|
44389
|
-
|
|
44390
|
-
|
|
44391
|
-
|
|
44392
|
-
|
|
44393
|
-
|
|
44394
|
-
|
|
44395
|
-
|
|
44396
|
-
|
|
44382
|
+
return __async(this, null, function* () {
|
|
44383
|
+
return new Promise((resolve, reject) => {
|
|
44384
|
+
const reader = new FileReader();
|
|
44385
|
+
reader.onload = (event) => {
|
|
44386
|
+
var _a;
|
|
44387
|
+
try {
|
|
44388
|
+
const data = new Uint8Array((_a = event.target) == null ? void 0 : _a.result);
|
|
44389
|
+
const workbook = readSync(data, { type: "array" });
|
|
44390
|
+
const sheetName = workbook.SheetNames[0];
|
|
44391
|
+
const sheet = workbook.Sheets[sheetName];
|
|
44392
|
+
const jsonData = utils.sheet_to_json(sheet);
|
|
44393
|
+
resolve(jsonData);
|
|
44394
|
+
} catch (error) {
|
|
44395
|
+
reject(error);
|
|
44396
|
+
}
|
|
44397
|
+
};
|
|
44398
|
+
reader.onerror = () => reject(reader.error);
|
|
44399
|
+
reader.readAsArrayBuffer(file);
|
|
44400
|
+
});
|
|
44397
44401
|
});
|
|
44398
44402
|
}
|
|
44399
44403
|
function exportFile(data, fileName = "archivo.xlsx") {
|
|
44400
|
-
|
|
44401
|
-
|
|
44402
|
-
|
|
44403
|
-
|
|
44404
|
+
return __async(this, null, function* () {
|
|
44405
|
+
const worksheet = utils.aoa_to_sheet(data);
|
|
44406
|
+
const workbook = utils.book_new();
|
|
44407
|
+
utils.book_append_sheet(workbook, worksheet, "Sheet1");
|
|
44408
|
+
writeFileSync(workbook, fileName);
|
|
44409
|
+
});
|
|
44404
44410
|
}
|
|
44405
44411
|
function exportFileAllPages(data, fileName = "archivo.xlsx") {
|
|
44406
|
-
|
|
44407
|
-
|
|
44408
|
-
|
|
44409
|
-
|
|
44410
|
-
|
|
44411
|
-
|
|
44412
|
+
return __async(this, null, function* () {
|
|
44413
|
+
const workbook = utils.book_new();
|
|
44414
|
+
for (const sheetName in data) {
|
|
44415
|
+
if (data.hasOwnProperty(sheetName)) {
|
|
44416
|
+
const sheetData = data[sheetName];
|
|
44417
|
+
const worksheet = utils.json_to_sheet(sheetData);
|
|
44418
|
+
utils.book_append_sheet(workbook, worksheet, sheetName);
|
|
44419
|
+
}
|
|
44412
44420
|
}
|
|
44413
|
-
|
|
44414
|
-
|
|
44421
|
+
writeFileSync(workbook, fileName);
|
|
44422
|
+
});
|
|
44415
44423
|
}
|
|
44416
44424
|
return {
|
|
44417
44425
|
import: importFile,
|
package/dist/index.mjs
CHANGED
|
@@ -44345,64 +44345,72 @@ function useDates() {
|
|
|
44345
44345
|
// src/use-excel/index.tsx
|
|
44346
44346
|
function useExcel() {
|
|
44347
44347
|
function importFileAllPages(file) {
|
|
44348
|
-
return
|
|
44349
|
-
|
|
44350
|
-
|
|
44351
|
-
|
|
44352
|
-
|
|
44353
|
-
|
|
44354
|
-
|
|
44355
|
-
|
|
44356
|
-
|
|
44357
|
-
|
|
44358
|
-
|
|
44359
|
-
|
|
44360
|
-
|
|
44361
|
-
|
|
44362
|
-
|
|
44363
|
-
|
|
44364
|
-
|
|
44365
|
-
|
|
44366
|
-
|
|
44367
|
-
|
|
44348
|
+
return __async(this, null, function* () {
|
|
44349
|
+
return new Promise((resolve, reject) => {
|
|
44350
|
+
const reader = new FileReader();
|
|
44351
|
+
reader.onload = (event) => {
|
|
44352
|
+
var _a;
|
|
44353
|
+
try {
|
|
44354
|
+
const data = new Uint8Array((_a = event.target) == null ? void 0 : _a.result);
|
|
44355
|
+
const workbook = readSync(data, { type: "array" });
|
|
44356
|
+
const allSheetsData = {};
|
|
44357
|
+
workbook.SheetNames.forEach((sheetName) => {
|
|
44358
|
+
const sheet = workbook.Sheets[sheetName];
|
|
44359
|
+
const jsonData = utils.sheet_to_json(sheet);
|
|
44360
|
+
allSheetsData[sheetName] = jsonData;
|
|
44361
|
+
});
|
|
44362
|
+
resolve(allSheetsData);
|
|
44363
|
+
} catch (error) {
|
|
44364
|
+
reject(error);
|
|
44365
|
+
}
|
|
44366
|
+
};
|
|
44367
|
+
reader.onerror = () => reject(reader.error);
|
|
44368
|
+
reader.readAsArrayBuffer(file);
|
|
44369
|
+
});
|
|
44368
44370
|
});
|
|
44369
44371
|
}
|
|
44370
44372
|
function importFile(file) {
|
|
44371
|
-
return
|
|
44372
|
-
|
|
44373
|
-
|
|
44374
|
-
|
|
44375
|
-
|
|
44376
|
-
|
|
44377
|
-
|
|
44378
|
-
|
|
44379
|
-
|
|
44380
|
-
|
|
44381
|
-
|
|
44382
|
-
|
|
44383
|
-
|
|
44384
|
-
|
|
44385
|
-
|
|
44386
|
-
|
|
44387
|
-
|
|
44373
|
+
return __async(this, null, function* () {
|
|
44374
|
+
return new Promise((resolve, reject) => {
|
|
44375
|
+
const reader = new FileReader();
|
|
44376
|
+
reader.onload = (event) => {
|
|
44377
|
+
var _a;
|
|
44378
|
+
try {
|
|
44379
|
+
const data = new Uint8Array((_a = event.target) == null ? void 0 : _a.result);
|
|
44380
|
+
const workbook = readSync(data, { type: "array" });
|
|
44381
|
+
const sheetName = workbook.SheetNames[0];
|
|
44382
|
+
const sheet = workbook.Sheets[sheetName];
|
|
44383
|
+
const jsonData = utils.sheet_to_json(sheet);
|
|
44384
|
+
resolve(jsonData);
|
|
44385
|
+
} catch (error) {
|
|
44386
|
+
reject(error);
|
|
44387
|
+
}
|
|
44388
|
+
};
|
|
44389
|
+
reader.onerror = () => reject(reader.error);
|
|
44390
|
+
reader.readAsArrayBuffer(file);
|
|
44391
|
+
});
|
|
44388
44392
|
});
|
|
44389
44393
|
}
|
|
44390
44394
|
function exportFile(data, fileName = "archivo.xlsx") {
|
|
44391
|
-
|
|
44392
|
-
|
|
44393
|
-
|
|
44394
|
-
|
|
44395
|
+
return __async(this, null, function* () {
|
|
44396
|
+
const worksheet = utils.aoa_to_sheet(data);
|
|
44397
|
+
const workbook = utils.book_new();
|
|
44398
|
+
utils.book_append_sheet(workbook, worksheet, "Sheet1");
|
|
44399
|
+
writeFileSync(workbook, fileName);
|
|
44400
|
+
});
|
|
44395
44401
|
}
|
|
44396
44402
|
function exportFileAllPages(data, fileName = "archivo.xlsx") {
|
|
44397
|
-
|
|
44398
|
-
|
|
44399
|
-
|
|
44400
|
-
|
|
44401
|
-
|
|
44402
|
-
|
|
44403
|
+
return __async(this, null, function* () {
|
|
44404
|
+
const workbook = utils.book_new();
|
|
44405
|
+
for (const sheetName in data) {
|
|
44406
|
+
if (data.hasOwnProperty(sheetName)) {
|
|
44407
|
+
const sheetData = data[sheetName];
|
|
44408
|
+
const worksheet = utils.json_to_sheet(sheetData);
|
|
44409
|
+
utils.book_append_sheet(workbook, worksheet, sheetName);
|
|
44410
|
+
}
|
|
44403
44411
|
}
|
|
44404
|
-
|
|
44405
|
-
|
|
44412
|
+
writeFileSync(workbook, fileName);
|
|
44413
|
+
});
|
|
44406
44414
|
}
|
|
44407
44415
|
return {
|
|
44408
44416
|
import: importFile,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "next-recomponents",
|
|
3
|
-
"version": "1.6.
|
|
3
|
+
"version": "1.6.91",
|
|
4
4
|
"description": "",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
"axios": "^1.9.0",
|
|
22
22
|
"moment": "^2.30.1",
|
|
23
23
|
"react": "^19.1.0",
|
|
24
|
-
"react-
|
|
25
|
-
"
|
|
24
|
+
"react-dom": "^19.1.0",
|
|
25
|
+
"uninstall": "^0.0.0"
|
|
26
26
|
}
|
|
27
27
|
}
|
package/src/index.tsx
CHANGED
package/src/use-excel/index.tsx
CHANGED
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
import * as XLSX from "xlsx";
|
|
2
2
|
|
|
3
3
|
export default function useExcel() {
|
|
4
|
-
function importFileAllPages(
|
|
4
|
+
async function importFileAllPages(
|
|
5
|
+
file: File
|
|
6
|
+
): Promise<Record<string, any[]>> {
|
|
5
7
|
return new Promise((resolve, reject) => {
|
|
6
8
|
const reader = new FileReader();
|
|
7
9
|
|
|
@@ -29,7 +31,7 @@ export default function useExcel() {
|
|
|
29
31
|
});
|
|
30
32
|
}
|
|
31
33
|
|
|
32
|
-
function importFile(file: File): Promise<any[][]> {
|
|
34
|
+
async function importFile(file: File): Promise<any[][]> {
|
|
33
35
|
return new Promise((resolve, reject) => {
|
|
34
36
|
const reader = new FileReader();
|
|
35
37
|
|
|
@@ -53,7 +55,7 @@ export default function useExcel() {
|
|
|
53
55
|
});
|
|
54
56
|
}
|
|
55
57
|
|
|
56
|
-
function exportFile(data: any[][], fileName = "archivo.xlsx") {
|
|
58
|
+
async function exportFile(data: any[][], fileName = "archivo.xlsx") {
|
|
57
59
|
const worksheet = XLSX.utils.aoa_to_sheet(data);
|
|
58
60
|
const workbook = XLSX.utils.book_new();
|
|
59
61
|
XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1");
|
|
@@ -61,7 +63,7 @@ export default function useExcel() {
|
|
|
61
63
|
XLSX.writeFile(workbook, fileName);
|
|
62
64
|
}
|
|
63
65
|
|
|
64
|
-
function exportFileAllPages(
|
|
66
|
+
async function exportFileAllPages(
|
|
65
67
|
data: Record<string, any[]>,
|
|
66
68
|
fileName = "archivo.xlsx"
|
|
67
69
|
) {
|
package/dist/index.css
DELETED
|
@@ -1,132 +0,0 @@
|
|
|
1
|
-
/* src/calendar/calendar.css */
|
|
2
|
-
.react-calendar {
|
|
3
|
-
width: 350px;
|
|
4
|
-
max-width: 100%;
|
|
5
|
-
background: white;
|
|
6
|
-
border: 1px solid #a0a096;
|
|
7
|
-
font-family:
|
|
8
|
-
"Arial",
|
|
9
|
-
"Helvetica",
|
|
10
|
-
sans-serif;
|
|
11
|
-
line-height: 1.125em;
|
|
12
|
-
}
|
|
13
|
-
.react-calendar--doubleView {
|
|
14
|
-
width: 700px;
|
|
15
|
-
}
|
|
16
|
-
.react-calendar--doubleView .react-calendar__viewContainer {
|
|
17
|
-
display: flex;
|
|
18
|
-
margin: -0.5em;
|
|
19
|
-
}
|
|
20
|
-
.react-calendar--doubleView .react-calendar__viewContainer > * {
|
|
21
|
-
width: 50%;
|
|
22
|
-
margin: 0.5em;
|
|
23
|
-
}
|
|
24
|
-
.react-calendar,
|
|
25
|
-
.react-calendar *,
|
|
26
|
-
.react-calendar *:before,
|
|
27
|
-
.react-calendar *:after {
|
|
28
|
-
-moz-box-sizing: border-box;
|
|
29
|
-
-webkit-box-sizing: border-box;
|
|
30
|
-
box-sizing: border-box;
|
|
31
|
-
}
|
|
32
|
-
.react-calendar button {
|
|
33
|
-
margin: 0;
|
|
34
|
-
border: 0;
|
|
35
|
-
outline: none;
|
|
36
|
-
}
|
|
37
|
-
.react-calendar button:enabled:hover {
|
|
38
|
-
cursor: pointer;
|
|
39
|
-
}
|
|
40
|
-
.react-calendar__navigation {
|
|
41
|
-
display: flex;
|
|
42
|
-
height: 44px;
|
|
43
|
-
margin-bottom: 1em;
|
|
44
|
-
}
|
|
45
|
-
.react-calendar__navigation button {
|
|
46
|
-
min-width: 44px;
|
|
47
|
-
background: none;
|
|
48
|
-
}
|
|
49
|
-
.react-calendar__navigation button:disabled {
|
|
50
|
-
background-color: #f0f0f0;
|
|
51
|
-
}
|
|
52
|
-
.react-calendar__navigation button:enabled:hover,
|
|
53
|
-
.react-calendar__navigation button:enabled:focus {
|
|
54
|
-
background-color: #e6e6e6;
|
|
55
|
-
}
|
|
56
|
-
.react-calendar__month-view__weekdays {
|
|
57
|
-
text-align: center;
|
|
58
|
-
text-transform: uppercase;
|
|
59
|
-
font: inherit;
|
|
60
|
-
font-size: 0.75em;
|
|
61
|
-
font-weight: bold;
|
|
62
|
-
}
|
|
63
|
-
.react-calendar__month-view__weekdays__weekday {
|
|
64
|
-
padding: 0.5em;
|
|
65
|
-
}
|
|
66
|
-
.react-calendar__month-view__weekNumbers .react-calendar__tile {
|
|
67
|
-
display: flex;
|
|
68
|
-
align-items: center;
|
|
69
|
-
justify-content: center;
|
|
70
|
-
font: inherit;
|
|
71
|
-
font-size: 0.75em;
|
|
72
|
-
font-weight: bold;
|
|
73
|
-
}
|
|
74
|
-
.react-calendar__month-view__days__day--weekend {
|
|
75
|
-
color: #d10000;
|
|
76
|
-
}
|
|
77
|
-
.react-calendar__month-view__days__day--neighboringMonth,
|
|
78
|
-
.react-calendar__decade-view__years__year--neighboringDecade,
|
|
79
|
-
.react-calendar__century-view__decades__decade--neighboringCentury {
|
|
80
|
-
color: #757575;
|
|
81
|
-
}
|
|
82
|
-
.react-calendar__year-view .react-calendar__tile,
|
|
83
|
-
.react-calendar__decade-view .react-calendar__tile,
|
|
84
|
-
.react-calendar__century-view .react-calendar__tile {
|
|
85
|
-
padding: 2em 0.5em;
|
|
86
|
-
}
|
|
87
|
-
.react-calendar__tile {
|
|
88
|
-
max-width: 100%;
|
|
89
|
-
padding: 10px 6.6667px;
|
|
90
|
-
background: none;
|
|
91
|
-
text-align: center;
|
|
92
|
-
font: inherit;
|
|
93
|
-
font-size: 0.833em;
|
|
94
|
-
}
|
|
95
|
-
.react-calendar__tile:disabled {
|
|
96
|
-
background-color: #f0f0f0;
|
|
97
|
-
color: #ababab;
|
|
98
|
-
}
|
|
99
|
-
.react-calendar__month-view__days__day--neighboringMonth:disabled,
|
|
100
|
-
.react-calendar__decade-view__years__year--neighboringDecade:disabled,
|
|
101
|
-
.react-calendar__century-view__decades__decade--neighboringCentury:disabled {
|
|
102
|
-
color: #cdcdcd;
|
|
103
|
-
}
|
|
104
|
-
.react-calendar__tile:enabled:hover,
|
|
105
|
-
.react-calendar__tile:enabled:focus {
|
|
106
|
-
background-color: #e6e6e6;
|
|
107
|
-
}
|
|
108
|
-
.react-calendar__tile--now {
|
|
109
|
-
background: #ffff76;
|
|
110
|
-
}
|
|
111
|
-
.react-calendar__tile--now:enabled:hover,
|
|
112
|
-
.react-calendar__tile--now:enabled:focus {
|
|
113
|
-
background: #ffffa9;
|
|
114
|
-
}
|
|
115
|
-
.react-calendar__tile--hasActive {
|
|
116
|
-
background: #76baff;
|
|
117
|
-
}
|
|
118
|
-
.react-calendar__tile--hasActive:enabled:hover,
|
|
119
|
-
.react-calendar__tile--hasActive:enabled:focus {
|
|
120
|
-
background: #a9d4ff;
|
|
121
|
-
}
|
|
122
|
-
.react-calendar__tile--active {
|
|
123
|
-
background: #006edc;
|
|
124
|
-
color: white;
|
|
125
|
-
}
|
|
126
|
-
.react-calendar__tile--active:enabled:hover,
|
|
127
|
-
.react-calendar__tile--active:enabled:focus {
|
|
128
|
-
background: #1087ff;
|
|
129
|
-
}
|
|
130
|
-
.react-calendar--selectRange .react-calendar__tile--hover {
|
|
131
|
-
background-color: #e6e6e6;
|
|
132
|
-
}
|
|
@@ -1,155 +0,0 @@
|
|
|
1
|
-
.react-calendar {
|
|
2
|
-
width: 350px;
|
|
3
|
-
max-width: 100%;
|
|
4
|
-
background: white;
|
|
5
|
-
border: 1px solid #a0a096;
|
|
6
|
-
font-family: "Arial", "Helvetica", sans-serif;
|
|
7
|
-
line-height: 1.125em;
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
.react-calendar--doubleView {
|
|
11
|
-
width: 700px;
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
.react-calendar--doubleView .react-calendar__viewContainer {
|
|
15
|
-
display: flex;
|
|
16
|
-
margin: -0.5em;
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
.react-calendar--doubleView .react-calendar__viewContainer > * {
|
|
20
|
-
width: 50%;
|
|
21
|
-
margin: 0.5em;
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
.react-calendar,
|
|
25
|
-
.react-calendar *,
|
|
26
|
-
.react-calendar *:before,
|
|
27
|
-
.react-calendar *:after {
|
|
28
|
-
-moz-box-sizing: border-box;
|
|
29
|
-
-webkit-box-sizing: border-box;
|
|
30
|
-
box-sizing: border-box;
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
.react-calendar button {
|
|
34
|
-
margin: 0;
|
|
35
|
-
border: 0;
|
|
36
|
-
outline: none;
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
.react-calendar button:enabled:hover {
|
|
40
|
-
cursor: pointer;
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
.react-calendar__navigation {
|
|
44
|
-
display: flex;
|
|
45
|
-
height: 44px;
|
|
46
|
-
margin-bottom: 1em;
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
.react-calendar__navigation button {
|
|
50
|
-
min-width: 44px;
|
|
51
|
-
background: none;
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
.react-calendar__navigation button:disabled {
|
|
55
|
-
background-color: #f0f0f0;
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
.react-calendar__navigation button:enabled:hover,
|
|
59
|
-
.react-calendar__navigation button:enabled:focus {
|
|
60
|
-
background-color: #e6e6e6;
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
.react-calendar__month-view__weekdays {
|
|
64
|
-
text-align: center;
|
|
65
|
-
text-transform: uppercase;
|
|
66
|
-
font: inherit;
|
|
67
|
-
font-size: 0.75em;
|
|
68
|
-
font-weight: bold;
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
.react-calendar__month-view__weekdays__weekday {
|
|
72
|
-
padding: 0.5em;
|
|
73
|
-
}
|
|
74
|
-
|
|
75
|
-
.react-calendar__month-view__weekNumbers .react-calendar__tile {
|
|
76
|
-
display: flex;
|
|
77
|
-
align-items: center;
|
|
78
|
-
justify-content: center;
|
|
79
|
-
font: inherit;
|
|
80
|
-
font-size: 0.75em;
|
|
81
|
-
font-weight: bold;
|
|
82
|
-
}
|
|
83
|
-
|
|
84
|
-
.react-calendar__month-view__days__day--weekend {
|
|
85
|
-
color: #d10000;
|
|
86
|
-
}
|
|
87
|
-
|
|
88
|
-
.react-calendar__month-view__days__day--neighboringMonth,
|
|
89
|
-
.react-calendar__decade-view__years__year--neighboringDecade,
|
|
90
|
-
.react-calendar__century-view__decades__decade--neighboringCentury {
|
|
91
|
-
color: #757575;
|
|
92
|
-
}
|
|
93
|
-
|
|
94
|
-
.react-calendar__year-view .react-calendar__tile,
|
|
95
|
-
.react-calendar__decade-view .react-calendar__tile,
|
|
96
|
-
.react-calendar__century-view .react-calendar__tile {
|
|
97
|
-
padding: 2em 0.5em;
|
|
98
|
-
}
|
|
99
|
-
|
|
100
|
-
.react-calendar__tile {
|
|
101
|
-
max-width: 100%;
|
|
102
|
-
padding: 10px 6.6667px;
|
|
103
|
-
background: none;
|
|
104
|
-
text-align: center;
|
|
105
|
-
font: inherit;
|
|
106
|
-
font-size: 0.833em;
|
|
107
|
-
}
|
|
108
|
-
|
|
109
|
-
.react-calendar__tile:disabled {
|
|
110
|
-
background-color: #f0f0f0;
|
|
111
|
-
color: #ababab;
|
|
112
|
-
}
|
|
113
|
-
|
|
114
|
-
.react-calendar__month-view__days__day--neighboringMonth:disabled,
|
|
115
|
-
.react-calendar__decade-view__years__year--neighboringDecade:disabled,
|
|
116
|
-
.react-calendar__century-view__decades__decade--neighboringCentury:disabled {
|
|
117
|
-
color: #cdcdcd;
|
|
118
|
-
}
|
|
119
|
-
|
|
120
|
-
.react-calendar__tile:enabled:hover,
|
|
121
|
-
.react-calendar__tile:enabled:focus {
|
|
122
|
-
background-color: #e6e6e6;
|
|
123
|
-
}
|
|
124
|
-
|
|
125
|
-
.react-calendar__tile--now {
|
|
126
|
-
background: #ffff76;
|
|
127
|
-
}
|
|
128
|
-
|
|
129
|
-
.react-calendar__tile--now:enabled:hover,
|
|
130
|
-
.react-calendar__tile--now:enabled:focus {
|
|
131
|
-
background: #ffffa9;
|
|
132
|
-
}
|
|
133
|
-
|
|
134
|
-
.react-calendar__tile--hasActive {
|
|
135
|
-
background: #76baff;
|
|
136
|
-
}
|
|
137
|
-
|
|
138
|
-
.react-calendar__tile--hasActive:enabled:hover,
|
|
139
|
-
.react-calendar__tile--hasActive:enabled:focus {
|
|
140
|
-
background: #a9d4ff;
|
|
141
|
-
}
|
|
142
|
-
|
|
143
|
-
.react-calendar__tile--active {
|
|
144
|
-
background: #006edc;
|
|
145
|
-
color: white;
|
|
146
|
-
}
|
|
147
|
-
|
|
148
|
-
.react-calendar__tile--active:enabled:hover,
|
|
149
|
-
.react-calendar__tile--active:enabled:focus {
|
|
150
|
-
background: #1087ff;
|
|
151
|
-
}
|
|
152
|
-
|
|
153
|
-
.react-calendar--selectRange .react-calendar__tile--hover {
|
|
154
|
-
background-color: #e6e6e6;
|
|
155
|
-
}
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
export default function CalendarIcon() {
|
|
2
|
-
return (
|
|
3
|
-
<svg
|
|
4
|
-
stroke="currentColor"
|
|
5
|
-
fill="currentColor"
|
|
6
|
-
strokeWidth="0"
|
|
7
|
-
viewBox="0 0 448 512"
|
|
8
|
-
height="20px"
|
|
9
|
-
width="20px"
|
|
10
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
11
|
-
>
|
|
12
|
-
<path d="M12 192h424c6.6 0 12 5.4 12 12v260c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V204c0-6.6 5.4-12 12-12zm436-44v-36c0-26.5-21.5-48-48-48h-48V12c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v52H160V12c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v52H48C21.5 64 0 85.5 0 112v36c0 6.6 5.4 12 12 12h424c6.6 0 12-5.4 12-12z"></path>
|
|
13
|
-
</svg>
|
|
14
|
-
);
|
|
15
|
-
}
|
package/src/calendar/index.tsx
DELETED
|
@@ -1,91 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
import { useEffect, useRef, useState } from "react";
|
|
3
|
-
import "./calendar.css";
|
|
4
|
-
import Calendar from "react-calendar";
|
|
5
|
-
import CalendarIcon from "./calendar.icon";
|
|
6
|
-
|
|
7
|
-
export default function MyCalendar({
|
|
8
|
-
enabledDates,
|
|
9
|
-
onChange,
|
|
10
|
-
defaultValue = "",
|
|
11
|
-
className = "",
|
|
12
|
-
}: {
|
|
13
|
-
enabledDates: Date[];
|
|
14
|
-
onChange: (e: any) => void;
|
|
15
|
-
defaultValue?: string;
|
|
16
|
-
className?: string;
|
|
17
|
-
}) {
|
|
18
|
-
const modalRef = useRef<HTMLDialogElement>(null);
|
|
19
|
-
const [date, setDate] = useState<any>(defaultValue);
|
|
20
|
-
const [selectedDate, setSelectedDate] = useState<Date>(new Date());
|
|
21
|
-
const [visible, setVisible] = useState(false);
|
|
22
|
-
const isDateDisabled = ({ date, view }: { date: Date; view: any }) => {
|
|
23
|
-
if (view === "month") {
|
|
24
|
-
// Solo aplica en la vista mensual
|
|
25
|
-
return !enabledDates.some(
|
|
26
|
-
(enabledDate) =>
|
|
27
|
-
date.getFullYear() === enabledDate.getFullYear() &&
|
|
28
|
-
date.getMonth() === enabledDate.getMonth() &&
|
|
29
|
-
date.getDate() === enabledDate.getDate()
|
|
30
|
-
);
|
|
31
|
-
}
|
|
32
|
-
return false;
|
|
33
|
-
};
|
|
34
|
-
|
|
35
|
-
function handleChange(e: any) {
|
|
36
|
-
setSelectedDate(e);
|
|
37
|
-
const date = new Date(e);
|
|
38
|
-
const formattedDate = date.toISOString().split("T")[0];
|
|
39
|
-
setDate(formattedDate);
|
|
40
|
-
onChange(e);
|
|
41
|
-
modalRef?.current?.close?.();
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
useEffect(() => {
|
|
45
|
-
setVisible(typeof window != "undefined");
|
|
46
|
-
}, [typeof window]);
|
|
47
|
-
|
|
48
|
-
return (
|
|
49
|
-
<div className="relative">
|
|
50
|
-
<div
|
|
51
|
-
onClick={(e) => modalRef?.current?.showModal?.()}
|
|
52
|
-
className="cursor-pointer flex items-center justify-center"
|
|
53
|
-
>
|
|
54
|
-
<input
|
|
55
|
-
className={[
|
|
56
|
-
"p-2 w-full rounded border shadow cursor-pointer",
|
|
57
|
-
className,
|
|
58
|
-
].join(" ")}
|
|
59
|
-
value={date}
|
|
60
|
-
onChange={(e) => {}}
|
|
61
|
-
readOnly
|
|
62
|
-
/>
|
|
63
|
-
<div className="absolute" style={{ right: "10px" }}>
|
|
64
|
-
<CalendarIcon />
|
|
65
|
-
</div>
|
|
66
|
-
</div>
|
|
67
|
-
|
|
68
|
-
{visible && (
|
|
69
|
-
<dialog
|
|
70
|
-
ref={modalRef}
|
|
71
|
-
onClick={(e) => {
|
|
72
|
-
const element = e.target as HTMLElement;
|
|
73
|
-
|
|
74
|
-
if (element?.id == "my-calendar-modal-item") {
|
|
75
|
-
modalRef.current?.close();
|
|
76
|
-
}
|
|
77
|
-
}}
|
|
78
|
-
id="my-calendar-modal-item"
|
|
79
|
-
>
|
|
80
|
-
<Calendar
|
|
81
|
-
onChange={(e) => {
|
|
82
|
-
handleChange(e);
|
|
83
|
-
}}
|
|
84
|
-
value={selectedDate}
|
|
85
|
-
tileDisabled={isDateDisabled} // Aplica restricciones
|
|
86
|
-
/>
|
|
87
|
-
</dialog>
|
|
88
|
-
)}
|
|
89
|
-
</div>
|
|
90
|
-
);
|
|
91
|
-
}
|