@asdp/ferryui 0.1.22-dev.9163 → 0.1.22-dev.9167
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 +13 -0
- package/dist/index.d.ts +13 -0
- package/dist/index.js +147 -60
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +147 -60
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/dist/index.d.mts
CHANGED
|
@@ -438,6 +438,7 @@ interface CardTicketProps {
|
|
|
438
438
|
* Callback when select ticket button is clicked
|
|
439
439
|
*/
|
|
440
440
|
onSelectTicket?: () => void;
|
|
441
|
+
isLoading?: boolean;
|
|
441
442
|
}
|
|
442
443
|
interface DepartureItem {
|
|
443
444
|
departureDay: string;
|
|
@@ -562,6 +563,16 @@ interface CardServiceMenuProps {
|
|
|
562
563
|
* Menu items
|
|
563
564
|
*/
|
|
564
565
|
menuItems?: CardServiceMenuItem[];
|
|
566
|
+
/**
|
|
567
|
+
* Whether the menu is in a loading state
|
|
568
|
+
* @default false
|
|
569
|
+
*/
|
|
570
|
+
isLoading?: boolean;
|
|
571
|
+
/**
|
|
572
|
+
* Number of skeleton items to display while loading
|
|
573
|
+
* @default 4
|
|
574
|
+
*/
|
|
575
|
+
skeletonCount?: number;
|
|
565
576
|
}
|
|
566
577
|
interface CardServiceMenuItem {
|
|
567
578
|
id: number;
|
|
@@ -681,6 +692,7 @@ interface CardTicketSearchProps {
|
|
|
681
692
|
showPassengerField?: boolean;
|
|
682
693
|
showRoundTrip?: boolean;
|
|
683
694
|
menuItems?: CardServiceMenuItem[];
|
|
695
|
+
isLoadingServiceMenu?: boolean;
|
|
684
696
|
}
|
|
685
697
|
|
|
686
698
|
declare const CardTicketSearch: React$1.FC<CardTicketSearchProps>;
|
|
@@ -1951,6 +1963,7 @@ interface DateFilterProps {
|
|
|
1951
1963
|
* Optional custom labels
|
|
1952
1964
|
*/
|
|
1953
1965
|
labels?: Partial<DateFilterLabels>;
|
|
1966
|
+
isLoading?: boolean;
|
|
1954
1967
|
}
|
|
1955
1968
|
interface DateFilterLabels {
|
|
1956
1969
|
prevButtonAriaLabel: string;
|
package/dist/index.d.ts
CHANGED
|
@@ -438,6 +438,7 @@ interface CardTicketProps {
|
|
|
438
438
|
* Callback when select ticket button is clicked
|
|
439
439
|
*/
|
|
440
440
|
onSelectTicket?: () => void;
|
|
441
|
+
isLoading?: boolean;
|
|
441
442
|
}
|
|
442
443
|
interface DepartureItem {
|
|
443
444
|
departureDay: string;
|
|
@@ -562,6 +563,16 @@ interface CardServiceMenuProps {
|
|
|
562
563
|
* Menu items
|
|
563
564
|
*/
|
|
564
565
|
menuItems?: CardServiceMenuItem[];
|
|
566
|
+
/**
|
|
567
|
+
* Whether the menu is in a loading state
|
|
568
|
+
* @default false
|
|
569
|
+
*/
|
|
570
|
+
isLoading?: boolean;
|
|
571
|
+
/**
|
|
572
|
+
* Number of skeleton items to display while loading
|
|
573
|
+
* @default 4
|
|
574
|
+
*/
|
|
575
|
+
skeletonCount?: number;
|
|
565
576
|
}
|
|
566
577
|
interface CardServiceMenuItem {
|
|
567
578
|
id: number;
|
|
@@ -681,6 +692,7 @@ interface CardTicketSearchProps {
|
|
|
681
692
|
showPassengerField?: boolean;
|
|
682
693
|
showRoundTrip?: boolean;
|
|
683
694
|
menuItems?: CardServiceMenuItem[];
|
|
695
|
+
isLoadingServiceMenu?: boolean;
|
|
684
696
|
}
|
|
685
697
|
|
|
686
698
|
declare const CardTicketSearch: React$1.FC<CardTicketSearchProps>;
|
|
@@ -1951,6 +1963,7 @@ interface DateFilterProps {
|
|
|
1951
1963
|
* Optional custom labels
|
|
1952
1964
|
*/
|
|
1953
1965
|
labels?: Partial<DateFilterLabels>;
|
|
1966
|
+
isLoading?: boolean;
|
|
1954
1967
|
}
|
|
1955
1968
|
interface DateFilterLabels {
|
|
1956
1969
|
prevButtonAriaLabel: string;
|
package/dist/index.js
CHANGED
|
@@ -1315,7 +1315,8 @@ var CardTicket = ({
|
|
|
1315
1315
|
buttonText,
|
|
1316
1316
|
onPriceDetailClick,
|
|
1317
1317
|
onPolicyClick,
|
|
1318
|
-
onSelectTicket
|
|
1318
|
+
onSelectTicket,
|
|
1319
|
+
isLoading = false
|
|
1319
1320
|
}) => {
|
|
1320
1321
|
const styles = useStyles5();
|
|
1321
1322
|
const { width } = useWindowSize();
|
|
@@ -1338,7 +1339,23 @@ var CardTicket = ({
|
|
|
1338
1339
|
xxxl: 3,
|
|
1339
1340
|
style: { padding: 0, margin: 0 },
|
|
1340
1341
|
children: /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Card, { className: styles.ticketLeftCard, children: [
|
|
1341
|
-
/* @__PURE__ */ jsxRuntime.
|
|
1342
|
+
isLoading ? /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Row, { style: { height: "100%", width: "100%" }, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
1343
|
+
reactGridSystem.Col,
|
|
1344
|
+
{
|
|
1345
|
+
xs: 12,
|
|
1346
|
+
style: {
|
|
1347
|
+
display: "flex",
|
|
1348
|
+
flexDirection: "column",
|
|
1349
|
+
alignItems: "center",
|
|
1350
|
+
justifyContent: "center",
|
|
1351
|
+
gap: "1rem"
|
|
1352
|
+
},
|
|
1353
|
+
children: /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Skeleton, { style: { display: "flex", flexDirection: "column", alignItems: "center" }, children: [
|
|
1354
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { style: { width: "60px", height: "60px", borderRadius: "50%" } }),
|
|
1355
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { style: { width: "100px", height: "20px", marginTop: "1rem" } })
|
|
1356
|
+
] })
|
|
1357
|
+
}
|
|
1358
|
+
) }) : /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Row, { style: { height: "100%" }, children: [
|
|
1342
1359
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1343
1360
|
reactGridSystem.Col,
|
|
1344
1361
|
{
|
|
@@ -1484,7 +1501,29 @@ var CardTicket = ({
|
|
|
1484
1501
|
xxl: 4.5,
|
|
1485
1502
|
xxxl: 4.5,
|
|
1486
1503
|
style: { padding: 0, margin: 0 },
|
|
1487
|
-
children: /* @__PURE__ */ jsxRuntime.
|
|
1504
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Card, { className: styles.ticketMiddleCard, children: isLoading ? /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", height: "100%", justifyContent: "space-between" }, children: [
|
|
1505
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Visible, { lg: true, xl: true, xxl: true, xxxl: true, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Skeleton, { children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { style: { width: "80px", height: "28px", borderRadius: "4px" } }) }) }),
|
|
1506
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.ticketInfo, children: [
|
|
1507
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.ticketTime, children: /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Skeleton, { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: [
|
|
1508
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { style: { width: "60px", height: "14px" } }),
|
|
1509
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { style: { width: "80px", height: "28px" } }),
|
|
1510
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { style: { width: "120px", height: "14px" } })
|
|
1511
|
+
] }) }),
|
|
1512
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.ticketDuration, children: [
|
|
1513
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactComponents.Skeleton, { children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { style: { width: "80px", height: "16px", marginBottom: "8px" } }) }),
|
|
1514
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.dividerContainer, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Skeleton, { children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { style: { width: "120px", height: "2px" } }) }) })
|
|
1515
|
+
] }),
|
|
1516
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.ticketTime, style: { alignItems: "flex-end" }, children: /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Skeleton, { style: { display: "flex", flexDirection: "column", alignItems: "flex-end", gap: "8px" }, children: [
|
|
1517
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { style: { width: "60px", height: "14px" } }),
|
|
1518
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { style: { width: "80px", height: "28px" } }),
|
|
1519
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { style: { width: "120px", height: "14px" } })
|
|
1520
|
+
] }) })
|
|
1521
|
+
] }) }),
|
|
1522
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.ticketButtons, children: /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Skeleton, { style: { display: "flex", gap: "1rem", width: "100%" }, children: [
|
|
1523
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { style: { flex: 1, height: "32px", borderRadius: "16px" } }),
|
|
1524
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { style: { flex: 1, height: "32px", borderRadius: "16px" } })
|
|
1525
|
+
] }) })
|
|
1526
|
+
] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
1488
1527
|
/* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Visible, { lg: true, xl: true, xxl: true, xxxl: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
1489
1528
|
reactComponents.Badge,
|
|
1490
1529
|
{
|
|
@@ -1562,7 +1601,7 @@ var CardTicket = ({
|
|
|
1562
1601
|
}
|
|
1563
1602
|
)
|
|
1564
1603
|
] })
|
|
1565
|
-
] })
|
|
1604
|
+
] }) })
|
|
1566
1605
|
}
|
|
1567
1606
|
),
|
|
1568
1607
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -1577,54 +1616,68 @@ var CardTicket = ({
|
|
|
1577
1616
|
xxxl: 4.5,
|
|
1578
1617
|
style: { padding: 0, margin: 0 },
|
|
1579
1618
|
children: /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Card, { className: styles.ticketRightCard, children: [
|
|
1580
|
-
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
1581
|
-
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
1582
|
-
"
|
|
1583
|
-
|
|
1584
|
-
style: {
|
|
1585
|
-
|
|
1586
|
-
|
|
1587
|
-
|
|
1588
|
-
|
|
1589
|
-
|
|
1590
|
-
|
|
1591
|
-
|
|
1592
|
-
|
|
1593
|
-
|
|
1594
|
-
|
|
1595
|
-
|
|
1596
|
-
|
|
1597
|
-
|
|
1598
|
-
|
|
1599
|
-
|
|
1600
|
-
|
|
1601
|
-
|
|
1602
|
-
|
|
1603
|
-
|
|
1604
|
-
|
|
1605
|
-
|
|
1606
|
-
|
|
1607
|
-
|
|
1608
|
-
|
|
1609
|
-
|
|
1610
|
-
|
|
1611
|
-
|
|
1612
|
-
|
|
1613
|
-
|
|
1614
|
-
|
|
1615
|
-
|
|
1616
|
-
|
|
1617
|
-
|
|
1618
|
-
|
|
1619
|
-
|
|
1620
|
-
|
|
1621
|
-
|
|
1622
|
-
|
|
1623
|
-
|
|
1624
|
-
|
|
1625
|
-
|
|
1626
|
-
|
|
1627
|
-
|
|
1619
|
+
isLoading ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
1620
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.priceCard, children: [
|
|
1621
|
+
/* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Skeleton, { style: { display: "flex", flexDirection: "column", gap: "8px", flex: 1 }, children: [
|
|
1622
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { style: { width: "80px", height: "20px" } }),
|
|
1623
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { style: { width: "140px", height: "32px", borderRadius: "16px" } })
|
|
1624
|
+
] }),
|
|
1625
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactComponents.Skeleton, { children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { style: { width: "120px", height: "40px", borderRadius: "20px" } }) })
|
|
1626
|
+
] }),
|
|
1627
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.facilitiesSection, children: [
|
|
1628
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactComponents.Skeleton, { children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { style: { width: "80px", height: "20px", marginBottom: "8px" } }) }),
|
|
1629
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.facilitiesList, children: [1, 2, 3].map((i) => /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Skeleton, { children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { style: { width: "100px", height: "20px" } }) }, i)) })
|
|
1630
|
+
] })
|
|
1631
|
+
] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
1632
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.priceCard, children: [
|
|
1633
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
1634
|
+
"div",
|
|
1635
|
+
{
|
|
1636
|
+
style: {
|
|
1637
|
+
display: "flex",
|
|
1638
|
+
flexDirection: "column",
|
|
1639
|
+
gap: "0.25rem"
|
|
1640
|
+
},
|
|
1641
|
+
children: [
|
|
1642
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactComponents.Subtitle2, { children: mergedLabels.totalPriceLabel }),
|
|
1643
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
1644
|
+
reactComponents.Title3,
|
|
1645
|
+
{
|
|
1646
|
+
style: {
|
|
1647
|
+
display: "flex",
|
|
1648
|
+
flex: "column",
|
|
1649
|
+
justifyContent: "end"
|
|
1650
|
+
},
|
|
1651
|
+
children: [
|
|
1652
|
+
mergedLabels.currencySymbol,
|
|
1653
|
+
"\xA0",
|
|
1654
|
+
departureItem?.billingDetail?.total?.formatted
|
|
1655
|
+
]
|
|
1656
|
+
}
|
|
1657
|
+
)
|
|
1658
|
+
]
|
|
1659
|
+
}
|
|
1660
|
+
),
|
|
1661
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1662
|
+
reactComponents.Button,
|
|
1663
|
+
{
|
|
1664
|
+
onClick: onSelectTicket,
|
|
1665
|
+
appearance: "primary",
|
|
1666
|
+
style: { backgroundColor: brandColors2["60"] },
|
|
1667
|
+
size: "medium",
|
|
1668
|
+
shape: "circular",
|
|
1669
|
+
icon: /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { icon: "fluent:ticket-diagonal-24-filled" }),
|
|
1670
|
+
children: buttonText || mergedLabels.selectTicketButton
|
|
1671
|
+
}
|
|
1672
|
+
)
|
|
1673
|
+
] }),
|
|
1674
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.facilitiesSection, children: [
|
|
1675
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactComponents.Subtitle2, { children: mergedLabels.facilitiesLabel }),
|
|
1676
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.facilitiesList, children: departureItem?.provider?.facilities.map((facility, idx) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.facilityItem, children: [
|
|
1677
|
+
/* @__PURE__ */ jsxRuntime.jsx(react.Icon, { icon: "fluent:checkmark-circle-24-filled" }),
|
|
1678
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactComponents.Caption1Strong, { children: facility })
|
|
1679
|
+
] }, idx)) })
|
|
1680
|
+
] })
|
|
1628
1681
|
] }),
|
|
1629
1682
|
/* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Visible, { xl: true, xxl: true, xxxl: true, children: Array.from({ length: circularVerticalConfig.count }).map(
|
|
1630
1683
|
(_, index) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -2034,6 +2087,13 @@ var useStyles6 = reactComponents.makeStyles({
|
|
|
2034
2087
|
display: "none"
|
|
2035
2088
|
}
|
|
2036
2089
|
},
|
|
2090
|
+
skeletonOverride: {
|
|
2091
|
+
cursor: "default",
|
|
2092
|
+
backgroundColor: "transparent",
|
|
2093
|
+
"&:hover": {
|
|
2094
|
+
backgroundColor: "transparent"
|
|
2095
|
+
}
|
|
2096
|
+
},
|
|
2037
2097
|
// Dividers
|
|
2038
2098
|
dividerVertical: {
|
|
2039
2099
|
// Only visible on tablet (horizontal layout)
|
|
@@ -2058,7 +2118,9 @@ var CardServiceMenu = ({
|
|
|
2058
2118
|
showDescriptions = true,
|
|
2059
2119
|
className,
|
|
2060
2120
|
labels,
|
|
2061
|
-
menuItems = ALIAS_MENU_ITEMS
|
|
2121
|
+
menuItems = ALIAS_MENU_ITEMS,
|
|
2122
|
+
isLoading = false,
|
|
2123
|
+
skeletonCount = 4
|
|
2062
2124
|
}) => {
|
|
2063
2125
|
const styles = useStyles6();
|
|
2064
2126
|
({ ...DEFAULT_LABELS6[language], ...labels });
|
|
@@ -2066,7 +2128,19 @@ var CardServiceMenu = ({
|
|
|
2066
2128
|
const isActive = activeServiceId === serviceId;
|
|
2067
2129
|
return reactComponents.mergeClasses(styles.menuItem, isActive && styles.menuItemActive);
|
|
2068
2130
|
};
|
|
2069
|
-
return /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Card, { className: reactComponents.mergeClasses(styles.card, className), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.menuList, children:
|
|
2131
|
+
return /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Card, { className: reactComponents.mergeClasses(styles.card, className), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.menuList, children: isLoading ? Array.from({ length: skeletonCount }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsxs(React__default.default.Fragment, { children: [
|
|
2132
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: reactComponents.mergeClasses(styles.menuItem, styles.skeletonOverride), children: [
|
|
2133
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.logoWrapper, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Skeleton, { children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { className: styles.logo, style: { borderRadius: "50%" } }) }) }),
|
|
2134
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.textContent, children: [
|
|
2135
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactComponents.Skeleton, { children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { style: { width: "60%", height: "16px" } }) }),
|
|
2136
|
+
showDescriptions && /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Skeleton, { className: styles.description, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { style: { width: "90%", height: "12px", marginTop: "4px" } }) })
|
|
2137
|
+
] })
|
|
2138
|
+
] }),
|
|
2139
|
+
index < skeletonCount - 1 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
2140
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactComponents.Divider, { className: styles.dividerHorizontal }),
|
|
2141
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactComponents.Divider, { vertical: true, className: styles.dividerVertical })
|
|
2142
|
+
] })
|
|
2143
|
+
] }, `skeleton-${index}`)) : menuItems.map((item, index) => {
|
|
2070
2144
|
return /* @__PURE__ */ jsxRuntime.jsxs(React__default.default.Fragment, { children: [
|
|
2071
2145
|
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
2072
2146
|
reactComponents.Button,
|
|
@@ -3888,7 +3962,8 @@ var CardTicketSearch = ({
|
|
|
3888
3962
|
showPassengerField = false,
|
|
3889
3963
|
showRoundTrip = true,
|
|
3890
3964
|
onServiceClick,
|
|
3891
|
-
menuItems
|
|
3965
|
+
menuItems,
|
|
3966
|
+
isLoadingServiceMenu
|
|
3892
3967
|
}) => {
|
|
3893
3968
|
const styles = useStyles8();
|
|
3894
3969
|
const labels = React__default.default.useMemo(
|
|
@@ -3983,7 +4058,8 @@ var CardTicketSearch = ({
|
|
|
3983
4058
|
activeServiceId,
|
|
3984
4059
|
language,
|
|
3985
4060
|
onServiceClick,
|
|
3986
|
-
menuItems
|
|
4061
|
+
menuItems,
|
|
4062
|
+
isLoading: isLoadingServiceMenu
|
|
3987
4063
|
}
|
|
3988
4064
|
)
|
|
3989
4065
|
}
|
|
@@ -5079,7 +5155,13 @@ var ModalSearchHarbor = ({
|
|
|
5079
5155
|
/* @__PURE__ */ jsxRuntime.jsx(reactComponents.Divider, {})
|
|
5080
5156
|
] }),
|
|
5081
5157
|
/* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1Strong, { className: styles.sectionTitle, children: mergedLabels.allHarborsHeader }),
|
|
5082
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.harborList, children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
5158
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.harborList, children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: [1, 2, 3, 4, 5].map((item) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.harborItem, children: [
|
|
5159
|
+
/* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Skeleton, { style: { display: "flex", alignItems: "center", gap: "0.5rem", width: "70%" }, children: [
|
|
5160
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { style: { width: "24px", height: "24px", borderRadius: "4px" } }),
|
|
5161
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { style: { width: "100%", height: "20px", borderRadius: "4px" } })
|
|
5162
|
+
] }),
|
|
5163
|
+
showButtonFavorite && /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Skeleton, { children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { style: { width: "24px", height: "24px", borderRadius: "4px" } }) })
|
|
5164
|
+
] }, item)) }) : harbors.length > 0 ? harbors.map((harbor, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.harborItem, children: [
|
|
5083
5165
|
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
5084
5166
|
"div",
|
|
5085
5167
|
{
|
|
@@ -6636,7 +6718,8 @@ var useStyles16 = reactComponents.makeStyles({
|
|
|
6636
6718
|
paddingRight: reactComponents.tokens.spacingHorizontalSNudge,
|
|
6637
6719
|
paddingBottom: reactComponents.tokens.spacingHorizontalXL,
|
|
6638
6720
|
maxHeight: "70vh",
|
|
6639
|
-
overflowY: "auto"
|
|
6721
|
+
overflowY: "auto",
|
|
6722
|
+
overflowX: "hidden"
|
|
6640
6723
|
},
|
|
6641
6724
|
closeButton: {
|
|
6642
6725
|
minWidth: "32px",
|
|
@@ -7135,7 +7218,8 @@ var DateFilter = ({
|
|
|
7135
7218
|
showCalendarButton = true,
|
|
7136
7219
|
scrollAmount = DEFAULT_SCROLL_AMOUNT,
|
|
7137
7220
|
language = "id",
|
|
7138
|
-
labels
|
|
7221
|
+
labels,
|
|
7222
|
+
isLoading = false
|
|
7139
7223
|
}) => {
|
|
7140
7224
|
const styles = useStyles17();
|
|
7141
7225
|
const scrollRef = React.useRef(null);
|
|
@@ -7160,7 +7244,10 @@ var DateFilter = ({
|
|
|
7160
7244
|
"aria-label": mergedLabels.prevButtonAriaLabel
|
|
7161
7245
|
}
|
|
7162
7246
|
) }) }),
|
|
7163
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { ref: scrollRef, className: styles.scrollContainer, children:
|
|
7247
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { ref: scrollRef, className: styles.scrollContainer, children: isLoading ? Array.from({ length: 7 }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.item, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.compoundButton, style: { borderRadius: reactComponents.tokens.borderRadiusMedium, border: `1px solid ${reactComponents.tokens.colorNeutralStroke1}` }, children: /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Skeleton, { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: "8px", padding: "8px" }, children: [
|
|
7248
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { style: { width: "80%", height: "14px" } }),
|
|
7249
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { style: { width: "60%", height: "14px" } })
|
|
7250
|
+
] }) }) }, index)) : dates.map((date, index) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.item, children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
7164
7251
|
reactComponents.Button,
|
|
7165
7252
|
{
|
|
7166
7253
|
appearance: "outline",
|