Skip to content

Commit ecdd138

Browse files
TimboKZTimboKZ
committed
Add i18n support
1 parent cd276f6 commit ecdd138

19 files changed

+391
-90
lines changed

‎packages/chonky/package-lock.json

+108-5
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/chonky/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,6 @@
2323
"@types/react-redux": "^7.1.9",
2424
"@types/shortid": "0.0.29",
2525
"classnames": "^2.2.6",
26-
"dateformat": "^3.0.3",
2726
"deepmerge": "^4.2.2",
2827
"exact-trie": "^1.0.13",
2928
"fast-sort": "^2.2.0",
@@ -33,6 +32,7 @@
3332
"memoizee": "^0.4.14",
3433
"react-dnd": "^11.1.3",
3534
"react-dnd-html5-backend": "^11.1.3",
35+
"react-intl": "^5.10.6",
3636
"react-jss": "^10.4.0",
3737
"react-redux": "^7.2.1",
3838
"react-virtualized-auto-sizer": "^1.0.2",

‎packages/chonky/src/action-definitions/extra.ts

-2
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,6 @@ export const ExtraActions = {
5252
toolbar: true,
5353
contextMenu: true,
5454
group: 'Actions',
55-
tooltip: 'Download files',
5655
icon: ChonkyIconName.download,
5756
},
5857
} as const),
@@ -68,7 +67,6 @@ export const ExtraActions = {
6867
toolbar: true,
6968
contextMenu: true,
7069
group: 'Actions',
71-
tooltip: 'Delete files',
7270
icon: ChonkyIconName.trash,
7371
},
7472
} as const),

‎packages/chonky/src/components/external/FileBrowser.tsx

+32-22
Original file line numberDiff line numberDiff line change
@@ -6,15 +6,17 @@ import merge from 'deepmerge';
66
import React, { ReactNode, useMemo } from 'react';
77
import { DndProvider } from 'react-dnd';
88
import { HTML5Backend } from 'react-dnd-html5-backend';
9+
import { IntlProvider } from 'react-intl';
910
import { ThemeProvider } from 'react-jss';
10-
import { Provider } from 'react-redux';
11+
import { Provider as ReduxProvider } from 'react-redux';
1112
import shortid from 'shortid';
1213

1314
import { useChonkyStore } from '../../redux/store';
1415
import { FileBrowserHandle, FileBrowserProps } from '../../types/file-browser.types';
1516
import { defaultConfig } from '../../util/default-config';
1617
import { getValueOrFallback } from '../../util/helpers';
1718
import { useStaticValue } from '../../util/hooks-helpers';
19+
import { ChonkyFormattersContext, defaultFormatters } from '../../util/i18n';
1820
import { ChonkyIconContext } from '../../util/icon-helper';
1921
import {
2022
darkThemeOverride,
@@ -53,6 +55,10 @@ export const FileBrowser = React.forwardRef<
5355
defaultConfig.darkMode,
5456
'boolean'
5557
);
58+
const i18n = getValueOrFallback(props.i18n, defaultConfig.i18n);
59+
const formatters = useMemo(() => ({ ...defaultFormatters, ...i18n?.formatters }), [
60+
i18n,
61+
]);
5662

5763
const chonkyInstanceId = useStaticValue(() => instanceId ?? shortid.generate());
5864
const store = useChonkyStore(chonkyInstanceId);
@@ -79,27 +85,31 @@ export const FileBrowser = React.forwardRef<
7985
);
8086

8187
return (
82-
<Provider store={store}>
83-
<ThemeProvider theme={theme}>
84-
<MuiThemeProvider theme={theme}>
85-
<ChonkyIconContext.Provider
86-
value={
87-
iconComponent ??
88-
defaultConfig.iconComponent ??
89-
ChonkyIconPlaceholder
90-
}
91-
>
92-
{disableDragAndDrop || disableDragAndDropProvider ? (
93-
chonkyComps
94-
) : (
95-
<DndProvider backend={HTML5Backend}>
96-
{chonkyComps}
97-
</DndProvider>
98-
)}
99-
</ChonkyIconContext.Provider>
100-
</MuiThemeProvider>
101-
</ThemeProvider>
102-
</Provider>
88+
<IntlProvider locale="en" defaultLocale="en" {...i18n}>
89+
<ChonkyFormattersContext.Provider value={formatters}>
90+
<ReduxProvider store={store}>
91+
<ThemeProvider theme={theme}>
92+
<MuiThemeProvider theme={theme}>
93+
<ChonkyIconContext.Provider
94+
value={
95+
iconComponent ??
96+
defaultConfig.iconComponent ??
97+
ChonkyIconPlaceholder
98+
}
99+
>
100+
{disableDragAndDrop || disableDragAndDropProvider ? (
101+
chonkyComps
102+
) : (
103+
<DndProvider backend={HTML5Backend}>
104+
{chonkyComps}
105+
</DndProvider>
106+
)}
107+
</ChonkyIconContext.Provider>
108+
</MuiThemeProvider>
109+
</ThemeProvider>
110+
</ReduxProvider>
111+
</ChonkyFormattersContext.Provider>
112+
</IntlProvider>
103113
);
104114
});
105115
FileBrowser.displayName = 'FileBrowser';

‎packages/chonky/src/components/external/FileContextMenu.tsx

+12-1
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,12 @@
77
import ListSubheader from '@material-ui/core/ListSubheader';
88
import Menu from '@material-ui/core/Menu';
99
import React, { ReactElement, useEffect, useMemo } from 'react';
10+
import { useIntl } from 'react-intl';
1011
import { useDispatch, useSelector } from 'react-redux';
1112

1213
import { reduxActions } from '../../redux/reducers';
1314
import { selectContextMenuConfig, selectContextMenuItems } from '../../redux/selectors';
15+
import { getI18nId, I18nNamespace } from '../../util/i18n';
1416
import { important, makeGlobalChonkyStyles } from '../../util/styles';
1517
import { useContextMenuDismisser } from './FileContextMenu-hooks';
1618
import { SmartToolbarDropdownButton } from './ToolbarDropdownButton';
@@ -26,6 +28,15 @@ export const FileContextMenu: React.FC<FileContextMenuProps> = React.memo(() =>
2628
};
2729
}, [dispatch]);
2830

31+
const intl = useIntl();
32+
const browserMenuShortcutString = intl.formatMessage(
33+
{
34+
id: getI18nId(I18nNamespace.FileContextMenu, 'browserMenuShortcut'),
35+
defaultMessage: 'Browser menu: {shortcut}',
36+
},
37+
{ shortcut: <strong>Alt + Right Click</strong> }
38+
);
39+
2940
const contextMenuConfig = useSelector(selectContextMenuConfig);
3041
const contextMenuItems = useSelector(selectContextMenuItems);
3142

@@ -81,7 +92,7 @@ export const FileContextMenu: React.FC<FileContextMenuProps> = React.memo(() =>
8192
>
8293
{contextMenuItemComponents}
8394
<ListSubheader component="div" className={classes.browserMenuTooltip}>
84-
Browser menu: <strong>Alt + Right Click</strong>
95+
{browserMenuShortcutString}
8596
</ListSubheader>
8697
</Menu>
8798
);

‎packages/chonky/src/components/external/ToolbarButton.tsx

+4-2
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import { selectFileActionData } from '../../redux/selectors';
1212
import { useParamSelector } from '../../redux/store';
1313
import { ChonkyIconName } from '../../types/icons.types';
1414
import { useFileActionProps, useFileActionTrigger } from '../../util/file-actions';
15+
import { useLocalizedFileActionStrings } from '../../util/i18n';
1516
import { ChonkyIconContext } from '../../util/icon-helper';
1617
import { c, important, makeGlobalChonkyStyles } from '../../util/styles';
1718

@@ -118,15 +119,16 @@ export const SmartToolbarButton: React.FC<SmartToolbarButtonProps> = React.memo(
118119
const action = useParamSelector(selectFileActionData, fileActionId);
119120
const triggerAction = useFileActionTrigger(fileActionId);
120121
const { icon, active, disabled } = useFileActionProps(fileActionId);
122+
const { buttonName, buttonTooltip } = useLocalizedFileActionStrings(action);
121123

122124
if (!action) return null;
123125
const { button } = action;
124126
if (!button) return null;
125127

126128
return (
127129
<ToolbarButton
128-
text={button.name}
129-
tooltip={button.tooltip}
130+
text={buttonName}
131+
tooltip={buttonTooltip}
130132
icon={icon}
131133
iconOnly={button.iconOnly}
132134
active={active}

‎packages/chonky/src/components/external/ToolbarDropdown.tsx

+3-1
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import Menu from '@material-ui/core/Menu';
88
import React, { useCallback, useMemo } from 'react';
99

1010
import { FileActionGroup } from '../../types/action-menus.types';
11+
import { useLocalizedFileActionGroup } from '../../util/i18n';
1112
import { important, makeGlobalChonkyStyles } from '../../util/styles';
1213
import { ToolbarButton } from './ToolbarButton';
1314
import { SmartToolbarDropdownButton } from './ToolbarDropdownButton';
@@ -36,10 +37,11 @@ export const ToolbarDropdown: React.FC<ToolbarDropdownProps> = React.memo((props
3637
[fileActionIds, handleClose]
3738
);
3839

40+
const localizedName = useLocalizedFileActionGroup(name);
3941
const classes = useStyles();
4042
return (
4143
<>
42-
<ToolbarButton text={name} onClick={handleClick} dropdown={true} />
44+
<ToolbarButton text={localizedName} onClick={handleClick} dropdown={true} />
4345
<Menu
4446
autoFocus
4547
keepMounted

‎packages/chonky/src/components/external/ToolbarDropdownButton.tsx

+3-1
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import { selectFileActionData } from '../../redux/selectors';
1414
import { useParamSelector } from '../../redux/store';
1515
import { ChonkyIconName } from '../../types/icons.types';
1616
import { useFileActionProps, useFileActionTrigger } from '../../util/file-actions';
17+
import { useLocalizedFileActionStrings } from '../../util/i18n';
1718
import { ChonkyIconContext } from '../../util/icon-helper';
1819
import { c, important, makeGlobalChonkyStyles } from '../../util/styles';
1920

@@ -89,6 +90,7 @@ export const SmartToolbarDropdownButton = React.forwardRef(
8990
const action = useParamSelector(selectFileActionData, fileActionId);
9091
const triggerAction = useFileActionTrigger(fileActionId);
9192
const { icon, active, disabled } = useFileActionProps(fileActionId);
93+
const { buttonName } = useLocalizedFileActionStrings(action);
9294

9395
// Combine external click handler with internal one
9496
const handleClick = useCallback(() => {
@@ -103,7 +105,7 @@ export const SmartToolbarDropdownButton = React.forwardRef(
103105
return (
104106
<ToolbarDropdownButton
105107
ref={ref}
106-
text={button.name}
108+
text={buttonName}
107109
icon={icon}
108110
onClick={handleClick}
109111
active={active}

0 commit comments

Comments
 (0)