Merge pull request #524 from davidjerleke/feature/#507

Make `containScroll: 'trimSnaps'` default
davidjerleke · Jul 8, 2023 · 11e5d06 · 11e5d06
2 parents 33a7e51 + e7fa164
commit 11e5d06
Show file tree

Hide file tree

Showing 11 changed files with 14 additions and 5 deletions.
diff --git a/...bla-carousel-docs/src/components/CarouselGenerator/CarouselGeneratorAlignmentSettings.tsx b/...bla-carousel-docs/src/components/CarouselGenerator/CarouselGeneratorAlignmentSettings.tsx
@@ -150,7 +150,7 @@ export const CarouselGeneratorAlignmentSettings = () => {
   const align = formData[INPUT_ALIGN.FIELD_NAME]
   const containScroll = formData[INPUT_CONTAIN_SCROLL.FIELD_NAME]
     ? 'trimSnaps'
-    : null
+    : false
   const [options, setOptions] = useState<EmblaOptionsType>({
     align,
     containScroll,

diff --git a/packages/embla-carousel-docs/src/components/CarouselGenerator/CarouselGeneratorContext.tsx b/packages/embla-carousel-docs/src/components/CarouselGenerator/CarouselGeneratorContext.tsx
@@ -20,7 +20,7 @@ export const CONTEXT_DEFAULT_VALUE: CarouselGeneratorContextType = {
     slideGapSize: '10',
     edgeGap: '0',
     align: 'center',
-    containScroll: false,
+    containScroll: true,
     navigationPrevNextButtons: false,
     navigationDots: false,
     autoplay: false,

diff --git a/packages/embla-carousel-docs/src/components/Examples/Basic/Align.tsx b/packages/embla-carousel-docs/src/components/Examples/Basic/Align.tsx
@@ -9,7 +9,10 @@ import { arrayFromNumber } from 'utils/arrayFromNumber'
 
 export const ID = 'embla-carousel-align'
 export const SLIDES = arrayFromNumber(5)
-export const OPTIONS: EmblaOptionsType = { align: 'center' }
+export const OPTIONS: EmblaOptionsType = {
+  align: 'center',
+  containScroll: false
+}
 export const STYLES = createCarouselDefaultStyles('80%')
 
 export const Wrapper = styled.div`

diff --git a/...cs/src/components/Sandbox/React/SandboxFilesDist/IosPicker/EmblaCarouselIosPickerItem.jsx b/...cs/src/components/Sandbox/React/SandboxFilesDist/IosPicker/EmblaCarouselIosPickerItem.jsx
@@ -70,6 +70,7 @@ export const IosPickerItem = (props) => {
     loop,
     axis: 'y',
     dragFree: true,
+    containScroll: false,
     watchResize: false,
     watchSlides: false
   })

diff --git a/...cs/src/components/Sandbox/React/SandboxFilesDist/IosPicker/EmblaCarouselIosPickerItem.tsx b/...cs/src/components/Sandbox/React/SandboxFilesDist/IosPicker/EmblaCarouselIosPickerItem.tsx
@@ -95,6 +95,7 @@ export const IosPickerItem: React.FC<PropType> = (props) => {
     loop,
     axis: 'y',
     dragFree: true,
+    containScroll: false,
     watchResize: false,
     watchSlides: false
   })

diff --git a/...ocs/src/components/Sandbox/React/SandboxFilesSrc/IosPicker/EmblaCarouselIosPickerItem.tsx b/...ocs/src/components/Sandbox/React/SandboxFilesSrc/IosPicker/EmblaCarouselIosPickerItem.tsx
@@ -95,6 +95,7 @@ export const IosPickerItem: React.FC<PropType> = (props) => {
     loop,
     axis: 'y',
     dragFree: true,
+    containScroll: false,
     watchResize: false,
     watchSlides: false
   })

diff --git a/...-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesDist/IosPicker/EmblaCarousel.js b/...-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesDist/IosPicker/EmblaCarousel.js
@@ -12,6 +12,7 @@ const iosPickerNodes = Array.from(wheelNodes)
 const iosPickers = iosPickerNodes.map((iosPickerNode) =>
   setupIosPicker(iosPickerNode, {
     dragFree: true,
+    containScroll: false,
     loop: LOOP,
     axis: 'y',
     watchResize: false,

diff --git a/...-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesDist/IosPicker/EmblaCarousel.ts b/...-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesDist/IosPicker/EmblaCarousel.ts
@@ -12,6 +12,7 @@ const iosPickerNodes = <HTMLElement[]>Array.from(wheelNodes)
 const iosPickers = iosPickerNodes.map((iosPickerNode) =>
   setupIosPicker(iosPickerNode, {
     dragFree: true,
+    containScroll: false,
     loop: LOOP,
     axis: 'y',
     watchResize: false,

diff --git a/...a-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesSrc/IosPicker/EmblaCarousel.ts b/...a-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesSrc/IosPicker/EmblaCarousel.ts
@@ -12,6 +12,7 @@ const iosPickerNodes = <HTMLElement[]>Array.from(wheelNodes)
 const iosPickers = iosPickerNodes.map((iosPickerNode) =>
   setupIosPicker(iosPickerNode, {
     dragFree: true,
+    containScroll: false,
     loop: LOOP,
     axis: 'y',
     watchResize: false,

diff --git a/packages/embla-carousel/src/components/Options.ts b/packages/embla-carousel/src/components/Options.ts
@@ -43,7 +43,7 @@ export const defaultOptions: OptionsType = {
   axis: 'x',
   container: null,
   slides: null,
-  containScroll: null,
+  containScroll: 'trimSnaps',
   direction: 'ltr',
   slidesToScroll: 1,
   breakpoints: {},

diff --git a/packages/embla-carousel/src/components/ScrollContain.ts b/packages/embla-carousel/src/components/ScrollContain.ts
@@ -1,7 +1,7 @@
 import { Limit, LimitType } from './Limit'
 import { arrayLast } from './utils'
 
-export type ScrollContainOptionType = null | 'trimSnaps' | 'keepSnaps'
+export type ScrollContainOptionType = false | 'trimSnaps' | 'keepSnaps'
 
 export type ScrollContainType = {
   snapsContained: number[]