Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[CSS-in-JS] Provider for fullscreen examples; Context refactor #5309

Merged
merged 3 commits into from
Oct 26, 2021
Merged

[CSS-in-JS] Provider for fullscreen examples; Context refactor #5309

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
2a853b2
refactor to extract context component
thompsongl Oct 21, 2021
7b31e9d
refactor for fewer updates on route changes
thompsongl Oct 21, 2021
4d67591
refactor AppView to function component
thompsongl Oct 21, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
141 changes: 78 additions & 63 deletions src-docs/src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,12 @@ import React, { createElement } from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { Router, Switch, Route, Redirect } from 'react-router';
import { Helmet } from 'react-helmet';

import configureStore, { history } from './store/configure_store';

import { AppContainer } from './views/app_container';
import { AppContext } from './views/app_context';
import { AppView } from './views/app_view';
import { HomeView } from './views/home/home_view';
import { NotFoundView } from './views/not_found/not_found_view';
import { registerTheme, ExampleContext } from './services';
Expand All @@ -17,7 +19,6 @@ import themeAmsterdamLight from './theme_light.scss';
import themeAmsterdamDark from './theme_dark.scss';
import { ThemeProvider } from './components/with_theme/theme_context';
import ScrollToHash from './components/scroll_to_hash';
import { LinkWrapper } from './views/link_wrapper';
import { LEGACY_NAME_KEY } from '../../src/themes';

registerTheme('light', [themeAmsterdamLight]);
Expand Down Expand Up @@ -48,72 +49,86 @@ const routes = [
ReactDOM.render(
<Provider store={store}>
<ThemeProvider>
<Router history={history}>
<ScrollToHash />
<Switch>
{routes.map(
({ name, path, sections, isNew, component, from, to }) => {
const mainComponent = (
<Route
key={path}
path={`/${path}`}
render={(props) => {
const { location } = props;
// prevents encoded urls with a section id to fail
if (location.pathname.includes('%23')) {
const url = decodeURIComponent(location.pathname);
return <Redirect push to={url} />;
} else {
return (
<LinkWrapper>
<AppContainer
<AppContext>
<Router history={history}>
<ScrollToHash />
<Switch>
{routes.map(
({ name, path, sections, isNew, component, from, to }) => {
const meta = (
<Helmet>
<title>{`${name} - Elastic UI Framework`}</title>
</Helmet>
);
const mainComponent = (
<Route
key={path}
path={`/${path}`}
render={(props) => {
const { location } = props;
// prevents encoded urls with a section id to fail
if (location.pathname.includes('%23')) {
const url = decodeURIComponent(location.pathname);
return <Redirect push to={url} />;
} else {
return (
<AppView
currentRoute={{ name, path, sections, isNew }}
>
{createElement(component, {})}
</AppContainer>
</LinkWrapper>
);
}
}}
/>
);
{({ theme }) => (
<>
{meta}
{createElement(component, {
selectedTheme: theme,
title: name,
})}
</>
)}
</AppView>
);
}
}}
/>
);

const standaloneSections = (sections || [])
.map(({ id, fullScreen }) => {
if (!fullScreen) return undefined;
const { slug, demo } = fullScreen;
return (
<Route
key={`/${path}/${slug}`}
path={`/${path}/${slug}`}
render={() => (
<ExampleContext.Provider
value={{ parentPath: `/${path}#${id}` }}
>
{demo}
</ExampleContext.Provider>
)}
/>
);
})
.filter((x) => !!x);
const standaloneSections = (sections || [])
.map(({ id, fullScreen }) => {
if (!fullScreen) return undefined;
const { slug, demo } = fullScreen;
return (
<Route
key={`/${path}/${slug}`}
path={`/${path}/${slug}`}
render={() => (
<ExampleContext.Provider
value={{ parentPath: `/${path}#${id}` }}
>
{meta}
{demo}
</ExampleContext.Provider>
)}
/>
);
})
.filter((x) => !!x);

// place standaloneSections before mainComponent so their routes take precedent
const routes = [...standaloneSections, mainComponent];
// place standaloneSections before mainComponent so their routes take precedent
const routes = [...standaloneSections, mainComponent];

if (from)
return [
...routes,
<Route exact path={`/${from}`}>
<Redirect to={`/${to}`} />
</Route>,
];
else if (component) return routes;
return null;
}
)}
</Switch>
</Router>
if (from)
return [
...routes,
<Route exact path={`/${from}`}>
<Redirect to={`/${to}`} />
</Route>,
];
else if (component) return routes;
return null;
}
)}
</Switch>
</Router>
</AppContext>
</ThemeProvider>
</Provider>,
document.getElementById('guide')
Expand Down
22 changes: 0 additions & 22 deletions src-docs/src/views/app_container.js
View file
Open in desktop

This file was deleted.

79 changes: 79 additions & 0 deletions src-docs/src/views/app_context.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,79 @@
import PropTypes from 'prop-types';
import React, { useContext } from 'react';
import { Helmet } from 'react-helmet';
import { useSelector } from 'react-redux';
import createCache from '@emotion/cache';
import { ThemeContext } from '../components';
import { translateUsingPseudoLocale } from '../services';
import { getLocale } from '../store';

import { EuiContext, EuiProvider } from '../../../src/components';
import { EUI_THEMES } from '../../../src/themes';

import favicon16Prod from '../images/favicon/prod/favicon-16x16.png';
import favicon32Prod from '../images/favicon/prod/favicon-32x32.png';
import favicon96Prod from '../images/favicon/prod/favicon-96x96.png';
import favicon16Dev from '../images/favicon/dev/favicon-16x16.png';
import favicon32Dev from '../images/favicon/dev/favicon-32x32.png';
import favicon96Dev from '../images/favicon/dev/favicon-96x96.png';

const emotionCache = createCache({
key: 'eui-docs',
container: document.querySelector('#emotion-global-insert'),
});

export const AppContext = ({ children }) => {
const { theme } = useContext(ThemeContext);
const locale = useSelector((state) => getLocale(state));

const mappingFuncs = {
'en-xa': translateUsingPseudoLocale,
};

const i18n = {
mappingFunc: mappingFuncs[locale],
formatNumber: (value) => new Intl.NumberFormat(locale).format(value),
locale,
};

const isLocalDev = window.location.host.includes('803');

return (
<EuiProvider
cache={emotionCache}
theme={EUI_THEMES.find((t) => t.value === theme)?.provider}
colorMode={theme.includes('light') ? 'light' : 'dark'}
>
<Helmet>
<link
rel="icon"
type="image/png"
href={isLocalDev ? favicon16Dev : favicon16Prod}
sizes="16x16"
/>
<link
rel="icon"
type="image/png"
href={isLocalDev ? favicon32Dev : favicon32Prod}
sizes="32x32"
/>
<link
rel="icon"
type="image/png"
href={isLocalDev ? favicon96Dev : favicon96Prod}
sizes="96x96"
/>
</Helmet>
<EuiContext i18n={i18n}>{children}</EuiContext>
</EuiProvider>
);
};

AppContext.propTypes = {
children: PropTypes.any,
currentRoute: PropTypes.object.isRequired,
};

AppContext.defaultProps = {
currentRoute: {},
};
Loading