This commit is contained in:
Rene
2019-10-11 11:27:52 +02:00
parent d1fc8fe638
commit 4b1d3201e6
35 changed files with 2566 additions and 1894 deletions
+39 -15
View File
@@ -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">