@anker-in/headless-ui 1.1.68 → 1.1.69
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/AccordionCards/index.d.ts +37 -2
- package/dist/cjs/biz-components/AccordionCards/index.js +1 -1
- package/dist/cjs/biz-components/AccordionCards/index.js.map +3 -3
- package/dist/cjs/biz-components/AnchorNavigation/index.js +1 -1
- package/dist/cjs/biz-components/AnchorNavigation/index.js.map +3 -3
- package/dist/cjs/biz-components/AplusDesc/index.d.ts +2 -3
- package/dist/cjs/biz-components/AplusDesc/index.js +1 -1
- package/dist/cjs/biz-components/AplusDesc/index.js.map +3 -3
- package/dist/cjs/biz-components/Category/index.d.ts +1 -2
- package/dist/cjs/biz-components/Category/index.js +1 -1
- package/dist/cjs/biz-components/Category/index.js.map +3 -3
- package/dist/cjs/biz-components/CreativeModule/index.d.ts +2 -3
- package/dist/cjs/biz-components/CreativeModule/index.js +1 -1
- package/dist/cjs/biz-components/CreativeModule/index.js.map +3 -3
- package/dist/cjs/biz-components/DownLoad/index.d.ts +2 -3
- package/dist/cjs/biz-components/DownLoad/index.js +1 -1
- package/dist/cjs/biz-components/DownLoad/index.js.map +3 -3
- package/dist/cjs/biz-components/Evaluate/index.d.ts +1 -2
- package/dist/cjs/biz-components/Evaluate/index.js +1 -1
- package/dist/cjs/biz-components/Evaluate/index.js.map +3 -3
- package/dist/cjs/biz-components/EventSchedule/index.js +1 -1
- package/dist/cjs/biz-components/EventSchedule/index.js.map +3 -3
- package/dist/cjs/biz-components/Features/index.d.ts +2 -4
- package/dist/cjs/biz-components/Features/index.js +1 -1
- package/dist/cjs/biz-components/Features/index.js.map +3 -3
- package/dist/cjs/biz-components/FootCharger/index.d.ts +2 -3
- package/dist/cjs/biz-components/FootCharger/index.js +1 -1
- package/dist/cjs/biz-components/FootCharger/index.js.map +3 -3
- package/dist/cjs/biz-components/FooterNavigation/index.js +1 -1
- package/dist/cjs/biz-components/FooterNavigation/index.js.map +3 -3
- package/dist/cjs/biz-components/FooterNavigation/types.d.ts +2 -1
- package/dist/cjs/biz-components/FooterNavigation/types.js +1 -1
- package/dist/cjs/biz-components/FooterNavigation/types.js.map +2 -2
- package/dist/cjs/biz-components/GiftBox/index.d.ts +5 -5
- 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/Graphic/index.d.ts +1 -2
- 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/GraphicAttractionBlock/index.d.ts +3 -3
- package/dist/cjs/biz-components/GraphicAttractionBlock/index.js +1 -1
- package/dist/cjs/biz-components/GraphicAttractionBlock/index.js.map +3 -3
- package/dist/cjs/biz-components/GraphicMore/index.d.ts +2 -3
- package/dist/cjs/biz-components/GraphicMore/index.js +1 -1
- package/dist/cjs/biz-components/GraphicMore/index.js.map +3 -3
- package/dist/cjs/biz-components/GraphicOverlay/GraphicOverlay.d.ts +9 -2
- package/dist/cjs/biz-components/GraphicOverlay/GraphicOverlay.js +1 -1
- package/dist/cjs/biz-components/GraphicOverlay/GraphicOverlay.js.map +3 -3
- package/dist/cjs/biz-components/GraphicOverlay/types.d.ts +1 -2
- package/dist/cjs/biz-components/GraphicOverlay/types.js +1 -1
- package/dist/cjs/biz-components/GraphicOverlay/types.js.map +1 -1
- package/dist/cjs/biz-components/HeaderNavigation/index.js +1 -1
- package/dist/cjs/biz-components/HeaderNavigation/index.js.map +3 -3
- package/dist/cjs/biz-components/HeaderNavigation/types.d.ts +2 -1
- package/dist/cjs/biz-components/HeaderNavigation/types.js +1 -1
- package/dist/cjs/biz-components/HeaderNavigation/types.js.map +2 -2
- package/dist/cjs/biz-components/HeroBanner/HeroBanner.js +1 -1
- package/dist/cjs/biz-components/HeroBanner/HeroBanner.js.map +3 -3
- package/dist/cjs/biz-components/HeroBanner/types.d.ts +1 -3
- package/dist/cjs/biz-components/HeroBanner/types.js +1 -1
- package/dist/cjs/biz-components/HeroBanner/types.js.map +1 -1
- package/dist/cjs/biz-components/InlineVideo/index.d.ts +2 -3
- package/dist/cjs/biz-components/InlineVideo/index.js +1 -1
- package/dist/cjs/biz-components/InlineVideo/index.js.map +3 -3
- package/dist/cjs/biz-components/Ksp/index.d.ts +1 -1
- package/dist/cjs/biz-components/Ksp/index.js +1 -1
- package/dist/cjs/biz-components/Ksp/index.js.map +3 -3
- package/dist/cjs/biz-components/MarqueeReview/index.d.ts +4 -5
- package/dist/cjs/biz-components/MarqueeReview/index.js +1 -1
- package/dist/cjs/biz-components/MarqueeReview/index.js.map +3 -3
- package/dist/cjs/biz-components/MediaPlayerBase/index.js +1 -1
- package/dist/cjs/biz-components/MediaPlayerBase/index.js.map +3 -3
- package/dist/cjs/biz-components/MediaPlayerBase/types.d.ts +1 -1
- package/dist/cjs/biz-components/MediaPlayerBase/types.js +1 -1
- package/dist/cjs/biz-components/MediaPlayerBase/types.js.map +1 -1
- package/dist/cjs/biz-components/MediaPlayerMulti/index.js +1 -1
- package/dist/cjs/biz-components/MediaPlayerMulti/index.js.map +3 -3
- package/dist/cjs/biz-components/MediaPlayerMulti/types.d.ts +1 -1
- package/dist/cjs/biz-components/MediaPlayerMulti/types.js +1 -1
- package/dist/cjs/biz-components/MediaPlayerMulti/types.js.map +1 -1
- package/dist/cjs/biz-components/MediaPlayerSticky/index.js +1 -1
- package/dist/cjs/biz-components/MediaPlayerSticky/index.js.map +3 -3
- package/dist/cjs/biz-components/MediaPlayerSticky/types.d.ts +2 -2
- package/dist/cjs/biz-components/MediaPlayerSticky/types.js +1 -1
- package/dist/cjs/biz-components/MediaPlayerSticky/types.js.map +1 -1
- package/dist/cjs/biz-components/MemberEquity/index.js +2 -2
- package/dist/cjs/biz-components/MemberEquity/index.js.map +3 -3
- package/dist/cjs/biz-components/MemberEquity/types.d.ts +1 -1
- package/dist/cjs/biz-components/MemberEquity/types.js +1 -1
- package/dist/cjs/biz-components/MemberEquity/types.js.map +1 -1
- package/dist/cjs/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.d.ts +16 -2
- package/dist/cjs/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js +1 -1
- package/dist/cjs/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js.map +3 -3
- package/dist/cjs/biz-components/MultiLayoutGraphicBlock/types.d.ts +1 -2
- package/dist/cjs/biz-components/MultiLayoutGraphicBlock/types.js +1 -1
- package/dist/cjs/biz-components/MultiLayoutGraphicBlock/types.js.map +1 -1
- package/dist/cjs/biz-components/NavigationSearch/index.js +2 -2
- package/dist/cjs/biz-components/NavigationSearch/index.js.map +3 -3
- package/dist/cjs/biz-components/NavigationSearch/types.d.ts +2 -1
- package/dist/cjs/biz-components/NavigationSearch/types.js +1 -1
- package/dist/cjs/biz-components/NavigationSearch/types.js.map +2 -2
- package/dist/cjs/biz-components/ProductCompare/index.d.ts +1 -3
- package/dist/cjs/biz-components/ProductCompare/index.js +1 -1
- package/dist/cjs/biz-components/ProductCompare/index.js.map +3 -3
- package/dist/cjs/biz-components/ProductNav/ProductNav.js +1 -1
- package/dist/cjs/biz-components/ProductNav/ProductNav.js.map +3 -3
- package/dist/cjs/biz-components/PromotionalBar/index.js +1 -1
- package/dist/cjs/biz-components/PromotionalBar/index.js.map +3 -3
- package/dist/cjs/biz-components/SearchPage/index.d.ts +1 -1
- package/dist/cjs/biz-components/SearchPage/index.js +1 -1
- package/dist/cjs/biz-components/SearchPage/index.js.map +3 -3
- package/dist/cjs/biz-components/SearchPage/types.d.ts +1 -1
- package/dist/cjs/biz-components/SearchPage/types.js +1 -1
- package/dist/cjs/biz-components/SearchPage/types.js.map +1 -1
- package/dist/cjs/biz-components/SelectStore/index.d.ts +5 -5
- package/dist/cjs/biz-components/SelectStore/index.js +1 -1
- package/dist/cjs/biz-components/SelectStore/index.js.map +3 -3
- package/dist/cjs/biz-components/ShelfDisplay/index.js +1 -1
- package/dist/cjs/biz-components/ShelfDisplay/index.js.map +3 -3
- package/dist/cjs/biz-components/ShelfDisplay/shelfDisplay.d.ts +1 -2
- package/dist/cjs/biz-components/ShelfDisplay/shelfDisplay.js +1 -1
- package/dist/cjs/biz-components/ShelfDisplay/shelfDisplay.js.map +1 -1
- package/dist/cjs/biz-components/Slogan/index.js +1 -1
- package/dist/cjs/biz-components/Slogan/index.js.map +3 -3
- package/dist/cjs/biz-components/Slogan/types.d.ts +2 -5
- package/dist/cjs/biz-components/Slogan/types.js +1 -1
- package/dist/cjs/biz-components/Slogan/types.js.map +1 -1
- package/dist/cjs/biz-components/Spacer/index.js +1 -1
- package/dist/cjs/biz-components/Spacer/index.js.map +3 -3
- package/dist/cjs/biz-components/Spacer/types.d.ts +1 -5
- package/dist/cjs/biz-components/Spacer/types.js +1 -1
- package/dist/cjs/biz-components/Spacer/types.js.map +1 -1
- package/dist/cjs/biz-components/Specs/index.d.ts +7 -1
- package/dist/cjs/biz-components/Specs/index.js +1 -1
- package/dist/cjs/biz-components/Specs/index.js.map +3 -3
- package/dist/cjs/biz-components/Subscribe/index.d.ts +11 -10
- package/dist/cjs/biz-components/Subscribe/index.js +2 -2
- package/dist/cjs/biz-components/Subscribe/index.js.map +3 -3
- package/dist/cjs/biz-components/SwiperBox/index.js +1 -1
- package/dist/cjs/biz-components/SwiperBox/index.js.map +3 -3
- package/dist/cjs/biz-components/SwiperBox/types.d.ts +1 -2
- package/dist/cjs/biz-components/SwiperBox/types.js +1 -1
- package/dist/cjs/biz-components/SwiperBox/types.js.map +1 -1
- package/dist/cjs/biz-components/TabsGroup/index.js +1 -1
- package/dist/cjs/biz-components/TabsGroup/index.js.map +3 -3
- package/dist/cjs/biz-components/TabsGroup/types.d.ts +2 -3
- package/dist/cjs/biz-components/TabsGroup/types.js +1 -1
- package/dist/cjs/biz-components/TabsGroup/types.js.map +1 -1
- package/dist/cjs/biz-components/Title/index.d.ts +3 -1
- package/dist/cjs/biz-components/Title/index.js +1 -1
- package/dist/cjs/biz-components/Title/index.js.map +3 -3
- package/dist/cjs/biz-components/Title/types.d.ts +3 -1
- package/dist/cjs/biz-components/Title/types.js +1 -1
- package/dist/cjs/biz-components/Title/types.js.map +1 -1
- package/dist/cjs/biz-components/VideoModal/index.d.ts +2 -2
- package/dist/cjs/biz-components/VideoModal/index.js +1 -1
- package/dist/cjs/biz-components/VideoModal/index.js.map +3 -3
- package/dist/esm/biz-components/AccordionCards/index.d.ts +37 -2
- package/dist/esm/biz-components/AccordionCards/index.js +1 -1
- package/dist/esm/biz-components/AccordionCards/index.js.map +3 -3
- package/dist/esm/biz-components/AnchorNavigation/index.js +1 -1
- package/dist/esm/biz-components/AnchorNavigation/index.js.map +3 -3
- package/dist/esm/biz-components/AplusDesc/index.d.ts +2 -3
- package/dist/esm/biz-components/AplusDesc/index.js +1 -1
- package/dist/esm/biz-components/AplusDesc/index.js.map +3 -3
- package/dist/esm/biz-components/Category/index.d.ts +1 -2
- package/dist/esm/biz-components/Category/index.js +1 -1
- package/dist/esm/biz-components/Category/index.js.map +3 -3
- package/dist/esm/biz-components/CreativeModule/index.d.ts +2 -3
- package/dist/esm/biz-components/CreativeModule/index.js +1 -1
- package/dist/esm/biz-components/CreativeModule/index.js.map +3 -3
- package/dist/esm/biz-components/DownLoad/index.d.ts +2 -3
- package/dist/esm/biz-components/DownLoad/index.js +1 -1
- package/dist/esm/biz-components/DownLoad/index.js.map +3 -3
- package/dist/esm/biz-components/Evaluate/index.d.ts +1 -2
- package/dist/esm/biz-components/Evaluate/index.js +1 -1
- package/dist/esm/biz-components/Evaluate/index.js.map +3 -3
- package/dist/esm/biz-components/EventSchedule/index.js +1 -1
- package/dist/esm/biz-components/EventSchedule/index.js.map +3 -3
- package/dist/esm/biz-components/Features/index.d.ts +2 -4
- package/dist/esm/biz-components/Features/index.js +1 -1
- package/dist/esm/biz-components/Features/index.js.map +3 -3
- package/dist/esm/biz-components/FootCharger/index.d.ts +2 -3
- package/dist/esm/biz-components/FootCharger/index.js +1 -1
- package/dist/esm/biz-components/FootCharger/index.js.map +3 -3
- package/dist/esm/biz-components/FooterNavigation/index.js +1 -1
- package/dist/esm/biz-components/FooterNavigation/index.js.map +3 -3
- package/dist/esm/biz-components/FooterNavigation/types.d.ts +2 -1
- package/dist/esm/biz-components/FooterNavigation/types.js +1 -1
- package/dist/esm/biz-components/FooterNavigation/types.js.map +2 -2
- package/dist/esm/biz-components/GiftBox/index.d.ts +5 -5
- 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/Graphic/index.d.ts +1 -2
- 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/GraphicAttractionBlock/index.d.ts +3 -3
- package/dist/esm/biz-components/GraphicAttractionBlock/index.js +1 -1
- package/dist/esm/biz-components/GraphicAttractionBlock/index.js.map +3 -3
- package/dist/esm/biz-components/GraphicMore/index.d.ts +2 -3
- package/dist/esm/biz-components/GraphicMore/index.js +1 -1
- package/dist/esm/biz-components/GraphicMore/index.js.map +3 -3
- package/dist/esm/biz-components/GraphicOverlay/GraphicOverlay.d.ts +9 -2
- package/dist/esm/biz-components/GraphicOverlay/GraphicOverlay.js +1 -1
- package/dist/esm/biz-components/GraphicOverlay/GraphicOverlay.js.map +3 -3
- package/dist/esm/biz-components/GraphicOverlay/types.d.ts +1 -2
- package/dist/esm/biz-components/HeaderNavigation/index.js +1 -1
- package/dist/esm/biz-components/HeaderNavigation/index.js.map +3 -3
- package/dist/esm/biz-components/HeaderNavigation/types.d.ts +2 -1
- package/dist/esm/biz-components/HeaderNavigation/types.js +1 -1
- package/dist/esm/biz-components/HeaderNavigation/types.js.map +2 -2
- package/dist/esm/biz-components/HeroBanner/HeroBanner.js +1 -1
- package/dist/esm/biz-components/HeroBanner/HeroBanner.js.map +3 -3
- package/dist/esm/biz-components/HeroBanner/types.d.ts +1 -3
- package/dist/esm/biz-components/InlineVideo/index.d.ts +2 -3
- package/dist/esm/biz-components/InlineVideo/index.js +1 -1
- package/dist/esm/biz-components/InlineVideo/index.js.map +3 -3
- package/dist/esm/biz-components/Ksp/index.d.ts +1 -1
- package/dist/esm/biz-components/Ksp/index.js +1 -1
- package/dist/esm/biz-components/Ksp/index.js.map +3 -3
- package/dist/esm/biz-components/MarqueeReview/index.d.ts +4 -5
- package/dist/esm/biz-components/MarqueeReview/index.js +1 -1
- package/dist/esm/biz-components/MarqueeReview/index.js.map +3 -3
- package/dist/esm/biz-components/MediaPlayerBase/index.js +1 -1
- package/dist/esm/biz-components/MediaPlayerBase/index.js.map +3 -3
- package/dist/esm/biz-components/MediaPlayerBase/types.d.ts +1 -1
- package/dist/esm/biz-components/MediaPlayerMulti/index.js +1 -1
- package/dist/esm/biz-components/MediaPlayerMulti/index.js.map +3 -3
- package/dist/esm/biz-components/MediaPlayerMulti/types.d.ts +1 -1
- package/dist/esm/biz-components/MediaPlayerSticky/index.js +1 -1
- package/dist/esm/biz-components/MediaPlayerSticky/index.js.map +3 -3
- package/dist/esm/biz-components/MediaPlayerSticky/types.d.ts +2 -2
- package/dist/esm/biz-components/MemberEquity/index.js +2 -2
- package/dist/esm/biz-components/MemberEquity/index.js.map +3 -3
- package/dist/esm/biz-components/MemberEquity/types.d.ts +1 -1
- package/dist/esm/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.d.ts +16 -2
- package/dist/esm/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js +1 -1
- package/dist/esm/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js.map +3 -3
- package/dist/esm/biz-components/MultiLayoutGraphicBlock/types.d.ts +1 -2
- package/dist/esm/biz-components/NavigationSearch/index.js +2 -2
- package/dist/esm/biz-components/NavigationSearch/index.js.map +3 -3
- package/dist/esm/biz-components/NavigationSearch/types.d.ts +2 -1
- package/dist/esm/biz-components/NavigationSearch/types.js +1 -1
- package/dist/esm/biz-components/NavigationSearch/types.js.map +2 -2
- package/dist/esm/biz-components/ProductCompare/index.d.ts +1 -3
- package/dist/esm/biz-components/ProductCompare/index.js +1 -1
- package/dist/esm/biz-components/ProductCompare/index.js.map +3 -3
- package/dist/esm/biz-components/ProductNav/ProductNav.js +1 -1
- package/dist/esm/biz-components/ProductNav/ProductNav.js.map +3 -3
- package/dist/esm/biz-components/PromotionalBar/index.js +1 -1
- package/dist/esm/biz-components/PromotionalBar/index.js.map +3 -3
- package/dist/esm/biz-components/SearchPage/index.d.ts +1 -1
- package/dist/esm/biz-components/SearchPage/index.js +1 -1
- package/dist/esm/biz-components/SearchPage/index.js.map +3 -3
- package/dist/esm/biz-components/SearchPage/types.d.ts +1 -1
- package/dist/esm/biz-components/SearchPage/types.js +1 -1
- package/dist/esm/biz-components/SearchPage/types.js.map +1 -1
- package/dist/esm/biz-components/SelectStore/index.d.ts +5 -5
- package/dist/esm/biz-components/SelectStore/index.js +1 -1
- package/dist/esm/biz-components/SelectStore/index.js.map +3 -3
- package/dist/esm/biz-components/ShelfDisplay/index.js +1 -1
- package/dist/esm/biz-components/ShelfDisplay/index.js.map +3 -3
- package/dist/esm/biz-components/ShelfDisplay/shelfDisplay.d.ts +1 -2
- package/dist/esm/biz-components/ShelfDisplay/shelfDisplay.js +1 -1
- package/dist/esm/biz-components/ShelfDisplay/shelfDisplay.js.map +1 -1
- package/dist/esm/biz-components/Slogan/index.js +1 -1
- package/dist/esm/biz-components/Slogan/index.js.map +3 -3
- package/dist/esm/biz-components/Slogan/types.d.ts +2 -5
- package/dist/esm/biz-components/Spacer/index.js +1 -1
- package/dist/esm/biz-components/Spacer/index.js.map +3 -3
- package/dist/esm/biz-components/Spacer/types.d.ts +1 -5
- package/dist/esm/biz-components/Specs/index.d.ts +7 -1
- package/dist/esm/biz-components/Specs/index.js +1 -1
- package/dist/esm/biz-components/Specs/index.js.map +3 -3
- package/dist/esm/biz-components/Subscribe/index.d.ts +11 -10
- package/dist/esm/biz-components/Subscribe/index.js +2 -2
- package/dist/esm/biz-components/Subscribe/index.js.map +3 -3
- package/dist/esm/biz-components/SwiperBox/index.js +1 -1
- package/dist/esm/biz-components/SwiperBox/index.js.map +3 -3
- package/dist/esm/biz-components/SwiperBox/types.d.ts +1 -2
- package/dist/esm/biz-components/SwiperBox/types.js.map +1 -1
- package/dist/esm/biz-components/TabsGroup/index.js +1 -1
- package/dist/esm/biz-components/TabsGroup/index.js.map +3 -3
- package/dist/esm/biz-components/TabsGroup/types.d.ts +2 -3
- package/dist/esm/biz-components/Title/index.d.ts +3 -1
- package/dist/esm/biz-components/Title/index.js +1 -1
- package/dist/esm/biz-components/Title/index.js.map +3 -3
- package/dist/esm/biz-components/Title/types.d.ts +3 -1
- package/dist/esm/biz-components/VideoModal/index.d.ts +2 -2
- package/dist/esm/biz-components/VideoModal/index.js +1 -1
- package/dist/esm/biz-components/VideoModal/index.js.map +3 -3
- package/package.json +1 -1
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/SearchPage/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import {\n Heading,\n Tabs,\n TabsList,\n TabsTrigger,\n TabsContent,\n Text,\n Picture,\n Link,\n Button,\n DropdownMenu,\n DropdownMenuTrigger,\n DropdownMenuContent,\n DropdownMenuItem,\n LoadingDots,\n} from '../../components/index.js'\nimport { DownArrow } from '../HeaderNavigation/icons/index.js'\nimport { useMemo, useRef, useState } from 'react'\nimport { cn, atobID, highlightSearchWord } from '../../helpers/utils.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { formatVariantPrice } from '../ShelfDisplay/shelfDisplay.js'\nimport type {\n SearchPageProps,\n SortKey,\n SearchProductItemProps,\n SearchBlogItemProps,\n SearchPageItemProps,\n SearchRecommendProductsProps,\n} from './types'\nimport { SearchPageTabType } from './types.js'\nimport { getLocalizedPath } from '../../helpers/utils.js'\nimport { replaceTemplate } from '../Listing/utils/textFormat.js'\n\n/**\n * \u641C\u7D22\u5546\u54C1\n */\nconst SearchProductItem = ({\n product,\n onSecondaryButton,\n onPrimaryButton,\n searchValue,\n variantData,\n shopNowLoadingProductId,\n}: SearchProductItemProps) => {\n const variant = useMemo(() => variantData || product?.variants?.[0], [product, variantData])\n const { locale = 'us', copyWriting } = useAiuiContext()\n\n // \u5224\u65AD\u5F53\u524D\u4EA7\u54C1\u662F\u5426\u5728\u52A0\u8F7D\u4E2D\n const isCurrentProductLoading = shopNowLoadingProductId === product?.id\n\n const listingLink = useMemo(() => {\n return getLocalizedPath(\n `/products/${product?.handle}?variant=${atobID(variant?.id as string)}?ref=search_result_${searchValue?.toLowerCase()}`,\n locale\n )\n }, [product?.handle, variant?.id, searchValue, locale])\n\n const coupon = variant?.coupons?.[0]\n\n const { price, basePrice } = formatVariantPrice({\n locale: locale,\n amount: coupon ? coupon.variant_price4wscode : (variant?.price?.amount ?? variant?.price),\n baseAmount: coupon ? (variant?.price?.amount ?? variant?.price) : 0,\n currencyCode: product?.price?.currencyCode || 'USD',\n })\n\n const tags = useMemo(() => {\n return product?.tags\n ?.filter?.((item: any) => item?.startsWith?.('CLtag'))\n ?.map?.((item: any) => item?.replace?.('CLtag:', ''))\n ?.slice?.(0, 2)\n }, [product?.tags])\n\n return (\n <div className=\"rounded-image-text ipc_search_product_item lg-desktop:h-[480px] desktop:h-[384px] laptop:h-[360px] relative h-auto overflow-hidden\">\n {product?.type === 'advertising' && product?.advertisingLink ? (\n <Link href={getLocalizedPath(product?.advertisingLink, locale)} className=\"h-full\">\n <Picture\n source={`${product?.advertisingBgImg}`}\n className=\"size-full\"\n imgClassName=\"size-full object-cover\"\n />\n <div className=\"desktop:p-6 absolute inset-0 z-[2] p-4 [&_img]:hover:scale-110 [&_img]:hover:transition-all [&_img]:hover:duration-500\">\n <Text\n html={product?.advertisingTitle}\n className={cn('desktop:text-base text-sm font-bold leading-[1.2]', {\n 'text-white': product?.advertisingTheme === 'light',\n 'text-info-primary': product?.advertisingTheme === 'dark',\n })}\n />\n {product?.advertisingSubtitle && (\n <Heading\n size={3}\n html={product?.advertisingSubtitle}\n className={cn('laptop:line-clamp-3 mt-2 line-clamp-4 font-bold', {\n 'text-white': product?.advertisingTheme === 'light',\n 'text-info-primary': product?.advertisingTheme === 'dark',\n })}\n />\n )}\n </div>\n </Link>\n ) : (\n <a\n href={listingLink}\n className=\"tablet:hover:bg-info-white desktop:p-6 desktop:pt-4 tablet:p-4 flex h-full flex-col bg-[#EAEAEC] px-2 py-4 no-underline duration-300\"\n >\n <div className=\"ipc_search_product_item_image\">\n <Picture\n className=\"lg-desktop:size-[196px] mx-auto size-[138px]\"\n source={`${variant?.image?.url || product?.images?.[0]?.url}}`}\n alt={product?.title}\n imgClassName=\"object-cover size-full\"\n />\n </div>\n <div className=\"ipc_search_product_item_content desktop:mt-2 lg-desktop:mt-3 desktop:gap-6 mt-1 flex flex-1 flex-col justify-between gap-4\">\n <div className=\"flex-1\">\n <div className=\"lg-desktop:h-[28px] mb-2 flex h-[24px] gap-2\">\n {tags?.map((tag: string, index: number) => (\n <Text\n key={index}\n as=\"p\"\n html={tag}\n className=\"text-brand-0 lg-desktop:px-2 lg-desktop:!leading-[28px] h-full rounded-full border-[1.6px] border-[#00BEFA] px-[6px] text-sm font-bold !leading-[22px]\"\n />\n ))}\n </div>\n <Text\n className=\"lg-desktop:text-2xl tablet:line-clamp-2 line-clamp-3 text-xl font-bold !leading-[1.2]\"\n weight=\"bold\"\n html={highlightSearchWord(product?.title || '', searchValue || '')}\n />\n <Text\n as=\"p\"\n className=\"lg-desktop:text-[18px] tablet:line-clamp-1 mt-1 line-clamp-2 text-sm font-bold\"\n html={highlightSearchWord(product?.description, searchValue || '')}\n />\n </div>\n <div>\n <div className=\"mb-2 flex items-center\">\n {!variant?.availableForSale ? (\n <div className=\"text-info-primary tablet:text-xl lg-desktop:text-2xl text-[18px] font-bold\">\n {copyWriting?.soldOutText || 'Sold Out'}\n </div>\n ) : (\n <>\n <div className=\"final-price text-info-primary tablet:text-xl lg-desktop:text-2xl text-[18px] font-bold\">\n {variant?.availableForSale ? price || '' : ''}\n </div>\n <div className=\"origin-price tablet:text-xl lg-desktop:text-2xl text-info-secondary ml-1 text-[18px] font-bold line-through\">\n {variant?.availableForSale ? basePrice || '' : ''}\n </div>\n </>\n )}\n </div>\n <div\n className={cn(\n 'ipc_search_product_item_button_group',\n 'lg-desktop:gap-3 laptop:flex-row flex flex-col items-center gap-2'\n )}\n >\n {copyWriting?.learnMoreText && (\n <Button\n variant=\"secondary\"\n className=\"laptop:w-auto w-full\"\n size=\"lg\"\n onClick={e => {\n e.preventDefault()\n e.stopPropagation()\n onSecondaryButton?.()\n }}\n >\n {copyWriting?.learnMoreText}\n </Button>\n )}\n {copyWriting?.shopNowText && (\n <Button\n variant=\"primary\"\n className=\"laptop:w-auto w-full\"\n size=\"lg\"\n disabled={!variant?.availableForSale}\n loading={isCurrentProductLoading}\n onClick={e => {\n e.preventDefault()\n e.stopPropagation()\n onPrimaryButton?.()\n }}\n >\n {copyWriting?.shopNowText}\n </Button>\n )}\n </div>\n </div>\n </div>\n </a>\n )}\n </div>\n )\n}\n\n/**\n * \u641C\u7D22\u6587\u7AE0\n */\nconst SearchBlogItem = ({ blog, searchValue }: SearchBlogItemProps) => {\n const { copyWriting, locale = 'us' } = useAiuiContext()\n\n const articleLink = useMemo(\n () => getLocalizedPath(`/blogs/${blog?.blog?.handle}/${blog?.handle.replace('storefront-', '')}`, locale),\n [blog, locale]\n )\n\n return (\n <div className=\"ipc_search_blog_item border-b border-[#E4E5E6] py-6\">\n <div className=\"ipc_search_blog_item_content laptop:flex-row-reverse laptop:gap-8 desktop:gap-16 flex flex-col gap-4\">\n <div className=\"rounded-image-text laptop:flex-[440] desktop:flex-[540] desktop:h-[280px] h-[240px] overflow-hidden\">\n <Picture\n source={blog?.image?.url}\n className=\"size-full\"\n imgClassName=\"size-full object-cover\"\n alt={blog?.title}\n />\n </div>\n <div className=\"laptop:flex-[424] desktop:flex-[704] lg-desktop:flex-[1056] flex flex-col justify-center\">\n <Heading size={3} html={highlightSearchWord(blog?.title, searchValue)} />\n <Text\n html={highlightSearchWord(blog?.content, searchValue)}\n className=\"lg-desktop:text-[18px] desktop:text-[16px] mt-1 line-clamp-2 text-sm font-bold leading-[1.4]\"\n />\n <div className=\"desktop:mt-6 mt-4\">\n <Button as=\"a\" href={articleLink} variant=\"secondary\" size=\"lg\">\n {copyWriting?.learnMoreText || 'Learn More'}\n </Button>\n </div>\n </div>\n </div>\n </div>\n )\n}\n\n/**\n * \u641C\u7D22\u9875\u9762\n */\nconst SearchPageItem = ({ searchValue, page }: SearchPageItemProps) => {\n const { copyWriting, locale = 'us' } = useAiuiContext()\n const pageLink = useMemo(() => getLocalizedPath(`/${page?.handle}`, locale), [page, locale])\n return (\n <div className=\"ipc_search_page_items border-b border-[#E4E5E6] py-6\">\n <Heading size={3} html={highlightSearchWord(page?.name, searchValue)} />\n <Text\n as=\"p\"\n html={highlightSearchWord(page?.bodySummary || '', searchValue)}\n className=\"lg-desktop:text-[18px] desktop:text-[16px] mt-1 text-sm font-bold leading-[1.4]\"\n />\n <Button as=\"a\" href={pageLink} variant=\"secondary\" size=\"lg\" className=\"desktop:mt-6 mt-4\">\n {copyWriting?.learnMoreText || 'Learn More'}\n </Button>\n </div>\n )\n}\n\n/**\n * \u641C\u7D22\u7ED3\u679C\u4E3A\u7A7A\n */\nconst SearchPageNoResult = ({ url, label }: { url: string; label: string }) => {\n return (\n <div className=\"flex flex-col items-center justify-center gap-4\">\n <Picture source={url} className=\"h-[180px] w-[240px]\" imgClassName=\"object-cover\" />\n <Text html={label} className=\"desktop:text-[18px] text-sm font-bold leading-[1.4]\" />\n </div>\n )\n}\n\n/**\n * \u641C\u7D22\u63A8\u8350\u5546\u54C1\n */\nconst SearchRecommendProducts = ({\n products,\n title,\n buildProps,\n onSecondaryButton,\n onPrimaryButton,\n}: SearchRecommendProductsProps) => {\n const { products: buildProducts } = buildProps || {}\n console.log(buildProducts, 'buildProducts')\n return (\n <div className=\"ipc_search_recommend_product tablet:pt-[80px] laptop:pt-[96px] desktop:pt-[112px] lg-desktop:pt-[128px] pt-[64px]\">\n <Heading size={4} weight=\"bold\" html={title} />\n <div className=\" tablet:grid-cols-3 desktop:grid-cols-4 desktop:gap-4 mt-6 grid grid-cols-2 gap-x-3 gap-y-4\">\n {products?.map((product: any, index: number) => {\n const buildProduct = buildProducts?.find((buildProduct: any) => buildProduct.handle === product.handle)\n if (!buildProduct) return null\n const variant = buildProduct?.variants?.find((variant: any) => variant.sku === product.sku)\n return (\n <SearchProductItem\n product={buildProduct}\n variantData={variant}\n key={product.sku + index}\n onSecondaryButton={() => onSecondaryButton?.()}\n onPrimaryButton={() => onPrimaryButton?.()}\n />\n )\n })}\n </div>\n </div>\n )\n}\n\n/**\n * \u641C\u7D22\u9875\u9762\n */\nconst SearchPage = ({\n searchResult,\n searchValue,\n data,\n onSecondaryButton,\n onPrimaryButton,\n // loadMore,\n onChangeSort,\n loading,\n shopNowLoadingProductId,\n searchResultCount,\n onChangeTab,\n buildProps,\n}: SearchPageProps) => {\n const [currentTab, setCurrentTab] = useState<any>(data?.tabs?.[0])\n const isInsertAdvertising = useRef(false)\n const [isOpenSort, setIsOpenSort] = useState(false)\n const [currentSortKey, setCurrentSortKey] = useState<any>({\n [SearchPageTabType.PRODUCTS]: data?.tabs?.find((tab: any) => tab.tabType === SearchPageTabType.PRODUCTS)\n ?.sortKeys?.[0],\n [SearchPageTabType.BLOGS]: data?.tabs?.find((tab: any) => tab.tabType === SearchPageTabType.BLOGS)?.sortKeys?.[0],\n [SearchPageTabType.PAGES]: data?.tabs?.find((tab: any) => tab.tabType === SearchPageTabType.PAGES)?.sortKeys?.[0],\n })\n\n const searchProductsResult = useMemo(() => {\n return searchResult?.products || []\n }, [searchResult])\n\n const searchBlogsResult = useMemo(() => {\n return searchResult?.blogs || []\n }, [searchResult])\n\n const searchPagesResult = useMemo(() => {\n return searchResult?.pages || []\n }, [searchResult])\n\n const totalCount = useMemo(() => {\n return Object.values(searchResultCount || {}).reduce((acc, curr) => acc + curr, 0)\n }, [searchResultCount])\n\n const searchProductsResultWithAdvertising = useMemo(() => {\n const advertisingData = {\n advertisingBgImg: `${currentTab?.advertisingBgImg?.url}, ${currentTab?.advertisingMobBgImg?.url} 768`,\n advertisingTitle: currentTab?.advertisingTitle,\n advertisingSubtitle: currentTab?.advertisingSubtitle,\n advertisingLink: currentTab?.advertisingLink,\n advertisingTheme: currentTab?.advertisingTheme,\n type: 'advertising',\n }\n if (!isInsertAdvertising.current && !!searchProductsResult?.length) {\n if (searchProductsResult?.length >= 8) {\n searchProductsResult?.splice(7, 0, advertisingData)\n isInsertAdvertising.current = true\n } else {\n searchProductsResult?.push(advertisingData)\n isInsertAdvertising.current = true\n }\n }\n return searchProductsResult\n }, [currentTab, searchProductsResult])\n\n return (\n <div className=\"ipc_search_page desktop:py-[128px] tablet:px-8 laptop:px-16 desktop:px-16 lg-desktop:px-[calc(50%-832px)] px-4 py-16\">\n <Heading\n size={4}\n weight=\"bold\"\n html={replaceTemplate(data?.title, {\n totalCount: totalCount?.toString(),\n inputValue: `\"${searchValue}\"`,\n })}\n />\n <div className=\"mt-6\">\n <Tabs className=\"ipc_search_page_tabs\" defaultValue=\"products\">\n <div className=\" desktop:flex desktop:items-center desktop:flex-row desktop:gap-6 desktop:justify-between\">\n <TabsList>\n {data?.tabs?.map((tab: any) => (\n <TabsTrigger\n onClick={() => {\n setCurrentTab(tab)\n isInsertAdvertising.current = false\n // \u5207\u6362tab\u65F6\uFF0C\u91CD\u7F6E\u8BE5tab\u7684\u6392\u5E8F\u503C\u4E3A\u9ED8\u8BA4\u503C\uFF08\u7B2C\u4E00\u4E2AsortKey\uFF09\n const defaultSortKey = tab?.sortKeys?.[0]\n if (defaultSortKey) {\n setCurrentSortKey((prev: any) => ({\n ...prev,\n [tab?.tabType]: defaultSortKey,\n }))\n onChangeSort?.(tab?.tabType, defaultSortKey)\n }\n onChangeTab?.(tab?.tabType)\n }}\n key={tab.id}\n defaultValue=\"products\"\n value={tab.tabType}\n >\n {tab.label} ({searchResultCount?.[tab.tabType as keyof typeof searchResultCount]})\n </TabsTrigger>\n ))}\n </TabsList>\n <DropdownMenu onOpenChange={setIsOpenSort}>\n <DropdownMenuTrigger asChild>\n <button className=\"desktop:mt-0 mt-6 flex items-center text-base font-bold leading-[1.2] focus-visible:!outline-none\">\n {currentTab?.sortLabel} {currentSortKey?.[currentTab?.tabType]?.label}{' '}\n <DownArrow\n className={cn('inline-block size-4', {\n 'rotate-180': isOpenSort,\n })}\n />\n </button>\n </DropdownMenuTrigger>\n <DropdownMenuContent\n align=\"start\"\n sideOffset={8}\n className=\"rounded-sidebar-shelf bg-white !px-0 py-2 focus-visible:!outline-none\"\n >\n {currentTab?.sortKeys?.map((sortKey: SortKey) => {\n return (\n <DropdownMenuItem\n className={cn(\n 'laptop:px-4 laptop:text-base px-3 py-4 text-sm font-bold hover:bg-[#EAEAEC] hover:text-current hover:!outline-none',\n {\n 'bg-[#EAEAEC]': currentSortKey?.[currentTab?.tabType]?.value === sortKey.value,\n }\n )}\n onClick={() => {\n isInsertAdvertising.current = false\n onChangeSort?.(currentTab?.tabType, sortKey)\n setCurrentSortKey((prev: any) => ({\n ...prev,\n [currentTab?.tabType]: sortKey,\n }))\n }}\n key={sortKey.id}\n >\n {sortKey.label}\n </DropdownMenuItem>\n )\n })}\n </DropdownMenuContent>\n </DropdownMenu>\n </div>\n <TabsContent value={SearchPageTabType.PRODUCTS} className=\"ipc_search_page_tabs_products_content mt-6\">\n <div className=\" tablet:grid-cols-3 desktop:grid-cols-4 desktop:gap-4 grid grid-cols-2 gap-x-3 gap-y-4\">\n {searchProductsResultWithAdvertising?.map((product: any, index: number) => (\n <SearchProductItem\n searchValue={searchValue}\n key={(product.id || '') + index}\n product={product}\n shopNowLoadingProductId={shopNowLoadingProductId}\n onSecondaryButton={() => onSecondaryButton?.(product)}\n onPrimaryButton={() => onPrimaryButton?.(product)}\n />\n ))}\n </div>\n {loading ? (\n <div className=\"mt-6 flex w-full justify-center\">\n <LoadingDots />\n </div>\n ) : (\n !searchProductsResult?.length && (\n <>\n <SearchPageNoResult url={data?.noResultImage?.url} label={data?.noResultLabel} />\n <SearchRecommendProducts\n products={data?.recommendProducts || []}\n buildProps={buildProps}\n title={data?.recommendProductsTitle}\n shopNowLoadingProductId={shopNowLoadingProductId}\n />\n </>\n )\n )}\n </TabsContent>\n <TabsContent value={SearchPageTabType.BLOGS} className=\"ipc_search_page_tabs_blogs_content\">\n <div>\n {searchBlogsResult?.map((blog: any) => (\n <SearchBlogItem key={blog.id} blog={blog} searchValue={searchValue} />\n ))}\n {loading ? (\n <div className=\"mt-6 flex justify-center\">\n <LoadingDots />\n </div>\n ) : (\n !searchBlogsResult?.length && (\n <>\n <SearchPageNoResult url={data?.noResultImage?.url} label={data?.noResultLabel} />\n <SearchRecommendProducts\n products={data?.recommendProducts || []}\n buildProps={buildProps}\n title={data?.recommendProductsTitle}\n />\n </>\n )\n )}\n </div>\n </TabsContent>\n <TabsContent value={SearchPageTabType.PAGES} className=\"ipc_search_page_tabs_pages_content\">\n <div>\n {searchPagesResult?.map((page: any, index: number) => (\n <SearchPageItem key={(page.global_id || page.id) + index} page={page} searchValue={searchValue} />\n ))}\n </div>\n {loading ? (\n <div className=\"mt-6 flex justify-center\">\n <LoadingDots />\n </div>\n ) : (\n !searchPagesResult?.length && (\n <>\n <SearchPageNoResult url={data?.noResultImage?.url} label={data?.noResultLabel} />\n <SearchRecommendProducts\n products={data?.recommendProducts || []}\n buildProps={buildProps}\n title={data?.recommendProductsTitle}\n shopNowLoadingProductId={shopNowLoadingProductId}\n />\n </>\n )\n )}\n </TabsContent>\n </Tabs>\n </div>\n </div>\n )\n}\n\nexport default SearchPage\n"],
|
|
5
|
-
"mappings": "AA6EU,OAoEQ,YAAAA,EApER,OAAAC,EAKA,QAAAC,MALA,oBA7EV,OACE,WAAAC,EACA,QAAAC,EACA,YAAAC,EACA,eAAAC,EACA,eAAAC,EACA,QAAAC,EACA,WAAAC,EACA,QAAAC,EACA,UAAAC,EACA,gBAAAC,EACA,uBAAAC,EACA,uBAAAC,EACA,oBAAAC,
|
|
6
|
-
"names": ["Fragment", "jsx", "jsxs", "Heading", "Tabs", "TabsList", "TabsTrigger", "TabsContent", "Text", "Picture", "Link", "Button", "DropdownMenu", "DropdownMenuTrigger", "DropdownMenuContent", "DropdownMenuItem", "LoadingDots", "DownArrow", "useMemo", "useRef", "useState", "cn", "atobID", "highlightSearchWord", "useAiuiContext", "formatVariantPrice", "SearchPageTabType", "getLocalizedPath", "replaceTemplate", "SearchProductItem", "product", "onSecondaryButton", "onPrimaryButton", "searchValue", "variantData", "shopNowLoadingProductId", "variant", "locale", "copyWriting", "isCurrentProductLoading", "listingLink", "coupon", "price", "basePrice", "tags", "item", "tag", "index", "e", "SearchBlogItem", "blog", "articleLink", "SearchPageItem", "page", "pageLink", "SearchPageNoResult", "url", "label", "SearchRecommendProducts", "products", "title", "buildProps", "buildProducts", "buildProduct", "SearchPage", "searchResult", "data", "onChangeSort", "loading", "searchResultCount", "onChangeTab", "currentTab", "setCurrentTab", "isInsertAdvertising", "isOpenSort", "setIsOpenSort", "currentSortKey", "setCurrentSortKey", "tab", "searchProductsResult", "searchBlogsResult", "searchPagesResult", "totalCount", "acc", "curr", "searchProductsResultWithAdvertising", "advertisingData", "defaultSortKey", "prev", "sortKey", "SearchPage_default"]
|
|
4
|
+
"sourcesContent": ["import {\n Heading,\n Tabs,\n TabsList,\n TabsTrigger,\n TabsContent,\n Text,\n Picture,\n Link,\n Button,\n DropdownMenu,\n DropdownMenuTrigger,\n DropdownMenuContent,\n DropdownMenuItem,\n LoadingDots,\n} from '../../components/index.js'\nimport { DownArrow } from '../HeaderNavigation/icons/index.js'\nimport { useMemo, useRef, useState } from 'react'\nimport { cn, atobID, highlightSearchWord } from '../../helpers/utils.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { formatVariantPrice } from '../ShelfDisplay/shelfDisplay.js'\nimport type {\n SearchPageProps,\n SortKey,\n SearchProductItemProps,\n SearchBlogItemProps,\n SearchPageItemProps,\n SearchRecommendProductsProps,\n} from './types'\nimport { SearchPageTabType } from './types.js'\nimport { getLocalizedPath } from '../../helpers/utils.js'\nimport { replaceTemplate } from '../Listing/utils/textFormat.js'\n\n/**\n * \u641C\u7D22\u5546\u54C1\n */\nconst SearchProductItem = ({\n product,\n onSecondaryButton,\n onPrimaryButton,\n searchValue,\n variantData,\n shopNowLoadingProductId,\n}: SearchProductItemProps) => {\n const variant = useMemo(() => variantData || product?.variants?.[0], [product, variantData])\n const { locale = 'us', copyWriting } = useAiuiContext()\n\n // \u5224\u65AD\u5F53\u524D\u4EA7\u54C1\u662F\u5426\u5728\u52A0\u8F7D\u4E2D\n const isCurrentProductLoading = shopNowLoadingProductId === product?.id\n\n const listingLink = useMemo(() => {\n return getLocalizedPath(\n `/products/${product?.handle}?variant=${atobID(variant?.id as string)}?ref=search_result_${searchValue?.toLowerCase()}`,\n locale\n )\n }, [product?.handle, variant?.id, searchValue, locale])\n\n const coupon = variant?.coupons?.[0]\n\n const { price, basePrice } = formatVariantPrice({\n locale: locale,\n amount: coupon ? coupon.variant_price4wscode : (variant?.price?.amount ?? variant?.price),\n baseAmount: coupon ? (variant?.price?.amount ?? variant?.price) : 0,\n currencyCode: product?.price?.currencyCode || 'USD',\n })\n\n const tags = useMemo(() => {\n return product?.tags\n ?.filter?.((item: any) => item?.startsWith?.('CLtag'))\n ?.map?.((item: any) => item?.replace?.('CLtag:', ''))\n ?.slice?.(0, 2)\n }, [product?.tags])\n\n return (\n <div className=\"rounded-image-text ipc_search_product_item lg-desktop:h-[480px] desktop:h-[384px] laptop:h-[360px] relative h-auto overflow-hidden\">\n {product?.type === 'advertising' && product?.advertisingLink ? (\n <Link href={getLocalizedPath(product?.advertisingLink, locale)} className=\"h-full\">\n <Picture\n source={`${product?.advertisingBgImg}`}\n className=\"size-full\"\n imgClassName=\"size-full object-cover\"\n />\n <div className=\"desktop:p-6 absolute inset-0 z-[2] p-4 [&_img]:hover:scale-110 [&_img]:hover:transition-all [&_img]:hover:duration-500\">\n <Text\n html={product?.advertisingTitle}\n className={cn('desktop:text-base text-sm font-bold leading-[1.2]', {\n 'text-white': product?.advertisingTheme === 'light',\n 'text-info-primary': product?.advertisingTheme === 'dark',\n })}\n />\n {product?.advertisingSubtitle && (\n <Heading\n size={3}\n html={product?.advertisingSubtitle}\n className={cn('laptop:line-clamp-3 mt-2 line-clamp-4 font-bold', {\n 'text-white': product?.advertisingTheme === 'light',\n 'text-info-primary': product?.advertisingTheme === 'dark',\n })}\n />\n )}\n </div>\n </Link>\n ) : (\n <a\n href={listingLink}\n className=\"tablet:hover:bg-info-white desktop:p-6 desktop:pt-4 tablet:p-4 flex h-full flex-col bg-[#EAEAEC] px-2 py-4 no-underline duration-300\"\n >\n <div className=\"ipc_search_product_item_image\">\n <Picture\n className=\"lg-desktop:size-[196px] mx-auto size-[138px]\"\n source={`${variant?.image?.url || product?.images?.[0]?.url}}`}\n alt={product?.title}\n imgClassName=\"object-cover size-full\"\n />\n </div>\n <div className=\"ipc_search_product_item_content desktop:mt-2 lg-desktop:mt-3 desktop:gap-6 mt-1 flex flex-1 flex-col justify-between gap-4\">\n <div className=\"flex-1\">\n <div className=\"lg-desktop:h-[28px] mb-2 flex h-[24px] gap-2\">\n {tags?.map((tag: string, index: number) => (\n <Text\n key={index}\n as=\"p\"\n html={tag}\n className=\"text-brand-0 lg-desktop:px-2 lg-desktop:!leading-[28px] h-full rounded-full border-[1.6px] border-[#00BEFA] px-[6px] text-sm font-bold !leading-[22px]\"\n />\n ))}\n </div>\n <Text\n className=\"lg-desktop:text-2xl tablet:line-clamp-2 line-clamp-3 text-xl font-bold !leading-[1.2]\"\n weight=\"bold\"\n html={highlightSearchWord(product?.title || '', searchValue || '')}\n />\n <Text\n as=\"p\"\n className=\"lg-desktop:text-[18px] tablet:line-clamp-1 mt-1 line-clamp-2 text-sm font-bold\"\n html={highlightSearchWord(product?.description, searchValue || '')}\n />\n </div>\n <div>\n <div className=\"mb-2 flex items-center\">\n {!variant?.availableForSale ? (\n <div className=\"text-info-primary tablet:text-xl lg-desktop:text-2xl text-[18px] font-bold\">\n {copyWriting?.soldOutText || 'Sold Out'}\n </div>\n ) : (\n <>\n <div className=\"final-price text-info-primary tablet:text-xl lg-desktop:text-2xl text-[18px] font-bold\">\n {variant?.availableForSale ? price || '' : ''}\n </div>\n <div className=\"origin-price tablet:text-xl lg-desktop:text-2xl text-info-secondary ml-1 text-[18px] font-bold line-through\">\n {variant?.availableForSale ? basePrice || '' : ''}\n </div>\n </>\n )}\n </div>\n <div\n className={cn(\n 'ipc_search_product_item_button_group',\n 'lg-desktop:gap-3 laptop:flex-row flex flex-col items-center gap-2'\n )}\n >\n {copyWriting?.learnMoreText && (\n <Button\n variant=\"secondary\"\n className=\"laptop:w-auto w-full\"\n size=\"lg\"\n onClick={e => {\n e.preventDefault()\n e.stopPropagation()\n onSecondaryButton?.()\n }}\n >\n {copyWriting?.learnMoreText}\n </Button>\n )}\n {copyWriting?.shopNowText && (\n <Button\n variant=\"primary\"\n className=\"laptop:w-auto w-full\"\n size=\"lg\"\n disabled={!variant?.availableForSale}\n loading={isCurrentProductLoading}\n onClick={e => {\n e.preventDefault()\n e.stopPropagation()\n onPrimaryButton?.()\n }}\n >\n {copyWriting?.shopNowText}\n </Button>\n )}\n </div>\n </div>\n </div>\n </a>\n )}\n </div>\n )\n}\n\n/**\n * \u641C\u7D22\u6587\u7AE0\n */\nconst SearchBlogItem = ({ blog, searchValue }: SearchBlogItemProps) => {\n const { copyWriting, locale = 'us' } = useAiuiContext()\n\n const articleLink = useMemo(\n () => getLocalizedPath(`/blogs/${blog?.blog?.handle}/${blog?.handle.replace('storefront-', '')}`, locale),\n [blog, locale]\n )\n\n return (\n <div className=\"ipc_search_blog_item border-b border-[#E4E5E6] py-6\">\n <div className=\"ipc_search_blog_item_content laptop:flex-row-reverse laptop:gap-8 desktop:gap-16 flex flex-col gap-4\">\n <div className=\"rounded-image-text laptop:flex-[440] desktop:flex-[540] desktop:h-[280px] h-[240px] overflow-hidden\">\n <Picture\n source={blog?.image?.url}\n className=\"size-full\"\n imgClassName=\"size-full object-cover\"\n alt={blog?.title}\n />\n </div>\n <div className=\"laptop:flex-[424] desktop:flex-[704] lg-desktop:flex-[1056] flex flex-col justify-center\">\n <Heading size={3} html={highlightSearchWord(blog?.title, searchValue)} />\n <Text\n html={highlightSearchWord(blog?.content, searchValue)}\n className=\"lg-desktop:text-[18px] desktop:text-[16px] mt-1 line-clamp-2 text-sm font-bold leading-[1.4]\"\n />\n <div className=\"desktop:mt-6 mt-4\">\n <Button as=\"a\" href={articleLink} variant=\"secondary\" size=\"lg\">\n {copyWriting?.learnMoreText || 'Learn More'}\n </Button>\n </div>\n </div>\n </div>\n </div>\n )\n}\n\n/**\n * \u641C\u7D22\u9875\u9762\n */\nconst SearchPageItem = ({ searchValue, page }: SearchPageItemProps) => {\n const { copyWriting, locale = 'us' } = useAiuiContext()\n const pageLink = useMemo(() => getLocalizedPath(`/${page?.handle}`, locale), [page, locale])\n return (\n <div className=\"ipc_search_page_items border-b border-[#E4E5E6] py-6\">\n <Heading size={3} html={highlightSearchWord(page?.name, searchValue)} />\n <Text\n as=\"p\"\n html={highlightSearchWord(page?.bodySummary || '', searchValue)}\n className=\"lg-desktop:text-[18px] desktop:text-[16px] mt-1 text-sm font-bold leading-[1.4]\"\n />\n <Button as=\"a\" href={pageLink} variant=\"secondary\" size=\"lg\" className=\"desktop:mt-6 mt-4\">\n {copyWriting?.learnMoreText || 'Learn More'}\n </Button>\n </div>\n )\n}\n\n/**\n * \u641C\u7D22\u7ED3\u679C\u4E3A\u7A7A\n */\nconst SearchPageNoResult = ({ url, label }: { url: string; label: string }) => {\n return (\n <div className=\"flex flex-col items-center justify-center gap-4\">\n <Picture source={url} className=\"h-[180px] w-[240px]\" imgClassName=\"object-cover\" />\n <Text html={label} className=\"desktop:text-[18px] text-sm font-bold leading-[1.4]\" />\n </div>\n )\n}\n\n/**\n * \u641C\u7D22\u63A8\u8350\u5546\u54C1\n */\nconst SearchRecommendProducts = ({\n products,\n title,\n buildProps,\n onSecondaryButton,\n onPrimaryButton,\n}: SearchRecommendProductsProps) => {\n const { products: buildProducts } = buildProps || {}\n console.log(buildProducts, 'buildProducts')\n return (\n <div className=\"ipc_search_recommend_product tablet:pt-[80px] laptop:pt-[96px] desktop:pt-[112px] lg-desktop:pt-[128px] pt-[64px]\">\n <Heading size={4} weight=\"bold\" html={title} />\n <div className=\" tablet:grid-cols-3 desktop:grid-cols-4 desktop:gap-4 mt-6 grid grid-cols-2 gap-x-3 gap-y-4\">\n {products?.map((product: any, index: number) => {\n const buildProduct = buildProducts?.find((buildProduct: any) => buildProduct.handle === product.handle)\n if (!buildProduct) return null\n const variant = buildProduct?.variants?.find((variant: any) => variant.sku === product.sku)\n return (\n <SearchProductItem\n product={buildProduct}\n variantData={variant}\n key={product.sku + index}\n onSecondaryButton={() => onSecondaryButton?.()}\n onPrimaryButton={() => onPrimaryButton?.()}\n />\n )\n })}\n </div>\n </div>\n )\n}\n\n/**\n * \u641C\u7D22\u9875\u9762\n */\nconst SearchPage = ({\n searchResult,\n searchValue,\n data,\n onSecondaryButton,\n onPrimaryButton,\n // loadMore,\n onChangeSort,\n loading,\n shopNowLoadingProductId,\n searchResultCount,\n onChangeTab,\n buildProps,\n className,\n ...rest\n}: SearchPageProps) => {\n const [currentTab, setCurrentTab] = useState<any>(data?.tabs?.[0])\n const isInsertAdvertising = useRef(false)\n const [isOpenSort, setIsOpenSort] = useState(false)\n const [currentSortKey, setCurrentSortKey] = useState<any>({\n [SearchPageTabType.PRODUCTS]: data?.tabs?.find((tab: any) => tab.tabType === SearchPageTabType.PRODUCTS)\n ?.sortKeys?.[0],\n [SearchPageTabType.BLOGS]: data?.tabs?.find((tab: any) => tab.tabType === SearchPageTabType.BLOGS)?.sortKeys?.[0],\n [SearchPageTabType.PAGES]: data?.tabs?.find((tab: any) => tab.tabType === SearchPageTabType.PAGES)?.sortKeys?.[0],\n })\n\n const searchProductsResult = useMemo(() => {\n return searchResult?.products || []\n }, [searchResult])\n\n const searchBlogsResult = useMemo(() => {\n return searchResult?.blogs || []\n }, [searchResult])\n\n const searchPagesResult = useMemo(() => {\n return searchResult?.pages || []\n }, [searchResult])\n\n const totalCount = useMemo(() => {\n return Object.values(searchResultCount || {}).reduce((acc, curr) => acc + curr, 0)\n }, [searchResultCount])\n\n const searchProductsResultWithAdvertising = useMemo(() => {\n const advertisingData = {\n advertisingBgImg: `${currentTab?.advertisingBgImg?.url}, ${currentTab?.advertisingMobBgImg?.url} 768`,\n advertisingTitle: currentTab?.advertisingTitle,\n advertisingSubtitle: currentTab?.advertisingSubtitle,\n advertisingLink: currentTab?.advertisingLink,\n advertisingTheme: currentTab?.advertisingTheme,\n type: 'advertising',\n }\n if (!isInsertAdvertising.current && !!searchProductsResult?.length) {\n if (searchProductsResult?.length >= 8) {\n searchProductsResult?.splice(7, 0, advertisingData)\n isInsertAdvertising.current = true\n } else {\n searchProductsResult?.push(advertisingData)\n isInsertAdvertising.current = true\n }\n }\n return searchProductsResult\n }, [currentTab, searchProductsResult])\n\n return (\n <div\n {...rest}\n className={cn(\n 'ipc_search_page desktop:py-[128px] tablet:px-8 laptop:px-16 desktop:px-16 lg-desktop:px-[calc(50%-832px)] px-4 py-16',\n className\n )}\n >\n <Heading\n size={4}\n weight=\"bold\"\n html={replaceTemplate(data?.title, {\n totalCount: totalCount?.toString(),\n inputValue: `\"${searchValue}\"`,\n })}\n />\n <div className=\"mt-6\">\n <Tabs className=\"ipc_search_page_tabs\" defaultValue=\"products\">\n <div className=\" desktop:flex desktop:items-center desktop:flex-row desktop:gap-6 desktop:justify-between\">\n <TabsList>\n {data?.tabs?.map((tab: any) => (\n <TabsTrigger\n onClick={() => {\n setCurrentTab(tab)\n isInsertAdvertising.current = false\n // \u5207\u6362tab\u65F6\uFF0C\u91CD\u7F6E\u8BE5tab\u7684\u6392\u5E8F\u503C\u4E3A\u9ED8\u8BA4\u503C\uFF08\u7B2C\u4E00\u4E2AsortKey\uFF09\n const defaultSortKey = tab?.sortKeys?.[0]\n if (defaultSortKey) {\n setCurrentSortKey((prev: any) => ({\n ...prev,\n [tab?.tabType]: defaultSortKey,\n }))\n onChangeSort?.(tab?.tabType, defaultSortKey)\n }\n onChangeTab?.(tab?.tabType)\n }}\n key={tab.id}\n defaultValue=\"products\"\n value={tab.tabType}\n >\n {tab.label} ({searchResultCount?.[tab.tabType as keyof typeof searchResultCount]})\n </TabsTrigger>\n ))}\n </TabsList>\n <DropdownMenu onOpenChange={setIsOpenSort}>\n <DropdownMenuTrigger asChild>\n <button className=\"desktop:mt-0 mt-6 flex items-center text-base font-bold leading-[1.2] focus-visible:!outline-none\">\n {currentTab?.sortLabel} {currentSortKey?.[currentTab?.tabType]?.label}{' '}\n <DownArrow\n className={cn('inline-block size-4', {\n 'rotate-180': isOpenSort,\n })}\n />\n </button>\n </DropdownMenuTrigger>\n <DropdownMenuContent\n align=\"start\"\n sideOffset={8}\n className=\"rounded-sidebar-shelf bg-white !px-0 py-2 focus-visible:!outline-none\"\n >\n {currentTab?.sortKeys?.map((sortKey: SortKey) => {\n return (\n <DropdownMenuItem\n className={cn(\n 'laptop:px-4 laptop:text-base px-3 py-4 text-sm font-bold hover:bg-[#EAEAEC] hover:text-current hover:!outline-none',\n {\n 'bg-[#EAEAEC]': currentSortKey?.[currentTab?.tabType]?.value === sortKey.value,\n }\n )}\n onClick={() => {\n isInsertAdvertising.current = false\n onChangeSort?.(currentTab?.tabType, sortKey)\n setCurrentSortKey((prev: any) => ({\n ...prev,\n [currentTab?.tabType]: sortKey,\n }))\n }}\n key={sortKey.id}\n >\n {sortKey.label}\n </DropdownMenuItem>\n )\n })}\n </DropdownMenuContent>\n </DropdownMenu>\n </div>\n <TabsContent value={SearchPageTabType.PRODUCTS} className=\"ipc_search_page_tabs_products_content mt-6\">\n <div className=\" tablet:grid-cols-3 desktop:grid-cols-4 desktop:gap-4 grid grid-cols-2 gap-x-3 gap-y-4\">\n {searchProductsResultWithAdvertising?.map((product: any, index: number) => (\n <SearchProductItem\n searchValue={searchValue}\n key={(product.id || '') + index}\n product={product}\n shopNowLoadingProductId={shopNowLoadingProductId}\n onSecondaryButton={() => onSecondaryButton?.(product)}\n onPrimaryButton={() => onPrimaryButton?.(product)}\n />\n ))}\n </div>\n {loading ? (\n <div className=\"mt-6 flex w-full justify-center\">\n <LoadingDots />\n </div>\n ) : (\n !searchProductsResult?.length && (\n <>\n <SearchPageNoResult url={data?.noResultImage?.url} label={data?.noResultLabel} />\n <SearchRecommendProducts\n products={data?.recommendProducts || []}\n buildProps={buildProps}\n title={data?.recommendProductsTitle}\n shopNowLoadingProductId={shopNowLoadingProductId}\n />\n </>\n )\n )}\n </TabsContent>\n <TabsContent value={SearchPageTabType.BLOGS} className=\"ipc_search_page_tabs_blogs_content\">\n <div>\n {searchBlogsResult?.map((blog: any) => (\n <SearchBlogItem key={blog.id} blog={blog} searchValue={searchValue} />\n ))}\n {loading ? (\n <div className=\"mt-6 flex justify-center\">\n <LoadingDots />\n </div>\n ) : (\n !searchBlogsResult?.length && (\n <>\n <SearchPageNoResult url={data?.noResultImage?.url} label={data?.noResultLabel} />\n <SearchRecommendProducts\n products={data?.recommendProducts || []}\n buildProps={buildProps}\n title={data?.recommendProductsTitle}\n />\n </>\n )\n )}\n </div>\n </TabsContent>\n <TabsContent value={SearchPageTabType.PAGES} className=\"ipc_search_page_tabs_pages_content\">\n <div>\n {searchPagesResult?.map((page: any, index: number) => (\n <SearchPageItem key={(page.global_id || page.id) + index} page={page} searchValue={searchValue} />\n ))}\n </div>\n {loading ? (\n <div className=\"mt-6 flex justify-center\">\n <LoadingDots />\n </div>\n ) : (\n !searchPagesResult?.length && (\n <>\n <SearchPageNoResult url={data?.noResultImage?.url} label={data?.noResultLabel} />\n <SearchRecommendProducts\n products={data?.recommendProducts || []}\n buildProps={buildProps}\n title={data?.recommendProductsTitle}\n shopNowLoadingProductId={shopNowLoadingProductId}\n />\n </>\n )\n )}\n </TabsContent>\n </Tabs>\n </div>\n </div>\n )\n}\n\nexport default SearchPage\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["Fragment", "jsx", "jsxs", "Heading", "Tabs", "TabsList", "TabsTrigger", "TabsContent", "Text", "Picture", "Link", "Button", "DropdownMenu", "DropdownMenuTrigger", "DropdownMenuContent", "DropdownMenuItem", "LoadingDots", "DownArrow", "useMemo", "useRef", "useState", "cn", "atobID", "highlightSearchWord", "useAiuiContext", "formatVariantPrice", "SearchPageTabType", "getLocalizedPath", "replaceTemplate", "SearchProductItem", "product", "onSecondaryButton", "onPrimaryButton", "searchValue", "variantData", "shopNowLoadingProductId", "variant", "locale", "copyWriting", "isCurrentProductLoading", "listingLink", "coupon", "price", "basePrice", "tags", "item", "tag", "index", "e", "SearchBlogItem", "blog", "articleLink", "SearchPageItem", "page", "pageLink", "SearchPageNoResult", "url", "label", "SearchRecommendProducts", "products", "title", "buildProps", "buildProducts", "buildProduct", "SearchPage", "searchResult", "data", "onChangeSort", "loading", "searchResultCount", "onChangeTab", "className", "rest", "currentTab", "setCurrentTab", "isInsertAdvertising", "isOpenSort", "setIsOpenSort", "currentSortKey", "setCurrentSortKey", "tab", "searchProductsResult", "searchBlogsResult", "searchPagesResult", "totalCount", "acc", "curr", "searchProductsResultWithAdvertising", "advertisingData", "defaultSortKey", "prev", "sortKey", "SearchPage_default"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
var
|
|
1
|
+
var o=(t=>(t.PRODUCTS="products",t.BLOGS="blogs",t.PAGES="pages",t))(o||{});const e="ipc-search-page";export{e as IPC_SEARCH_PAGE,o as SearchPageTabType};
|
|
2
2
|
//# sourceMappingURL=types.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/SearchPage/types.ts"],
|
|
4
|
-
"sourcesContent": ["import type { Product } from '../../cpn-components/CpnProductCard/types'\nimport type { Img } from '../../types/props'\n\nexport type SearchPageType = 'products' | 'blogs' | 'pages'\n\nexport type SortKey = {\n id: string\n value: string\n label: string\n}\n\nexport interface SearchPageProps {\n searchResult: {\n [key in SearchPageTabType]: any\n }\n searchResultCount: {\n [key in SearchPageTabType]: number\n }\n loading?: boolean\n shopNowLoadingProductId?: string\n searchValue: string\n data: any\n buildProps?: {\n products: any[]\n }\n onChangeTab?: (tabType: SearchPageTabType) => void\n onSecondaryButton?: (product: Product) => void\n onPrimaryButton?: (product: Product) => void\n // loadMore?: (type: SearchPageType) => void\n onChangeSort?: (tabType: SearchPageType, sortKey: { value: string; label: string }) => void\n}\n\nexport interface SearchProductItemProps {\n searchValue?: string\n product: any\n variantData?: any\n shopNowLoadingProductId?: string\n onSecondaryButton?: () => void\n onPrimaryButton?: () => void\n}\n\nexport interface SearchBlogItemProps {\n searchValue: string\n blog: any\n}\n\nexport interface SearchPageItemProps {\n searchValue: string\n page: any\n}\n\nexport enum SearchPageTabType {\n PRODUCTS = 'products',\n BLOGS = 'blogs',\n PAGES = 'pages',\n}\n\nexport interface SearchRecommendProductsProps {\n products: any[]\n title: string\n shopNowLoadingProductId?: string\n buildProps?: {\n products: any[]\n }\n onSecondaryButton?: () => void\n onPrimaryButton?: () => void\n}\n\nexport const IPC_SEARCH_PAGE = 'ipc-search-page'\n"],
|
|
4
|
+
"sourcesContent": ["import type { Product } from '../../cpn-components/CpnProductCard/types'\nimport type { Img } from '../../types/props'\n\nexport type SearchPageType = 'products' | 'blogs' | 'pages'\n\nexport type SortKey = {\n id: string\n value: string\n label: string\n}\n\nexport interface SearchPageProps extends React.HTMLAttributes<HTMLDivElement> {\n searchResult: {\n [key in SearchPageTabType]: any\n }\n searchResultCount: {\n [key in SearchPageTabType]: number\n }\n loading?: boolean\n shopNowLoadingProductId?: string\n searchValue: string\n data: any\n buildProps?: {\n products: any[]\n }\n onChangeTab?: (tabType: SearchPageTabType) => void\n onSecondaryButton?: (product: Product) => void\n onPrimaryButton?: (product: Product) => void\n // loadMore?: (type: SearchPageType) => void\n onChangeSort?: (tabType: SearchPageType, sortKey: { value: string; label: string }) => void\n}\n\nexport interface SearchProductItemProps {\n searchValue?: string\n product: any\n variantData?: any\n shopNowLoadingProductId?: string\n onSecondaryButton?: () => void\n onPrimaryButton?: () => void\n}\n\nexport interface SearchBlogItemProps {\n searchValue: string\n blog: any\n}\n\nexport interface SearchPageItemProps {\n searchValue: string\n page: any\n}\n\nexport enum SearchPageTabType {\n PRODUCTS = 'products',\n BLOGS = 'blogs',\n PAGES = 'pages',\n}\n\nexport interface SearchRecommendProductsProps {\n products: any[]\n title: string\n shopNowLoadingProductId?: string\n buildProps?: {\n products: any[]\n }\n onSecondaryButton?: () => void\n onPrimaryButton?: () => void\n}\n\nexport const IPC_SEARCH_PAGE = 'ipc-search-page'\n"],
|
|
5
5
|
"mappings": "AAmDO,IAAKA,OACVA,EAAA,SAAW,WACXA,EAAA,MAAQ,QACRA,EAAA,MAAQ,QAHEA,OAAA,IAiBL,MAAMC,EAAkB",
|
|
6
6
|
"names": ["SearchPageTabType", "IPC_SEARCH_PAGE"]
|
|
7
7
|
}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
1
2
|
import type { Img } from '../../types/props.js';
|
|
2
3
|
export type SelectStoreDataType = {
|
|
3
4
|
title: string;
|
|
@@ -7,14 +8,13 @@ export type SelectStoreDataType = {
|
|
|
7
8
|
padImg: Img;
|
|
8
9
|
miniImg: Img;
|
|
9
10
|
};
|
|
10
|
-
|
|
11
|
+
interface SelectStoreType extends React.HTMLAttributes<HTMLDivElement> {
|
|
11
12
|
data: {
|
|
12
13
|
list: SelectStoreDataType[];
|
|
13
14
|
};
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
declare const _default: import("react").ForwardRefExoticComponent<SelectStoreType & {
|
|
15
|
+
}
|
|
16
|
+
declare const _default: React.ForwardRefExoticComponent<SelectStoreType & {
|
|
17
17
|
style?: string | React.CSSProperties;
|
|
18
18
|
container?: import("../../shared/Styles.js").ContainerProps["container"];
|
|
19
|
-
} &
|
|
19
|
+
} & React.RefAttributes<any>>;
|
|
20
20
|
export default _default;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{Fragment as
|
|
1
|
+
"use client";import{Fragment as x,jsx as t,jsxs as o}from"react/jsx-runtime";import"react";import{cn as m}from"../../helpers/utils.js";import"../SwiperBox/index.js";import{withLayout as c}from"../../shared/Styles.js";import{Picture as d,Text as l}from"../../components/index.js";const g=({data:p,className:a,...s})=>{const{list:r}=p;return t(x,{children:t("div",{...s,className:m("",a),children:t("div",{className:"laptop:grid-cols-3 tablet:grid-cols-2 grid grid-cols-1 gap-4",children:r.map((e,i)=>o("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:[t(d,{className:"object-cover",imgClassName:"w-full object-cover",source:`${e?.img?.url}, ${e?.padImg?.url} 1439, ${e?.miniImg?.url} 1023, ${e?.mobileImg?.url} 767`}),o("div",{className:"laptop:px-6 laptop:pb-4 lg-desktop:px-8 lg-desktop:pb-8 px-4 pb-4",children:[t(l,{html:e?.title,className:"lg-desktop:text-[24px] text-[20px] leading-[1.2] text-[#080A0F] [&_*_strong]:!font-bold"}),t(l,{html:e?.desc,className:"lg-desktop:text-[16px] line-clamp-1 text-[14px] leading-[1.4] text-[#080A0F]"})]})]},i))})})})};var S=c(g);export{S as default};
|
|
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 { 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\
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": ["Fragment", "jsx", "jsxs", "withLayout", "Picture", "Text", "SelectStore", "
|
|
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": "aAqCI,mBAAAA,EAQU,OAAAC,EAKA,QAAAC,MAbV,oBApCJ,MAAuB,QACvB,OAAS,MAAAC,MAAU,yBACnB,MAAsB,wBAEtB,OAAS,cAAAC,MAAkB,yBAC3B,OAAS,WAAAC,EAAS,QAAAC,MAAY,4BA2B9B,MAAMC,EAAc,CAAC,CAAE,KAAAC,EAAM,UAAAC,EAAW,GAAGC,CAAK,IAAuB,CACrE,KAAM,CAAE,KAAAC,CAAK,EAAIH,EAEjB,OACEP,EAAAD,EAAA,CACE,SAAAC,EAAC,OAAK,GAAGS,EAAM,UAAWP,EAAG,GAAIM,CAAS,EACxC,SAAAR,EAAC,OAAI,UAAU,+DACZ,SAAAU,EAAK,IAAI,CAACC,EAAMC,IACfX,EAAC,OAEC,UAAU,oLAEV,UAAAD,EAACI,EAAA,CACC,UAAU,eACV,aAAa,sBACb,OAAQ,GAAGO,GAAM,KAAK,GAAG,KAAKA,GAAM,QAAQ,GAAG,UAAUA,GAAM,SAAS,GAAG,UAAUA,GAAM,WAAW,GAAG,OAC3G,EACAV,EAAC,OAAI,UAAU,oEACb,UAAAD,EAACK,EAAA,CACC,KAAMM,GAAM,MACZ,UAAU,0FACZ,EACAX,EAACK,EAAA,CACC,KAAMM,GAAM,KACZ,UAAU,+EACZ,GACF,IAjBKC,CAkBP,CACD,EACH,EAiFF,EACF,CAEJ,EAEA,IAAOC,EAAQV,EAAWG,CAAW",
|
|
6
|
+
"names": ["Fragment", "jsx", "jsxs", "cn", "withLayout", "Picture", "Text", "SelectStore", "data", "className", "rest", "list", "item", "index", "SelectStore_default"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{jsx as l,jsxs as
|
|
1
|
+
"use client";import{jsx as l,jsxs as ge}from"react/jsx-runtime";import Y,{useState as L,useEffect as y,useRef as g,useImperativeHandle as ee}from"react";import{cn as te}from"../../helpers/utils.js";import{Tabs as ne,TabsList as se,TabsTrigger as ae}from"../../components/tabs.js";import re from"../Title/index.js";import ie from"../SwiperBox/index.js";import{withLayout as oe}from"../../shared/Styles.js";import{gaTrack as V}from"../../shared/track.js";import{useMediaQuery as le}from"react-responsive";import{useRollout as ce}from"../../hooks/useRollout.js";import{ShelfDisplayWrapItem as me,ShelfDisplayHorizontalItem as fe}from"./shelfDisplayItem.js";const pe="image",ue="product_shelf",de=f=>f==null?"default":String(f).replace(/[^a-zA-Z0-9_-]/g,"")||"default",he=()=>`shelf-display-${Math.random().toString(36).slice(2,9)}`,B=Y.forwardRef(({key:f,data:p,event:E,buildData:T,breakpoints:N,className:z="",recommendedData:i,target:A="_self",metafields:$,isDisplayGudgments:S=!1,isDisplayBackImage:q=!1,...O},K)=>{const{productsTab:a=[],productsCard:v=[],title:k,isShowTab:u=!0,tabShape:Q="square",isShowTag:W=!1,isShowOriginalPrice:Z=!0,isShowRecommendedCard:I=!1,...j}=p,[d,R]=L(""),[r,w]=L([]),D=g(!1),_=g(!1),M=g(null),F=g(he()),G=le({query:"(max-width: 768px)"}),[J,x]=ce({threshold:0}),h=r?.length<=1&&S,c=!G&&r?.length<=2&&S,b=e=>{switch(e){case 1440:return c?r?.length:4;case 1024:return c?r?.length:3;default:return c?r?.length:2.3}},P=()=>{V({event:"ga4Event",event_name:"view_item_list",event_parameters:{page_group:"Home Page",item_list_name:"Home_Page_Bundle",items:i?.map((e,t)=>{const s=e?.variants?.find(n=>n?.sku===e?.sku)||e?.variants?.[0];return{item_id:e?.sku||s?.sku,item_name:e?.name,item_variant:s?.name,price:s?.price,index:t+1}})}})},m=(e,t)=>{if(t){const o=i?.map?.(s=>({...s,isShowRecommended:!0}));w(o?.length?o||[]:[])}else if(Array.isArray(e)){const s=e?.map?.(n=>{const H=T?.products?.find(X=>X?.handle===n?.handle);if(H)return{sku:n.sku,isShowRecommended:!1,custom_name:n.custom_name,custom_description:n.custom_description,custom_image:n.custom_image,custom_theme:n.custom_theme,custom_primary_link:n?.custom_primary_link||"",custom_secondary_link:n?.custom_secondary_link||"",...H}})?.filter(n=>n);w(s?.length?s||[]:[])}else w([])};ee(K,()=>M.current),y(()=>{x&&i?.length&&!D.current&&(D.current=!0,P())},[x,i]),y(()=>{if(!_.current){if(!_.current&&i?.length&&(_.current=!0),u){const e=a?.find(t=>t?.tab===d)||a?.[0];R(e?.tab||""),m(e?.data||[],e?.isShowRecommendedTab);return}m(v,I)}},[i]),y(()=>{if(u){const e=a?.find(t=>t?.tab===d)||a?.[0];m(e?.data||[],e?.isShowRecommendedTab);return}m(v,I)},[T]);const U=de(d),C=`${F.current}-${U}`;return ge("div",{ref:M,...O,className:te("shelf-display-wrap text-info-primary w-full",z,{"aiui-dark":p?.theme==="dark"}),children:[k&&l(re,{data:{title:k}}),u&&a?.length>0&&l(ne,{value:d,onValueChange:e=>{const t=a?.find(o=>o?.tab===e);if(t){if(R(e),m(t.data||[],t.isShowRecommendedTab),!t.isShowRecommendedTab){V({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:"Home Page",component_type:pe,component_name:ue,component_title:p?.title,component_position:1,navigation:e}});return}P()}},shape:Q==="rounded"?"rounded":"square",children:l(se,{children:a.map(e=>l(ae,{value:e?.tab,children:e?.tab||""},e?.id||e?.tab))})}),l("div",{ref:J,className:"tablet:min-h-[393px] laptop:min-h-[425px] desktop:min-h-[405px] lg-desktop:min-h-[409px]",children:l(ie,{data:{list:r,configuration:{...j,event:E,isShowTag:W,isShowOriginalPrice:Z,target:A,metafields:$,itemLength:r?.length,isDisplayBackImage:q}},id:C,className:`${u?"mt-6":""} shelf-display-swiper-box !overflow-visible`,itemClassName:c?"flex-1":"",Slide:c?fe:me,breakpoints:N||{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:h?1:1.2},768:{spaceBetween:h?0:16,freeMode:!1,slidesPerView:b()},1024:{spaceBetween:h?0:16,freeMode:!1,slidesPerView:b(1024)},1440:{spaceBetween:h?0:16,freeMode:!1,slidesPerView:b(1440)}}},C)})]})});B.displayName="ShelfDisplay";var De=oe(B);export{De as default};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/ShelfDisplay/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React, { useState, useEffect, useRef, useImperativeHandle } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { Tabs, TabsList, TabsTrigger } from '../../components/tabs.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { gaTrack } from '../../shared/track.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useRollout } from '../../hooks/useRollout.js'\nimport { ShelfDisplayWrapItem, ShelfDisplayHorizontalItem } from './shelfDisplayItem.js'\nimport type { ShelfDisplayProps, ShelfDisplayItem } from './shelfDisplay.js'\n\nconst componentType = 'image'\nconst componentName = 'product_shelf'\n\nconst sanitizeCssSelector = (value?: string | number) => {\n if (value === undefined || value === null) return 'default'\n const sanitized = String(value).replace(/[^a-zA-Z0-9_-]/g, '')\n return sanitized || 'default'\n}\n\nconst createInstanceId = () => `shelf-display-${Math.random().toString(36).slice(2, 9)}`\n\nconst ShelfDisplay = React.forwardRef<HTMLDivElement, ShelfDisplayProps>(\n (\n {\n key,\n data,\n event,\n buildData,\n breakpoints,\n className = '',\n recommendedData,\n target = '_self',\n metafields,\n isDisplayGudgments = false,\n isDisplayBackImage = false,\n },\n ref\n ) => {\n const {\n productsTab = [],\n productsCard = [],\n title,\n isShowTab = true,\n tabShape = 'square',\n isShowTag = false,\n isShowOriginalPrice = true,\n isShowRecommendedCard = false,\n ...other\n } = data\n\n const [tabId, setTabId] = useState<string>('')\n const [currentItems, setCurrentItems] = useState<ShelfDisplayItem[]>([])\n\n const isView = useRef<boolean>(false)\n const isRecommend = useRef<boolean>(false)\n const innerRef = useRef<HTMLDivElement>(null)\n const instanceIdRef = useRef<string>(createInstanceId())\n\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n const [viewRef, inView] = useRollout<HTMLDivElement>({ threshold: 0 })\n\n const isOnce = currentItems?.length <= 1 && isDisplayGudgments\n const isShowGudgments = !isMobile && currentItems?.length <= 2 && isDisplayGudgments\n\n const showItemLength = (size?: number) => {\n switch (size) {\n case 1440:\n return isShowGudgments ? currentItems?.length : 4\n case 1024:\n return isShowGudgments ? currentItems?.length : 3\n default:\n return isShowGudgments ? currentItems?.length : 2.3\n }\n }\n\n const gackViewEvent = () => {\n gaTrack({\n event: 'ga4Event',\n event_name: 'view_item_list',\n event_parameters: {\n page_group: 'Home Page',\n item_list_name: 'Home_Page_Bundle',\n items: recommendedData?.map((item, index) => {\n const findData = item?.variants?.find((v: any) => v?.sku === item?.sku)\n const variant = findData || item?.variants?.[0]\n return {\n item_id: item?.sku || variant?.sku,\n item_name: item?.name,\n item_variant: variant?.name,\n price: variant?.price,\n index: index + 1,\n }\n }),\n },\n })\n }\n\n const handleCurrentTab = (currentData: ShelfDisplayItem[], flag: boolean) => {\n if (flag) {\n const newCurrentData = recommendedData?.map?.(item => {\n return {\n ...item,\n isShowRecommended: true,\n }\n })\n setCurrentItems(newCurrentData?.length ? newCurrentData || [] : [])\n } else {\n const isArray = Array.isArray(currentData)\n if (isArray) {\n const newCurrentData = currentData\n ?.map?.(item => {\n const findData = buildData?.products?.find(params => params?.handle === item?.handle)\n if (findData) {\n return {\n sku: item.sku,\n isShowRecommended: false,\n custom_name: item.custom_name,\n custom_description: item.custom_description,\n custom_image: item.custom_image,\n custom_theme: item.custom_theme,\n custom_primary_link: item?.custom_primary_link || '',\n custom_secondary_link: item?.custom_secondary_link || '',\n ...findData,\n }\n }\n })\n ?.filter(item => item)\n setCurrentItems(newCurrentData?.length ? newCurrentData || [] : [])\n } else {\n setCurrentItems([])\n }\n }\n }\n\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n useEffect(() => {\n if (inView && recommendedData?.length && !isView.current) {\n isView.current = true\n gackViewEvent()\n }\n }, [inView, recommendedData])\n\n // \u7B97\u6CD5\u6570\u636E\u4F1A\u7A0D\u5FAE\u5EF6\u8FDF\uFF0C\u6240\u4EE5\u9700\u76D1\u542CrecommendedData\uFF0C\u4E3A\u4E86\u9632\u6B62\u5728\u6709\u7B97\u6CD5\u6570\u636E\u4E14\u5BF9\u9ED8\u8BA4\u6E32\u67D3\u7B2C\u4E00\u4E2A\u540E\u53CD\u590D\u89E6\u53D1\uFF0C\u7528isRecommend\u5173\u95ED\n useEffect(() => {\n if (isRecommend.current) return\n if (!isRecommend.current && recommendedData?.length) {\n isRecommend.current = true\n }\n if (isShowTab) {\n const currentTab = productsTab?.find(item => item?.tab === tabId) || productsTab?.[0]\n setTabId(currentTab?.tab || '')\n handleCurrentTab(currentTab?.data || [], currentTab?.isShowRecommendedTab)\n return\n }\n handleCurrentTab(productsCard, isShowRecommendedCard)\n }, [recommendedData])\n\n useEffect(() => {\n if (isShowTab) {\n const currentTab = productsTab?.find(item => item?.tab === tabId) || productsTab?.[0]\n handleCurrentTab(currentTab?.data || [], currentTab?.isShowRecommendedTab)\n return\n }\n handleCurrentTab(productsCard, isShowRecommendedCard)\n // buildData \u66F4\u65B0\u65F6\u9700\u8981\u91CD\u65B0\u8BA1\u7B97\u5F53\u524D\u5217\u8868\n }, [buildData])\n\n const safeTabKey = sanitizeCssSelector(tabId)\n const swiperInstanceId = `${instanceIdRef.current}-${safeTabKey}`\n\n return (\n <div\n ref={innerRef}\n className={cn('shelf-display-wrap text-info-primary w-full', className, {\n 'aiui-dark': data?.theme === 'dark',\n })}\n >\n {title && <Title data={{ title: title }} />}\n {isShowTab && productsTab?.length > 0 && (\n <Tabs\n value={tabId}\n onValueChange={value => {\n const currentTab = productsTab?.find(item => item?.tab === value)\n if (currentTab) {\n setTabId(value)\n handleCurrentTab(currentTab.data || [], currentTab.isShowRecommendedTab)\n if (!currentTab.isShowRecommendedTab) {\n gaTrack({\n event: 'ga4Event',\n event_name: 'component_click',\n event_parameters: {\n page_group: 'Home Page',\n component_type: componentType,\n component_name: componentName,\n component_title: data?.title,\n component_position: 1,\n navigation: value,\n },\n })\n return\n }\n gackViewEvent()\n }\n }}\n shape={tabShape === 'rounded' ? 'rounded' : 'square'}\n >\n <TabsList>\n {productsTab.map(item => (\n <TabsTrigger key={item?.id || item?.tab} value={item?.tab}>\n {item?.tab || ''}\n </TabsTrigger>\n ))}\n </TabsList>\n </Tabs>\n )}\n <div\n ref={viewRef as any}\n className=\"tablet:min-h-[393px] laptop:min-h-[425px] desktop:min-h-[405px] lg-desktop:min-h-[409px]\"\n >\n <SwiperBox\n key={swiperInstanceId}\n data={{\n list: currentItems,\n configuration: {\n ...other,\n event: event,\n isShowTag,\n isShowOriginalPrice,\n target: target,\n metafields: metafields,\n itemLength: currentItems?.length,\n isDisplayBackImage: isDisplayBackImage,\n },\n }}\n id={swiperInstanceId}\n className={`${isShowTab ? 'mt-6' : ''} shelf-display-swiper-box !overflow-visible`}\n itemClassName={isShowGudgments ? 'flex-1' : ''}\n Slide={isShowGudgments ? ShelfDisplayHorizontalItem : ShelfDisplayWrapItem}\n breakpoints={\n breakpoints || {\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: isOnce ? 1 : 1.2,\n },\n 768: {\n spaceBetween: isOnce ? 0 : 16,\n freeMode: false,\n slidesPerView: showItemLength(),\n },\n 1024: {\n spaceBetween: isOnce ? 0 : 16,\n freeMode: false,\n slidesPerView: showItemLength(1024),\n },\n 1440: {\n spaceBetween: isOnce ? 0 : 16,\n freeMode: false,\n slidesPerView: showItemLength(1440),\n },\n }\n }\n />\n </div>\n </div>\n )\n }\n)\n\nShelfDisplay.displayName = 'ShelfDisplay'\nexport default withLayout(ShelfDisplay)\n"],
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": ["jsx", "jsxs", "React", "useState", "useEffect", "useRef", "useImperativeHandle", "cn", "Tabs", "TabsList", "TabsTrigger", "Title", "SwiperBox", "withLayout", "gaTrack", "useMediaQuery", "useRollout", "ShelfDisplayWrapItem", "ShelfDisplayHorizontalItem", "componentType", "componentName", "sanitizeCssSelector", "value", "createInstanceId", "ShelfDisplay", "key", "data", "event", "buildData", "breakpoints", "className", "recommendedData", "target", "metafields", "isDisplayGudgments", "isDisplayBackImage", "ref", "productsTab", "productsCard", "title", "isShowTab", "tabShape", "isShowTag", "isShowOriginalPrice", "isShowRecommendedCard", "other", "tabId", "setTabId", "currentItems", "setCurrentItems", "isView", "isRecommend", "innerRef", "instanceIdRef", "isMobile", "viewRef", "inView", "isOnce", "isShowGudgments", "showItemLength", "size", "gackViewEvent", "item", "index", "variant", "v", "handleCurrentTab", "currentData", "flag", "newCurrentData", "findData", "params", "currentTab", "safeTabKey", "swiperInstanceId", "ShelfDisplay_default"]
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useState, useEffect, useRef, useImperativeHandle } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { Tabs, TabsList, TabsTrigger } from '../../components/tabs.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { gaTrack } from '../../shared/track.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useRollout } from '../../hooks/useRollout.js'\nimport { ShelfDisplayWrapItem, ShelfDisplayHorizontalItem } from './shelfDisplayItem.js'\nimport type { ShelfDisplayProps, ShelfDisplayItem } from './shelfDisplay.js'\n\nconst componentType = 'image'\nconst componentName = 'product_shelf'\n\nconst sanitizeCssSelector = (value?: string | number) => {\n if (value === undefined || value === null) return 'default'\n const sanitized = String(value).replace(/[^a-zA-Z0-9_-]/g, '')\n return sanitized || 'default'\n}\n\nconst createInstanceId = () => `shelf-display-${Math.random().toString(36).slice(2, 9)}`\n\nconst ShelfDisplay = React.forwardRef<HTMLDivElement, ShelfDisplayProps>(\n (\n {\n key,\n data,\n event,\n buildData,\n breakpoints,\n className = '',\n recommendedData,\n target = '_self',\n metafields,\n isDisplayGudgments = false,\n isDisplayBackImage = false,\n ...rest\n },\n ref\n ) => {\n const {\n productsTab = [],\n productsCard = [],\n title,\n isShowTab = true,\n tabShape = 'square',\n isShowTag = false,\n isShowOriginalPrice = true,\n isShowRecommendedCard = false,\n ...other\n } = data\n\n const [tabId, setTabId] = useState<string>('')\n const [currentItems, setCurrentItems] = useState<ShelfDisplayItem[]>([])\n\n const isView = useRef<boolean>(false)\n const isRecommend = useRef<boolean>(false)\n const innerRef = useRef<HTMLDivElement>(null)\n const instanceIdRef = useRef<string>(createInstanceId())\n\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n const [viewRef, inView] = useRollout<HTMLDivElement>({ threshold: 0 })\n\n const isOnce = currentItems?.length <= 1 && isDisplayGudgments\n const isShowGudgments = !isMobile && currentItems?.length <= 2 && isDisplayGudgments\n\n const showItemLength = (size?: number) => {\n switch (size) {\n case 1440:\n return isShowGudgments ? currentItems?.length : 4\n case 1024:\n return isShowGudgments ? currentItems?.length : 3\n default:\n return isShowGudgments ? currentItems?.length : 2.3\n }\n }\n\n const gackViewEvent = () => {\n gaTrack({\n event: 'ga4Event',\n event_name: 'view_item_list',\n event_parameters: {\n page_group: 'Home Page',\n item_list_name: 'Home_Page_Bundle',\n items: recommendedData?.map((item, index) => {\n const findData = item?.variants?.find((v: any) => v?.sku === item?.sku)\n const variant = findData || item?.variants?.[0]\n return {\n item_id: item?.sku || variant?.sku,\n item_name: item?.name,\n item_variant: variant?.name,\n price: variant?.price,\n index: index + 1,\n }\n }),\n },\n })\n }\n\n const handleCurrentTab = (currentData: ShelfDisplayItem[], flag: boolean) => {\n if (flag) {\n const newCurrentData = recommendedData?.map?.(item => {\n return {\n ...item,\n isShowRecommended: true,\n }\n })\n setCurrentItems(newCurrentData?.length ? newCurrentData || [] : [])\n } else {\n const isArray = Array.isArray(currentData)\n if (isArray) {\n const newCurrentData = currentData\n ?.map?.(item => {\n const findData = buildData?.products?.find(params => params?.handle === item?.handle)\n if (findData) {\n return {\n sku: item.sku,\n isShowRecommended: false,\n custom_name: item.custom_name,\n custom_description: item.custom_description,\n custom_image: item.custom_image,\n custom_theme: item.custom_theme,\n custom_primary_link: item?.custom_primary_link || '',\n custom_secondary_link: item?.custom_secondary_link || '',\n ...findData,\n }\n }\n })\n ?.filter(item => item)\n setCurrentItems(newCurrentData?.length ? newCurrentData || [] : [])\n } else {\n setCurrentItems([])\n }\n }\n }\n\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n useEffect(() => {\n if (inView && recommendedData?.length && !isView.current) {\n isView.current = true\n gackViewEvent()\n }\n }, [inView, recommendedData])\n\n // \u7B97\u6CD5\u6570\u636E\u4F1A\u7A0D\u5FAE\u5EF6\u8FDF\uFF0C\u6240\u4EE5\u9700\u76D1\u542CrecommendedData\uFF0C\u4E3A\u4E86\u9632\u6B62\u5728\u6709\u7B97\u6CD5\u6570\u636E\u4E14\u5BF9\u9ED8\u8BA4\u6E32\u67D3\u7B2C\u4E00\u4E2A\u540E\u53CD\u590D\u89E6\u53D1\uFF0C\u7528isRecommend\u5173\u95ED\n useEffect(() => {\n if (isRecommend.current) return\n if (!isRecommend.current && recommendedData?.length) {\n isRecommend.current = true\n }\n if (isShowTab) {\n const currentTab = productsTab?.find(item => item?.tab === tabId) || productsTab?.[0]\n setTabId(currentTab?.tab || '')\n handleCurrentTab(currentTab?.data || [], currentTab?.isShowRecommendedTab)\n return\n }\n handleCurrentTab(productsCard, isShowRecommendedCard)\n }, [recommendedData])\n\n useEffect(() => {\n if (isShowTab) {\n const currentTab = productsTab?.find(item => item?.tab === tabId) || productsTab?.[0]\n handleCurrentTab(currentTab?.data || [], currentTab?.isShowRecommendedTab)\n return\n }\n handleCurrentTab(productsCard, isShowRecommendedCard)\n // buildData \u66F4\u65B0\u65F6\u9700\u8981\u91CD\u65B0\u8BA1\u7B97\u5F53\u524D\u5217\u8868\n }, [buildData])\n\n const safeTabKey = sanitizeCssSelector(tabId)\n const swiperInstanceId = `${instanceIdRef.current}-${safeTabKey}`\n\n return (\n <div\n ref={innerRef}\n {...rest}\n className={cn('shelf-display-wrap text-info-primary w-full', className, {\n 'aiui-dark': data?.theme === 'dark',\n })}\n >\n {title && <Title data={{ title: title }} />}\n {isShowTab && productsTab?.length > 0 && (\n <Tabs\n value={tabId}\n onValueChange={value => {\n const currentTab = productsTab?.find(item => item?.tab === value)\n if (currentTab) {\n setTabId(value)\n handleCurrentTab(currentTab.data || [], currentTab.isShowRecommendedTab)\n if (!currentTab.isShowRecommendedTab) {\n gaTrack({\n event: 'ga4Event',\n event_name: 'component_click',\n event_parameters: {\n page_group: 'Home Page',\n component_type: componentType,\n component_name: componentName,\n component_title: data?.title,\n component_position: 1,\n navigation: value,\n },\n })\n return\n }\n gackViewEvent()\n }\n }}\n shape={tabShape === 'rounded' ? 'rounded' : 'square'}\n >\n <TabsList>\n {productsTab.map(item => (\n <TabsTrigger key={item?.id || item?.tab} value={item?.tab}>\n {item?.tab || ''}\n </TabsTrigger>\n ))}\n </TabsList>\n </Tabs>\n )}\n <div\n ref={viewRef as any}\n className=\"tablet:min-h-[393px] laptop:min-h-[425px] desktop:min-h-[405px] lg-desktop:min-h-[409px]\"\n >\n <SwiperBox\n key={swiperInstanceId}\n data={{\n list: currentItems,\n configuration: {\n ...other,\n event: event,\n isShowTag,\n isShowOriginalPrice,\n target: target,\n metafields: metafields,\n itemLength: currentItems?.length,\n isDisplayBackImage: isDisplayBackImage,\n },\n }}\n id={swiperInstanceId}\n className={`${isShowTab ? 'mt-6' : ''} shelf-display-swiper-box !overflow-visible`}\n itemClassName={isShowGudgments ? 'flex-1' : ''}\n Slide={isShowGudgments ? ShelfDisplayHorizontalItem : ShelfDisplayWrapItem}\n breakpoints={\n breakpoints || {\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: isOnce ? 1 : 1.2,\n },\n 768: {\n spaceBetween: isOnce ? 0 : 16,\n freeMode: false,\n slidesPerView: showItemLength(),\n },\n 1024: {\n spaceBetween: isOnce ? 0 : 16,\n freeMode: false,\n slidesPerView: showItemLength(1024),\n },\n 1440: {\n spaceBetween: isOnce ? 0 : 16,\n freeMode: false,\n slidesPerView: showItemLength(1440),\n },\n }\n }\n />\n </div>\n </div>\n )\n }\n)\n\nShelfDisplay.displayName = 'ShelfDisplay'\nexport default withLayout(ShelfDisplay)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["jsx", "jsxs", "React", "useState", "useEffect", "useRef", "useImperativeHandle", "cn", "Tabs", "TabsList", "TabsTrigger", "Title", "SwiperBox", "withLayout", "gaTrack", "useMediaQuery", "useRollout", "ShelfDisplayWrapItem", "ShelfDisplayHorizontalItem", "componentType", "componentName", "sanitizeCssSelector", "value", "createInstanceId", "ShelfDisplay", "key", "data", "event", "buildData", "breakpoints", "className", "recommendedData", "target", "metafields", "isDisplayGudgments", "isDisplayBackImage", "rest", "ref", "productsTab", "productsCard", "title", "isShowTab", "tabShape", "isShowTag", "isShowOriginalPrice", "isShowRecommendedCard", "other", "tabId", "setTabId", "currentItems", "setCurrentItems", "isView", "isRecommend", "innerRef", "instanceIdRef", "isMobile", "viewRef", "inView", "isOnce", "isShowGudgments", "showItemLength", "size", "gackViewEvent", "item", "index", "variant", "v", "handleCurrentTab", "currentData", "flag", "newCurrentData", "findData", "params", "currentTab", "safeTabKey", "swiperInstanceId", "ShelfDisplay_default"]
|
|
7
7
|
}
|
|
@@ -73,7 +73,7 @@ export type ShelfDisplayType = {
|
|
|
73
73
|
theme?: 'light' | 'dark';
|
|
74
74
|
containerProps?: ContainerProps;
|
|
75
75
|
};
|
|
76
|
-
export interface ShelfDisplayProps {
|
|
76
|
+
export interface ShelfDisplayProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
77
77
|
data: ShelfDisplayType;
|
|
78
78
|
buildData?: {
|
|
79
79
|
categories: any[];
|
|
@@ -82,7 +82,6 @@ export interface ShelfDisplayProps {
|
|
|
82
82
|
recommendedData?: any[];
|
|
83
83
|
/** 按钮事件*/
|
|
84
84
|
event?: EventType;
|
|
85
|
-
className?: string;
|
|
86
85
|
key?: string;
|
|
87
86
|
target?: '_self' | '_blank';
|
|
88
87
|
breakpoints?: {
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import
|
|
1
|
+
import f from"decimal.js";import{PRICE_SYMBOL as o,formatPrice as u,languageTerritory as h}from"../../helpers/index.js";function T({amount:r,baseAmount:e,currencyCode:n,currencyDisplay:i,locale:t,maximumFractionDigits:d,minimumFractionDigits:l,removeTrailingZeros:p}){if(typeof Intl>"u")return{price:`${o[t]}${r}`,basePrice:`${o[t]}${e}`,discount:`${o[t]}${e-r||0}`};const a=e>r;let m=null;const c=h(t);if(c){const s=new Intl.NumberFormat(c,{style:"percent"});m=a?s.format((e-r)/e):null}let y;if(a){const s=new f(e).sub(r||0).toNumber();y=u({amount:s,currencyDisplay:i,currencyCode:n||"USD",locale:t,maximumFractionDigits:2})}const g=u({amount:r,currencyCode:n,currencyDisplay:i,locale:t,removeTrailingZeros:p}),b=a?u({amount:e,currencyCode:n,currencyDisplay:i,locale:t,maximumFractionDigits:d,minimumFractionDigits:l,removeTrailingZeros:p}):void 0;return{price:g,basePrice:b,discount:m,discountAmount:y}}export{T as formatVariantPrice};
|
|
2
2
|
//# sourceMappingURL=shelfDisplay.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/ShelfDisplay/shelfDisplay.ts"],
|
|
4
|
-
"sourcesContent": ["import Decimal from 'decimal.js'\nimport type { ContainerProps, CurrencyDisplayType } from '../../types/props.js'\n/* eslint-disable no-useless-escape */\nimport { PRICE_SYMBOL, formatPrice, languageTerritory } from '../../helpers/index.js'\n\nexport function formatVariantPrice({\n amount,\n baseAmount,\n currencyCode,\n currencyDisplay,\n locale,\n maximumFractionDigits,\n minimumFractionDigits,\n removeTrailingZeros,\n}: {\n baseAmount: number\n amount: number\n currencyCode: string\n currencyDisplay?: CurrencyDisplayType\n locale: string\n maximumFractionDigits?: number\n minimumFractionDigits?: number\n removeTrailingZeros?: boolean\n}) {\n if (typeof Intl === 'undefined') {\n return {\n price: `${PRICE_SYMBOL[locale]}${amount}`,\n basePrice: `${PRICE_SYMBOL[locale]}${baseAmount}`,\n discount: `${PRICE_SYMBOL[locale]}${baseAmount - amount || 0}`,\n }\n }\n\n const hasDiscount = baseAmount > amount\n let discount = null\n const currentLocale = languageTerritory(locale)\n if (currentLocale) {\n const formatDiscount = new Intl.NumberFormat(currentLocale, {\n style: 'percent',\n })\n discount = hasDiscount ? formatDiscount.format((baseAmount - amount) / baseAmount) : null\n }\n // \u6298\u6263\u91D1\u989D\n let discountAmount\n if (hasDiscount) {\n const savePriceAmount = new Decimal(baseAmount).sub(amount || 0).toNumber()\n discountAmount = formatPrice({\n amount: savePriceAmount,\n currencyDisplay,\n currencyCode: currencyCode || 'USD',\n locale,\n maximumFractionDigits: 2,\n })\n }\n\n const price = formatPrice({ amount, currencyCode, currencyDisplay, locale, removeTrailingZeros })\n const basePrice = hasDiscount\n ? formatPrice({\n amount: baseAmount,\n currencyCode,\n currencyDisplay,\n locale,\n maximumFractionDigits,\n minimumFractionDigits,\n removeTrailingZeros,\n })\n : undefined\n\n return { price, basePrice, discount, discountAmount }\n}\n\ntype EventType = {\n primaryButton?: (v: any, index: number, data: ShelfDisplayType, coupon: any) => void\n secondaryButton?: (v: any, index: number, data: ShelfDisplayType, coupon: any) => void\n}\n\nexport interface ShelfDisplayItem {\n custom_primary_link?: string\n custom_secondary_link?: string\n id?: string\n /** \u4EA7\u54C1\u56FE\u7247*/\n img?: {\n url: string\n }\n handle?: string\n sku?: string\n /** \u6298\u6263\u540E\u4EF7\u683C*/\n price?: string\n title?: string\n /** \u6298\u6263\u524D\u4EF7\u683C*/\n basePrice?: string\n subTitle?: string\n /** \u6807\u7B7E*/\n tagItems?: string[]\n tab?: string\n data?: ShelfDisplayItem[]\n custom_name?: string\n custom_description?: string\n custom_image?: string\n custom_theme?: string\n}\n\nexport type ShelfDisplayType = {\n title?: string\n isShowTab?: boolean\n isShowTag?: boolean\n isShowRecommendedCard?: boolean\n isShowOriginalPrice?: boolean\n direction?: 'horizontal' | 'vertical'\n align?: 'left' | 'center' | 'right'\n productsTab?: any[]\n productsCard?: any[]\n /** \u5361\u7247\u5F62\u72B6 */\n itemShape?: 'round' | 'square'\n /** \u6309\u94AE\u5F62\u72B6 */\n shape?: 'round' | 'square'\n /** \u6807\u7B7E\u9875\u5F62\u72B6*/\n tabShape?: 'rounded' | 'square'\n /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n primaryButton?: string\n primaryFun?: 'AddCart' | 'BuyNow' | 'LearnMore'\n /** \u526F\u6309\u94AE\u914D\u7F6E */\n secondaryButton?: string\n secondaryFun?: 'AddCart' | 'BuyNow' | 'LearnMore'\n theme?: 'light' | 'dark'\n containerProps?: ContainerProps\n}\n\nexport interface ShelfDisplayProps {\n data: ShelfDisplayType\n buildData?: {\n categories: any[]\n products: any[]\n }\n recommendedData?: any[]\n /** \u6309\u94AE\u4E8B\u4EF6*/\n event?: EventType\n
|
|
4
|
+
"sourcesContent": ["import Decimal from 'decimal.js'\nimport type { ContainerProps, CurrencyDisplayType } from '../../types/props.js'\n/* eslint-disable no-useless-escape */\nimport { PRICE_SYMBOL, formatPrice, languageTerritory } from '../../helpers/index.js'\n\nexport function formatVariantPrice({\n amount,\n baseAmount,\n currencyCode,\n currencyDisplay,\n locale,\n maximumFractionDigits,\n minimumFractionDigits,\n removeTrailingZeros,\n}: {\n baseAmount: number\n amount: number\n currencyCode: string\n currencyDisplay?: CurrencyDisplayType\n locale: string\n maximumFractionDigits?: number\n minimumFractionDigits?: number\n removeTrailingZeros?: boolean\n}) {\n if (typeof Intl === 'undefined') {\n return {\n price: `${PRICE_SYMBOL[locale]}${amount}`,\n basePrice: `${PRICE_SYMBOL[locale]}${baseAmount}`,\n discount: `${PRICE_SYMBOL[locale]}${baseAmount - amount || 0}`,\n }\n }\n\n const hasDiscount = baseAmount > amount\n let discount = null\n const currentLocale = languageTerritory(locale)\n if (currentLocale) {\n const formatDiscount = new Intl.NumberFormat(currentLocale, {\n style: 'percent',\n })\n discount = hasDiscount ? formatDiscount.format((baseAmount - amount) / baseAmount) : null\n }\n // \u6298\u6263\u91D1\u989D\n let discountAmount\n if (hasDiscount) {\n const savePriceAmount = new Decimal(baseAmount).sub(amount || 0).toNumber()\n discountAmount = formatPrice({\n amount: savePriceAmount,\n currencyDisplay,\n currencyCode: currencyCode || 'USD',\n locale,\n maximumFractionDigits: 2,\n })\n }\n\n const price = formatPrice({ amount, currencyCode, currencyDisplay, locale, removeTrailingZeros })\n const basePrice = hasDiscount\n ? formatPrice({\n amount: baseAmount,\n currencyCode,\n currencyDisplay,\n locale,\n maximumFractionDigits,\n minimumFractionDigits,\n removeTrailingZeros,\n })\n : undefined\n\n return { price, basePrice, discount, discountAmount }\n}\n\ntype EventType = {\n primaryButton?: (v: any, index: number, data: ShelfDisplayType, coupon: any) => void\n secondaryButton?: (v: any, index: number, data: ShelfDisplayType, coupon: any) => void\n}\n\nexport interface ShelfDisplayItem {\n custom_primary_link?: string\n custom_secondary_link?: string\n id?: string\n /** \u4EA7\u54C1\u56FE\u7247*/\n img?: {\n url: string\n }\n handle?: string\n sku?: string\n /** \u6298\u6263\u540E\u4EF7\u683C*/\n price?: string\n title?: string\n /** \u6298\u6263\u524D\u4EF7\u683C*/\n basePrice?: string\n subTitle?: string\n /** \u6807\u7B7E*/\n tagItems?: string[]\n tab?: string\n data?: ShelfDisplayItem[]\n custom_name?: string\n custom_description?: string\n custom_image?: string\n custom_theme?: string\n}\n\nexport type ShelfDisplayType = {\n title?: string\n isShowTab?: boolean\n isShowTag?: boolean\n isShowRecommendedCard?: boolean\n isShowOriginalPrice?: boolean\n direction?: 'horizontal' | 'vertical'\n align?: 'left' | 'center' | 'right'\n productsTab?: any[]\n productsCard?: any[]\n /** \u5361\u7247\u5F62\u72B6 */\n itemShape?: 'round' | 'square'\n /** \u6309\u94AE\u5F62\u72B6 */\n shape?: 'round' | 'square'\n /** \u6807\u7B7E\u9875\u5F62\u72B6*/\n tabShape?: 'rounded' | 'square'\n /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n primaryButton?: string\n primaryFun?: 'AddCart' | 'BuyNow' | 'LearnMore'\n /** \u526F\u6309\u94AE\u914D\u7F6E */\n secondaryButton?: string\n secondaryFun?: 'AddCart' | 'BuyNow' | 'LearnMore'\n theme?: 'light' | 'dark'\n containerProps?: ContainerProps\n}\n\nexport interface ShelfDisplayProps extends React.HTMLAttributes<HTMLDivElement> {\n data: ShelfDisplayType\n buildData?: {\n categories: any[]\n products: any[]\n }\n recommendedData?: any[]\n /** \u6309\u94AE\u4E8B\u4EF6*/\n event?: EventType\n key?: string\n target?: '_self' | '_blank'\n breakpoints?: {\n [key: number]: {\n spaceBetween: number\n freeMode: boolean\n slidesPerView: number\n }\n }\n metafields?: any\n isDisplayGudgments?: boolean\n isDisplayBackImage?: boolean\n}\n"],
|
|
5
5
|
"mappings": "AAAA,OAAOA,MAAa,aAGpB,OAAS,gBAAAC,EAAc,eAAAC,EAAa,qBAAAC,MAAyB,yBAEtD,SAASC,EAAmB,CACjC,OAAAC,EACA,WAAAC,EACA,aAAAC,EACA,gBAAAC,EACA,OAAAC,EACA,sBAAAC,EACA,sBAAAC,EACA,oBAAAC,CACF,EASG,CACD,GAAI,OAAO,KAAS,IAClB,MAAO,CACL,MAAO,GAAGX,EAAaQ,CAAM,CAAC,GAAGJ,CAAM,GACvC,UAAW,GAAGJ,EAAaQ,CAAM,CAAC,GAAGH,CAAU,GAC/C,SAAU,GAAGL,EAAaQ,CAAM,CAAC,GAAGH,EAAaD,GAAU,CAAC,EAC9D,EAGF,MAAMQ,EAAcP,EAAaD,EACjC,IAAIS,EAAW,KACf,MAAMC,EAAgBZ,EAAkBM,CAAM,EAC9C,GAAIM,EAAe,CACjB,MAAMC,EAAiB,IAAI,KAAK,aAAaD,EAAe,CAC1D,MAAO,SACT,CAAC,EACDD,EAAWD,EAAcG,EAAe,QAAQV,EAAaD,GAAUC,CAAU,EAAI,IACvF,CAEA,IAAIW,EACJ,GAAIJ,EAAa,CACf,MAAMK,EAAkB,IAAIlB,EAAQM,CAAU,EAAE,IAAID,GAAU,CAAC,EAAE,SAAS,EAC1EY,EAAiBf,EAAY,CAC3B,OAAQgB,EACR,gBAAAV,EACA,aAAcD,GAAgB,MAC9B,OAAAE,EACA,sBAAuB,CACzB,CAAC,CACH,CAEA,MAAMU,EAAQjB,EAAY,CAAE,OAAAG,EAAQ,aAAAE,EAAc,gBAAAC,EAAiB,OAAAC,EAAQ,oBAAAG,CAAoB,CAAC,EAC1FQ,EAAYP,EACdX,EAAY,CACV,OAAQI,EACR,aAAAC,EACA,gBAAAC,EACA,OAAAC,EACA,sBAAAC,EACA,sBAAAC,EACA,oBAAAC,CACF,CAAC,EACD,OAEJ,MAAO,CAAE,MAAAO,EAAO,UAAAC,EAAW,SAAAN,EAAU,eAAAG,CAAe,CACtD",
|
|
6
6
|
"names": ["Decimal", "PRICE_SYMBOL", "formatPrice", "languageTerritory", "formatVariantPrice", "amount", "baseAmount", "currencyCode", "currencyDisplay", "locale", "maximumFractionDigits", "minimumFractionDigits", "removeTrailingZeros", "hasDiscount", "discount", "currentLocale", "formatDiscount", "discountAmount", "savePriceAmount", "price", "basePrice"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{jsx as r,jsxs as G}from"react/jsx-runtime";import l,{useImperativeHandle as
|
|
1
|
+
"use client";import{jsx as r,jsxs as G}from"react/jsx-runtime";import l,{useImperativeHandle as J,useRef as a,useEffect as K}from"react";import{gsap as h}from"gsap";import{SplitText as z}from"gsap/dist/SplitText";import{ScrollTrigger as R}from"gsap/dist/ScrollTrigger";import{cn as p}from"../../helpers/utils.js";import{Heading as O,Text as Q}from"../../components/index.js";import{withLayout as W}from"../../shared/Styles.js";import{useInView as X}from"react-intersection-observer";const it="copy",ct="brand_slogan";function Z(f=[],m=3){const g=[];for(let n=0;n<f.length;n+=m)g.push(f.slice(n,n+m));return g}const D=l.forwardRef(({data:f,className:m="",...g},n)=>{const{title:j,features:o=[],tag:C="h1",featureChunkSize:H=3}=f,[v,N]=l.useState(0),[P,w]=l.useState(!0),k=a(null),y=a(null),b=a(null),d=Z(o,H),T=d.length,i=o.length>H,V=i?[...d,d[0]]:d,E=40;J(n,()=>k.current);const{ref:F,inView:I}=X();l.useEffect(()=>{if(!i)return;const t=setInterval(()=>{N(e=>e+1),w(!0)},3e3);return()=>clearInterval(t)},[T,i]),l.useEffect(()=>{if(i)if(v===T){const t=setTimeout(()=>{w(!1),N(0)},500);return()=>clearTimeout(t)}else w(!0)},[v,T,i]);const c=a(null),M=a(null),x=a(null);return K(()=>{h.registerPlugin(R,z);function t(){if(!c.current)return;x.current=new z(c.current,{type:"words",wordsClass:"word"});const e=c.current?.clientHeight||100,u=x.current.words;h.set(u,{opacity:0}),y.current=R.create({trigger:c.current,start:"bottom bottom-=4%",end:`bottom+=${e*1.5}px bottom-=4%`,scrub:!0,onUpdate:s=>{const U=s.progress,L=u.length,A=1/L,$=.5;u.forEach((Y,_)=>{const q=_/L*(1-$),B=A*(1+$);let S=(U-q)/B;S=Math.max(0,Math.min(S,1)),h.set(Y,{opacity:S})})}}),o&&o.length>0&&(b.current=R.create({trigger:M.current,start:`bottom+=${e*2}px bottom-=6%`,end:`bottom+=${e*2+100}px bottom-=6%`,onUpdate:s=>{h.set(M.current,{opacity:s.progress})}}))}return I&&t(),()=>{x.current&&x.current.revert(),y.current&&y.current.kill(),b.current&&b.current.kill()}},[I]),r("div",{ref:F,children:G("div",{ref:k,...g,className:p("slogan-container laptop:flex-row laptop:items-end laptop:justify-between text-info-primary flex h-auto w-full flex-col items-start justify-center gap-[24px] text-center",m),children:[r(O,{ref:c,as:C,size:2,weight:"bold",align:"left",className:p("slogan-title laptop:text-[40px] desktop:text-[48px] lg-desktop:text-[64px] text-[40px] !leading-[1.1]"),html:j}),o&&o.length>0&&r("div",{className:p("relative w-full max-w-[500px] overflow-hidden",`tablet:h-[${E}px]`),children:r("div",{className:p(["flex flex-col",P?"transition-transform duration-500 ease-[cubic-bezier(.4,0,.2,1)]":"!transition-none"]),style:{transform:`translateY(-${v*E}px)`},children:V.map((t,e)=>r("div",{className:p("laptop:justify-end flex w-full flex-row items-stretch gap-3 overflow-hidden",`tablet:h-[${E}px]`),children:t.map((u,s)=>G(l.Fragment,{children:[s>0&&r("div",{className:"slogan-feature-divider w-px self-stretch bg-[#E4E5E6]"}),r(Q,{size:3,align:"left",as:"p",className:"slogan-feature-text laptop:text-[14px] line-clamp-3 text-[12px] leading-[1.4]",html:u.title})]},s))},e))})})]})})});D.displayName="Slogan";var ut=W(D);export{ct as componentName,it as componentType,ut as default};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/Slogan/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef, useEffect } from 'react'\nimport { gsap } from 'gsap'\nimport { SplitText } from 'gsap/dist/SplitText'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport { cn } from '../../helpers/utils.js'\nimport { Heading, Text } from '../../components/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type { SloganProps } from './types.js'\nimport { useInView } from 'react-intersection-observer'\n\nexport const componentType = 'copy'\nexport const componentName = 'brand_slogan'\n\nfunction chunkArray(array: { title: string }[] = [], size: number = 3) {\n const result = []\n for (let i = 0; i < array.length; i += size) {\n result.push(array.slice(i, i + size))\n }\n return result\n}\n\nconst Slogan = React.forwardRef<HTMLDivElement, SloganProps>(({ data, className = '' }, ref) => {\n const { title, features = [], tag = 'h1', featureChunkSize = 3 } = data\n const [groupIndex, setGroupIndex] = React.useState(0)\n const [isTransitioning, setIsTransitioning] = React.useState(true)\n const innerRef = useRef<HTMLDivElement>(null)\n const scrollTriggerRef = useRef<ScrollTrigger | null>(null)\n const featuresTriggerRef = useRef<ScrollTrigger | null>(null)\n const featuresGroups = chunkArray(features, featureChunkSize)\n const totalGroups = featuresGroups.length\n const needCarousel = features.length > featureChunkSize\n const displayGroups = needCarousel ? [...featuresGroups, featuresGroups[0]] : featuresGroups\n const groupHeight = 40\n\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n const { ref: inViewRef, inView } = useInView()\n\n // \u53EA\u5728\u9700\u8981\u8F6E\u64AD\u65F6\u542F\u7528\u5B9A\u65F6\u5668\n React.useEffect(() => {\n if (!needCarousel) return\n const timer = setInterval(() => {\n setGroupIndex(i => i + 1)\n setIsTransitioning(true)\n }, 3000)\n return () => clearInterval(timer)\n }, [totalGroups, needCarousel])\n\n // \u53EA\u5728\u9700\u8981\u8F6E\u64AD\u65F6\u5904\u7406\u65E0\u7F1D\u8DF3\u8F6C\n React.useEffect(() => {\n if (!needCarousel) return\n if (groupIndex === totalGroups) {\n const handle = setTimeout(() => {\n setIsTransitioning(false)\n setGroupIndex(0)\n }, 500) // 500ms\u7B49\u4E8E\u52A8\u753B\u65F6\u957F\n return () => clearTimeout(handle)\n } else {\n setIsTransitioning(true)\n }\n }, [groupIndex, totalGroups, needCarousel])\n\n // \u6807\u9898\u52A8\u753B\u903B\u8F91\u4FDD\u6301\u4E0D\u53D8\n const titleRef = useRef<HTMLHeadingElement>(null)\n const featuresRef = useRef<HTMLDivElement>(null)\n const splitTextInstance = useRef<SplitText | null>(null)\n\n useEffect(() => {\n gsap.registerPlugin(ScrollTrigger, SplitText)\n\n function gsapResize() {\n if (!titleRef.current) return\n splitTextInstance.current = new SplitText(titleRef.current, {\n type: 'words',\n wordsClass: 'word',\n })\n const height = titleRef.current?.clientHeight || 100\n\n const words = splitTextInstance.current.words\n gsap.set(words, { opacity: 0 })\n scrollTriggerRef.current = ScrollTrigger.create({\n trigger: titleRef.current,\n start: 'bottom bottom-=4%',\n end: `bottom+=${height * 1.5}px bottom-=4%`,\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 },\n })\n\n if (features && features.length > 0) {\n featuresTriggerRef.current = ScrollTrigger.create({\n trigger: featuresRef.current,\n start: `bottom+=${height * 2}px bottom-=6%`,\n end: `bottom+=${height * 2 + 100}px bottom-=6%`,\n onUpdate: (self: any) => {\n gsap.set(featuresRef.current, { opacity: self.progress })\n },\n })\n }\n }\n\n if (inView) {\n gsapResize()\n }\n\n return () => {\n splitTextInstance.current && splitTextInstance.current.revert()\n // ScrollTrigger.getAll().forEach((t: any) => t.kill())\n scrollTriggerRef.current && scrollTriggerRef.current.kill()\n featuresTriggerRef.current && featuresTriggerRef.current.kill()\n }\n }, [inView])\n\n return (\n <div ref={inViewRef}>\n <div\n ref={innerRef}\n className={cn(\n 'slogan-container laptop:flex-row laptop:items-end laptop:justify-between text-info-primary flex h-auto w-full flex-col items-start justify-center gap-[24px] text-center',\n className\n )}\n >\n <Heading\n ref={titleRef}\n as={tag}\n size={2}\n weight={'bold'}\n align={'left'}\n className={cn(\n 'slogan-title laptop:text-[40px] desktop:text-[48px] lg-desktop:text-[64px] text-[40px] !leading-[1.1]'\n )}\n html={title}\n />\n {features && features.length > 0 && (\n <div className={cn('relative w-full max-w-[500px] overflow-hidden', `tablet:h-[${groupHeight}px]`)}>\n <div\n className={cn([\n 'flex flex-col',\n isTransitioning\n ? 'transition-transform duration-500 ease-[cubic-bezier(.4,0,.2,1)]'\n : '!transition-none',\n ])}\n style={{\n transform: `translateY(-${groupIndex * groupHeight}px)`,\n }}\n >\n {displayGroups.map((group, idx) => (\n <div\n className={cn(\n 'laptop:justify-end flex w-full flex-row items-stretch gap-3 overflow-hidden',\n `tablet:h-[${groupHeight}px]`\n )}\n key={idx}\n >\n {group.map((feature, index) => (\n <React.Fragment key={index}>\n {index > 0 && <div className=\"slogan-feature-divider w-px self-stretch bg-[#E4E5E6]\" />}\n <Text\n size={3}\n align=\"left\"\n as=\"p\"\n className=\"slogan-feature-text laptop:text-[14px] line-clamp-3 text-[12px] leading-[1.4]\"\n html={feature.title}\n />\n </React.Fragment>\n ))}\n </div>\n ))}\n </div>\n </div>\n )}\n </div>\n </div>\n )\n})\n\nSlogan.displayName = 'Slogan'\n\nexport default withLayout(Slogan)\n"],
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": ["jsx", "jsxs", "React", "useImperativeHandle", "useRef", "useEffect", "gsap", "SplitText", "ScrollTrigger", "cn", "Heading", "Text", "withLayout", "useInView", "componentType", "componentName", "chunkArray", "array", "size", "result", "i", "Slogan", "data", "className", "ref", "title", "features", "tag", "featureChunkSize", "groupIndex", "setGroupIndex", "isTransitioning", "setIsTransitioning", "innerRef", "scrollTriggerRef", "featuresTriggerRef", "featuresGroups", "totalGroups", "needCarousel", "displayGroups", "groupHeight", "inViewRef", "inView", "timer", "handle", "titleRef", "featuresRef", "splitTextInstance", "gsapResize", "height", "words", "self", "progress", "total", "interval", "overlap", "word", "start", "width", "opacity", "group", "idx", "feature", "index", "Slogan_default"]
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef, useEffect } from 'react'\nimport { gsap } from 'gsap'\nimport { SplitText } from 'gsap/dist/SplitText'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport { cn } from '../../helpers/utils.js'\nimport { Heading, Text } from '../../components/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type { SloganProps } from './types.js'\nimport { useInView } from 'react-intersection-observer'\n\nexport const componentType = 'copy'\nexport const componentName = 'brand_slogan'\n\nfunction chunkArray(array: { title: string }[] = [], size: number = 3) {\n const result = []\n for (let i = 0; i < array.length; i += size) {\n result.push(array.slice(i, i + size))\n }\n return result\n}\n\nconst Slogan = React.forwardRef<HTMLDivElement, SloganProps>(({ data, className = '', ...rest }, ref) => {\n const { title, features = [], tag = 'h1', featureChunkSize = 3 } = data\n const [groupIndex, setGroupIndex] = React.useState(0)\n const [isTransitioning, setIsTransitioning] = React.useState(true)\n const innerRef = useRef<HTMLDivElement>(null)\n const scrollTriggerRef = useRef<ScrollTrigger | null>(null)\n const featuresTriggerRef = useRef<ScrollTrigger | null>(null)\n const featuresGroups = chunkArray(features, featureChunkSize)\n const totalGroups = featuresGroups.length\n const needCarousel = features.length > featureChunkSize\n const displayGroups = needCarousel ? [...featuresGroups, featuresGroups[0]] : featuresGroups\n const groupHeight = 40\n\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n const { ref: inViewRef, inView } = useInView()\n\n // \u53EA\u5728\u9700\u8981\u8F6E\u64AD\u65F6\u542F\u7528\u5B9A\u65F6\u5668\n React.useEffect(() => {\n if (!needCarousel) return\n const timer = setInterval(() => {\n setGroupIndex(i => i + 1)\n setIsTransitioning(true)\n }, 3000)\n return () => clearInterval(timer)\n }, [totalGroups, needCarousel])\n\n // \u53EA\u5728\u9700\u8981\u8F6E\u64AD\u65F6\u5904\u7406\u65E0\u7F1D\u8DF3\u8F6C\n React.useEffect(() => {\n if (!needCarousel) return\n if (groupIndex === totalGroups) {\n const handle = setTimeout(() => {\n setIsTransitioning(false)\n setGroupIndex(0)\n }, 500) // 500ms\u7B49\u4E8E\u52A8\u753B\u65F6\u957F\n return () => clearTimeout(handle)\n } else {\n setIsTransitioning(true)\n }\n }, [groupIndex, totalGroups, needCarousel])\n\n // \u6807\u9898\u52A8\u753B\u903B\u8F91\u4FDD\u6301\u4E0D\u53D8\n const titleRef = useRef<HTMLHeadingElement>(null)\n const featuresRef = useRef<HTMLDivElement>(null)\n const splitTextInstance = useRef<SplitText | null>(null)\n\n useEffect(() => {\n gsap.registerPlugin(ScrollTrigger, SplitText)\n\n function gsapResize() {\n if (!titleRef.current) return\n splitTextInstance.current = new SplitText(titleRef.current, {\n type: 'words',\n wordsClass: 'word',\n })\n const height = titleRef.current?.clientHeight || 100\n\n const words = splitTextInstance.current.words\n gsap.set(words, { opacity: 0 })\n scrollTriggerRef.current = ScrollTrigger.create({\n trigger: titleRef.current,\n start: 'bottom bottom-=4%',\n end: `bottom+=${height * 1.5}px bottom-=4%`,\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 },\n })\n\n if (features && features.length > 0) {\n featuresTriggerRef.current = ScrollTrigger.create({\n trigger: featuresRef.current,\n start: `bottom+=${height * 2}px bottom-=6%`,\n end: `bottom+=${height * 2 + 100}px bottom-=6%`,\n onUpdate: (self: any) => {\n gsap.set(featuresRef.current, { opacity: self.progress })\n },\n })\n }\n }\n\n if (inView) {\n gsapResize()\n }\n\n return () => {\n splitTextInstance.current && splitTextInstance.current.revert()\n // ScrollTrigger.getAll().forEach((t: any) => t.kill())\n scrollTriggerRef.current && scrollTriggerRef.current.kill()\n featuresTriggerRef.current && featuresTriggerRef.current.kill()\n }\n }, [inView])\n\n return (\n <div ref={inViewRef}>\n <div\n ref={innerRef}\n {...rest}\n className={cn(\n 'slogan-container laptop:flex-row laptop:items-end laptop:justify-between text-info-primary flex h-auto w-full flex-col items-start justify-center gap-[24px] text-center',\n className\n )}\n >\n <Heading\n ref={titleRef}\n as={tag}\n size={2}\n weight={'bold'}\n align={'left'}\n className={cn(\n 'slogan-title laptop:text-[40px] desktop:text-[48px] lg-desktop:text-[64px] text-[40px] !leading-[1.1]'\n )}\n html={title}\n />\n {features && features.length > 0 && (\n <div className={cn('relative w-full max-w-[500px] overflow-hidden', `tablet:h-[${groupHeight}px]`)}>\n <div\n className={cn([\n 'flex flex-col',\n isTransitioning\n ? 'transition-transform duration-500 ease-[cubic-bezier(.4,0,.2,1)]'\n : '!transition-none',\n ])}\n style={{\n transform: `translateY(-${groupIndex * groupHeight}px)`,\n }}\n >\n {displayGroups.map((group, idx) => (\n <div\n className={cn(\n 'laptop:justify-end flex w-full flex-row items-stretch gap-3 overflow-hidden',\n `tablet:h-[${groupHeight}px]`\n )}\n key={idx}\n >\n {group.map((feature, index) => (\n <React.Fragment key={index}>\n {index > 0 && <div className=\"slogan-feature-divider w-px self-stretch bg-[#E4E5E6]\" />}\n <Text\n size={3}\n align=\"left\"\n as=\"p\"\n className=\"slogan-feature-text laptop:text-[14px] line-clamp-3 text-[12px] leading-[1.4]\"\n html={feature.title}\n />\n </React.Fragment>\n ))}\n </div>\n ))}\n </div>\n </div>\n )}\n </div>\n </div>\n )\n})\n\nSlogan.displayName = 'Slogan'\n\nexport default withLayout(Slogan)\n"],
|
|
5
|
+
"mappings": "aAuIQ,cAAAA,EAiCY,QAAAC,MAjCZ,oBAtIR,OAAOC,GAAS,uBAAAC,EAAqB,UAAAC,EAAQ,aAAAC,MAAiB,QAC9D,OAAS,QAAAC,MAAY,OACrB,OAAS,aAAAC,MAAiB,sBAC1B,OAAS,iBAAAC,MAAqB,0BAC9B,OAAS,MAAAC,MAAU,yBACnB,OAAS,WAAAC,EAAS,QAAAC,MAAY,4BAC9B,OAAS,cAAAC,MAAkB,yBAE3B,OAAS,aAAAC,MAAiB,8BAEnB,MAAMC,GAAgB,OAChBC,GAAgB,eAE7B,SAASC,EAAWC,EAA6B,CAAC,EAAGC,EAAe,EAAG,CACrE,MAAMC,EAAS,CAAC,EAChB,QAASC,EAAI,EAAGA,EAAIH,EAAM,OAAQG,GAAKF,EACrCC,EAAO,KAAKF,EAAM,MAAMG,EAAGA,EAAIF,CAAI,CAAC,EAEtC,OAAOC,CACT,CAEA,MAAME,EAASnB,EAAM,WAAwC,CAAC,CAAE,KAAAoB,EAAM,UAAAC,EAAY,GAAI,GAAGC,CAAK,EAAGC,IAAQ,CACvG,KAAM,CAAE,MAAAC,EAAO,SAAAC,EAAW,CAAC,EAAG,IAAAC,EAAM,KAAM,iBAAAC,EAAmB,CAAE,EAAIP,EAC7D,CAACQ,EAAYC,CAAa,EAAI7B,EAAM,SAAS,CAAC,EAC9C,CAAC8B,EAAiBC,CAAkB,EAAI/B,EAAM,SAAS,EAAI,EAC3DgC,EAAW9B,EAAuB,IAAI,EACtC+B,EAAmB/B,EAA6B,IAAI,EACpDgC,EAAqBhC,EAA6B,IAAI,EACtDiC,EAAiBrB,EAAWW,EAAUE,CAAgB,EACtDS,EAAcD,EAAe,OAC7BE,EAAeZ,EAAS,OAASE,EACjCW,EAAgBD,EAAe,CAAC,GAAGF,EAAgBA,EAAe,CAAC,CAAC,EAAIA,EACxEI,EAAc,GAEpBtC,EAAoBsB,EAAK,IAAMS,EAAS,OAAyB,EAEjE,KAAM,CAAE,IAAKQ,EAAW,OAAAC,CAAO,EAAI9B,EAAU,EAG7CX,EAAM,UAAU,IAAM,CACpB,GAAI,CAACqC,EAAc,OACnB,MAAMK,EAAQ,YAAY,IAAM,CAC9Bb,EAAcX,GAAKA,EAAI,CAAC,EACxBa,EAAmB,EAAI,CACzB,EAAG,GAAI,EACP,MAAO,IAAM,cAAcW,CAAK,CAClC,EAAG,CAACN,EAAaC,CAAY,CAAC,EAG9BrC,EAAM,UAAU,IAAM,CACpB,GAAKqC,EACL,GAAIT,IAAeQ,EAAa,CAC9B,MAAMO,EAAS,WAAW,IAAM,CAC9BZ,EAAmB,EAAK,EACxBF,EAAc,CAAC,CACjB,EAAG,GAAG,EACN,MAAO,IAAM,aAAac,CAAM,CAClC,MACEZ,EAAmB,EAAI,CAE3B,EAAG,CAACH,EAAYQ,EAAaC,CAAY,CAAC,EAG1C,MAAMO,EAAW1C,EAA2B,IAAI,EAC1C2C,EAAc3C,EAAuB,IAAI,EACzC4C,EAAoB5C,EAAyB,IAAI,EAEvD,OAAAC,EAAU,IAAM,CACdC,EAAK,eAAeE,EAAeD,CAAS,EAE5C,SAAS0C,GAAa,CACpB,GAAI,CAACH,EAAS,QAAS,OACvBE,EAAkB,QAAU,IAAIzC,EAAUuC,EAAS,QAAS,CAC1D,KAAM,QACN,WAAY,MACd,CAAC,EACD,MAAMI,EAASJ,EAAS,SAAS,cAAgB,IAE3CK,EAAQH,EAAkB,QAAQ,MACxC1C,EAAK,IAAI6C,EAAO,CAAE,QAAS,CAAE,CAAC,EAC9BhB,EAAiB,QAAU3B,EAAc,OAAO,CAC9C,QAASsC,EAAS,QAClB,MAAO,oBACP,IAAK,WAAWI,EAAS,GAAG,gBAC5B,MAAO,GACP,SAAWE,GAAc,CACvB,MAAMC,EAAWD,EAAK,SAChBE,EAAQH,EAAM,OACdI,EAAW,EAAID,EACfE,EAAU,GAChBL,EAAM,QAAQ,CAACM,EAAWrC,IAAc,CACtC,MAAMsC,EAAStC,EAAIkC,GAAU,EAAIE,GAC3BG,EAAQJ,GAAY,EAAIC,GAC9B,IAAII,GAAWP,EAAWK,GAASC,EACnCC,EAAU,KAAK,IAAI,EAAG,KAAK,IAAIA,EAAS,CAAC,CAAC,EAC1CtD,EAAK,IAAImD,EAAM,CAAE,QAAAG,CAAQ,CAAC,CAC5B,CAAC,CACH,CACF,CAAC,EAEGjC,GAAYA,EAAS,OAAS,IAChCS,EAAmB,QAAU5B,EAAc,OAAO,CAChD,QAASuC,EAAY,QACrB,MAAO,WAAWG,EAAS,CAAC,gBAC5B,IAAK,WAAWA,EAAS,EAAI,GAAG,gBAChC,SAAWE,GAAc,CACvB9C,EAAK,IAAIyC,EAAY,QAAS,CAAE,QAASK,EAAK,QAAS,CAAC,CAC1D,CACF,CAAC,EAEL,CAEA,OAAIT,GACFM,EAAW,EAGN,IAAM,CACXD,EAAkB,SAAWA,EAAkB,QAAQ,OAAO,EAE9Db,EAAiB,SAAWA,EAAiB,QAAQ,KAAK,EAC1DC,EAAmB,SAAWA,EAAmB,QAAQ,KAAK,CAChE,CACF,EAAG,CAACO,CAAM,CAAC,EAGT3C,EAAC,OAAI,IAAK0C,EACR,SAAAzC,EAAC,OACC,IAAKiC,EACJ,GAAGV,EACJ,UAAWf,EACT,2KACAc,CACF,EAEA,UAAAvB,EAACU,EAAA,CACC,IAAKoC,EACL,GAAIlB,EACJ,KAAM,EACN,OAAQ,OACR,MAAO,OACP,UAAWnB,EACT,uGACF,EACA,KAAMiB,EACR,EACCC,GAAYA,EAAS,OAAS,GAC7B3B,EAAC,OAAI,UAAWS,EAAG,gDAAiD,aAAagC,CAAW,KAAK,EAC/F,SAAAzC,EAAC,OACC,UAAWS,EAAG,CACZ,gBACAuB,EACI,mEACA,kBACN,CAAC,EACD,MAAO,CACL,UAAW,eAAeF,EAAaW,CAAW,KACpD,EAEC,SAAAD,EAAc,IAAI,CAACqB,EAAOC,IACzB9D,EAAC,OACC,UAAWS,EACT,8EACA,aAAagC,CAAW,KAC1B,EAGC,SAAAoB,EAAM,IAAI,CAACE,EAASC,IACnB/D,EAACC,EAAM,SAAN,CACE,UAAA8D,EAAQ,GAAKhE,EAAC,OAAI,UAAU,wDAAwD,EACrFA,EAACW,EAAA,CACC,KAAM,EACN,MAAM,OACN,GAAG,IACH,UAAU,gFACV,KAAMoD,EAAQ,MAChB,IARmBC,CASrB,CACD,GAbIF,CAcP,CACD,EACH,EACF,GAEJ,EACF,CAEJ,CAAC,EAEDzC,EAAO,YAAc,SAErB,IAAO4C,GAAQrD,EAAWS,CAAM",
|
|
6
|
+
"names": ["jsx", "jsxs", "React", "useImperativeHandle", "useRef", "useEffect", "gsap", "SplitText", "ScrollTrigger", "cn", "Heading", "Text", "withLayout", "useInView", "componentType", "componentName", "chunkArray", "array", "size", "result", "i", "Slogan", "data", "className", "rest", "ref", "title", "features", "tag", "featureChunkSize", "groupIndex", "setGroupIndex", "isTransitioning", "setIsTransitioning", "innerRef", "scrollTriggerRef", "featuresTriggerRef", "featuresGroups", "totalGroups", "needCarousel", "displayGroups", "groupHeight", "inViewRef", "inView", "timer", "handle", "titleRef", "featuresRef", "splitTextInstance", "gsapResize", "height", "words", "self", "progress", "total", "interval", "overlap", "word", "start", "width", "opacity", "group", "idx", "feature", "index", "Slogan_default"]
|
|
7
7
|
}
|