54 lines
1.7 KiB
TypeScript
54 lines
1.7 KiB
TypeScript
|
import type { FC} from 'react';
|
||
|
|
import React, { useContext } from 'react';
|
||
|
|
// @ts-ignore
|
||
|
|
import { history } from 'dumi';
|
||
|
|
import { context, Link } from 'dumi/theme';
|
||
|
|
import './LocaleSelect.less';
|
||
|
|
|
||
|
|
const LocaleSelect: FC<{ location: any }> = ({ location }) => {
|
||
|
|
const {
|
||
|
|
base,
|
||
|
|
locale,
|
||
|
|
config: { locales },
|
||
|
|
} = useContext(context);
|
||
|
|
const firstDiffLocale = locales.find(({ name }) => name !== locale);
|
||
|
|
|
||
|
|
function getLocaleTogglePath(target: string) {
|
||
|
|
const baseWithoutLocale = base.replace(`/${locale}`, '');
|
||
|
|
const pathnameWithoutLocale = location.pathname.replace(base, baseWithoutLocale) || '/';
|
||
|
|
|
||
|
|
// append locale prefix to path if it is not the default locale
|
||
|
|
if (target !== locales[0].name) {
|
||
|
|
// compatiable with integrate route prefix /~docs
|
||
|
|
const routePrefix = `${baseWithoutLocale}/${target}`.replace(/\/\//, '/');
|
||
|
|
const pathnameWithoutBase = location.pathname.replace(
|
||
|
|
// to avoid stripped the first /
|
||
|
|
base.replace(/^\/$/, '//'),
|
||
|
|
'',
|
||
|
|
);
|
||
|
|
|
||
|
|
return `${routePrefix}${pathnameWithoutBase}`.replace(/\/$/, '');
|
||
|
|
}
|
||
|
|
|
||
|
|
return pathnameWithoutLocale;
|
||
|
|
}
|
||
|
|
|
||
|
|
return firstDiffLocale ? (
|
||
|
|
<div className="__dumi-default-locale-select" data-locale-count={locales.length}>
|
||
|
|
{locales.length > 2 ? (
|
||
|
|
<select value={locale} onChange={ev => history.push(getLocaleTogglePath(ev.target.value))}>
|
||
|
|
{locales.map(localeItem => (
|
||
|
|
<option value={localeItem.name} key={localeItem.name}>
|
||
|
|
{localeItem.label}
|
||
|
|
</option>
|
||
|
|
))}
|
||
|
|
</select>
|
||
|
|
) : (
|
||
|
|
<Link to={getLocaleTogglePath(firstDiffLocale.name)}>{firstDiffLocale.label}</Link>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
) : null;
|
||
|
|
};
|
||
|
|
|
||
|
|
export default LocaleSelect;
|