@anker-in/headless-ui 1.1.78 → 1.1.80
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/cjs/biz-components/Faq/Faq.js +1 -1
- package/dist/cjs/biz-components/Faq/Faq.js.map +2 -2
- package/dist/cjs/biz-components/Features/index.js +1 -1
- package/dist/cjs/biz-components/Features/index.js.map +2 -2
- package/dist/cjs/biz-components/GiftBox/index.d.ts +3 -6
- package/dist/cjs/biz-components/GiftBox/index.js +1 -1
- package/dist/cjs/biz-components/GiftBox/index.js.map +3 -3
- package/dist/cjs/biz-components/GiftBox/types.d.ts +13 -0
- package/dist/cjs/biz-components/GiftBox/types.js +2 -0
- package/dist/cjs/biz-components/GiftBox/types.js.map +7 -0
- package/dist/cjs/biz-components/Graphic/index.d.ts +7 -0
- package/dist/cjs/biz-components/Graphic/index.js +1 -1
- package/dist/cjs/biz-components/Graphic/index.js.map +3 -3
- package/dist/cjs/biz-components/GraphicMore/index.js +1 -1
- package/dist/cjs/biz-components/GraphicMore/index.js.map +2 -2
- package/dist/cjs/biz-components/ImageWithText/ImageWithText.js +1 -1
- package/dist/cjs/biz-components/ImageWithText/ImageWithText.js.map +2 -2
- package/dist/cjs/biz-components/Listing/components/PaidShipping/ShippingMethod.js +1 -1
- package/dist/cjs/biz-components/Listing/components/PaidShipping/ShippingMethod.js.map +2 -2
- package/dist/cjs/biz-components/Listing/components/PaidShipping/ShippingPolicyModal.js +1 -1
- package/dist/cjs/biz-components/Listing/components/PaidShipping/ShippingPolicyModal.js.map +2 -2
- package/dist/cjs/biz-components/Listing/components/PaidShipping/index.js +1 -1
- package/dist/cjs/biz-components/Listing/components/PaidShipping/index.js.map +2 -2
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/ProductBanner/index.d.ts +20 -0
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/ProductBanner/index.js +2 -0
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/ProductBanner/index.js.map +7 -0
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/ProductBenefits/index.d.ts +18 -0
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/ProductBenefits/index.js +2 -0
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/ProductBenefits/index.js.map +7 -0
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/ProductBenefitsTabs/ModalContainer.js +1 -1
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/ProductBenefitsTabs/ModalContainer.js.map +2 -2
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/ProductBundle/index.js +1 -1
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/ProductBundle/index.js.map +3 -3
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/ProductCoupon/index.d.ts +41 -0
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/ProductCoupon/index.js +2 -0
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/ProductCoupon/index.js.map +7 -0
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/ProductExchangePurchase/index.js +1 -1
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/ProductExchangePurchase/index.js.map +3 -3
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/ProductFreeGift/index.js +1 -1
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/ProductFreeGift/index.js.map +3 -3
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/ProductHighlight/index.js +2 -2
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/ProductHighlight/index.js.map +2 -2
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/ProductOptions/index.js +1 -1
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/ProductOptions/index.js.map +2 -2
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductGallery/components/CompareModal.js +1 -1
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductGallery/components/CompareModal.js.map +2 -2
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductGallery/components/SpecsModal.js +1 -1
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductGallery/components/SpecsModal.js.map +2 -2
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductGallery/index.js +1 -1
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductGallery/index.js.map +2 -2
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductGridBox.js +1 -1
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductGridBox.js.map +2 -2
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductPaidShipping/index.d.ts +2 -0
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductPaidShipping/index.js +2 -0
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductPaidShipping/index.js.map +7 -0
- package/dist/cjs/biz-components/Listing/components/PurchaseBar/ProductActions/index.js +1 -1
- package/dist/cjs/biz-components/Listing/components/PurchaseBar/ProductActions/index.js.map +2 -2
- package/dist/cjs/biz-components/Listing/components/PurchaseBar/ScrollSpyNav/index.js +1 -1
- package/dist/cjs/biz-components/Listing/components/PurchaseBar/ScrollSpyNav/index.js.map +2 -2
- package/dist/cjs/biz-components/Listing/hooks/useFollowTooltip.d.ts +19 -0
- package/dist/cjs/biz-components/Listing/hooks/useFollowTooltip.js +2 -0
- package/dist/cjs/biz-components/Listing/hooks/useFollowTooltip.js.map +7 -0
- package/dist/cjs/biz-components/MediaPlayerBase/index.js +1 -1
- package/dist/cjs/biz-components/MediaPlayerBase/index.js.map +2 -2
- package/dist/cjs/biz-components/SelectStore/index.js +1 -1
- package/dist/cjs/biz-components/SelectStore/index.js.map +2 -2
- package/dist/cjs/biz-components/Tabs/Tabs.js +1 -1
- package/dist/cjs/biz-components/Tabs/Tabs.js.map +2 -2
- package/dist/cjs/biz-components/ThreeDCarousel/ThreeDCarousel.js +1 -1
- package/dist/cjs/biz-components/ThreeDCarousel/ThreeDCarousel.js.map +2 -2
- package/dist/cjs/biz-components/Title/index.js +1 -1
- package/dist/cjs/biz-components/Title/index.js.map +2 -2
- package/dist/cjs/biz-components/index.d.ts +4 -0
- package/dist/cjs/biz-components/index.js +1 -1
- package/dist/cjs/biz-components/index.js.map +3 -3
- package/dist/cjs/helpers/index.d.ts +1 -0
- package/dist/cjs/helpers/index.js +1 -1
- package/dist/cjs/helpers/index.js.map +3 -3
- package/dist/cjs/helpers/isLexicalEmpty.d.ts +13 -0
- package/dist/cjs/helpers/isLexicalEmpty.js +2 -0
- package/dist/cjs/helpers/isLexicalEmpty.js.map +7 -0
- package/dist/cjs/helpers/utils.js +1 -1
- package/dist/cjs/helpers/utils.js.map +2 -2
- package/dist/esm/biz-components/Faq/Faq.js +1 -1
- package/dist/esm/biz-components/Faq/Faq.js.map +2 -2
- package/dist/esm/biz-components/Features/index.js +1 -1
- package/dist/esm/biz-components/Features/index.js.map +2 -2
- package/dist/esm/biz-components/GiftBox/index.d.ts +3 -6
- package/dist/esm/biz-components/GiftBox/index.js +1 -1
- package/dist/esm/biz-components/GiftBox/index.js.map +3 -3
- package/dist/esm/biz-components/GiftBox/types.d.ts +13 -0
- package/dist/esm/biz-components/GiftBox/types.js +1 -0
- package/dist/esm/biz-components/Graphic/index.d.ts +7 -0
- package/dist/esm/biz-components/Graphic/index.js +1 -1
- package/dist/esm/biz-components/Graphic/index.js.map +3 -3
- package/dist/esm/biz-components/GraphicMore/index.js +1 -1
- package/dist/esm/biz-components/GraphicMore/index.js.map +2 -2
- package/dist/esm/biz-components/ImageWithText/ImageWithText.js +1 -1
- package/dist/esm/biz-components/ImageWithText/ImageWithText.js.map +2 -2
- package/dist/esm/biz-components/Listing/components/PaidShipping/ShippingMethod.js +1 -1
- package/dist/esm/biz-components/Listing/components/PaidShipping/ShippingMethod.js.map +2 -2
- package/dist/esm/biz-components/Listing/components/PaidShipping/ShippingPolicyModal.js +1 -1
- package/dist/esm/biz-components/Listing/components/PaidShipping/ShippingPolicyModal.js.map +2 -2
- package/dist/esm/biz-components/Listing/components/PaidShipping/index.js +1 -1
- package/dist/esm/biz-components/Listing/components/PaidShipping/index.js.map +2 -2
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/ProductBanner/index.d.ts +20 -0
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/ProductBanner/index.js +2 -0
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/ProductBanner/index.js.map +7 -0
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/ProductBenefits/index.d.ts +18 -0
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/ProductBenefits/index.js +2 -0
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/ProductBenefits/index.js.map +7 -0
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/ProductBenefitsTabs/ModalContainer.js +1 -1
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/ProductBenefitsTabs/ModalContainer.js.map +2 -2
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/ProductBundle/index.js +1 -1
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/ProductBundle/index.js.map +3 -3
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/ProductCoupon/index.d.ts +41 -0
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/ProductCoupon/index.js +2 -0
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/ProductCoupon/index.js.map +7 -0
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/ProductExchangePurchase/index.js +1 -1
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/ProductExchangePurchase/index.js.map +3 -3
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/ProductFreeGift/index.js +1 -1
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/ProductFreeGift/index.js.map +3 -3
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/ProductHighlight/index.js +2 -2
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/ProductHighlight/index.js.map +2 -2
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/ProductOptions/index.js +1 -1
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/ProductOptions/index.js.map +2 -2
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductGallery/components/CompareModal.js +1 -1
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductGallery/components/CompareModal.js.map +2 -2
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductGallery/components/SpecsModal.js +1 -1
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductGallery/components/SpecsModal.js.map +2 -2
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductGallery/index.js +1 -1
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductGallery/index.js.map +2 -2
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductGridBox.js +1 -1
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductGridBox.js.map +2 -2
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductPaidShipping/index.d.ts +2 -0
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductPaidShipping/index.js +2 -0
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductPaidShipping/index.js.map +7 -0
- package/dist/esm/biz-components/Listing/components/PurchaseBar/ProductActions/index.js +1 -1
- package/dist/esm/biz-components/Listing/components/PurchaseBar/ProductActions/index.js.map +2 -2
- package/dist/esm/biz-components/Listing/components/PurchaseBar/ScrollSpyNav/index.js +1 -1
- package/dist/esm/biz-components/Listing/components/PurchaseBar/ScrollSpyNav/index.js.map +2 -2
- package/dist/esm/biz-components/Listing/hooks/useFollowTooltip.d.ts +19 -0
- package/dist/esm/biz-components/Listing/hooks/useFollowTooltip.js +2 -0
- package/dist/esm/biz-components/Listing/hooks/useFollowTooltip.js.map +7 -0
- package/dist/esm/biz-components/MediaPlayerBase/index.js +1 -1
- package/dist/esm/biz-components/MediaPlayerBase/index.js.map +2 -2
- package/dist/esm/biz-components/SelectStore/index.js +1 -1
- package/dist/esm/biz-components/SelectStore/index.js.map +2 -2
- package/dist/esm/biz-components/Tabs/Tabs.js +1 -1
- package/dist/esm/biz-components/Tabs/Tabs.js.map +3 -3
- package/dist/esm/biz-components/ThreeDCarousel/ThreeDCarousel.js +1 -1
- package/dist/esm/biz-components/ThreeDCarousel/ThreeDCarousel.js.map +2 -2
- package/dist/esm/biz-components/Title/index.js +1 -1
- package/dist/esm/biz-components/Title/index.js.map +2 -2
- package/dist/esm/biz-components/index.d.ts +4 -0
- package/dist/esm/biz-components/index.js +1 -1
- package/dist/esm/biz-components/index.js.map +2 -2
- package/dist/esm/helpers/index.d.ts +1 -0
- package/dist/esm/helpers/index.js +1 -1
- package/dist/esm/helpers/index.js.map +3 -3
- package/dist/esm/helpers/isLexicalEmpty.d.ts +13 -0
- package/dist/esm/helpers/isLexicalEmpty.js +2 -0
- package/dist/esm/helpers/isLexicalEmpty.js.map +7 -0
- package/dist/esm/helpers/utils.js +1 -1
- package/dist/esm/helpers/utils.js.map +2 -2
- package/package.json +1 -1
- package/style.css +197 -38
- package/dist/cjs/biz-components/Listing/index.d.ts +0 -0
- package/dist/cjs/biz-components/Listing/index.js +0 -2
- package/dist/esm/biz-components/Listing/index.d.ts +0 -0
- package/dist/esm/biz-components/Listing/index.js +0 -2
- package/dist/esm/biz-components/Listing/index.js.map +0 -7
- /package/dist/{cjs/biz-components/Listing/index.js.map → esm/biz-components/GiftBox/types.js.map} +0 -0
package/dist/cjs/biz-components/Listing/components/ProductCard/ProductPaidShipping/index.js.map
ADDED
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../../../src/biz-components/Listing/components/ProductCard/ProductPaidShipping/index.tsx"],
|
|
4
|
+
"sourcesContent": ["import { Button, Text } from '../../../../../components/index.js'\nimport type { Product, ProductVariant } from '../../../types/product.js'\nimport { useCallback, useEffect, useMemo, useState } from 'react'\nimport { cn } from '../../../../../helpers/index.js'\n\nimport ShippingMethod from '../../PaidShipping/ShippingMethod.js'\nimport { ShippingPolicyModal } from '../../PaidShipping/ShippingPolicyModal.js'\nimport type { DeliveryCustom, shippingMetafields, ShippingMethodType } from '../../PaidShipping/type.js'\nimport { isWeightAvailable } from '../../PaidShipping/utils.js'\nimport LearnMore from '../../PaidShipping/LearnMore.js'\nimport { useBizProductContext } from '../../../BizProductProvider.js'\nimport { withLayout } from '../../../../../shared/Styles.js'\n\nconst ProductPaidShipping = ({\n metafields,\n productList,\n onShippingInfoChange,\n variant,\n className,\n}: {\n metafields: any\n productList: Array<Product & { variant: ProductVariant }>\n variant: ProductVariant\n onShippingInfoChange: (deliveryCustom: DeliveryCustom) => void\n className?: string\n}) => {\n const { isLogin, openSignInPopup } = useBizProductContext()\n const [openShippingPolicyModal, setOpenShippingPolicyModal] = useState(false)\n const [init, setInit] = useState(false)\n\n const [selectedMethod, setSelectedMethod] = useState<ShippingMethodType | null>(null)\n\n const weight = useMemo(() => {\n return productList.reduce((acc, product) => acc + (product?.variant?.weight || 0), 0)\n }, [productList])\n\n const normalizedMethod = useCallback(\n (method: shippingMetafields, weight: number, index: number) => {\n return {\n id: `${method.__code}__${method.price}`,\n code: method.__code,\n mode: method.__mode,\n title: method.title,\n disabled: !isWeightAvailable(weight, method),\n price: method.price,\n subtitle: method.subtitle,\n tag: index !== 0 ? metafields?.memberOnly : '',\n error: !isWeightAvailable(weight, method) ? metafields.overWeightError : '',\n }\n },\n [metafields?.memberOnly, metafields.overWeightError]\n )\n\n const list = useMemo(() => {\n const normalizedList: ShippingMethodType[] = metafields?.list?.map((method: shippingMetafields, index: number) =>\n normalizedMethod(method, weight, index)\n )\n\n return normalizedList?.reduce((prev: ShippingMethodType[], method: ShippingMethodType) => {\n // \u5982\u679C\u8D85\u91CD\uFF0C\u540C\u4E00\u4E2A\u7269\u6D41\u9009\u9879\u7C7B\u578B\u4E0B\uFF0C\u5C55\u793A\u5176\u4E2D\u4E00\u4E2A\u4E14\u4E0D\u53EF\u9009\n const sameTypeMethod = normalizedList.filter((m: ShippingMethodType) => m.code == method.code)\n let availableMethod: ShippingMethodType\n // \u6240\u6709\u7269\u6D41\u9009\u9879\u90FD\u4E0D\u53EF\u9009\n if (sameTypeMethod.every((m: ShippingMethodType) => m.disabled)) {\n availableMethod = sameTypeMethod[sameTypeMethod.length - 1]\n } else {\n // \u53EF\u9009\u7269\u6D41\u9009\u9879\n availableMethod = sameTypeMethod.find((m: ShippingMethodType) => !m.disabled)!\n }\n // \u5F53\u524D\u7269\u6D41\u9009\u9879\u5DF2\u5B58\u5728\n const hasSameMethod = prev.find((m: ShippingMethodType) => availableMethod.id === m.id)\n if (!hasSameMethod) {\n return [...prev, availableMethod]\n } else {\n return prev\n }\n }, [] as ShippingMethodType[])\n }, [normalizedMethod, metafields?.list, weight])\n\n const handleChangeShippingInfo = useCallback(\n (selectedMethod: ShippingMethodType) => {\n onShippingInfoChange({\n selected_delivery_code: selectedMethod.code,\n selected_delivery_mode: selectedMethod.mode,\n })\n },\n [onShippingInfoChange]\n )\n\n useEffect(() => {\n // \u9ED8\u8BA4\u9009\u4E2D\u7B2C\u4E00\u4E2A\u7269\u6D41\u9009\u9879\n if (metafields?.list?.length > 0 && !init) {\n const standardShippingMethod = normalizedMethod(metafields?.list[0], 0, 0)\n setSelectedMethod(standardShippingMethod)\n handleChangeShippingInfo(standardShippingMethod)\n setInit(true)\n }\n }, [normalizedMethod, metafields?.list, handleChangeShippingInfo, init])\n\n const toggleShipping = useCallback(\n (method: ShippingMethodType) => {\n if (method.disabled) {\n return\n }\n setSelectedMethod(method)\n handleChangeShippingInfo(method)\n // gaTrack({\n // event: 'ga4Event',\n // event_name: 'lp_button',\n // member_active_status: isLogin ? 'active' : 'not active', //\u7528\u4E8E\u8F93\u5165code\u6FC0\u6D3B\u4F1A\u5458\u5F39'\u7A97\u7684\u6309\u94AE\uFF0C\u533A\u5206\u4F1A\u5458\u6FC0\u6D3B\u72B6\u6001\uFF0C\u4F20active\u6216not active\n // event_parameters: {\n // page_group: 'Product Detail Page' + variant.sku, //\u5982\u679C\u662F\u9996\u9875\uFF0C\u5219\u4F20\"Home Page\";\u5982\u679C\u662Flisting\u7684\u9996\u5C4F\u6309\u94AE\uFF0C\u4F20Product Detail Page+$SKU\n // position: 'masterbanner1', //\u4F4D\u7F6E\u6807\u8BB0\u3002\u9996\u9875\u9996\u5C4F\u8F6E\u64AD\u4F4D\u7F6E\u4F20masterbanner1\u3001masterbanner2\u3001masterbanner3\uFF0C\u7B2C\u4E8C\u5C4F\u4F202nd_banner\uFF0C\u7B2C\u4E09\u5C4F\u4F203rd_banner\uFF0C\u6216\u8005\u53D6\u8BE5\u6A21\u5757\u5C0F\u6807\u9898\uFF0C\u6216\u80FD\u8BC6\u522B\u51FA\u662F\u54EA\u4E2A\u6A21\u5757\u4F4D\u7F6E\u7684\u6587\u6848\uFF0C\u5F39\u7A97\u4F20pop;\u5982\u679C\u662F\u8D2D\u7269\u8F66\u4FA7\u8FB9\u680F\uFF0C\u5219\u4F20\"Cart Pop Up\"\n // button_name: method.title, //\u53D6\u6309\u94AE\u6587\u6848\uFF0C\u6216\u80FD\u8BC6\u522B\u51FA\u662F\u54EA\u4E2A\u6309\u94AE\u7684\u6587\u6848,\u6BD4\u5982\u53F3\u4E0A\u89D2\u5173\u95ED\u4F20close,\u793E\u5A92\u5206\u4EAB\u56FE\u6807\u4F20\u5BF9\u5E94\u5E73\u53F0\u540D\u5B57\u5982Facebook,\u56FE\u7247\u5207\u6362\u5219\u4F20\u5BF9\u5E94\u5C55\u793A\u56FE\u7247\u7684\u540D\u5B57\n // info: '', //\u9ED8\u8BA4\u7A7A\u503C\uFF0C\u4E00\u822C\u4F20\u590D\u9009\u6846\u7684\u6587\u6848\u5185\u5BB9\uFF0C\u7279\u6B8A\u60C5\u51B5\u53EF\u6307\u5B9Ainfo\u503C\n // },\n // })\n },\n\n [isLogin, list, variant.sku, handleChangeShippingInfo, openSignInPopup]\n )\n\n return (\n <div id=\"ipc-product-paid-shipping\" className={cn(className)}>\n <div className=\"flex flex-wrap justify-between space-x-2 md:space-x-1\">\n <Text\n className=\"lg-desktop:text-[16px] text-[14px] font-bold leading-[1.2] text-[#1F2021]\"\n html={metafields?.title}\n ></Text>\n <Button\n variant=\"link\"\n onClick={() => {\n setOpenShippingPolicyModal(true)\n }}\n className=\"lg-desktop:text-[16px] text-[14px] font-bold !p-0\"\n >\n {metafields?.policy}\n </Button>\n </div>\n <div className=\"lg-desktop:mt-[16px] mt-[12px] flex-col flex gap-[12px] overflow-hidden\">\n {list.map((method: ShippingMethodType, index: number) => (\n <ShippingMethod\n key={index}\n index={index}\n item={method}\n active={selectedMethod?.code === method.code}\n toggleShipping={() => toggleShipping(method)}\n currencyCode={variant.price.currencyCode}\n metafields={metafields}\n className=\"w-full laptop:h-[100px] h-[80px]\"\n />\n ))}\n {/* learn more \u5361\u7247 */}\n {/* <LearnMore\n setOpenShippingPolicyModal={setOpenShippingPolicyModal}\n metafields={metafields}\n className=\"w-full\"\n /> */}\n </div>\n {list.find((method: ShippingMethodType) => method?.error) && (\n <Text\n className=\"laptop-md:mt-[16px] mt-[12px] font-bold leading-[1.4] text-[#D41435]\"\n html={list.find((method: ShippingMethodType) => method.error)?.error as string}\n as=\"p\"\n />\n )}\n\n {metafields?.seeAvailableArea && (\n <Text\n as=\"div\"\n className=\"lg-desktop:mt-[16px] mt-3 font-bold leading-[1.4] text-[14px] lg-desktop:text-[16px] text-[#080A0F] [&_a]:underline\"\n html={metafields?.seeAvailableArea}\n />\n )}\n {metafields?.shippingPolicy && (\n <ShippingPolicyModal\n data={metafields?.shippingPolicy}\n onClose={() => setOpenShippingPolicyModal(false)}\n open={openShippingPolicyModal}\n />\n )}\n </div>\n )\n}\n\nexport default withLayout(ProductPaidShipping)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["ProductPaidShipping_exports", "__export", "ProductPaidShipping_default", "__toCommonJS", "import_jsx_runtime", "import_components", "import_react", "import_helpers", "import_ShippingMethod", "import_ShippingPolicyModal", "import_utils", "import_LearnMore", "import_BizProductProvider", "import_Styles", "ProductPaidShipping", "metafields", "productList", "onShippingInfoChange", "variant", "className", "isLogin", "openSignInPopup", "openShippingPolicyModal", "setOpenShippingPolicyModal", "init", "setInit", "selectedMethod", "setSelectedMethod", "weight", "acc", "product", "normalizedMethod", "method", "index", "list", "normalizedList", "prev", "sameTypeMethod", "m", "availableMethod", "handleChangeShippingInfo", "standardShippingMethod", "toggleShipping", "ShippingMethod"]
|
|
7
|
+
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var m=Object.defineProperty;var w=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var P=Object.prototype.hasOwnProperty;var S=(l,t)=>{for(var r in t)m(l,r,{get:t[r],enumerable:!0})},A=(l,t,r,o)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of h(t))!P.call(l,i)&&i!==r&&m(l,i,{get:()=>t[i],enumerable:!(o=w(t,i))||o.enumerable});return l};var k=l=>A(m({},"__esModule",{value:!0}),l);var z={};S(z,{default:()=>T});module.exports=k(z);var e=require("react/jsx-runtime"),a=require("../../../../../components/index.js"),p=require("../../../../AiuiProvider/index.js"),x=require("../../../BizProductProvider.js"),u=require("react"),d=require("../../../utils/index.js"),b=require("../../../utils/textFormat.js");const B=({totalSavingsSlot:l}={})=>{const{copyWriting:t,locale:r="us"}=(0,p.useAiuiContext)(),{variant:o,finalPrice:i,totalSavings:n,isLogin:s,comparePrice:g,onAddToCart:f,onBuyNow:y,savingDetail:c,addToCartLoading:C,buyNowLoading:v}=(0,x.useBizProductContext)(),N=(0,u.useMemo)(()=>(0,b.replaceTemplate)(t?.totalSavings||"",{amount:(0,d.formatPrice)({amount:n,currencyCode:o.price.currencyCode,locale:r})}),[t?.totalSavings,n,o.price.currencyCode,r]);return(0,e.jsxs)(a.Container,{childClassName:"tablet:flex tablet:justify-end tablet:gap-8 laptop-md:px-0 desktop:px-0 tablet:items-center tablet:gap-4",className:"laptop-md:border-none laptop-md:py-0 border-t border-[#E4E5E6] bg-white py-3",children:[o.availableForSale?(0,e.jsxs)("div",{className:"laptop-md:items-end flex flex-col justify-between",children:[(0,e.jsxs)("div",{className:"flex items-center gap-1",children:[(0,e.jsx)(a.Text,{className:"tablet:text-2xl laptop-md:text-xl lg-desktop:text-2xl text-xl font-bold !leading-[1.2]",html:(0,d.formatPrice)({amount:Math.floor(i*100)/100,currencyCode:o.price.currencyCode,locale:r})}),(n>0||c?.member>0&&s)&&(0,e.jsx)(a.Text,{className:"tablet:text-2xl laptop-md:text-xl lg-desktop:text-2xl text-xl font-bold !leading-[1.2] text-[#4A4C56] line-through",html:(0,d.formatPrice)({amount:g,currencyCode:o.price.currencyCode,locale:r})}),c?.member>0&&s&&(0,e.jsx)(a.Text,{className:"bg-brand-0 rounded px-1 py-[2px] text-sm font-bold text-white",html:t?.memberPrice||"Member Price"})]}),l||(n>0||c?.member>0&&s)&&(0,e.jsx)(a.Text,{className:"text-brand-0 tablet:text-end laptop-md:text-xl lg-desktop:text-2xl whitespace-nowrap text-[18px] font-bold !leading-[1.2]",html:`${N}`})]}):(0,e.jsx)(a.Text,{className:"text-[20px] font-bold text-[#999999]",html:t?.soldOut??"Sold Out"}),(0,e.jsxs)("div",{className:"tablet:mt-0 mt-2 flex items-center gap-2",children:[(0,e.jsx)(a.Button,{variant:"secondary",disabled:!o.availableForSale,size:"lg",className:"tablet:w-auto w-1/2",onClick:()=>f?.(),loading:C,children:t?.addToCart??"Add to Cart"}),(0,e.jsx)(a.Button,{variant:"primary",disabled:!o.availableForSale,size:"lg",loading:v,className:"tablet:w-auto w-1/2",onClick:()=>y?.(),children:t?.buyNow??"Buy Now"})]})]})};var T=B;
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../src/biz-components/Listing/components/PurchaseBar/ProductActions/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import { Text, Button, Container } from '../../../../../components/index.js'\nimport { useAiuiContext } from '../../../../AiuiProvider/index.js'\nimport { useBizProductContext } from '../../../BizProductProvider.js'\nimport { useMemo, type ReactNode } from 'react'\nimport { formatPrice } from '../../../utils/index.js'\nimport { replaceTemplate } from '../../../utils/textFormat.js'\n\nexport interface ProductActionsProps {\n /** \u81EA\u5B9A\u4E49\u603B\u8282\u7701\u7EC4\u4EF6\uFF0C\u4F20\u5165\u65F6\u4F1A\u66FF\u4EE3\u9ED8\u8BA4\u7684 totalSavings \u663E\u793A */\n totalSavingsSlot?: ReactNode\n}\n\nconst ProductActions = ({ totalSavingsSlot }: ProductActionsProps = {}) => {\n const { copyWriting, locale = 'us' } = useAiuiContext()\n const {\n variant,\n finalPrice,\n totalSavings,\n isLogin,\n comparePrice,\n onAddToCart,\n onBuyNow,\n savingDetail,\n addToCartLoading,\n buyNowLoading,\n } = useBizProductContext()\n\n const totalSavingsText = useMemo(() => {\n return replaceTemplate(copyWriting?.totalSavings || '', {\n amount: formatPrice({ amount: totalSavings, currencyCode: variant.price.currencyCode, locale }),\n })\n }, [copyWriting?.totalSavings, totalSavings, variant.price.currencyCode, locale])\n\n // const memberPriceSaveText = useMemo(() => {\n // return replaceTemplate(copyWriting?.memberSaving || '', {\n // amount: formatPrice({\n // amount: savingDetail?.member,\n // currencyCode: variant.price.currencyCode,\n // locale,\n // }),\n // })\n // }, [copyWriting?.memberSaving, savingDetail?.member, variant.price.currencyCode, locale])\n\n return (\n <Container\n childClassName=\"tablet:flex tablet:justify-end tablet:gap-8 laptop-md:px-0 tablet:items-center tablet:gap-4\"\n className=\"laptop-md:border-none laptop-md:py-0 border-t border-[#E4E5E6] bg-white py-3\"\n >\n {variant.availableForSale ? (\n <div className=\"laptop-md:items-end flex flex-col justify-between\">\n <div className=\"flex items-center gap-1\">\n <Text\n className=\"tablet:text-2xl laptop-md:text-xl lg-desktop:text-2xl text-xl font-bold !leading-[1.2]\"\n html={formatPrice({\n amount: Math.floor(finalPrice * 100) / 100,\n currencyCode: variant.price.currencyCode,\n locale,\n })}\n />\n {(totalSavings > 0 || (savingDetail?.member > 0 && isLogin)) && (\n <Text\n className=\"tablet:text-2xl laptop-md:text-xl lg-desktop:text-2xl text-xl font-bold !leading-[1.2] text-[#4A4C56] line-through\"\n html={formatPrice({\n amount: comparePrice,\n currencyCode: variant.price.currencyCode,\n locale,\n })}\n />\n )}\n {savingDetail?.member > 0 && isLogin && (\n <Text\n className=\"bg-brand-0 rounded px-1 py-[2px] text-sm font-bold text-white\"\n html={copyWriting?.memberPrice || 'Member Price'}\n />\n )}\n </div>\n {totalSavingsSlot ||\n ((totalSavings > 0 || (savingDetail?.member > 0 && isLogin)) && (\n <Text\n className=\"text-brand-0 tablet:text-end laptop-md:text-xl lg-desktop:text-2xl whitespace-nowrap text-[18px] font-bold !leading-[1.2]\"\n html={`${totalSavingsText}`}\n />\n ))}\n </div>\n ) : (\n <Text className=\"text-[20px] font-bold text-[#999999]\" html={copyWriting?.soldOut ?? 'Sold Out'} />\n )}\n <div className=\"tablet:mt-0 mt-2 flex items-center gap-2\">\n <Button\n variant=\"secondary\"\n disabled={!variant.availableForSale}\n size=\"lg\"\n className=\"tablet:w-auto w-1/2\"\n onClick={() => onAddToCart?.()}\n loading={addToCartLoading}\n >\n {copyWriting?.addToCart ?? 'Add to Cart'}\n </Button>\n <Button\n variant=\"primary\"\n disabled={!variant.availableForSale}\n size=\"lg\"\n loading={buyNowLoading}\n className=\"tablet:w-auto w-1/2\"\n onClick={() => onBuyNow?.()}\n >\n {copyWriting?.buyNow ?? 'Buy Now'}\n </Button>\n </div>\n </Container>\n )\n}\n\nexport default ProductActions\n"],
|
|
5
|
-
"mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAkDU,IAAAI,EAAA,6BAlDVC,EAAwC,8CACxCC,EAA+B,6CAC/BC,EAAqC,0CACrCC,EAAwC,iBACxCC,EAA4B,mCAC5BC,EAAgC,wCAOhC,MAAMC,EAAiB,CAAC,CAAE,iBAAAC,CAAiB,EAAyB,CAAC,IAAM,CACzE,KAAM,CAAE,YAAAC,EAAa,OAAAC,EAAS,IAAK,KAAI,kBAAe,EAChD,CACJ,QAAAC,EACA,WAAAC,EACA,aAAAC,EACA,QAAAC,EACA,aAAAC,EACA,YAAAC,EACA,SAAAC,EACA,aAAAC,EACA,iBAAAC,EACA,cAAAC,CACF,KAAI,wBAAqB,EAEnBC,KAAmB,WAAQ,OACxB,mBAAgBZ,GAAa,cAAgB,GAAI,CACtD,UAAQ,eAAY,CAAE,OAAQI,EAAc,aAAcF,EAAQ,MAAM,aAAc,OAAAD,CAAO,CAAC,CAChG,CAAC,EACA,CAACD,GAAa,aAAcI,EAAcF,EAAQ,MAAM,aAAcD,CAAM,CAAC,EAYhF,SACE,QAAC,aACC,eAAe,
|
|
4
|
+
"sourcesContent": ["import { Text, Button, Container } from '../../../../../components/index.js'\nimport { useAiuiContext } from '../../../../AiuiProvider/index.js'\nimport { useBizProductContext } from '../../../BizProductProvider.js'\nimport { useMemo, type ReactNode } from 'react'\nimport { formatPrice } from '../../../utils/index.js'\nimport { replaceTemplate } from '../../../utils/textFormat.js'\n\nexport interface ProductActionsProps {\n /** \u81EA\u5B9A\u4E49\u603B\u8282\u7701\u7EC4\u4EF6\uFF0C\u4F20\u5165\u65F6\u4F1A\u66FF\u4EE3\u9ED8\u8BA4\u7684 totalSavings \u663E\u793A */\n totalSavingsSlot?: ReactNode\n}\n\nconst ProductActions = ({ totalSavingsSlot }: ProductActionsProps = {}) => {\n const { copyWriting, locale = 'us' } = useAiuiContext()\n const {\n variant,\n finalPrice,\n totalSavings,\n isLogin,\n comparePrice,\n onAddToCart,\n onBuyNow,\n savingDetail,\n addToCartLoading,\n buyNowLoading,\n } = useBizProductContext()\n\n const totalSavingsText = useMemo(() => {\n return replaceTemplate(copyWriting?.totalSavings || '', {\n amount: formatPrice({ amount: totalSavings, currencyCode: variant.price.currencyCode, locale }),\n })\n }, [copyWriting?.totalSavings, totalSavings, variant.price.currencyCode, locale])\n\n // const memberPriceSaveText = useMemo(() => {\n // return replaceTemplate(copyWriting?.memberSaving || '', {\n // amount: formatPrice({\n // amount: savingDetail?.member,\n // currencyCode: variant.price.currencyCode,\n // locale,\n // }),\n // })\n // }, [copyWriting?.memberSaving, savingDetail?.member, variant.price.currencyCode, locale])\n\n return (\n <Container\n childClassName=\"tablet:flex tablet:justify-end tablet:gap-8 laptop-md:px-0 desktop:px-0 tablet:items-center tablet:gap-4\"\n className=\"laptop-md:border-none laptop-md:py-0 border-t border-[#E4E5E6] bg-white py-3\"\n >\n {variant.availableForSale ? (\n <div className=\"laptop-md:items-end flex flex-col justify-between\">\n <div className=\"flex items-center gap-1\">\n <Text\n className=\"tablet:text-2xl laptop-md:text-xl lg-desktop:text-2xl text-xl font-bold !leading-[1.2]\"\n html={formatPrice({\n amount: Math.floor(finalPrice * 100) / 100,\n currencyCode: variant.price.currencyCode,\n locale,\n })}\n />\n {(totalSavings > 0 || (savingDetail?.member > 0 && isLogin)) && (\n <Text\n className=\"tablet:text-2xl laptop-md:text-xl lg-desktop:text-2xl text-xl font-bold !leading-[1.2] text-[#4A4C56] line-through\"\n html={formatPrice({\n amount: comparePrice,\n currencyCode: variant.price.currencyCode,\n locale,\n })}\n />\n )}\n {savingDetail?.member > 0 && isLogin && (\n <Text\n className=\"bg-brand-0 rounded px-1 py-[2px] text-sm font-bold text-white\"\n html={copyWriting?.memberPrice || 'Member Price'}\n />\n )}\n </div>\n {totalSavingsSlot ||\n ((totalSavings > 0 || (savingDetail?.member > 0 && isLogin)) && (\n <Text\n className=\"text-brand-0 tablet:text-end laptop-md:text-xl lg-desktop:text-2xl whitespace-nowrap text-[18px] font-bold !leading-[1.2]\"\n html={`${totalSavingsText}`}\n />\n ))}\n </div>\n ) : (\n <Text className=\"text-[20px] font-bold text-[#999999]\" html={copyWriting?.soldOut ?? 'Sold Out'} />\n )}\n <div className=\"tablet:mt-0 mt-2 flex items-center gap-2\">\n <Button\n variant=\"secondary\"\n disabled={!variant.availableForSale}\n size=\"lg\"\n className=\"tablet:w-auto w-1/2\"\n onClick={() => onAddToCart?.()}\n loading={addToCartLoading}\n >\n {copyWriting?.addToCart ?? 'Add to Cart'}\n </Button>\n <Button\n variant=\"primary\"\n disabled={!variant.availableForSale}\n size=\"lg\"\n loading={buyNowLoading}\n className=\"tablet:w-auto w-1/2\"\n onClick={() => onBuyNow?.()}\n >\n {copyWriting?.buyNow ?? 'Buy Now'}\n </Button>\n </div>\n </Container>\n )\n}\n\nexport default ProductActions\n"],
|
|
5
|
+
"mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAkDU,IAAAI,EAAA,6BAlDVC,EAAwC,8CACxCC,EAA+B,6CAC/BC,EAAqC,0CACrCC,EAAwC,iBACxCC,EAA4B,mCAC5BC,EAAgC,wCAOhC,MAAMC,EAAiB,CAAC,CAAE,iBAAAC,CAAiB,EAAyB,CAAC,IAAM,CACzE,KAAM,CAAE,YAAAC,EAAa,OAAAC,EAAS,IAAK,KAAI,kBAAe,EAChD,CACJ,QAAAC,EACA,WAAAC,EACA,aAAAC,EACA,QAAAC,EACA,aAAAC,EACA,YAAAC,EACA,SAAAC,EACA,aAAAC,EACA,iBAAAC,EACA,cAAAC,CACF,KAAI,wBAAqB,EAEnBC,KAAmB,WAAQ,OACxB,mBAAgBZ,GAAa,cAAgB,GAAI,CACtD,UAAQ,eAAY,CAAE,OAAQI,EAAc,aAAcF,EAAQ,MAAM,aAAc,OAAAD,CAAO,CAAC,CAChG,CAAC,EACA,CAACD,GAAa,aAAcI,EAAcF,EAAQ,MAAM,aAAcD,CAAM,CAAC,EAYhF,SACE,QAAC,aACC,eAAe,2GACf,UAAU,+EAET,UAAAC,EAAQ,oBACP,QAAC,OAAI,UAAU,oDACb,qBAAC,OAAI,UAAU,0BACb,oBAAC,QACC,UAAU,yFACV,QAAM,eAAY,CAChB,OAAQ,KAAK,MAAMC,EAAa,GAAG,EAAI,IACvC,aAAcD,EAAQ,MAAM,aAC5B,OAAAD,CACF,CAAC,EACH,GACEG,EAAe,GAAMK,GAAc,OAAS,GAAKJ,OACjD,OAAC,QACC,UAAU,qHACV,QAAM,eAAY,CAChB,OAAQC,EACR,aAAcJ,EAAQ,MAAM,aAC5B,OAAAD,CACF,CAAC,EACH,EAEDQ,GAAc,OAAS,GAAKJ,MAC3B,OAAC,QACC,UAAU,gEACV,KAAML,GAAa,aAAe,eACpC,GAEJ,EACCD,IACGK,EAAe,GAAMK,GAAc,OAAS,GAAKJ,OACjD,OAAC,QACC,UAAU,4HACV,KAAM,GAAGO,CAAgB,GAC3B,GAEN,KAEA,OAAC,QAAK,UAAU,uCAAuC,KAAMZ,GAAa,SAAW,WAAY,KAEnG,QAAC,OAAI,UAAU,2CACb,oBAAC,UACC,QAAQ,YACR,SAAU,CAACE,EAAQ,iBACnB,KAAK,KACL,UAAU,sBACV,QAAS,IAAMK,IAAc,EAC7B,QAASG,EAER,SAAAV,GAAa,WAAa,cAC7B,KACA,OAAC,UACC,QAAQ,UACR,SAAU,CAACE,EAAQ,iBACnB,KAAK,KACL,QAASS,EACT,UAAU,sBACV,QAAS,IAAMH,IAAW,EAEzB,SAAAR,GAAa,QAAU,UAC1B,GACF,GACF,CAEJ,EAEA,IAAOX,EAAQS",
|
|
6
6
|
"names": ["ProductActions_exports", "__export", "ProductActions_default", "__toCommonJS", "import_jsx_runtime", "import_components", "import_AiuiProvider", "import_BizProductProvider", "import_react", "import_utils", "import_textFormat", "ProductActions", "totalSavingsSlot", "copyWriting", "locale", "variant", "finalPrice", "totalSavings", "isLogin", "comparePrice", "onAddToCart", "onBuyNow", "savingDetail", "addToCartLoading", "buyNowLoading", "totalSavingsText"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var v=Object.defineProperty;var T=Object.getOwnPropertyDescriptor;var
|
|
1
|
+
"use strict";var v=Object.defineProperty;var T=Object.getOwnPropertyDescriptor;var E=Object.getOwnPropertyNames;var k=Object.prototype.hasOwnProperty;var H=(n,o)=>{for(var s in o)v(n,s,{get:o[s],enumerable:!0})},L=(n,o,s,c)=>{if(o&&typeof o=="object"||typeof o=="function")for(let l of E(o))!k.call(n,l)&&l!==s&&v(n,l,{get:()=>o[l],enumerable:!(c=T(o,l))||c.enumerable});return n};var M=n=>L(v({},"__esModule",{value:!0}),n);var I={};H(I,{default:()=>P});module.exports=M(I);var r=require("react/jsx-runtime"),t=require("react"),b=require("es-toolkit"),d=require("../../../../../helpers/index.js"),g=require("./useScrollSpy.js");const z=({tabs:n,onSpyNavItemClick:o,className:s,renderRating:c})=>{const[l,S]=(0,t.useState)(0),p=(0,t.useMemo)(()=>c?[...n,{label:"Reviews",id:"ipc-review",href:""}]:n,[n,c]),y=(0,t.useMemo)(()=>p.map(e=>e.id),[p]),u=(0,b.debounce)(()=>{const e=document.querySelector("#purchase-bar");e&&S(e.getBoundingClientRect().height)},500);(0,t.useEffect)(()=>(u(),window.addEventListener("resize",u),()=>{window.removeEventListener("resize",u)}),[u]);const a=(0,g.useScrollSpy)(y,l),f=(0,t.useRef)(null),m=(0,t.useRef)(new Map),x=(0,t.useCallback)(e=>{o?.(e)},[o]);(0,t.useEffect)(()=>{if(!a||!f.current)return;const e=m.current.get(a);if(!e)return;const i=f.current,h=e.getBoundingClientRect(),w=i.getBoundingClientRect(),R=h.left+h.width/2-w.left,B=w.width/2,C=R-B;i.scrollTo({left:i.scrollLeft+C,behavior:"smooth"})},[a]);const N=(0,t.useCallback)((e,i)=>{i?m.current.set(e,i):m.current.delete(e)},[]);return(0,r.jsx)("div",{ref:f,style:{scrollbarWidth:"none",msOverflowStyle:"none"},className:(0,d.cn)("overflow-x-auto",s),children:(0,r.jsx)("div",{className:"tablet:gap-8 flex gap-6",children:p?.map(e=>(0,r.jsx)("button",{ref:i=>N(e.id,i),children:e.id==="ipc-review"?(0,r.jsxs)("div",{className:"relative shrink-0 whitespace-nowrap py-[10px]",children:[c,(0,r.jsx)("div",{className:(0,d.cn)("laptop-md:block bg-brand-0 absolute bottom-0 left-0 hidden h-[2px] w-0 transition-all duration-300 ease-in-out",{"w-full":a===e.id})})]}):(0,r.jsxs)("div",{className:(0,d.cn)("laptop-md:text-[#1d1d1f] relative shrink-0 whitespace-nowrap py-[10px] text-sm font-bold text-[#949494]",{"text-[#1d1d1f]":a===e.id}),onClick:()=>x(e),children:[e.label,(0,r.jsx)("div",{className:(0,d.cn)("bg-brand-0 absolute bottom-0 left-0 h-[2px] w-0 transition-all duration-300 ease-in-out",{"w-full":a===e.id})})]})},e.id))})})};var P=z;
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../src/biz-components/Listing/components/PurchaseBar/ScrollSpyNav/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import { useState, useCallback, useRef, useEffect, useMemo } from 'react'\nimport { debounce } from 'es-toolkit'\nimport type { ScrollSpyNavItem, ScrollSpyNavProps } from './types.js'\nimport { cn } from '../../../../../helpers/index.js'\nimport { useScrollSpy } from './useScrollSpy.js'\n\nconst ScrollSpyNav = ({ tabs, onSpyNavItemClick, className, renderRating }: ScrollSpyNavProps) => {\n // \u4F7F\u7528 useScrollSpy hook \u81EA\u52A8\u76D1\u542C\u6EDA\u52A8\n const [purchaseBarHeight, setPurchaseBarHeight] = useState(0)\n const combinedTabs = useMemo(() => {\n if (renderRating) {\n return [...tabs, { label: 'Reviews', id: 'ipc-review', href: '' }]\n }\n return tabs\n }, [tabs, renderRating])\n\n const sectionIds = useMemo(() => {\n return combinedTabs.map(tab => tab.id)\n }, [combinedTabs])\n\n const debouncedHandleResize = debounce(() => {\n const purchaseBar = document.querySelector('#purchase-bar')\n if (purchaseBar) {\n setPurchaseBarHeight(purchaseBar.getBoundingClientRect().height)\n }\n }, 500)\n\n useEffect(() => {\n debouncedHandleResize()\n window.addEventListener('resize', debouncedHandleResize)\n return () => {\n window.removeEventListener('resize', debouncedHandleResize)\n }\n }, [debouncedHandleResize])\n\n const activeId = useScrollSpy(sectionIds, purchaseBarHeight)\n\n // \u79FB\u52A8\u7AEF\uFF1A\u6A2A\u5411\u6EDA\u52A8\u5BB9\u5668\u548C tab \u6309\u94AE\u7684 refs\n const scrollContainerRef = useRef<HTMLDivElement>(null)\n const tabRefs = useRef<Map<string, HTMLButtonElement>>(new Map())\n\n const onTabClick = useCallback(\n (tab: ScrollSpyNavItem) => {\n onSpyNavItemClick?.(tab)\n },\n [onSpyNavItemClick]\n )\n\n // \u79FB\u52A8\u7AEF\uFF1A\u5F53 activeTab \u6539\u53D8\u65F6\uFF0C\u81EA\u52A8\u6EDA\u52A8\u5230\u4E2D\u5FC3\u4F4D\u7F6E\n useEffect(() => {\n if (!activeId || !scrollContainerRef.current) return\n\n const activeTabElement = tabRefs.current.get(activeId)\n if (!activeTabElement) return\n\n const container = scrollContainerRef.current\n const tabRect = activeTabElement.getBoundingClientRect()\n const containerRect = container.getBoundingClientRect()\n\n // \u8BA1\u7B97\u9700\u8981\u6EDA\u52A8\u7684\u8DDD\u79BB\uFF0C\u4F7F tab \u4F4D\u4E8E\u5BB9\u5668\u4E2D\u5FC3\n const tabCenter = tabRect.left + tabRect.width / 2 - containerRect.left\n const containerCenter = containerRect.width / 2\n const scrollOffset = tabCenter - containerCenter\n\n container.scrollTo({\n left: container.scrollLeft + scrollOffset,\n behavior: 'smooth',\n })\n }, [activeId])\n\n // \u8BBE\u7F6E tab ref\n const setTabRef = useCallback((tabId: string, element: HTMLButtonElement | null) => {\n if (element) {\n tabRefs.current.set(tabId, element)\n } else {\n tabRefs.current.delete(tabId)\n }\n }, [])\n\n return (\n <div\n ref={scrollContainerRef}\n style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}\n className={cn('overflow-x-auto', className)}\n >\n <div className=\"tablet:gap-8 flex gap-6\">\n {combinedTabs?.map(tab => (\n <button key={tab.id} ref={el => setTabRef(tab.id, el)}>\n {tab.id === 'ipc-review' ? (\n <div className=\"relative shrink-0 whitespace-nowrap py-[10px]\">\n {renderRating}\n <div\n className={cn(\n 'laptop-md:block bg-brand-0 absolute bottom-0 left-0 hidden h-[2px] w-0 transition-all duration-300 ease-in-out',\n {\n 'w-full': activeId === tab.id,\n }\n )}\n />\n </div>\n ) : (\n <div\n className={cn(\n 'laptop-md:text-[#1d1d1f] relative shrink-0 whitespace-nowrap py-[10px] text-sm font-bold text-[#949494]',\n {\n 'text-[#1d1d1f]': activeId === tab.id,\n }\n )}\n onClick={() => onTabClick(tab)}\n >\n {tab.label}\n <div\n className={cn(\n '
|
|
5
|
-
"mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAyFc,IAAAI,EAAA,6BAzFdC,EAAkE,iBAClEC,EAAyB,sBAEzBC,EAAmB,2CACnBC,EAA6B,6BAE7B,MAAMC,EAAe,CAAC,CAAE,KAAAC,EAAM,kBAAAC,EAAmB,UAAAC,EAAW,aAAAC,CAAa,IAAyB,CAEhG,KAAM,CAACC,EAAmBC,CAAoB,KAAI,YAAS,CAAC,EACtDC,KAAe,WAAQ,IACvBH,EACK,CAAC,GAAGH,EAAM,CAAE,MAAO,UAAW,GAAI,aAAc,KAAM,EAAG,CAAC,EAE5DA,EACN,CAACA,EAAMG,CAAY,CAAC,EAEjBI,KAAa,WAAQ,IAClBD,EAAa,IAAIE,GAAOA,EAAI,EAAE,EACpC,CAACF,CAAY,CAAC,EAEXG,KAAwB,YAAS,IAAM,CAC3C,MAAMC,EAAc,SAAS,cAAc,eAAe,EACtDA,GACFL,EAAqBK,EAAY,sBAAsB,EAAE,MAAM,CAEnE,EAAG,GAAG,KAEN,aAAU,KACRD,EAAsB,EACtB,OAAO,iBAAiB,SAAUA,CAAqB,EAChD,IAAM,CACX,OAAO,oBAAoB,SAAUA,CAAqB,CAC5D,GACC,CAACA,CAAqB,CAAC,EAE1B,MAAME,KAAW,gBAAaJ,EAAYH,CAAiB,EAGrDQ,KAAqB,UAAuB,IAAI,EAChDC,KAAU,UAAuC,IAAI,GAAK,EAE1DC,KAAa,eAChBN,GAA0B,CACzBP,IAAoBO,CAAG,CACzB,EACA,CAACP,CAAiB,CACpB,KAGA,aAAU,IAAM,CACd,GAAI,CAACU,GAAY,CAACC,EAAmB,QAAS,OAE9C,MAAMG,EAAmBF,EAAQ,QAAQ,IAAIF,CAAQ,EACrD,GAAI,CAACI,EAAkB,OAEvB,MAAMC,EAAYJ,EAAmB,QAC/BK,EAAUF,EAAiB,sBAAsB,EACjDG,EAAgBF,EAAU,sBAAsB,EAGhDG,EAAYF,EAAQ,KAAOA,EAAQ,MAAQ,EAAIC,EAAc,KAC7DE,EAAkBF,EAAc,MAAQ,EACxCG,EAAeF,EAAYC,EAEjCJ,EAAU,SAAS,CACjB,KAAMA,EAAU,WAAaK,EAC7B,SAAU,QACZ,CAAC,CACH,EAAG,CAACV,CAAQ,CAAC,EAGb,MAAMW,KAAY,eAAY,CAACC,EAAeC,IAAsC,CAC9EA,EACFX,EAAQ,QAAQ,IAAIU,EAAOC,CAAO,EAElCX,EAAQ,QAAQ,OAAOU,CAAK,CAEhC,EAAG,CAAC,CAAC,EAEL,SACE,OAAC,OACC,IAAKX,EACL,MAAO,CAAE,eAAgB,OAAQ,gBAAiB,MAAO,EACzD,aAAW,MAAG,kBAAmBV,CAAS,EAE1C,mBAAC,OAAI,UAAU,0BACZ,SAAAI,GAAc,IAAIE,MACjB,OAAC,UAAoB,IAAKiB,GAAMH,EAAUd,EAAI,GAAIiB,CAAE,EACjD,SAAAjB,EAAI,KAAO,gBACV,QAAC,OAAI,UAAU,gDACZ,UAAAL,KACD,OAAC,OACC,aAAW,MACT,iHACA,CACE,SAAUQ,IAAaH,EAAI,EAC7B,CACF,EACF,GACF,KAEA,QAAC,OACC,aAAW,MACT,0GACA,CACE,iBAAkBG,IAAaH,EAAI,EACrC,CACF,EACA,QAAS,IAAMM,EAAWN,CAAG,EAE5B,UAAAA,EAAI,SACL,OAAC,OACC,aAAW,MACT,
|
|
4
|
+
"sourcesContent": ["import { useState, useCallback, useRef, useEffect, useMemo } from 'react'\nimport { debounce } from 'es-toolkit'\nimport type { ScrollSpyNavItem, ScrollSpyNavProps } from './types.js'\nimport { cn } from '../../../../../helpers/index.js'\nimport { useScrollSpy } from './useScrollSpy.js'\n\nconst ScrollSpyNav = ({ tabs, onSpyNavItemClick, className, renderRating }: ScrollSpyNavProps) => {\n // \u4F7F\u7528 useScrollSpy hook \u81EA\u52A8\u76D1\u542C\u6EDA\u52A8\n const [purchaseBarHeight, setPurchaseBarHeight] = useState(0)\n const combinedTabs = useMemo(() => {\n if (renderRating) {\n return [...tabs, { label: 'Reviews', id: 'ipc-review', href: '' }]\n }\n return tabs\n }, [tabs, renderRating])\n\n const sectionIds = useMemo(() => {\n return combinedTabs.map(tab => tab.id)\n }, [combinedTabs])\n\n const debouncedHandleResize = debounce(() => {\n const purchaseBar = document.querySelector('#purchase-bar')\n if (purchaseBar) {\n setPurchaseBarHeight(purchaseBar.getBoundingClientRect().height)\n }\n }, 500)\n\n useEffect(() => {\n debouncedHandleResize()\n window.addEventListener('resize', debouncedHandleResize)\n return () => {\n window.removeEventListener('resize', debouncedHandleResize)\n }\n }, [debouncedHandleResize])\n\n const activeId = useScrollSpy(sectionIds, purchaseBarHeight)\n\n // \u79FB\u52A8\u7AEF\uFF1A\u6A2A\u5411\u6EDA\u52A8\u5BB9\u5668\u548C tab \u6309\u94AE\u7684 refs\n const scrollContainerRef = useRef<HTMLDivElement>(null)\n const tabRefs = useRef<Map<string, HTMLButtonElement>>(new Map())\n\n const onTabClick = useCallback(\n (tab: ScrollSpyNavItem) => {\n onSpyNavItemClick?.(tab)\n },\n [onSpyNavItemClick]\n )\n\n // \u79FB\u52A8\u7AEF\uFF1A\u5F53 activeTab \u6539\u53D8\u65F6\uFF0C\u81EA\u52A8\u6EDA\u52A8\u5230\u4E2D\u5FC3\u4F4D\u7F6E\n useEffect(() => {\n if (!activeId || !scrollContainerRef.current) return\n\n const activeTabElement = tabRefs.current.get(activeId)\n if (!activeTabElement) return\n\n const container = scrollContainerRef.current\n const tabRect = activeTabElement.getBoundingClientRect()\n const containerRect = container.getBoundingClientRect()\n\n // \u8BA1\u7B97\u9700\u8981\u6EDA\u52A8\u7684\u8DDD\u79BB\uFF0C\u4F7F tab \u4F4D\u4E8E\u5BB9\u5668\u4E2D\u5FC3\n const tabCenter = tabRect.left + tabRect.width / 2 - containerRect.left\n const containerCenter = containerRect.width / 2\n const scrollOffset = tabCenter - containerCenter\n\n container.scrollTo({\n left: container.scrollLeft + scrollOffset,\n behavior: 'smooth',\n })\n }, [activeId])\n\n // \u8BBE\u7F6E tab ref\n const setTabRef = useCallback((tabId: string, element: HTMLButtonElement | null) => {\n if (element) {\n tabRefs.current.set(tabId, element)\n } else {\n tabRefs.current.delete(tabId)\n }\n }, [])\n\n return (\n <div\n ref={scrollContainerRef}\n style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}\n className={cn('overflow-x-auto', className)}\n >\n <div className=\"tablet:gap-8 flex gap-6\">\n {combinedTabs?.map(tab => (\n <button key={tab.id} ref={el => setTabRef(tab.id, el)}>\n {tab.id === 'ipc-review' ? (\n <div className=\"relative shrink-0 whitespace-nowrap py-[10px]\">\n {renderRating}\n <div\n className={cn(\n 'laptop-md:block bg-brand-0 absolute bottom-0 left-0 hidden h-[2px] w-0 transition-all duration-300 ease-in-out',\n {\n 'w-full': activeId === tab.id,\n }\n )}\n />\n </div>\n ) : (\n <div\n className={cn(\n 'laptop-md:text-[#1d1d1f] relative shrink-0 whitespace-nowrap py-[10px] text-sm font-bold text-[#949494]',\n {\n 'text-[#1d1d1f]': activeId === tab.id,\n }\n )}\n onClick={() => onTabClick(tab)}\n >\n {tab.label}\n <div\n className={cn(\n 'bg-brand-0 absolute bottom-0 left-0 h-[2px] w-0 transition-all duration-300 ease-in-out',\n {\n 'w-full': activeId === tab.id,\n }\n )}\n />\n </div>\n )}\n </button>\n ))}\n </div>\n </div>\n )\n}\n\nexport default ScrollSpyNav\n"],
|
|
5
|
+
"mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAyFc,IAAAI,EAAA,6BAzFdC,EAAkE,iBAClEC,EAAyB,sBAEzBC,EAAmB,2CACnBC,EAA6B,6BAE7B,MAAMC,EAAe,CAAC,CAAE,KAAAC,EAAM,kBAAAC,EAAmB,UAAAC,EAAW,aAAAC,CAAa,IAAyB,CAEhG,KAAM,CAACC,EAAmBC,CAAoB,KAAI,YAAS,CAAC,EACtDC,KAAe,WAAQ,IACvBH,EACK,CAAC,GAAGH,EAAM,CAAE,MAAO,UAAW,GAAI,aAAc,KAAM,EAAG,CAAC,EAE5DA,EACN,CAACA,EAAMG,CAAY,CAAC,EAEjBI,KAAa,WAAQ,IAClBD,EAAa,IAAIE,GAAOA,EAAI,EAAE,EACpC,CAACF,CAAY,CAAC,EAEXG,KAAwB,YAAS,IAAM,CAC3C,MAAMC,EAAc,SAAS,cAAc,eAAe,EACtDA,GACFL,EAAqBK,EAAY,sBAAsB,EAAE,MAAM,CAEnE,EAAG,GAAG,KAEN,aAAU,KACRD,EAAsB,EACtB,OAAO,iBAAiB,SAAUA,CAAqB,EAChD,IAAM,CACX,OAAO,oBAAoB,SAAUA,CAAqB,CAC5D,GACC,CAACA,CAAqB,CAAC,EAE1B,MAAME,KAAW,gBAAaJ,EAAYH,CAAiB,EAGrDQ,KAAqB,UAAuB,IAAI,EAChDC,KAAU,UAAuC,IAAI,GAAK,EAE1DC,KAAa,eAChBN,GAA0B,CACzBP,IAAoBO,CAAG,CACzB,EACA,CAACP,CAAiB,CACpB,KAGA,aAAU,IAAM,CACd,GAAI,CAACU,GAAY,CAACC,EAAmB,QAAS,OAE9C,MAAMG,EAAmBF,EAAQ,QAAQ,IAAIF,CAAQ,EACrD,GAAI,CAACI,EAAkB,OAEvB,MAAMC,EAAYJ,EAAmB,QAC/BK,EAAUF,EAAiB,sBAAsB,EACjDG,EAAgBF,EAAU,sBAAsB,EAGhDG,EAAYF,EAAQ,KAAOA,EAAQ,MAAQ,EAAIC,EAAc,KAC7DE,EAAkBF,EAAc,MAAQ,EACxCG,EAAeF,EAAYC,EAEjCJ,EAAU,SAAS,CACjB,KAAMA,EAAU,WAAaK,EAC7B,SAAU,QACZ,CAAC,CACH,EAAG,CAACV,CAAQ,CAAC,EAGb,MAAMW,KAAY,eAAY,CAACC,EAAeC,IAAsC,CAC9EA,EACFX,EAAQ,QAAQ,IAAIU,EAAOC,CAAO,EAElCX,EAAQ,QAAQ,OAAOU,CAAK,CAEhC,EAAG,CAAC,CAAC,EAEL,SACE,OAAC,OACC,IAAKX,EACL,MAAO,CAAE,eAAgB,OAAQ,gBAAiB,MAAO,EACzD,aAAW,MAAG,kBAAmBV,CAAS,EAE1C,mBAAC,OAAI,UAAU,0BACZ,SAAAI,GAAc,IAAIE,MACjB,OAAC,UAAoB,IAAKiB,GAAMH,EAAUd,EAAI,GAAIiB,CAAE,EACjD,SAAAjB,EAAI,KAAO,gBACV,QAAC,OAAI,UAAU,gDACZ,UAAAL,KACD,OAAC,OACC,aAAW,MACT,iHACA,CACE,SAAUQ,IAAaH,EAAI,EAC7B,CACF,EACF,GACF,KAEA,QAAC,OACC,aAAW,MACT,0GACA,CACE,iBAAkBG,IAAaH,EAAI,EACrC,CACF,EACA,QAAS,IAAMM,EAAWN,CAAG,EAE5B,UAAAA,EAAI,SACL,OAAC,OACC,aAAW,MACT,0FACA,CACE,SAAUG,IAAaH,EAAI,EAC7B,CACF,EACF,GACF,GAhCSA,EAAI,EAkCjB,CACD,EACH,EACF,CAEJ,EAEA,IAAOhB,EAAQO",
|
|
6
6
|
"names": ["ScrollSpyNav_exports", "__export", "ScrollSpyNav_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_es_toolkit", "import_helpers", "import_useScrollSpy", "ScrollSpyNav", "tabs", "onSpyNavItemClick", "className", "renderRating", "purchaseBarHeight", "setPurchaseBarHeight", "combinedTabs", "sectionIds", "tab", "debouncedHandleResize", "purchaseBar", "activeId", "scrollContainerRef", "tabRefs", "onTabClick", "activeTabElement", "container", "tabRect", "containerRect", "tabCenter", "containerCenter", "scrollOffset", "setTabRef", "tabId", "element", "el"]
|
|
7
7
|
}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
interface TooltipState {
|
|
2
|
+
visible: boolean;
|
|
3
|
+
x: number;
|
|
4
|
+
y: number;
|
|
5
|
+
text: string;
|
|
6
|
+
}
|
|
7
|
+
export declare const useFollowTooltip: () => {
|
|
8
|
+
tooltip: TooltipState;
|
|
9
|
+
showTooltip: (e: React.MouseEvent, text: string) => void;
|
|
10
|
+
hideTooltip: () => void;
|
|
11
|
+
getTooltipProps: (text: string) => {
|
|
12
|
+
onMouseMove: (e: React.MouseEvent) => void;
|
|
13
|
+
onMouseLeave: () => void;
|
|
14
|
+
};
|
|
15
|
+
};
|
|
16
|
+
export declare const FollowTooltip: ({ visible, x, y, text, className, }: TooltipState & {
|
|
17
|
+
className?: string;
|
|
18
|
+
}) => import("react").ReactPortal | null;
|
|
19
|
+
export default useFollowTooltip;
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use strict";var p=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var x=Object.prototype.hasOwnProperty;var f=(o,t)=>{for(var e in t)p(o,e,{get:t[e],enumerable:!0})},m=(o,t,e,l)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of b(t))!x.call(o,i)&&i!==e&&p(o,i,{get:()=>t[i],enumerable:!(l=d(t,i))||l.enumerable});return o};var v=o=>m(p({},"__esModule",{value:!0}),o);var w={};f(w,{FollowTooltip:()=>T,default:()=>g,useFollowTooltip:()=>u});module.exports=v(w);var c=require("react/jsx-runtime"),n=require("react"),a=require("react-dom");const u=()=>{const[o,t]=(0,n.useState)({visible:!1,x:0,y:0,text:""}),e=(0,n.useCallback)((s,r)=>{r&&t({visible:!0,x:s.clientX,y:s.clientY,text:r})},[]),l=(0,n.useCallback)(()=>{t(s=>({...s,visible:!1}))},[]);return{tooltip:o,showTooltip:e,hideTooltip:l,getTooltipProps:s=>({onMouseMove:r=>e(r,s),onMouseLeave:l})}},T=({visible:o,x:t,y:e,text:l,className:i})=>typeof window>"u"||!o?null:(0,a.createPortal)((0,c.jsx)("div",{className:i||"pointer-events-none fixed z-[9999] max-w-xs rounded-lg bg-black/60 px-3 py-2 text-sm font-bold text-white shadow-lg backdrop-blur-sm transition-opacity duration-200",style:{left:`${t+16}px`,top:`${e+16}px`},children:l}),document.body);var g=u;
|
|
2
|
+
//# sourceMappingURL=useFollowTooltip.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../src/biz-components/Listing/hooks/useFollowTooltip.tsx"],
|
|
4
|
+
"sourcesContent": ["import { useState, useCallback } from 'react'\nimport { createPortal } from 'react-dom'\n\ninterface TooltipState {\n visible: boolean\n x: number\n y: number\n text: string\n}\n\nexport const useFollowTooltip = () => {\n const [tooltip, setTooltip] = useState<TooltipState>({\n visible: false,\n x: 0,\n y: 0,\n text: '',\n })\n\n const showTooltip = useCallback((e: React.MouseEvent, text: string) => {\n if (text) {\n setTooltip({\n visible: true,\n x: e.clientX,\n y: e.clientY,\n text,\n })\n }\n }, [])\n\n const hideTooltip = useCallback(() => {\n setTooltip(prev => ({ ...prev, visible: false }))\n }, [])\n\n const getTooltipProps = (text: string) => ({\n onMouseMove: (e: React.MouseEvent) => showTooltip(e, text),\n onMouseLeave: hideTooltip,\n })\n\n return {\n tooltip,\n showTooltip,\n hideTooltip,\n getTooltipProps,\n }\n}\n\nexport const FollowTooltip = ({\n visible,\n x,\n y,\n text,\n className,\n}: TooltipState & { className?: string }) => {\n if (typeof window === 'undefined' || !visible) return null\n\n return createPortal(\n <div\n className={\n className ||\n 'pointer-events-none fixed z-[9999] max-w-xs rounded-lg bg-black/60 px-3 py-2 text-sm font-bold text-white shadow-lg backdrop-blur-sm transition-opacity duration-200'\n }\n style={{\n left: `${x + 16}px`,\n top: `${y + 16}px`,\n }}\n >\n {text}\n </div>,\n document.body\n )\n}\n\nexport default useFollowTooltip\n"],
|
|
5
|
+
"mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,mBAAAE,EAAA,YAAAC,EAAA,qBAAAC,IAAA,eAAAC,EAAAL,GAwDI,IAAAM,EAAA,6BAxDJC,EAAsC,iBACtCC,EAA6B,qBAStB,MAAMJ,EAAmB,IAAM,CACpC,KAAM,CAACK,EAASC,CAAU,KAAI,YAAuB,CACnD,QAAS,GACT,EAAG,EACH,EAAG,EACH,KAAM,EACR,CAAC,EAEKC,KAAc,eAAY,CAACC,EAAqBC,IAAiB,CACjEA,GACFH,EAAW,CACT,QAAS,GACT,EAAGE,EAAE,QACL,EAAGA,EAAE,QACL,KAAAC,CACF,CAAC,CAEL,EAAG,CAAC,CAAC,EAECC,KAAc,eAAY,IAAM,CACpCJ,EAAWK,IAAS,CAAE,GAAGA,EAAM,QAAS,EAAM,EAAE,CAClD,EAAG,CAAC,CAAC,EAOL,MAAO,CACL,QAAAN,EACA,YAAAE,EACA,YAAAG,EACA,gBATuBD,IAAkB,CACzC,YAAcD,GAAwBD,EAAYC,EAAGC,CAAI,EACzD,aAAcC,CAChB,EAOA,CACF,EAEaZ,EAAgB,CAAC,CAC5B,QAAAc,EACA,EAAAC,EACA,EAAAC,EACA,KAAAL,EACA,UAAAM,CACF,IACM,OAAO,OAAW,KAAe,CAACH,EAAgB,QAE/C,mBACL,OAAC,OACC,UACEG,GACA,uKAEF,MAAO,CACL,KAAM,GAAGF,EAAI,EAAE,KACf,IAAK,GAAGC,EAAI,EAAE,IAChB,EAEC,SAAAL,EACH,EACA,SAAS,IACX,EAGF,IAAOV,EAAQC",
|
|
6
|
+
"names": ["useFollowTooltip_exports", "__export", "FollowTooltip", "useFollowTooltip_default", "useFollowTooltip", "__toCommonJS", "import_jsx_runtime", "import_react", "import_react_dom", "tooltip", "setTooltip", "showTooltip", "e", "text", "hideTooltip", "prev", "visible", "x", "y", "className"]
|
|
7
|
+
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var He=Object.create;var M=Object.defineProperty;var Te=Object.getOwnPropertyDescriptor;var ke=Object.getOwnPropertyNames;var Me=Object.getPrototypeOf,Le=Object.prototype.hasOwnProperty;var Ne=(r,o)=>{for(var n in o)M(r,n,{get:o[n],enumerable:!0})},A=(r,o,n,
|
|
1
|
+
"use strict";"use client";var He=Object.create;var M=Object.defineProperty;var Te=Object.getOwnPropertyDescriptor;var ke=Object.getOwnPropertyNames;var Me=Object.getPrototypeOf,Le=Object.prototype.hasOwnProperty;var Ne=(r,o)=>{for(var n in o)M(r,n,{get:o[n],enumerable:!0})},A=(r,o,n,c)=>{if(o&&typeof o=="object"||typeof o=="function")for(let s of ke(o))!Le.call(r,s)&&s!==n&&M(r,s,{get:()=>o[s],enumerable:!(c=Te(o,s))||c.enumerable});return r};var ee=(r,o,n)=>(n=r!=null?He(Me(r)):{},A(o||!r||!r.__esModule?M(n,"default",{value:r,enumerable:!0}):n,r)),Re=r=>A(M({},"__esModule",{value:!0}),r);var Pe={};Ne(Pe,{default:()=>Ee});module.exports=Re(Pe);var t=require("react/jsx-runtime"),e=require("react"),ne=require("lodash"),a=require("../../helpers/utils.js"),oe=require("../../shared/Styles.js"),S=ee(require("../../components/button.js")),se=require("../VideoModal/index.js"),V=require("@payloadcms/richtext-lexical/html"),le=require("react-intersection-observer"),ie=require("../../hooks/useExposure.js"),_=ee(require("../../helpers/ScrollLoadVideo.js")),u=require("gsap"),$=require("gsap/dist/SplitText"),L=require("gsap/dist/ScrollTrigger");const Ie="media_player_base",ze="video";u.gsap.registerPlugin(L.ScrollTrigger,$.SplitText);const te=({defaultConverters:r})=>({...r,text:o=>{const{node:n}=o;return n.$&&n.$.color?`<span class="lexical-${n.$.color}">${n.text}</span>`:n.text}}),re=(0,e.forwardRef)(({className:r="",id:o,onBtnClick:n,data:{title:c,videoTitle:s,btnText:h,youtubeId:B,video:C,mobileVideo:ae,theme:D,img:F,shape:j,titleAnimation:b="fade-in",...ce},...q},de)=>{const{sticky:l}=ce,[U,Y]=(0,e.useState)(!1),[O,pe]=(0,e.useState)(0),[ue,me]=(0,e.useState)(0),[w,fe]=(0,e.useState)(0),[G,N]=(0,e.useState)(!1),H=(0,e.useRef)(null),J=(0,e.useRef)(null),i=(0,e.useRef)(null),T=(0,e.useRef)(null),K=(0,e.useRef)(null),k=(0,e.useRef)(null),g=(0,e.useRef)(null),R=(0,e.useRef)(null),I=(0,e.useRef)(null),{ref:ge,inView:d}=(0,le.useInView)();(0,e.useImperativeHandle)(de,()=>i.current);const v=typeof c=="string"?c:c&&(0,V.convertLexicalToHTML)({data:c,converters:te}),Q=typeof s=="string"?s:s&&(0,V.convertLexicalToHTML)({data:s,converters:te});(0,e.useEffect)(()=>{d?(H.current?.play(),Y(!0)):(H.current?.pause(),Y(!1))},[d]);const z=(0,ne.debounce)(()=>{if(i.current){const y=i.current.getBoundingClientRect(),m=window.innerHeight,x=window.scrollY||window.pageYOffset,p=y.bottom+x,f=document.documentElement.scrollHeight-p;pe(f>m?m:f)}if(i.current){const y=i.current.clientHeight,m=window.innerHeight;me(y+m)}},600);(0,e.useEffect)(()=>(z(),window.addEventListener("resize",z),()=>{window.removeEventListener("resize",z)}),[]),(0,e.useEffect)(()=>{function y(){if(!T.current||b!=="fade-in")return;const x=T.current?.clientHeight||80;k.current=new $.SplitText(T.current,{type:"words",wordsClass:"word"});const p=k.current.words;u.gsap.set(p,{opacity:0}),g.current&&u.gsap.set(g.current,{opacity:0}),R.current=L.ScrollTrigger.create({trigger:i.current,start:"top center-=10%",end:`top+=${x*1.5+80}px center-=10%`,scrub:!0,onUpdate:W=>{const f=W.progress,X=p.length,ye=1/X,Z=.5;p.forEach((xe,he)=>{const be=he/X*(1-Z),we=ye*(1+Z);let P=(f-be)/we;P=Math.max(0,Math.min(P,1)),u.gsap.set(xe,{opacity:P})}),u.gsap.set(J.current,{opacity:f}),g.current&&u.gsap.set(g.current,{opacity:f>=.6?1:0})}})}function m(){I.current=L.ScrollTrigger.create({trigger:i.current,start:"bottom bottom",end:"bottom top",scrub:!0,onUpdate:x=>{const p=x.progress;fe(p)}})}return d&&(y(),m()),()=>{k.current&&k.current.revert(),R.current&&R.current.kill(),I.current&&I.current.kill()}},[b,d]),(0,ie.useExposure)(K,{componentType:ze,componentName:Ie,componentTitle:v});const ve=(0,e.useMemo)(()=>d&&w>0&&w<.9?3:d?2:1,[w,d]),E="lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] desktop:aspect-w-[1024] desktop:aspect-h-[520] laptop:aspect-w-[1024] laptop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]";return(0,t.jsxs)(t.Fragment,{children:[l&&(0,t.jsx)("div",{...q,ref:i,className:(0,a.cn)("pointer-events-none relative z-10",E,{"aiui-dark":D==="dark","rounded-box":j==="rounded"},r),children:(0,t.jsx)("div",{ref:ge,children:!b&&(0,t.jsxs)("div",{className:"media-content absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 px-4 text-center",children:[v&&!U&&(0,t.jsx)("div",{className:"lg-desktop:text-[64px] text-info-primary text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:v}}),Q&&U&&(0,t.jsx)("div",{className:"lg-desktop:text-[64px] text-info-primary text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:Q}}),h&&(0,t.jsx)(S.default,{variant:"link",className:(0,a.cn)("member-equity-button-secondary text-info-primary"),onClick:()=>{N(!0),n&&n?.()},children:h})]})})}),(0,t.jsxs)("div",{...l?{}:q,style:l?{marginBottom:`-${O}px`,marginTop:`-${ue}px`,zIndex:ve}:{zIndex:5},className:(0,a.cn)("relative",r),children:[(0,t.jsx)("div",{className:"sticky top-0 ",children:(0,t.jsxs)("div",{id:o,className:(0,a.cn)("relative overflow-hidden",l?"h-screen w-full":E,{"aiui-dark":D==="dark","rounded-box":j==="rounded"}),children:[b==="fade-in"&&(0,t.jsxs)("div",{className:(0,a.cn)("absolute z-30 flex w-full flex-col items-center justify-center gap-4 px-4 text-center",l?"left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2":"left-0 top-0"),children:[v&&(0,t.jsx)("div",{ref:T,className:"media-player-base-title lg-desktop:text-[64px] text-info-primary text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:v}}),h&&(0,t.jsx)(S.default,{ref:g,variant:"link",className:(0,a.cn)("media-player-base-button member-equity-button-secondary text-info-primary"),onClick:()=>{N(!0),n&&n?.()},children:h})]}),(0,t.jsxs)("div",{className:"media-cover left-0 top-0 h-screen w-screen overflow-hidden",style:{height:`${102-w*100}vh`},children:[(0,t.jsx)(_.default,{videoRef:H,poster:F?.url||"",src:C?.url,className:"tablet:block hidden size-full !h-auto",videoClassName:"object-cover",muted:!0,loop:!0,playsInline:!0,autoplay:!0,"webkit-playsinline":!0,"x5-playsinline":!0}),(0,t.jsx)(_.default,{videoRef:H,poster:F?.url||"",src:ae?.url||C?.url,className:"tablet:hidden block min-h-screen w-full",videoClassName:"object-cover w-full h-auto",muted:!0,loop:!0,playsInline:!0,autoplay:!0,"webkit-playsinline":!0,"x5-playsinline":!0}),(0,t.jsx)("div",{ref:J,className:"absolute left-0 top-0 z-10 size-full opacity-0",style:{background:"rgba(0, 0, 0, 0.2)"}})]})]})}),l&&(0,t.jsx)("div",{className:(0,a.cn)(l&&"pointer-events-none relative box-content block",E),style:l?{height:`${O}px`}:{},ref:K})]}),G&&B&&(0,t.jsx)(se.VideoModal,{visible:G,youTubeId:B,onCloseModal:()=>N(!1)})]})});re.displayName="MediaPlayerBase";var Ee=(0,oe.withLayout)(re);
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/MediaPlayerBase/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport { useState, useRef, useMemo, useEffect, forwardRef, useImperativeHandle } from 'react'\nimport { debounce } from 'lodash'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport Button from '../../components/button.js'\nimport { VideoModal } from '../VideoModal/index.js'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { MediaPlayerBaseProps } from './types.js'\n// import { Right } from './right.js'\nimport { useInView } from 'react-intersection-observer'\nimport type { HTMLConvertersFunction } from '@payloadcms/richtext-lexical/html'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport ScrollLoadVideo from '../../helpers/ScrollLoadVideo.js'\nimport { gsap } from 'gsap'\nimport { SplitText } from 'gsap/dist/SplitText'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\n\nconst componentName = 'media_player_base'\nconst componentType = 'video'\n\n// \u6CE8\u518C gsap \u63D2\u4EF6\ngsap.registerPlugin(ScrollTrigger, SplitText)\n\nconst htmlConverters: HTMLConvertersFunction = ({ defaultConverters }) => ({\n ...defaultConverters,\n text: args => {\n const { node } = args\n // \u68C0\u67E5\u662F\u5426\u6709\u81EA\u5B9A\u4E49 color\n if (node.$ && node.$.color) {\n return `<span class=\"lexical-${node.$.color}\">${node.text}</span>`\n }\n return node.text\n },\n})\n\nconst MediaPlayerBase = forwardRef<HTMLDivElement, MediaPlayerBaseProps>(\n (\n {\n className = '',\n id,\n onBtnClick,\n data: {\n title,\n videoTitle,\n btnText,\n youtubeId,\n video,\n mobileVideo,\n theme,\n img,\n shape,\n titleAnimation = 'fade-in',\n ...dataRest\n },\n ...rest\n },\n ref\n ) => {\n const { sticky } = dataRest\n const [isPlaying, setIsPlaying] = useState(false)\n const [btb, setbtb] = useState(0)\n const [titleHeight, setTitleHeight] = useState(0)\n const [videoHeightProgress, setVideoHeightProgress] = useState(0)\n const [visible, setVisible] = useState<boolean>(false)\n\n const videoRef = useRef<HTMLVideoElement>(null)\n const bgRef = useRef<HTMLImageElement>(null)\n const titleRef = useRef<HTMLDivElement>(null)\n const titleFadeInRef = useRef<HTMLDivElement>(null)\n const trackRef = useRef<HTMLDivElement>(null)\n const splitTextInstance = useRef<SplitText | null>(null)\n const btnFadeInRef = useRef<HTMLButtonElement>(null)\n const scrollTriggerRef = useRef<ScrollTrigger | null>(null)\n const heightTriggerRef = useRef<ScrollTrigger | null>(null)\n const { ref: inViewRef, inView } = useInView()\n\n useImperativeHandle(ref, () => titleRef.current as HTMLDivElement)\n\n const title_html =\n typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title, converters: htmlConverters })\n const videoTitle_html =\n typeof videoTitle === 'string'\n ? videoTitle\n : videoTitle && convertLexicalToHTML({ data: videoTitle, converters: htmlConverters })\n\n useEffect(() => {\n if (inView) {\n videoRef.current?.play()\n setIsPlaying(true)\n } else {\n videoRef.current?.pause()\n setIsPlaying(false)\n }\n }, [inView])\n\n const debouncedHandleResize = debounce(() => {\n if (titleRef.current) {\n const rect = titleRef.current.getBoundingClientRect()\n const screenHeight = window.innerHeight\n const scrollTop = window.scrollY || window.pageYOffset\n const elementBottomToPageTop = rect.bottom + scrollTop\n const pageHeight = document.documentElement.scrollHeight\n const distanceToPageBottom = pageHeight - elementBottomToPageTop\n setbtb(distanceToPageBottom > screenHeight ? screenHeight : distanceToPageBottom)\n }\n if (titleRef.current) {\n const titleHeight = titleRef.current.clientHeight\n const screenHeight = window.innerHeight\n setTitleHeight(titleHeight + screenHeight)\n }\n }, 600)\n\n useEffect(() => {\n debouncedHandleResize()\n window.addEventListener('resize', debouncedHandleResize)\n return () => {\n window.removeEventListener('resize', debouncedHandleResize)\n }\n }, [])\n\n useEffect(() => {\n function gsapResize() {\n if (!titleFadeInRef.current || titleAnimation !== 'fade-in') return\n const height = titleFadeInRef.current?.clientHeight || 80\n splitTextInstance.current = new SplitText(titleFadeInRef.current, {\n type: 'words',\n wordsClass: 'word',\n })\n const words = splitTextInstance.current.words\n gsap.set(words, { opacity: 0 })\n if (btnFadeInRef.current) gsap.set(btnFadeInRef.current, { opacity: 0 })\n scrollTriggerRef.current = ScrollTrigger.create({\n trigger: titleRef.current,\n start: 'top center-=10%',\n end: `top+=${height * 1.5 + 80}px center-=10%`,\n scrub: true,\n onUpdate: (self: any) => {\n const progress = self.progress\n const total = words.length\n const interval = 1 / total\n const overlap = 0.5\n words.forEach((word: any, i: number) => {\n const start = (i / total) * (1 - overlap)\n const width = interval * (1 + overlap)\n let opacity = (progress - start) / width\n opacity = Math.max(0, Math.min(opacity, 1))\n gsap.set(word, { opacity })\n })\n gsap.set(bgRef.current, { opacity: progress })\n if (btnFadeInRef.current) {\n gsap.set(btnFadeInRef.current, { opacity: progress >= 0.6 ? 1 : 0 })\n }\n },\n })\n }\n\n function gsapVideoHeightResize() {\n heightTriggerRef.current = ScrollTrigger.create({\n trigger: titleRef.current,\n start: 'bottom bottom',\n end: `bottom top`,\n // markers: true,\n scrub: true,\n onUpdate: (self: any) => {\n const progress = self.progress\n console.log('progress__', progress)\n setVideoHeightProgress(progress)\n },\n })\n }\n\n if (inView) {\n gsapResize()\n gsapVideoHeightResize()\n }\n\n return () => {\n splitTextInstance.current && splitTextInstance.current.revert()\n // ScrollTrigger.getAll().forEach((t: { kill: () => any }) => t.kill())\n scrollTriggerRef.current && scrollTriggerRef.current.kill()\n heightTriggerRef.current && heightTriggerRef.current.kill()\n }\n }, [titleAnimation, inView])\n\n useExposure(trackRef, {\n componentType,\n componentName,\n componentTitle: title_html,\n })\n\n const zIndexVideo = useMemo(() => {\n if (inView && videoHeightProgress > 0 && videoHeightProgress < 0.9) return 3\n if (inView) return 2\n return 1\n }, [videoHeightProgress, inView])\n\n const aspect =\n 'lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] desktop:aspect-w-[1024] desktop:aspect-h-[520] laptop:aspect-w-[1024] laptop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]'\n return (\n <>\n {sticky && (\n <div\n {...rest}\n ref={titleRef}\n className={cn(\n 'pointer-events-none relative z-10',\n aspect,\n {\n 'aiui-dark': theme === 'dark',\n 'rounded-box': shape === 'rounded',\n },\n className\n )}\n >\n <div ref={inViewRef}>\n {!titleAnimation && (\n <div className=\"media-content absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 px-4 text-center\">\n {title_html && !isPlaying && (\n <div\n className=\"lg-desktop:text-[64px] text-info-primary text-center text-[40px] font-bold leading-none lg:text-5xl\"\n dangerouslySetInnerHTML={{ __html: title_html }}\n />\n )}\n {videoTitle_html && isPlaying && (\n <div\n className=\"lg-desktop:text-[64px] text-info-primary text-center text-[40px] font-bold leading-none lg:text-5xl\"\n dangerouslySetInnerHTML={{ __html: videoTitle_html }}\n />\n )}\n {btnText && (\n <Button\n variant=\"link\"\n className={cn('member-equity-button-secondary text-info-primary')}\n onClick={() => {\n setVisible(true)\n // if (isPlaying) {\n // if (videoRef.current) {\n // videoRef.current.pause()\n // }\n // setIsPlaying(false)\n // } else {\n // if (videoRef.current) {\n // videoRef.current.play()\n // }\n // setIsPlaying(true)\n // }\n onBtnClick && onBtnClick?.()\n }}\n >\n {btnText}\n {/* <Right /> */}\n </Button>\n )}\n </div>\n )}\n </div>\n </div>\n )}\n <div\n {...(!sticky ? rest : {})}\n style={\n sticky\n ? {\n marginBottom: `-${btb}px`,\n marginTop: `-${titleHeight}px`,\n zIndex: zIndexVideo,\n }\n : { zIndex: 5 }\n }\n className={cn('relative', className)}\n >\n <div className=\"sticky top-0 \">\n <div\n id={id}\n className={cn('relative overflow-hidden', sticky ? 'h-screen w-full' : aspect, {\n 'aiui-dark': theme === 'dark',\n 'rounded-box': shape === 'rounded',\n })}\n >\n {titleAnimation === 'fade-in' && (\n <div\n className={cn(\n 'absolute z-30 flex w-full flex-col items-center justify-center gap-4 px-4 text-center',\n sticky ? 'left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2' : 'left-0 top-0'\n )}\n >\n {title_html && (\n <div\n ref={titleFadeInRef}\n className=\"media-player-base-title lg-desktop:text-[64px] text-info-primary text-[40px] font-bold leading-none lg:text-5xl\"\n dangerouslySetInnerHTML={{ __html: title_html }}\n />\n )}\n {btnText && (\n <Button\n ref={btnFadeInRef}\n variant=\"link\"\n className={cn('media-player-base-button member-equity-button-secondary text-info-primary')}\n onClick={() => {\n setVisible(true)\n onBtnClick && onBtnClick?.()\n }}\n >\n {btnText}\n </Button>\n )}\n </div>\n )}\n <div\n className=\"media-cover left-0 top-0 h-screen w-screen overflow-hidden\"\n style={{ height: `${102 - videoHeightProgress * 100}vh` }}\n >\n <ScrollLoadVideo\n videoRef={videoRef}\n poster={img?.url || ''}\n src={video?.url!}\n className=\"tablet:block hidden size-full min-h-screen\"\n videoClassName=\"object-cover\"\n muted\n loop\n playsInline\n autoplay\n webkit-playsinline\n x5-playsinline\n />\n <ScrollLoadVideo\n videoRef={videoRef}\n poster={img?.url || ''}\n src={mobileVideo?.url || video?.url!}\n className=\"tablet:hidden block size-full min-h-screen\"\n videoClassName=\"object-cover\"\n muted\n loop\n playsInline\n autoplay\n webkit-playsinline\n x5-playsinline\n />\n <div\n ref={bgRef}\n className=\"absolute left-0 top-0 z-10 size-full opacity-0\"\n style={{\n background: 'rgba(0, 0, 0, 0.2)',\n }}\n />\n </div>\n </div>\n </div>\n {sticky && (\n <div\n className={cn(sticky && 'pointer-events-none relative box-content block', aspect)}\n style={sticky ? { height: `${btb}px` } : {}}\n ref={trackRef}\n />\n )}\n </div>\n {visible && youtubeId && (\n <VideoModal visible={visible} youTubeId={youtubeId} onCloseModal={() => setVisible(false)} />\n )}\n </>\n )\n }\n)\n\nMediaPlayerBase.displayName = 'MediaPlayerBase'\n\nexport default withLayout(MediaPlayerBase)\n"],
|
|
5
|
-
"mappings": "olBAAA,IAAAA,GAAA,GAAAC,GAAAD,GAAA,aAAAE,KAAA,eAAAC,GAAAH,
|
|
4
|
+
"sourcesContent": ["'use client'\nimport { useState, useRef, useMemo, useEffect, forwardRef, useImperativeHandle } from 'react'\nimport { debounce } from 'lodash'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport Button from '../../components/button.js'\nimport { VideoModal } from '../VideoModal/index.js'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { MediaPlayerBaseProps } from './types.js'\n// import { Right } from './right.js'\nimport { useInView } from 'react-intersection-observer'\nimport type { HTMLConvertersFunction } from '@payloadcms/richtext-lexical/html'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport ScrollLoadVideo from '../../helpers/ScrollLoadVideo.js'\nimport { gsap } from 'gsap'\nimport { SplitText } from 'gsap/dist/SplitText'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\n\nconst componentName = 'media_player_base'\nconst componentType = 'video'\n\n// \u6CE8\u518C gsap \u63D2\u4EF6\ngsap.registerPlugin(ScrollTrigger, SplitText)\n\nconst htmlConverters: HTMLConvertersFunction = ({ defaultConverters }) => ({\n ...defaultConverters,\n text: args => {\n const { node } = args\n // \u68C0\u67E5\u662F\u5426\u6709\u81EA\u5B9A\u4E49 color\n if (node.$ && node.$.color) {\n return `<span class=\"lexical-${node.$.color}\">${node.text}</span>`\n }\n return node.text\n },\n})\n\nconst MediaPlayerBase = forwardRef<HTMLDivElement, MediaPlayerBaseProps>(\n (\n {\n className = '',\n id,\n onBtnClick,\n data: {\n title,\n videoTitle,\n btnText,\n youtubeId,\n video,\n mobileVideo,\n theme,\n img,\n shape,\n titleAnimation = 'fade-in',\n ...dataRest\n },\n ...rest\n },\n ref\n ) => {\n const { sticky } = dataRest\n const [isPlaying, setIsPlaying] = useState(false)\n const [btb, setbtb] = useState(0)\n const [titleHeight, setTitleHeight] = useState(0)\n const [videoHeightProgress, setVideoHeightProgress] = useState(0)\n const [visible, setVisible] = useState<boolean>(false)\n\n const videoRef = useRef<HTMLVideoElement>(null)\n const bgRef = useRef<HTMLImageElement>(null)\n const titleRef = useRef<HTMLDivElement>(null)\n const titleFadeInRef = useRef<HTMLDivElement>(null)\n const trackRef = useRef<HTMLDivElement>(null)\n const splitTextInstance = useRef<SplitText | null>(null)\n const btnFadeInRef = useRef<HTMLButtonElement>(null)\n const scrollTriggerRef = useRef<ScrollTrigger | null>(null)\n const heightTriggerRef = useRef<ScrollTrigger | null>(null)\n const { ref: inViewRef, inView } = useInView()\n\n useImperativeHandle(ref, () => titleRef.current as HTMLDivElement)\n\n const title_html =\n typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title, converters: htmlConverters })\n const videoTitle_html =\n typeof videoTitle === 'string'\n ? videoTitle\n : videoTitle && convertLexicalToHTML({ data: videoTitle, converters: htmlConverters })\n\n useEffect(() => {\n if (inView) {\n videoRef.current?.play()\n setIsPlaying(true)\n } else {\n videoRef.current?.pause()\n setIsPlaying(false)\n }\n }, [inView])\n\n const debouncedHandleResize = debounce(() => {\n if (titleRef.current) {\n const rect = titleRef.current.getBoundingClientRect()\n const screenHeight = window.innerHeight\n const scrollTop = window.scrollY || window.pageYOffset\n const elementBottomToPageTop = rect.bottom + scrollTop\n const pageHeight = document.documentElement.scrollHeight\n const distanceToPageBottom = pageHeight - elementBottomToPageTop\n setbtb(distanceToPageBottom > screenHeight ? screenHeight : distanceToPageBottom)\n }\n if (titleRef.current) {\n const titleHeight = titleRef.current.clientHeight\n const screenHeight = window.innerHeight\n setTitleHeight(titleHeight + screenHeight)\n }\n }, 600)\n\n useEffect(() => {\n debouncedHandleResize()\n window.addEventListener('resize', debouncedHandleResize)\n return () => {\n window.removeEventListener('resize', debouncedHandleResize)\n }\n }, [])\n\n useEffect(() => {\n function gsapResize() {\n if (!titleFadeInRef.current || titleAnimation !== 'fade-in') return\n const height = titleFadeInRef.current?.clientHeight || 80\n splitTextInstance.current = new SplitText(titleFadeInRef.current, {\n type: 'words',\n wordsClass: 'word',\n })\n const words = splitTextInstance.current.words\n gsap.set(words, { opacity: 0 })\n if (btnFadeInRef.current) gsap.set(btnFadeInRef.current, { opacity: 0 })\n scrollTriggerRef.current = ScrollTrigger.create({\n trigger: titleRef.current,\n start: 'top center-=10%',\n end: `top+=${height * 1.5 + 80}px center-=10%`,\n scrub: true,\n onUpdate: (self: any) => {\n const progress = self.progress\n const total = words.length\n const interval = 1 / total\n const overlap = 0.5\n words.forEach((word: any, i: number) => {\n const start = (i / total) * (1 - overlap)\n const width = interval * (1 + overlap)\n let opacity = (progress - start) / width\n opacity = Math.max(0, Math.min(opacity, 1))\n gsap.set(word, { opacity })\n })\n gsap.set(bgRef.current, { opacity: progress })\n if (btnFadeInRef.current) {\n gsap.set(btnFadeInRef.current, { opacity: progress >= 0.6 ? 1 : 0 })\n }\n },\n })\n }\n\n function gsapVideoHeightResize() {\n heightTriggerRef.current = ScrollTrigger.create({\n trigger: titleRef.current,\n start: 'bottom bottom',\n end: `bottom top`,\n // markers: true,\n scrub: true,\n onUpdate: (self: any) => {\n const progress = self.progress\n setVideoHeightProgress(progress)\n },\n })\n }\n\n if (inView) {\n gsapResize()\n gsapVideoHeightResize()\n }\n\n return () => {\n splitTextInstance.current && splitTextInstance.current.revert()\n // ScrollTrigger.getAll().forEach((t: { kill: () => any }) => t.kill())\n scrollTriggerRef.current && scrollTriggerRef.current.kill()\n heightTriggerRef.current && heightTriggerRef.current.kill()\n }\n }, [titleAnimation, inView])\n\n useExposure(trackRef, {\n componentType,\n componentName,\n componentTitle: title_html,\n })\n\n const zIndexVideo = useMemo(() => {\n if (inView && videoHeightProgress > 0 && videoHeightProgress < 0.9) return 3\n if (inView) return 2\n return 1\n }, [videoHeightProgress, inView])\n\n const aspect =\n 'lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] desktop:aspect-w-[1024] desktop:aspect-h-[520] laptop:aspect-w-[1024] laptop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]'\n return (\n <>\n {sticky && (\n <div\n {...rest}\n ref={titleRef}\n className={cn(\n 'pointer-events-none relative z-10',\n aspect,\n {\n 'aiui-dark': theme === 'dark',\n 'rounded-box': shape === 'rounded',\n },\n className\n )}\n >\n <div ref={inViewRef}>\n {!titleAnimation && (\n <div className=\"media-content absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 px-4 text-center\">\n {title_html && !isPlaying && (\n <div\n className=\"lg-desktop:text-[64px] text-info-primary text-center text-[40px] font-bold leading-none lg:text-5xl\"\n dangerouslySetInnerHTML={{ __html: title_html }}\n />\n )}\n {videoTitle_html && isPlaying && (\n <div\n className=\"lg-desktop:text-[64px] text-info-primary text-center text-[40px] font-bold leading-none lg:text-5xl\"\n dangerouslySetInnerHTML={{ __html: videoTitle_html }}\n />\n )}\n {btnText && (\n <Button\n variant=\"link\"\n className={cn('member-equity-button-secondary text-info-primary')}\n onClick={() => {\n setVisible(true)\n // if (isPlaying) {\n // if (videoRef.current) {\n // videoRef.current.pause()\n // }\n // setIsPlaying(false)\n // } else {\n // if (videoRef.current) {\n // videoRef.current.play()\n // }\n // setIsPlaying(true)\n // }\n onBtnClick && onBtnClick?.()\n }}\n >\n {btnText}\n {/* <Right /> */}\n </Button>\n )}\n </div>\n )}\n </div>\n </div>\n )}\n <div\n {...(!sticky ? rest : {})}\n style={\n sticky\n ? {\n marginBottom: `-${btb}px`,\n marginTop: `-${titleHeight}px`,\n zIndex: zIndexVideo,\n }\n : { zIndex: 5 }\n }\n className={cn('relative', className)}\n >\n <div className=\"sticky top-0 \">\n <div\n id={id}\n className={cn('relative overflow-hidden', sticky ? 'h-screen w-full' : aspect, {\n 'aiui-dark': theme === 'dark',\n 'rounded-box': shape === 'rounded',\n })}\n >\n {titleAnimation === 'fade-in' && (\n <div\n className={cn(\n 'absolute z-30 flex w-full flex-col items-center justify-center gap-4 px-4 text-center',\n sticky ? 'left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2' : 'left-0 top-0'\n )}\n >\n {title_html && (\n <div\n ref={titleFadeInRef}\n className=\"media-player-base-title lg-desktop:text-[64px] text-info-primary text-[40px] font-bold leading-none lg:text-5xl\"\n dangerouslySetInnerHTML={{ __html: title_html }}\n />\n )}\n {btnText && (\n <Button\n ref={btnFadeInRef}\n variant=\"link\"\n className={cn('media-player-base-button member-equity-button-secondary text-info-primary')}\n onClick={() => {\n setVisible(true)\n onBtnClick && onBtnClick?.()\n }}\n >\n {btnText}\n </Button>\n )}\n </div>\n )}\n <div\n className=\"media-cover left-0 top-0 h-screen w-screen overflow-hidden\"\n style={{ height: `${102 - videoHeightProgress * 100}vh` }}\n >\n <ScrollLoadVideo\n videoRef={videoRef}\n poster={img?.url || ''}\n src={video?.url!}\n className=\"tablet:block hidden size-full !h-auto\"\n videoClassName=\"object-cover\"\n muted\n loop\n playsInline\n autoplay\n webkit-playsinline\n x5-playsinline\n />\n <ScrollLoadVideo\n videoRef={videoRef}\n poster={img?.url || ''}\n src={mobileVideo?.url || video?.url!}\n className=\"tablet:hidden block min-h-screen w-full\"\n videoClassName=\"object-cover w-full h-auto\"\n muted\n loop\n playsInline\n autoplay\n webkit-playsinline\n x5-playsinline\n />\n <div\n ref={bgRef}\n className=\"absolute left-0 top-0 z-10 size-full opacity-0\"\n style={{\n background: 'rgba(0, 0, 0, 0.2)',\n }}\n />\n </div>\n </div>\n </div>\n {sticky && (\n <div\n className={cn(sticky && 'pointer-events-none relative box-content block', aspect)}\n style={sticky ? { height: `${btb}px` } : {}}\n ref={trackRef}\n />\n )}\n </div>\n {visible && youtubeId && (\n <VideoModal visible={visible} youTubeId={youtubeId} onCloseModal={() => setVisible(false)} />\n )}\n </>\n )\n }\n)\n\nMediaPlayerBase.displayName = 'MediaPlayerBase'\n\nexport default withLayout(MediaPlayerBase)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["MediaPlayerBase_exports", "__export", "MediaPlayerBase_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_lodash", "import_utils", "import_Styles", "import_button", "import_VideoModal", "import_html", "import_react_intersection_observer", "import_useExposure", "import_ScrollLoadVideo", "import_gsap", "import_SplitText", "import_ScrollTrigger", "componentName", "componentType", "htmlConverters", "defaultConverters", "args", "node", "MediaPlayerBase", "className", "id", "onBtnClick", "title", "videoTitle", "btnText", "youtubeId", "video", "mobileVideo", "theme", "img", "shape", "titleAnimation", "dataRest", "rest", "ref", "sticky", "isPlaying", "setIsPlaying", "btb", "setbtb", "titleHeight", "setTitleHeight", "videoHeightProgress", "setVideoHeightProgress", "visible", "setVisible", "videoRef", "bgRef", "titleRef", "titleFadeInRef", "trackRef", "splitTextInstance", "btnFadeInRef", "scrollTriggerRef", "heightTriggerRef", "inViewRef", "inView", "title_html", "videoTitle_html", "debouncedHandleResize", "rect", "screenHeight", "scrollTop", "elementBottomToPageTop", "distanceToPageBottom", "gsapResize", "height", "words", "self", "progress", "total", "interval", "overlap", "word", "i", "start", "width", "opacity", "gsapVideoHeightResize", "zIndexVideo", "aspect", "Button", "ScrollLoadVideo"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var r=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var
|
|
1
|
+
"use strict";"use client";var r=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var n=Object.prototype.hasOwnProperty;var x=(o,l)=>{for(var p in l)r(o,p,{get:l[p],enumerable:!0})},b=(o,l,p,a)=>{if(l&&typeof l=="object"||typeof l=="function")for(let e of g(l))!n.call(o,e)&&e!==p&&r(o,e,{get:()=>l[e],enumerable:!(a=d(l,e))||a.enumerable});return o};var f=o=>b(r({},"__esModule",{value:!0}),o);var I={};x(I,{default:()=>u});module.exports=f(I);var t=require("react/jsx-runtime"),y=require("react"),i=require("../../helpers/utils.js"),N=require("../SwiperBox/index.js"),m=require("../../shared/Styles.js"),s=require("../../components/index.js");const v=({data:o,className:l,...p})=>{const{list:a}=o;return(0,t.jsx)(t.Fragment,{children:(0,t.jsx)("div",{...p,className:(0,i.cn)("",l),children:(0,t.jsx)("div",{className:"laptop:grid-cols-3 tablet:grid-cols-2 grid grid-cols-1 gap-4",children:a.map((e,c)=>(0,t.jsxs)("div",{className:"lg-desktop:aspect-[543/320] laptop:aspect-[440/280] tablet:aspect-[346/240] select-store-wrapper rounded-box relative flex aspect-[358/240] flex-col overflow-hidden bg-[#EAEAEC]",children:[(0,t.jsx)(s.Picture,{className:"object-cover",imgClassName:"w-full object-cover",source:`${e?.img?.url}, ${e?.padImg?.url} 1439, ${e?.miniImg?.url} 1023, ${e?.mobileImg?.url} 767`}),(0,t.jsxs)("div",{className:"laptop:px-6 laptop:pb-4 lg-desktop:px-8 lg-desktop:pb-8 px-4 pb-4",children:[(0,t.jsx)(s.Text,{html:e?.title,className:"lg-desktop:text-[24px] text-[20px] leading-[1.2] text-[#080A0F] [&_*_strong]:!font-bold"}),(0,t.jsx)(s.Text,{html:e?.desc,className:"lg-desktop:text-[16px] line-clamp-1 text-[14px] leading-[1.4] text-[#080A0F] [&_*_strong]:!font-bold"})]})]},c))})})})};var u=(0,m.withLayout)(v);
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/SelectStore/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport * as React from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport type { Img } from '../../types/props.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { Picture, Text } from '../../components/index.js'\n\nexport type SelectStoreDataType = {\n title: string\n desc: string\n img: Img\n mobileImg: Img\n padImg: Img\n miniImg: Img\n // pay: {\n // img: Img\n // }[]\n // delivery: {\n // img: Img\n // }[]\n // service: {\n // title: string\n // img: Img\n // }[]\n}\n\ninterface SelectStoreType extends React.HTMLAttributes<HTMLDivElement> {\n data: {\n list: SelectStoreDataType[]\n }\n}\n\nconst SelectStore = ({ data, className, ...rest }: SelectStoreType) => {\n const { list } = data\n // const number = list?.[2]?.service?.length || 0\n return (\n <>\n <div {...rest} className={cn('', className)}>\n <div className=\"laptop:grid-cols-3 tablet:grid-cols-2 grid grid-cols-1 gap-4\">\n {list.map((item, index) => (\n <div\n key={index}\n className=\"lg-desktop:aspect-[543/320] laptop:aspect-[440/280] tablet:aspect-[346/240] select-store-wrapper rounded-box relative flex aspect-[358/240] flex-col overflow-hidden bg-[#EAEAEC]\"\n >\n <Picture\n className=\"object-cover\"\n imgClassName=\"w-full object-cover\"\n source={`${item?.img?.url}, ${item?.padImg?.url} 1439, ${item?.miniImg?.url} 1023, ${item?.mobileImg?.url} 767`}\n />\n <div className=\"laptop:px-6 laptop:pb-4 lg-desktop:px-8 lg-desktop:pb-8 px-4 pb-4\">\n <Text\n html={item?.title}\n className=\"lg-desktop:text-[24px] text-[20px] leading-[1.2] text-[#080A0F] [&_*_strong]:!font-bold\"\n />\n <Text\n html={item?.desc}\n className=\"lg-desktop:text-[16px] line-clamp-1 text-[14px] leading-[1.4] text-[#080A0F]\"\n />\n </div>\n </div>\n ))}\n </div>\n {/* <div className='grid desktop:grid-cols-3 tablet:grid-cols-2 grid-cols-1 gap-4'>\n {list.map((item, index) => (\n <div key={index} className='bg-[#EAEAEC] rounded-2xl min-h-[240px] laptop:min-h-[280px] lg-desktop:min-h-[320px]'>\n <div className='flex flex-col laptop:p-[24px] lg-desktop:p-[32px] p-[16px] justify-start h-full'>\n <div className=\"flex flex-col justify-center flex-1\">\n \n {item?.pay && (\n <div className='flex gap-[16px] flex-wrap items-center justify-center laptop:gap-[24px]'>\n {item?.pay?.map((pay, ind)=>{\n return (\n <div key={ind} className='laptop:w-[60px] w-[48px]'>\n <Picture\n className=\" w-full\"\n imgClassName=\"\"\n source={pay?.img?.url}\n alt={pay?.img?.alt || ''}\n />\n </div>\n )\n })}\n </div>\n )}\n \n {\n item?.delivery && (\n <div className='flex gap-[24px] items-center justify-center'>\n {item?.delivery?.map((delivery, ind)=>{\n return (\n <div key={ind} className=''>\n <Picture\n className={` ${ind === 0 ? 'laptop:w-[174px] w-[116px]' : 'laptop:w-[75px] w-[50px]'}`}\n imgClassName=\"\"\n source={delivery?.img?.url}\n alt={delivery?.img?.alt || ''}\n />\n </div>\n )\n })}\n </div>\n ) \n }\n \n {\n item?.service && (\n <div className=' desktop:gap-[24px] gap-[8px] tablet:gap-[12px] laptop:gap-[28px] grid l-tablet:grid-cols-2 tablet:flex flex-wrap desktop:grid-cols-4 items-center justify-center'>\n {item?.service?.map((service, ind)=>{\n // \u5224\u65AD\uFF1A\u53EA\u5BF9\u7B2C\u4E94\u6761\uFF08index === 4\uFF09\u5E94\u7528\u54CD\u5E94\u5F0F\u663E\u793A/\u9690\u85CF\n const isFifth = ind === 4;\n return (\n <div key={ind} className={`\n flex flex-col items-center desktop:h-full w-[157px] justify-start desktop:w-[81px]\n ${isFifth ? 'laptop:flex desktop:hidden hidden' : ''} \n `}>\n <div className='w-[70px] desktop:w-[54px]'>\n <Picture\n className=\"\"\n imgClassName=\"w-full h-auto\"\n source={service?.img?.url}\n alt={service?.img?.alt || ''}\n />\n </div>\n <div className='text-center'>\n <Text html={service?.title} className=' font-bold text-[12px] mt-[8px] leading-[1.4]' />\n </div>\n </div>\n )\n })}\n </div>\n )\n }\n </div>\n <div className='mt-auto'>\n <Text html={item?.title} className='text-[20px] lg-desktop:text-[24px] [&_*_strong]:!font-bold leading-[1.2] text-[#080A0F]'/>\n <Text html={item?.desc} className='text-[14px] line-clamp-1 lg-desktop:text-[16px] leading-[1.4] text-[#080A0F]'/>\n </div>\n \n </div>\n </div>\n ))}\n </div> */}\n </div>\n </>\n )\n}\n\nexport default withLayout(SelectStore)\n"],
|
|
5
|
-
"mappings": "sbAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAqCI,IAAAI,EAAA,6BApCJC,EAAuB,iBACvBC,EAAmB,kCACnBC,EAAsB,iCAEtBC,EAA2B,kCAC3BC,EAA8B,qCA2B9B,MAAMC,EAAc,CAAC,CAAE,KAAAC,EAAM,UAAAC,EAAW,GAAGC,CAAK,IAAuB,CACrE,KAAM,CAAE,KAAAC,CAAK,EAAIH,EAEjB,SACE,mBACE,mBAAC,OAAK,GAAGE,EAAM,aAAW,MAAG,GAAID,CAAS,EACxC,mBAAC,OAAI,UAAU,+DACZ,SAAAE,EAAK,IAAI,CAACC,EAAMC,OACf,QAAC,OAEC,UAAU,oLAEV,oBAAC,WACC,UAAU,eACV,aAAa,sBACb,OAAQ,GAAGD,GAAM,KAAK,GAAG,KAAKA,GAAM,QAAQ,GAAG,UAAUA,GAAM,SAAS,GAAG,UAAUA,GAAM,WAAW,GAAG,OAC3G,KACA,QAAC,OAAI,UAAU,oEACb,oBAAC,QACC,KAAMA,GAAM,MACZ,UAAU,0FACZ,KACA,OAAC,QACC,KAAMA,GAAM,KACZ,UAAU
|
|
4
|
+
"sourcesContent": ["'use client'\nimport * as React from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport type { Img } from '../../types/props.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { Picture, Text } from '../../components/index.js'\n\nexport type SelectStoreDataType = {\n title: string\n desc: string\n img: Img\n mobileImg: Img\n padImg: Img\n miniImg: Img\n // pay: {\n // img: Img\n // }[]\n // delivery: {\n // img: Img\n // }[]\n // service: {\n // title: string\n // img: Img\n // }[]\n}\n\ninterface SelectStoreType extends React.HTMLAttributes<HTMLDivElement> {\n data: {\n list: SelectStoreDataType[]\n }\n}\n\nconst SelectStore = ({ data, className, ...rest }: SelectStoreType) => {\n const { list } = data\n // const number = list?.[2]?.service?.length || 0\n return (\n <>\n <div {...rest} className={cn('', className)}>\n <div className=\"laptop:grid-cols-3 tablet:grid-cols-2 grid grid-cols-1 gap-4\">\n {list.map((item, index) => (\n <div\n key={index}\n className=\"lg-desktop:aspect-[543/320] laptop:aspect-[440/280] tablet:aspect-[346/240] select-store-wrapper rounded-box relative flex aspect-[358/240] flex-col overflow-hidden bg-[#EAEAEC]\"\n >\n <Picture\n className=\"object-cover\"\n imgClassName=\"w-full object-cover\"\n source={`${item?.img?.url}, ${item?.padImg?.url} 1439, ${item?.miniImg?.url} 1023, ${item?.mobileImg?.url} 767`}\n />\n <div className=\"laptop:px-6 laptop:pb-4 lg-desktop:px-8 lg-desktop:pb-8 px-4 pb-4\">\n <Text\n html={item?.title}\n className=\"lg-desktop:text-[24px] text-[20px] leading-[1.2] text-[#080A0F] [&_*_strong]:!font-bold\"\n />\n <Text\n html={item?.desc}\n className=\"lg-desktop:text-[16px] line-clamp-1 text-[14px] leading-[1.4] text-[#080A0F] [&_*_strong]:!font-bold\"\n />\n </div>\n </div>\n ))}\n </div>\n {/* <div className='grid desktop:grid-cols-3 tablet:grid-cols-2 grid-cols-1 gap-4'>\n {list.map((item, index) => (\n <div key={index} className='bg-[#EAEAEC] rounded-2xl min-h-[240px] laptop:min-h-[280px] lg-desktop:min-h-[320px]'>\n <div className='flex flex-col laptop:p-[24px] lg-desktop:p-[32px] p-[16px] justify-start h-full'>\n <div className=\"flex flex-col justify-center flex-1\">\n \n {item?.pay && (\n <div className='flex gap-[16px] flex-wrap items-center justify-center laptop:gap-[24px]'>\n {item?.pay?.map((pay, ind)=>{\n return (\n <div key={ind} className='laptop:w-[60px] w-[48px]'>\n <Picture\n className=\" w-full\"\n imgClassName=\"\"\n source={pay?.img?.url}\n alt={pay?.img?.alt || ''}\n />\n </div>\n )\n })}\n </div>\n )}\n \n {\n item?.delivery && (\n <div className='flex gap-[24px] items-center justify-center'>\n {item?.delivery?.map((delivery, ind)=>{\n return (\n <div key={ind} className=''>\n <Picture\n className={` ${ind === 0 ? 'laptop:w-[174px] w-[116px]' : 'laptop:w-[75px] w-[50px]'}`}\n imgClassName=\"\"\n source={delivery?.img?.url}\n alt={delivery?.img?.alt || ''}\n />\n </div>\n )\n })}\n </div>\n ) \n }\n \n {\n item?.service && (\n <div className=' desktop:gap-[24px] gap-[8px] tablet:gap-[12px] laptop:gap-[28px] grid l-tablet:grid-cols-2 tablet:flex flex-wrap desktop:grid-cols-4 items-center justify-center'>\n {item?.service?.map((service, ind)=>{\n // \u5224\u65AD\uFF1A\u53EA\u5BF9\u7B2C\u4E94\u6761\uFF08index === 4\uFF09\u5E94\u7528\u54CD\u5E94\u5F0F\u663E\u793A/\u9690\u85CF\n const isFifth = ind === 4;\n return (\n <div key={ind} className={`\n flex flex-col items-center desktop:h-full w-[157px] justify-start desktop:w-[81px]\n ${isFifth ? 'laptop:flex desktop:hidden hidden' : ''} \n `}>\n <div className='w-[70px] desktop:w-[54px]'>\n <Picture\n className=\"\"\n imgClassName=\"w-full h-auto\"\n source={service?.img?.url}\n alt={service?.img?.alt || ''}\n />\n </div>\n <div className='text-center'>\n <Text html={service?.title} className=' font-bold text-[12px] mt-[8px] leading-[1.4]' />\n </div>\n </div>\n )\n })}\n </div>\n )\n }\n </div>\n <div className='mt-auto'>\n <Text html={item?.title} className='text-[20px] lg-desktop:text-[24px] [&_*_strong]:!font-bold leading-[1.2] text-[#080A0F]'/>\n <Text html={item?.desc} className='text-[14px] line-clamp-1 lg-desktop:text-[16px] leading-[1.4] text-[#080A0F]'/>\n </div>\n \n </div>\n </div>\n ))}\n </div> */}\n </div>\n </>\n )\n}\n\nexport default withLayout(SelectStore)\n"],
|
|
5
|
+
"mappings": "sbAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAqCI,IAAAI,EAAA,6BApCJC,EAAuB,iBACvBC,EAAmB,kCACnBC,EAAsB,iCAEtBC,EAA2B,kCAC3BC,EAA8B,qCA2B9B,MAAMC,EAAc,CAAC,CAAE,KAAAC,EAAM,UAAAC,EAAW,GAAGC,CAAK,IAAuB,CACrE,KAAM,CAAE,KAAAC,CAAK,EAAIH,EAEjB,SACE,mBACE,mBAAC,OAAK,GAAGE,EAAM,aAAW,MAAG,GAAID,CAAS,EACxC,mBAAC,OAAI,UAAU,+DACZ,SAAAE,EAAK,IAAI,CAACC,EAAMC,OACf,QAAC,OAEC,UAAU,oLAEV,oBAAC,WACC,UAAU,eACV,aAAa,sBACb,OAAQ,GAAGD,GAAM,KAAK,GAAG,KAAKA,GAAM,QAAQ,GAAG,UAAUA,GAAM,SAAS,GAAG,UAAUA,GAAM,WAAW,GAAG,OAC3G,KACA,QAAC,OAAI,UAAU,oEACb,oBAAC,QACC,KAAMA,GAAM,MACZ,UAAU,0FACZ,KACA,OAAC,QACC,KAAMA,GAAM,KACZ,UAAU,uGACZ,GACF,IAjBKC,CAkBP,CACD,EACH,EAiFF,EACF,CAEJ,EAEA,IAAOd,KAAQ,cAAWQ,CAAW",
|
|
6
6
|
"names": ["SelectStore_exports", "__export", "SelectStore_default", "__toCommonJS", "import_jsx_runtime", "React", "import_utils", "import_SwiperBox", "import_Styles", "import_components", "SelectStore", "data", "className", "rest", "list", "item", "index"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var w=Object.create;var p=Object.defineProperty;var
|
|
1
|
+
"use strict";"use client";var w=Object.create;var p=Object.defineProperty;var E=Object.getOwnPropertyDescriptor;var G=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,D=Object.prototype.hasOwnProperty;var M=(r,e)=>{for(var l in e)p(r,l,{get:e[l],enumerable:!0})},f=(r,e,l,m)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of G(e))!D.call(r,o)&&o!==l&&p(r,o,{get:()=>e[o],enumerable:!(m=E(e,o))||m.enumerable});return r};var s=(r,e,l)=>(l=r!=null?w(x(r)):{},f(e||!r||!r.__esModule?p(l,"default",{value:r,enumerable:!0}):l,r)),R=r=>f(p({},"__esModule",{value:!0}),r);var H={};M(H,{default:()=>F});module.exports=R(H);var a=require("react/jsx-runtime"),n=require("../../shared/Styles.js"),c=s(require("../../components/tabs.js")),d=require("../../helpers/index.js"),b=s(require("react")),h=s(require("../ShelfDisplay/index.js")),k=s(require("../AccordionCards/index.js")),N=s(require("../Faq/index.js")),g=s(require("../MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js")),T=s(require("../Title/index.js")),v=s(require("../Graphic/index.js")),L=s(require("../WhyChoose/index.js")),P=s(require("../BrandEquity/index.js")),A=s(require("../BrandCardLink/index.js"));const y=b.default.forwardRef(({data:r,className:e},l)=>{const{theme:m,shape:o,align:q,tabs:t=[],sectionTitle:u}=r,B=i=>i?.blockType==="ipc-shelfdisplay"?(0,a.jsx)(h.default,{data:i}):i?.blockType==="ipc-multiLayoutGraphicBlock"?(0,a.jsx)(g.default,{data:i}):i?.blockType==="ipc-accordioncards"?(0,a.jsx)(k.default,{data:i}):i?.blockType==="ipc-faq"?(0,a.jsx)(N.default,{data:i}):i?.blockType==="ipc-graphic"?(0,a.jsx)(v.default,{data:i}):i?.blockType==="ipc-whychoose"?(0,a.jsx)(L.default,{data:i}):i?.blockType==="ipc-brand-equity"?(0,a.jsx)(P.default,{data:i}):i?.blockType==="ipc-brand-card-link"?(0,a.jsx)(A.default,{data:i}):null;return(0,a.jsxs)("section",{ref:l,className:(0,d.cn)(m==="dark"?"aiui-dark":"",e),children:[u&&(0,a.jsx)(T.default,{className:"section-title",data:{title:u}}),(0,a.jsxs)(c.Tabs,{shape:o,align:q,defaultValue:t?.[0]?.id||t?.[0]?.tabName,children:[Array.isArray(t)&&t.length>1&&(0,a.jsx)(c.TabsList,{className:"tabs-list",children:t.map(i=>(0,a.jsx)(c.TabsTrigger,{value:i.id||i.tabName,className:"tabs-trigger",children:i.tabName},i.id||i.tabName))}),(Array.isArray(t)?t:[])?.map(i=>(0,a.jsxs)(c.TabsContent,{value:i.id||i.tabName,className:`tabs-content ${t?.length>1?"mt-[24px]":""}`,children:[i.caption||!(0,d.isLexicalEmpty)(i?.subtitle)?(0,a.jsx)(T.default,{className:"tabs-title",data:{caption:i?.caption,subtitle:i?.subtitle}}):null,i.tabContent?.[0]?B(i.tabContent?.[0]):null]},i.id||i.tabName))]})]})});y.displayName="Tabs";var F=(0,n.withLayout)(y);
|
|
2
2
|
//# sourceMappingURL=Tabs.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/Tabs/Tabs.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport { withLayout } from '../../shared/Styles.js'\nimport * as TabsPrimitive from '../../components/tabs.js'\nimport { cn } from '../../helpers/index.js'\nimport type { TabsProps } from './types.js'\nimport React from 'react'\nimport ShelfDisplay from '../ShelfDisplay/index.js'\nimport AccordionCards from '../AccordionCards/index.js'\nimport Faq from '../Faq/index.js'\nimport MultiLayoutGraphicBlock from '../MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js'\nimport Title from '../Title/index.js'\nimport Graphic from '../Graphic/index.js'\nimport WhyChoose from '../WhyChoose/index.js'\nimport BrandEquity from '../BrandEquity/index.js'\nimport BrandCardLink from '../BrandCardLink/index.js'\n\nconst Tabs = React.forwardRef<HTMLDivElement, TabsProps>(({ data, className }, forwardedRef) => {\n const { theme, shape, align, tabs = [], sectionTitle } = data\n\n const renderTabContent = (tabContent: TabsProps['data']['tabs'][number]['tabContent'][number]) => {\n if (tabContent?.blockType === 'ipc-shelfdisplay') {\n return <ShelfDisplay data={tabContent} />\n } else if (tabContent?.blockType === 'ipc-multiLayoutGraphicBlock') {\n return <MultiLayoutGraphicBlock data={tabContent} />\n } else if (tabContent?.blockType === 'ipc-accordioncards') {\n return <AccordionCards data={tabContent} />\n } else if (tabContent?.blockType === 'ipc-faq') {\n return <Faq data={tabContent} />\n } else if (tabContent?.blockType === 'ipc-graphic') {\n return <Graphic data={tabContent} />\n } else if (tabContent?.blockType === 'ipc-whychoose') {\n return <WhyChoose data={tabContent} />\n } else if (tabContent?.blockType === 'ipc-brand-equity') {\n return <BrandEquity data={tabContent} />\n } else if (tabContent?.blockType === 'ipc-brand-card-link') {\n return <BrandCardLink data={tabContent} />\n } else {\n return null\n }\n }\n\n return (\n <section ref={forwardedRef} className={cn(theme === 'dark' ? 'aiui-dark' : '', className)}>\n {sectionTitle && <Title className=\"section-title\" data={{ title: sectionTitle }} />}\n <TabsPrimitive.Tabs shape={shape} align={align} defaultValue={tabs?.[0]?.id || tabs?.[0]?.tabName}>\n {/* <TabsPrimitive.TabsList className=\"tabs-list\">\n {(Array.isArray(tabs) ? tabs : [])?.map(tab => (\n <TabsPrimitive.TabsTrigger\n key={tab.id || tab.tabName}\n value={tab.id || tab.tabName}\n className=\"tabs-trigger\"\n >\n {tab.tabName}\n </TabsPrimitive.TabsTrigger>\n ))}\n </TabsPrimitive.TabsList> */}\n {/* Tab\u4E3A1\u65F6\uFF0C\u4E0D\u5C55\u793Atab\u6309\u94AE */}\n {Array.isArray(tabs) && tabs.length > 1 && (\n <TabsPrimitive.TabsList className=\"tabs-list\">\n {tabs.map(tab => (\n <TabsPrimitive.TabsTrigger\n key={tab.id || tab.tabName}\n value={tab.id || tab.tabName}\n className=\"tabs-trigger\"\n >\n {tab.tabName}\n </TabsPrimitive.TabsTrigger>\n ))}\n </TabsPrimitive.TabsList>\n )}\n {(Array.isArray(tabs) ? tabs : [])?.map((tab: any) => (\n <TabsPrimitive.TabsContent\n key={tab.id || tab.tabName}\n value={tab.id || tab.tabName}\n className={`tabs-content ${tabs?.length > 1 ? 'mt-[24px]' : ''}`}\n >\n {tab.caption || tab?.subtitle ? (\n <Title className=\"tabs-title\" data={{ caption: tab?.caption, subtitle: tab?.subtitle }} />\n ) : null}\n {tab.tabContent?.[0] ? renderTabContent(tab.tabContent?.[0]) : null}\n </TabsPrimitive.TabsContent>\n ))}\n </TabsPrimitive.Tabs>\n </section>\n )\n})\nTabs.displayName = 'Tabs'\nexport default withLayout(Tabs)\n"],
|
|
5
|
-
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAqBa,IAAAI,EAAA,6BApBbC,EAA2B,kCAC3BC,EAA+B,uCAC/BC,
|
|
4
|
+
"sourcesContent": ["'use client'\nimport { withLayout } from '../../shared/Styles.js'\nimport * as TabsPrimitive from '../../components/tabs.js'\nimport { cn, isLexicalEmpty } from '../../helpers/index.js'\nimport type { TabsProps } from './types.js'\nimport React from 'react'\nimport ShelfDisplay from '../ShelfDisplay/index.js'\nimport AccordionCards from '../AccordionCards/index.js'\nimport Faq from '../Faq/index.js'\nimport MultiLayoutGraphicBlock from '../MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js'\nimport Title from '../Title/index.js'\nimport Graphic from '../Graphic/index.js'\nimport WhyChoose from '../WhyChoose/index.js'\nimport BrandEquity from '../BrandEquity/index.js'\nimport BrandCardLink from '../BrandCardLink/index.js'\n\nconst Tabs = React.forwardRef<HTMLDivElement, TabsProps>(({ data, className }, forwardedRef) => {\n const { theme, shape, align, tabs = [], sectionTitle } = data\n\n const renderTabContent = (tabContent: TabsProps['data']['tabs'][number]['tabContent'][number]) => {\n if (tabContent?.blockType === 'ipc-shelfdisplay') {\n return <ShelfDisplay data={tabContent} />\n } else if (tabContent?.blockType === 'ipc-multiLayoutGraphicBlock') {\n return <MultiLayoutGraphicBlock data={tabContent} />\n } else if (tabContent?.blockType === 'ipc-accordioncards') {\n return <AccordionCards data={tabContent} />\n } else if (tabContent?.blockType === 'ipc-faq') {\n return <Faq data={tabContent} />\n } else if (tabContent?.blockType === 'ipc-graphic') {\n return <Graphic data={tabContent} />\n } else if (tabContent?.blockType === 'ipc-whychoose') {\n return <WhyChoose data={tabContent} />\n } else if (tabContent?.blockType === 'ipc-brand-equity') {\n return <BrandEquity data={tabContent} />\n } else if (tabContent?.blockType === 'ipc-brand-card-link') {\n return <BrandCardLink data={tabContent} />\n } else {\n return null\n }\n }\n\n return (\n <section ref={forwardedRef} className={cn(theme === 'dark' ? 'aiui-dark' : '', className)}>\n {sectionTitle && <Title className=\"section-title\" data={{ title: sectionTitle }} />}\n <TabsPrimitive.Tabs shape={shape} align={align} defaultValue={tabs?.[0]?.id || tabs?.[0]?.tabName}>\n {/* <TabsPrimitive.TabsList className=\"tabs-list\">\n {(Array.isArray(tabs) ? tabs : [])?.map(tab => (\n <TabsPrimitive.TabsTrigger\n key={tab.id || tab.tabName}\n value={tab.id || tab.tabName}\n className=\"tabs-trigger\"\n >\n {tab.tabName}\n </TabsPrimitive.TabsTrigger>\n ))}\n </TabsPrimitive.TabsList> */}\n {/* Tab\u4E3A1\u65F6\uFF0C\u4E0D\u5C55\u793Atab\u6309\u94AE */}\n {Array.isArray(tabs) && tabs.length > 1 && (\n <TabsPrimitive.TabsList className=\"tabs-list\">\n {tabs.map(tab => (\n <TabsPrimitive.TabsTrigger\n key={tab.id || tab.tabName}\n value={tab.id || tab.tabName}\n className=\"tabs-trigger\"\n >\n {tab.tabName}\n </TabsPrimitive.TabsTrigger>\n ))}\n </TabsPrimitive.TabsList>\n )}\n {(Array.isArray(tabs) ? tabs : [])?.map((tab: any) => (\n <TabsPrimitive.TabsContent\n key={tab.id || tab.tabName}\n value={tab.id || tab.tabName}\n className={`tabs-content ${tabs?.length > 1 ? 'mt-[24px]' : ''}`}\n >\n {tab.caption || !isLexicalEmpty(tab?.subtitle) ? (\n <Title className=\"tabs-title\" data={{ caption: tab?.caption, subtitle: tab?.subtitle }} />\n ) : null}\n {tab.tabContent?.[0] ? renderTabContent(tab.tabContent?.[0]) : null}\n </TabsPrimitive.TabsContent>\n ))}\n </TabsPrimitive.Tabs>\n </section>\n )\n})\nTabs.displayName = 'Tabs'\nexport default withLayout(Tabs)\n"],
|
|
5
|
+
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAqBa,IAAAI,EAAA,6BApBbC,EAA2B,kCAC3BC,EAA+B,uCAC/BC,EAAmC,kCAEnCC,EAAkB,oBAClBC,EAAyB,uCACzBC,EAA2B,yCAC3BC,EAAgB,8BAChBC,EAAoC,oEACpCC,EAAkB,gCAClBC,EAAoB,kCACpBC,EAAsB,oCACtBC,EAAwB,sCACxBC,EAA0B,wCAE1B,MAAMC,EAAO,EAAAC,QAAM,WAAsC,CAAC,CAAE,KAAAC,EAAM,UAAAC,CAAU,EAAGC,IAAiB,CAC9F,KAAM,CAAE,MAAAC,EAAO,MAAAC,EAAO,MAAAC,EAAO,KAAAC,EAAO,CAAC,EAAG,aAAAC,CAAa,EAAIP,EAEnDQ,EAAoBC,GACpBA,GAAY,YAAc,sBACrB,OAAC,EAAAC,QAAA,CAAa,KAAMD,EAAY,EAC9BA,GAAY,YAAc,iCAC5B,OAAC,EAAAE,QAAA,CAAwB,KAAMF,EAAY,EACzCA,GAAY,YAAc,wBAC5B,OAAC,EAAAG,QAAA,CAAe,KAAMH,EAAY,EAChCA,GAAY,YAAc,aAC5B,OAAC,EAAAI,QAAA,CAAI,KAAMJ,EAAY,EACrBA,GAAY,YAAc,iBAC5B,OAAC,EAAAK,QAAA,CAAQ,KAAML,EAAY,EACzBA,GAAY,YAAc,mBAC5B,OAAC,EAAAM,QAAA,CAAU,KAAMN,EAAY,EAC3BA,GAAY,YAAc,sBAC5B,OAAC,EAAAO,QAAA,CAAY,KAAMP,EAAY,EAC7BA,GAAY,YAAc,yBAC5B,OAAC,EAAAQ,QAAA,CAAc,KAAMR,EAAY,EAEjC,KAIX,SACE,QAAC,WAAQ,IAAKP,EAAc,aAAW,MAAGC,IAAU,OAAS,YAAc,GAAIF,CAAS,EACrF,UAAAM,MAAgB,OAAC,EAAAW,QAAA,CAAM,UAAU,gBAAgB,KAAM,CAAE,MAAOX,CAAa,EAAG,KACjF,QAACrB,EAAc,KAAd,CAAmB,MAAOkB,EAAO,MAAOC,EAAO,aAAcC,IAAO,CAAC,GAAG,IAAMA,IAAO,CAAC,GAAG,QAavF,gBAAM,QAAQA,CAAI,GAAKA,EAAK,OAAS,MACpC,OAACpB,EAAc,SAAd,CAAuB,UAAU,YAC/B,SAAAoB,EAAK,IAAIa,MACR,OAACjC,EAAc,YAAd,CAEC,MAAOiC,EAAI,IAAMA,EAAI,QACrB,UAAU,eAET,SAAAA,EAAI,SAJAA,EAAI,IAAMA,EAAI,OAKrB,CACD,EACH,GAEA,MAAM,QAAQb,CAAI,EAAIA,EAAO,CAAC,IAAI,IAAKa,MACvC,QAACjC,EAAc,YAAd,CAEC,MAAOiC,EAAI,IAAMA,EAAI,QACrB,UAAW,gBAAgBb,GAAM,OAAS,EAAI,YAAc,EAAE,GAE7D,UAAAa,EAAI,SAAW,IAAC,kBAAeA,GAAK,QAAQ,KAC3C,OAAC,EAAAD,QAAA,CAAM,UAAU,aAAa,KAAM,CAAE,QAASC,GAAK,QAAS,SAAUA,GAAK,QAAS,EAAG,EACtF,KACHA,EAAI,aAAa,CAAC,EAAIX,EAAiBW,EAAI,aAAa,CAAC,CAAC,EAAI,OAP1DA,EAAI,IAAMA,EAAI,OAQrB,CACD,GACH,GACF,CAEJ,CAAC,EACDrB,EAAK,YAAc,OACnB,IAAOhB,KAAQ,cAAWgB,CAAI",
|
|
6
6
|
"names": ["Tabs_exports", "__export", "Tabs_default", "__toCommonJS", "import_jsx_runtime", "import_Styles", "TabsPrimitive", "import_helpers", "import_react", "import_ShelfDisplay", "import_AccordionCards", "import_Faq", "import_MultiLayoutGraphicBlock", "import_Title", "import_Graphic", "import_WhyChoose", "import_BrandEquity", "import_BrandCardLink", "Tabs", "React", "data", "className", "forwardedRef", "theme", "shape", "align", "tabs", "sectionTitle", "renderTabContent", "tabContent", "ShelfDisplay", "MultiLayoutGraphicBlock", "AccordionCards", "Faq", "Graphic", "WhyChoose", "BrandEquity", "BrandCardLink", "Title", "tab"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var z=Object.create;var f=Object.defineProperty;var E=Object.getOwnPropertyDescriptor;var D=Object.getOwnPropertyNames;var P=Object.getPrototypeOf,R=Object.prototype.hasOwnProperty;var j=(o,r)=>{for(var s in r)f(o,s,{get:r[s],enumerable:!0})},g=(o,r,s,u)=>{if(r&&typeof r=="object"||typeof r=="function")for(let a of D(r))!R.call(o,a)&&a!==s&&f(o,a,{get:()=>r[a],enumerable:!(u=E(r,a))||u.enumerable});return o};var B=(o,r,s)=>(s=o!=null?z(P(o)):{},g(r||!o||!o.__esModule?f(s,"default",{value:o,enumerable:!0}):s,o)),M=o=>g(f({},"__esModule",{value:!0}),o);var W={};j(W,{default:()=>V});module.exports=M(W);var e=require("react/jsx-runtime"),i=B(require("react")),l=require("../../components/index.js"),c=require("../../helpers/utils.js"),N=require("../../shared/Styles.js"),y=require("../../hooks/useExposure.js"),S=require("../AiuiProvider/index.js"),p=require("swiper/react"),h=require("swiper/modules"),q=require("swiper/css"),F=require("swiper/css/navigation"),G=require("swiper/css/pagination"),J=require("swiper/css/effect-coverflow");const H="carousel",U="three_d_carousel",I=()=>(0,e.jsxs)("svg",{width:"56",height:"56",viewBox:"0 0 56 56",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:"three-d-carousel__nav-icon lg-desktop:scale-100 scale-[70%] text-white hover:text-[#1f1f1f]",children:[(0,e.jsx)("circle",{cx:"28",cy:"28",r:"28",fill:"currentColor",fillOpacity:"0.2"}),(0,e.jsx)("path",{d:"M32 20L24 28L32 36",stroke:"white",strokeWidth:"2.66667",strokeLinecap:"round",strokeLinejoin:"round"})]}),O=()=>(0,e.jsxs)("svg",{width:"56",height:"56",viewBox:"0 0 56 56",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:"three-d-carousel__nav-icon lg-desktop:scale-100 scale-[70%] text-white hover:text-[#1f1f1f]",children:[(0,e.jsx)("circle",{cx:"28",cy:"28",r:"28",fill:"currentColor",fillOpacity:"0.2"}),(0,e.jsx)("path",{d:"M24 20L32 28L24 36",stroke:"white",strokeWidth:"2.66667",strokeLinecap:"round",strokeLinejoin:"round"})]}),k=i.default.forwardRef(({data:o,className:r},s)=>{const{title:u,items:a=[]}=o,w=a.length<4?[...a,...a]:a,n=(0,i.useRef)(null),v=(0,i.useRef)(null),x=(0,i.useRef)(null),[T,C]=i.default.useState(180),{locale:b="us"}=(0,S.useAiuiContext)();return(0,y.useExposure)(v,{componentType:H,componentName:U,componentTitle:u}),(0,i.useImperativeHandle)(s,()=>v.current),i.default.useEffect(()=>{const t=x.current;if(!t)return;const d=()=>{const L=t.offsetWidth,_=Math.round(L*.125);C(_),n.current?.params?.coverflowEffect&&(n.current.params.coverflowEffect.stretch=_,n.current.update())};d();const m=new ResizeObserver(d);return m.observe(t),()=>m.disconnect()},[]),(0,e.jsxs)("section",{ref:v,"data-ui-component-id":"ThreeDCarousel",className:(0,c.cn)("three-d-carousel laptop:overflow-hidden w-full overflow-visible",r),children:[(0,e.jsx)(l.Heading,{as:"h1",size:4,html:u,className:"three-d-carousel__title laptop:text-center text-left"}),(0,e.jsxs)("div",{ref:x,className:"three-d-carousel__desktop laptop:block relative mx-auto mt-[24px] hidden w-full",children:[(0,e.jsx)(p.Swiper,{onSwiper:t=>n.current=t,centeredSlides:!0,initialSlide:0,loop:!0,slidesPerView:"auto",spaceBetween:0,grabCursor:!0,modules:[h.EffectCoverflow,h.Navigation],slideToClickedSlide:!0,className:"three-d-carousel__swiper rounded-box relative aspect-[1386/502] overflow-visible",effect:"coverflow",coverflowEffect:{rotate:0,stretch:T,depth:300,modifier:1,slideShadows:!0},children:w.map((t,d)=>(0,e.jsx)(p.SwiperSlide,{className:"three-d-carousel__slide relative !w-1/2 cursor-grab overflow-hidden opacity-0 [.swiper-slide-active&]:opacity-100 [.swiper-slide-next&]:opacity-100 [.swiper-slide-prev&]:opacity-100",children:({isActive:m})=>(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(l.Picture,{source:t.imageUrl?.url||"",alt:t.imageUrl?.alt||t.title,className:(0,c.cn)("three-d-carousel__image rounded-box mx-auto h-full overflow-hidden"),imgClassName:"h-full object-cover",style:{filter:m?"":"brightness(50%) contrast(120%)"}}),(0,e.jsxs)("div",{className:(0,c.cn)("three-d-carousel__image-content tablet:p-[24px] desktop:p-[32px] text-info-primary absolute left-0 top-0 flex size-full flex-col justify-end gap-1 p-[16px]",{"aiui-dark":t.theme==="dark","opacity-0":!m}),children:[(0,e.jsx)(l.Heading,{as:"h2",size:2,html:t.title}),(0,e.jsx)(l.Text,{as:"p",size:4,html:t.description,className:"three-d-carousel__image-description text-[14px]"}),t.buttonText&&(0,e.jsx)("a",{href:(0,c.getLocalizedPath)(t.buttonLink||"",b),className:"three-d-carousel__image-link ",children:(0,e.jsx)(l.Button,{size:"base",variant:"secondary",className:"three-d-carousel__image-button desktop:mt-6 mt-4",children:t.buttonText})})]})]})},d))}),(0,e.jsxs)("div",{className:"three-d-carousel__nav-controls laptop:px-[64px] desktop:px-[140px] lg-desktop:px-[200px] absolute left-1/2 top-1/2 z-20 flex w-full -translate-x-1/2 -translate-y-1/2 justify-between",children:[(0,e.jsx)("button",{className:"three-d-carousel__nav-button three-d-carousel__nav-button--prev",onClick:()=>n.current?.slidePrev(),"aria-label":"Previous slide",children:(0,e.jsx)(I,{})}),(0,e.jsx)("button",{className:"three-d-carousel__nav-button three-d-carousel__nav-button--next",onClick:()=>n.current?.slideNext(),"aria-label":"Next slide",children:(0,e.jsx)(O,{})})]})]}),(0,e.jsx)("div",{className:"three-d-carousel__mobile laptop:hidden mt-[24px] block w-full overflow-visible",children:(0,e.jsx)(p.Swiper,{loop:!0,loopAdditionalSlides:1,slidesPerView:"auto",spaceBetween:12,grabCursor:!0,className:"three-d-carousel__swiper-mobile relative w-full !overflow-visible",children:w.map((t,d)=>(0,e.jsxs)(p.SwiperSlide,{className:"three-d-carousel__slide-mobile relative !h-[360px] !w-[296px] cursor-grab overflow-hidden",children:[(0,e.jsx)(l.Picture,{source:t.mobImageUrl?.url||t.imageUrl?.url||"",alt:t.mobImageUrl?.alt||t.title,className:"three-d-carousel__image-mobile rounded-box mx-auto h-full overflow-hidden",imgClassName:"h-full object-cover"}),(0,e.jsxs)("div",{className:(0,c.cn)("three-d-carousel__image-mobile-content tablet:p-[24px] desktop:p-[32px] text-info-primary absolute left-0 top-0 flex size-full flex-col justify-end gap-1 p-[16px]",{"aiui-dark":t.theme==="dark"}),children:[(0,e.jsx)(l.Heading,{as:"h2",size:2,html:t.title}),(0,e.jsx)(l.Text,{as:"p",size:4,html:t.description,className:"three-d-carousel__image-mobile-description text-[14px]"}),t.buttonText&&(0,e.jsx)("a",{href:(0,c.getLocalizedPath)(t.buttonLink||"",b),className:"three-d-carousel__image-mobile-link ",children:(0,e.jsx)(l.Button,{size:"base",variant:"secondary",className:"three-d-carousel__image-mobile-button mt-3",children:t.buttonText})})]})]},d))})})]})});k.displayName="ThreeDCarousel";var V=(0,N.withLayout)(k,{style:"overflow: hidden;"});
|
|
1
|
+
"use strict";"use client";var z=Object.create;var f=Object.defineProperty;var E=Object.getOwnPropertyDescriptor;var D=Object.getOwnPropertyNames;var P=Object.getPrototypeOf,R=Object.prototype.hasOwnProperty;var j=(o,r)=>{for(var s in r)f(o,s,{get:r[s],enumerable:!0})},g=(o,r,s,u)=>{if(r&&typeof r=="object"||typeof r=="function")for(let a of D(r))!R.call(o,a)&&a!==s&&f(o,a,{get:()=>r[a],enumerable:!(u=E(r,a))||u.enumerable});return o};var B=(o,r,s)=>(s=o!=null?z(P(o)):{},g(r||!o||!o.__esModule?f(s,"default",{value:o,enumerable:!0}):s,o)),M=o=>g(f({},"__esModule",{value:!0}),o);var W={};j(W,{default:()=>V});module.exports=M(W);var e=require("react/jsx-runtime"),i=B(require("react")),l=require("../../components/index.js"),c=require("../../helpers/utils.js"),N=require("../../shared/Styles.js"),y=require("../../hooks/useExposure.js"),S=require("../AiuiProvider/index.js"),p=require("swiper/react"),h=require("swiper/modules"),q=require("swiper/css"),F=require("swiper/css/navigation"),G=require("swiper/css/pagination"),J=require("swiper/css/effect-coverflow");const H="carousel",U="three_d_carousel",I=()=>(0,e.jsxs)("svg",{width:"56",height:"56",viewBox:"0 0 56 56",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:"three-d-carousel__nav-icon lg-desktop:scale-100 scale-[70%] text-white hover:text-[#1f1f1f]",children:[(0,e.jsx)("circle",{cx:"28",cy:"28",r:"28",fill:"currentColor",fillOpacity:"0.2"}),(0,e.jsx)("path",{d:"M32 20L24 28L32 36",stroke:"white",strokeWidth:"2.66667",strokeLinecap:"round",strokeLinejoin:"round"})]}),O=()=>(0,e.jsxs)("svg",{width:"56",height:"56",viewBox:"0 0 56 56",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:"three-d-carousel__nav-icon lg-desktop:scale-100 scale-[70%] text-white hover:text-[#1f1f1f]",children:[(0,e.jsx)("circle",{cx:"28",cy:"28",r:"28",fill:"currentColor",fillOpacity:"0.2"}),(0,e.jsx)("path",{d:"M24 20L32 28L24 36",stroke:"white",strokeWidth:"2.66667",strokeLinecap:"round",strokeLinejoin:"round"})]}),k=i.default.forwardRef(({data:o,className:r},s)=>{const{title:u,items:a=[]}=o,w=a.length<4?[...a,...a]:a,n=(0,i.useRef)(null),v=(0,i.useRef)(null),x=(0,i.useRef)(null),[T,C]=i.default.useState(180),{locale:b="us"}=(0,S.useAiuiContext)();return(0,y.useExposure)(v,{componentType:H,componentName:U,componentTitle:u}),(0,i.useImperativeHandle)(s,()=>v.current),i.default.useEffect(()=>{const t=x.current;if(!t)return;const d=()=>{const L=t.offsetWidth,_=Math.round(L*.125);C(_),n.current?.params?.coverflowEffect&&(n.current.params.coverflowEffect.stretch=_,n.current.update())};d();const m=new ResizeObserver(d);return m.observe(t),()=>m.disconnect()},[]),(0,e.jsxs)("section",{ref:v,"data-ui-component-id":"ThreeDCarousel",className:(0,c.cn)("three-d-carousel laptop:overflow-hidden w-full overflow-visible",r),children:[(0,e.jsx)(l.Heading,{as:"h1",size:4,html:u,className:"three-d-carousel__title laptop:text-center text-left"}),(0,e.jsxs)("div",{ref:x,className:"three-d-carousel__desktop laptop:block relative mx-auto mt-[24px] hidden w-full",children:[(0,e.jsx)(p.Swiper,{onSwiper:t=>n.current=t,centeredSlides:!0,initialSlide:0,loop:!0,slidesPerView:"auto",spaceBetween:0,grabCursor:!0,modules:[h.EffectCoverflow,h.Navigation],slideToClickedSlide:!0,className:"three-d-carousel__swiper rounded-box relative aspect-[1386/502] overflow-visible",effect:"coverflow",coverflowEffect:{rotate:0,stretch:T,depth:300,modifier:1,slideShadows:!0},children:w.map((t,d)=>(0,e.jsx)(p.SwiperSlide,{className:"three-d-carousel__slide relative !w-1/2 cursor-grab overflow-hidden opacity-0 [.swiper-slide-active&]:opacity-100 [.swiper-slide-next&]:opacity-100 [.swiper-slide-prev&]:opacity-100",children:({isActive:m})=>(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(l.Picture,{source:t.imageUrl?.url||"",alt:t.imageUrl?.alt||t.title,className:(0,c.cn)("three-d-carousel__image rounded-box mx-auto h-full overflow-hidden"),imgClassName:"h-full object-cover",style:{filter:m?"":"brightness(50%) contrast(120%)"}}),(0,e.jsxs)("div",{className:(0,c.cn)("three-d-carousel__image-content tablet:p-[24px] desktop:p-[32px] text-info-primary absolute left-0 top-0 flex size-full flex-col justify-end gap-1 p-[16px]",{"aiui-dark":t.theme==="dark","opacity-0":!m}),children:[(0,e.jsx)(l.Heading,{as:"h2",size:2,html:t.title}),(0,e.jsx)(l.Text,{as:"p",size:4,html:t.description,className:"three-d-carousel__image-description lg-desktop:text-[18px] desktop:text-[16px] text-[14px]"}),t.buttonText&&(0,e.jsx)("a",{href:(0,c.getLocalizedPath)(t.buttonLink||"",b),className:"three-d-carousel__image-link ",children:(0,e.jsx)(l.Button,{size:"base",variant:"secondary",className:"three-d-carousel__image-button desktop:mt-6 mt-4",children:t.buttonText})})]})]})},d))}),(0,e.jsxs)("div",{className:"three-d-carousel__nav-controls laptop:px-[64px] desktop:px-[140px] lg-desktop:px-[200px] absolute left-1/2 top-1/2 z-20 flex w-full -translate-x-1/2 -translate-y-1/2 justify-between",children:[(0,e.jsx)("button",{className:"three-d-carousel__nav-button three-d-carousel__nav-button--prev",onClick:()=>n.current?.slidePrev(),"aria-label":"Previous slide",children:(0,e.jsx)(I,{})}),(0,e.jsx)("button",{className:"three-d-carousel__nav-button three-d-carousel__nav-button--next",onClick:()=>n.current?.slideNext(),"aria-label":"Next slide",children:(0,e.jsx)(O,{})})]})]}),(0,e.jsx)("div",{className:"three-d-carousel__mobile laptop:hidden mt-[24px] block w-full overflow-visible",children:(0,e.jsx)(p.Swiper,{loop:!0,loopAdditionalSlides:1,slidesPerView:"auto",spaceBetween:12,grabCursor:!0,className:"three-d-carousel__swiper-mobile relative w-full !overflow-visible",children:w.map((t,d)=>(0,e.jsxs)(p.SwiperSlide,{className:"three-d-carousel__slide-mobile relative !h-[360px] !w-[296px] cursor-grab overflow-hidden",children:[(0,e.jsx)(l.Picture,{source:t.mobImageUrl?.url||t.imageUrl?.url||"",alt:t.mobImageUrl?.alt||t.title,className:"three-d-carousel__image-mobile rounded-box mx-auto h-full overflow-hidden",imgClassName:"h-full object-cover"}),(0,e.jsxs)("div",{className:(0,c.cn)("three-d-carousel__image-mobile-content tablet:p-[24px] desktop:p-[32px] text-info-primary absolute left-0 top-0 flex size-full flex-col justify-end gap-1 p-[16px]",{"aiui-dark":t.theme==="dark"}),children:[(0,e.jsx)(l.Heading,{as:"h2",size:2,html:t.title}),(0,e.jsx)(l.Text,{as:"p",size:4,html:t.description,className:"three-d-carousel__image-mobile-description text-[14px]"}),t.buttonText&&(0,e.jsx)("a",{href:(0,c.getLocalizedPath)(t.buttonLink||"",b),className:"three-d-carousel__image-mobile-link ",children:(0,e.jsx)(l.Button,{size:"base",variant:"secondary",className:"three-d-carousel__image-mobile-button mt-3",children:t.buttonText})})]})]},d))})})]})});k.displayName="ThreeDCarousel";var V=(0,N.withLayout)(k,{style:"overflow: hidden;"});
|
|
2
2
|
//# sourceMappingURL=ThreeDCarousel.js.map
|