@cleartrip/ct-design-horizontal-scroll 4.0.0-TEST.3 → 5.0.0
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/README.md +85 -0
- package/dist/HorizontalScroll.d.ts +3 -3
- package/dist/HorizontalScroll.d.ts.map +1 -1
- package/dist/HorizontalScroll.native.d.ts +5 -0
- package/dist/HorizontalScroll.native.d.ts.map +1 -0
- package/dist/constants.d.ts +10 -0
- package/dist/constants.d.ts.map +1 -0
- package/dist/ct-design-horizontal-scroll.browser.cjs.js +14 -1
- package/dist/ct-design-horizontal-scroll.browser.cjs.js.map +1 -1
- package/dist/ct-design-horizontal-scroll.browser.esm.js +14 -1
- package/dist/ct-design-horizontal-scroll.browser.esm.js.map +1 -1
- package/dist/ct-design-horizontal-scroll.cjs.js +40 -128
- package/dist/ct-design-horizontal-scroll.cjs.js.map +1 -1
- package/dist/ct-design-horizontal-scroll.esm.js +42 -128
- package/dist/ct-design-horizontal-scroll.esm.js.map +1 -1
- package/dist/ct-design-horizontal-scroll.umd.js +1619 -1871
- package/dist/ct-design-horizontal-scroll.umd.js.map +1 -1
- package/dist/index.d.ts +2 -2
- package/dist/index.d.ts.map +1 -1
- package/dist/index.native.d.ts +4 -0
- package/dist/index.native.d.ts.map +1 -0
- package/dist/style.d.ts +40 -0
- package/dist/style.d.ts.map +1 -0
- package/dist/type.d.ts +21 -27
- package/dist/type.d.ts.map +1 -1
- package/package.json +31 -12
- package/src/HorizontalScroll.native.tsx +80 -0
- package/src/HorizontalScroll.tsx +62 -0
- package/src/constants.ts +10 -0
- package/src/index.native.ts +3 -0
- package/src/index.ts +3 -0
- package/src/style.ts +86 -0
- package/src/type.ts +67 -0
- package/dist/StyledHorizontalScroll/StyledHorizontalScroll.d.ts +0 -6
- package/dist/StyledHorizontalScroll/StyledHorizontalScroll.d.ts.map +0 -1
- package/dist/StyledHorizontalScroll/index.d.ts +0 -2
- package/dist/StyledHorizontalScroll/index.d.ts.map +0 -1
- package/dist/StyledLeftShadow/StyledLeftShadow.d.ts +0 -11
- package/dist/StyledLeftShadow/StyledLeftShadow.d.ts.map +0 -1
- package/dist/StyledLeftShadow/index.d.ts +0 -2
- package/dist/StyledLeftShadow/index.d.ts.map +0 -1
- package/dist/StyledRightShadow/StyledRightShadow.d.ts +0 -11
- package/dist/StyledRightShadow/StyledRightShadow.d.ts.map +0 -1
- package/dist/StyledRightShadow/index.d.ts +0 -2
- package/dist/StyledRightShadow/index.d.ts.map +0 -1
package/README.md
ADDED
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
# HorizontalScroll
|
|
2
|
+
|
|
3
|
+
A container that enables horizontal scrolling for its content.
|
|
4
|
+
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
## Installation
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
npm install @cleartrip/ct-design-horizontal-scroll
|
|
11
|
+
# or
|
|
12
|
+
pnpm add @cleartrip/ct-design-horizontal-scroll
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
### Peer dependencies
|
|
16
|
+
|
|
17
|
+
```bash
|
|
18
|
+
# Required for all targets
|
|
19
|
+
npm install react
|
|
20
|
+
|
|
21
|
+
# Web only
|
|
22
|
+
npm install react-dom
|
|
23
|
+
|
|
24
|
+
# React Native only
|
|
25
|
+
npm install react-native
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
---
|
|
29
|
+
|
|
30
|
+
## Usage
|
|
31
|
+
|
|
32
|
+
### Basic
|
|
33
|
+
|
|
34
|
+
```tsx
|
|
35
|
+
import { HorizontalScroll } from '@cleartrip/ct-design-horizontal-scroll';
|
|
36
|
+
|
|
37
|
+
function Example() {
|
|
38
|
+
return (
|
|
39
|
+
<HorizontalScroll>
|
|
40
|
+
{/* Basic usage */}
|
|
41
|
+
</HorizontalScroll>
|
|
42
|
+
);
|
|
43
|
+
}
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
---
|
|
47
|
+
|
|
48
|
+
## ARROW_DIRECTION
|
|
49
|
+
|
|
50
|
+
- `LEFT` — LEFT
|
|
51
|
+
- `RIGHT` — RIGHT
|
|
52
|
+
---
|
|
53
|
+
|
|
54
|
+
## ARROW_SIZE
|
|
55
|
+
|
|
56
|
+
- `SM` — sm
|
|
57
|
+
- `MD` — md
|
|
58
|
+
- `LG` — lg
|
|
59
|
+
---
|
|
60
|
+
|
|
61
|
+
## Props
|
|
62
|
+
|
|
63
|
+
| Prop | Type | Default | Required | Description |
|
|
64
|
+
|------|------|---------|----------|-------------|
|
|
65
|
+
| `children` | `ReactNode` | — | No | children property |
|
|
66
|
+
|
|
67
|
+
|
|
68
|
+
---
|
|
69
|
+
|
|
70
|
+
## Accessibility
|
|
71
|
+
|
|
72
|
+
- The component follows accessibility best practices
|
|
73
|
+
- Ensure proper ARIA attributes are provided where needed
|
|
74
|
+
- Test with screen readers to ensure usability
|
|
75
|
+
|
|
76
|
+
---
|
|
77
|
+
|
|
78
|
+
## Migration
|
|
79
|
+
|
|
80
|
+
If migrating from a previous version:
|
|
81
|
+
|
|
82
|
+
```diff
|
|
83
|
+
- import { HorizontalScroll } from 'yagami/core/components';
|
|
84
|
+
+ import { HorizontalScroll } from '@cleartrip/ct-design-horizontal-scroll';
|
|
85
|
+
```
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
|
|
2
|
-
import {
|
|
3
|
-
declare const HorizontalScroll: import("react").ForwardRefExoticComponent<
|
|
1
|
+
import { IHorizontalScroll } from './type';
|
|
2
|
+
import { ScrollContainerRef } from '@cleartrip/ct-design-scroll-container';
|
|
3
|
+
declare const HorizontalScroll: import("react").ForwardRefExoticComponent<IHorizontalScroll & import("react").RefAttributes<ScrollContainerRef>>;
|
|
4
4
|
export default HorizontalScroll;
|
|
5
5
|
//# sourceMappingURL=HorizontalScroll.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HorizontalScroll.d.ts","sourceRoot":"","sources":["../packages/components/HorizontalScroll/src/HorizontalScroll.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"HorizontalScroll.d.ts","sourceRoot":"","sources":["../packages/components/HorizontalScroll/src/HorizontalScroll.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAG3C,OAAO,EAAE,kBAAkB,EAAE,MAAM,uCAAuC,CAAC;AAmB3E,QAAA,MAAM,gBAAgB,kHAgCrB,CAAC;AAGF,eAAe,gBAAgB,CAAC"}
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import { ScrollContainerRef } from '@cleartrip/ct-design-scroll-container';
|
|
2
|
+
import { IHorizontalScroll } from './type';
|
|
3
|
+
declare const HorizontalScroll: import("react").ForwardRefExoticComponent<IHorizontalScroll & import("react").RefAttributes<ScrollContainerRef>>;
|
|
4
|
+
export default HorizontalScroll;
|
|
5
|
+
//# sourceMappingURL=HorizontalScroll.native.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"HorizontalScroll.native.d.ts","sourceRoot":"","sources":["../packages/components/HorizontalScroll/src/HorizontalScroll.native.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAmB,kBAAkB,EAAE,MAAM,uCAAuC,CAAC;AAC5F,OAAO,EAAE,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAiB3C,QAAA,MAAM,gBAAgB,kHAsDrB,CAAC;AAIF,eAAe,gBAAgB,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../packages/components/HorizontalScroll/src/constants.ts"],"names":[],"mappings":"AAAA,oBAAY,eAAe;IACzB,IAAI,SAAS;IACb,KAAK,UAAU;CAChB;AAED,oBAAY,UAAU;IACpB,EAAE,OAAO;IACT,EAAE,OAAO;IACT,EAAE,OAAO;CACV"}
|
|
@@ -1,2 +1,15 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var e=require("react/jsx-runtime"),r=require("react"),t=require("@emotion/css"),l=require("@cleartrip/ct-design-container"),o=require("@cleartrip/ct-design-use-merge-refs"),n=require("@cleartrip/ct-design-style-manager");function i(e){return e&&e.__esModule?e:{default:e}}var s=i(o);const c=t.css`
|
|
2
|
+
display: flex;
|
|
3
|
+
white-space: no-wrap;
|
|
4
|
+
overflow-x: auto;
|
|
5
|
+
scroll-behavior: smooth;
|
|
6
|
+
-webkit-tap-highlight-color: transparent;
|
|
7
|
+
scrollbar-width: none; /* Firefox */
|
|
8
|
+
-ms-overflow-style: none; /* Internet Explorer 10+ */
|
|
9
|
+
|
|
10
|
+
&::-webkit-scrollbar {
|
|
11
|
+
/* WebKit */
|
|
12
|
+
display: none;
|
|
13
|
+
}
|
|
14
|
+
`,a=r.forwardRef(({children:t,styleConfig:o={},onScroll:i},a)=>{const{root:u,childContainer:d}=o,f=r.useRef(null),h=r.useRef(null),g=r.useRef(null),R=s.default(h,a),p=s.default(h,g),x=n.useWebMergeStyles([...u||[],c],[u]);return e.jsx("div",{ref:f,onScroll:e=>{null==i||i({nativeEvent:{contentOffset:{x:e.currentTarget.scrollLeft,y:e.currentTarget.scrollTop},layoutMeasurement:{height:e.currentTarget.clientHeight,width:e.currentTarget.clientWidth},contentSize:{height:e.currentTarget.scrollHeight,width:e.currentTarget.scrollWidth}}})},children:e.jsx("div",{ref:R,className:x,children:e.jsx(l.Container,{styleConfig:{root:d},ref:p,children:t})})})});var u,d;a.displayName="HorizontalScroll",exports.ARROW_DIRECTION=void 0,(u=exports.ARROW_DIRECTION||(exports.ARROW_DIRECTION={})).LEFT="LEFT",u.RIGHT="RIGHT",exports.ARROW_SIZE=void 0,(d=exports.ARROW_SIZE||(exports.ARROW_SIZE={})).SM="sm",d.MD="md",d.LG="lg",exports.HorizontalScroll=a;
|
|
2
15
|
//# sourceMappingURL=ct-design-horizontal-scroll.browser.cjs.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ct-design-horizontal-scroll.browser.cjs.js","sources":["../packages/components/HorizontalScroll/src/
|
|
1
|
+
{"version":3,"file":"ct-design-horizontal-scroll.browser.cjs.js","sources":["../packages/components/HorizontalScroll/src/HorizontalScroll.tsx","../packages/components/HorizontalScroll/src/constants.ts"],"sourcesContent":[null,null],"names":["horizontalScrollStyles","css","HorizontalScroll","forwardRef","children","styleConfig","onScroll","root","childContainer","horizontalScrollRef","useRef","parentContainerRef","childContainerRef","combinedParentContainerRef","useMergeRefs","combinedParenAndChildContainerRef","rootStyles","useWebMergeStyles","_jsx","jsx","ref","event","nativeEvent","contentOffset","x","currentTarget","scrollLeft","y","scrollTop","layoutMeasurement","height","clientHeight","width","clientWidth","contentSize","scrollHeight","scrollWidth","className","Container","ARROW_DIRECTION","ARROW_SIZE","displayName"],"mappings":"wSAWA,MAAMA,EAAyBC,EAAGA,GAAA;;;;;;;;;;;;;EAe5BC,EAAmBC,EAAAA,WACvB,EAAGC,WAAUC,cAAc,GAAIC,YAAYH,KACzC,MAAMI,KAAEA,EAAIC,eAAEA,GAAmBH,EAE3BI,EAAsBC,SAAuB,MAC7CC,EAAqBD,SAAuB,MAC5CE,EAAoBF,SAAoB,MACxCG,EAA6BC,EAAAA,QAAaH,EAAoBR,GAC9DY,EAAoCD,EAAAA,QAAaH,EAAoBC,GAErEI,EAAaC,oBAAkB,IAAKV,GAAQ,GAAKP,GAAyB,CAACO,IAYjF,OACEW,EAAKC,IAAA,MAAA,CAAAC,IAAKX,EAAqBH,SAXXe,IACpBf,SAAAA,EAAW,CACTgB,YAAa,CACXC,cAAe,CAAEC,EAAGH,EAAMI,cAAcC,WAAYC,EAAGN,EAAMI,cAAcG,WAC3EC,kBAAmB,CAAEC,OAAQT,EAAMI,cAAcM,aAAcC,MAAOX,EAAMI,cAAcQ,aAC1FC,YAAa,CAAEJ,OAAQT,EAAMI,cAAcU,aAAcH,MAAOX,EAAMI,cAAcW,iBAMnChC,SACnDc,aAAKE,IAAKP,EAA4BwB,UAAWrB,EAAUZ,SACzDc,EAACC,IAAAmB,EAASA,WAACjC,YAAa,CAAEE,KAAMC,GAAkBY,IAAKL,EACpDX,SAAAA,UCpDb,IAAYmC,EAKAC,EDuDZtC,EAAiBuC,YAAc,mBC5DnBF,QAGXA,qBAAA,GAHWA,EAAAA,0BAAAA,QAAAA,gBAGX,CAAA,IAFC,KAAA,OACAA,EAAA,MAAA,QAGUC,QAIXA,gBAAA,GAJWA,EAAAA,QAAUA,aAAVA,mBAIX,CAAA,IAHC,GAAA,KACAA,EAAA,GAAA,KACAA,EAAA,GAAA"}
|
|
@@ -1,2 +1,15 @@
|
|
|
1
|
-
import{
|
|
1
|
+
import{jsx as r}from"react/jsx-runtime";import{forwardRef as e,useRef as t}from"react";import{css as o}from"@emotion/css";import{Container as n}from"@cleartrip/ct-design-container";import l from"@cleartrip/ct-design-use-merge-refs";import{useWebMergeStyles as i}from"@cleartrip/ct-design-style-manager";const c=o`
|
|
2
|
+
display: flex;
|
|
3
|
+
white-space: no-wrap;
|
|
4
|
+
overflow-x: auto;
|
|
5
|
+
scroll-behavior: smooth;
|
|
6
|
+
-webkit-tap-highlight-color: transparent;
|
|
7
|
+
scrollbar-width: none; /* Firefox */
|
|
8
|
+
-ms-overflow-style: none; /* Internet Explorer 10+ */
|
|
9
|
+
|
|
10
|
+
&::-webkit-scrollbar {
|
|
11
|
+
/* WebKit */
|
|
12
|
+
display: none;
|
|
13
|
+
}
|
|
14
|
+
`,a=e(({children:e,styleConfig:o={},onScroll:a},s)=>{const{root:m,childContainer:h}=o,f=t(null),g=t(null),d=t(null),p=l(g,s),u=l(g,d),T=i([...m||[],c],[m]);return r("div",{ref:f,onScroll:r=>{null==a||a({nativeEvent:{contentOffset:{x:r.currentTarget.scrollLeft,y:r.currentTarget.scrollTop},layoutMeasurement:{height:r.currentTarget.clientHeight,width:r.currentTarget.clientWidth},contentSize:{height:r.currentTarget.scrollHeight,width:r.currentTarget.scrollWidth}}})},children:r("div",{ref:p,className:T,children:r(n,{styleConfig:{root:h},ref:u,children:e})})})});var s,m;a.displayName="HorizontalScroll",function(r){r.LEFT="LEFT",r.RIGHT="RIGHT"}(s||(s={})),function(r){r.SM="sm",r.MD="md",r.LG="lg"}(m||(m={}));export{s as ARROW_DIRECTION,m as ARROW_SIZE,a as HorizontalScroll};
|
|
2
15
|
//# sourceMappingURL=ct-design-horizontal-scroll.browser.esm.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ct-design-horizontal-scroll.browser.esm.js","sources":["../packages/components/HorizontalScroll/src/
|
|
1
|
+
{"version":3,"file":"ct-design-horizontal-scroll.browser.esm.js","sources":["../packages/components/HorizontalScroll/src/HorizontalScroll.tsx","../packages/components/HorizontalScroll/src/constants.ts"],"sourcesContent":[null,null],"names":["horizontalScrollStyles","css","HorizontalScroll","forwardRef","children","styleConfig","onScroll","root","childContainer","horizontalScrollRef","useRef","parentContainerRef","childContainerRef","combinedParentContainerRef","useMergeRefs","combinedParenAndChildContainerRef","rootStyles","useWebMergeStyles","_jsx","ref","event","nativeEvent","contentOffset","x","currentTarget","scrollLeft","y","scrollTop","layoutMeasurement","height","clientHeight","width","clientWidth","contentSize","scrollHeight","scrollWidth","className","Container","ARROW_DIRECTION","ARROW_SIZE","displayName"],"mappings":"+SAWA,MAAMA,EAAyBC,CAAG;;;;;;;;;;;;;EAe5BC,EAAmBC,EACvB,EAAGC,WAAUC,cAAc,GAAIC,YAAYH,KACzC,MAAMI,KAAEA,EAAIC,eAAEA,GAAmBH,EAE3BI,EAAsBC,EAAuB,MAC7CC,EAAqBD,EAAuB,MAC5CE,EAAoBF,EAAoB,MACxCG,EAA6BC,EAAaH,EAAoBR,GAC9DY,EAAoCD,EAAaH,EAAoBC,GAErEI,EAAaC,EAAkB,IAAKV,GAAQ,GAAKP,GAAyB,CAACO,IAYjF,OACEW,EAAK,MAAA,CAAAC,IAAKV,EAAqBH,SAXXc,IACpBd,SAAAA,EAAW,CACTe,YAAa,CACXC,cAAe,CAAEC,EAAGH,EAAMI,cAAcC,WAAYC,EAAGN,EAAMI,cAAcG,WAC3EC,kBAAmB,CAAEC,OAAQT,EAAMI,cAAcM,aAAcC,MAAOX,EAAMI,cAAcQ,aAC1FC,YAAa,CAAEJ,OAAQT,EAAMI,cAAcU,aAAcH,MAAOX,EAAMI,cAAcW,iBAMnC/B,SACnDc,SAAKC,IAAKN,EAA4BuB,UAAWpB,EAAUZ,SACzDc,EAACmB,GAAUhC,YAAa,CAAEE,KAAMC,GAAkBW,IAAKJ,EACpDX,SAAAA,cCpDDkC,EAKAC,EDuDZrC,EAAiBsC,YAAc,mBC5D/B,SAAYF,GACVA,EAAA,KAAA,OACAA,EAAA,MAAA,OACD,CAHD,CAAYA,IAAAA,EAGX,CAAA,IAED,SAAYC,GACVA,EAAA,GAAA,KACAA,EAAA,GAAA,KACAA,EAAA,GAAA,IACD,CAJD,CAAYA,IAAAA,EAIX,CAAA"}
|
|
@@ -1,150 +1,62 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var tslib = require('tslib');
|
|
4
3
|
var jsxRuntime = require('react/jsx-runtime');
|
|
5
4
|
var react = require('react');
|
|
5
|
+
var css = require('@emotion/css');
|
|
6
6
|
var ctDesignContainer = require('@cleartrip/ct-design-container');
|
|
7
|
-
var styled = require('styled-components');
|
|
8
|
-
var ctDesignIcons = require('@cleartrip/ct-design-icons');
|
|
9
|
-
var ctDesignTheme = require('@cleartrip/ct-design-theme');
|
|
10
|
-
var ctDesignCommonUtils = require('@cleartrip/ct-design-common-utils');
|
|
11
|
-
var ctDesignTooltipV2 = require('@cleartrip/ct-design-tooltip-v2');
|
|
12
7
|
var useMergeRefs = require('@cleartrip/ct-design-use-merge-refs');
|
|
8
|
+
var ctDesignStyleManager = require('@cleartrip/ct-design-style-manager');
|
|
13
9
|
|
|
14
10
|
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
15
11
|
|
|
16
|
-
var styled__default = /*#__PURE__*/_interopDefault(styled);
|
|
17
12
|
var useMergeRefs__default = /*#__PURE__*/_interopDefault(useMergeRefs);
|
|
18
13
|
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
14
|
+
const horizontalScrollStyles = css.css `
|
|
15
|
+
display: flex;
|
|
16
|
+
white-space: no-wrap;
|
|
17
|
+
overflow-x: auto;
|
|
18
|
+
scroll-behavior: smooth;
|
|
19
|
+
-webkit-tap-highlight-color: transparent;
|
|
20
|
+
scrollbar-width: none; /* Firefox */
|
|
21
|
+
-ms-overflow-style: none; /* Internet Explorer 10+ */
|
|
22
|
+
|
|
23
|
+
&::-webkit-scrollbar {
|
|
24
|
+
/* WebKit */
|
|
25
|
+
display: none;
|
|
26
|
+
}
|
|
27
|
+
`;
|
|
28
|
+
const HorizontalScroll = react.forwardRef(({ children, styleConfig = {}, onScroll }, forwardRef) => {
|
|
29
|
+
const { root, childContainer } = styleConfig;
|
|
30
|
+
const horizontalScrollRef = react.useRef(null);
|
|
31
|
+
const parentContainerRef = react.useRef(null);
|
|
32
|
+
const childContainerRef = react.useRef(null);
|
|
33
|
+
const combinedParentContainerRef = useMergeRefs__default.default(parentContainerRef, forwardRef);
|
|
34
|
+
const combinedParenAndChildContainerRef = useMergeRefs__default.default(parentContainerRef, childContainerRef);
|
|
35
|
+
const rootStyles = ctDesignStyleManager.useWebMergeStyles([...(root || []), horizontalScrollStyles], [root]);
|
|
36
|
+
const handleScroll = (event) => {
|
|
37
|
+
onScroll === null || onScroll === void 0 ? void 0 : onScroll({
|
|
38
|
+
nativeEvent: {
|
|
39
|
+
contentOffset: { x: event.currentTarget.scrollLeft, y: event.currentTarget.scrollTop },
|
|
40
|
+
layoutMeasurement: { height: event.currentTarget.clientHeight, width: event.currentTarget.clientWidth },
|
|
41
|
+
contentSize: { height: event.currentTarget.scrollHeight, width: event.currentTarget.scrollWidth },
|
|
42
|
+
},
|
|
43
|
+
});
|
|
44
|
+
};
|
|
45
|
+
return (jsxRuntime.jsx("div", { ref: horizontalScrollRef, onScroll: handleScroll, children: jsxRuntime.jsx("div", { ref: combinedParentContainerRef, className: rootStyles, children: jsxRuntime.jsx(ctDesignContainer.Container, { styleConfig: { root: childContainer }, ref: combinedParenAndChildContainerRef, children: children }) }) }));
|
|
46
46
|
});
|
|
47
|
-
|
|
47
|
+
HorizontalScroll.displayName = 'HorizontalScroll';
|
|
48
48
|
|
|
49
|
+
exports.ARROW_DIRECTION = void 0;
|
|
50
|
+
(function (ARROW_DIRECTION) {
|
|
51
|
+
ARROW_DIRECTION["LEFT"] = "LEFT";
|
|
52
|
+
ARROW_DIRECTION["RIGHT"] = "RIGHT";
|
|
53
|
+
})(exports.ARROW_DIRECTION || (exports.ARROW_DIRECTION = {}));
|
|
49
54
|
exports.ARROW_SIZE = void 0;
|
|
50
55
|
(function (ARROW_SIZE) {
|
|
51
56
|
ARROW_SIZE["SM"] = "sm";
|
|
52
57
|
ARROW_SIZE["MD"] = "md";
|
|
53
58
|
ARROW_SIZE["LG"] = "lg";
|
|
54
59
|
})(exports.ARROW_SIZE || (exports.ARROW_SIZE = {}));
|
|
55
|
-
exports.ARROW_DIRECTION = void 0;
|
|
56
|
-
(function (ARROW_DIRECTION) {
|
|
57
|
-
ARROW_DIRECTION["LEFT"] = "LEFT";
|
|
58
|
-
ARROW_DIRECTION["RIGHT"] = "RIGHT";
|
|
59
|
-
})(exports.ARROW_DIRECTION || (exports.ARROW_DIRECTION = {}));
|
|
60
|
-
|
|
61
|
-
var FLEX_RIGHT_PRECISION = 5;
|
|
62
|
-
var HorizontalScroll = react.forwardRef(function (_a, forwardRef) {
|
|
63
|
-
var children = _a.children, showShadow = _a.showShadow, showArrow = _a.showArrow, className = _a.className, containerClassname = _a.containerClassname, childrenClassname = _a.childrenClassname, shadowWidth = _a.shadowWidth, _b = _a.arrowSize, arrowSize = _b === void 0 ? exports.ARROW_SIZE.MD : _b, shadowGradientStyle = _a.shadowGradientStyle, _c = _a.styleConfig, styleConfig = _c === void 0 ? {} : _c;
|
|
64
|
-
var _d = shadowWidth || {}, leftShadowWidth = _d.left, rightShadowWidth = _d.right;
|
|
65
|
-
var theme = ctDesignTheme.useTheme();
|
|
66
|
-
var childrenContainer = styleConfig.childrenContainer, leftChevron = styleConfig.leftChevron, leftShadowContainer = styleConfig.leftShadowContainer, leftShadowWrapper = styleConfig.leftShadowWrapper, rightChevron = styleConfig.rightChevron, rightShadowContainer = styleConfig.rightShadowContainer, rightShadowWrapper = styleConfig.rightShadowWrapper, root = styleConfig.root, scrollWrapper = styleConfig.scrollWrapper;
|
|
67
|
-
var _e = react.useState(false), isHovering = _e[0], setIsHovering = _e[1];
|
|
68
|
-
var _f = react.useState({
|
|
69
|
-
left: false,
|
|
70
|
-
right: false,
|
|
71
|
-
}), shadowDirection = _f[0], setShadowDirection = _f[1];
|
|
72
|
-
var horizontalScrollRef = react.useRef(null);
|
|
73
|
-
var parentContainerRef = react.useRef(null);
|
|
74
|
-
var childContainerRef = react.useRef(null);
|
|
75
|
-
var combinedParentContainerRef = useMergeRefs__default.default(parentContainerRef, forwardRef);
|
|
76
|
-
var combinedParenAndChildContainerRef = useMergeRefs__default.default(parentContainerRef, childContainerRef);
|
|
77
|
-
var updateArrowIcons = function () {
|
|
78
|
-
if (horizontalScrollRef.current && childContainerRef.current) {
|
|
79
|
-
var _a = horizontalScrollRef.current.getBoundingClientRect(), horizontalScrollRight = _a.right, horizontalScrollLeft = _a.left;
|
|
80
|
-
var _b = childContainerRef.current.getBoundingClientRect(), childContainerRight = _b.right, childContainerLeft = _b.left;
|
|
81
|
-
if (childContainerLeft - horizontalScrollLeft < -FLEX_RIGHT_PRECISION) {
|
|
82
|
-
setShadowDirection(function (prevState) { return (tslib.__assign(tslib.__assign({}, prevState), { left: true })); });
|
|
83
|
-
}
|
|
84
|
-
else {
|
|
85
|
-
setShadowDirection(function (prevState) { return (tslib.__assign(tslib.__assign({}, prevState), { left: false })); });
|
|
86
|
-
}
|
|
87
|
-
if (childContainerRight - horizontalScrollRight > FLEX_RIGHT_PRECISION) {
|
|
88
|
-
setShadowDirection(function (prevState) { return (tslib.__assign(tslib.__assign({}, prevState), { right: true })); });
|
|
89
|
-
}
|
|
90
|
-
else {
|
|
91
|
-
setShadowDirection(function (prevState) { return (tslib.__assign(tslib.__assign({}, prevState), { right: false })); });
|
|
92
|
-
}
|
|
93
|
-
}
|
|
94
|
-
};
|
|
95
|
-
react.useEffect(function () {
|
|
96
|
-
var _a;
|
|
97
|
-
setTimeout(updateArrowIcons, 200);
|
|
98
|
-
var callback = ctDesignCommonUtils.debounce(updateArrowIcons, 200);
|
|
99
|
-
(_a = parentContainerRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener('scroll', callback);
|
|
100
|
-
return function () {
|
|
101
|
-
var _a;
|
|
102
|
-
(_a = parentContainerRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('scroll', callback);
|
|
103
|
-
};
|
|
104
|
-
}, []);
|
|
105
|
-
var onHover = react.useCallback(function (type) { return function () {
|
|
106
|
-
if (type === ctDesignTooltipV2.HOVER_TYPE.ENTER) {
|
|
107
|
-
setIsHovering(true);
|
|
108
|
-
}
|
|
109
|
-
else {
|
|
110
|
-
setIsHovering(false);
|
|
111
|
-
}
|
|
112
|
-
}; }, []);
|
|
113
|
-
var onArrowClick = function (arrowDirection) { return function () {
|
|
114
|
-
if (parentContainerRef.current && horizontalScrollRef.current) {
|
|
115
|
-
var parentContainerElement = parentContainerRef.current;
|
|
116
|
-
var horizontalScrollWidth = horizontalScrollRef.current.getBoundingClientRect().width;
|
|
117
|
-
if (arrowDirection === exports.ARROW_DIRECTION.RIGHT) {
|
|
118
|
-
parentContainerElement.scrollLeft = parentContainerElement.scrollLeft + horizontalScrollWidth / 2;
|
|
119
|
-
}
|
|
120
|
-
else {
|
|
121
|
-
parentContainerElement.scrollLeft = parentContainerElement.scrollLeft - horizontalScrollWidth / 2;
|
|
122
|
-
}
|
|
123
|
-
}
|
|
124
|
-
}; };
|
|
125
|
-
var arrowDimension = react.useMemo(function () {
|
|
126
|
-
switch (arrowSize) {
|
|
127
|
-
case exports.ARROW_SIZE.SM: {
|
|
128
|
-
return theme.size[6];
|
|
129
|
-
}
|
|
130
|
-
case exports.ARROW_SIZE.MD: {
|
|
131
|
-
return theme.size[6];
|
|
132
|
-
}
|
|
133
|
-
case exports.ARROW_SIZE.LG: {
|
|
134
|
-
return theme.size[10];
|
|
135
|
-
}
|
|
136
|
-
default: {
|
|
137
|
-
return theme.size[6];
|
|
138
|
-
}
|
|
139
|
-
}
|
|
140
|
-
}, [arrowSize]);
|
|
141
|
-
return (jsxRuntime.jsxs(ctDesignContainer.Container, tslib.__assign({ position: 'relative', onMouseEnter: onHover(ctDesignTooltipV2.HOVER_TYPE.ENTER), onMouseLeave: onHover(ctDesignTooltipV2.HOVER_TYPE.LEAVE), className: containerClassname, ref: horizontalScrollRef }, root, { children: [showShadow && shadowDirection.left && (jsxRuntime.jsx(StyledLeftShadow, tslib.__assign({ width: leftShadowWidth, shadowGradientStyle: shadowGradientStyle }, leftShadowWrapper, { children: showArrow && isHovering && (jsxRuntime.jsx(ctDesignContainer.Container, tslib.__assign({ display: 'flex', justifyContent: 'center', alignItems: 'center', cursor: 'pointer', paddingLeft: theme.spacing[4], onClick: onArrowClick(exports.ARROW_DIRECTION.LEFT) }, leftShadowContainer, { children: jsxRuntime.jsx(ctDesignIcons.LeftChevronWithBoundingBox, tslib.__assign({ height: arrowDimension, width: arrowDimension }, leftChevron)) }))) }))), jsxRuntime.jsx(StyledHorizontalScroll, tslib.__assign({ ref: combinedParentContainerRef, className: (scrollWrapper === null || scrollWrapper === void 0 ? void 0 : scrollWrapper.className) || className, css: scrollWrapper === null || scrollWrapper === void 0 ? void 0 : scrollWrapper.css }, { children: jsxRuntime.jsx(ctDesignContainer.Container, tslib.__assign({ className: (childrenContainer === null || childrenContainer === void 0 ? void 0 : childrenContainer.className) || childrenClassname, ref: combinedParenAndChildContainerRef, css: childrenContainer === null || childrenContainer === void 0 ? void 0 : childrenContainer.css, display: 'flex' }, { children: children })) })), showShadow && shadowDirection.right && (jsxRuntime.jsx(StyledRightShadow, tslib.__assign({ width: rightShadowWidth, shadowGradientStyle: shadowGradientStyle }, rightShadowWrapper, { children: showArrow && isHovering && (jsxRuntime.jsx(ctDesignContainer.Container, tslib.__assign({ display: 'flex', justifyContent: 'center', alignItems: 'center', cursor: 'pointer', paddingRight: theme.spacing[4], onClick: onArrowClick(exports.ARROW_DIRECTION.RIGHT) }, rightShadowContainer, { children: jsxRuntime.jsx(ctDesignIcons.RightChevronWithBoundingBox, tslib.__assign({ height: arrowDimension, width: arrowDimension }, rightChevron)) }))) })))] })));
|
|
142
|
-
});
|
|
143
|
-
HorizontalScroll.defaultProps = {
|
|
144
|
-
children: null,
|
|
145
|
-
className: '',
|
|
146
|
-
};
|
|
147
60
|
|
|
148
61
|
exports.HorizontalScroll = HorizontalScroll;
|
|
149
|
-
exports.StyledHorizontalScroll = StyledHorizontalScroll;
|
|
150
62
|
//# sourceMappingURL=ct-design-horizontal-scroll.cjs.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ct-design-horizontal-scroll.cjs.js","sources":["../packages/components/HorizontalScroll/src/
|
|
1
|
+
{"version":3,"file":"ct-design-horizontal-scroll.cjs.js","sources":["../packages/components/HorizontalScroll/src/HorizontalScroll.tsx","../packages/components/HorizontalScroll/src/constants.ts"],"sourcesContent":[null,null],"names":["css","forwardRef","useRef","useMergeRefs","useWebMergeStyles","_jsx","Container","ARROW_DIRECTION","ARROW_SIZE"],"mappings":";;;;;;;;;;;;;AAWA,MAAM,sBAAsB,GAAGA,OAAG,CAAA,CAAA;;;;;;;;;;;;;CAajC,CAAC;AAEF,MAAM,gBAAgB,GAAGC,gBAAU,CACjC,CAAC,EAAE,QAAQ,EAAE,WAAW,GAAG,EAAE,EAAE,QAAQ,EAAE,EAAE,UAAU,KAAI;AACvD,IAAA,MAAM,EAAE,IAAI,EAAE,cAAc,EAAE,GAAG,WAAW,CAAC;AAE7C,IAAA,MAAM,mBAAmB,GAAGC,YAAM,CAAiB,IAAI,CAAC,CAAC;AACzD,IAAA,MAAM,kBAAkB,GAAGA,YAAM,CAAiB,IAAI,CAAC,CAAC;AACxD,IAAA,MAAM,iBAAiB,GAAGA,YAAM,CAAc,IAAI,CAAC,CAAC;IACpD,MAAM,0BAA0B,GAAGC,6BAAY,CAAC,kBAAkB,EAAE,UAAU,CAAC,CAAC;IAChF,MAAM,iCAAiC,GAAGA,6BAAY,CAAC,kBAAkB,EAAE,iBAAiB,CAAC,CAAC;AAE9F,IAAA,MAAM,UAAU,GAAGC,sCAAiB,CAAC,CAAC,IAAI,IAAI,IAAI,EAAE,CAAC,EAAE,sBAAsB,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;AAExF,IAAA,MAAM,YAAY,GAAG,CAAC,KAAoC,KAAI;AAC5D,QAAA,QAAQ,KAAR,IAAA,IAAA,QAAQ,KAAR,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,QAAQ,CAAG;AACT,YAAA,WAAW,EAAE;AACX,gBAAA,aAAa,EAAE,EAAE,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,UAAU,EAAE,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,SAAS,EAAE;AACtF,gBAAA,iBAAiB,EAAE,EAAE,MAAM,EAAE,KAAK,CAAC,aAAa,CAAC,YAAY,EAAE,KAAK,EAAE,KAAK,CAAC,aAAa,CAAC,WAAW,EAAE;AACvG,gBAAA,WAAW,EAAE,EAAE,MAAM,EAAE,KAAK,CAAC,aAAa,CAAC,YAAY,EAAE,KAAK,EAAE,KAAK,CAAC,aAAa,CAAC,WAAW,EAAE;AAClG,aAAA;AACF,SAAA,CAAC,CAAC;AACL,KAAC,CAAC;AAEF,IAAA,QACEC,cAAK,CAAA,KAAA,EAAA,EAAA,GAAG,EAAE,mBAAmB,EAAE,QAAQ,EAAE,YAAY,EAAA,QAAA,EACnDA,wBAAK,GAAG,EAAE,0BAA0B,EAAE,SAAS,EAAE,UAAU,EAAA,QAAA,EACzDA,cAAC,CAAAC,2BAAS,IAAC,WAAW,EAAE,EAAE,IAAI,EAAE,cAAc,EAAE,EAAE,GAAG,EAAE,iCAAiC,EACrF,QAAA,EAAA,QAAQ,GACC,EACR,CAAA,EAAA,CACF,EACN;AACJ,CAAC,EACD;AAEF,gBAAgB,CAAC,WAAW,GAAG,kBAAkB;;AC5DrCC,iCAGX;AAHD,CAAA,UAAY,eAAe,EAAA;AACzB,IAAA,eAAA,CAAA,MAAA,CAAA,GAAA,MAAa,CAAA;AACb,IAAA,eAAA,CAAA,OAAA,CAAA,GAAA,OAAe,CAAA;AACjB,CAAC,EAHWA,uBAAe,KAAfA,uBAAe,GAG1B,EAAA,CAAA,CAAA,CAAA;AAEWC,4BAIX;AAJD,CAAA,UAAY,UAAU,EAAA;AACpB,IAAA,UAAA,CAAA,IAAA,CAAA,GAAA,IAAS,CAAA;AACT,IAAA,UAAA,CAAA,IAAA,CAAA,GAAA,IAAS,CAAA;AACT,IAAA,UAAA,CAAA,IAAA,CAAA,GAAA,IAAS,CAAA;AACX,CAAC,EAJWA,kBAAU,KAAVA,kBAAU,GAIrB,EAAA,CAAA,CAAA;;;;"}
|