@chayns-components/core 5.0.0-beta.837 → 5.0.0-beta.840
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/lib/cjs/components/scroll-view/ScrollView.js +18 -7
- package/lib/cjs/components/scroll-view/ScrollView.js.map +1 -1
- package/lib/cjs/components/scroll-view/ScrollView.styles.js +31 -3
- package/lib/cjs/components/scroll-view/ScrollView.styles.js.map +1 -1
- package/lib/esm/components/scroll-view/ScrollView.js +18 -7
- package/lib/esm/components/scroll-view/ScrollView.js.map +1 -1
- package/lib/esm/components/scroll-view/ScrollView.styles.js +49 -6
- package/lib/esm/components/scroll-view/ScrollView.styles.js.map +1 -1
- package/lib/types/components/scroll-view/ScrollView.d.ts +23 -3
- package/lib/types/components/scroll-view/ScrollView.styles.d.ts +6 -1
- package/package.json +2 -2
|
@@ -9,18 +9,29 @@ var _react = _interopRequireWildcard(require("react"));
|
|
|
9
9
|
var _ScrollView = require("./ScrollView.styles");
|
|
10
10
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
11
11
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
12
|
-
const ScrollView = ({
|
|
13
|
-
maxHeight =
|
|
14
|
-
|
|
15
|
-
|
|
12
|
+
const ScrollView = /*#__PURE__*/(0, _react.forwardRef)(({
|
|
13
|
+
maxHeight = 300,
|
|
14
|
+
height,
|
|
15
|
+
maxWidth,
|
|
16
|
+
width,
|
|
17
|
+
children,
|
|
18
|
+
overflowX = 'auto',
|
|
19
|
+
overflowY = 'auto'
|
|
20
|
+
}, ref) => {
|
|
16
21
|
const {
|
|
17
22
|
browser
|
|
18
23
|
} = (0, _chaynsApi.getDevice)();
|
|
19
24
|
return (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_ScrollView.StyledScrollView, {
|
|
20
25
|
$browser: browser === null || browser === void 0 ? void 0 : browser.name,
|
|
21
|
-
$maxHeight: maxHeight
|
|
22
|
-
|
|
23
|
-
|
|
26
|
+
$maxHeight: maxHeight,
|
|
27
|
+
$height: height,
|
|
28
|
+
$maxWidth: maxWidth,
|
|
29
|
+
$width: width,
|
|
30
|
+
$overflowX: overflowX,
|
|
31
|
+
$overflowY: overflowY,
|
|
32
|
+
ref: ref
|
|
33
|
+
}, children), [browser === null || browser === void 0 ? void 0 : browser.name, children, height, maxHeight, maxWidth, overflowX, overflowY, ref, width]);
|
|
34
|
+
});
|
|
24
35
|
ScrollView.displayName = 'ScrollView';
|
|
25
36
|
var _default = exports.default = ScrollView;
|
|
26
37
|
//# sourceMappingURL=ScrollView.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ScrollView.js","names":["_chaynsApi","require","_react","_interopRequireWildcard","_ScrollView","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ScrollView","maxHeight","children","browser","getDevice","useMemo","createElement","StyledScrollView","$browser","name","$maxHeight","displayName","_default","exports"],"sources":["../../../../src/components/scroll-view/ScrollView.tsx"],"sourcesContent":["import { getDevice } from 'chayns-api';\nimport React, { CSSProperties,
|
|
1
|
+
{"version":3,"file":"ScrollView.js","names":["_chaynsApi","require","_react","_interopRequireWildcard","_ScrollView","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ScrollView","forwardRef","maxHeight","height","maxWidth","width","children","overflowX","overflowY","ref","browser","getDevice","useMemo","createElement","StyledScrollView","$browser","name","$maxHeight","$height","$maxWidth","$width","$overflowX","$overflowY","displayName","_default","exports"],"sources":["../../../../src/components/scroll-view/ScrollView.tsx"],"sourcesContent":["import { getDevice } from 'chayns-api';\nimport React, { CSSProperties, forwardRef, ReactNode, useMemo } from 'react';\nimport { StyledScrollView } from './ScrollView.styles';\n\nexport type ScrollViewProps = {\n /**\n * The elements that should be shown inside the scrollview\n */\n children: ReactNode;\n /**\n * The maximum height of the scroll view.\n */\n maxHeight?: CSSProperties['height'];\n /**\n * The height of the scroll view.\n */\n height?: CSSProperties['height'];\n /**\n * The maximum width of the scroll view.\n */\n maxWidth?: CSSProperties['width'];\n /**\n * The width of the scroll view.\n */\n width?: CSSProperties['width'];\n /**\n * The overflow-x style of the scroll view.\n */\n overflowX?: 'scroll' | 'auto';\n /**\n * The overflow-y style of the scroll view.\n */\n overflowY?: 'scroll' | 'auto';\n};\n\nconst ScrollView = forwardRef<HTMLDivElement, ScrollViewProps>(\n ({ maxHeight = 300, height, maxWidth, width, children, overflowX = 'auto', overflowY = 'auto' }, ref) => {\n const { browser } = getDevice();\n\n return useMemo(\n () => (\n <StyledScrollView\n $browser={browser?.name}\n $maxHeight={maxHeight}\n $height={height}\n $maxWidth={maxWidth}\n $width={width}\n $overflowX={overflowX}\n $overflowY={overflowY}\n ref={ref}\n >\n {children}\n </StyledScrollView>\n ),\n [browser?.name, children, height, maxHeight, maxWidth, overflowX, overflowY, ref, width],\n );\n },\n);\n\nScrollView.displayName = 'ScrollView';\n\nexport default ScrollView;\n"],"mappings":";;;;;;AAAA,IAAAA,UAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAC,uBAAA,CAAAF,OAAA;AACA,IAAAG,WAAA,GAAAH,OAAA;AAAuD,SAAAI,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAH,wBAAAG,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAiCvD,MAAMW,UAAU,gBAAG,IAAAC,iBAAU,EACzB,CAAC;EAAEC,SAAS,GAAG,GAAG;EAAEC,MAAM;EAAEC,QAAQ;EAAEC,KAAK;EAAEC,QAAQ;EAAEC,SAAS,GAAG,MAAM;EAAEC,SAAS,GAAG;AAAO,CAAC,EAAEC,GAAG,KAAK;EACrG,MAAM;IAAEC;EAAQ,CAAC,GAAG,IAAAC,oBAAS,EAAC,CAAC;EAE/B,OAAO,IAAAC,cAAO,EACV,mBACInC,MAAA,CAAAS,OAAA,CAAA2B,aAAA,CAAClC,WAAA,CAAAmC,gBAAgB;IACbC,QAAQ,EAAEL,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEM,IAAK;IACxBC,UAAU,EAAEf,SAAU;IACtBgB,OAAO,EAAEf,MAAO;IAChBgB,SAAS,EAAEf,QAAS;IACpBgB,MAAM,EAAEf,KAAM;IACdgB,UAAU,EAAEd,SAAU;IACtBe,UAAU,EAAEd,SAAU;IACtBC,GAAG,EAAEA;EAAI,GAERH,QACa,CACrB,EACD,CAACI,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEM,IAAI,EAAEV,QAAQ,EAAEH,MAAM,EAAED,SAAS,EAAEE,QAAQ,EAAEG,SAAS,EAAEC,SAAS,EAAEC,GAAG,EAAEJ,KAAK,CAC3F,CAAC;AACL,CACJ,CAAC;AAEDL,UAAU,CAACuB,WAAW,GAAG,YAAY;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAvC,OAAA,GAEvBc,UAAU","ignoreList":[]}
|
|
@@ -8,10 +8,32 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
|
|
|
8
8
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
9
9
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
10
10
|
const StyledScrollView = exports.StyledScrollView = _styledComponents.default.div`
|
|
11
|
-
|
|
11
|
+
${({
|
|
12
12
|
$maxHeight
|
|
13
|
-
}) => $maxHeight
|
|
14
|
-
|
|
13
|
+
}) => $maxHeight && (0, _styledComponents.css)`
|
|
14
|
+
max-height: ${typeof $maxHeight === 'number' ? `${$maxHeight}px` : $maxHeight};
|
|
15
|
+
`}
|
|
16
|
+
${({
|
|
17
|
+
$height
|
|
18
|
+
}) => $height && (0, _styledComponents.css)`
|
|
19
|
+
height: ${typeof $height === 'number' ? `${$height}px` : $height};
|
|
20
|
+
`}
|
|
21
|
+
${({
|
|
22
|
+
$maxWidth
|
|
23
|
+
}) => $maxWidth && (0, _styledComponents.css)`
|
|
24
|
+
max-width: ${typeof $maxWidth === 'number' ? `${$maxWidth}px` : $maxWidth};
|
|
25
|
+
`}
|
|
26
|
+
${({
|
|
27
|
+
$width
|
|
28
|
+
}) => $width && (0, _styledComponents.css)`
|
|
29
|
+
width: ${typeof $width === 'number' ? `${$width}px` : $width};
|
|
30
|
+
`}
|
|
31
|
+
${({
|
|
32
|
+
$overflowX
|
|
33
|
+
}) => (0, _styledComponents.css)`overflow-x: ${$overflowX};`}
|
|
34
|
+
${({
|
|
35
|
+
$overflowY
|
|
36
|
+
}) => (0, _styledComponents.css)`overflow-y: ${$overflowY};`}
|
|
15
37
|
|
|
16
38
|
// Styles for custom scrollbar
|
|
17
39
|
${({
|
|
@@ -23,6 +45,7 @@ const StyledScrollView = exports.StyledScrollView = _styledComponents.default.di
|
|
|
23
45
|
` : (0, _styledComponents.css)`
|
|
24
46
|
&::-webkit-scrollbar {
|
|
25
47
|
width: 10px;
|
|
48
|
+
height: 10px
|
|
26
49
|
}
|
|
27
50
|
|
|
28
51
|
&::-webkit-scrollbar-track {
|
|
@@ -32,6 +55,7 @@ const StyledScrollView = exports.StyledScrollView = _styledComponents.default.di
|
|
|
32
55
|
&::-webkit-scrollbar-button {
|
|
33
56
|
background-color: transparent;
|
|
34
57
|
height: 5px;
|
|
58
|
+
width: 5px;
|
|
35
59
|
}
|
|
36
60
|
|
|
37
61
|
&::-webkit-scrollbar-thumb {
|
|
@@ -40,6 +64,10 @@ const StyledScrollView = exports.StyledScrollView = _styledComponents.default.di
|
|
|
40
64
|
background-clip: padding-box;
|
|
41
65
|
border: solid 3px transparent;
|
|
42
66
|
}
|
|
67
|
+
|
|
68
|
+
&::-webkit-scrollbar-corner {
|
|
69
|
+
background-color: transparent;
|
|
70
|
+
}
|
|
43
71
|
`}
|
|
44
72
|
`;
|
|
45
73
|
//# sourceMappingURL=ScrollView.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ScrollView.styles.js","names":["_styledComponents","_interopRequireWildcard","require","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","StyledScrollView","exports","styled","div","$maxHeight","$
|
|
1
|
+
{"version":3,"file":"ScrollView.styles.js","names":["_styledComponents","_interopRequireWildcard","require","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","StyledScrollView","exports","styled","div","$maxHeight","css","$height","$maxWidth","$width","$overflowX","$overflowY","$browser","theme"],"sources":["../../../../src/components/scroll-view/ScrollView.styles.ts"],"sourcesContent":["import type { Browser } from 'detect-browser';\nimport type { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledScrollViewProps = WithTheme<{\n $maxHeight?: CSSProperties['height'];\n $height?: CSSProperties['height'];\n $maxWidth?: CSSProperties['width'];\n $width?: CSSProperties['width'];\n $overflowX: 'scroll' | 'auto';\n $overflowY: 'scroll' | 'auto';\n $browser: Browser | 'bot' | null | undefined;\n}>;\n\nexport const StyledScrollView = styled.div<StyledScrollViewProps>`\n ${({ $maxHeight }) =>\n $maxHeight &&\n css`\n max-height: ${typeof $maxHeight === 'number' ? `${$maxHeight}px` : $maxHeight};\n `}\n ${({ $height }) =>\n $height &&\n css`\n height: ${typeof $height === 'number' ? `${$height}px` : $height};\n `} \n ${({ $maxWidth }) =>\n $maxWidth &&\n css`\n max-width: ${typeof $maxWidth === 'number' ? `${$maxWidth}px` : $maxWidth};\n `} \n ${({ $width }) =>\n $width &&\n css`\n width: ${typeof $width === 'number' ? `${$width}px` : $width};\n `} \n ${({ $overflowX }) => css`overflow-x: ${$overflowX};`}\n ${({ $overflowY }) => css`overflow-y: ${$overflowY};`}\n\n // Styles for custom scrollbar\n ${({ $browser, theme }: StyledScrollViewProps) =>\n $browser === 'firefox'\n ? css`\n scrollbar-color: rgba(${theme['text-rgb']}, 0.15) transparent;\n scrollbar-width: thin;\n `\n : css`\n &::-webkit-scrollbar {\n width: 10px;\n height: 10px\n }\n\n &::-webkit-scrollbar-track {\n background-color: transparent;\n }\n\n &::-webkit-scrollbar-button {\n background-color: transparent;\n height: 5px;\n width: 5px;\n }\n\n &::-webkit-scrollbar-thumb {\n background-color: rgba(${theme['text-rgb']}, 0.15);\n border-radius: 20px;\n background-clip: padding-box;\n border: solid 3px transparent;\n }\n \n &::-webkit-scrollbar-corner {\n background-color: transparent;\n }\n `}\n`;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,19 +1,30 @@
|
|
|
1
1
|
import { getDevice } from 'chayns-api';
|
|
2
|
-
import React, { useMemo } from 'react';
|
|
2
|
+
import React, { forwardRef, useMemo } from 'react';
|
|
3
3
|
import { StyledScrollView } from './ScrollView.styles';
|
|
4
|
-
const ScrollView = _ref => {
|
|
4
|
+
const ScrollView = /*#__PURE__*/forwardRef((_ref, ref) => {
|
|
5
5
|
let {
|
|
6
|
-
maxHeight =
|
|
7
|
-
|
|
6
|
+
maxHeight = 300,
|
|
7
|
+
height,
|
|
8
|
+
maxWidth,
|
|
9
|
+
width,
|
|
10
|
+
children,
|
|
11
|
+
overflowX = 'auto',
|
|
12
|
+
overflowY = 'auto'
|
|
8
13
|
} = _ref;
|
|
9
14
|
const {
|
|
10
15
|
browser
|
|
11
16
|
} = getDevice();
|
|
12
17
|
return useMemo(() => /*#__PURE__*/React.createElement(StyledScrollView, {
|
|
13
18
|
$browser: browser?.name,
|
|
14
|
-
$maxHeight: maxHeight
|
|
15
|
-
|
|
16
|
-
|
|
19
|
+
$maxHeight: maxHeight,
|
|
20
|
+
$height: height,
|
|
21
|
+
$maxWidth: maxWidth,
|
|
22
|
+
$width: width,
|
|
23
|
+
$overflowX: overflowX,
|
|
24
|
+
$overflowY: overflowY,
|
|
25
|
+
ref: ref
|
|
26
|
+
}, children), [browser?.name, children, height, maxHeight, maxWidth, overflowX, overflowY, ref, width]);
|
|
27
|
+
});
|
|
17
28
|
ScrollView.displayName = 'ScrollView';
|
|
18
29
|
export default ScrollView;
|
|
19
30
|
//# sourceMappingURL=ScrollView.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ScrollView.js","names":["getDevice","React","useMemo","StyledScrollView","ScrollView","_ref","maxHeight","children","browser","createElement","$browser","name","$maxHeight","displayName"],"sources":["../../../../src/components/scroll-view/ScrollView.tsx"],"sourcesContent":["import { getDevice } from 'chayns-api';\nimport React, { CSSProperties,
|
|
1
|
+
{"version":3,"file":"ScrollView.js","names":["getDevice","React","forwardRef","useMemo","StyledScrollView","ScrollView","_ref","ref","maxHeight","height","maxWidth","width","children","overflowX","overflowY","browser","createElement","$browser","name","$maxHeight","$height","$maxWidth","$width","$overflowX","$overflowY","displayName"],"sources":["../../../../src/components/scroll-view/ScrollView.tsx"],"sourcesContent":["import { getDevice } from 'chayns-api';\nimport React, { CSSProperties, forwardRef, ReactNode, useMemo } from 'react';\nimport { StyledScrollView } from './ScrollView.styles';\n\nexport type ScrollViewProps = {\n /**\n * The elements that should be shown inside the scrollview\n */\n children: ReactNode;\n /**\n * The maximum height of the scroll view.\n */\n maxHeight?: CSSProperties['height'];\n /**\n * The height of the scroll view.\n */\n height?: CSSProperties['height'];\n /**\n * The maximum width of the scroll view.\n */\n maxWidth?: CSSProperties['width'];\n /**\n * The width of the scroll view.\n */\n width?: CSSProperties['width'];\n /**\n * The overflow-x style of the scroll view.\n */\n overflowX?: 'scroll' | 'auto';\n /**\n * The overflow-y style of the scroll view.\n */\n overflowY?: 'scroll' | 'auto';\n};\n\nconst ScrollView = forwardRef<HTMLDivElement, ScrollViewProps>(\n ({ maxHeight = 300, height, maxWidth, width, children, overflowX = 'auto', overflowY = 'auto' }, ref) => {\n const { browser } = getDevice();\n\n return useMemo(\n () => (\n <StyledScrollView\n $browser={browser?.name}\n $maxHeight={maxHeight}\n $height={height}\n $maxWidth={maxWidth}\n $width={width}\n $overflowX={overflowX}\n $overflowY={overflowY}\n ref={ref}\n >\n {children}\n </StyledScrollView>\n ),\n [browser?.name, children, height, maxHeight, maxWidth, overflowX, overflowY, ref, width],\n );\n },\n);\n\nScrollView.displayName = 'ScrollView';\n\nexport default ScrollView;\n"],"mappings":"AAAA,SAASA,SAAS,QAAQ,YAAY;AACtC,OAAOC,KAAK,IAAmBC,UAAU,EAAaC,OAAO,QAAQ,OAAO;AAC5E,SAASC,gBAAgB,QAAQ,qBAAqB;AAiCtD,MAAMC,UAAU,gBAAGH,UAAU,CACzB,CAAAI,IAAA,EAAiGC,GAAG,KAAK;EAAA,IAAxG;IAAEC,SAAS,GAAG,GAAG;IAAEC,MAAM;IAAEC,QAAQ;IAAEC,KAAK;IAAEC,QAAQ;IAAEC,SAAS,GAAG,MAAM;IAAEC,SAAS,GAAG;EAAO,CAAC,GAAAR,IAAA;EAC3F,MAAM;IAAES;EAAQ,CAAC,GAAGf,SAAS,CAAC,CAAC;EAE/B,OAAOG,OAAO,CACV,mBACIF,KAAA,CAAAe,aAAA,CAACZ,gBAAgB;IACba,QAAQ,EAAEF,OAAO,EAAEG,IAAK;IACxBC,UAAU,EAAEX,SAAU;IACtBY,OAAO,EAAEX,MAAO;IAChBY,SAAS,EAAEX,QAAS;IACpBY,MAAM,EAAEX,KAAM;IACdY,UAAU,EAAEV,SAAU;IACtBW,UAAU,EAAEV,SAAU;IACtBP,GAAG,EAAEA;EAAI,GAERK,QACa,CACrB,EACD,CAACG,OAAO,EAAEG,IAAI,EAAEN,QAAQ,EAAEH,MAAM,EAAED,SAAS,EAAEE,QAAQ,EAAEG,SAAS,EAAEC,SAAS,EAAEP,GAAG,EAAEI,KAAK,CAC3F,CAAC;AACL,CACJ,CAAC;AAEDN,UAAU,CAACoB,WAAW,GAAG,YAAY;AAErC,eAAepB,UAAU","ignoreList":[]}
|
|
@@ -1,25 +1,63 @@
|
|
|
1
1
|
import styled, { css } from 'styled-components';
|
|
2
2
|
export const StyledScrollView = styled.div`
|
|
3
|
-
|
|
3
|
+
${_ref => {
|
|
4
4
|
let {
|
|
5
5
|
$maxHeight
|
|
6
6
|
} = _ref;
|
|
7
|
-
return $maxHeight
|
|
8
|
-
}};
|
|
9
|
-
|
|
7
|
+
return $maxHeight && css`
|
|
8
|
+
max-height: ${typeof $maxHeight === 'number' ? `${$maxHeight}px` : $maxHeight};
|
|
9
|
+
`;
|
|
10
|
+
}}
|
|
11
|
+
${_ref2 => {
|
|
12
|
+
let {
|
|
13
|
+
$height
|
|
14
|
+
} = _ref2;
|
|
15
|
+
return $height && css`
|
|
16
|
+
height: ${typeof $height === 'number' ? `${$height}px` : $height};
|
|
17
|
+
`;
|
|
18
|
+
}}
|
|
19
|
+
${_ref3 => {
|
|
20
|
+
let {
|
|
21
|
+
$maxWidth
|
|
22
|
+
} = _ref3;
|
|
23
|
+
return $maxWidth && css`
|
|
24
|
+
max-width: ${typeof $maxWidth === 'number' ? `${$maxWidth}px` : $maxWidth};
|
|
25
|
+
`;
|
|
26
|
+
}}
|
|
27
|
+
${_ref4 => {
|
|
28
|
+
let {
|
|
29
|
+
$width
|
|
30
|
+
} = _ref4;
|
|
31
|
+
return $width && css`
|
|
32
|
+
width: ${typeof $width === 'number' ? `${$width}px` : $width};
|
|
33
|
+
`;
|
|
34
|
+
}}
|
|
35
|
+
${_ref5 => {
|
|
36
|
+
let {
|
|
37
|
+
$overflowX
|
|
38
|
+
} = _ref5;
|
|
39
|
+
return css`overflow-x: ${$overflowX};`;
|
|
40
|
+
}}
|
|
41
|
+
${_ref6 => {
|
|
42
|
+
let {
|
|
43
|
+
$overflowY
|
|
44
|
+
} = _ref6;
|
|
45
|
+
return css`overflow-y: ${$overflowY};`;
|
|
46
|
+
}}
|
|
10
47
|
|
|
11
48
|
// Styles for custom scrollbar
|
|
12
|
-
${
|
|
49
|
+
${_ref7 => {
|
|
13
50
|
let {
|
|
14
51
|
$browser,
|
|
15
52
|
theme
|
|
16
|
-
} =
|
|
53
|
+
} = _ref7;
|
|
17
54
|
return $browser === 'firefox' ? css`
|
|
18
55
|
scrollbar-color: rgba(${theme['text-rgb']}, 0.15) transparent;
|
|
19
56
|
scrollbar-width: thin;
|
|
20
57
|
` : css`
|
|
21
58
|
&::-webkit-scrollbar {
|
|
22
59
|
width: 10px;
|
|
60
|
+
height: 10px
|
|
23
61
|
}
|
|
24
62
|
|
|
25
63
|
&::-webkit-scrollbar-track {
|
|
@@ -29,6 +67,7 @@ export const StyledScrollView = styled.div`
|
|
|
29
67
|
&::-webkit-scrollbar-button {
|
|
30
68
|
background-color: transparent;
|
|
31
69
|
height: 5px;
|
|
70
|
+
width: 5px;
|
|
32
71
|
}
|
|
33
72
|
|
|
34
73
|
&::-webkit-scrollbar-thumb {
|
|
@@ -37,6 +76,10 @@ export const StyledScrollView = styled.div`
|
|
|
37
76
|
background-clip: padding-box;
|
|
38
77
|
border: solid 3px transparent;
|
|
39
78
|
}
|
|
79
|
+
|
|
80
|
+
&::-webkit-scrollbar-corner {
|
|
81
|
+
background-color: transparent;
|
|
82
|
+
}
|
|
40
83
|
`;
|
|
41
84
|
}}
|
|
42
85
|
`;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ScrollView.styles.js","names":["styled","css","StyledScrollView","div","_ref","$maxHeight","_ref2","$browser","theme"],"sources":["../../../../src/components/scroll-view/ScrollView.styles.ts"],"sourcesContent":["import type { Browser } from 'detect-browser';\nimport type { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledScrollViewProps = WithTheme<{\n $maxHeight
|
|
1
|
+
{"version":3,"file":"ScrollView.styles.js","names":["styled","css","StyledScrollView","div","_ref","$maxHeight","_ref2","$height","_ref3","$maxWidth","_ref4","$width","_ref5","$overflowX","_ref6","$overflowY","_ref7","$browser","theme"],"sources":["../../../../src/components/scroll-view/ScrollView.styles.ts"],"sourcesContent":["import type { Browser } from 'detect-browser';\nimport type { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledScrollViewProps = WithTheme<{\n $maxHeight?: CSSProperties['height'];\n $height?: CSSProperties['height'];\n $maxWidth?: CSSProperties['width'];\n $width?: CSSProperties['width'];\n $overflowX: 'scroll' | 'auto';\n $overflowY: 'scroll' | 'auto';\n $browser: Browser | 'bot' | null | undefined;\n}>;\n\nexport const StyledScrollView = styled.div<StyledScrollViewProps>`\n ${({ $maxHeight }) =>\n $maxHeight &&\n css`\n max-height: ${typeof $maxHeight === 'number' ? `${$maxHeight}px` : $maxHeight};\n `}\n ${({ $height }) =>\n $height &&\n css`\n height: ${typeof $height === 'number' ? `${$height}px` : $height};\n `} \n ${({ $maxWidth }) =>\n $maxWidth &&\n css`\n max-width: ${typeof $maxWidth === 'number' ? `${$maxWidth}px` : $maxWidth};\n `} \n ${({ $width }) =>\n $width &&\n css`\n width: ${typeof $width === 'number' ? `${$width}px` : $width};\n `} \n ${({ $overflowX }) => css`overflow-x: ${$overflowX};`}\n ${({ $overflowY }) => css`overflow-y: ${$overflowY};`}\n\n // Styles for custom scrollbar\n ${({ $browser, theme }: StyledScrollViewProps) =>\n $browser === 'firefox'\n ? css`\n scrollbar-color: rgba(${theme['text-rgb']}, 0.15) transparent;\n scrollbar-width: thin;\n `\n : css`\n &::-webkit-scrollbar {\n width: 10px;\n height: 10px\n }\n\n &::-webkit-scrollbar-track {\n background-color: transparent;\n }\n\n &::-webkit-scrollbar-button {\n background-color: transparent;\n height: 5px;\n width: 5px;\n }\n\n &::-webkit-scrollbar-thumb {\n background-color: rgba(${theme['text-rgb']}, 0.15);\n border-radius: 20px;\n background-clip: padding-box;\n border: solid 3px transparent;\n }\n \n &::-webkit-scrollbar-corner {\n background-color: transparent;\n }\n `}\n`;\n"],"mappings":"AAEA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAa/C,OAAO,MAAMC,gBAAgB,GAAGF,MAAM,CAACG,GAA0B;AACjE,MAAMC,IAAA;EAAA,IAAC;IAAEC;EAAW,CAAC,GAAAD,IAAA;EAAA,OACbC,UAAU,IACVJ,GAAG;AACX,0BAA0B,OAAOI,UAAU,KAAK,QAAQ,GAAG,GAAGA,UAAU,IAAI,GAAGA,UAAU;AACzF,SAAS;AAAA;AACT,MAAMC,KAAA;EAAA,IAAC;IAAEC;EAAQ,CAAC,GAAAD,KAAA;EAAA,OACVC,OAAO,IACPN,GAAG;AACX,sBAAsB,OAAOM,OAAO,KAAK,QAAQ,GAAG,GAAGA,OAAO,IAAI,GAAGA,OAAO;AAC5E,SAAS;AAAA;AACT,MAAMC,KAAA;EAAA,IAAC;IAAEC;EAAU,CAAC,GAAAD,KAAA;EAAA,OACZC,SAAS,IACTR,GAAG;AACX,yBAAyB,OAAOQ,SAAS,KAAK,QAAQ,GAAG,GAAGA,SAAS,IAAI,GAAGA,SAAS;AACrF,SAAS;AAAA;AACT,MAAMC,KAAA;EAAA,IAAC;IAAEC;EAAO,CAAC,GAAAD,KAAA;EAAA,OACTC,MAAM,IACNV,GAAG;AACX,qBAAqB,OAAOU,MAAM,KAAK,QAAQ,GAAG,GAAGA,MAAM,IAAI,GAAGA,MAAM;AACxE,SAAS;AAAA;AACT,MAAMC,KAAA;EAAA,IAAC;IAAEC;EAAW,CAAC,GAAAD,KAAA;EAAA,OAAKX,GAAG,eAAeY,UAAU,GAAG;AAAA;AACzD,MAAMC,KAAA;EAAA,IAAC;IAAEC;EAAW,CAAC,GAAAD,KAAA;EAAA,OAAKb,GAAG,eAAec,UAAU,GAAG;AAAA;AACzD;AACA;AACA,MAAMC,KAAA;EAAA,IAAC;IAAEC,QAAQ;IAAEC;EAA6B,CAAC,GAAAF,KAAA;EAAA,OACzCC,QAAQ,KAAK,SAAS,GAChBhB,GAAG;AACjB,0CAA0CiB,KAAK,CAAC,UAAU,CAAC;AAC3D;AACA,eAAe,GACDjB,GAAG;AACjB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,+CAA+CiB,KAAK,CAAC,UAAU,CAAC;AAChE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAe;AAAA;AACf,CAAC","ignoreList":[]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { CSSProperties,
|
|
1
|
+
import React, { CSSProperties, ReactNode } from 'react';
|
|
2
2
|
export type ScrollViewProps = {
|
|
3
3
|
/**
|
|
4
4
|
* The elements that should be shown inside the scrollview
|
|
@@ -7,7 +7,27 @@ export type ScrollViewProps = {
|
|
|
7
7
|
/**
|
|
8
8
|
* The maximum height of the scroll view.
|
|
9
9
|
*/
|
|
10
|
-
maxHeight
|
|
10
|
+
maxHeight?: CSSProperties['height'];
|
|
11
|
+
/**
|
|
12
|
+
* The height of the scroll view.
|
|
13
|
+
*/
|
|
14
|
+
height?: CSSProperties['height'];
|
|
15
|
+
/**
|
|
16
|
+
* The maximum width of the scroll view.
|
|
17
|
+
*/
|
|
18
|
+
maxWidth?: CSSProperties['width'];
|
|
19
|
+
/**
|
|
20
|
+
* The width of the scroll view.
|
|
21
|
+
*/
|
|
22
|
+
width?: CSSProperties['width'];
|
|
23
|
+
/**
|
|
24
|
+
* The overflow-x style of the scroll view.
|
|
25
|
+
*/
|
|
26
|
+
overflowX?: 'scroll' | 'auto';
|
|
27
|
+
/**
|
|
28
|
+
* The overflow-y style of the scroll view.
|
|
29
|
+
*/
|
|
30
|
+
overflowY?: 'scroll' | 'auto';
|
|
11
31
|
};
|
|
12
|
-
declare const ScrollView:
|
|
32
|
+
declare const ScrollView: React.ForwardRefExoticComponent<ScrollViewProps & React.RefAttributes<HTMLDivElement>>;
|
|
13
33
|
export default ScrollView;
|
|
@@ -2,7 +2,12 @@ import type { Browser } from 'detect-browser';
|
|
|
2
2
|
import type { CSSProperties } from 'react';
|
|
3
3
|
import type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';
|
|
4
4
|
type StyledScrollViewProps = WithTheme<{
|
|
5
|
-
$maxHeight
|
|
5
|
+
$maxHeight?: CSSProperties['height'];
|
|
6
|
+
$height?: CSSProperties['height'];
|
|
7
|
+
$maxWidth?: CSSProperties['width'];
|
|
8
|
+
$width?: CSSProperties['width'];
|
|
9
|
+
$overflowX: 'scroll' | 'auto';
|
|
10
|
+
$overflowY: 'scroll' | 'auto';
|
|
6
11
|
$browser: Browser | 'bot' | null | undefined;
|
|
7
12
|
}>;
|
|
8
13
|
export declare const StyledScrollView: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledScrollViewProps>> & string;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@chayns-components/core",
|
|
3
|
-
"version": "5.0.0-beta.
|
|
3
|
+
"version": "5.0.0-beta.840",
|
|
4
4
|
"description": "A set of beautiful React components for developing your own applications with chayns.",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"browserslist": [
|
|
@@ -85,5 +85,5 @@
|
|
|
85
85
|
"publishConfig": {
|
|
86
86
|
"access": "public"
|
|
87
87
|
},
|
|
88
|
-
"gitHead": "
|
|
88
|
+
"gitHead": "3c4c61ed583723172bc62ecc68898ed4110053e8"
|
|
89
89
|
}
|