@xanui/ui 1.1.0 → 1.1.1
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/Scrollbar/index.d.ts +7 -2
- package/Scrollbar/index.js +36 -37
- package/Scrollbar/index.js.map +1 -1
- package/Scrollbar/index.mjs +37 -38
- package/Scrollbar/index.mjs.map +1 -1
- package/package.json +2 -2
package/Scrollbar/index.d.ts
CHANGED
|
@@ -8,7 +8,12 @@ type ScrollbarProps<T extends TagComponentType = "div"> = TagProps<T> & {
|
|
|
8
8
|
trackColor?: useBreakpointPropsType<string>;
|
|
9
9
|
onScrollEnd?: (e: UIEvent<HTMLDivElement>) => void;
|
|
10
10
|
};
|
|
11
|
-
|
|
11
|
+
type ScrollbarHandle = {
|
|
12
|
+
scrollTo: (pos: number) => void;
|
|
13
|
+
scrollToBottom: () => void;
|
|
14
|
+
scrollToTop: () => void;
|
|
15
|
+
};
|
|
16
|
+
declare const Scrollbar: React.ForwardRefExoticComponent<Omit<ScrollbarProps<TagComponentType>, "ref"> & React.RefAttributes<ScrollbarHandle>>;
|
|
12
17
|
|
|
13
18
|
export { Scrollbar as default };
|
|
14
|
-
export type { ScrollbarProps };
|
|
19
|
+
export type { ScrollbarHandle, ScrollbarProps };
|
package/Scrollbar/index.js
CHANGED
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
'use strict';Object.defineProperty(exports,'__esModule',{value:true});var tslib=require('tslib'),jsxRuntime=require('react/jsx-runtime'),core=require('@xanui/core'),React=require('react');const Scrollbar = React.forwardRef((_a, ref) => {
|
|
2
|
-
var _b, _c, _d;
|
|
3
2
|
var { children } = _a, rest = tslib.__rest(_a, ["children"]);
|
|
4
|
-
let [
|
|
3
|
+
let [_b] = core.useInterface("Scrollbar", rest, {}), { thumbSize, thumbColor, trackColor, onScroll, onScrollEnd } = _b, props = tslib.__rest(_b, ["thumbSize", "thumbColor", "trackColor", "onScroll", "onScrollEnd"]);
|
|
5
4
|
const _p = {};
|
|
6
5
|
if (thumbSize)
|
|
7
6
|
_p.thumbSize = thumbSize;
|
|
@@ -10,21 +9,40 @@
|
|
|
10
9
|
if (trackColor)
|
|
11
10
|
_p.trackColor = trackColor;
|
|
12
11
|
const p = core.useBreakpointProps(_p);
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
12
|
+
const theme = core.useTheme();
|
|
13
|
+
const sclass = core.useScrollbar({
|
|
14
|
+
themeName: theme.name,
|
|
15
|
+
thumbSize: p.thumbSize,
|
|
16
|
+
thumbColor: p.thumbColor,
|
|
17
|
+
trackColor: p.trackColor,
|
|
18
|
+
});
|
|
19
|
+
props.className = props.className ? `${props.className} ${sclass}` : sclass;
|
|
20
|
+
const innerRef = React.useRef(null);
|
|
21
|
+
React.useImperativeHandle(ref, () => ({
|
|
22
|
+
scrollTo(pos) {
|
|
23
|
+
var _a;
|
|
24
|
+
(_a = innerRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo({
|
|
25
|
+
top: pos,
|
|
26
|
+
behavior: "smooth"
|
|
27
|
+
});
|
|
28
|
+
},
|
|
29
|
+
scrollToBottom() {
|
|
30
|
+
if (!innerRef.current)
|
|
31
|
+
return;
|
|
32
|
+
const ele = innerRef.current;
|
|
33
|
+
ele.scrollTo({
|
|
34
|
+
top: ele.scrollHeight,
|
|
35
|
+
behavior: "smooth"
|
|
36
|
+
});
|
|
37
|
+
},
|
|
38
|
+
scrollToTop() {
|
|
39
|
+
var _a;
|
|
40
|
+
(_a = innerRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo({
|
|
41
|
+
top: 0,
|
|
42
|
+
behavior: "smooth"
|
|
43
|
+
});
|
|
44
|
+
}
|
|
45
|
+
}));
|
|
28
46
|
if (onScroll || onScrollEnd) {
|
|
29
47
|
props.onScroll = (e) => {
|
|
30
48
|
if (onScrollEnd) {
|
|
@@ -38,28 +56,9 @@
|
|
|
38
56
|
onScroll && onScroll(e);
|
|
39
57
|
};
|
|
40
58
|
}
|
|
41
|
-
return (jsxRuntime.jsx(core.Tag, Object.assign({}, props, { ref:
|
|
59
|
+
return (jsxRuntime.jsx(core.Tag, Object.assign({}, props, { ref: innerRef, baseClass: 'scrollbar', sxr: {
|
|
42
60
|
height: "100%",
|
|
43
61
|
width: "100%",
|
|
44
62
|
overflow: "auto",
|
|
45
|
-
// scrollbarWidth: "thin", // Firefox specific
|
|
46
|
-
// scrollbarColor: `${thumbColor} ${trackColor}`, //"#888 #f4f4f4", // Thumb and track colors for Firefox
|
|
47
|
-
// msOverflowStyle: "scrollbar", // Internet Explorer
|
|
48
|
-
"&::-webkit-scrollbar": {
|
|
49
|
-
width: thumbSize, // Width of the vertical scrollbar
|
|
50
|
-
height: thumbSize, // Height of the horizontal scrollbar
|
|
51
|
-
},
|
|
52
|
-
"&::-webkit-scrollbar-thumb": {
|
|
53
|
-
backgroundColor: thumbColor, // Color of the scroll thumb
|
|
54
|
-
borderRadius: "5px", // Rounded corners
|
|
55
|
-
border: "2px solid #f4f4f4", // Space around the thumb
|
|
56
|
-
},
|
|
57
|
-
"&::-webkit-scrollbar-thumb:hover": {
|
|
58
|
-
backgroundColor: thumbColor, // Thumb color on hover
|
|
59
|
-
},
|
|
60
|
-
"&::-webkit-scrollbar-track": {
|
|
61
|
-
backgroundColor: trackColor, // Background color of the scrollbar track
|
|
62
|
-
borderRadius: "5px", // Rounded corners
|
|
63
|
-
},
|
|
64
63
|
}, children: children })));
|
|
65
64
|
});exports.default=Scrollbar;//# sourceMappingURL=index.js.map
|
package/Scrollbar/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../src/Scrollbar/index.tsx"],"sourcesContent":["\nimport { Tag, TagComponentType, TagProps, useBreakpointProps, useInterface, useBreakpointPropsType } from '@xanui/core';\n\nimport React, { ReactNode, UIEvent,
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/Scrollbar/index.tsx"],"sourcesContent":["\nimport { Tag, TagComponentType, TagProps, useBreakpointProps, useInterface, useBreakpointPropsType, useScrollbar, useTheme } from '@xanui/core';\n\nimport React, { ReactNode, UIEvent, useImperativeHandle, useRef } from 'react'\n\nexport type ScrollbarProps<T extends TagComponentType = \"div\"> = TagProps<T> & {\n children: ReactNode;\n thumbSize?: useBreakpointPropsType<number>;\n thumbColor?: useBreakpointPropsType<string>;\n trackColor?: useBreakpointPropsType<string>;\n onScrollEnd?: (e: UIEvent<HTMLDivElement>) => void;\n}\n\nexport type ScrollbarHandle = {\n scrollTo: (pos: number) => void;\n scrollToBottom: () => void;\n scrollToTop: () => void;\n};\n\nconst Scrollbar = React.forwardRef(<T extends TagComponentType = \"div\">({ children, ...rest }: ScrollbarProps<T>, ref: React.Ref<ScrollbarHandle>) => {\n let [{ thumbSize, thumbColor, trackColor, onScroll, onScrollEnd, ...props }] = useInterface<any>(\"Scrollbar\", rest, {})\n const _p: any = {}\n if (thumbSize) _p.thumbSize = thumbSize\n if (thumbColor) _p.thumbColor = thumbColor\n if (trackColor) _p.trackColor = trackColor\n const p: any = useBreakpointProps(_p)\n const theme = useTheme()\n const sclass = useScrollbar({\n themeName: theme.name,\n thumbSize: p.thumbSize,\n thumbColor: p.thumbColor,\n trackColor: p.trackColor,\n })\n props.className = props.className ? `${props.className} ${sclass}` : sclass\n const innerRef = useRef<HTMLDivElement>(null);\n\n\n useImperativeHandle(ref, () => ({\n scrollTo(pos: number) {\n innerRef.current?.scrollTo({\n top: pos,\n behavior: \"smooth\"\n });\n },\n scrollToBottom() {\n if (!innerRef.current) return;\n const ele = innerRef.current;\n ele.scrollTo({\n top: ele.scrollHeight,\n behavior: \"smooth\"\n });\n },\n scrollToTop() {\n innerRef.current?.scrollTo({\n top: 0,\n behavior: \"smooth\"\n });\n }\n }));\n\n if (onScroll || onScrollEnd) {\n props.onScroll = (e: UIEvent<HTMLDivElement>) => {\n if (onScrollEnd) {\n const ele: any = e.target\n const scrollTop = ele.scrollTop\n const scrollHeight = ele.scrollHeight\n const clientHeight = ele.clientHeight\n const isScrollDown = scrollHeight - scrollTop <= clientHeight + 1\n isScrollDown && onScrollEnd(e)\n }\n onScroll && onScroll(e)\n }\n }\n\n return (\n <Tag\n {...props}\n ref={innerRef}\n baseClass='scrollbar'\n sxr={{\n height: \"100%\",\n width: \"100%\",\n overflow: \"auto\",\n }}\n >\n {children}\n </Tag>\n )\n})\n\nexport default Scrollbar "],"names":["__rest","useInterface","useBreakpointProps","useTheme","useScrollbar","useRef","useImperativeHandle","_jsx","Tag"],"mappings":"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"}
|
package/Scrollbar/index.mjs
CHANGED
|
@@ -1,7 +1,6 @@
|
|
|
1
|
-
import {__rest}from'tslib';import {jsx}from'react/jsx-runtime';import {useInterface,useBreakpointProps,Tag}from'@xanui/core';import React,{useRef,
|
|
2
|
-
var _b, _c, _d;
|
|
1
|
+
import {__rest}from'tslib';import {jsx}from'react/jsx-runtime';import {useInterface,useBreakpointProps,useTheme,useScrollbar,Tag}from'@xanui/core';import React,{useRef,useImperativeHandle}from'react';const Scrollbar = React.forwardRef((_a, ref) => {
|
|
3
2
|
var { children } = _a, rest = __rest(_a, ["children"]);
|
|
4
|
-
let [
|
|
3
|
+
let [_b] = useInterface("Scrollbar", rest, {}), { thumbSize, thumbColor, trackColor, onScroll, onScrollEnd } = _b, props = __rest(_b, ["thumbSize", "thumbColor", "trackColor", "onScroll", "onScrollEnd"]);
|
|
5
4
|
const _p = {};
|
|
6
5
|
if (thumbSize)
|
|
7
6
|
_p.thumbSize = thumbSize;
|
|
@@ -10,21 +9,40 @@ import {__rest}from'tslib';import {jsx}from'react/jsx-runtime';import {useInterf
|
|
|
10
9
|
if (trackColor)
|
|
11
10
|
_p.trackColor = trackColor;
|
|
12
11
|
const p = useBreakpointProps(_p);
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
12
|
+
const theme = useTheme();
|
|
13
|
+
const sclass = useScrollbar({
|
|
14
|
+
themeName: theme.name,
|
|
15
|
+
thumbSize: p.thumbSize,
|
|
16
|
+
thumbColor: p.thumbColor,
|
|
17
|
+
trackColor: p.trackColor,
|
|
18
|
+
});
|
|
19
|
+
props.className = props.className ? `${props.className} ${sclass}` : sclass;
|
|
20
|
+
const innerRef = useRef(null);
|
|
21
|
+
useImperativeHandle(ref, () => ({
|
|
22
|
+
scrollTo(pos) {
|
|
23
|
+
var _a;
|
|
24
|
+
(_a = innerRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo({
|
|
25
|
+
top: pos,
|
|
26
|
+
behavior: "smooth"
|
|
27
|
+
});
|
|
28
|
+
},
|
|
29
|
+
scrollToBottom() {
|
|
30
|
+
if (!innerRef.current)
|
|
31
|
+
return;
|
|
32
|
+
const ele = innerRef.current;
|
|
33
|
+
ele.scrollTo({
|
|
34
|
+
top: ele.scrollHeight,
|
|
35
|
+
behavior: "smooth"
|
|
36
|
+
});
|
|
37
|
+
},
|
|
38
|
+
scrollToTop() {
|
|
39
|
+
var _a;
|
|
40
|
+
(_a = innerRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo({
|
|
41
|
+
top: 0,
|
|
42
|
+
behavior: "smooth"
|
|
43
|
+
});
|
|
44
|
+
}
|
|
45
|
+
}));
|
|
28
46
|
if (onScroll || onScrollEnd) {
|
|
29
47
|
props.onScroll = (e) => {
|
|
30
48
|
if (onScrollEnd) {
|
|
@@ -38,28 +56,9 @@ import {__rest}from'tslib';import {jsx}from'react/jsx-runtime';import {useInterf
|
|
|
38
56
|
onScroll && onScroll(e);
|
|
39
57
|
};
|
|
40
58
|
}
|
|
41
|
-
return (jsx(Tag, Object.assign({}, props, { ref:
|
|
59
|
+
return (jsx(Tag, Object.assign({}, props, { ref: innerRef, baseClass: 'scrollbar', sxr: {
|
|
42
60
|
height: "100%",
|
|
43
61
|
width: "100%",
|
|
44
62
|
overflow: "auto",
|
|
45
|
-
// scrollbarWidth: "thin", // Firefox specific
|
|
46
|
-
// scrollbarColor: `${thumbColor} ${trackColor}`, //"#888 #f4f4f4", // Thumb and track colors for Firefox
|
|
47
|
-
// msOverflowStyle: "scrollbar", // Internet Explorer
|
|
48
|
-
"&::-webkit-scrollbar": {
|
|
49
|
-
width: thumbSize, // Width of the vertical scrollbar
|
|
50
|
-
height: thumbSize, // Height of the horizontal scrollbar
|
|
51
|
-
},
|
|
52
|
-
"&::-webkit-scrollbar-thumb": {
|
|
53
|
-
backgroundColor: thumbColor, // Color of the scroll thumb
|
|
54
|
-
borderRadius: "5px", // Rounded corners
|
|
55
|
-
border: "2px solid #f4f4f4", // Space around the thumb
|
|
56
|
-
},
|
|
57
|
-
"&::-webkit-scrollbar-thumb:hover": {
|
|
58
|
-
backgroundColor: thumbColor, // Thumb color on hover
|
|
59
|
-
},
|
|
60
|
-
"&::-webkit-scrollbar-track": {
|
|
61
|
-
backgroundColor: trackColor, // Background color of the scrollbar track
|
|
62
|
-
borderRadius: "5px", // Rounded corners
|
|
63
|
-
},
|
|
64
63
|
}, children: children })));
|
|
65
64
|
});export{Scrollbar as default};//# sourceMappingURL=index.mjs.map
|
package/Scrollbar/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","sources":["../../src/Scrollbar/index.tsx"],"sourcesContent":["\nimport { Tag, TagComponentType, TagProps, useBreakpointProps, useInterface, useBreakpointPropsType } from '@xanui/core';\n\nimport React, { ReactNode, UIEvent,
|
|
1
|
+
{"version":3,"file":"index.mjs","sources":["../../src/Scrollbar/index.tsx"],"sourcesContent":["\nimport { Tag, TagComponentType, TagProps, useBreakpointProps, useInterface, useBreakpointPropsType, useScrollbar, useTheme } from '@xanui/core';\n\nimport React, { ReactNode, UIEvent, useImperativeHandle, useRef } from 'react'\n\nexport type ScrollbarProps<T extends TagComponentType = \"div\"> = TagProps<T> & {\n children: ReactNode;\n thumbSize?: useBreakpointPropsType<number>;\n thumbColor?: useBreakpointPropsType<string>;\n trackColor?: useBreakpointPropsType<string>;\n onScrollEnd?: (e: UIEvent<HTMLDivElement>) => void;\n}\n\nexport type ScrollbarHandle = {\n scrollTo: (pos: number) => void;\n scrollToBottom: () => void;\n scrollToTop: () => void;\n};\n\nconst Scrollbar = React.forwardRef(<T extends TagComponentType = \"div\">({ children, ...rest }: ScrollbarProps<T>, ref: React.Ref<ScrollbarHandle>) => {\n let [{ thumbSize, thumbColor, trackColor, onScroll, onScrollEnd, ...props }] = useInterface<any>(\"Scrollbar\", rest, {})\n const _p: any = {}\n if (thumbSize) _p.thumbSize = thumbSize\n if (thumbColor) _p.thumbColor = thumbColor\n if (trackColor) _p.trackColor = trackColor\n const p: any = useBreakpointProps(_p)\n const theme = useTheme()\n const sclass = useScrollbar({\n themeName: theme.name,\n thumbSize: p.thumbSize,\n thumbColor: p.thumbColor,\n trackColor: p.trackColor,\n })\n props.className = props.className ? `${props.className} ${sclass}` : sclass\n const innerRef = useRef<HTMLDivElement>(null);\n\n\n useImperativeHandle(ref, () => ({\n scrollTo(pos: number) {\n innerRef.current?.scrollTo({\n top: pos,\n behavior: \"smooth\"\n });\n },\n scrollToBottom() {\n if (!innerRef.current) return;\n const ele = innerRef.current;\n ele.scrollTo({\n top: ele.scrollHeight,\n behavior: \"smooth\"\n });\n },\n scrollToTop() {\n innerRef.current?.scrollTo({\n top: 0,\n behavior: \"smooth\"\n });\n }\n }));\n\n if (onScroll || onScrollEnd) {\n props.onScroll = (e: UIEvent<HTMLDivElement>) => {\n if (onScrollEnd) {\n const ele: any = e.target\n const scrollTop = ele.scrollTop\n const scrollHeight = ele.scrollHeight\n const clientHeight = ele.clientHeight\n const isScrollDown = scrollHeight - scrollTop <= clientHeight + 1\n isScrollDown && onScrollEnd(e)\n }\n onScroll && onScroll(e)\n }\n }\n\n return (\n <Tag\n {...props}\n ref={innerRef}\n baseClass='scrollbar'\n sxr={{\n height: \"100%\",\n width: \"100%\",\n overflow: \"auto\",\n }}\n >\n {children}\n </Tag>\n )\n})\n\nexport default Scrollbar "],"names":["_jsx"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@xanui/ui",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.1",
|
|
4
4
|
"description": "",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public"
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
"module": "./index.mjs",
|
|
10
10
|
"types": "./index.d.ts",
|
|
11
11
|
"dependencies": {
|
|
12
|
-
"@xanui/core": "^1.1.
|
|
12
|
+
"@xanui/core": "^1.1.14",
|
|
13
13
|
"@xanui/icons": "^1.1.10",
|
|
14
14
|
"oncss": "^1.1.15",
|
|
15
15
|
"pretty-class": "^1.0.5",
|