Skip to content

Commit a99a677

Browse files
Blackheart340Blackheart340
committed
chore: impore exmaple
1 parent e31215f commit a99a677

File tree

4 files changed

+126
-74
lines changed

4 files changed

+126
-74
lines changed

‎examples/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
},
77
"dependencies": {
88
"immutable": "^3.8.1",
9+
"prop-types": "^15.6.0",
910
"react": "^15.3.2",
1011
"react-dom": "^15.3.2",
1112
"react-redux": "^4.4.5",

‎examples/src/components/App/App.js‎

Lines changed: 81 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import React, { Component } from 'react';
2+
import PropTypes from 'prop-types';
23
import './App.css';
34

45
import { Link, RouterProvider, Fragment } from '../../../../dist';
@@ -7,6 +8,7 @@ import { LINK_MATCH_PARTIAL, LINK_MATCH_EXACT } from '../../../../dist/constants
78
import routes from '../../routes';
89

910
import Lorem from '../Lorem';
11+
import CurrentRoute from '../CurrentRoute';
1012

1113
const Main = ({children}) => {
1214
return (
@@ -17,6 +19,10 @@ const Main = ({children}) => {
1719
);
1820
};
1921

22+
Main.propTypes = {
23+
children: PropTypes.any
24+
};
25+
2026
const onClickCallback = () => {
2127
console.log('OnClick'); // eslint-disable-line no-console
2228
};
@@ -31,86 +37,87 @@ const delayedOnClickCallback = e => {
3137

3238
class App extends Component {
3339

34-
constructor(props) {
35-
super(props);
40+
constructor(props) {
41+
super(props);
3642

37-
this.handleDelayedRedirect = this.handleDelayedRedirect.bind(this);
43+
this.handleDelayedRedirect = this.handleDelayedRedirect.bind(this);
3844

39-
this.state = {
40-
redirect: null
41-
};
42-
}
45+
this.state = {
46+
redirect: null
47+
};
48+
}
4349

44-
handleDelayedRedirect() {
45-
setTimeout(() => {
46-
this.setState({
47-
redirect: { id: 'DelayedRedirected' }
48-
});
49-
}, 2000);
50-
}
50+
handleDelayedRedirect() {
51+
setTimeout(() => {
52+
this.setState({
53+
redirect: { id: 'DelayedRedirected' }
54+
});
55+
}, 2000);
56+
}
5157

52-
render() {
53-
return (
54-
<RouterProvider routes={routes} slice="router" immutable>
55-
<div className="App container">
56-
<div className="app__navigation">
57-
<Link to="/main" activeMatch={LINK_MATCH_EXACT}>Main</Link>
58-
<Link to="/main/splat" activeMatch={LINK_MATCH_EXACT}>Default</Link>
59-
<Link to="/main/another_splat" activeMatch={/^\/main\/another/}>Another default</Link>
60-
<Link to={{ pathname: '/main/user', query: { userId: 1, edit: false }, hash: 'title' }} activeMatch={LINK_MATCH_EXACT}>User</Link>
61-
<Link to="/main/user?edit=true&userId=2#title" activeMatch={LINK_MATCH_EXACT}>User 2</Link>
62-
<Link to="/scroll-to-hash#h2" activeMatch={LINK_MATCH_EXACT}>Scroll to hash</Link>
63-
<Link to={{ id: 'Settings' }} activeMatch={LINK_MATCH_EXACT}>Settings</Link>
64-
<Link to={{ id: 'Preferences', params: { action: 'edit' }, query: { edit: true, sections: ['main','side'] }, hash: 'title' }} activeMatch={LINK_MATCH_EXACT}>Preferences</Link>
65-
<Link to="/redirect" activeMatch={LINK_MATCH_PARTIAL}>Redirect</Link>
66-
<Link to="/delredirect" activeMatch={LINK_MATCH_PARTIAL} onClick={this.handleDelayedRedirect}>Delayed redirect</Link>
67-
<Link to="/on-click" activeMatch={LINK_MATCH_EXACT} onClick={onClickCallback}>onClick</Link>
68-
<Link to="/on-click-promise" activeMatch={LINK_MATCH_EXACT} onClick={delayedOnClickCallback}>onClick Promise</Link>
69-
<Link to="https://ya.ru" target="_blank">External</Link>
70-
</div>
58+
render() {
59+
return (
60+
<RouterProvider routes={routes} slice="router" immutable>
61+
<div className="App container">
62+
<div className="app__navigation">
63+
<Link to="/main" activeMatch={LINK_MATCH_EXACT}>Main</Link>
64+
<Link to="/main/splat" activeMatch={LINK_MATCH_EXACT}>Default</Link>
65+
<Link to="/main/another_splat" activeMatch={/^\/main\/another/}>Another default</Link>
66+
<Link to={{ pathname: '/main/user', query: { userId: 1, edit: false }, hash: 'title' }} activeMatch={LINK_MATCH_EXACT}>User</Link>
67+
<Link to="/main/user?edit=true&userId=2#title" activeMatch={LINK_MATCH_EXACT}>User 2</Link>
68+
<Link to="/scroll-to-hash#h2" activeMatch={LINK_MATCH_EXACT}>Scroll to hash</Link>
69+
<Link to={{ id: 'Settings' }} activeMatch={LINK_MATCH_EXACT}>Settings</Link>
70+
<Link to={{ id: 'Preferences', params: { action: 'edit' }, query: { edit: true, sections: ['main','side'] }, hash: 'title' }} activeMatch={LINK_MATCH_EXACT}>Preferences</Link>
71+
<Link to="/redirect" activeMatch={LINK_MATCH_PARTIAL}>Redirect</Link>
72+
<Link to="/delredirect" activeMatch={LINK_MATCH_PARTIAL} onClick={this.handleDelayedRedirect}>Delayed redirect</Link>
73+
<Link to="/on-click" activeMatch={LINK_MATCH_EXACT} onClick={onClickCallback}>onClick</Link>
74+
<Link to="/on-click-promise" activeMatch={LINK_MATCH_EXACT} onClick={delayedOnClickCallback}>onClick Promise</Link>
75+
<Link to="https://ya.ru" target="_blank">External</Link>
76+
</div>
7177

72-
<div className="app__content">
73-
<Fragment id="Main" component={Main}>
74-
<Fragment id="User">
75-
User content
76-
<Fragment id="UserEdit">
77-
Edit form
78+
<div className="app__content">
79+
<CurrentRoute />
80+
<Fragment id="Main" component={Main}>
81+
<Fragment id="User">
82+
User content
83+
<Fragment id="UserEdit">
84+
Edit form
85+
</Fragment>
86+
</Fragment>
87+
<Fragment id="default">
88+
Default
89+
</Fragment>
7890
</Fragment>
79-
</Fragment>
80-
<Fragment id="default">
81-
Default
82-
</Fragment>
83-
</Fragment>
84-
<Fragment id="ScrollToHash" component={Lorem} />
85-
<Fragment id="Settings">
86-
<h2>Settings</h2>
87-
</Fragment>
88-
<Fragment id="Preferences">
89-
<h2>Preferences</h2>
90-
</Fragment>
91-
<Fragment id="OnClick">
92-
<h2>OnClick</h2>
93-
</Fragment>
94-
<Fragment id="OnClickPromise">
95-
<h2>OnClick Promise</h2>
96-
</Fragment>
97-
<Fragment id="Redirect" redirect={{ id: 'Redirected' }}>
98-
<Fragment id="Redirected">
99-
<h2>Redirected</h2>
100-
You have been redirected here
101-
</Fragment>
102-
</Fragment>
103-
<Fragment id="DelayedRedirect" redirect={this.state.redirect}>
104-
<Fragment id="DelayedRedirected">
105-
<h2>Delayed Redirected</h2>
106-
You have been redirected here
107-
</Fragment>
108-
</Fragment>
109-
</div>
110-
</div>
111-
</RouterProvider>
112-
);
113-
}
91+
<Fragment id="ScrollToHash" component={Lorem} />
92+
<Fragment id="Settings">
93+
<h2>Settings</h2>
94+
</Fragment>
95+
<Fragment id="Preferences">
96+
<h2>Preferences</h2>
97+
</Fragment>
98+
<Fragment id="OnClick">
99+
<h2>OnClick</h2>
100+
</Fragment>
101+
<Fragment id="OnClickPromise">
102+
<h2>OnClick Promise</h2>
103+
</Fragment>
104+
<Fragment id="Redirect" redirect={{ id: 'Redirected' }}>
105+
<Fragment id="Redirected">
106+
<h2>Redirected</h2>
107+
You have been redirected here
108+
</Fragment>
109+
</Fragment>
110+
<Fragment id="DelayedRedirect" redirect={this.state.redirect}>
111+
<Fragment id="DelayedRedirected">
112+
<h2>Delayed Redirected</h2>
113+
You have been redirected here
114+
</Fragment>
115+
</Fragment>
116+
</div>
117+
</div>
118+
</RouterProvider>
119+
);
120+
}
114121
}
115122

116123
export default App;

‎examples/src/components/CurrentRoute/CurrentRoute.css‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
.current-route
2+
{
3+
margin: 0 0 12px;
4+
}
5+
6+
.current-route__info
7+
{
8+
font-size: 18px;
9+
}
10+
11+
.current-route__item
12+
{
13+
margin: 6px 0;
14+
}

‎examples/src/components/CurrentRoute/index.js‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import React from 'react';
2+
import PropTypes from 'prop-types';
3+
import { connect } from 'react-redux';
4+
5+
import './CurrentRoute.css';
6+
7+
const CurrentRoute = ({ path, routeId, matcher }) => (
8+
<div className={'current-route'}>
9+
<div className={'current-route__info'}>Info</div>
10+
<div className={'current-route__item'}>Path: {path}</div>
11+
<div className={'current-route__item'}>Id: {routeId}</div>
12+
<div className={'current-route__item'}> Matcher: {JSON.stringify(matcher)}</div>
13+
</div>
14+
);
15+
16+
CurrentRoute.propTypes = {
17+
path: PropTypes.string,
18+
routeId: PropTypes.string,
19+
matcher: PropTypes.string
20+
};
21+
22+
function mapStateToProps(state) {
23+
return {
24+
path: state.getIn([ 'router', 'path' ], ''),
25+
routeId: state.getIn([ 'router', 'route', 'idPath' ], ''),
26+
matcher: state.getIn([ 'router', 'route', 'pattern' ])
27+
};
28+
}
29+
30+
export default connect(mapStateToProps)(CurrentRoute);

0 commit comments

Comments
 (0)