@xanui/ui 1.1.54 → 1.1.55

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.
Files changed (6) hide show
  1. package/Scrollbar/index.cjs +26 -6
  2. package/Scrollbar/index.cjs.map +1 -1
  3. package/Scrollbar/index.d.ts +3 -0
  4. package/Scrollbar/index.js +26 -6
  5. package/Scrollbar/index.js.map +1 -1
  6. package/package.json +2 -2
package/Scrollbar/index.cjs CHANGED
@@ -7,7 +7,7 @@ var core = require('@xanui/core');
7
7
  var React = require('react');
8
8
 
9
9
  const Scrollbar = React.forwardRef((_a, ref) => {
10
- var { children } = _a, rest = tslib.__rest(_a, ["children"]);
10
+ var { children, thumbSize, thumbColor, trackColor } = _a, rest = tslib.__rest(_a, ["children", "thumbSize", "thumbColor", "trackColor"]);
11
11
  let [_b] = core.useInterface("Scrollbar", rest, {}), { onScroll, onScrollEnd } = _b, props = tslib.__rest(_b, ["onScroll", "onScrollEnd"]);
12
12
  const innerRef = React.useRef(null);
13
13
  React.useImperativeHandle(ref, () => ({
@@ -48,11 +48,31 @@ const Scrollbar = React.forwardRef((_a, ref) => {
48
48
  onScroll && onScroll(e);
49
49
  };
50
50
  }
51
- return (jsxRuntime.jsx(core.Tag, Object.assign({}, props, { ref: innerRef, baseClass: 'scrollbar', sxr: {
52
- height: "100%",
53
- width: "100%",
54
- overflow: "auto",
55
- }, children: children })));
51
+ let sxr = {};
52
+ if (thumbSize) {
53
+ sxr['&::-webkit-scrollbar'] = {
54
+ width: thumbSize,
55
+ height: thumbSize,
56
+ };
57
+ }
58
+ if (thumbColor) {
59
+ sxr['&::-webkit-scrollbar-thumb'] = {
60
+ backgroundColor: thumbColor,
61
+ borderRadius: "6px",
62
+ opacity: 0.6,
63
+ };
64
+ sxr['&::-webkit-scrollbar-thumb:hover'] = {
65
+ backgroundColor: thumbColor,
66
+ opacity: 0.0,
67
+ };
68
+ }
69
+ if (trackColor) {
70
+ sxr['&::-webkit-scrollbar-track'] = {
71
+ backgroundColor: trackColor,
72
+ borderRadius: "6px",
73
+ };
74
+ }
75
+ return (jsxRuntime.jsx(core.Tag, Object.assign({}, props, { ref: innerRef, baseClass: 'scrollbar', sxr: Object.assign({ height: "100%", width: "100%", overflow: "auto" }, sxr), children: children })));
56
76
  });
57
77
 
58
78
  module.exports = Scrollbar;
package/Scrollbar/index.cjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.cjs","sources":["../../src/Scrollbar/index.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { Tag, TagComponentType, TagProps, useInterface } from '@xanui/core';\r\nimport React, { ReactNode, UIEvent, useImperativeHandle, useRef } from 'react'\r\n\r\nexport type ScrollbarProps<T extends TagComponentType = \"div\"> = TagProps<T> & {\r\n children?: ReactNode;\r\n onScrollEnd?: (e: UIEvent<HTMLDivElement>) => void;\r\n}\r\n\r\nexport type ScrollbarHandle = {\r\n scrollTo: (pos: number) => void;\r\n scrollToBottom: () => void;\r\n scrollToTop: () => void;\r\n};\r\n\r\nconst Scrollbar = React.forwardRef(<T extends TagComponentType = \"div\">({ children, ...rest }: ScrollbarProps<T>, ref: React.Ref<ScrollbarHandle>) => {\r\n let [{ onScroll, onScrollEnd, ...props }] = useInterface<any>(\"Scrollbar\", rest, {})\r\n const innerRef = useRef<HTMLDivElement>(null);\r\n\r\n useImperativeHandle(ref, () => ({\r\n scrollTo(pos: number) {\r\n innerRef.current?.scrollTo({\r\n top: pos,\r\n behavior: \"smooth\"\r\n });\r\n },\r\n scrollToBottom() {\r\n if (!innerRef.current) return;\r\n const ele = innerRef.current;\r\n ele.scrollTo({\r\n top: ele.scrollHeight,\r\n behavior: \"smooth\"\r\n });\r\n },\r\n scrollToTop() {\r\n innerRef.current?.scrollTo({\r\n top: 0,\r\n behavior: \"smooth\"\r\n });\r\n }\r\n }));\r\n\r\n if (onScroll || onScrollEnd) {\r\n props.onScroll = (e: UIEvent<HTMLDivElement>) => {\r\n if (onScrollEnd) {\r\n const ele: any = e.target\r\n const scrollTop = ele.scrollTop\r\n const scrollHeight = ele.scrollHeight\r\n const clientHeight = ele.clientHeight\r\n const isScrollDown = scrollHeight - scrollTop <= clientHeight + 1\r\n isScrollDown && onScrollEnd(e)\r\n }\r\n onScroll && onScroll(e)\r\n }\r\n }\r\n\r\n return (\r\n <Tag\r\n {...props}\r\n ref={innerRef}\r\n baseClass='scrollbar'\r\n sxr={{\r\n height: \"100%\",\r\n width: \"100%\",\r\n overflow: \"auto\",\r\n }}\r\n >\r\n {children}\r\n </Tag>\r\n )\r\n})\r\n\r\nexport default Scrollbar "],"names":[],"mappings":";;;;;;;;AAgBA;AAAwE;;AAEpE;AAEA;AACI;;AACI;AACI;AACA;AACH;;;;;AAID;;;AAGI;AACH;;;;AAGD;AACI;AACA;AACH;;AAER;AAED;AACI;;AAEQ;AACA;AACA;AACA;;AAEA;;AAEJ;AACJ;;AAGJ;AAMY;AACA;AACA;;AAMhB;;"}
1
+ {"version":3,"file":"index.cjs","sources":["../../src/Scrollbar/index.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { Tag, TagComponentType, TagProps, useInterface } from '@xanui/core';\r\nimport React, { ReactNode, UIEvent, useImperativeHandle, useRef } from 'react'\r\n\r\nexport type ScrollbarProps<T extends TagComponentType = \"div\"> = TagProps<T> & {\r\n thumbSize?: number;\r\n thumbColor?: TagProps['color'];\r\n trackColor?: TagProps['color'];\r\n children?: ReactNode;\r\n onScrollEnd?: (e: UIEvent<HTMLDivElement>) => void;\r\n}\r\n\r\nexport type ScrollbarHandle = {\r\n scrollTo: (pos: number) => void;\r\n scrollToBottom: () => void;\r\n scrollToTop: () => void;\r\n};\r\n\r\nconst Scrollbar = React.forwardRef(<T extends TagComponentType = \"div\">({ children, thumbSize, thumbColor, trackColor, ...rest }: ScrollbarProps<T>, ref: React.Ref<ScrollbarHandle>) => {\r\n let [{ onScroll, onScrollEnd, ...props }] = useInterface<any>(\"Scrollbar\", rest, {})\r\n const innerRef = useRef<HTMLDivElement>(null);\r\n\r\n useImperativeHandle(ref, () => ({\r\n scrollTo(pos: number) {\r\n innerRef.current?.scrollTo({\r\n top: pos,\r\n behavior: \"smooth\"\r\n });\r\n },\r\n scrollToBottom() {\r\n if (!innerRef.current) return;\r\n const ele = innerRef.current;\r\n ele.scrollTo({\r\n top: ele.scrollHeight,\r\n behavior: \"smooth\"\r\n });\r\n },\r\n scrollToTop() {\r\n innerRef.current?.scrollTo({\r\n top: 0,\r\n behavior: \"smooth\"\r\n });\r\n }\r\n }));\r\n\r\n if (onScroll || onScrollEnd) {\r\n props.onScroll = (e: UIEvent<HTMLDivElement>) => {\r\n if (onScrollEnd) {\r\n const ele: any = e.target\r\n const scrollTop = ele.scrollTop\r\n const scrollHeight = ele.scrollHeight\r\n const clientHeight = ele.clientHeight\r\n const isScrollDown = scrollHeight - scrollTop <= clientHeight + 1\r\n isScrollDown && onScrollEnd(e)\r\n }\r\n onScroll && onScroll(e)\r\n }\r\n }\r\n\r\n let sxr: any = {}\r\n\r\n if (thumbSize) {\r\n sxr['&::-webkit-scrollbar'] = {\r\n width: thumbSize,\r\n height: thumbSize,\r\n }\r\n }\r\n if (thumbColor) {\r\n sxr['&::-webkit-scrollbar-thumb'] = {\r\n backgroundColor: thumbColor,\r\n borderRadius: \"6px\",\r\n opacity: 0.6,\r\n }\r\n sxr['&::-webkit-scrollbar-thumb:hover'] = {\r\n backgroundColor: thumbColor,\r\n opacity: 0.0,\r\n }\r\n }\r\n\r\n if (trackColor) {\r\n sxr['&::-webkit-scrollbar-track'] = {\r\n backgroundColor: trackColor,\r\n borderRadius: \"6px\",\r\n }\r\n }\r\n\r\n return (\r\n <Tag\r\n {...props}\r\n ref={innerRef}\r\n baseClass='scrollbar'\r\n sxr={{\r\n height: \"100%\",\r\n width: \"100%\",\r\n overflow: \"auto\",\r\n ...sxr,\r\n }}\r\n >\r\n {children}\r\n </Tag>\r\n )\r\n})\r\n\r\nexport default Scrollbar "],"names":[],"mappings":";;;;;;;;AAmBA;AAAwE;;AAEpE;AAEA;AACI;;AACI;AACI;AACA;AACH;;;;;AAID;;;AAGI;AACH;;;;AAGD;AACI;AACA;AACH;;AAER;AAED;AACI;;AAEQ;AACA;AACA;AACA;;AAEA;;AAEJ;AACJ;;;;;AAOI;AACA;;;;;AAKA;AACA;AACA;;;AAGA;AACA;;;;;AAMA;AACA;;;AAIR;AAeJ;;"}
package/Scrollbar/index.d.ts CHANGED
@@ -2,6 +2,9 @@ import { TagComponentType, TagProps } from '@xanui/core';
2
2
  import React, { ReactNode, UIEvent } from 'react';
3
3
 
4
4
  type ScrollbarProps<T extends TagComponentType = "div"> = TagProps<T> & {
5
+ thumbSize?: number;
6
+ thumbColor?: TagProps['color'];
7
+ trackColor?: TagProps['color'];
5
8
  children?: ReactNode;
6
9
  onScrollEnd?: (e: UIEvent<HTMLDivElement>) => void;
7
10
  };
package/Scrollbar/index.js CHANGED
@@ -5,7 +5,7 @@ import { useInterface, Tag } from '@xanui/core';
5
5
  import React, { useRef, useImperativeHandle } from 'react';
6
6
 
7
7
  const Scrollbar = React.forwardRef((_a, ref) => {
8
- var { children } = _a, rest = __rest(_a, ["children"]);
8
+ var { children, thumbSize, thumbColor, trackColor } = _a, rest = __rest(_a, ["children", "thumbSize", "thumbColor", "trackColor"]);
9
9
  let [_b] = useInterface("Scrollbar", rest, {}), { onScroll, onScrollEnd } = _b, props = __rest(_b, ["onScroll", "onScrollEnd"]);
10
10
  const innerRef = useRef(null);
11
11
  useImperativeHandle(ref, () => ({
@@ -46,11 +46,31 @@ const Scrollbar = React.forwardRef((_a, ref) => {
46
46
  onScroll && onScroll(e);
47
47
  };
48
48
  }
49
- return (jsx(Tag, Object.assign({}, props, { ref: innerRef, baseClass: 'scrollbar', sxr: {
50
- height: "100%",
51
- width: "100%",
52
- overflow: "auto",
53
- }, children: children })));
49
+ let sxr = {};
50
+ if (thumbSize) {
51
+ sxr['&::-webkit-scrollbar'] = {
52
+ width: thumbSize,
53
+ height: thumbSize,
54
+ };
55
+ }
56
+ if (thumbColor) {
57
+ sxr['&::-webkit-scrollbar-thumb'] = {
58
+ backgroundColor: thumbColor,
59
+ borderRadius: "6px",
60
+ opacity: 0.6,
61
+ };
62
+ sxr['&::-webkit-scrollbar-thumb:hover'] = {
63
+ backgroundColor: thumbColor,
64
+ opacity: 0.0,
65
+ };
66
+ }
67
+ if (trackColor) {
68
+ sxr['&::-webkit-scrollbar-track'] = {
69
+ backgroundColor: trackColor,
70
+ borderRadius: "6px",
71
+ };
72
+ }
73
+ return (jsx(Tag, Object.assign({}, props, { ref: innerRef, baseClass: 'scrollbar', sxr: Object.assign({ height: "100%", width: "100%", overflow: "auto" }, sxr), children: children })));
54
74
  });
55
75
 
56
76
  export { Scrollbar as default };
package/Scrollbar/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../../src/Scrollbar/index.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { Tag, TagComponentType, TagProps, useInterface } from '@xanui/core';\r\nimport React, { ReactNode, UIEvent, useImperativeHandle, useRef } from 'react'\r\n\r\nexport type ScrollbarProps<T extends TagComponentType = \"div\"> = TagProps<T> & {\r\n children?: ReactNode;\r\n onScrollEnd?: (e: UIEvent<HTMLDivElement>) => void;\r\n}\r\n\r\nexport type ScrollbarHandle = {\r\n scrollTo: (pos: number) => void;\r\n scrollToBottom: () => void;\r\n scrollToTop: () => void;\r\n};\r\n\r\nconst Scrollbar = React.forwardRef(<T extends TagComponentType = \"div\">({ children, ...rest }: ScrollbarProps<T>, ref: React.Ref<ScrollbarHandle>) => {\r\n let [{ onScroll, onScrollEnd, ...props }] = useInterface<any>(\"Scrollbar\", rest, {})\r\n const innerRef = useRef<HTMLDivElement>(null);\r\n\r\n useImperativeHandle(ref, () => ({\r\n scrollTo(pos: number) {\r\n innerRef.current?.scrollTo({\r\n top: pos,\r\n behavior: \"smooth\"\r\n });\r\n },\r\n scrollToBottom() {\r\n if (!innerRef.current) return;\r\n const ele = innerRef.current;\r\n ele.scrollTo({\r\n top: ele.scrollHeight,\r\n behavior: \"smooth\"\r\n });\r\n },\r\n scrollToTop() {\r\n innerRef.current?.scrollTo({\r\n top: 0,\r\n behavior: \"smooth\"\r\n });\r\n }\r\n }));\r\n\r\n if (onScroll || onScrollEnd) {\r\n props.onScroll = (e: UIEvent<HTMLDivElement>) => {\r\n if (onScrollEnd) {\r\n const ele: any = e.target\r\n const scrollTop = ele.scrollTop\r\n const scrollHeight = ele.scrollHeight\r\n const clientHeight = ele.clientHeight\r\n const isScrollDown = scrollHeight - scrollTop <= clientHeight + 1\r\n isScrollDown && onScrollEnd(e)\r\n }\r\n onScroll && onScroll(e)\r\n }\r\n }\r\n\r\n return (\r\n <Tag\r\n {...props}\r\n ref={innerRef}\r\n baseClass='scrollbar'\r\n sxr={{\r\n height: \"100%\",\r\n width: \"100%\",\r\n overflow: \"auto\",\r\n }}\r\n >\r\n {children}\r\n </Tag>\r\n )\r\n})\r\n\r\nexport default Scrollbar "],"names":[],"mappings":";;;;;;AAgBA;AAAwE;;AAEpE;AAEA;AACI;;AACI;AACI;AACA;AACH;;;;;AAID;;;AAGI;AACH;;;;AAGD;AACI;AACA;AACH;;AAER;AAED;AACI;;AAEQ;AACA;AACA;AACA;;AAEA;;AAEJ;AACJ;;AAGJ;AAMY;AACA;AACA;;AAMhB;;"}
1
+ {"version":3,"file":"index.js","sources":["../../src/Scrollbar/index.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { Tag, TagComponentType, TagProps, useInterface } from '@xanui/core';\r\nimport React, { ReactNode, UIEvent, useImperativeHandle, useRef } from 'react'\r\n\r\nexport type ScrollbarProps<T extends TagComponentType = \"div\"> = TagProps<T> & {\r\n thumbSize?: number;\r\n thumbColor?: TagProps['color'];\r\n trackColor?: TagProps['color'];\r\n children?: ReactNode;\r\n onScrollEnd?: (e: UIEvent<HTMLDivElement>) => void;\r\n}\r\n\r\nexport type ScrollbarHandle = {\r\n scrollTo: (pos: number) => void;\r\n scrollToBottom: () => void;\r\n scrollToTop: () => void;\r\n};\r\n\r\nconst Scrollbar = React.forwardRef(<T extends TagComponentType = \"div\">({ children, thumbSize, thumbColor, trackColor, ...rest }: ScrollbarProps<T>, ref: React.Ref<ScrollbarHandle>) => {\r\n let [{ onScroll, onScrollEnd, ...props }] = useInterface<any>(\"Scrollbar\", rest, {})\r\n const innerRef = useRef<HTMLDivElement>(null);\r\n\r\n useImperativeHandle(ref, () => ({\r\n scrollTo(pos: number) {\r\n innerRef.current?.scrollTo({\r\n top: pos,\r\n behavior: \"smooth\"\r\n });\r\n },\r\n scrollToBottom() {\r\n if (!innerRef.current) return;\r\n const ele = innerRef.current;\r\n ele.scrollTo({\r\n top: ele.scrollHeight,\r\n behavior: \"smooth\"\r\n });\r\n },\r\n scrollToTop() {\r\n innerRef.current?.scrollTo({\r\n top: 0,\r\n behavior: \"smooth\"\r\n });\r\n }\r\n }));\r\n\r\n if (onScroll || onScrollEnd) {\r\n props.onScroll = (e: UIEvent<HTMLDivElement>) => {\r\n if (onScrollEnd) {\r\n const ele: any = e.target\r\n const scrollTop = ele.scrollTop\r\n const scrollHeight = ele.scrollHeight\r\n const clientHeight = ele.clientHeight\r\n const isScrollDown = scrollHeight - scrollTop <= clientHeight + 1\r\n isScrollDown && onScrollEnd(e)\r\n }\r\n onScroll && onScroll(e)\r\n }\r\n }\r\n\r\n let sxr: any = {}\r\n\r\n if (thumbSize) {\r\n sxr['&::-webkit-scrollbar'] = {\r\n width: thumbSize,\r\n height: thumbSize,\r\n }\r\n }\r\n if (thumbColor) {\r\n sxr['&::-webkit-scrollbar-thumb'] = {\r\n backgroundColor: thumbColor,\r\n borderRadius: \"6px\",\r\n opacity: 0.6,\r\n }\r\n sxr['&::-webkit-scrollbar-thumb:hover'] = {\r\n backgroundColor: thumbColor,\r\n opacity: 0.0,\r\n }\r\n }\r\n\r\n if (trackColor) {\r\n sxr['&::-webkit-scrollbar-track'] = {\r\n backgroundColor: trackColor,\r\n borderRadius: \"6px\",\r\n }\r\n }\r\n\r\n return (\r\n <Tag\r\n {...props}\r\n ref={innerRef}\r\n baseClass='scrollbar'\r\n sxr={{\r\n height: \"100%\",\r\n width: \"100%\",\r\n overflow: \"auto\",\r\n ...sxr,\r\n }}\r\n >\r\n {children}\r\n </Tag>\r\n )\r\n})\r\n\r\nexport default Scrollbar "],"names":[],"mappings":";;;;;;AAmBA;AAAwE;;AAEpE;AAEA;AACI;;AACI;AACI;AACA;AACH;;;;;AAID;;;AAGI;AACH;;;;AAGD;AACI;AACA;AACH;;AAER;AAED;AACI;;AAEQ;AACA;AACA;AACA;;AAEA;;AAEJ;AACJ;;;;;AAOI;AACA;;;;;AAKA;AACA;AACA;;;AAGA;AACA;;;;;AAMA;AACA;;;AAIR;AAeJ;;"}
package/package.json CHANGED
@@ -1,10 +1,10 @@
1
1
  {
2
2
  "name": "@xanui/ui",
3
- "version": "1.1.54",
3
+ "version": "1.1.55",
4
4
  "description": "Xanui - A React Component Library",
5
5
  "private": false,
6
6
  "dependencies": {
7
- "@xanui/core": "^1.2.43",
7
+ "@xanui/core": "^1.2.48",
8
8
  "@xanui/icons": "^1.1.12",
9
9
  "pretty-class": "^1.0.8",
10
10
  "react-state-bucket": "^1.2.6"