mirror of
https://gitee.com/nocobase/nocobase.git
synced 2025-05-07 22:49:26 +08:00
4ee9ccebfb
* refactor: improve message detail navigation * refactor: extract InboxPopup component for better readability * refactor: restructure ActionDrawer to use MobilePopup for improved modularity * feat: enhance MobilePopup and related components for better mobile experience * feat: add onClick handler to PinnedPluginList for better user interaction * fix: update InboxPopup visibility logic and enhance message navigation handling
67 lines
2.2 KiB
TypeScript
67 lines
2.2 KiB
TypeScript
/**
|
|
* This file is part of the NocoBase (R) project.
|
|
* Copyright (c) 2020-2024 NocoBase Co., Ltd.
|
|
* Authors: NocoBase Team.
|
|
*
|
|
* This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
|
|
* For more information, please refer to: https://www.nocobase.com/agreement.
|
|
*/
|
|
|
|
import { observer } from '@formily/reactive-react';
|
|
import { css, useCurrentUserContext } from '@nocobase/client';
|
|
import {
|
|
MobilePageContentContainer,
|
|
MobilePageHeader,
|
|
MobilePageNavigationBar,
|
|
MobilePageProvider,
|
|
} from '@nocobase/plugin-mobile/client';
|
|
import { Tabs } from 'antd-mobile';
|
|
import React, { useEffect } from 'react';
|
|
import { useLocalTranslation } from '../../../locale';
|
|
import { ChannelStatus, channelStatusFilterObs, fetchChannels, userIdObs } from '../../observables';
|
|
import { ChannelList } from './ChannelList';
|
|
const MobileMessageBoxInner = (props: { displayNavigationBar?: boolean; onClickItem?: (item: any) => void; }) => {
|
|
const { t } = useLocalTranslation();
|
|
const ctx = useCurrentUserContext();
|
|
const currUserId = ctx.data?.data?.id;
|
|
useEffect(() => {
|
|
userIdObs.value = currUserId ?? null;
|
|
}, [currUserId]);
|
|
useEffect(() => {
|
|
fetchChannels({});
|
|
}, []);
|
|
return (
|
|
<MobilePageProvider displayNavigationBar={props.displayNavigationBar}>
|
|
<MobilePageHeader>
|
|
<MobilePageNavigationBar />
|
|
<Tabs
|
|
className={css({
|
|
'.adm-tabs-header': {
|
|
borderBottomWidth: 0,
|
|
},
|
|
'.adm-tabs-tab': {
|
|
height: 49,
|
|
padding: '10px 0 10px',
|
|
},
|
|
})}
|
|
activeKey={channelStatusFilterObs.value}
|
|
activeLineMode={'auto'}
|
|
onChange={(key: ChannelStatus) => {
|
|
channelStatusFilterObs.value = key;
|
|
fetchChannels({});
|
|
}}
|
|
>
|
|
<Tabs.Tab title={t('All')} key="all" />
|
|
<Tabs.Tab title={t('Unread')} key="unread" />
|
|
<Tabs.Tab title={t('Read')} key="read" />
|
|
</Tabs>
|
|
</MobilePageHeader>
|
|
<MobilePageContentContainer>
|
|
<ChannelList onClickItem={props.onClickItem} />
|
|
</MobilePageContentContainer>
|
|
</MobilePageProvider>
|
|
);
|
|
};
|
|
|
|
export const MobileChannelPage = observer(MobileMessageBoxInner, { displayName: 'MobileChannelPage' });
|