Skip to content

Commit ca408d4

Browse files
xobotyixobotyi
committed
Added command to add formatter changes to performed commit;
1 parent 9c4bc35 commit ca408d4

26 files changed

+1655
-1370
lines changed

‎examples/app/app.js‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,6 @@
1-
import React from 'react';
2-
import { render } from 'react-dom';
1+
import React from "react";
2+
import {render} from "react-dom";
33

44
import App from "./components/App";
55

6-
render(
7-
<App />,
8-
document.getElementById('AppRoot'),
9-
);
6+
render(<App />, document.getElementById("AppRoot"));

‎examples/app/components/App.js‎

Lines changed: 19 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,29 @@
1-
import React from "react";
1+
import React from "react";
22
import Scrollbar from "react-scrollbars-custom";
3-
import Body from "./Body";
4-
import Footer from "./Footer";
5-
import Head from "./Head";
6-
import Mayhem from "./Mayhem";
3+
import Body from "./Body";
4+
import Footer from "./Footer";
5+
import Head from "./Head";
6+
import Mayhem from "./Mayhem";
77

88
const authorName = "Anton Zinovyev";
99
const authorLink = "https://github.com/xobotyi";
1010
const packageLink = "https://github.com/xobotyi/react-scrollbars-custom";
1111
const packageName = "react-scrollbars-custom";
1212

13-
export default class App extends React.Component
14-
{
13+
export default class App extends React.Component {
1514
render() {
16-
return <Scrollbar defaultStyles={ false } contentClassName="AppContent">
17-
<Head packageName={ packageName } packageLink={ packageLink } />
18-
{ window.location.hash !== '#benchmark' && <Body packageName={ packageName } packageLink={ packageLink } /> }
19-
{ window.location.hash === '#benchmark' && <Mayhem /> }
20-
<Footer authorName={ authorName } authorLink={ authorLink } packageName={ packageName } packageLink={ packageLink } />
21-
</Scrollbar>;
15+
return (
16+
<Scrollbar defaultStyles={false} contentClassName="AppContent">
17+
<Head packageName={packageName} packageLink={packageLink} />
18+
{window.location.hash !== "#benchmark" && <Body packageName={packageName} packageLink={packageLink} />}
19+
{window.location.hash === "#benchmark" && <Mayhem />}
20+
<Footer
21+
authorName={authorName}
22+
authorLink={authorLink}
23+
packageName={packageName}
24+
packageLink={packageLink}
25+
/>
26+
</Scrollbar>
27+
);
2228
}
2329
}

‎examples/app/components/Body.js‎

Lines changed: 44 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,50 @@
1-
import React from "react";
1+
import React from "react";
22
import AutohideTracksBlock from "./blocks/AutohideTracksBlock";
3-
import CustomStyleBlock from "./blocks/CustomStyleBlock";
4-
import DefaultBlock from "./blocks/DefaultBlock";
5-
import SandboxBlock from "./blocks/SandboxBlock";
3+
import CustomStyleBlock from "./blocks/CustomStyleBlock";
4+
import DefaultBlock from "./blocks/DefaultBlock";
5+
import SandboxBlock from "./blocks/SandboxBlock";
66

7-
export default class Head extends React.Component
8-
{
7+
export default class Head extends React.Component {
98
render() {
10-
return <div id="AppBody">
11-
<div className="packageDescription">
12-
<p>{ this.props.packageName } is crossbrowser React component that allow you to easy customize scrollbars.
13-
No matter what platform you targeted, with { this.props.packageName } scrollbars will look the same.
14-
</p>
15-
<h2>Features</h2>
16-
<ul className="features">
17-
<li>Native browser scrolling behaviour - component don't emulate scrolling, only showing custom scrollbars</li>
18-
<li>Ultimate performance - 60 fps with help of RAF loop</li>
19-
<li>Desktop or mobile - scrollbars looks the same on any device</li>
20-
<li>No extra stylesheets required - minimum inline styles out of the box</li>
21-
<li>Fully customizable - want a hippo as a scrollbar thumb? Well.. I don't judge you</li>
22-
<li>No matter what changes the content - scrollbars always stay actual</li>
23-
<li>Total tests coverage</li>
24-
<li>Scrollbars nesting</li>
25-
<li>RTL support</li>
26-
<li>momentum scrolling for iOS</li>
27-
</ul>
28-
<p><a href="https://github.com/xobotyi/react-scrollbars-custom/tree/master/docs">Docs on GitHub</a> | <a href="./#benchmark" target="_blank">Benchmark</a></p>
29-
</div>
9+
return (
10+
<div id="AppBody">
11+
<div className="packageDescription">
12+
<p>
13+
{this.props.packageName} is crossbrowser React component that allow you to easy customize
14+
scrollbars. No matter what platform you targeted, with {this.props.packageName} scrollbars will
15+
look the same.
16+
</p>
17+
<h2>Features</h2>
18+
<ul className="features">
19+
<li>
20+
Native browser scrolling behaviour - component don't emulate scrolling, only showing custom
21+
scrollbars
22+
</li>
23+
<li>Ultimate performance - 60 fps with help of RAF loop</li>
24+
<li>Desktop or mobile - scrollbars looks the same on any device</li>
25+
<li>No extra stylesheets required - minimum inline styles out of the box</li>
26+
<li>Fully customizable - want a hippo as a scrollbar thumb? Well.. I don't judge you</li>
27+
<li>No matter what changes the content - scrollbars always stay actual</li>
28+
<li>Total tests coverage</li>
29+
<li>Scrollbars nesting</li>
30+
<li>RTL support</li>
31+
<li>momentum scrolling for iOS</li>
32+
</ul>
33+
<p>
34+
<a href="https://github.com/xobotyi/react-scrollbars-custom/tree/master/docs">Docs on GitHub</a>{" "}
35+
|{" "}
36+
<a href="./#benchmark" target="_blank">
37+
Benchmark
38+
</a>
39+
</p>
40+
</div>
3041

31-
<h2>Examples</h2>
32-
<DefaultBlock />
33-
<CustomStyleBlock />
34-
<AutohideTracksBlock />
35-
<SandboxBlock />
36-
</div>;
42+
<h2>Examples</h2>
43+
<DefaultBlock />
44+
<CustomStyleBlock />
45+
<AutohideTracksBlock />
46+
<SandboxBlock />
47+
</div>
48+
);
3749
}
3850
}

‎examples/app/components/Footer.js‎

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,16 @@
11
import React from "react";
22

3-
export default class Footer extends React.Component
4-
{
3+
export default class Footer extends React.Component {
54
render() {
6-
return <div id="AppFooter">
7-
<a href={ this.props.packageLink } className="projectLink">{ this.props.packageName }</a>
8-
<a href={ this.props.authorLink } className="authorLink">{ this.props.authorName }</a>
9-
</div>;
5+
return (
6+
<div id="AppFooter">
7+
<a href={this.props.packageLink} className="projectLink">
8+
{this.props.packageName}
9+
</a>
10+
<a href={this.props.authorLink} className="authorLink">
11+
{this.props.authorName}
12+
</a>
13+
</div>
14+
);
1015
}
1116
}

‎examples/app/components/Head.js‎

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,14 @@
11
import React from "react";
22

3-
export default class Head extends React.Component
4-
{
3+
export default class Head extends React.Component {
54
render() {
6-
return <div id="AppHead">
7-
<h1>{ this.props.packageName }</h1>
8-
<a href={ this.props.packageLink } className="ghLink"><i className="fa fa-github" /></a>
9-
</div>;
5+
return (
6+
<div id="AppHead">
7+
<h1>{this.props.packageName}</h1>
8+
<a href={this.props.packageLink} className="ghLink">
9+
<i className="fa fa-github" />
10+
</a>
11+
</div>
12+
);
1013
}
1114
}

‎examples/app/components/Mayhem.js‎

Lines changed: 37 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
import React from "react";
2-
import Scrollbar from 'react-scrollbars-custom';
1+
import React from "react";
2+
import Scrollbar from "react-scrollbars-custom";
33

4-
const paragraphText = "Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit, amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit, qui in ea voluptate velit esse, quam nihil molestiae consequatur, vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur? At vero eos et accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, obcaecati cupiditate non provident, similique sunt in culpa, qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio, cumque nihil impedit, quo minus id, quod maxime placeat, facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet, ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.";
4+
const paragraphText =
5+
"Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit, amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit, qui in ea voluptate velit esse, quam nihil molestiae consequatur, vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur? At vero eos et accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, obcaecati cupiditate non provident, similique sunt in culpa, qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio, cumque nihil impedit, quo minus id, quod maxime placeat, facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet, ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.";
56

6-
export default class Mayhem extends React.Component
7-
{
7+
export default class Mayhem extends React.Component {
88
constructor(props) {
99
super(props);
1010

@@ -17,33 +17,50 @@ export default class Mayhem extends React.Component
1717
drawScrollbars(count) {
1818
return [...Array(count)].map((v, i) => {
1919
let scrollbar;
20-
return <Scrollbar key={ i } style={ {width: 150, height: 150, margin: "1rem"} } ref={ (ref) => {scrollbar = ref;} }><p style={ {width: "200%"} }>{ paragraphText }</p></Scrollbar>;
20+
return (
21+
<Scrollbar
22+
key={i}
23+
style={{width: 150, height: 150, margin: "1rem"}}
24+
ref={ref => {
25+
scrollbar = ref;
26+
}}>
27+
<p style={{width: "200%"}}>{paragraphText}</p>
28+
</Scrollbar>
29+
);
2130
});
2231
}
2332

2433
incrementScrollbars() {
2534
this.setState({
26-
...this.state,
27-
scrollbarsCount: this.state.scrollbarsCount + 1,
28-
});
29-
};
35+
...this.state,
36+
scrollbarsCount: this.state.scrollbarsCount + 1,
37+
});
38+
}
3039

3140
decrementScrollbars() {
3241
this.setState({
33-
...this.state,
34-
scrollbarsCount: Math.max(this.state.scrollbarsCount - 1, 0),
35-
});
36-
};
42+
...this.state,
43+
scrollbarsCount: Math.max(this.state.scrollbarsCount - 1, 0),
44+
});
45+
}
3746

3847
render() {
3948
const {scrollbarsCount} = this.state;
4049

41-
return <div id="AppBody">
42-
<div className="packageDescription">
43-
Scrollbars rendered: { scrollbarsCount }
44-
<br /><span className="button" key="plus" onClick={ this.incrementScrollbars }>increase</span><span className="button" key="minus" onClick={ this.decrementScrollbars }>decrease</span>
50+
return (
51+
<div id="AppBody">
52+
<div className="packageDescription">
53+
Scrollbars rendered: {scrollbarsCount}
54+
<br />
55+
<span className="button" key="plus" onClick={this.incrementScrollbars}>
56+
increase
57+
</span>
58+
<span className="button" key="minus" onClick={this.decrementScrollbars}>
59+
decrease
60+
</span>
61+
</div>
62+
<div className="mayhemScrollbarsHolder">{this.drawScrollbars(scrollbarsCount)}</div>
4563
</div>
46-
<div className="mayhemScrollbarsHolder">{ this.drawScrollbars(scrollbarsCount) }</div>
47-
</div>;
64+
);
4865
}
4966
}

0 commit comments

Comments
 (0)