@asdp/ferryui 0.1.22-dev.9582 → 0.1.22-dev.9596

package/dist/index.mjs

@@ -8917,10 +8917,11 @@ var DEFAULT_LABELS17 = {
       return `Mulai dari IDR ${formatPrice(min)} - ${formatPrice(max)}`;
     },
     durationLabel: "Durasi perjalanan",
-    durationRangeText: (min, max) => `Perjalanan ${min} - ${max} jam`,
+    durationRangeText: (min, max) => `Perjalanan ${min} - ${max} menit`,
     resetButton: "Reset",
     applyButton: "Terapkan",
     hourUnit: "jam",
+    minuteUnit: "menit",
     currencySymbol: "IDR",
     closeAriaLabel: "Tutup"
   },
@@ -8935,10 +8936,11 @@ var DEFAULT_LABELS17 = {
       return `From IDR ${formatPrice(min)} - ${formatPrice(max)}`;
     },
     durationLabel: "Travel duration",
-    durationRangeText: (min, max) => `${min} - ${max} hours trip`,
+    durationRangeText: (min, max) => `${min} - ${max} minutes trip`,
     resetButton: "Reset",
     applyButton: "Apply",
     hourUnit: "hours",
+    minuteUnit: "minutes",
     currencySymbol: "IDR",
     closeAriaLabel: "Close"
   }
@@ -8959,16 +8961,16 @@ var DEFAULT_TIME_SLOTS = [
   { value: "18:00 - 24:00", label: "18:00 - 24:00" }
 ];
 var DEFAULT_PRICE_RANGE = {
-  min: 2e5,
-  max: 8e5
+  min: 0,
+  max: 0
 };
 var DEFAULT_DURATION_RANGE = {
   min: 0,
-  max: 8
+  max: 0
 };
 var useStyles18 = makeStyles({
   dialogSurface: {
-    maxWidth: "600px",
+    maxWidth: "650px",
     width: "100%"
   },
   content: {
@@ -9050,6 +9052,16 @@ var useStyles18 = makeStyles({
       backgroundColor: tokens.colorPaletteRedBackground1,
       ...shorthands.borderColor(tokens.colorPaletteRedForeground1)
     }
+  },
+  skeletonGrid: {
+    display: "grid",
+    gridTemplateColumns: "repeat(2, 1fr)",
+    gap: "0.5rem"
+  },
+  skeletonCheckboxRow: {
+    display: "flex",
+    gap: tokens.spacingHorizontalS,
+    alignItems: "center"
   }
 });
 var ModalFilterTicket = ({
@@ -9069,12 +9081,14 @@ var ModalFilterTicket = ({
   onReset,
   onApply,
   labels,
-  serviceTypes = DEFAULT_SERVICE_TYPES,
-  timeSlots = DEFAULT_TIME_SLOTS,
-  minPrice = DEFAULT_PRICE_RANGE.min,
-  maxPrice = DEFAULT_PRICE_RANGE.max,
-  minDuration = DEFAULT_DURATION_RANGE.min,
-  maxDuration = DEFAULT_DURATION_RANGE.max
+  serviceTypes = [],
+  timeSlots = [],
+  minPrice = 0,
+  maxPrice = 0,
+  minDuration = 0,
+  maxDuration = 0,
+  durationStep = 1,
+  isLoading = false
 }) => {
   const styles = useStyles18();
   const mergedLabels = { ...DEFAULT_LABELS17[language], ...labels };
@@ -9116,8 +9130,19 @@ var ModalFilterTicket = ({
       price
     );
   };
+  const hasPriceRange = minPrice > 0 || maxPrice > 0;
+  const hasDurationRange = minDuration > 0 || maxDuration > 0;
+  const safePriceValues = hasPriceRange ? [
+    Math.min(Math.max(priceRange[0], minPrice), maxPrice),
+    Math.min(Math.max(priceRange[1], minPrice), maxPrice)
+  ] : [minPrice, maxPrice];
+  const safeDurationValues = hasDurationRange ? [
+    Math.min(Math.max(durationRange[0], minDuration), maxDuration),
+    Math.min(Math.max(durationRange[1], minDuration), maxDuration)
+  ] : [minDuration, maxDuration];
   const renderPriceTrack = useCallback(
     ({ props, children }) => {
+      if (!hasPriceRange) return /* @__PURE__ */ jsx("div", { ...props, ref: props.ref, children });
       const [value1, value2] = priceRange;
       const percent1 = (value1 - minPrice) / (maxPrice - minPrice) * 100;
       const percent2 = (value2 - minPrice) / (maxPrice - minPrice) * 100;
@@ -9153,10 +9178,11 @@ var ModalFilterTicket = ({
         }
       );
     },
-    [priceRange, minPrice, maxPrice]
+    [priceRange, minPrice, maxPrice, hasPriceRange]
   );
   const renderDurationTrack = useCallback(
     ({ props, children }) => {
+      if (!hasDurationRange) return /* @__PURE__ */ jsx("div", { ...props, ref: props.ref, children });
       const [value1, value2] = durationRange;
       const percent1 = (value1 - minDuration) / (maxDuration - minDuration) * 100;
       const percent2 = (value2 - minDuration) / (maxDuration - minDuration) * 100;
@@ -9192,7 +9218,7 @@ var ModalFilterTicket = ({
         }
       );
     },
-    [durationRange, minDuration, maxDuration]
+    [durationRange, minDuration, maxDuration, hasDurationRange]
   );
   const renderThumb = ({ props }) => /* @__PURE__ */ jsx(
     "div",
@@ -9212,6 +9238,30 @@ var ModalFilterTicket = ({
       }
     }
   );
+  const renderServiceTypesSkeleton = () => /* @__PURE__ */ jsxs("div", { className: styles.section, children: [
+    /* @__PURE__ */ jsx(Skeleton, { children: /* @__PURE__ */ jsx(SkeletonItem, { style: { width: "120px", height: "20px" } }) }),
+    /* @__PURE__ */ jsx("div", { className: styles.skeletonGrid, children: Array.from({ length: 4 }).map((_, i) => /* @__PURE__ */ jsx(Skeleton, { children: /* @__PURE__ */ jsx(SkeletonItem, { style: { width: "100%", height: "40px", borderRadius: "8px" } }) }, `svc-skel-${i}`)) })
+  ] });
+  const renderTimeSlotsSkeleton = () => /* @__PURE__ */ jsxs("div", { className: styles.section, children: [
+    /* @__PURE__ */ jsx(Skeleton, { children: /* @__PURE__ */ jsx(SkeletonItem, { style: { width: "100px", height: "20px" } }) }),
+    /* @__PURE__ */ jsx(Row, { children: Array.from({ length: 4 }).map((_, i) => /* @__PURE__ */ jsx(Col, { xs: 6, sm: 6, md: 6, lg: 3, xl: 3, xxl: 3, xxxl: 3, children: /* @__PURE__ */ jsxs("div", { className: styles.skeletonCheckboxRow, children: [
+      /* @__PURE__ */ jsx(Skeleton, { children: /* @__PURE__ */ jsx(SkeletonItem, { style: { width: "16px", height: "16px", borderRadius: "4px" } }) }),
+      /* @__PURE__ */ jsx(Skeleton, { children: /* @__PURE__ */ jsx(SkeletonItem, { style: { width: "80px", height: "16px" } }) })
+    ] }) }, `time-skel-${i}`)) })
+  ] });
+  const renderRangeSkeleton = () => /* @__PURE__ */ jsxs("div", { className: styles.containerRange, children: [
+    /* @__PURE__ */ jsxs("div", { className: styles.spaceText, children: [
+      /* @__PURE__ */ jsx(Skeleton, { children: /* @__PURE__ */ jsx(SkeletonItem, { style: { width: "80px", height: "20px" } }) }),
+      /* @__PURE__ */ jsx(Skeleton, { children: /* @__PURE__ */ jsx(SkeletonItem, { style: { width: "200px", height: "16px" } }) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: styles.sliderContainer, children: [
+      /* @__PURE__ */ jsx(Skeleton, { children: /* @__PURE__ */ jsx(SkeletonItem, { style: { width: "100%", height: "4px", borderRadius: "2px" } }) }),
+      /* @__PURE__ */ jsxs("div", { className: styles.sliderValues, children: [
+        /* @__PURE__ */ jsx(Skeleton, { children: /* @__PURE__ */ jsx(SkeletonItem, { style: { width: "60px", height: "14px" } }) }),
+        /* @__PURE__ */ jsx(Skeleton, { children: /* @__PURE__ */ jsx(SkeletonItem, { style: { width: "60px", height: "14px" } }) })
+      ] })
+    ] })
+  ] });
   return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange: (_, data) => onOpenChange(data.open), children: /* @__PURE__ */ jsx(DialogSurface, { className: styles.dialogSurface, children: /* @__PURE__ */ jsxs(DialogBody, { children: [
     /* @__PURE__ */ jsx(
       DialogTitle,
@@ -9231,7 +9281,7 @@ var ModalFilterTicket = ({
     ),
     /* @__PURE__ */ jsxs(DialogContent, { className: styles.content, children: [
       /* @__PURE__ */ jsx(Divider, {}),
-      /* @__PURE__ */ jsxs("div", { className: styles.section, children: [
+      isLoading ? renderServiceTypesSkeleton() : /* @__PURE__ */ jsxs("div", { className: styles.section, children: [
         /* @__PURE__ */ jsx(Body1, { children: mergedLabels.serviceTypeLabel }),
         /* @__PURE__ */ jsx("div", { className: styles.buttonGrid, children: serviceTypes.map((service) => {
           const isSelected = selectedServiceTypes.includes(
@@ -9252,7 +9302,7 @@ var ModalFilterTicket = ({
         }) })
       ] }),
       /* @__PURE__ */ jsx(Divider, {}),
-      /* @__PURE__ */ jsxs("div", { className: styles.section, children: [
+      isLoading ? renderTimeSlotsSkeleton() : /* @__PURE__ */ jsxs("div", { className: styles.section, children: [
         /* @__PURE__ */ jsx(Body1, { children: mergedLabels.departureTimeLabel }),
         /* @__PURE__ */ jsx(Row, { children: timeSlots.map((slot) => /* @__PURE__ */ jsx(
           Col,
@@ -9280,7 +9330,7 @@ var ModalFilterTicket = ({
         )) })
       ] }),
       /* @__PURE__ */ jsx(Divider, {}),
-      /* @__PURE__ */ jsxs("div", { className: styles.section, children: [
+      isLoading ? renderTimeSlotsSkeleton() : /* @__PURE__ */ jsxs("div", { className: styles.section, children: [
         /* @__PURE__ */ jsx(Body1, { children: mergedLabels.arrivalTimeLabel }),
         /* @__PURE__ */ jsx(Row, { children: timeSlots.map((slot) => /* @__PURE__ */ jsx(
           Col,
@@ -9308,18 +9358,18 @@ var ModalFilterTicket = ({
         )) })
       ] }),
       /* @__PURE__ */ jsx(Divider, {}),
-      /* @__PURE__ */ jsxs("div", { className: styles.containerRange, children: [
+      isLoading ? renderRangeSkeleton() : /* @__PURE__ */ jsxs("div", { className: styles.containerRange, children: [
         /* @__PURE__ */ jsxs("div", { className: styles.spaceText, children: [
           /* @__PURE__ */ jsx(Subtitle2, { children: mergedLabels.priceLabel }),
           /* @__PURE__ */ jsx(Body1, { children: mergedLabels.priceRangeText(priceRange[0], priceRange[1]) })
         ] }),
         /* @__PURE__ */ jsxs("div", { className: styles.sliderContainer, children: [
-          rangeReady && /* @__PURE__ */ jsx(
+          rangeReady && hasPriceRange && /* @__PURE__ */ jsx(
             Range,
             {
               min: minPrice,
               max: maxPrice,
-              values: priceRange,
+              values: safePriceValues,
               onChange: (values) => onPriceRangeChange(values),
               renderTrack: renderPriceTrack,
               renderThumb
@@ -9333,7 +9383,7 @@ var ModalFilterTicket = ({
         ] })
       ] }),
       /* @__PURE__ */ jsx(Divider, {}),
-      /* @__PURE__ */ jsxs("div", { className: styles.containerRange, children: [
+      isLoading ? renderRangeSkeleton() : /* @__PURE__ */ jsxs("div", { className: styles.containerRange, children: [
         /* @__PURE__ */ jsxs("div", { className: styles.spaceText, children: [
           /* @__PURE__ */ jsx(Subtitle2, { children: mergedLabels.durationLabel }),
           /* @__PURE__ */ jsx(Body1, { children: mergedLabels.durationRangeText(
@@ -9342,13 +9392,13 @@ var ModalFilterTicket = ({
           ) })
         ] }),
         /* @__PURE__ */ jsxs("div", { className: styles.sliderContainer, children: [
-          rangeReady && /* @__PURE__ */ jsx(
+          rangeReady && hasDurationRange && /* @__PURE__ */ jsx(
             Range,
             {
-              step: 1,
+              step: durationStep,
               min: minDuration,
               max: maxDuration,
-              values: durationRange,
+              values: safeDurationValues,
               onChange: (values) => onDurationRangeChange(values),
               renderTrack: renderDurationTrack,
               renderThumb
@@ -9359,12 +9409,12 @@ var ModalFilterTicket = ({
             /* @__PURE__ */ jsxs("span", { children: [
               minDuration,
               " ",
-              mergedLabels.hourUnit
+              mergedLabels.minuteUnit
             ] }),
             /* @__PURE__ */ jsxs("span", { children: [
               maxDuration,
               " ",
-              mergedLabels.hourUnit
+              mergedLabels.minuteUnit
             ] })
           ] })
         ] })