fix: with swiper

WTTJ · Feb 7, 2024 · 1ad62cc · 1ad62cc
1 parent a7ec837
commit 1ad62cc
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 9 deletions.
diff --git a/docs/pages/components/modal.mdx b/docs/pages/components/modal.mdx
@@ -538,7 +538,7 @@ function() {
       >
         {isOpen && (
           <AssetModal.Content>
-            <Swiper store={swiper} h={400}>
+            <Swiper store={swiper} h="calc(100vh - 10rem)">
               <img
                 style={{ maxWidth: '100%', maxHeight: '100%', objectFit: 'contain' }}
                 src="https://images.unsplash.com/photo-1564460549828-f0219a31bf90?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80"
@@ -565,7 +565,7 @@ For `AssetWithTitle`:
 ```jsx
 function() {
   const modal = useModal()
-  const swiper = useSwiper({ firstSlideToShow: 1, spaceBetween: 0 })
+  const swiper = useSwiper({ firstSlideToShow: 3, spaceBetween: 0 })
 
   const isOpen = modal.useState().open
 
@@ -583,7 +583,7 @@ function() {
         {isOpen && (
           <AssetModal.Content>
             <Swiper store={swiper}>
-              <AssetModal.AssetWithTitle title="title1">
+              <AssetModal.AssetWithTitle title="title 1">
                   <AssetModal.Iframe>
                     <iframe
                       src="https://www.youtube.com/embed/1kjATTF4v5A"
@@ -593,7 +593,7 @@ function() {
                     />
                 </AssetModal.Iframe>
               </Asset.AssetWithTitle>
-              <AssetModal.AssetWithTitle title="title1">
+              <AssetModal.AssetWithTitle title="title 2">
                   <AssetModal.Iframe>
                     <iframe
                       src="https://www.youtube.com/embed/1kjATTF4v5A"
@@ -603,7 +603,7 @@ function() {
                     />
                 </AssetModal.Iframe>
               </Asset.AssetWithTitle>
-              <AssetModal.AssetWithTitle title="title1">
+              <AssetModal.AssetWithTitle title="title 3">
                   <AssetModal.Iframe>
                     <iframe
                       src="https://www.youtube.com/embed/1kjATTF4v5A"

diff --git a/packages/Modal/package.json b/packages/Modal/package.json
@@ -54,6 +54,7 @@
     "@welcome-ui/close-button": "^5.6.1",
     "@welcome-ui/icons.font": "^5.5.0",
     "@welcome-ui/shape": "^5.6.1",
+    "@welcome-ui/swiper": "^5.11.0-alpha.10",
     "@welcome-ui/system": "^5.0.0",
     "@welcome-ui/text": "^5.6.1",
     "@welcome-ui/utils": "^5.0.0"

diff --git a/packages/Modal/src/Assets/styles.ts b/packages/Modal/src/Assets/styles.ts
@@ -1,24 +1,32 @@
-import styled, { th } from '@xstyled/styled-components'
+import styled, { css, th } from '@xstyled/styled-components'
 import { Text } from '@welcome-ui/text'
+import { StyledSwiper } from '@welcome-ui/swiper'
 
 const contentWidthDesktop = 'calc(100vw - 2 * 2rem);'
 const contentWidthMobile = 'calc(100vw - 2 * 1rem);'
 const contentHeight = 'calc(100vh - 2 * 5rem);'
 
-export const Iframe = styled.div`
+const sizeOfElements = css`
   width: ${contentWidthMobile};
   max-height: ${contentHeight};
-  flex: 1;
 
   @media (min-width: md) {
-    aspect-ratio: 16 / 9;
     width: ${contentWidthDesktop};
   }
 
   // for big screens
   @media (min-width: 1700px) {
     max-width: 1600;
   }
+`
+
+export const Iframe = styled.div`
+  ${sizeOfElements};
+  flex: 1;
+
+  @media (min-width: md) {
+    aspect-ratio: 16 / 9;
+  }
 
   iframe {
     width: 100%;
@@ -28,6 +36,7 @@ export const Iframe = styled.div`
 
 export const Content = styled.divBox`
   transition: margin-top 250ms ease-in-out;
+  border: 10px solid red;
 
   > img,
   > div {
@@ -57,6 +66,10 @@ export const Dialog = styled.div`
   opacity: 0;
   transition: opacity 250ms ease-in-out;
 
+  &:has(${StyledSwiper}) {
+    ${sizeOfElements};
+  }
+
   ${Content} {
     margin-top: xl;
   }

diff --git a/packages/Swiper/src/index.tsx b/packages/Swiper/src/index.tsx
@@ -353,3 +353,4 @@ export const Swiper = ({ children, dataTestId, store, ...rest }: SwiperProps) =>
 }
 
 Swiper.displayName = 'Swiper'
+export const StyledSwiper = S.Swiper