Skip to content

Commit 7af1d25

Browse files
author
yaron nachshon
committed
working rtl
1 parent 6acf323 commit 7af1d25

File tree

6 files changed

+145
-35
lines changed

6 files changed

+145
-35
lines changed

‎components/Search/Search.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,9 @@ export default function Search({ onChange }) {
1515
options={Object.keys(tora.parasha).map((option) => option)}
1616
renderInput={(params) => (
1717
<TextField
18+
dir="rtl"
1819
{...params}
19-
label="Search input"
20+
label="חפש פרשה"
2021
margin="normal"
2122
variant="outlined"
2223
InputProps={{ ...params.InputProps, type: "search" }}

‎lib/theme.js‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import { createMuiTheme } from '@material-ui/core/styles';
2+
import { red } from '@material-ui/core/colors';
3+
4+
// Create a theme instance.
5+
const theme = createMuiTheme({
6+
direction: 'rtl',
7+
palette: {
8+
// primary: {
9+
// main: '#556cd6',
10+
// },
11+
// secondary: {
12+
// main: '#19857b',
13+
// },
14+
// error: {
15+
// main: red.A400,
16+
// },
17+
// background: {
18+
// default: '#fff',
19+
// },
20+
},
21+
});
22+
23+
export default theme;

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
"@material-ui/icons": "4.9.1",
1616
"@material-ui/lab": "4.0.0-alpha.56",
1717
"babel-preset-next": "^1.4.0",
18+
"jss-rtl": "^0.3.0",
1819
"next": "^10.0.3",
1920
"react": "^17.0.1",
2021
"react-audio-player": "^0.14.0",

‎pages/_app.js‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import React from 'react';
2+
import PropTypes from 'prop-types';
3+
import Head from 'next/head';
4+
import { ThemeProvider } from '@material-ui/core/styles';
5+
import CssBaseline from '@material-ui/core/CssBaseline';
6+
import theme from '../lib/theme';
7+
8+
export default function MyApp(props) {
9+
const { Component, pageProps } = props;
10+
11+
React.useEffect(() => {
12+
// Remove the server-side injected CSS.
13+
const jssStyles = document.querySelector('#jss-server-side');
14+
if (jssStyles) {
15+
jssStyles.parentElement.removeChild(jssStyles);
16+
}
17+
}, []);
18+
19+
return (
20+
<React.Fragment>
21+
<Head>
22+
<title>לימוד תרה</title>
23+
<meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width" />
24+
</Head>
25+
<ThemeProvider theme={theme}>
26+
{/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
27+
<CssBaseline />
28+
<Component {...pageProps} />
29+
</ThemeProvider>
30+
</React.Fragment>
31+
);
32+
}
33+
34+
MyApp.propTypes = {
35+
Component: PropTypes.elementType.isRequired,
36+
pageProps: PropTypes.object.isRequired,
37+
};

‎pages/_document.js‎

Lines changed: 67 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,69 @@
1+
import React from 'react';
2+
import Document, { Html, Head, Main, NextScript } from 'next/document';
3+
import { ServerStyleSheets } from '@material-ui/core/styles';
4+
import theme from '../lib/theme';
5+
export default class MyDocument extends Document {
6+
render() {
7+
return (
8+
<Html lang="en" >
9+
<Head>
10+
{/* PWA primary color */}
11+
<meta name="theme-color" content={theme.palette.primary.main} />
12+
<link
13+
rel="stylesheet"
14+
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
15+
/>
16+
</Head>
117

2-
import React from 'react'
3-
import NextDocument from 'next/document'
4-
import { ServerStyleSheet as StyledComponentSheets } from 'styled-components'
5-
import { ServerStyleSheets as MaterialUiServerStyleSheets } from '@material-ui/core/styles'
6-
export default class Document extends NextDocument {
7-
static async getInitialProps(ctx) {
8-
const styledComponentSheet = new StyledComponentSheets()
9-
const materialUiSheets = new MaterialUiServerStyleSheets()
10-
const originalRenderPage = ctx.renderPage
11-
try {
12-
ctx.renderPage = () =>
13-
originalRenderPage({
14-
enhanceApp: App => props =>
15-
styledComponentSheet.collectStyles(
16-
materialUiSheets.collect(<App {...props} />),
17-
),
18-
})
19-
const initialProps = await NextDocument.getInitialProps(ctx)
20-
return {
21-
...initialProps,
22-
styles: [
23-
<React.Fragment key="styles">
24-
{initialProps.styles}
25-
{materialUiSheets.getStyleElement()}
26-
{styledComponentSheet.getStyleElement()}
27-
</React.Fragment>,
28-
],
29-
}
30-
} finally {
31-
styledComponentSheet.seal()
32-
}
18+
<body dir="rtl">
19+
<Main />
20+
<NextScript />
21+
</body>
22+
23+
</Html>
24+
);
3325
}
34-
}
26+
}
27+
28+
// `getInitialProps` belongs to `_document` (instead of `_app`),
29+
// it's compatible with server-side generation (SSG).
30+
MyDocument.getInitialProps = async (ctx) => {
31+
// Resolution order
32+
//
33+
// On the server:
34+
// 1. app.getInitialProps
35+
// 2. page.getInitialProps
36+
// 3. document.getInitialProps
37+
// 4. app.render
38+
// 5. page.render
39+
// 6. document.render
40+
//
41+
// On the server with error:
42+
// 1. document.getInitialProps
43+
// 2. app.render
44+
// 3. page.render
45+
// 4. document.render
46+
//
47+
// On the client
48+
// 1. app.getInitialProps
49+
// 2. page.getInitialProps
50+
// 3. app.render
51+
// 4. page.render
52+
53+
// Render app and page and get the context of the page with collected side effects.
54+
const sheets = new ServerStyleSheets();
55+
const originalRenderPage = ctx.renderPage;
56+
57+
ctx.renderPage = () =>
58+
originalRenderPage({
59+
enhanceApp: (App) => (props) => sheets.collect(<App {...props} />),
60+
});
61+
62+
const initialProps = await Document.getInitialProps(ctx);
63+
64+
return {
65+
...initialProps,
66+
// Styles fragment is rendered after the app and page rendering finish.
67+
styles: [...React.Children.toArray(initialProps.styles), sheets.getStyleElement()],
68+
};
69+
};

‎pages/index.js‎

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,17 @@
1-
import App from '../components/App/App'
1+
import App from '../components/App/App';
2+
import { create } from 'jss';
3+
import { StylesProvider, jssPreset } from '@material-ui/core/styles';
4+
import rtl from 'jss-rtl'
25

6+
const jss = create({
7+
plugins: [...jssPreset().plugins, rtl()],
8+
});
9+
10+
export default function RTLApp() {
11+
return (
12+
<StylesProvider jss={jss}>
13+
<App />
14+
</StylesProvider>
15+
);
16+
}
317

4-
export default App

0 commit comments

Comments
 (0)