Skip to content

Commit dc10180

Browse files
adnan1naeemadnan1naeem
committed
feat(RTL setup): rtl setup for Internationalisation in components
1 parent 67c5756 commit dc10180

File tree

5 files changed

+165
-34
lines changed

5 files changed

+165
-34
lines changed

‎package.json

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -79,6 +79,8 @@
7979
"@material-ui/core": "^3.9.3",
8080
"@material-ui/lab": "^3.0.0-alpha.30",
8181
"deepmerge": "^3.2.0",
82+
"jss-rtl": "^0.2.3",
83+
"react-jss": "^8.6.1",
8284
"react-native": "^0.57.8",
8385
"tslib": "^1.9.3"
8486
},
@@ -102,9 +104,10 @@
102104
"@types/enzyme": "^3.9.0",
103105
"@types/enzyme-adapter-react-16": "^1.0.5",
104106
"@types/enzyme-async-helpers": "^0.9.1",
105-
"@types/jest": "^24.0.9",
107+
"@types/jest": "^24.0.11",
106108
"@types/react": "^16.8.7",
107109
"@types/react-dom": "^16.8.2",
110+
"@types/react-jss": "^8.6.3",
108111
"@types/react-loadable": "^5.5.0",
109112
"@types/react-native": "^0.57.7",
110113
"@types/react-test-renderer": "^16.8.1",
@@ -155,4 +158,4 @@
155158
"publishConfig": {
156159
"access": "public"
157160
}
158-
}
161+
}

‎src/index.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ import { Switch } from './components/Switch';
3434
import { Tab } from './components/Tab';
3535
import { Tabs } from './components/Tabs';
3636
import { TextInput } from './components/TextInput';
37+
import WithRTL from './withRtl';
3738
import { withTheme } from './withTheme';
3839

3940
export default createPlugin({
@@ -83,7 +84,7 @@ export default createPlugin({
8384

8485
filters: {
8586
'bluebase.boot.end': (bootOptions: BootOptions, _ctx: any, BB: BlueBase) => {
86-
BB.Components.addHocs('BlueBaseContent', withTheme);
87+
BB.Components.addHocs('BlueBaseContent', withTheme, WithRTL);
8788
return bootOptions;
8889
},
8990
},

‎src/withRtl.tsx

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import { createGenerateClassName, jssPreset } from '@material-ui/core/styles';
2+
import JssProvider from 'react-jss/lib/JssProvider';
3+
import React from 'react';
4+
import { create } from 'jss';
5+
import rtl from 'jss-rtl';
6+
7+
8+
9+
// Configure JSS
10+
const jss = create({
11+
plugins: [
12+
...jssPreset().plugins,
13+
rtl() as any
14+
]
15+
});
16+
17+
// Custom Material-UI class name generator.
18+
const generateClassName = createGenerateClassName();
19+
20+
21+
const withRTL = (props: any) => {
22+
return (
23+
<JssProvider jss={jss} generateClassName={generateClassName}>
24+
{props.children}
25+
</JssProvider>
26+
);
27+
};
28+
29+
export default withRTL as any;

‎src/withTheme.tsx

Lines changed: 30 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
import { IntlConsumer, ThemeContext, ThemeContextData } from '@bluebase/core';
22
import { MuiThemeProvider, createMuiTheme } from '@material-ui/core';
3+
import CssBaseline from '@material-ui/core/CssBaseline';
4+
5+
36
import React from 'react';
47

58
export const withTheme = (Component: React.ComponentType<any>) => {
@@ -13,33 +16,34 @@ export const withTheme = (Component: React.ComponentType<any>) => {
1316

1417
return (
1518
<IntlConsumer>
16-
{({ rtl }) => {
17-
18-
const rnpTheme = createMuiTheme({
19-
direction: rtl ? 'rtl' : 'ltr',
20-
palette: {
21-
...theme.palette,
22-
action: theme.palette.action,
23-
background: {
24-
...theme.palette.background,
25-
paper: theme.palette.background.card
19+
{({ rtl }) => {
20+
21+
const rnpTheme = createMuiTheme({
22+
direction: rtl ? 'rtl' : 'ltr',
23+
palette: {
24+
...theme.palette,
25+
action: theme.palette.action,
26+
background: {
27+
...theme.palette.background,
28+
paper: theme.palette.background.card
29+
},
30+
type: theme.mode
2631
},
27-
type: theme.mode
28-
},
29-
shape: theme.shape,
30-
spacing: theme.spacing,
31-
typography: {
32-
useNextVariants: true,
33-
...theme.typography as any
34-
},
35-
});
36-
37-
return (
38-
<MuiThemeProvider theme={rnpTheme}>
39-
<Component {...this.props} />
40-
</MuiThemeProvider>
41-
);
42-
}}
32+
shape: theme.shape,
33+
spacing: theme.spacing,
34+
typography: {
35+
useNextVariants: true,
36+
...theme.typography as any
37+
},
38+
});
39+
40+
return (
41+
<MuiThemeProvider theme={rnpTheme}>
42+
<CssBaseline />
43+
<Component {...this.props} />
44+
</MuiThemeProvider>
45+
);
46+
}}
4347
</IntlConsumer>
4448
);
4549
}

‎yarn.lock

Lines changed: 99 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2152,14 +2152,14 @@
21522152
resolved "https://registry.yarnpkg.com/@types/jest-diff/-/jest-diff-20.0.1.tgz#35cc15b9c4f30a18ef21852e255fdb02f6d59b89"
21532153
integrity sha512-yALhelO3i0hqZwhjtcr6dYyaLoCHbAMshwtj6cGxTvHZAKXHsYGdff6E8EPw3xLKY0ELUTQ69Q1rQiJENnccMA==
21542154

2155-
"@types/jest@^24.0.9":
2155+
"@types/jest@^24.0.11":
21562156
version "24.0.11"
21572157
resolved "https://registry.yarnpkg.com/@types/jest/-/jest-24.0.11.tgz#1f099bea332c228ea6505a88159bfa86a5858340"
21582158
integrity sha512-2kLuPC5FDnWIDvaJBzsGTBQaBbnDweznicvK7UGYzlIJP4RJR2a4A/ByLUXEyEgag6jz8eHdlWExGDtH3EYUXQ==
21592159
dependencies:
21602160
"@types/jest-diff" "*"
21612161

2162-
"@types/jss@^9.5.6":
2162+
"@types/jss@*", "@types/jss@^9.5.6":
21632163
version "9.5.8"
21642164
resolved "https://registry.yarnpkg.com/@types/jss/-/jss-9.5.8.tgz#258391f42211c042fc965508d505cbdc579baa5b"
21652165
integrity sha512-bBbHvjhm42UKki+wZpR89j73ykSXg99/bhuKuYYePtpma3ZAnmeGnl0WxXiZhPGsIfzKwCUkpPC0jlrVMBfRxA==
@@ -2204,6 +2204,16 @@
22042204
dependencies:
22052205
"@types/react" "*"
22062206

2207+
"@types/react-jss@^8.6.3":
2208+
version "8.6.3"
2209+
resolved "https://registry.yarnpkg.com/@types/react-jss/-/react-jss-8.6.3.tgz#cd2a7ec23599713f2caf5b24f734f1f59c60ef6b"
2210+
integrity sha512-7oJIKxb8+/k0ebGDkWnwzzOqXvxOVVgaUd8Y7WP2hevEGY0tLH7XzrvKyrPaLGPDs8y6uYOyRJYY9RUODZuH7A==
2211+
dependencies:
2212+
"@types/jss" "*"
2213+
"@types/react" "*"
2214+
"@types/theming" "*"
2215+
csstype "^2.0.0"
2216+
22072217
"@types/react-loadable@^5.5.0":
22082218
version "5.5.1"
22092219
resolved "https://registry.yarnpkg.com/@types/react-loadable/-/react-loadable-5.5.1.tgz#f04a262f16e9f088098ddad1aa50682ad0984aa7"
@@ -2289,6 +2299,13 @@
22892299
resolved "https://registry.yarnpkg.com/@types/tapable/-/tapable-1.0.4.tgz#b4ffc7dc97b498c969b360a41eee247f82616370"
22902300
integrity sha512-78AdXtlhpCHT0K3EytMpn4JNxaf5tbqbLcbIRoQIHzpTIyjpxLQKRoxU55ujBXAtg3Nl2h/XWvfDa9dsMOd0pQ==
22912301

2302+
"@types/theming@*":
2303+
version "1.3.3"
2304+
resolved "https://registry.yarnpkg.com/@types/theming/-/theming-1.3.3.tgz#e770833b38b43f138acd4d0794b52892caf34c6c"
2305+
integrity sha512-xcCIvBHFFxNDxDUn0Po6FXQPpGA6Y5dzt6/fbzVhBba7Qx4cxkxStmLVEkFqEF4jy01SH9DjbRUqdj7RziC/XA==
2306+
dependencies:
2307+
"@types/react" "*"
2308+
22922309
"@types/uglify-js@*":
22932310
version "3.0.4"
22942311
resolved "https://registry.yarnpkg.com/@types/uglify-js/-/uglify-js-3.0.4.tgz#96beae23df6f561862a830b4288a49e86baac082"
@@ -6951,7 +6968,7 @@ hoek@6.x.x:
69516968
resolved "https://registry.yarnpkg.com/hoek/-/hoek-6.1.3.tgz#73b7d33952e01fe27a38b0457294b79dd8da242c"
69526969
integrity sha512-YXXAAhmF9zpQbC7LEcREFtXfGq5K1fmd+4PHkBq8NUqmzW3G+Dq10bI/i0KucLRwss3YYFQ0fSfoxBZYiGUqtQ==
69536970

6954-
hoist-non-react-statics@^2.3.1:
6971+
hoist-non-react-statics@^2.3.1, hoist-non-react-statics@^2.5.0:
69556972
version "2.5.5"
69566973
resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz#c5903cf409c0dfd908f388e619d86b9c1174cb47"
69576974
integrity sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw==
@@ -8522,18 +8539,37 @@ jsprim@^1.2.2:
85228539
json-schema "0.2.3"
85238540
verror "1.10.0"
85248541

8525-
jss-camel-case@^6.0.0:
8542+
jss-camel-case@^6.0.0, jss-camel-case@^6.1.0:
85268543
version "6.1.0"
85278544
resolved "https://registry.yarnpkg.com/jss-camel-case/-/jss-camel-case-6.1.0.tgz#ccb1ff8d6c701c02a1fed6fb6fb6b7896e11ce44"
85288545
integrity sha512-HPF2Q7wmNW1t79mCqSeU2vdd/vFFGpkazwvfHMOhPlMgXrJDzdj9viA2SaHk9ZbD5pfL63a8ylp4++irYbbzMQ==
85298546
dependencies:
85308547
hyphenate-style-name "^1.0.2"
85318548

8549+
jss-compose@^5.0.0:
8550+
version "5.0.0"
8551+
resolved "https://registry.yarnpkg.com/jss-compose/-/jss-compose-5.0.0.tgz#ce01b2e4521d65c37ea42cf49116e5f7ab596484"
8552+
integrity sha512-YofRYuiA0+VbeOw0VjgkyO380sA4+TWDrW52nSluD9n+1FWOlDzNbgpZ/Sb3Y46+DcAbOS21W5jo6SAqUEiuwA==
8553+
dependencies:
8554+
warning "^3.0.0"
8555+
85328556
jss-default-unit@^8.0.2:
85338557
version "8.0.2"
85348558
resolved "https://registry.yarnpkg.com/jss-default-unit/-/jss-default-unit-8.0.2.tgz#cc1e889bae4c0b9419327b314ab1c8e2826890e6"
85358559
integrity sha512-WxNHrF/18CdoAGw2H0FqOEvJdREXVXLazn7PQYU7V6/BWkCV0GkmWsppNiExdw8dP4TU1ma1dT9zBNJ95feLmg==
85368560

8561+
jss-expand@^5.3.0:
8562+
version "5.3.0"
8563+
resolved "https://registry.yarnpkg.com/jss-expand/-/jss-expand-5.3.0.tgz#02be076efe650125c842f5bb6fb68786fe441ed6"
8564+
integrity sha512-NiM4TbDVE0ykXSAw6dfFmB1LIqXP/jdd0ZMnlvlGgEMkMt+weJIl8Ynq1DsuBY9WwkNyzWktdqcEW2VN0RAtQg==
8565+
8566+
jss-extend@^6.2.0:
8567+
version "6.2.0"
8568+
resolved "https://registry.yarnpkg.com/jss-extend/-/jss-extend-6.2.0.tgz#4af09d0b72fb98ee229970f8ca852fec1ca2a8dc"
8569+
integrity sha512-YszrmcB6o9HOsKPszK7NeDBNNjVyiW864jfoiHoMlgMIg2qlxKw70axZHqgczXHDcoyi/0/ikP1XaHDPRvYtEA==
8570+
dependencies:
8571+
warning "^3.0.0"
8572+
85378573
jss-global@^3.0.0:
85388574
version "3.0.0"
85398575
resolved "https://registry.yarnpkg.com/jss-global/-/jss-global-3.0.0.tgz#e19e5c91ab2b96353c227e30aa2cbd938cdaafa2"
@@ -8546,19 +8582,49 @@ jss-nested@^6.0.1:
85468582
dependencies:
85478583
warning "^3.0.0"
85488584

8585+
jss-preset-default@^4.3.0:
8586+
version "4.5.0"
8587+
resolved "https://registry.yarnpkg.com/jss-preset-default/-/jss-preset-default-4.5.0.tgz#d3a457012ccd7a551312014e394c23c4b301cadd"
8588+
integrity sha512-qZbpRVtHT7hBPpZEBPFfafZKWmq3tA/An5RNqywDsZQGrlinIF/mGD9lmj6jGqu8GrED2SMHZ3pPKLmjCZoiaQ==
8589+
dependencies:
8590+
jss-camel-case "^6.1.0"
8591+
jss-compose "^5.0.0"
8592+
jss-default-unit "^8.0.2"
8593+
jss-expand "^5.3.0"
8594+
jss-extend "^6.2.0"
8595+
jss-global "^3.0.0"
8596+
jss-nested "^6.0.1"
8597+
jss-props-sort "^6.0.0"
8598+
jss-template "^1.0.1"
8599+
jss-vendor-prefixer "^7.0.0"
8600+
85498601
jss-props-sort@^6.0.0:
85508602
version "6.0.0"
85518603
resolved "https://registry.yarnpkg.com/jss-props-sort/-/jss-props-sort-6.0.0.tgz#9105101a3b5071fab61e2d85ea74cc22e9b16323"
85528604
integrity sha512-E89UDcrphmI0LzmvYk25Hp4aE5ZBsXqMWlkFXS0EtPkunJkRr+WXdCNYbXbksIPnKlBenGB9OxzQY+mVc70S+g==
85538605

8606+
jss-rtl@^0.2.3:
8607+
version "0.2.3"
8608+
resolved "https://registry.yarnpkg.com/jss-rtl/-/jss-rtl-0.2.3.tgz#fe76010d7d1041ca9d61e0011fa71d344ba0b696"
8609+
integrity sha512-c9yOhTWldABdx+dds0XSXIbUcEWajBv+e7fl3zaiHCwOqbq4QiAdDTw7l4l5nqHAaGV6+33zMoS//KMMGpPA1A==
8610+
dependencies:
8611+
rtl-css-js "^1.8.0"
8612+
8613+
jss-template@^1.0.1:
8614+
version "1.0.1"
8615+
resolved "https://registry.yarnpkg.com/jss-template/-/jss-template-1.0.1.tgz#09aed9d86cc547b07f53ef355d7e1777f7da430a"
8616+
integrity sha512-m5BqEWha17fmIVXm1z8xbJhY6GFJxNB9H68GVnCWPyGYfxiAgY9WTQyvDAVj+pYRgrXSOfN5V1T4+SzN1sJTeg==
8617+
dependencies:
8618+
warning "^3.0.0"
8619+
85548620
jss-vendor-prefixer@^7.0.0:
85558621
version "7.0.0"
85568622
resolved "https://registry.yarnpkg.com/jss-vendor-prefixer/-/jss-vendor-prefixer-7.0.0.tgz#0166729650015ef19d9f02437c73667231605c71"
85578623
integrity sha512-Agd+FKmvsI0HLcYXkvy8GYOw3AAASBUpsmIRvVQheps+JWaN892uFOInTr0DRydwaD91vSSUCU4NssschvF7MA==
85588624
dependencies:
85598625
css-vendor "^0.3.8"
85608626

8561-
jss@^9.8.7:
8627+
jss@^9.7.0, jss@^9.8.7:
85628628
version "9.8.7"
85638629
resolved "https://registry.yarnpkg.com/jss/-/jss-9.8.7.tgz#ed9763fc0f2f0260fc8260dac657af61e622ce05"
85648630
integrity sha512-awj3XRZYxbrmmrx9LUSj5pXSUfm12m8xzi/VKeqI1ZwWBtQ0kVPTs3vYs32t4rFw83CgFDukA8wKzOE9sMQnoQ==
@@ -11771,6 +11837,17 @@ react-is@^16.6.3, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.4, react-is
1177111837
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.6.tgz#5bbc1e2d29141c9fbdfed456343fe2bc430a6a16"
1177211838
integrity sha512-aUk3bHfZ2bRSVFFbbeVS4i+lNPZr3/WM5jT2J5omUVV1zzcs1nAaf3l51ctA5FFvCRbhrH0bdAsRRQddFJZPtA==
1177311839

11840+
react-jss@^8.6.1:
11841+
version "8.6.1"
11842+
resolved "https://registry.yarnpkg.com/react-jss/-/react-jss-8.6.1.tgz#a06e2e1d2c4d91b4d11befda865e6c07fbd75252"
11843+
integrity sha512-SH6XrJDJkAphp602J14JTy3puB2Zxz1FkM3bKVE8wON+va99jnUTKWnzGECb3NfIn9JPR5vHykge7K3/A747xQ==
11844+
dependencies:
11845+
hoist-non-react-statics "^2.5.0"
11846+
jss "^9.7.0"
11847+
jss-preset-default "^4.3.0"
11848+
prop-types "^15.6.0"
11849+
theming "^1.3.0"
11850+
1177411851
react-lifecycles-compat@^3.0.0, react-lifecycles-compat@^3.0.2, react-lifecycles-compat@^3.0.4:
1177511852
version "3.0.4"
1177611853
resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
@@ -12821,6 +12898,13 @@ rsvp@^4.8.4:
1282112898
resolved "https://registry.yarnpkg.com/rsvp/-/rsvp-4.8.4.tgz#b50e6b34583f3dd89329a2f23a8a2be072845911"
1282212899
integrity sha512-6FomvYPfs+Jy9TfXmBpBuMWNH94SgCsZmJKcanySzgNNP6LjWxBvyLTa9KaMfDDM5oxRfrKDB0r/qeRsLwnBfA==
1282312900

12901+
rtl-css-js@^1.8.0:
12902+
version "1.11.0"
12903+
resolved "https://registry.yarnpkg.com/rtl-css-js/-/rtl-css-js-1.11.0.tgz#a7151930ef9d54656607d754ebb172ddfc9ef836"
12904+
integrity sha512-YnZ6jWxZxlWlcQAGF9vOmiF9bEmoQmSHE+wsrsiILkdK9HqiRPAIll4SY/QDzbvEu2lB2h62+hfg3TYzjnldbA==
12905+
dependencies:
12906+
"@babel/runtime" "^7.1.2"
12907+
1282412908
rtl-detect@^1.0.2:
1282512909
version "1.0.2"
1282612910
resolved "https://registry.yarnpkg.com/rtl-detect/-/rtl-detect-1.0.2.tgz#8eca316f5c6563d54df4e406171dd7819adda67f"
@@ -13872,6 +13956,16 @@ text-table@0.2.0, text-table@^0.2.0:
1387213956
resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
1387313957
integrity sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=
1387413958

13959+
theming@^1.3.0:
13960+
version "1.3.0"
13961+
resolved "https://registry.yarnpkg.com/theming/-/theming-1.3.0.tgz#286d5bae80be890d0adc645e5ca0498723725bdc"
13962+
integrity sha512-ya5Ef7XDGbTPBv5ENTwrwkPUexrlPeiAg/EI9kdlUAZhNlRbCdhMKRgjNX1IcmsmiPcqDQZE6BpSaH+cr31FKw==
13963+
dependencies:
13964+
brcast "^3.0.1"
13965+
is-function "^1.0.1"
13966+
is-plain-object "^2.0.1"
13967+
prop-types "^15.5.8"
13968+
1387513969
throat@^4.0.0, throat@^4.1.0:
1387613970
version "4.1.0"
1387713971
resolved "https://registry.yarnpkg.com/throat/-/throat-4.1.0.tgz#89037cbc92c56ab18926e6ba4cbb200e15672a6a"

0 commit comments

Comments
 (0)