mirror of https://github.com/msgbyte/tailchat
refactor: 升级依赖: react18与react-router v6 以及其他
moonrailgun
3 years ago
parent
da521fc638
commit
8f6adb13d4
@ -1,7 +1,7 @@
|
||||
import React from 'react';
|
||||
import React, { PropsWithChildren } from 'react';
|
||||
import styles from './index.module.less';
|
||||
|
||||
export const Highlight: React.FC = React.memo((props) => {
|
||||
export const Highlight: React.FC<PropsWithChildren> = React.memo((props) => {
|
||||
return <span className={styles.highLight}>{props.children}</span>;
|
||||
});
|
||||
Highlight.displayName = 'Highlight';
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
import React, { Fragment } from 'react';
|
||||
import React, { Fragment, PropsWithChildren } from 'react';
|
||||
import { isDevelopment } from 'tailchat-shared';
|
||||
|
||||
/**
|
||||
* 开发中容器
|
||||
* 在容器下的组件在生产环境下不会被渲染
|
||||
*/
|
||||
export const DevContainer: React.FC = React.memo((props) => {
|
||||
export const DevContainer: React.FC<PropsWithChildren> = React.memo((props) => {
|
||||
return isDevelopment ? <Fragment>{props.children}</Fragment> : null;
|
||||
});
|
||||
DevContainer.displayName = 'DevContainer';
|
||||
|
||||
@ -0,0 +1,15 @@
|
||||
import React from 'react';
|
||||
import { Empty } from 'antd';
|
||||
import { t } from 'tailchat-shared';
|
||||
|
||||
interface NotFoundProps {
|
||||
message?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* 没有数据或没找到数据
|
||||
*/
|
||||
export const NotFound: React.FC<NotFoundProps> = React.memo((props) => {
|
||||
return <Empty description={props.message ?? t('未找到')} />;
|
||||
});
|
||||
NotFound.displayName = 'NotFound';
|
||||
@ -1,17 +1,16 @@
|
||||
import { useHistory } from 'react-router';
|
||||
import { NavigateOptions, To, useNavigate } from 'react-router';
|
||||
|
||||
export interface QuickActionContext {
|
||||
navigate: (url: string) => void;
|
||||
navigate: (to: To, options?: NavigateOptions) => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* 快速切换操作上下文信息
|
||||
*/
|
||||
export function useQuickSwitcherActionContext(): QuickActionContext {
|
||||
const history = useHistory();
|
||||
const navigate = useNavigate();
|
||||
|
||||
return {
|
||||
navigate: (url) => {
|
||||
history.push(url);
|
||||
},
|
||||
navigate,
|
||||
};
|
||||
}
|
||||
|
||||
@ -1,42 +1,43 @@
|
||||
import { fetchImagePrimaryColor } from '@/utils/image-helper';
|
||||
import React from 'react';
|
||||
import React, { PropsWithChildren } from 'react';
|
||||
import { AvatarWithPreview, getTextColorHex } from 'tailchat-design';
|
||||
import { useAsync, UserBaseInfo } from 'tailchat-shared';
|
||||
|
||||
/**
|
||||
* 用户信息容器
|
||||
*/
|
||||
export const UserProfileContainer: React.FC<{ userInfo: UserBaseInfo }> =
|
||||
React.memo((props) => {
|
||||
const { userInfo } = props;
|
||||
const { value: bannerColor } = useAsync(async () => {
|
||||
if (!userInfo.avatar) {
|
||||
return getTextColorHex(userInfo.nickname);
|
||||
}
|
||||
export const UserProfileContainer: React.FC<
|
||||
PropsWithChildren<{ userInfo: UserBaseInfo }>
|
||||
> = React.memo((props) => {
|
||||
const { userInfo } = props;
|
||||
const { value: bannerColor } = useAsync(async () => {
|
||||
if (!userInfo.avatar) {
|
||||
return getTextColorHex(userInfo.nickname);
|
||||
}
|
||||
|
||||
const rgba = await fetchImagePrimaryColor(userInfo.avatar);
|
||||
return `rgba(${rgba.r}, ${rgba.g}, ${rgba.b}, ${rgba.a})`;
|
||||
}, [userInfo.avatar]);
|
||||
return (
|
||||
<div className="relative bg-inherit">
|
||||
<div
|
||||
style={{
|
||||
width: '100%',
|
||||
height: 60,
|
||||
backgroundColor: bannerColor,
|
||||
}}
|
||||
/>
|
||||
|
||||
<div className="absolute p-1 rounded-1/2 -mt-11 ml-3 bg-inherit">
|
||||
<AvatarWithPreview
|
||||
size={80}
|
||||
src={userInfo.avatar}
|
||||
name={userInfo.nickname}
|
||||
/>
|
||||
</div>
|
||||
const rgba = await fetchImagePrimaryColor(userInfo.avatar);
|
||||
return `rgba(${rgba.r}, ${rgba.g}, ${rgba.b}, ${rgba.a})`;
|
||||
}, [userInfo.avatar]);
|
||||
return (
|
||||
<div className="relative bg-inherit">
|
||||
<div
|
||||
style={{
|
||||
width: '100%',
|
||||
height: 60,
|
||||
backgroundColor: bannerColor,
|
||||
}}
|
||||
/>
|
||||
|
||||
<div className="p-2 mt-10">{props.children}</div>
|
||||
<div className="absolute p-1 rounded-1/2 -mt-11 ml-3 bg-inherit">
|
||||
<AvatarWithPreview
|
||||
size={80}
|
||||
src={userInfo.avatar}
|
||||
name={userInfo.nickname}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
<div className="p-2 mt-10">{props.children}</div>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
UserProfileContainer.displayName = 'UserProfileContainer';
|
||||
|
||||
@ -1,15 +1,18 @@
|
||||
import React from 'react';
|
||||
import { Personal } from './Personal';
|
||||
import { Route, Switch, Redirect } from 'react-router-dom';
|
||||
import { Navigate, Route, Routes } from 'react-router-dom';
|
||||
import { Group } from './Group';
|
||||
|
||||
export const MainContent: React.FC = React.memo(() => {
|
||||
return (
|
||||
<Switch>
|
||||
<Route path="/main/personal" component={Personal} />
|
||||
<Route path="/main/group/:groupId" component={Group} />
|
||||
<Redirect to="/main/personal" />
|
||||
</Switch>
|
||||
<Routes>
|
||||
<Route path="/personal/*" element={<Personal />} />
|
||||
<Route path="/group/:groupId/*" element={<Group />} />
|
||||
<Route
|
||||
path="/"
|
||||
element={<Navigate to="/main/personal" replace={true} />}
|
||||
/>
|
||||
</Routes>
|
||||
);
|
||||
});
|
||||
MainContent.displayName = 'MainContent';
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue