@cleartrip/ct-design-horizontal-scroll 4.0.0 → 5.1.0

package/src/HorizontalScroll.tsx

@@ -0,0 +1,62 @@
+import { forwardRef, useRef } from 'react';
+
+import { css } from '@emotion/css';
+import { Container } from '@cleartrip/ct-design-container';
+import { IHorizontalScroll } from './type';
+import useMergeRefs from '@cleartrip/ct-design-use-merge-refs';
+import { useWebMergeStyles } from '@cleartrip/ct-design-style-manager';
+import { ScrollContainerRef } from '@cleartrip/ct-design-scroll-container';
+
+// todo @raghav to revisit this
+
+const horizontalScrollStyles = css`
+  display: flex;
+  white-space: no-wrap;
+  overflow-x: auto;
+  scroll-behavior: smooth;
+  -webkit-tap-highlight-color: transparent;
+  scrollbar-width: none; /* Firefox */
+  -ms-overflow-style: none; /* Internet Explorer 10+ */
+
+  &::-webkit-scrollbar {
+    /* WebKit */
+    display: none;
+  }
+`;
+
+const HorizontalScroll = forwardRef<ScrollContainerRef, IHorizontalScroll>(
+  ({ children, styleConfig = {}, onScroll }, forwardRef) => {
+    const { root, childContainer } = styleConfig;
+
+    const horizontalScrollRef = useRef<HTMLDivElement>(null);
+    const parentContainerRef = useRef<HTMLDivElement>(null);
+    const childContainerRef = useRef<HTMLElement>(null);
+    const combinedParentContainerRef = useMergeRefs(parentContainerRef, forwardRef);
+    const combinedParenAndChildContainerRef = useMergeRefs(parentContainerRef, childContainerRef);
+
+    const rootStyles = useWebMergeStyles([...(root || []), horizontalScrollStyles], [root]);
+
+    const handleScroll = (event: React.UIEvent<HTMLDivElement>) => {
+      onScroll?.({
+        nativeEvent: {
+          contentOffset: { x: event.currentTarget.scrollLeft, y: event.currentTarget.scrollTop },
+          layoutMeasurement: { height: event.currentTarget.clientHeight, width: event.currentTarget.clientWidth },
+          contentSize: { height: event.currentTarget.scrollHeight, width: event.currentTarget.scrollWidth },
+        },
+      });
+    };
+
+    return (
+      <div ref={horizontalScrollRef} onScroll={handleScroll}>
+        <div ref={combinedParentContainerRef} className={rootStyles}>
+          <Container styleConfig={{ root: childContainer }} ref={combinedParenAndChildContainerRef}>
+            {children}
+          </Container>
+        </div>
+      </div>
+    );
+  },
+);
+
+HorizontalScroll.displayName = 'HorizontalScroll';
+export default HorizontalScroll;

package/src/constants.ts

@@ -0,0 +1,10 @@
+export enum ARROW_DIRECTION {
+  LEFT = 'LEFT',
+  RIGHT = 'RIGHT',
+}
+
+export enum ARROW_SIZE {
+  SM = 'sm',
+  MD = 'md',
+  LG = 'lg',
+}

package/src/index.native.ts

@@ -0,0 +1,3 @@
+export { default as HorizontalScroll } from './HorizontalScroll.native';
+export type * from './type';
+export * from './constants';

package/src/index.ts

@@ -0,0 +1,3 @@
+export { default as HorizontalScroll } from './HorizontalScroll';
+export type * from './type';
+export * from './constants';

package/src/style.ts

@@ -0,0 +1,86 @@
+import { makeStyles } from '@cleartrip/ct-design-style-manager';
+
+/**
+ * Default fade-out gradient for the left edge shadow when the caller
+ * hasn't supplied `shadowGradientStyle.left`.
+ * @web
+ */
+export const DEFAULT_LEFT_SHADOW_GRADIENT = 'linear-gradient(90deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%)';
+
+/**
+ * Default fade-out gradient for the right edge shadow when the caller
+ * hasn't supplied `shadowGradientStyle.right`.
+ * @web
+ */
+export const DEFAULT_RIGHT_SHADOW_GRADIENT = 'linear-gradient(270deg, #ffffff 0%, rgba(255, 255, 255, 0) 100%)';
+
+/**
+ * Default horizontal extent of the shadow overlays on either side.
+ * @web
+ */
+export const DEFAULT_SHADOW_WIDTH = '64px';
+
+/**
+ * Static, theme-independent styles shared by the HorizontalScroll
+ * web and native implementations. The keys prefixed `native*` are
+ * only consumed by `HorizontalScroll.native.tsx`; `web*` keys and
+ * the shared layout keys are consumed by `HorizontalScroll.tsx` via
+ * `useWebMergeStyles`.
+ */
+const staticHorizontalScrollStyles = makeStyles((theme) => ({
+  /**
+   * Native content-container default: horizontal row with
+   * theme-driven gap so siblings fall into a horizontal flow.
+   */
+  nativeContent: {
+    display: 'flex',
+    flexDirection: 'row',
+    gap: theme?.spacing[3],
+  },
+  /**
+   * Web scroll viewport. Hides the native scrollbar across all
+   * engines and enables smooth horizontal scroll. Nested selector
+   * is processed by emotion under the hood.
+   */
+  webScrollWrapper: {
+    display: 'flex',
+    whiteSpace: 'nowrap',
+    overflowX: 'auto',
+    scrollBehavior: 'smooth',
+    WebkitTapHighlightColor: 'transparent',
+    scrollbarWidth: 'none',
+    msOverflowStyle: 'none',
+    '&::-webkit-scrollbar': {
+      display: 'none',
+    },
+  },
+  /**
+   * Shared layout for the edge shadow overlays on web. Dynamic
+   * width + gradient are applied on top via useStyles in the
+   * component.
+   */
+  webShadowBase: {
+    position: 'absolute',
+    top: 0,
+    height: '100%',
+    display: 'flex',
+    alignItems: 'center',
+    zIndex: 10,
+  },
+  /**
+   * Left-shadow-specific overrides layered over `webShadowBase`.
+   */
+  webLeftShadow: {
+    left: 0,
+    justifyContent: 'flex-start',
+  },
+  /**
+   * Right-shadow-specific overrides layered over `webShadowBase`.
+   */
+  webRightShadow: {
+    right: 0,
+    justifyContent: 'flex-end',
+  },
+}));
+
+export default staticHorizontalScrollStyles;

package/src/type.ts

@@ -0,0 +1,67 @@
+import { Styles, ViewStyle } from '@cleartrip/ct-design-types';
+import { IScrollContainer } from '@cleartrip/ct-design-scroll-container';
+import { ARROW_SIZE } from './constants';
+
+export interface IHorizontalScroll extends IScrollContainer {
+  children?: React.ReactNode;
+  /**
+   * Style configuration for Horizontal Scroll component
+   */
+  styleConfig?: {
+    /**
+     * Style configuration for root container for Horizonatal Scroll
+     * !NOTE: This works only in case of web
+     */
+    root?: Styles[];
+    /**
+     * Style configuration for child container for Horizonatal Scroll
+     */
+    childContainer?: Styles[];
+  };
+  width?: number; // Fixed width of each child container
+  /**
+   * @description Triggers when index changes
+   */
+  onIndexChange?: (index: number) => void; // Triggers when index changes
+  /**
+   * @description Current active index
+   */
+  currentActiveIndex?: number;
+  /**
+   * @description Paging enabled
+   */
+  pagingEnabled?: boolean;
+  /**
+   * @description Snap to offsets
+   */
+  snapToOffsets?: number[];
+  /**
+   * @description Deceleration rate
+   */
+  decelerationRate?: number;
+  /**
+   * @description Total items length
+   */
+  totalItemsLength?: number;
+  /**
+   * @description Custom content container style
+   */
+  customContentContainerStyle?: ViewStyle;
+  /**
+   * @description Wrap intersection observer
+   */
+  wrapIntersectionObserver?: boolean;
+
+  /**
+   * @description Arrow size
+   */
+  arrowSize?: `${ARROW_SIZE}`;
+  /**
+   * @description Shadow gradient style
+   */
+  shadowGradientStyle?: IShadowGradient;
+}
+export interface IShadowGradient {
+  left: string;
+  right: string;
+}

package/dist/StyledHorizontalScroll/StyledHorizontalScroll.d.ts

@@ -1,6 +0,0 @@
-import { CSSProperties } from 'styled-components';
-declare const StyledHorizontalScroll: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
-    css?: CSSProperties | undefined;
-}, never>;
-export default StyledHorizontalScroll;
-//# sourceMappingURL=StyledHorizontalScroll.d.ts.map

package/dist/StyledHorizontalScroll/StyledHorizontalScroll.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"StyledHorizontalScroll.d.ts","sourceRoot":"","sources":["../../packages/components/HorizontalScroll/src/StyledHorizontalScroll/StyledHorizontalScroll.tsx"],"names":[],"mappings":"AAAA,OAAe,EAAc,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAEtE,QAAA,MAAM,sBAAsB;;SAkB3B,CAAC;AAEF,eAAe,sBAAsB,CAAC"}

package/dist/StyledHorizontalScroll/index.d.ts

@@ -1,2 +0,0 @@
-export { default as StyledHorizontalScroll } from './StyledHorizontalScroll';
-//# sourceMappingURL=index.d.ts.map

package/dist/StyledHorizontalScroll/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/components/HorizontalScroll/src/StyledHorizontalScroll/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,0BAA0B,CAAC"}

package/dist/StyledLeftShadow/StyledLeftShadow.d.ts

@@ -1,11 +0,0 @@
-import { CSSProperties } from "styled-components";
-import { IShadowGradientStyle } from '../type';
-export interface StyledLeftShadowProps {
-    width?: string;
-    shadowGradientStyle?: IShadowGradientStyle;
-}
-declare const StyledLeftShadow: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, StyledLeftShadowProps & {
-    css?: CSSProperties | undefined;
-}, never>;
-export default StyledLeftShadow;
-//# sourceMappingURL=StyledLeftShadow.d.ts.map

package/dist/StyledLeftShadow/StyledLeftShadow.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"StyledLeftShadow.d.ts","sourceRoot":"","sources":["../../packages/components/HorizontalScroll/src/StyledLeftShadow/StyledLeftShadow.tsx"],"names":[],"mappings":"AAAA,OAAe,EAAc,aAAa,EAAE,MAAO,mBAAmB,CAAC;AACvE,OAAO,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAG/C,MAAM,WAAW,qBAAqB;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IAClB,mBAAmB,CAAC,EAAE,oBAAoB,CAAC;CAC3C;AAED,QAAA,MAAM,gBAAgB;;SAiBrB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/dist/StyledLeftShadow/index.d.ts

@@ -1,2 +0,0 @@
-export { default as StyledLeftShadow } from './StyledLeftShadow';
-//# sourceMappingURL=index.d.ts.map

package/dist/StyledLeftShadow/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/components/HorizontalScroll/src/StyledLeftShadow/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/StyledRightShadow/StyledRightShadow.d.ts

@@ -1,11 +0,0 @@
-import { CSSProperties } from 'styled-components';
-import { IShadowGradientStyle } from '../type';
-export interface StyledRightShadowProps {
-    width?: string;
-    shadowGradientStyle?: IShadowGradientStyle;
-}
-declare const StyledRightShadow: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, StyledRightShadowProps & {
-    css?: CSSProperties | undefined;
-}, never>;
-export default StyledRightShadow;
-//# sourceMappingURL=StyledRightShadow.d.ts.map

package/dist/StyledRightShadow/StyledRightShadow.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"StyledRightShadow.d.ts","sourceRoot":"","sources":["../../packages/components/HorizontalScroll/src/StyledRightShadow/StyledRightShadow.tsx"],"names":[],"mappings":"AAAA,OAAe,EAAe,aAAa,EAAE,MAAM,mBAAmB,CAAC;AACvE,OAAO,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAE/C,MAAM,WAAW,sBAAsB;IACtC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mBAAmB,CAAC,EAAE,oBAAoB,CAAC;CAC3C;AAED,QAAA,MAAM,iBAAiB;;SAiBtB,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/dist/StyledRightShadow/index.d.ts

@@ -1,2 +0,0 @@
-export { default as StyledRightShadow } from './StyledRightShadow';
-//# sourceMappingURL=index.d.ts.map

package/dist/StyledRightShadow/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/components/HorizontalScroll/src/StyledRightShadow/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,qBAAqB,CAAC"}