Skip to content

Commit 8de6b20

Browse files
oliviertassinarioliviertassinari
committed
Globalization
1 parent 2d260ce commit 8de6b20

24 files changed

+465
-157
lines changed

‎docs/pages/api/autocomplete.md

+3-6
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,9 @@ You can learn more about the difference by [reading this guide](/guides/minimizi
2929
| <span class="prop-name">autoSelect</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, the selected option becomes the value of the input when the Autocomplete loses focus unless the user chooses a different option or changes the character string in the input. |
3030
| <span class="prop-name">classes</span> | <span class="prop-type">object</span> | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. |
3131
| <span class="prop-name">clearOnEscape</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, clear all values when the user presses escape and the popup is closed. |
32+
| <span class="prop-name">clearText</span> | <span class="prop-type">string</span> | <span class="prop-default">'Clear'</span> | Text label for the clear icon button. |
3233
| <span class="prop-name">closeIcon</span> | <span class="prop-type">node</span> | <span class="prop-default">&lt;CloseIcon fontSize="small" /></span> | The icon to display in place of the default close icon. |
34+
| <span class="prop-name">closeText</span> | <span class="prop-type">string</span> | <span class="prop-default">'Close'</span> | Text label for the close popup icon button. |
3335
| <span class="prop-name">debug</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, the popup will ignore the blur event if the input if filled. You can inspect the popup markup with your browser tools. Consider this option when you need to customize the component. |
3436
| <span class="prop-name">defaultValue</span> | <span class="prop-type">any</span> | | The default input value. Use when the component is not controlled. |
3537
| <span class="prop-name">disableClearable</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, the input can't be cleared. |
@@ -57,21 +59,16 @@ You can learn more about the difference by [reading this guide](/guides/minimizi
5759
| <span class="prop-name">onInputChange</span> | <span class="prop-type">func</span> | | Callback fired when the input value changes.<br><br>**Signature:**<br>`function(event: object, value: string) => void`<br>*event:* The event source of the callback.<br>*value:* null |
5860
| <span class="prop-name">onOpen</span> | <span class="prop-type">func</span> | | Callback fired when the popup requests to be opened. Use in controlled mode (see open).<br><br>**Signature:**<br>`function(event: object) => void`<br>*event:* The event source of the callback. |
5961
| <span class="prop-name">open</span> | <span class="prop-type">bool</span> | | Control the popup` open state. |
62+
| <span class="prop-name">openText</span> | <span class="prop-type">string</span> | <span class="prop-default">'Open'</span> | Text label for the open popup icon button. |
6063
| <span class="prop-name">options</span> | <span class="prop-type">array</span> | <span class="prop-default">[]</span> | Array of options. |
6164
| <span class="prop-name">PaperComponent</span> | <span class="prop-type">elementType</span> | <span class="prop-default">Paper</span> | The component used to render the body of the popup. |
6265
| <span class="prop-name">PopperComponent</span> | <span class="prop-type">elementType</span> | <span class="prop-default">Popper</span> | The component used to position the popup. |
6366
| <span class="prop-name">popupIcon</span> | <span class="prop-type">node</span> | <span class="prop-default">&lt;ArrowDropDownIcon /></span> | The icon to display in place of the default popup icon. |
6467
| <span class="prop-name">renderGroup</span> | <span class="prop-type">func</span> | | Render the group.<br><br>**Signature:**<br>`function(option: any) => ReactNode`<br>*option:* The group to render. |
6568
| <span class="prop-name required">renderInput&nbsp;*</span> | <span class="prop-type">func</span> | | Render the input.<br><br>**Signature:**<br>`function(params: object) => ReactNode`<br>*params:* null |
6669
| <span class="prop-name">renderOption</span> | <span class="prop-type">func</span> | | Render the option, use `getOptionLabel` by default.<br><br>**Signature:**<br>`function(option: any, state: object) => ReactNode`<br>*option:* The option to render.<br>*state:* The state of the component. |
67-
<<<<<<< HEAD
6870
| <span class="prop-name">renderTags</span> | <span class="prop-type">func</span> | | Render the selected value.<br><br>**Signature:**<br>`function(value: any, getTagProps: function) => ReactNode`<br>*value:* The `value` provided to the component.<br>*getTagProps:* A tag props getter. |
6971
| <span class="prop-name">value</span> | <span class="prop-type">any</span> | | The value of the autocomplete. |
70-
=======
71-
| <span class="prop-name">renderTags</span> | <span class="prop-type">func</span> | | Render the selected value.<br><br>**Signature:**<br>`function(value: any) => ReactNode`<br>*value:* The `value` provided to the component. |
72-
| <span class="prop-name">titles</span> | <span class="prop-type">{ clearPopup: string, closePopup: string, openPopup: string }</span> | <span class="prop-default">{ openPopup: 'Open popup', closePopup: 'Close popup', clearPopup: 'Clear',}</span> | Titles to display when hovering the arrow or clear buttons. |
73-
| <span class="prop-name">value</span> | <span class="prop-type">any</span> | | The input value. |
74-
>>>>>>> Add new props to accept custom titles for Autocomplete buttons
7572

7673
The `ref` is forwarded to the root element.
7774

‎docs/pages/api/table-pagination.md

+2
Original file line numberDiff line numberDiff line change
@@ -26,12 +26,14 @@ A `TableCell` based component for placing inside `TableFooter` for pagination.
2626
|:-----|:-----|:--------|:------------|
2727
| <span class="prop-name">ActionsComponent</span> | <span class="prop-type">elementType</span> | <span class="prop-default">TablePaginationActions</span> | The component used for displaying the actions. Either a string to use a DOM element or a component. |
2828
| <span class="prop-name">backIconButtonProps</span> | <span class="prop-type">object</span> | | Props applied to the back arrow [`IconButton`](/api/icon-button/) component. |
29+
| <span class="prop-name">backIconButtonText</span> | <span class="prop-type">string</span> | <span class="prop-default">'Previous page'</span> | Text label for the back arrow icon button. |
2930
| <span class="prop-name">classes</span> | <span class="prop-type">object</span> | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. |
3031
| <span class="prop-name">component</span> | <span class="prop-type">elementType</span> | <span class="prop-default">TableCell</span> | The component used for the root node. Either a string to use a DOM element or a component. |
3132
| <span class="prop-name required">count&nbsp;*</span> | <span class="prop-type">number</span> | | The total number of rows. |
3233
| <span class="prop-name">labelDisplayedRows</span> | <span class="prop-type">func</span> | <span class="prop-default">({ from, to, count }) =>`${from}-${to === -1 ? count : to} of ${count}`</span> | Customize the displayed rows label. |
3334
| <span class="prop-name">labelRowsPerPage</span> | <span class="prop-type">node</span> | <span class="prop-default">'Rows per page:'</span> | Customize the rows per page label. Invoked with a `{ from, to, count, page }` object. |
3435
| <span class="prop-name">nextIconButtonProps</span> | <span class="prop-type">object</span> | | Props applied to the next arrow [`IconButton`](/api/icon-button/) element. |
36+
| <span class="prop-name">nextIconButtonText</span> | <span class="prop-type">string</span> | <span class="prop-default">'Next page'</span> | Text label for the next arrow icon button. |
3537
| <span class="prop-name required">onChangePage&nbsp;*</span> | <span class="prop-type">func</span> | | Callback fired when the page is changed.<br><br>**Signature:**<br>`function(event: object, page: number) => void`<br>*event:* The event source of the callback.<br>*page:* The page selected. |
3638
| <span class="prop-name">onChangeRowsPerPage</span> | <span class="prop-type">func</span> | | Callback fired when the number of rows per page is changed.<br><br>**Signature:**<br>`function(event: object) => void`<br>*event:* The event source of the callback. |
3739
| <span class="prop-name required">page&nbsp;*</span> | <span class="prop-type">number</span> | | The zero-based index of the current page. |

‎docs/pages/guides/globalization.js

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import React from 'react';
2+
import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
3+
4+
const req = require.context('docs/src/pages/guides/globalization', false, /\.(md|js|tsx)$/);
5+
const reqSource = require.context(
6+
'!raw-loader!../../src/pages/guides/globalization',
7+
false,
8+
/\.(js|tsx)$/,
9+
);
10+
const reqPrefix = 'pages/guides/globalization';
11+
12+
export default function Page() {
13+
return <MarkdownDocs req={req} reqSource={reqSource} reqPrefix={reqPrefix} />;
14+
}

‎docs/src/modules/components/MarkdownElement.js

-1
Original file line numberDiff line numberDiff line change
@@ -215,7 +215,6 @@ const styles = theme => ({
215215
},
216216
'& table': {
217217
width: '100%',
218-
display: 'block',
219218
overflowX: 'auto',
220219
WebkitOverflowScrolling: 'touch', // iOS momentum scrolling.
221220
borderCollapse: 'collapse',

‎docs/src/modules/components/ThemeContext.js

+69-68
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,23 @@ import {
55
createMuiTheme,
66
darken,
77
} from '@material-ui/core/styles';
8+
import { useSelector } from 'react-redux';
89
import useMediaQuery from '@material-ui/core/useMediaQuery';
10+
import { enUS, zhCN, ruRU, ptBR, esES, frFR, deDE, jaJP } from '@material-ui/core/locale';
911
import { blue, pink } from '@material-ui/core/colors';
1012
import { getCookie } from 'docs/src/modules/utils/helpers';
1113
import { darkTheme, setPrismTheme } from 'docs/src/modules/components/prism';
12-
import deepmerge from 'deepmerge';
14+
15+
const languageMap = {
16+
en: enUS,
17+
zh: zhCN,
18+
ru: ruRU,
19+
pt: ptBR,
20+
es: esES,
21+
fr: frFR,
22+
de: deDE,
23+
ja: jaJP,
24+
};
1325

1426
export const themeColor = blue[700];
1527

@@ -20,72 +32,59 @@ const themeInitialOptions = {
2032
spacing: 8, // spacing unit
2133
};
2234

23-
/**
24-
* @typedef {import('@material-ui/core/src/styles/createMuiTheme').ThemeOptions} ThemeOptions
25-
*
26-
*
27-
* @param {ThemeOptions} themeOptions
28-
* @returns {ThemeOptions}
29-
*/
30-
function usingHighDensity(themeOptions) {
31-
return deepmerge(themeOptions, {
32-
props: {
33-
MuiButton: {
34-
size: 'small',
35-
},
36-
MuiFilledInput: {
37-
margin: 'dense',
38-
},
39-
MuiFormControl: {
40-
margin: 'dense',
41-
},
42-
MuiFormHelperText: {
43-
margin: 'dense',
44-
},
45-
MuiIconButton: {
46-
size: 'small',
47-
},
48-
MuiInputBase: {
49-
margin: 'dense',
50-
},
51-
MuiInputLabel: {
52-
margin: 'dense',
53-
},
54-
MuiListItem: {
55-
dense: true,
56-
},
57-
MuiOutlinedInput: {
58-
margin: 'dense',
59-
},
60-
MuiFab: {
61-
size: 'small',
62-
},
63-
MuiTable: {
64-
size: 'small',
65-
},
66-
MuiTextField: {
67-
margin: 'dense',
68-
},
69-
MuiToolbar: {
70-
variant: 'dense',
71-
},
35+
const highDensity = {
36+
props: {
37+
MuiButton: {
38+
size: 'small',
7239
},
73-
overrides: {
74-
MuiIconButton: {
75-
sizeSmall: {
76-
// minimal touch target hit spacing
77-
marginLeft: 4,
78-
marginRight: 4,
79-
padding: 12,
80-
},
40+
MuiFilledInput: {
41+
margin: 'dense',
42+
},
43+
MuiFormControl: {
44+
margin: 'dense',
45+
},
46+
MuiFormHelperText: {
47+
margin: 'dense',
48+
},
49+
MuiIconButton: {
50+
size: 'small',
51+
},
52+
MuiInputBase: {
53+
margin: 'dense',
54+
},
55+
MuiInputLabel: {
56+
margin: 'dense',
57+
},
58+
MuiListItem: {
59+
dense: true,
60+
},
61+
MuiOutlinedInput: {
62+
margin: 'dense',
63+
},
64+
MuiFab: {
65+
size: 'small',
66+
},
67+
MuiTable: {
68+
size: 'small',
69+
},
70+
MuiTextField: {
71+
margin: 'dense',
72+
},
73+
MuiToolbar: {
74+
variant: 'dense',
75+
},
76+
},
77+
overrides: {
78+
MuiIconButton: {
79+
sizeSmall: {
80+
// minimal touch target hit spacing
81+
marginLeft: 4,
82+
marginRight: 4,
83+
padding: 12,
8184
},
8285
},
83-
});
84-
}
85-
86-
function usingIdentity(themeOptions) {
87-
return themeOptions;
88-
}
86+
},
87+
};
8988

9089
export const DispatchContext = React.createContext(() => {
9190
throw new Error('Forgot to wrap component in ThemeContext.Provider');
@@ -143,6 +142,7 @@ export function ThemeProvider(props) {
143142
}
144143
}, themeInitialOptions);
145144

145+
const userLanguage = useSelector(state => state.options.userLanguage);
146146
const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
147147
const preferredType = prefersDarkMode ? 'dark' : 'light';
148148
const { dense, direction, paletteColors, paletteType = preferredType, spacing } = themeOptions;
@@ -173,9 +173,8 @@ export function ThemeProvider(props) {
173173
}, [direction]);
174174

175175
const theme = React.useMemo(() => {
176-
const themeDecorator = dense ? usingHighDensity : usingIdentity;
177176
const nextTheme = createMuiTheme(
178-
themeDecorator({
177+
{
179178
direction,
180179
nprogress: {
181180
color: paletteType === 'light' ? '#000' : '#fff',
@@ -194,7 +193,9 @@ export function ThemeProvider(props) {
194193
...paletteColors,
195194
},
196195
spacing,
197-
}),
196+
},
197+
dense ? highDensity : null,
198+
languageMap[userLanguage],
198199
);
199200

200201
nextTheme.palette.background.level2 =
@@ -204,7 +205,7 @@ export function ThemeProvider(props) {
204205
paletteType === 'light' ? '#fff' : nextTheme.palette.grey[900];
205206

206207
return nextTheme;
207-
}, [dense, direction, paletteColors, paletteType, spacing]);
208+
}, [dense, direction, paletteColors, paletteType, spacing, userLanguage]);
208209

209210
React.useEffect(() => {
210211
// Expose the theme as a global variable so people can play with it.

‎docs/src/pages.js

+1
Original file line numberDiff line numberDiff line change
@@ -184,6 +184,7 @@ const pages = [
184184
{ pathname: '/guides/migration-v3', title: 'Migration From v3' },
185185
{ pathname: '/guides/migration-v0x', title: 'Migration From v0.x' },
186186
{ pathname: '/guides/testing' },
187+
{ pathname: '/guides/globalization' },
187188
{ pathname: '/guides/right-to-left', title: 'Right-to-left' },
188189
{ pathname: '/guides/flow' },
189190
],

‎docs/src/pages/components/tables/EnhancedTable.js

-6
Original file line numberDiff line numberDiff line change
@@ -342,12 +342,6 @@ export default function EnhancedTable() {
342342
count={rows.length}
343343
rowsPerPage={rowsPerPage}
344344
page={page}
345-
backIconButtonProps={{
346-
'aria-label': 'previous page',
347-
}}
348-
nextIconButtonProps={{
349-
'aria-label': 'next page',
350-
}}
351345
onChangePage={handleChangePage}
352346
onChangeRowsPerPage={handleChangeRowsPerPage}
353347
/>

‎docs/src/pages/components/tables/EnhancedTable.tsx

-6
Original file line numberDiff line numberDiff line change
@@ -370,12 +370,6 @@ export default function EnhancedTable() {
370370
count={rows.length}
371371
rowsPerPage={rowsPerPage}
372372
page={page}
373-
backIconButtonProps={{
374-
'aria-label': 'previous page',
375-
}}
376-
nextIconButtonProps={{
377-
'aria-label': 'next page',
378-
}}
379373
onChangePage={handleChangePage}
380374
onChangeRowsPerPage={handleChangeRowsPerPage}
381375
/>

‎docs/src/pages/components/tables/StickyHeadTable.js

-6
Original file line numberDiff line numberDiff line change
@@ -122,12 +122,6 @@ export default function StickyHeadTable() {
122122
count={rows.length}
123123
rowsPerPage={rowsPerPage}
124124
page={page}
125-
backIconButtonProps={{
126-
'aria-label': 'previous page',
127-
}}
128-
nextIconButtonProps={{
129-
'aria-label': 'next page',
130-
}}
131125
onChangePage={handleChangePage}
132126
onChangeRowsPerPage={handleChangeRowsPerPage}
133127
/>

‎docs/src/pages/components/tables/StickyHeadTable.tsx

-6
Original file line numberDiff line numberDiff line change
@@ -138,12 +138,6 @@ export default function StickyHeadTable() {
138138
count={rows.length}
139139
rowsPerPage={rowsPerPage}
140140
page={page}
141-
backIconButtonProps={{
142-
'aria-label': 'previous page',
143-
}}
144-
nextIconButtonProps={{
145-
'aria-label': 'next page',
146-
}}
147141
onChangePage={handleChangePage}
148142
onChangeRowsPerPage={handleChangeRowsPerPage}
149143
/>

‎docs/src/pages/customization/theming/theming.md

+2-1
Original file line numberDiff line numberDiff line change
@@ -64,13 +64,14 @@ The main point to understand is that the injected CSS is cached with the followi
6464

6565
## API
6666

67-
### `createMuiTheme(options) => theme`
67+
### `createMuiTheme(options, ...args) => theme`
6868

6969
Generate a theme base on the options received.
7070

7171
#### Arguments
7272

7373
1. `options` (*Object*): Takes an incomplete theme object and adds the missing parts.
74+
2. `...args` (*Array*): Deep merge the arguments with the about to be returned theme.
7475

7576
#### Returns
7677

‎docs/src/pages/guides/globalization/Locales.js

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import React from 'react';
2+
import TablePagination from '@material-ui/core/TablePagination';
3+
import Rating from '@material-ui/lab/Rating';
4+
import Autocomplete from '@material-ui/lab/Autocomplete';
5+
import TextField from '@material-ui/core/TextField';
6+
import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
7+
import { zhCN } from '@material-ui/core/locale';
8+
9+
const theme = createMuiTheme({}, zhCN);
10+
11+
export default function Locales() {
12+
return (
13+
<div>
14+
<ThemeProvider theme={theme}>
15+
<TablePagination
16+
count={20}
17+
rowsPerPage={10}
18+
page={1}
19+
component="div"
20+
onChangePage={() => {}}
21+
/>
22+
<Autocomplete
23+
options={[]}
24+
style={{ width: 300 }}
25+
renderInput={params => (
26+
<TextField {...params} label="Autocomplete" variant="outlined" fullWidth />
27+
)}
28+
/>
29+
<Rating value={1} name="locales" />
30+
</ThemeProvider>
31+
</div>
32+
);
33+
}

0 commit comments

Comments
 (0)