From 487c8cd93a5ec03487532e748e859129fa0202e0 Mon Sep 17 00:00:00 2001 From: moonrailgun Date: Fri, 15 Apr 2022 20:34:09 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0GroupPanelSelector?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/design/README.md | 2 +- shared/components/FastForm/index.tsx | 2 +- shared/index.tsx | 3 +- shared/redux/hooks/useGroup.ts | 17 ++++++-- web/src/components/GroupPanelItem.tsx | 4 ++ web/src/components/GroupPanelSelector.tsx | 41 +++++++++++++++++++ .../components/Panel/group/PluginPanel.tsx | 4 +- web/src/components/Panel/group/TextPanel.tsx | 4 +- web/src/components/Panel/group/Wrapper.tsx | 4 +- .../modals/GroupPanel/ModifyGroupPanel.tsx | 4 +- web/src/plugin/component/index.tsx | 1 + web/src/routes/Main/Content/Group/Panel.tsx | 4 +- web/src/routes/Main/Content/Group/utils.ts | 2 +- 13 files changed, 74 insertions(+), 18 deletions(-) create mode 100644 web/src/components/GroupPanelSelector.tsx diff --git a/packages/design/README.md b/packages/design/README.md index 408921c5..8da82809 100644 --- a/packages/design/README.md +++ b/packages/design/README.md @@ -1,3 +1,3 @@ Tailchat 的前端组件 -能进这个包的原则是该组件是一个业务无关的组件 +能进这个包的原则是该组件是一个业务无关的组件(无环境依赖) diff --git a/shared/components/FastForm/index.tsx b/shared/components/FastForm/index.tsx index ddad647d..2a273caa 100644 --- a/shared/components/FastForm/index.tsx +++ b/shared/components/FastForm/index.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useLayoutEffect, useMemo, useState } from 'react'; +import React, { useLayoutEffect, useMemo, useState } from 'react'; import { useFormik } from 'formik'; import _isNil from 'lodash/isNil'; import _fromPairs from 'lodash/fromPairs'; diff --git a/shared/index.tsx b/shared/index.tsx index 167896ce..19efff47 100644 --- a/shared/index.tsx +++ b/shared/index.tsx @@ -163,7 +163,8 @@ export { useGroupInfo, useGroupMemberIds, useGroupMemberInfos, - useGroupPanel, + useGroupPanels, + useGroupPanelInfo, useIsGroupOwner, useGroupUnread, useGroupTextPanelUnread, diff --git a/shared/redux/hooks/useGroup.ts b/shared/redux/hooks/useGroup.ts index 34daf1ea..a5e55a70 100644 --- a/shared/redux/hooks/useGroup.ts +++ b/shared/redux/hooks/useGroup.ts @@ -34,18 +34,27 @@ export function useGroupMemberInfos(groupId: string): UserBaseInfo[] { return userInfos; } +/** + * 获取群组面板列表 + */ +export function useGroupPanels(groupId: string): GroupPanel[] { + const groupInfo = useGroupInfo(groupId); + + return useMemo(() => groupInfo?.panels ?? [], [groupId]); +} + /** * 获取群组面板信息 */ -export function useGroupPanel( +export function useGroupPanelInfo( groupId: string, panelId: string ): GroupPanel | null { - const groupInfo = useGroupInfo(groupId); + const panels = useGroupPanels(groupId); return useMemo( - () => groupInfo?.panels.find((p) => p.id === panelId) ?? null, - [groupInfo, panelId] + () => panels.find((p) => p.id === panelId) ?? null, + [groupId, panelId] ); } diff --git a/web/src/components/GroupPanelItem.tsx b/web/src/components/GroupPanelItem.tsx index 1e23b515..2cb8dc72 100644 --- a/web/src/components/GroupPanelItem.tsx +++ b/web/src/components/GroupPanelItem.tsx @@ -4,6 +4,10 @@ import React from 'react'; import { useLocation } from 'react-router'; import { Link } from 'react-router-dom'; +/** + * 面板项 + * 用于侧边栏 + */ export const GroupPanelItem: React.FC<{ name: string; icon: React.ReactNode; diff --git a/web/src/components/GroupPanelSelector.tsx b/web/src/components/GroupPanelSelector.tsx new file mode 100644 index 00000000..9e5a8ba4 --- /dev/null +++ b/web/src/components/GroupPanelSelector.tsx @@ -0,0 +1,41 @@ +import React, { useMemo } from 'react'; +import { Select } from 'antd'; +import { GroupPanelType, useGroupPanels } from 'tailchat-shared'; +import { useGroupIdContext } from '@/context/GroupIdContext'; + +const { Option } = Select; + +interface GroupPanelSelectorProps { + value: string; + onChange: (value: string) => void; + groupId?: string; + panelType?: GroupPanelType; +} + +/** + * 群组面板选择器 + */ +export const GroupPanelSelector: React.FC = React.memo( + (props) => { + const contextGroupId = useGroupIdContext(); + const groupId = props.groupId ?? contextGroupId; + const panelType = props.panelType ?? GroupPanelType.TEXT; + const panels = useGroupPanels(groupId); + + const filteredPanels = useMemo( + () => panels.filter((panel) => panel.type === panelType), + [panels, panelType] + ); + + return ( + + ); + } +); +GroupPanelSelector.displayName = 'GroupPanelSelector'; diff --git a/web/src/components/Panel/group/PluginPanel.tsx b/web/src/components/Panel/group/PluginPanel.tsx index 38b9374a..94727f95 100644 --- a/web/src/components/Panel/group/PluginPanel.tsx +++ b/web/src/components/Panel/group/PluginPanel.tsx @@ -1,7 +1,7 @@ import { findPluginPanelInfoByName } from '@/utils/plugin-helper'; import { Alert } from 'antd'; import React, { useMemo } from 'react'; -import { isValidStr, t, useGroupPanel } from 'tailchat-shared'; +import { isValidStr, t, useGroupPanelInfo } from 'tailchat-shared'; import { GroupPanelWrapper } from './Wrapper'; interface GroupPluginPanelProps { @@ -14,7 +14,7 @@ interface GroupPluginPanelProps { */ export const GroupPluginPanel: React.FC = React.memo( (props) => { - const panelInfo = useGroupPanel(props.groupId, props.panelId); + const panelInfo = useGroupPanelInfo(props.groupId, props.panelId); if (!panelInfo) { return ( diff --git a/web/src/components/Panel/group/TextPanel.tsx b/web/src/components/Panel/group/TextPanel.tsx index 4fefc10f..02d7e04e 100644 --- a/web/src/components/Panel/group/TextPanel.tsx +++ b/web/src/components/Panel/group/TextPanel.tsx @@ -1,7 +1,7 @@ import { ChatBox } from '@/components/ChatBox'; import { ChatInputMentionsContextProvider } from '@/components/ChatBox/ChatInputBox/context'; import React from 'react'; -import { useGroupPanel, useGroupMemberInfos } from 'tailchat-shared'; +import { useGroupPanelInfo, useGroupMemberInfos } from 'tailchat-shared'; import { GroupPanelWrapper } from './Wrapper'; interface TextPanelProps { @@ -11,7 +11,7 @@ interface TextPanelProps { export const TextPanel: React.FC = React.memo( ({ groupId, panelId }) => { const groupMembers = useGroupMemberInfos(groupId); - const panelInfo = useGroupPanel(groupId, panelId); + const panelInfo = useGroupPanelInfo(groupId, panelId); if (panelInfo === undefined) { return null; } diff --git a/web/src/components/Panel/group/Wrapper.tsx b/web/src/components/Panel/group/Wrapper.tsx index a9606bf0..f307488e 100644 --- a/web/src/components/Panel/group/Wrapper.tsx +++ b/web/src/components/Panel/group/Wrapper.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { t, useGroupPanel } from 'tailchat-shared'; +import { t, useGroupPanelInfo } from 'tailchat-shared'; import _isNil from 'lodash/isNil'; import { MembersPanel } from './MembersPanel'; import { CommonPanelWrapper } from '../common/Wrapper'; @@ -21,7 +21,7 @@ interface GroupPanelWrapperProps { } export const GroupPanelWrapper: React.FC = React.memo( (props) => { - const panelInfo = useGroupPanel(props.groupId, props.panelId); + const panelInfo = useGroupPanelInfo(props.groupId, props.panelId); if (_isNil(panelInfo)) { return null; diff --git a/web/src/components/modals/GroupPanel/ModifyGroupPanel.tsx b/web/src/components/modals/GroupPanel/ModifyGroupPanel.tsx index 400eafeb..d7fa01c6 100644 --- a/web/src/components/modals/GroupPanel/ModifyGroupPanel.tsx +++ b/web/src/components/modals/GroupPanel/ModifyGroupPanel.tsx @@ -7,7 +7,7 @@ import { createFastFormSchema, fieldSchema, showToasts, - useGroupPanel, + useGroupPanelInfo, } from 'tailchat-shared'; import { ModalWrapper } from '../../Modal'; import { WebFastForm } from '../../WebFastForm'; @@ -32,7 +32,7 @@ export const ModalModifyGroupPanel: React.FC<{ groupPanelId: string; onSuccess?: () => void; }> = React.memo((props) => { - const groupPanelInfo = useGroupPanel(props.groupId, props.groupPanelId); + const groupPanelInfo = useGroupPanelInfo(props.groupId, props.groupPanelId); const [currentValues, setValues] = useState>({}); const [, handleSubmit] = useAsyncRequest( diff --git a/web/src/plugin/component/index.tsx b/web/src/plugin/component/index.tsx index c6e4b23d..fb7fbdf9 100644 --- a/web/src/plugin/component/index.tsx +++ b/web/src/plugin/component/index.tsx @@ -23,3 +23,4 @@ export { } from '@/components/FullModal/Field'; export { Loading } from '@/components/Loading'; export { SidebarView } from '@/components/SidebarView'; +export { GroupPanelSelector } from '@/components/GroupPanelSelector'; diff --git a/web/src/routes/Main/Content/Group/Panel.tsx b/web/src/routes/Main/Content/Group/Panel.tsx index a71c9822..0a80058f 100644 --- a/web/src/routes/Main/Content/Group/Panel.tsx +++ b/web/src/routes/Main/Content/Group/Panel.tsx @@ -7,7 +7,7 @@ import { GroupPanelType, t, useGroupInfo, - useGroupPanel, + useGroupPanelInfo, } from 'tailchat-shared'; import { useGroupPanelParams } from './utils'; @@ -19,7 +19,7 @@ export const GroupPanelRender: React.FC = React.memo( (props) => { const { groupId, panelId } = props; const groupInfo = useGroupInfo(groupId); - const panelInfo = useGroupPanel(groupId, panelId); + const panelInfo = useGroupPanelInfo(groupId, panelId); if (groupInfo === null) { return ( diff --git a/web/src/routes/Main/Content/Group/utils.ts b/web/src/routes/Main/Content/Group/utils.ts index 63c08892..617d9070 100644 --- a/web/src/routes/Main/Content/Group/utils.ts +++ b/web/src/routes/Main/Content/Group/utils.ts @@ -1,5 +1,5 @@ import { useParams } from 'react-router'; -import { GroupPanel, useGroupPanel } from 'tailchat-shared'; +import { GroupPanel, useGroupPanelInfo } from 'tailchat-shared'; /** * 获取群组面板的参数