@sinco/react 1.0.15-rc.22 → 1.0.15-rc.28
Sign up to get free protection for your applications and to get access to all the features.
- package/index.css +3 -0
- package/index.js +450 -390
- package/package.json +1 -1
- package/src/lib/Components/Drawer.d.ts +6 -4
- package/src/lib/Components/PageHeader.d.ts +2 -2
- package/src/lib/Components/ToastNotification.d.ts +13 -0
- package/src/lib/Components/index.d.ts +5 -4
- package/src/lib/Hooks/useProgress.d.ts +3 -0
- package/src/lib/Theme/components.d.ts +11 -1
- package/src/lib/Theme/palette.d.ts +0 -1
package/index.css
ADDED
package/index.js
CHANGED
@@ -1,10 +1,8 @@
|
|
1
|
-
import { createTheme
|
1
|
+
import { createTheme } from '@mui/material/styles';
|
2
2
|
import React, { useState, useEffect } from 'react';
|
3
|
-
import { CheckCircleRounded, ErrorRounded, WarningRounded, InfoRounded } from '@mui/icons-material';
|
4
|
-
import { Stack, Typography, Box as Box$1,
|
5
|
-
import Typography$1 from '@mui/material/Typography';
|
3
|
+
import { CheckCircleRounded, ErrorRounded, WarningRounded, InfoRounded, Close, KeyboardArrowDown, KeyboardArrowUp } from '@mui/icons-material';
|
4
|
+
import { Stack, Typography, Drawer, IconButton, AppBar, Toolbar, Box as Box$1, Divider, Button, LinearProgress, alpha } from '@mui/material';
|
6
5
|
import CloseIcon from '@mui/icons-material/Close';
|
7
|
-
import Drawer from '@mui/material/Drawer';
|
8
6
|
|
9
7
|
var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
|
10
8
|
|
@@ -1097,31 +1095,31 @@ const components = {
|
|
1097
1095
|
defaultProps: {
|
1098
1096
|
columnHeaderHeight: 35,
|
1099
1097
|
rowHeight: 32,
|
1100
|
-
density:
|
1098
|
+
density: "compact"
|
1101
1099
|
},
|
1102
1100
|
styleOverrides: {
|
1103
1101
|
iconButtonContainer: {
|
1104
1102
|
fontSize: 16
|
1105
1103
|
},
|
1106
1104
|
columnHeaderTitle: {
|
1107
|
-
fontFamily:
|
1105
|
+
fontFamily: "Roboto",
|
1108
1106
|
fontWeight: 500,
|
1109
1107
|
fontSize: 13,
|
1110
1108
|
lineHeight: 1.5,
|
1111
|
-
letterSpacing: .17
|
1109
|
+
letterSpacing: 0.17
|
1112
1110
|
},
|
1113
1111
|
cell: {
|
1114
|
-
fontFamily:
|
1112
|
+
fontFamily: "Roboto",
|
1115
1113
|
fontWeight: 300,
|
1116
1114
|
fontSize: 12,
|
1117
1115
|
lineHeight: 1.5,
|
1118
|
-
letterSpacing: .17,
|
1116
|
+
letterSpacing: 0.17,
|
1119
1117
|
// COMPONENTES DENTRO DE CELDAS
|
1120
1118
|
".MuiButtonBase-root": {
|
1121
1119
|
lineHeight: 0,
|
1122
1120
|
textTransform: "capitalize"
|
1123
1121
|
},
|
1124
|
-
// CELDA ENFOCADA
|
1122
|
+
// CELDA ENFOCADA
|
1125
1123
|
".MuiDataGrid-cell": {
|
1126
1124
|
"&:focus": {
|
1127
1125
|
outline: "transparent",
|
@@ -1131,17 +1129,17 @@ const components = {
|
|
1131
1129
|
},
|
1132
1130
|
// BOTOM MENU EN LAS CABECERA DE CADA COLUMNA
|
1133
1131
|
menuIconButton: {
|
1134
|
-
|
1135
|
-
fontSize:
|
1132
|
+
svg: {
|
1133
|
+
fontSize: "16px"
|
1136
1134
|
}
|
1137
1135
|
},
|
1138
1136
|
menu: {
|
1139
|
-
|
1140
|
-
fontSize:
|
1137
|
+
svg: {
|
1138
|
+
fontSize: "16px !important"
|
1141
1139
|
},
|
1142
1140
|
".MuiMenuItem-root": {
|
1143
|
-
minHeight:
|
1144
|
-
height:
|
1141
|
+
minHeight: "28px",
|
1142
|
+
height: "28px"
|
1145
1143
|
}
|
1146
1144
|
},
|
1147
1145
|
pinnedRows: {
|
@@ -1150,10 +1148,10 @@ const components = {
|
|
1150
1148
|
root: {
|
1151
1149
|
// FONT-SIZE DE CELDA EN MODO EDICION
|
1152
1150
|
".MuiInputBase-root": {
|
1153
|
-
fontFamily:
|
1151
|
+
fontFamily: "Roboto",
|
1154
1152
|
fontWeight: 300,
|
1155
1153
|
fontSize: 12,
|
1156
|
-
letterSpacing: .17,
|
1154
|
+
letterSpacing: 0.17,
|
1157
1155
|
borderRadius: "0px"
|
1158
1156
|
},
|
1159
1157
|
// CELDA FOCUS
|
@@ -1176,7 +1174,7 @@ const components = {
|
|
1176
1174
|
},
|
1177
1175
|
MuiRating: {
|
1178
1176
|
defaultProps: {
|
1179
|
-
size:
|
1177
|
+
size: "small"
|
1180
1178
|
},
|
1181
1179
|
styleOverrides: {
|
1182
1180
|
sizeSmall: {
|
@@ -1200,18 +1198,18 @@ const components = {
|
|
1200
1198
|
MuiDrawer: {
|
1201
1199
|
styleOverrides: {
|
1202
1200
|
root: {
|
1203
|
-
boxShadow: "0px 3px 1px -2px rgba(24, 39, 75, 0.20), 0px 2px 2px 0px rgba(24, 39, 75, 0.14), 0px 1px 5px 0px rgba(24, 39, 75, 0.12)"
|
1204
|
-
'-webkit-backdrop-filter': '#f0f0f099 !important',
|
1205
|
-
'.MuiBackdrop-root': {
|
1206
|
-
backgroundColor: '#F0f0f099 !important'
|
1207
|
-
}
|
1201
|
+
boxShadow: "0px 3px 1px -2px rgba(24, 39, 75, 0.20), 0px 2px 2px 0px rgba(24, 39, 75, 0.14), 0px 1px 5px 0px rgba(24, 39, 75, 0.12)"
|
1208
1202
|
}
|
1209
1203
|
}
|
1210
1204
|
},
|
1211
1205
|
MuiDialog: {
|
1212
1206
|
styleOverrides: {
|
1213
1207
|
root: {
|
1214
|
-
boxShadow: " 0px 2px 1px -2px rgba(24, 39, 75, 0.20), 0px 1px 1px -1px rgba(24, 39, 75, 0.14), 0px 1px 3px 0px rgba(24, 39, 75, 0.12)"
|
1208
|
+
boxShadow: " 0px 2px 1px -2px rgba(24, 39, 75, 0.20), 0px 1px 1px -1px rgba(24, 39, 75, 0.14), 0px 1px 3px 0px rgba(24, 39, 75, 0.12)",
|
1209
|
+
".MuiBackdrop-root": {
|
1210
|
+
backgroundColor: "#f0f0f099",
|
1211
|
+
backdropFilter: "blur(2px) !important"
|
1212
|
+
}
|
1215
1213
|
}
|
1216
1214
|
}
|
1217
1215
|
},
|
@@ -1225,11 +1223,23 @@ const components = {
|
|
1225
1223
|
},
|
1226
1224
|
MuiCheckbox: {
|
1227
1225
|
variants: [{
|
1226
|
+
props: {
|
1227
|
+
size: "large"
|
1228
|
+
},
|
1229
|
+
style: {
|
1230
|
+
padding: 9,
|
1231
|
+
"& .MuiSvgIcon-fontSizeLarge": {
|
1232
|
+
height: 24,
|
1233
|
+
width: 24,
|
1234
|
+
fontSize: 24
|
1235
|
+
}
|
1236
|
+
}
|
1237
|
+
}, {
|
1228
1238
|
props: {
|
1229
1239
|
size: "small"
|
1230
1240
|
},
|
1231
1241
|
style: {
|
1232
|
-
padding:
|
1242
|
+
padding: 3
|
1233
1243
|
}
|
1234
1244
|
}, {
|
1235
1245
|
props: {
|
@@ -1246,13 +1256,6 @@ const components = {
|
|
1246
1256
|
MuiChip: {
|
1247
1257
|
styleOverrides: {
|
1248
1258
|
sizeSmall: {
|
1249
|
-
fontFamily: "Roboto",
|
1250
|
-
fontSize: "10px",
|
1251
|
-
fontStyle: "normal",
|
1252
|
-
fontWeight: 400,
|
1253
|
-
lineHeight: "10px",
|
1254
|
-
letterSpacing: " 0.15px",
|
1255
|
-
color: "text.primary",
|
1256
1259
|
height: 16
|
1257
1260
|
},
|
1258
1261
|
sizeMedium: {
|
@@ -1261,13 +1264,17 @@ const components = {
|
|
1261
1264
|
root: {
|
1262
1265
|
height: "inherit",
|
1263
1266
|
borderRadius: 4,
|
1264
|
-
".MuiChip-
|
1267
|
+
".MuiChip-deleteIconXsmall": {
|
1265
1268
|
height: 12,
|
1266
1269
|
width: 12
|
1267
1270
|
},
|
1268
|
-
".MuiChip-
|
1271
|
+
".MuiChip-deleteIconSmall": {
|
1269
1272
|
height: 16,
|
1270
1273
|
widht: 16
|
1274
|
+
},
|
1275
|
+
".MuiChip-deleteIconMedium": {
|
1276
|
+
height: 20,
|
1277
|
+
widht: 20
|
1271
1278
|
}
|
1272
1279
|
}
|
1273
1280
|
}
|
@@ -1283,7 +1290,7 @@ const components = {
|
|
1283
1290
|
},
|
1284
1291
|
styleOverrides: {
|
1285
1292
|
root: {
|
1286
|
-
paddingY: .5,
|
1293
|
+
paddingY: 0.5,
|
1287
1294
|
paddingX: 2,
|
1288
1295
|
alignItems: "center",
|
1289
1296
|
border: "none"
|
@@ -1292,37 +1299,51 @@ const components = {
|
|
1292
1299
|
},
|
1293
1300
|
MuiButton: {
|
1294
1301
|
styleOverrides: {
|
1295
|
-
|
1302
|
+
startIcon: {
|
1296
1303
|
marginLeft: 2
|
1297
1304
|
},
|
1298
|
-
|
1299
|
-
|
1300
|
-
width: 14
|
1301
|
-
},
|
1302
|
-
iconSizeMedium: {
|
1303
|
-
height: 18,
|
1304
|
-
width: 18
|
1305
|
-
},
|
1306
|
-
iconSizeLarge: {
|
1307
|
-
height: 18,
|
1308
|
-
width: 22
|
1305
|
+
endIcon: {
|
1306
|
+
marginRight: 2
|
1309
1307
|
},
|
1310
1308
|
sizeSmall: {
|
1311
|
-
height: 26
|
1309
|
+
height: 26,
|
1310
|
+
".MuiSvgIcon-fontSizeSmall": {
|
1311
|
+
height: 16,
|
1312
|
+
width: 16
|
1313
|
+
},
|
1314
|
+
".MuiSvgIcon-fontSizeMedium": {
|
1315
|
+
height: 18,
|
1316
|
+
width: 18
|
1317
|
+
},
|
1318
|
+
".MuiSvgIcon-fontSizeLarge": {
|
1319
|
+
height: 20,
|
1320
|
+
width: 20
|
1321
|
+
}
|
1312
1322
|
},
|
1313
1323
|
sizeMedium: {
|
1314
1324
|
height: 32,
|
1325
|
+
".MuiSvgIcon-fontSizeSmall": {
|
1326
|
+
height: 16,
|
1327
|
+
width: 16
|
1328
|
+
},
|
1315
1329
|
".MuiSvgIcon-fontSizeMedium": {
|
1316
1330
|
height: 18,
|
1317
1331
|
width: 18
|
1332
|
+
},
|
1333
|
+
".MuiSvgIcon-fontSizeLarge": {
|
1334
|
+
height: 20,
|
1335
|
+
width: 20
|
1318
1336
|
}
|
1319
1337
|
},
|
1320
1338
|
sizeLarge: {
|
1321
1339
|
height: 38,
|
1322
|
-
|
1323
|
-
|
1324
|
-
|
1325
|
-
|
1340
|
+
".MuiSvgIcon-fontSizeSmall": {
|
1341
|
+
height: 16,
|
1342
|
+
width: 16
|
1343
|
+
},
|
1344
|
+
"&.MuiSvgIcon-fontSizeMedium": {
|
1345
|
+
height: 18,
|
1346
|
+
width: 18
|
1326
1347
|
}
|
1327
1348
|
}
|
1328
1349
|
}
|
@@ -1426,15 +1447,12 @@ const components = {
|
|
1426
1447
|
MuiIconButton: {
|
1427
1448
|
styleOverrides: {
|
1428
1449
|
sizeSmall: {
|
1429
|
-
|
1430
|
-
padding: 4
|
1450
|
+
padding: 3
|
1431
1451
|
},
|
1432
1452
|
sizeMedium: {
|
1433
|
-
|
1434
|
-
padding: 13
|
1453
|
+
padding: 12
|
1435
1454
|
},
|
1436
1455
|
sizeLarge: {
|
1437
|
-
fontSize: 33,
|
1438
1456
|
padding: 17
|
1439
1457
|
}
|
1440
1458
|
}
|
@@ -1508,12 +1526,12 @@ const components = {
|
|
1508
1526
|
MuiInputLabel: {
|
1509
1527
|
styleOverrides: {
|
1510
1528
|
asterisk: {
|
1511
|
-
color:
|
1529
|
+
color: "#D14343"
|
1512
1530
|
},
|
1513
1531
|
root: {
|
1514
|
-
display:
|
1515
|
-
gap:
|
1516
|
-
flexDirection:
|
1532
|
+
display: "flex",
|
1533
|
+
gap: ".2rem",
|
1534
|
+
flexDirection: "row-reverse"
|
1517
1535
|
},
|
1518
1536
|
outlined: {
|
1519
1537
|
"&.MuiInputLabel-outlined.MuiInputLabel-sizeSmall ": {
|
@@ -1544,14 +1562,26 @@ const components = {
|
|
1544
1562
|
size: "small"
|
1545
1563
|
},
|
1546
1564
|
style: {
|
1547
|
-
padding:
|
1565
|
+
padding: 3
|
1548
1566
|
}
|
1549
1567
|
}, {
|
1550
1568
|
props: {
|
1551
1569
|
size: "medium"
|
1552
1570
|
},
|
1553
1571
|
style: {
|
1554
|
-
padding:
|
1572
|
+
padding: 4
|
1573
|
+
}
|
1574
|
+
}, {
|
1575
|
+
props: {
|
1576
|
+
size: "large"
|
1577
|
+
},
|
1578
|
+
style: {
|
1579
|
+
padding: 9,
|
1580
|
+
"& .MuiSvgIcon-fontSizeLarge": {
|
1581
|
+
width: 24,
|
1582
|
+
height: 24,
|
1583
|
+
fontSize: 24
|
1584
|
+
}
|
1555
1585
|
}
|
1556
1586
|
}],
|
1557
1587
|
defaultProps: {
|
@@ -1559,6 +1589,17 @@ const components = {
|
|
1559
1589
|
}
|
1560
1590
|
},
|
1561
1591
|
MuiSwitch: {
|
1592
|
+
variants: [{
|
1593
|
+
props: {
|
1594
|
+
size: "small"
|
1595
|
+
},
|
1596
|
+
style: {
|
1597
|
+
height: 22,
|
1598
|
+
".MuiSwitch-switchBase": {
|
1599
|
+
padding: 3
|
1600
|
+
}
|
1601
|
+
}
|
1602
|
+
}],
|
1562
1603
|
defaultProps: {
|
1563
1604
|
size: "small"
|
1564
1605
|
}
|
@@ -1588,286 +1629,145 @@ const components = {
|
|
1588
1629
|
|
1589
1630
|
const palette = {
|
1590
1631
|
primary: {
|
1591
|
-
50:
|
1592
|
-
100:
|
1593
|
-
200:
|
1594
|
-
300:
|
1595
|
-
light:
|
1596
|
-
main:
|
1597
|
-
600:
|
1598
|
-
700:
|
1599
|
-
800:
|
1600
|
-
dark:
|
1601
|
-
A100:
|
1602
|
-
A200:
|
1603
|
-
A400:
|
1604
|
-
A700:
|
1605
|
-
contrastText:
|
1606
|
-
},
|
1607
|
-
secondary: {
|
1608
|
-
50: "#E0F7FA",
|
1609
|
-
100: "#B3EBF2",
|
1610
|
-
200: "#80DEEA",
|
1611
|
-
300: "#4DD0E1",
|
1612
|
-
light: "#26C6DA",
|
1613
|
-
main: "#00BCD4",
|
1614
|
-
600: "#00B6CF",
|
1615
|
-
700: "#00ADC9",
|
1616
|
-
800: "#00A5C3",
|
1617
|
-
dark: "#0097B9",
|
1618
|
-
A100: "#E2F9FF",
|
1619
|
-
A200: "#AFEEFF",
|
1620
|
-
A400: "#7CE3FF",
|
1621
|
-
A700: "#63DDFF",
|
1622
|
-
contrastText: "#ffffff"
|
1623
|
-
},
|
1624
|
-
error: {
|
1625
|
-
50: "#F9E8E8",
|
1626
|
-
100: "#F1C7C7",
|
1627
|
-
200: "#E8A1A1",
|
1628
|
-
300: "#DF7B7B",
|
1629
|
-
light: "#D85F5F",
|
1630
|
-
main: "#D14343",
|
1631
|
-
600: "#CC3D3D",
|
1632
|
-
700: "#C63434",
|
1633
|
-
800: "#C02C2C",
|
1634
|
-
dark: "#B51E1E",
|
1635
|
-
A100: "#FFECEC",
|
1636
|
-
A200: "#FFB9B9",
|
1637
|
-
A400: "#FF8686",
|
1638
|
-
A700: "#FF6D6D",
|
1639
|
-
contrastText: "#ffffff"
|
1640
|
-
},
|
1641
|
-
warning: {
|
1642
|
-
50: "#FFF0E0",
|
1643
|
-
100: "#FEDAB3",
|
1644
|
-
200: "#FDC280",
|
1645
|
-
300: "#FCAA4D",
|
1646
|
-
light: "#FC9726",
|
1647
|
-
main: "#FB8500",
|
1648
|
-
600: "#FA7D00",
|
1649
|
-
700: "#FA7200",
|
1650
|
-
800: "#F96800",
|
1651
|
-
dark: "#F85500",
|
1652
|
-
A100: "#FFFFFF",
|
1653
|
-
A200: "#FFF1EB",
|
1654
|
-
A400: "#FFCCB8",
|
1655
|
-
A700: "#FFBA9F",
|
1656
|
-
contrastText: "#ffffff"
|
1657
|
-
},
|
1658
|
-
info: {
|
1659
|
-
50: "#E6F3F8",
|
1660
|
-
100: "#C0E2EE",
|
1661
|
-
200: "#96CFE2",
|
1662
|
-
300: "#6CBCD6",
|
1663
|
-
light: "#4DADCE",
|
1664
|
-
main: "#2D9FC5",
|
1665
|
-
600: "#2897BF",
|
1666
|
-
700: "#228DB8",
|
1667
|
-
800: "#1C83B0",
|
1668
|
-
dark: "#1172A3",
|
1669
|
-
A100: "#D4EFFF",
|
1670
|
-
A200: "#A1DCFF",
|
1671
|
-
A400: "#6ECAFF",
|
1672
|
-
A700: "#54C1FF",
|
1673
|
-
contrastText: "#ffffff"
|
1674
|
-
},
|
1675
|
-
success: {
|
1676
|
-
50: "#F2F9E7",
|
1677
|
-
100: "#DDEFC4",
|
1678
|
-
200: "#C7E49D",
|
1679
|
-
300: "#B1D975",
|
1680
|
-
light: "#A0D158",
|
1681
|
-
main: "#8FC93A",
|
1682
|
-
600: "#87C334",
|
1683
|
-
700: "#7CBC2C",
|
1684
|
-
800: "#72B525",
|
1685
|
-
dark: "#60A918",
|
1686
|
-
A100: "#EDFFDE",
|
1687
|
-
A200: "#D2FFAB",
|
1688
|
-
A400: "#B6FF78",
|
1689
|
-
A700: "#A9FF5E",
|
1690
|
-
contrastText: "#ffffff"
|
1691
|
-
},
|
1692
|
-
grey: {
|
1693
|
-
50: "#F7F7F8",
|
1694
|
-
100: "#EAEBEC",
|
1695
|
-
200: "#DCDEE0",
|
1696
|
-
300: "#CED1D4",
|
1697
|
-
400: "#C4C7CA",
|
1698
|
-
500: "#B9BDC1",
|
1699
|
-
600: "#B2B7BB",
|
1700
|
-
700: "#AAAEB3",
|
1701
|
-
800: "#A2A6AB",
|
1702
|
-
900: "#93989E",
|
1703
|
-
A100: "#FFFFFF",
|
1704
|
-
A200: "#FFFFFF",
|
1705
|
-
A400: "#D4EAFF",
|
1706
|
-
A700: "#BBDDFF"
|
1707
|
-
},
|
1708
|
-
text: {
|
1709
|
-
primary: "#101840de",
|
1710
|
-
secondary: "#10184099",
|
1711
|
-
disabled: "#10184061"
|
1712
|
-
},
|
1713
|
-
action: {
|
1714
|
-
active: "rgba(16, 24, 64, 0.54)",
|
1715
|
-
hover: "rgba(16, 24, 64, 0.04)",
|
1716
|
-
selected: "rgba(16, 24, 64, 0.08)",
|
1717
|
-
disabled: "rgba(16, 24, 64, 0.26)",
|
1718
|
-
disabledBackground: "rgba(16, 24, 64, 0.12)",
|
1719
|
-
focus: "rgba(16, 24, 64, 0.12)"
|
1720
|
-
},
|
1721
|
-
background: {
|
1722
|
-
default: '#f5f5f5',
|
1723
|
-
paper: "#fff"
|
1724
|
-
},
|
1725
|
-
common: {
|
1726
|
-
black: '#000',
|
1727
|
-
white: '#fff'
|
1728
|
-
},
|
1729
|
-
divider: "rgba(16,24,64,0.12)"
|
1730
|
-
};
|
1731
|
-
const paletteADPRO = {
|
1732
|
-
primary: {
|
1733
|
-
50: "#F8FAFB",
|
1734
|
-
100: "#E6EFF0",
|
1735
|
-
200: "#D2E3E4",
|
1736
|
-
300: "#82C6CB",
|
1737
|
-
400: "#2B9DA7",
|
1738
|
-
500: "#058C97",
|
1739
|
-
600: "#04848F",
|
1740
|
-
700: "#047984",
|
1741
|
-
800: "#036F7A",
|
1742
|
-
900: "#015C69",
|
1743
|
-
A100: "#98F0FF",
|
1744
|
-
A200: "#65E9FF",
|
1745
|
-
A400: "#32E1FF",
|
1746
|
-
A700: "#32E1FF"
|
1632
|
+
50: '#E4ECF4',
|
1633
|
+
100: '#BCD0E3',
|
1634
|
+
200: '#8FB1D0',
|
1635
|
+
300: '#6392BD',
|
1636
|
+
light: '#417AAE',
|
1637
|
+
main: '#2063A0',
|
1638
|
+
600: '#1C5B98',
|
1639
|
+
700: '#18518E',
|
1640
|
+
800: '#134784',
|
1641
|
+
dark: '#0B3573',
|
1642
|
+
A100: '#A5C5FF',
|
1643
|
+
A200: '#72A4FF',
|
1644
|
+
A400: '#3F83FF',
|
1645
|
+
A700: '#2572FF',
|
1646
|
+
contrastText: '#ffffff'
|
1747
1647
|
},
|
1748
1648
|
secondary: {
|
1749
|
-
50:
|
1750
|
-
100:
|
1751
|
-
200:
|
1752
|
-
300:
|
1753
|
-
light:
|
1754
|
-
main:
|
1755
|
-
600:
|
1756
|
-
700:
|
1757
|
-
800:
|
1758
|
-
dark:
|
1759
|
-
A100:
|
1760
|
-
A200:
|
1761
|
-
A400:
|
1762
|
-
A700:
|
1763
|
-
contrastText:
|
1649
|
+
50: '#E0F7FA',
|
1650
|
+
100: '#B3EBF2',
|
1651
|
+
200: '#80DEEA',
|
1652
|
+
300: '#4DD0E1',
|
1653
|
+
light: '#26C6DA',
|
1654
|
+
main: '#00BCD4',
|
1655
|
+
600: '#00B6CF',
|
1656
|
+
700: '#00ADC9',
|
1657
|
+
800: '#00A5C3',
|
1658
|
+
dark: '#0097B9',
|
1659
|
+
A100: '#E2F9FF',
|
1660
|
+
A200: '#AFEEFF',
|
1661
|
+
A400: '#7CE3FF',
|
1662
|
+
A700: '#63DDFF',
|
1663
|
+
contrastText: '#ffffff'
|
1764
1664
|
},
|
1765
1665
|
error: {
|
1766
|
-
50:
|
1767
|
-
100:
|
1768
|
-
200:
|
1769
|
-
300:
|
1770
|
-
light:
|
1771
|
-
main:
|
1772
|
-
600:
|
1773
|
-
700:
|
1774
|
-
800:
|
1775
|
-
dark:
|
1776
|
-
A100:
|
1777
|
-
A200:
|
1778
|
-
A400:
|
1779
|
-
A700:
|
1780
|
-
contrastText:
|
1666
|
+
50: '#F9E8E8',
|
1667
|
+
100: '#F1C7C7',
|
1668
|
+
200: '#E8A1A1',
|
1669
|
+
300: '#DF7B7B',
|
1670
|
+
light: '#D85F5F',
|
1671
|
+
main: '#D14343',
|
1672
|
+
600: '#CC3D3D',
|
1673
|
+
700: '#C63434',
|
1674
|
+
800: '#C02C2C',
|
1675
|
+
dark: '#B51E1E',
|
1676
|
+
A100: '#FFECEC',
|
1677
|
+
A200: '#FFB9B9',
|
1678
|
+
A400: '#FF8686',
|
1679
|
+
A700: '#FF6D6D',
|
1680
|
+
contrastText: '#ffffff'
|
1781
1681
|
},
|
1782
1682
|
warning: {
|
1783
|
-
50:
|
1784
|
-
100:
|
1785
|
-
200:
|
1786
|
-
300:
|
1787
|
-
light:
|
1788
|
-
main:
|
1789
|
-
600:
|
1790
|
-
700:
|
1791
|
-
800:
|
1792
|
-
dark:
|
1793
|
-
A100:
|
1794
|
-
A200:
|
1795
|
-
A400:
|
1796
|
-
A700:
|
1797
|
-
contrastText:
|
1683
|
+
50: '#FFF0E0',
|
1684
|
+
100: '#FEDAB3',
|
1685
|
+
200: '#FDC280',
|
1686
|
+
300: '#FCAA4D',
|
1687
|
+
light: '#FC9726',
|
1688
|
+
main: '#FB8500',
|
1689
|
+
600: '#FA7D00',
|
1690
|
+
700: '#FA7200',
|
1691
|
+
800: '#F96800',
|
1692
|
+
dark: '#F85500',
|
1693
|
+
A100: '#FFFFFF',
|
1694
|
+
A200: '#FFF1EB',
|
1695
|
+
A400: '#FFCCB8',
|
1696
|
+
A700: '#FFBA9F',
|
1697
|
+
contrastText: '#ffffff'
|
1798
1698
|
},
|
1799
1699
|
info: {
|
1800
|
-
50:
|
1801
|
-
100:
|
1802
|
-
200:
|
1803
|
-
300:
|
1804
|
-
light:
|
1805
|
-
main:
|
1806
|
-
600:
|
1807
|
-
700:
|
1808
|
-
800:
|
1809
|
-
dark:
|
1810
|
-
A100:
|
1811
|
-
A200:
|
1812
|
-
A400:
|
1813
|
-
A700:
|
1814
|
-
contrastText:
|
1700
|
+
50: '#E6F3F8',
|
1701
|
+
100: '#C0E2EE',
|
1702
|
+
200: '#96CFE2',
|
1703
|
+
300: '#6CBCD6',
|
1704
|
+
light: '#4DADCE',
|
1705
|
+
main: '#2D9FC5',
|
1706
|
+
600: '#2897BF',
|
1707
|
+
700: '#228DB8',
|
1708
|
+
800: '#1C83B0',
|
1709
|
+
dark: '#1172A3',
|
1710
|
+
A100: '#D4EFFF',
|
1711
|
+
A200: '#A1DCFF',
|
1712
|
+
A400: '#6ECAFF',
|
1713
|
+
A700: '#54C1FF',
|
1714
|
+
contrastText: '#ffffff'
|
1815
1715
|
},
|
1816
1716
|
success: {
|
1817
|
-
50:
|
1818
|
-
100:
|
1819
|
-
200:
|
1820
|
-
300:
|
1821
|
-
light:
|
1822
|
-
main:
|
1823
|
-
600:
|
1824
|
-
700:
|
1825
|
-
800:
|
1826
|
-
dark:
|
1827
|
-
A100:
|
1828
|
-
A200:
|
1829
|
-
A400:
|
1830
|
-
A700:
|
1831
|
-
contrastText:
|
1717
|
+
50: '#F2F9E7',
|
1718
|
+
100: '#DDEFC4',
|
1719
|
+
200: '#C7E49D',
|
1720
|
+
300: '#B1D975',
|
1721
|
+
light: '#A0D158',
|
1722
|
+
main: '#8FC93A',
|
1723
|
+
600: '#87C334',
|
1724
|
+
700: '#7CBC2C',
|
1725
|
+
800: '#72B525',
|
1726
|
+
dark: '#60A918',
|
1727
|
+
A100: '#EDFFDE',
|
1728
|
+
A200: '#D2FFAB',
|
1729
|
+
A400: '#B6FF78',
|
1730
|
+
A700: '#A9FF5E',
|
1731
|
+
contrastText: '#ffffff'
|
1832
1732
|
},
|
1833
1733
|
grey: {
|
1834
|
-
50:
|
1835
|
-
100:
|
1836
|
-
200:
|
1837
|
-
300:
|
1838
|
-
400:
|
1839
|
-
500:
|
1840
|
-
600:
|
1841
|
-
700:
|
1842
|
-
800:
|
1843
|
-
900:
|
1844
|
-
A100:
|
1845
|
-
A200:
|
1846
|
-
A400:
|
1847
|
-
A700:
|
1734
|
+
50: '#F7F7F8',
|
1735
|
+
100: '#EAEBEC',
|
1736
|
+
200: '#DCDEE0',
|
1737
|
+
300: '#CED1D4',
|
1738
|
+
400: '#C4C7CA',
|
1739
|
+
500: '#B9BDC1',
|
1740
|
+
600: '#B2B7BB',
|
1741
|
+
700: '#AAAEB3',
|
1742
|
+
800: '#A2A6AB',
|
1743
|
+
900: '#93989E',
|
1744
|
+
A100: '#FFFFFF',
|
1745
|
+
A200: '#FFFFFF',
|
1746
|
+
A400: '#D4EAFF',
|
1747
|
+
A700: '#BBDDFF'
|
1848
1748
|
},
|
1849
1749
|
text: {
|
1850
|
-
primary:
|
1851
|
-
secondary:
|
1852
|
-
disabled:
|
1750
|
+
primary: '#101840de',
|
1751
|
+
secondary: '#10184099',
|
1752
|
+
disabled: '#10184061'
|
1853
1753
|
},
|
1854
1754
|
action: {
|
1855
|
-
active:
|
1856
|
-
hover:
|
1857
|
-
selected:
|
1858
|
-
disabled:
|
1859
|
-
disabledBackground:
|
1860
|
-
focus:
|
1755
|
+
active: '#0a12288a',
|
1756
|
+
hover: '#0a122866',
|
1757
|
+
selected: '#0a1228cc',
|
1758
|
+
disabled: '#10184042',
|
1759
|
+
disabledBackground: '#1018401f',
|
1760
|
+
focus: '#1018401f'
|
1861
1761
|
},
|
1862
1762
|
background: {
|
1863
1763
|
default: '#f5f5f5',
|
1864
|
-
paper:
|
1764
|
+
paper: '#fff'
|
1865
1765
|
},
|
1866
1766
|
common: {
|
1867
1767
|
black: '#000',
|
1868
1768
|
white: '#fff'
|
1869
1769
|
},
|
1870
|
-
divider:
|
1770
|
+
divider: '#0000001f'
|
1871
1771
|
};
|
1872
1772
|
|
1873
1773
|
function _extends() {
|
@@ -2020,7 +1920,7 @@ const typography = {
|
|
2020
1920
|
},
|
2021
1921
|
body3: {
|
2022
1922
|
fontFamily: 'Roboto',
|
2023
|
-
fontWeight:
|
1923
|
+
fontWeight: 300,
|
2024
1924
|
fontSize: 12,
|
2025
1925
|
letterSpacing: 0.17,
|
2026
1926
|
lineHeight: 1.2,
|
@@ -2136,7 +2036,24 @@ const themeAdproOptions = {
|
|
2136
2036
|
spacing: 8,
|
2137
2037
|
mixins,
|
2138
2038
|
breakpoints,
|
2139
|
-
palette:
|
2039
|
+
palette: Object.assign({
|
2040
|
+
primary: {
|
2041
|
+
50: '#F8FAFB',
|
2042
|
+
100: '#E6EFF0',
|
2043
|
+
200: '#D2E3E4',
|
2044
|
+
300: '#82C6CB',
|
2045
|
+
400: '#2B9DA7',
|
2046
|
+
500: '#058C97',
|
2047
|
+
600: '#04848F',
|
2048
|
+
700: '#047984',
|
2049
|
+
800: '#036F7A',
|
2050
|
+
900: '#015C69',
|
2051
|
+
A100: '#98F0FF',
|
2052
|
+
A200: '#65E9FF',
|
2053
|
+
A400: '#32E1FF',
|
2054
|
+
A700: '#32E1FF'
|
2055
|
+
}
|
2056
|
+
}, palette)
|
2140
2057
|
};
|
2141
2058
|
|
2142
2059
|
const SincoTheme = createTheme(Object.assign({}, themeOptions));
|
@@ -2739,80 +2656,73 @@ for (var COLLECTION_NAME in DOMIterables) {
|
|
2739
2656
|
|
2740
2657
|
handlePrototype(DOMTokenListPrototype, 'DOMTokenList');
|
2741
2658
|
|
2742
|
-
const
|
2743
|
-
|
2744
|
-
|
2745
|
-
|
2746
|
-
|
2747
|
-
|
2748
|
-
|
2749
|
-
};
|
2750
|
-
const DrawerHeader = {
|
2751
|
-
display: 'flex',
|
2752
|
-
alignContent: 'center',
|
2753
|
-
justifyContent: 'space-between',
|
2754
|
-
backgroundColor: 'secondary.main',
|
2755
|
-
py: '12px',
|
2756
|
-
px: '8px'
|
2757
|
-
};
|
2758
|
-
const DrawerContent = {
|
2759
|
-
display: 'flex',
|
2760
|
-
overflow: 'auto',
|
2761
|
-
alignItems: 'flex-start',
|
2762
|
-
flexDirection: 'column',
|
2763
|
-
height: '-webkit-fill-available',
|
2764
|
-
py: '12px',
|
2765
|
-
px: '8px'
|
2766
|
-
};
|
2767
|
-
const DrawerActions = {
|
2768
|
-
display: 'flex',
|
2769
|
-
alignContent: 'center',
|
2770
|
-
justifyContent: 'flex-end',
|
2771
|
-
borderTop: '1px solid rgba(16, 24, 64, 0.23)',
|
2772
|
-
backgroundColor: '#F1F0EE',
|
2773
|
-
gap: '8px',
|
2774
|
-
mt: '4px',
|
2775
|
-
py: '12px',
|
2776
|
-
px: '8px'
|
2659
|
+
const borderStyles = {
|
2660
|
+
left: {
|
2661
|
+
borderTopRightRadius: '4px'
|
2662
|
+
},
|
2663
|
+
right: {
|
2664
|
+
borderTopLeftRadius: '4px'
|
2665
|
+
}
|
2777
2666
|
};
|
2778
2667
|
const DrawerComponent = ({
|
2779
2668
|
title,
|
2780
2669
|
children,
|
2781
|
-
|
2670
|
+
actions,
|
2782
2671
|
showActions,
|
2783
|
-
|
2672
|
+
anchor: _anchor = 'left',
|
2784
2673
|
width,
|
2785
2674
|
open,
|
2786
|
-
onClose
|
2675
|
+
onClose,
|
2676
|
+
sx
|
2787
2677
|
}) => {
|
2788
2678
|
const [stateActions, setActionsState] = useState(showActions);
|
2789
2679
|
const handleDrawerActions = () => {
|
2790
2680
|
setActionsState(true);
|
2791
2681
|
};
|
2792
|
-
|
2793
|
-
|
2794
|
-
|
2795
|
-
anchor: position,
|
2682
|
+
const paperSx = borderStyles[_anchor];
|
2683
|
+
return /*#__PURE__*/React.createElement(Drawer, {
|
2684
|
+
anchor: _anchor,
|
2796
2685
|
open: open,
|
2797
|
-
onClose: onClose
|
2798
|
-
|
2799
|
-
|
2800
|
-
|
2801
|
-
|
2802
|
-
|
2803
|
-
|
2686
|
+
onClose: onClose,
|
2687
|
+
sx: {
|
2688
|
+
'& .MuiBackdrop-root': {
|
2689
|
+
backgroundColor: '#F0f0f099 !important',
|
2690
|
+
backdropFilter: 'blur(4px)'
|
2691
|
+
},
|
2692
|
+
'& .MuiDrawer-paper': Object.assign({
|
2693
|
+
width: width
|
2694
|
+
}, paperSx)
|
2695
|
+
}
|
2696
|
+
}, /*#__PURE__*/React.createElement(Stack, {
|
2697
|
+
height: "100%"
|
2698
|
+
}, /*#__PURE__*/React.createElement(Stack, {
|
2699
|
+
justifyContent: "space-between",
|
2700
|
+
alignItems: "center",
|
2701
|
+
direction: "row",
|
2702
|
+
py: 1.5,
|
2703
|
+
px: 1,
|
2704
|
+
bgcolor: "secondary.main"
|
2705
|
+
}, /*#__PURE__*/React.createElement(Typography, {
|
2706
|
+
sx: Object.assign({}, sx),
|
2804
2707
|
variant: "h6"
|
2805
|
-
}, title), /*#__PURE__*/React.createElement(
|
2708
|
+
}, title), /*#__PURE__*/React.createElement(IconButton, {
|
2806
2709
|
onClick: onClose,
|
2807
2710
|
size: "small"
|
2808
2711
|
}, /*#__PURE__*/React.createElement(CloseIcon, {
|
2809
2712
|
fontSize: "small"
|
2810
|
-
})))
|
2811
|
-
|
2713
|
+
}))), /*#__PURE__*/React.createElement(Stack, {
|
2714
|
+
py: 1.5,
|
2715
|
+
px: 1,
|
2716
|
+
overflow: "auto",
|
2717
|
+
height: "-webkit-fill-available",
|
2812
2718
|
onClick: handleDrawerActions
|
2813
|
-
}, children), stateActions && /*#__PURE__*/React.createElement(
|
2814
|
-
|
2815
|
-
|
2719
|
+
}, children), stateActions && /*#__PURE__*/React.createElement(Stack, {
|
2720
|
+
gap: 1,
|
2721
|
+
mt: 0.5,
|
2722
|
+
py: 1.5,
|
2723
|
+
px: 1,
|
2724
|
+
bgcolor: "#F1F0EE"
|
2725
|
+
}, actions)));
|
2816
2726
|
};
|
2817
2727
|
|
2818
2728
|
const FooterActionComponent = ({
|
@@ -2829,22 +2739,20 @@ const FooterActionComponent = ({
|
|
2829
2739
|
}
|
2830
2740
|
}, /*#__PURE__*/React.createElement(Toolbar, {
|
2831
2741
|
sx: {
|
2832
|
-
gap: 1.5
|
2742
|
+
gap: 1.5,
|
2743
|
+
minHeight: "50px !important"
|
2833
2744
|
}
|
2834
2745
|
}, renderLeftContent, /*#__PURE__*/React.createElement(Box$1, {
|
2835
2746
|
flexGrow: 1
|
2836
2747
|
}), /*#__PURE__*/React.createElement(Box$1, null, labelChangeCounter), renderRightContent));
|
2837
2748
|
};
|
2838
2749
|
|
2839
|
-
function
|
2750
|
+
function PageHeaderWrapper({
|
2840
2751
|
item,
|
2841
|
-
|
2752
|
+
color,
|
2842
2753
|
variant
|
2843
2754
|
}) {
|
2844
|
-
return /*#__PURE__*/React.createElement(
|
2845
|
-
variant: variant,
|
2846
|
-
color: Color
|
2847
|
-
}, item);
|
2755
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, item);
|
2848
2756
|
}
|
2849
2757
|
const PageHeaderComponent = ({
|
2850
2758
|
title,
|
@@ -2871,16 +2779,16 @@ const PageHeaderComponent = ({
|
|
2871
2779
|
gap: 1.5,
|
2872
2780
|
flexDirection: "row",
|
2873
2781
|
alignItems: "center"
|
2874
|
-
}, buttonBack, /*#__PURE__*/React.createElement(Stack, null, /*#__PURE__*/React.createElement(Stack, null, /*#__PURE__*/React.createElement(
|
2875
|
-
|
2782
|
+
}, buttonBack, /*#__PURE__*/React.createElement(Stack, null, /*#__PURE__*/React.createElement(Stack, null, /*#__PURE__*/React.createElement(PageHeaderWrapper, {
|
2783
|
+
color: "text.primary",
|
2876
2784
|
item: title,
|
2877
2785
|
variant: "h6"
|
2878
2786
|
})), subtitle && /*#__PURE__*/React.createElement(Stack, {
|
2879
2787
|
alignItems: "center",
|
2880
2788
|
flexDirection: "row",
|
2881
2789
|
gap: 2
|
2882
|
-
}, /*#__PURE__*/React.createElement(
|
2883
|
-
|
2790
|
+
}, /*#__PURE__*/React.createElement(PageHeaderWrapper, {
|
2791
|
+
color: "text.secondary",
|
2884
2792
|
item: subtitle,
|
2885
2793
|
variant: "caption"
|
2886
2794
|
})))), actions && /*#__PURE__*/React.createElement(Stack, {
|
@@ -2890,6 +2798,158 @@ const PageHeaderComponent = ({
|
|
2890
2798
|
}, actions)));
|
2891
2799
|
};
|
2892
2800
|
|
2801
|
+
const useProgress = timeProgress => {
|
2802
|
+
const [progress, setProgress] = useState(100);
|
2803
|
+
useEffect(() => {
|
2804
|
+
const interval = setInterval(() => {
|
2805
|
+
setProgress(prev => {
|
2806
|
+
if (prev <= 0) {
|
2807
|
+
clearInterval(interval);
|
2808
|
+
}
|
2809
|
+
return prev - 1;
|
2810
|
+
});
|
2811
|
+
}, timeProgress * 10);
|
2812
|
+
return () => {
|
2813
|
+
clearInterval(interval);
|
2814
|
+
};
|
2815
|
+
}, [timeProgress]);
|
2816
|
+
return {
|
2817
|
+
progressToast: progress
|
2818
|
+
};
|
2819
|
+
};
|
2820
|
+
|
2821
|
+
const ToastNotificationComponent = toast => {
|
2822
|
+
const [stateOptions, setStateOptions] = useState(true);
|
2823
|
+
const [stateToast, setStateToast] = useState(true);
|
2824
|
+
const timeProgress = toast.time || 10;
|
2825
|
+
const {
|
2826
|
+
progressToast
|
2827
|
+
} = useProgress(timeProgress);
|
2828
|
+
const toastColorConfig = toast.type || "info";
|
2829
|
+
const toastIconOption = {
|
2830
|
+
success: /*#__PURE__*/React.createElement(CheckCircleRounded, null),
|
2831
|
+
error: /*#__PURE__*/React.createElement(ErrorRounded, null),
|
2832
|
+
warning: /*#__PURE__*/React.createElement(WarningRounded, null),
|
2833
|
+
info: /*#__PURE__*/React.createElement(InfoRounded, null)
|
2834
|
+
};
|
2835
|
+
const ToastIconConfig = toastIconOption[toast.type || "info"];
|
2836
|
+
const closeToast = () => {
|
2837
|
+
setStateToast(false);
|
2838
|
+
};
|
2839
|
+
const toggleToastOptions = () => {
|
2840
|
+
setStateOptions(prevShowOptions => !prevShowOptions);
|
2841
|
+
};
|
2842
|
+
useEffect(() => {
|
2843
|
+
progressToast <= 0 && setStateToast(false);
|
2844
|
+
}, [progressToast]);
|
2845
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, stateToast && /*#__PURE__*/React.createElement(Stack, {
|
2846
|
+
position: "fixed",
|
2847
|
+
zIndex: 1400,
|
2848
|
+
right: 16,
|
2849
|
+
top: 16,
|
2850
|
+
width: 370,
|
2851
|
+
sx: {
|
2852
|
+
boxShadow: theme => theme.shadows[8]
|
2853
|
+
}
|
2854
|
+
}, /*#__PURE__*/React.createElement(Box$1, {
|
2855
|
+
padding: 1.5,
|
2856
|
+
gap: 1.5,
|
2857
|
+
display: "flex",
|
2858
|
+
alignItems: "center",
|
2859
|
+
sx: {
|
2860
|
+
// "&.color-error": {
|
2861
|
+
// backgroundColor: "#FEEBEE",
|
2862
|
+
// },
|
2863
|
+
// "&.color-info": {
|
2864
|
+
// backgroundColor: "#E1F5FE",
|
2865
|
+
// },
|
2866
|
+
// "&.color-warning": {
|
2867
|
+
// backgroundColor: "#FFF3E0",
|
2868
|
+
// },
|
2869
|
+
// "&.color-success": {
|
2870
|
+
// backgroundColor: "#E8F5E9",
|
2871
|
+
// },
|
2872
|
+
},
|
2873
|
+
className: `color-${toastColorConfig}`
|
2874
|
+
}, /*#__PURE__*/React.createElement(Stack, {
|
2875
|
+
p: 1,
|
2876
|
+
gap: 1,
|
2877
|
+
height: 20,
|
2878
|
+
borderRadius: 50,
|
2879
|
+
sx: {
|
2880
|
+
"&.ripple-error": {
|
2881
|
+
backgroundColor: "#D143431F"
|
2882
|
+
},
|
2883
|
+
"&.ripple-info": {
|
2884
|
+
backgroundColor: "#2D9FC51F"
|
2885
|
+
},
|
2886
|
+
"&.ripple-warning": {
|
2887
|
+
backgroundColor: "#FB85001F"
|
2888
|
+
},
|
2889
|
+
"&.ripple-success": {
|
2890
|
+
backgroundColor: "#8FC93A1F"
|
2891
|
+
}
|
2892
|
+
},
|
2893
|
+
className: `ripple-${toast.type || "info"}`
|
2894
|
+
}, /*#__PURE__*/React.createElement(Stack, {
|
2895
|
+
sx: {
|
2896
|
+
"&.icon-color.color-info": {
|
2897
|
+
color: theme => theme.palette.info.main
|
2898
|
+
},
|
2899
|
+
"&.icon-color.color-error": {
|
2900
|
+
color: theme => theme.palette.error.main
|
2901
|
+
},
|
2902
|
+
"&.icon-color.color-warning": {
|
2903
|
+
color: theme => theme.palette.warning.main
|
2904
|
+
},
|
2905
|
+
"&.icon-color.color-success": {
|
2906
|
+
color: theme => theme.palette.success.main
|
2907
|
+
}
|
2908
|
+
},
|
2909
|
+
className: `icon-color color-${toast.type || "info"}`
|
2910
|
+
}, ToastIconConfig)), /*#__PURE__*/React.createElement(Divider, {
|
2911
|
+
orientation: "vertical",
|
2912
|
+
flexItem: true
|
2913
|
+
}), /*#__PURE__*/React.createElement(Stack, {
|
2914
|
+
width: 285
|
2915
|
+
}, /*#__PURE__*/React.createElement(Stack, {
|
2916
|
+
justifyContent: "space-between",
|
2917
|
+
flexDirection: "row",
|
2918
|
+
alignItems: "center"
|
2919
|
+
}, /*#__PURE__*/React.createElement(Typography, {
|
2920
|
+
variant: "subtitle2",
|
2921
|
+
color: "text.primary"
|
2922
|
+
}, toast.title), /*#__PURE__*/React.createElement(IconButton, {
|
2923
|
+
size: "small",
|
2924
|
+
onClick: closeToast
|
2925
|
+
}, /*#__PURE__*/React.createElement(Close, {
|
2926
|
+
fontSize: "small"
|
2927
|
+
}))), /*#__PURE__*/React.createElement(Stack, {
|
2928
|
+
gap: 0.5
|
2929
|
+
}, /*#__PURE__*/React.createElement(Typography, {
|
2930
|
+
color: "text.primary",
|
2931
|
+
variant: "body2"
|
2932
|
+
}, toast.subtitle), !stateOptions && toast.dataOpt && toast.dataOpt.length > 0 && /*#__PURE__*/React.createElement(Stack, null, toast.dataOpt.map((element, i) => /*#__PURE__*/React.createElement(Typography, {
|
2933
|
+
variant: "caption",
|
2934
|
+
key: i
|
2935
|
+
}, "\u2022 ", element)))), /*#__PURE__*/React.createElement(Stack, {
|
2936
|
+
justifyContent: "flex-end",
|
2937
|
+
flexDirection: "row"
|
2938
|
+
}, toast.actions && /*#__PURE__*/React.createElement(Stack, {
|
2939
|
+
flexDirection: "row",
|
2940
|
+
gap: 1
|
2941
|
+
}, toast.actions), toast.seeMore && /*#__PURE__*/React.createElement(Button, {
|
2942
|
+
onClick: toggleToastOptions,
|
2943
|
+
size: "small",
|
2944
|
+
variant: "text",
|
2945
|
+
color: toastColorConfig
|
2946
|
+
}, stateOptions ? "Ver más" : "Ver menos", stateOptions ? /*#__PURE__*/React.createElement(KeyboardArrowDown, null) : /*#__PURE__*/React.createElement(KeyboardArrowUp, null))))), /*#__PURE__*/React.createElement(LinearProgress, {
|
2947
|
+
color: toastColorConfig,
|
2948
|
+
variant: "determinate",
|
2949
|
+
value: progressToast
|
2950
|
+
})));
|
2951
|
+
};
|
2952
|
+
|
2893
2953
|
var classof$3 = classofRaw$2;
|
2894
2954
|
|
2895
2955
|
var engineIsNode = typeof process != 'undefined' && classof$3(process) == 'process';
|
@@ -8394,4 +8454,4 @@ const useDynamicColor = url => {
|
|
8394
8454
|
};
|
8395
8455
|
};
|
8396
8456
|
|
8397
|
-
export { AdproSincoTheme, DrawerComponent, DynamicColor, EmptyStateComponent as EmptyState, EmptyStateComponent, EmptyStateImageUrls, FooterActionComponent, PageHeaderComponent,
|
8457
|
+
export { AdproSincoTheme, DrawerComponent, DynamicColor, EmptyStateComponent as EmptyState, EmptyStateComponent, EmptyStateImageUrls, FooterActionComponent, PageHeaderComponent, PageHeaderWrapper, SincoTheme, ToastNotificationComponent, useDynamicColor };
|
package/package.json
CHANGED
@@ -1,13 +1,15 @@
|
|
1
1
|
import { ReactNode } from 'react';
|
2
|
-
|
2
|
+
import { SxProps } from '@mui/material';
|
3
|
+
export type DrawerPosition = 'left' | 'right';
|
3
4
|
export interface DrawerComponentProperties {
|
4
5
|
title: string;
|
5
6
|
children: ReactNode;
|
6
|
-
|
7
|
+
actions: ReactNode;
|
7
8
|
showActions?: boolean;
|
8
|
-
|
9
|
+
anchor?: DrawerPosition;
|
9
10
|
width: string;
|
10
11
|
open: boolean;
|
11
12
|
onClose: () => void;
|
13
|
+
sx?: SxProps;
|
12
14
|
}
|
13
|
-
export declare const DrawerComponent: ({ title, children,
|
15
|
+
export declare const DrawerComponent: ({ title, children, actions, showActions, anchor, width, open, onClose, sx, }: DrawerComponentProperties) => JSX.Element;
|
@@ -7,9 +7,9 @@ export interface PageheaderProperties {
|
|
7
7
|
buttonBack?: React.ReactNode;
|
8
8
|
fixed?: boolean;
|
9
9
|
}
|
10
|
-
export declare function
|
10
|
+
export declare function PageHeaderWrapper({ item, color, variant, }: {
|
11
11
|
item: string | React.ReactNode;
|
12
|
-
|
12
|
+
color: string;
|
13
13
|
variant: Variant;
|
14
14
|
}): JSX.Element;
|
15
15
|
export declare const PageHeaderComponent: ({ title, subtitle, actions, buttonBack, fixed, }: PageheaderProperties) => JSX.Element;
|
@@ -0,0 +1,13 @@
|
|
1
|
+
import React from "react";
|
2
|
+
import "../styles/toast.css";
|
3
|
+
export type toastType = "success" | "error" | "warning" | "info";
|
4
|
+
export interface ToastBaseProperties {
|
5
|
+
type?: toastType;
|
6
|
+
subtitle?: string;
|
7
|
+
title: string;
|
8
|
+
time?: number | any;
|
9
|
+
dataOpt?: string[];
|
10
|
+
actions?: React.ReactNode;
|
11
|
+
seeMore?: boolean;
|
12
|
+
}
|
13
|
+
export declare const ToastNotificationComponent: (toast: ToastBaseProperties) => JSX.Element;
|
@@ -1,4 +1,5 @@
|
|
1
|
-
export * from
|
2
|
-
export * from
|
3
|
-
export * from
|
4
|
-
export * from
|
1
|
+
export * from "./EmptyState";
|
2
|
+
export * from "./Drawer";
|
3
|
+
export * from "./FooterAction";
|
4
|
+
export * from "./PageHeader";
|
5
|
+
export * from "./ToastNotification";
|
@@ -1,2 +1,12 @@
|
|
1
|
-
import { Components } from
|
1
|
+
import { Components } from "@mui/material";
|
2
|
+
declare module "@mui/material/Radio" {
|
3
|
+
interface RadioPropsSizeOverrides {
|
4
|
+
large: true;
|
5
|
+
}
|
6
|
+
}
|
7
|
+
declare module "@mui/material/Checkbox" {
|
8
|
+
interface CheckboxPropsSizeOverrides {
|
9
|
+
large: true;
|
10
|
+
}
|
11
|
+
}
|
2
12
|
export declare const components: Components;
|