mirror of
https://github.com/tenrok/OverlayScrollbars.git
synced 2026-06-10 08:22:27 +03:00
v1.10.0
This commit is contained in:
+39
-15
@@ -2827,7 +2827,8 @@
|
||||
},
|
||||
"ansi-regex": {
|
||||
"version": "2.1.1",
|
||||
"bundled": true
|
||||
"bundled": true,
|
||||
"optional": true
|
||||
},
|
||||
"aproba": {
|
||||
"version": "1.2.0",
|
||||
@@ -3192,7 +3193,8 @@
|
||||
},
|
||||
"safe-buffer": {
|
||||
"version": "5.1.2",
|
||||
"bundled": true
|
||||
"bundled": true,
|
||||
"optional": true
|
||||
},
|
||||
"safer-buffer": {
|
||||
"version": "2.1.2",
|
||||
@@ -3240,6 +3242,7 @@
|
||||
"strip-ansi": {
|
||||
"version": "3.0.1",
|
||||
"bundled": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"ansi-regex": "^2.0.0"
|
||||
}
|
||||
@@ -3278,11 +3281,13 @@
|
||||
},
|
||||
"wrappy": {
|
||||
"version": "1.0.2",
|
||||
"bundled": true
|
||||
"bundled": true,
|
||||
"optional": true
|
||||
},
|
||||
"yallist": {
|
||||
"version": "3.0.3",
|
||||
"bundled": true
|
||||
"bundled": true,
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
@@ -6691,7 +6696,8 @@
|
||||
},
|
||||
"ansi-regex": {
|
||||
"version": "2.1.1",
|
||||
"bundled": true
|
||||
"bundled": true,
|
||||
"optional": true
|
||||
},
|
||||
"aproba": {
|
||||
"version": "1.2.0",
|
||||
@@ -6709,11 +6715,13 @@
|
||||
},
|
||||
"balanced-match": {
|
||||
"version": "1.0.0",
|
||||
"bundled": true
|
||||
"bundled": true,
|
||||
"optional": true
|
||||
},
|
||||
"brace-expansion": {
|
||||
"version": "1.1.11",
|
||||
"bundled": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"balanced-match": "^1.0.0",
|
||||
"concat-map": "0.0.1"
|
||||
@@ -6726,15 +6734,18 @@
|
||||
},
|
||||
"code-point-at": {
|
||||
"version": "1.1.0",
|
||||
"bundled": true
|
||||
"bundled": true,
|
||||
"optional": true
|
||||
},
|
||||
"concat-map": {
|
||||
"version": "0.0.1",
|
||||
"bundled": true
|
||||
"bundled": true,
|
||||
"optional": true
|
||||
},
|
||||
"console-control-strings": {
|
||||
"version": "1.1.0",
|
||||
"bundled": true
|
||||
"bundled": true,
|
||||
"optional": true
|
||||
},
|
||||
"core-util-is": {
|
||||
"version": "1.0.2",
|
||||
@@ -6837,7 +6848,8 @@
|
||||
},
|
||||
"inherits": {
|
||||
"version": "2.0.3",
|
||||
"bundled": true
|
||||
"bundled": true,
|
||||
"optional": true
|
||||
},
|
||||
"ini": {
|
||||
"version": "1.3.5",
|
||||
@@ -6847,6 +6859,7 @@
|
||||
"is-fullwidth-code-point": {
|
||||
"version": "1.0.0",
|
||||
"bundled": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"number-is-nan": "^1.0.0"
|
||||
}
|
||||
@@ -6859,17 +6872,20 @@
|
||||
"minimatch": {
|
||||
"version": "3.0.4",
|
||||
"bundled": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"brace-expansion": "^1.1.7"
|
||||
}
|
||||
},
|
||||
"minimist": {
|
||||
"version": "0.0.8",
|
||||
"bundled": true
|
||||
"bundled": true,
|
||||
"optional": true
|
||||
},
|
||||
"minipass": {
|
||||
"version": "2.3.5",
|
||||
"bundled": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"safe-buffer": "^5.1.2",
|
||||
"yallist": "^3.0.0"
|
||||
@@ -6886,6 +6902,7 @@
|
||||
"mkdirp": {
|
||||
"version": "0.5.1",
|
||||
"bundled": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"minimist": "0.0.8"
|
||||
}
|
||||
@@ -6958,7 +6975,8 @@
|
||||
},
|
||||
"number-is-nan": {
|
||||
"version": "1.0.1",
|
||||
"bundled": true
|
||||
"bundled": true,
|
||||
"optional": true
|
||||
},
|
||||
"object-assign": {
|
||||
"version": "4.1.1",
|
||||
@@ -6968,6 +6986,7 @@
|
||||
"once": {
|
||||
"version": "1.4.0",
|
||||
"bundled": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"wrappy": "1"
|
||||
}
|
||||
@@ -7043,7 +7062,8 @@
|
||||
},
|
||||
"safe-buffer": {
|
||||
"version": "5.1.2",
|
||||
"bundled": true
|
||||
"bundled": true,
|
||||
"optional": true
|
||||
},
|
||||
"safer-buffer": {
|
||||
"version": "2.1.2",
|
||||
@@ -7073,6 +7093,7 @@
|
||||
"string-width": {
|
||||
"version": "1.0.2",
|
||||
"bundled": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"code-point-at": "^1.0.0",
|
||||
"is-fullwidth-code-point": "^1.0.0",
|
||||
@@ -7090,6 +7111,7 @@
|
||||
"strip-ansi": {
|
||||
"version": "3.0.1",
|
||||
"bundled": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"ansi-regex": "^2.0.0"
|
||||
}
|
||||
@@ -7128,11 +7150,13 @@
|
||||
},
|
||||
"wrappy": {
|
||||
"version": "1.0.2",
|
||||
"bundled": true
|
||||
"bundled": true,
|
||||
"optional": true
|
||||
},
|
||||
"yallist": {
|
||||
"version": "3.0.3",
|
||||
"bundled": true
|
||||
"bundled": true,
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -4,6 +4,7 @@ import OverlayScrollbars from 'overlayscrollbars';
|
||||
import { OverlayScrollbarsComponent } from 'overlayscrollbars-react';
|
||||
|
||||
export interface AppState {
|
||||
loremList: Array<string>;
|
||||
componentContent: string;
|
||||
osComponentOptions: OverlayScrollbars.Options;
|
||||
}
|
||||
@@ -23,6 +24,7 @@ export default class App extends React.Component<any, AppState> {
|
||||
this.osComponentRef2 = React.createRef<OverlayScrollbarsComponent>();
|
||||
this.state = {
|
||||
componentContent: 'Lorem Ipsum',
|
||||
loremList: [],
|
||||
osComponentOptions: {
|
||||
resize: 'both',
|
||||
paddingAbsolute: true,
|
||||
@@ -69,10 +71,9 @@ export default class App extends React.Component<any, AppState> {
|
||||
}
|
||||
|
||||
onBtnChangeContent() {
|
||||
let loremIpsums = [this.loremIpsumLong, this.loremIpsumMedium, this.loremIpsumShort];
|
||||
let random = Math.floor(Math.random() * loremIpsums.length);
|
||||
this.setState({
|
||||
componentContent: this.state.componentContent + '\r\n' + loremIpsums[random]
|
||||
componentContent: this.state.componentContent + '\r\n' + this.randomIpsum(),
|
||||
loremList: [...this.state.loremList, this.randomIpsum()]
|
||||
});
|
||||
}
|
||||
|
||||
@@ -90,6 +91,11 @@ export default class App extends React.Component<any, AppState> {
|
||||
console.log(this.osComponentRef2.current!.osTarget());
|
||||
}
|
||||
|
||||
randomIpsum(): string {
|
||||
let loremIpsums = [this.loremIpsumLong, this.loremIpsumMedium, this.loremIpsumShort];
|
||||
return loremIpsums[Math.floor(Math.random() * loremIpsums.length)];
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className="App">
|
||||
@@ -133,7 +139,7 @@ export default class App extends React.Component<any, AppState> {
|
||||
<OverlayScrollbarsComponent ref={this.osComponentRef1}
|
||||
options={this.state.osComponentOptions}
|
||||
style={{ maxHeight: '350px' }}
|
||||
className={`custom-class-name-test ${this.framework}`}
|
||||
className={`${this.framework} custom-class-name-test`}
|
||||
>
|
||||
<div className="bonus-content">
|
||||
{this.state.componentContent}
|
||||
@@ -159,6 +165,11 @@ export default class App extends React.Component<any, AppState> {
|
||||
<br />
|
||||
<br />
|
||||
{this.loremIpsumLong}
|
||||
{
|
||||
this.state.loremList.map((item, index) => {
|
||||
return <div key={index} data-key={index}><br />{item}</div>;
|
||||
})
|
||||
}
|
||||
</OverlayScrollbarsComponent>
|
||||
|
||||
<div className="buttons">
|
||||
|
||||
Reference in New Issue
Block a user