add onSelect

dashboard/src/components/channel/ChannelPicker.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { Button, Modal } from "antd";
 
 import ChannelPickerTable from "./ChannelPickerTable";
@@ -6,13 +6,28 @@ import { IChannel } from "./Channel";
 import { ArticleType } from "../article/Article";
 
 interface IWidget {
+  trigger?: React.ReactNode;
   type?: ArticleType | "editable";
   articleId?: string;
   multiSelect?: boolean;
+  open?: boolean;
+  onClose?: Function;
+  onSelect?: Function;
 }
-const ChannelPickerWidget = ({ type, articleId, multiSelect }: IWidget) => {
-  const [isModalOpen, setIsModalOpen] = useState(false);
+const ChannelPickerWidget = ({
+  trigger,
+  type,
+  articleId,
+  multiSelect,
+  open = false,
+  onClose,
+  onSelect,
+}: IWidget) => {
+  const [isModalOpen, setIsModalOpen] = useState(open);
 
+  useEffect(() => {
+    setIsModalOpen(open);
+  }, [open]);
   const showModal = () => {
     setIsModalOpen(true);
   };
@@ -27,9 +42,7 @@ const ChannelPickerWidget = ({ type, articleId, multiSelect }: IWidget) => {
 
   return (
     <>
-      <Button type="primary" onClick={showModal}>
-        Select channel
-      </Button>
+      <span onClick={showModal}>{trigger}</span>
       <Modal
         width={"80%"}
         title="选择版本风格"
@@ -40,10 +53,16 @@ const ChannelPickerWidget = ({ type, articleId, multiSelect }: IWidget) => {
         <ChannelPickerTable
           type={type}
           articleId={articleId}
-          multiSelect={multiSelect}
-          onSelect={(e: IChannel) => {
-            console.log(e);
+          multiSelect={true}
+          onSelect={(channels: IChannel[]) => {
+            console.log(channels);
             handleCancel();
+            if (typeof onClose !== "undefined") {
+              onClose();
+            }
+            if (typeof onSelect !== "undefined") {
+              onSelect(channels);
+            }
           }}
         />
       </Modal>