@asdp/ferryui 0.1.15 → 0.1.16
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 +8 -0
- package/dist/index.d.ts +8 -0
- package/dist/index.js +35 -2
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +36 -3
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/dist/index.d.mts
CHANGED
|
@@ -231,6 +231,10 @@ interface CardPromoProps {
|
|
|
231
231
|
* custom description className
|
|
232
232
|
*/
|
|
233
233
|
descriptionClassName?: string;
|
|
234
|
+
/**
|
|
235
|
+
* Loading state
|
|
236
|
+
*/
|
|
237
|
+
isLoading?: boolean;
|
|
234
238
|
}
|
|
235
239
|
declare const CardPromo: React$1.FC<CardPromoProps>;
|
|
236
240
|
|
|
@@ -255,6 +259,10 @@ interface CardBannerProps {
|
|
|
255
259
|
* Click handler for the banner
|
|
256
260
|
*/
|
|
257
261
|
onClick?: () => void;
|
|
262
|
+
/**
|
|
263
|
+
* Loading state
|
|
264
|
+
*/
|
|
265
|
+
isLoading?: boolean;
|
|
258
266
|
}
|
|
259
267
|
declare const CardBanner: React$1.FC<CardBannerProps>;
|
|
260
268
|
|
package/dist/index.d.ts
CHANGED
|
@@ -231,6 +231,10 @@ interface CardPromoProps {
|
|
|
231
231
|
* custom description className
|
|
232
232
|
*/
|
|
233
233
|
descriptionClassName?: string;
|
|
234
|
+
/**
|
|
235
|
+
* Loading state
|
|
236
|
+
*/
|
|
237
|
+
isLoading?: boolean;
|
|
234
238
|
}
|
|
235
239
|
declare const CardPromo: React$1.FC<CardPromoProps>;
|
|
236
240
|
|
|
@@ -255,6 +259,10 @@ interface CardBannerProps {
|
|
|
255
259
|
* Click handler for the banner
|
|
256
260
|
*/
|
|
257
261
|
onClick?: () => void;
|
|
262
|
+
/**
|
|
263
|
+
* Loading state
|
|
264
|
+
*/
|
|
265
|
+
isLoading?: boolean;
|
|
258
266
|
}
|
|
259
267
|
declare const CardBanner: React$1.FC<CardBannerProps>;
|
|
260
268
|
|
package/dist/index.js
CHANGED
|
@@ -352,10 +352,29 @@ var CardPromo = ({
|
|
|
352
352
|
buttonText = "Lihat Detail",
|
|
353
353
|
className,
|
|
354
354
|
imageClassName,
|
|
355
|
-
descriptionClassName
|
|
355
|
+
descriptionClassName,
|
|
356
|
+
isLoading = false
|
|
356
357
|
}) => {
|
|
357
358
|
const classes = useStyles3();
|
|
358
359
|
const ariaLabel = totalCards ? `Card ${index + 1} of ${totalCards}` : `Promo card ${index + 1}`;
|
|
360
|
+
if (isLoading) {
|
|
361
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
362
|
+
reactComponents.CarouselCard,
|
|
363
|
+
{
|
|
364
|
+
autoSize: true,
|
|
365
|
+
className: reactComponents.mergeClasses(classes.actionCard, className),
|
|
366
|
+
style: { cursor: "default" },
|
|
367
|
+
children: /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Skeleton, { "aria-label": "Loading content", children: [
|
|
368
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: reactComponents.mergeClasses(classes.imageContainer, imageClassName), children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { shape: "rectangle", style: { width: "100%", height: "100%" } }) }),
|
|
369
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Row, { className: classes.infoWrapper, children: /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Col, { className: classes.info, xs: 12, children: [
|
|
370
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { style: { width: "70%", height: "20px" } }),
|
|
371
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { style: { width: "90%", height: "16px" } }),
|
|
372
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { style: { width: "80%", height: "16px" } })
|
|
373
|
+
] }) })
|
|
374
|
+
] })
|
|
375
|
+
}
|
|
376
|
+
);
|
|
377
|
+
}
|
|
359
378
|
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
360
379
|
reactComponents.CarouselCard,
|
|
361
380
|
{
|
|
@@ -421,10 +440,24 @@ var CardBanner = ({
|
|
|
421
440
|
alt,
|
|
422
441
|
index = 0,
|
|
423
442
|
totalBanners,
|
|
424
|
-
onClick
|
|
443
|
+
onClick,
|
|
444
|
+
isLoading = false
|
|
425
445
|
}) => {
|
|
426
446
|
const classes = useStyles4();
|
|
427
447
|
const ariaLabel = totalBanners ? `Banner ${index + 1} of ${totalBanners}` : `Banner ${index + 1}`;
|
|
448
|
+
if (isLoading) {
|
|
449
|
+
return /* @__PURE__ */ jsxRuntime.jsx(reactComponents.CarouselCard, { className: classes.bannerCard, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Skeleton, { "aria-label": "Loading banner", style: { width: "100%", height: "100%" }, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
450
|
+
reactComponents.SkeletonItem,
|
|
451
|
+
{
|
|
452
|
+
shape: "rectangle",
|
|
453
|
+
style: {
|
|
454
|
+
width: "100%",
|
|
455
|
+
height: "100%",
|
|
456
|
+
borderRadius: reactComponents.tokens.borderRadiusXLarge
|
|
457
|
+
}
|
|
458
|
+
}
|
|
459
|
+
) }) });
|
|
460
|
+
}
|
|
428
461
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
429
462
|
reactComponents.CarouselCard,
|
|
430
463
|
{
|