Skip to content

Commit 6bf4937

Browse files
rommguyrommguy
committed
Switch to styled-components
1 parent 7d1e99a commit 6bf4937

File tree

6 files changed

+193
-16
lines changed

6 files changed

+193
-16
lines changed

‎package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,8 @@
2929
"@types/lodash": "^4.14.202",
3030
"lodash": "^4.17.21",
3131
"react": "^18.2.0",
32-
"react-dom": "^18.2.0"
32+
"react-dom": "^18.2.0",
33+
"styled-components": "^6.1.8"
3334
},
3435
"devDependencies": {
3536
"@types/node": "^20.11.10",

‎src/customScroll.tsx

Lines changed: 97 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,96 @@ import {
77
WheelEvent,
88
PropsWithChildren,
99
} from "react";
10-
import "./customScroll.css";
11-
10+
import styled from "styled-components";
1211
import { ensureWithinLimits, simpleDebounce } from "./utils.ts";
1312

13+
const CustomScrollbar = styled.div`
14+
position: absolute;
15+
height: 100%;
16+
width: 6px;
17+
right: 3px;
18+
opacity: 0;
19+
z-index: 1;
20+
transition: opacity 0.4s ease-out;
21+
padding: 6px 0;
22+
box-sizing: border-box;
23+
will-change: opacity;
24+
pointer-events: none;
25+
26+
&.rcs-custom-scrollbar-rtl {
27+
right: auto;
28+
left: 3px;
29+
}
30+
`;
31+
32+
const ScrollHandle = styled.div`
33+
height: calc(100% - 12px);
34+
margin-top: 6px;
35+
background-color: rgba(78, 183, 245, 0.7);
36+
border-radius: 3px;
37+
`;
38+
39+
const CustomScrollRoot = styled.div`
40+
min-height: 0;
41+
min-width: 0;
42+
43+
& .rcs-outer-container {
44+
overflow: hidden;
45+
46+
& .rcs-positioning {
47+
position: relative;
48+
}
49+
50+
&:hover ${CustomScrollbar} {
51+
opacity: 1;
52+
transition-duration: 0.2s;
53+
}
54+
}
55+
56+
& .rcs-inner-container {
57+
overflow-x: hidden;
58+
overflow-y: scroll;
59+
-webkit-overflow-scrolling: touch;
60+
61+
&:after {
62+
content: "";
63+
position: absolute;
64+
top: 0;
65+
right: 0;
66+
left: 0;
67+
height: 0;
68+
background-image: linear-gradient(
69+
to bottom,
70+
rgba(0, 0, 0, 0.2) 0%,
71+
rgba(0, 0, 0, 0.05) 60%,
72+
rgba(0, 0, 0, 0) 100%
73+
);
74+
pointer-events: none;
75+
transition: height 0.1s ease-in;
76+
will-change: height;
77+
}
78+
79+
&.rcs-content-scrolled:after {
80+
height: 5px;
81+
transition: height 0.15s ease-out;
82+
}
83+
}
84+
85+
&.rcs-scroll-handle-dragged .rcs-inner-container {
86+
user-select: none;
87+
}
88+
89+
&.rcs-scroll-handle-dragged ${CustomScrollbar} {
90+
opacity: 1;
91+
}
92+
93+
& .rcs-custom-scroll-handle {
94+
position: absolute;
95+
width: 100%;
96+
top: 0;
97+
}
98+
`;
99+
14100
interface ElementLayout {
15101
top: number;
16102
right: number;
@@ -449,7 +535,11 @@ export class CustomScroll extends Component<
449535
].join(" ");
450536

451537
return (
452-
<div className={className} style={rootStyle} ref={this.customScrollRef}>
538+
<CustomScrollRoot
539+
className={className}
540+
style={rootStyle}
541+
ref={this.customScrollRef}
542+
>
453543
<div
454544
className="rcs-outer-container"
455545
style={this.getOuterContainerStyle()}
@@ -459,7 +549,7 @@ export class CustomScroll extends Component<
459549
>
460550
{this.hasScroll ? (
461551
<div className="rcs-positioning">
462-
<div
552+
<CustomScrollbar
463553
ref={this.customScrollbarRef}
464554
className={`rcs-custom-scrollbar ${this.props.rtl ? "rcs-custom-scrollbar-rtl" : ""}`}
465555
key="scrollbar"
@@ -469,11 +559,9 @@ export class CustomScroll extends Component<
469559
className="rcs-custom-scroll-handle"
470560
style={scrollHandleStyle}
471561
>
472-
<div
473-
className={this.props.handleClass || "rcs-inner-handle"}
474-
/>
562+
<ScrollHandle className={this.props.handleClass || ""} />
475563
</div>
476-
</div>
564+
</CustomScrollbar>
477565
</div>
478566
) : null}
479567
<div
@@ -490,7 +578,7 @@ export class CustomScroll extends Component<
490578
</div>
491579
</div>
492580
</div>
493-
</div>
581+
</CustomScrollRoot>
494582
);
495583
}
496584
}

‎src/example/demoComp.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@
5858
width: 45px;
5959
}
6060

61-
.crazy-scroll .rcs-inner-handle {
61+
.crazy-scroll .scroll-handle-override {
6262
background-color: inherit;
6363
background-image: url("http://rommguy.github.io/react-custom-scroll/example/giraffe-icon.png");
6464
background-repeat: no-repeat no-repeat;

‎src/example/demoComp.tsx

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ export const DemoComp = ({ demoType }: DemoCompProps) => {
4343
<div className="panel-header">
4444
<label className="panel-title">Cool Scrollbar!</label>
4545
</div>
46-
<CustomScroll allowOuterScroll={true}>
46+
<CustomScroll allowOuterScroll={false}>
4747
<div className="panel-content-custom panel-content">
4848
<div className="content-fill">{demoText.text}</div>
4949
</div>
@@ -59,7 +59,10 @@ export const DemoComp = ({ demoType }: DemoCompProps) => {
5959
<div className="panel-header">
6060
<label className="panel-title">Who designed this???</label>
6161
</div>
62-
<CustomScroll allowOuterScroll={true}>
62+
<CustomScroll
63+
allowOuterScroll={true}
64+
handleClass="scroll-handle-override"
65+
>
6366
<div className="panel-content-custom panel-content">
6467
<div className="content-fill">{demoText.text}</div>
6568
</div>

‎src/utils.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
export const simpleDebounce = (func: () => void, delay: number) => {
2-
let timer: number;
2+
let timer: ReturnType<typeof setTimeout>;
33

44
function cancel() {
55
clearTimeout(timer);

‎yarn.lock

Lines changed: 87 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,23 @@
1717
resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.23.9.tgz#7b903b6149b0f8fa7ad564af646c4c38a77fc44b"
1818
integrity sha512-9tcKgqKbs3xGJ+NtKF2ndOBBLVwPjl1SHxPQkd36r3Dlirw3xWUeGaTbqr7uGZcTaxkVNwc+03SVP7aCdWrTlA==
1919

20+
"@emotion/is-prop-valid@1.2.1":
21+
version "1.2.1"
22+
resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-1.2.1.tgz#23116cf1ed18bfeac910ec6436561ecb1a3885cc"
23+
integrity sha512-61Mf7Ufx4aDxx1xlDeOm8aFFigGHE4z+0sKCa+IHCeZKiyP9RLD0Mmx7m8b9/Cf37f7NAvQOOJAbQQGVr5uERw==
24+
dependencies:
25+
"@emotion/memoize" "^0.8.1"
26+
27+
"@emotion/memoize@^0.8.1":
28+
version "0.8.1"
29+
resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.8.1.tgz#c1ddb040429c6d21d38cc945fe75c818cfb68e17"
30+
integrity sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==
31+
32+
"@emotion/unitless@0.8.0":
33+
version "0.8.0"
34+
resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.8.0.tgz#a4a36e9cbdc6903737cd20d38033241e1b8833db"
35+
integrity sha512-VINS5vEYAscRl2ZUDiT3uMPlrFQupiKgHz5AA4bCH1miKBg4qtwkim1qPmJj/4WG6TreYMY111rEFsjupcOKHw==
36+
2037
"@esbuild/aix-ppc64@0.19.12":
2138
version "0.19.12"
2239
resolved "https://registry.yarnpkg.com/@esbuild/aix-ppc64/-/aix-ppc64-0.19.12.tgz#d1bc06aedb6936b3b6d313bf809a5a40387d2b7f"
@@ -537,6 +554,11 @@
537554
resolved "https://registry.yarnpkg.com/@types/semver/-/semver-7.5.6.tgz#c65b2bfce1bec346582c07724e3f8c1017a20339"
538555
integrity sha512-dn1l8LaMea/IjDoHNd9J52uBbInB796CDffS6VdIxvqYCPSG0V0DzHp76GpaWnlhg88uYyPbXCDIowa86ybd5A==
539556

557+
"@types/stylis@4.2.0":
558+
version "4.2.0"
559+
resolved "https://registry.yarnpkg.com/@types/stylis/-/stylis-4.2.0.tgz#199a3f473f0c3a6f6e4e1b17cdbc967f274bdc6b"
560+
integrity sha512-n4sx2bqL0mW1tvDf/loQ+aMX7GQD3lc3fkCMC55VFNDu/vBOabO+LTIeXKM14xK0ppk5TUGcWRjiSpIlUpghKw==
561+
540562
"@typescript-eslint/eslint-plugin@^6.14.0":
541563
version "6.20.0"
542564
resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-6.20.0.tgz#9cf31546d2d5e884602626d89b0e0d2168ac25ed"
@@ -837,6 +859,11 @@ camelcase-css@^2.0.1:
837859
resolved "https://registry.yarnpkg.com/camelcase-css/-/camelcase-css-2.0.1.tgz#ee978f6947914cc30c6b44741b6ed1df7f043fd5"
838860
integrity sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==
839861

862+
camelize@^1.0.0:
863+
version "1.0.1"
864+
resolved "https://registry.yarnpkg.com/camelize/-/camelize-1.0.1.tgz#89b7e16884056331a35d6b5ad064332c91daa6c3"
865+
integrity sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==
866+
840867
caniuse-lite@^1.0.30001578, caniuse-lite@^1.0.30001580:
841868
version "1.0.30001581"
842869
resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001581.tgz#0dfd4db9e94edbdca67d57348ebc070dece279f4"
@@ -911,11 +938,30 @@ cross-spawn@^7.0.0, cross-spawn@^7.0.2:
911938
shebang-command "^2.0.0"
912939
which "^2.0.1"
913940

941+
css-color-keywords@^1.0.0:
942+
version "1.0.0"
943+
resolved "https://registry.yarnpkg.com/css-color-keywords/-/css-color-keywords-1.0.0.tgz#fea2616dc676b2962686b3af8dbdbe180b244e05"
944+
integrity sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==
945+
946+
css-to-react-native@3.2.0:
947+
version "3.2.0"
948+
resolved "https://registry.yarnpkg.com/css-to-react-native/-/css-to-react-native-3.2.0.tgz#cdd8099f71024e149e4f6fe17a7d46ecd55f1e32"
949+
integrity sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==
950+
dependencies:
951+
camelize "^1.0.0"
952+
css-color-keywords "^1.0.0"
953+
postcss-value-parser "^4.0.2"
954+
914955
cssesc@^3.0.0:
915956
version "3.0.0"
916957
resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee"
917958
integrity sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==
918959

960+
csstype@3.1.2:
961+
version "3.1.2"
962+
resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.2.tgz#1d4bf9d572f11c14031f0436e1c10bc1f571f50b"
963+
integrity sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==
964+
919965
csstype@^3.0.2:
920966
version "3.1.3"
921967
resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.3.tgz#d80ff294d114fb0e6ac500fbf85b60137d7eff81"
@@ -1587,7 +1633,7 @@ mz@^2.7.0:
15871633
object-assign "^4.0.1"
15881634
thenify-all "^1.0.0"
15891635

1590-
nanoid@^3.3.7:
1636+
nanoid@^3.3.6, nanoid@^3.3.7:
15911637
version "3.3.7"
15921638
resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.7.tgz#d0c301a691bc8d54efa0a2226ccf3fe2fd656bd8"
15931639
integrity sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==
@@ -1759,11 +1805,20 @@ postcss-selector-parser@^6.0.11:
17591805
cssesc "^3.0.0"
17601806
util-deprecate "^1.0.2"
17611807

1762-
postcss-value-parser@^4.0.0, postcss-value-parser@^4.2.0:
1808+
postcss-value-parser@^4.0.0, postcss-value-parser@^4.0.2, postcss-value-parser@^4.2.0:
17631809
version "4.2.0"
17641810
resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514"
17651811
integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
17661812

1813+
postcss@8.4.31:
1814+
version "8.4.31"
1815+
resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.31.tgz#92b451050a9f914da6755af352bdc0192508656d"
1816+
integrity sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==
1817+
dependencies:
1818+
nanoid "^3.3.6"
1819+
picocolors "^1.0.0"
1820+
source-map-js "^1.0.2"
1821+
17671822
postcss@^8.4.23, postcss@^8.4.32, postcss@^8.4.33:
17681823
version "8.4.33"
17691824
resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.33.tgz#1378e859c9f69bf6f638b990a0212f43e2aaa742"
@@ -1899,6 +1954,11 @@ semver@^7.5.4, semver@~7.5.4:
18991954
dependencies:
19001955
lru-cache "^6.0.0"
19011956

1957+
shallowequal@1.1.0:
1958+
version "1.1.0"
1959+
resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-1.1.0.tgz#188d521de95b9087404fd4dcb68b13df0ae4e7f8"
1960+
integrity sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==
1961+
19021962
shebang-command@^2.0.0:
19031963
version "2.0.0"
19041964
resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-2.0.0.tgz#ccd0af4f8835fbdc265b82461aaf0c36663f34ea"
@@ -1979,6 +2039,26 @@ strip-json-comments@^3.1.1, strip-json-comments@~3.1.1:
19792039
resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.1.tgz#31f1281b3832630434831c310c01cccda8cbe006"
19802040
integrity sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==
19812041

2042+
styled-components@^6.1.8:
2043+
version "6.1.8"
2044+
resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-6.1.8.tgz#c109d36aeea52d8f049e12de2f3be39a6fc86201"
2045+
integrity sha512-PQ6Dn+QxlWyEGCKDS71NGsXoVLKfE1c3vApkvDYS5KAK+V8fNWGhbSUEo9Gg2iaID2tjLXegEW3bZDUGpofRWw==
2046+
dependencies:
2047+
"@emotion/is-prop-valid" "1.2.1"
2048+
"@emotion/unitless" "0.8.0"
2049+
"@types/stylis" "4.2.0"
2050+
css-to-react-native "3.2.0"
2051+
csstype "3.1.2"
2052+
postcss "8.4.31"
2053+
shallowequal "1.1.0"
2054+
stylis "4.3.1"
2055+
tslib "2.5.0"
2056+
2057+
stylis@4.3.1:
2058+
version "4.3.1"
2059+
resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.3.1.tgz#ed8a9ebf9f76fe1e12d462f5cc3c4c980b23a7eb"
2060+
integrity sha512-EQepAV+wMsIaGVGX1RECzgrcqRRU/0sYOHkeLsZ3fzHaHXZy4DaOOX0vOlGQdlsjkh3mFHAIlVimpwAs4dslyQ==
2061+
19822062
sucrase@^3.32.0:
19832063
version "3.35.0"
19842064
resolved "https://registry.yarnpkg.com/sucrase/-/sucrase-3.35.0.tgz#57f17a3d7e19b36d8995f06679d121be914ae263"
@@ -2068,6 +2148,11 @@ ts-interface-checker@^0.1.9:
20682148
resolved "https://registry.yarnpkg.com/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz#784fd3d679722bc103b1b4b8030bcddb5db2a699"
20692149
integrity sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==
20702150

2151+
tslib@2.5.0:
2152+
version "2.5.0"
2153+
resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.5.0.tgz#42bfed86f5787aeb41d031866c8f402429e0fddf"
2154+
integrity sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg==
2155+
20712156
type-check@^0.4.0, type-check@~0.4.0:
20722157
version "0.4.0"
20732158
resolved "https://registry.yarnpkg.com/type-check/-/type-check-0.4.0.tgz#07b8203bfa7056c0657050e3ccd2c37730bab8f1"

0 commit comments

Comments
 (0)