+
TagCustomStagingArea
+} + +export default TagCustomStagingArea diff --git a/src/components/Forms/SearchSelectForm/index.tsx b/src/components/Forms/SearchSelectForm/index.tsx index 1236512494..19f1a9f281 100644 --- a/src/components/Forms/SearchSelectForm/index.tsx +++ b/src/components/Forms/SearchSelectForm/index.tsx @@ -5,7 +5,10 @@ import SearchingArea, { SearchType, SelectNode, } from '~/components/SearchSelect/SearchingArea' -import StagingArea, { StagingNode } from '~/components/SearchSelect/StagingArea' +import StagingArea, { + CustomStagingAreaProps, + StagingNode, +} from '~/components/SearchSelect/StagingArea' import { TextId } from '~/common/enums' @@ -49,11 +52,14 @@ export type SearchSelectFormProps = { createTag?: boolean inviteEmail?: boolean + + CustomStagingArea?: (props: CustomStagingAreaProps) => JSX.Element } const SearchSelectForm = ({ title, hint, + CustomStagingArea, headerLeftButton, headerRightButtonText, closeDialog, @@ -139,6 +145,7 @@ const SearchSelectForm = ({ hint={hint} inStagingArea={inStagingArea} draggable={draggable} + CustomStagingArea={CustomStagingArea} /> > ) diff --git a/src/components/SearchSelect/StagingArea/index.tsx b/src/components/SearchSelect/StagingArea/index.tsx index 4cbd1b612b..0c3d3755ee 100644 --- a/src/components/SearchSelect/StagingArea/index.tsx +++ b/src/components/SearchSelect/StagingArea/index.tsx @@ -19,7 +19,7 @@ export interface StagingNode { selected: boolean } -interface StagingAreaProps { +interface BaseStagingAreaProps { nodes: StagingNode[] setNodes: (nodes: StagingNode[]) => void @@ -28,6 +28,16 @@ interface StagingAreaProps { draggable?: boolean } +export interface CustomStagingAreaProps { + nodes: StagingNode[] + setNodes: (nodes: StagingNode[]) => void + hint: TextId +} + +type StagingAreaProps = BaseStagingAreaProps & { + CustomStagingArea?: (props: CustomStagingAreaProps) => JSX.Element +} + const DynamicDraggableNodes = dynamic(() => import('./DraggableNodes'), { loading: Spinner, }) @@ -39,6 +49,8 @@ const StagingArea: React.FC
+
TagCustomStagingArea
+import RecommendedTags from './RecommendedTags' +import SelectedTags from './SelectedTags' +import styles from './styles.css' + +const TagCustomStagingArea = ({ + nodes, + setNodes, + hint, +}: CustomStagingAreaProps) => { + const hasTag = nodes.length > 0 + const recommendedTags = [] as any[] + const removeTag = () => { + // + } + const addTag = () => { + // + } + + if (hasTag) { + return ( +此處設定將套用至你所開設的圍爐
+此處設定將套用至你所有參加或追蹤的圍爐
+
-