Leahnaya/chaoticbackup.github.io
1
0
Fork 0
mirror of https://github.com/chaoticbackup/chaoticbackup.github.io.git synced 2026-04-20 15:47:25 -05:00
Code Issues Actions Packages Projects Releases Wiki Activity

removed example folder

Browse Source
This commit is contained in:
Daniel 2019-07-10 16:33:18 -04:00
parent 48a4777f10
commit 900af57d3b
4 changed files with 0 additions and 185 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
src/components/example/Base.js
View File

@ -1,52 +0,0 @@
import React from 'react';
import PropTypes from 'prop-types';
import Interactive from 'react-interactive';
import { Link } from 'react-router-dom';
import s from '../../styles/app.style';
const propTypes = {
children: PropTypes.element.isRequired,
routes: PropTypes.array.isRequired,
};
function ExampleBase({ children, routes }) {
function generateMapMenu() {
let path = '';
function nextPath(route) {
path += (
(path.slice(-1) === '/' ? '' : '/') +
(route.path === '/' ? '' : route.path)
);
return path;
}
return (
routes.filter(route => route.mapMenuTitle)
.map((route, index, array) => (
<span key={index}>
<Interactive
as={Link}
{...s.link}
to={nextPath(route)}
>{route.mapMenuTitle}</Interactive>
{(index + 1) < array.length && ' / '}
</span>
))
);
}
return (
<div className="example">
<nav style={s.mapMenu}>
{generateMapMenu()}
</nav>
{children}
</div>
);
}
ExampleBase.propTypes = propTypes;
export default ExampleBase;

34
src/components/example/ExampleComponent.js
View File

@ -1,34 +0,0 @@
import React from 'react';
import PropTypes from 'prop-types';
import Interactive from 'react-interactive';
import { Link } from 'react-router-dom';
import s from '../../styles/exampleComponent.style';
const propTypes = {
children: PropTypes.element,
};
function ExampleComponent({ children }) {
return (
<div>
<p style={s.p}>
This is an example page. Refresh the page or copy/paste the url to
test out the redirect functionality (this same page should load
after the redirect).
</p>
{children ||
<div style={s.pageLinkContainer}>
<Interactive
as={Link}
{...s.link}
to="/example/two-deep?field1=foo&field2=bar#boom!"
>Example two deep with query and hash</Interactive>
</div>
}
</div>
);
}
ExampleComponent.propTypes = propTypes;
export default ExampleComponent;

72
src/components/example/ExampleTwoDeepComponent.js
View File

@ -1,72 +0,0 @@
import React from 'react';
import PropTypes from 'prop-types';
import Interactive from 'react-interactive';
import { Link } from 'react-router-dom';
import s from '../../styles/exampleTwoDeepComponent.style';
const propTypes = {
location: PropTypes.object.isRequired,
};
function ExampleTwoDeepComponent({ location }) {
const queryPresent = Object.keys(location.query).length !== 0;
const hashPresent = location.hash !== '';
function queryStringTitle() {
if (queryPresent) return 'The query string field-value pairs are:';
return 'No query string in the url';
}
function hashFragmentTitle() {
if (hashPresent) return 'The hash fragment is:';
return 'No hash fragment in the url';
}
function linkToShowQueryAndOrHash() {
if (queryPresent && hashPresent) return null;
const queryString = (queryPresent ? location.search : '?field1=foo&field2=bar');
const hashFragment = (hashPresent ? location.hash : '#boom!');
let linkText = '';
if (queryPresent && !hashPresent) linkText = 'Show with hash fragment';
if (!queryPresent && hashPresent) linkText = 'Show with query string';
if (!queryPresent && !hashPresent) linkText = 'Show with query string and hash fragment';
return (
<div style={s.lineContainer}>
<Interactive
as={Link}
to={`/example/two-deep${queryString}${hashFragment}`}
{...s.link}
>{linkText}</Interactive>
</div>
);
}
return (
<div>
<div style={s.lineContainer}>
<div>{queryStringTitle()}</div>
<ul>
{
Object.keys(location.query).map((field, index) => (
s.li(`${field}: ${location.query[field]}`, { key: index })
))
}
</ul>
</div>
<div style={s.lineContainer}>
<div>{hashFragmentTitle()}</div>
<ul>
{hashPresent ? s.li(location.hash.slice(1)) : undefined}
</ul>
</div>
{linkToShowQueryAndOrHash()}
</div>
);
}
ExampleTwoDeepComponent.propTypes = propTypes;
export default ExampleTwoDeepComponent;

27
src/components/example/Home.js
View File

@ -1,27 +0,0 @@
import React from 'react';
import Interactive from 'react-interactive';
import { Link } from 'react-router-dom';
import s from '../../styles/home.style';
function ExampleHome() {
return (
<div>
<div style={s.pageLinkContainer}>
<Interactive
as={Link}
{...s.link}
to="/example"
>Example page</Interactive>
</div>
<div style={s.pageLinkContainer}>
<Interactive
as={Link}
{...s.link}
to="/example/two-deep?field1=foo&field2=bar#boom!"
>Example two deep with query and hash</Interactive>
</div>
</div>
);
}
export default ExampleHome;