copyto 用useState触发

dashboard/src/components/channel/ChannelPickerTable.tsx

@@ -58,11 +58,12 @@ const ChannelPickerTableWidget = ({
   onSelect,
   reload = false,
 }: IWidget) => {
-  console.log("selectedKeys", selectedKeys);
   const intl = useIntl();
   const [selectedRowKeys, setSelectedRowKeys] =
     useState<React.Key[]>(selectedKeys);
   const [showCheckBox, setShowCheckBox] = useState<boolean>(false);
+  const [copyChannel, setCopyChannel] = useState<IChannel>();
+  const [copyOpen, setCopyOpen] = useState<boolean>(false);
   const user = useAppSelector(_currentUser);
   const ref = useRef<ActionType>();
 
@@ -73,304 +74,304 @@ const ChannelPickerTableWidget = ({
   }, [reload]);
 
   return (
-    <ProList<IItem>
-      actionRef={ref}
-      rowSelection={
-        showCheckBox
-          ? {
-              // 自定义选择项参考: https://ant.design/components/table-cn/#components-table-demo-row-selection-custom
-              // 注释该行则默认不显示下拉选项
-              alwaysShowAlert: true,
-              selectedRowKeys: selectedRowKeys,
-              onChange: (selectedRowKeys: React.Key[]) => {
-                setSelectedRowKeys(selectedRowKeys);
-              },
-              selections: [Table.SELECTION_ALL, Table.SELECTION_INVERT],
-            }
-          : undefined
-      }
-      tableAlertRender={
-        showCheckBox
-          ? ({ selectedRowKeys, selectedRows, onCleanSelected }) => {
-              console.log(selectedRowKeys);
-              return (
-                <Space>
-                  {intl.formatMessage({ id: "buttons.selected" })}
-                  <Badge color="geekblue" count={selectedRowKeys.length} />
-                  <Link onClick={onCleanSelected}>
-                    {intl.formatMessage({ id: "buttons.empty" })}
-                  </Link>
-                </Space>
-              );
-            }
-          : undefined
-      }
-      tableAlertOptionRender={
-        showCheckBox
-          ? ({ selectedRowKeys, selectedRows, onCleanSelected }) => {
-              return (
-                <Space>
-                  <Link
-                    onClick={() => {
-                      console.log("select", selectedRowKeys);
-                      if (typeof onSelect !== "undefined") {
-                        onSelect(
-                          selectedRows.map((item) => {
-                            return {
-                              id: item.uid,
-                              name: item.title,
-                            };
-                          })
-                        );
+    <>
+      <ProList<IItem>
+        actionRef={ref}
+        rowSelection={
+          showCheckBox
+            ? {
+                // 自定义选择项参考: https://ant.design/components/table-cn/#components-table-demo-row-selection-custom
+                // 注释该行则默认不显示下拉选项
+                alwaysShowAlert: true,
+                selectedRowKeys: selectedRowKeys,
+                onChange: (selectedRowKeys: React.Key[]) => {
+                  setSelectedRowKeys(selectedRowKeys);
+                },
+                selections: [Table.SELECTION_ALL, Table.SELECTION_INVERT],
+              }
+            : undefined
+        }
+        tableAlertRender={
+          showCheckBox
+            ? ({ selectedRowKeys, selectedRows, onCleanSelected }) => {
+                return (
+                  <Space>
+                    {intl.formatMessage({ id: "buttons.selected" })}
+                    <Badge color="geekblue" count={selectedRowKeys.length} />
+                    <Link onClick={onCleanSelected}>
+                      {intl.formatMessage({ id: "buttons.empty" })}
+                    </Link>
+                  </Space>
+                );
+              }
+            : undefined
+        }
+        tableAlertOptionRender={
+          showCheckBox
+            ? ({ selectedRowKeys, selectedRows, onCleanSelected }) => {
+                return (
+                  <Space>
+                    <Link
+                      onClick={() => {
+                        if (typeof onSelect !== "undefined") {
+                          onSelect(
+                            selectedRows.map((item) => {
+                              return {
+                                id: item.uid,
+                                name: item.title,
+                              };
+                            })
+                          );
+                          setShowCheckBox(false);
+                          ref.current?.reload();
+                        }
+                      }}
+                    >
+                      {intl.formatMessage({
+                        id: "buttons.ok",
+                      })}
+                    </Link>
+                    <Link
+                      type="danger"
+                      onClick={() => {
                         setShowCheckBox(false);
-                        ref.current?.reload();
-                      }
-                    }}
-                  >
-                    {intl.formatMessage({
-                      id: "buttons.ok",
-                    })}
-                  </Link>
-                  <Link
-                    type="danger"
-                    onClick={() => {
-                      setShowCheckBox(false);
-                    }}
-                  >
-                    {intl.formatMessage({
-                      id: "buttons.cancel",
-                    })}
-                  </Link>
-                </Space>
-              );
-            }
-          : undefined
-      }
-      request={async (params = {}, sorter, filter) => {
-        console.log(params, sorter, filter);
-        const sentElement = document.querySelectorAll(".pcd_sent");
-        let sentList: string[] = [];
-        for (let index = 0; index < sentElement.length; index++) {
-          const element = sentElement[index];
-          const id = element.id.split("_")[1];
-          sentList.push(id);
+                      }}
+                    >
+                      {intl.formatMessage({
+                        id: "buttons.cancel",
+                      })}
+                    </Link>
+                  </Space>
+                );
+              }
+            : undefined
         }
-        console.log("sentList", sentList);
-        const res = await post<IProgressRequest, IApiResponseChannelList>(
-          `/v2/channel-progress`,
-          {
-            sentence: sentList,
+        request={async (params = {}, sorter, filter) => {
+          console.log(params, sorter, filter);
+          const sentElement = document.querySelectorAll(".pcd_sent");
+          let sentList: string[] = [];
+          for (let index = 0; index < sentElement.length; index++) {
+            const element = sentElement[index];
+            const id = element.id.split("_")[1];
+            sentList.push(id);
           }
-        );
-        console.log("progress data", res.data.rows);
-        const items: IItem[] = res.data.rows
-          .filter((value) => value.name.substring(0, 4) !== "_Sys")
-          .map((item, id) => {
-            const date = new Date(item.created_at);
-            let all: number = 0;
-            let finished: number = 0;
-            item.final?.forEach((value) => {
-              all += value[0];
-              finished += value[1] ? value[0] : 0;
+          const res = await post<IProgressRequest, IApiResponseChannelList>(
+            `/v2/channel-progress`,
+            {
+              sentence: sentList,
+            }
+          );
+          console.log("progress data", res.data.rows);
+          const items: IItem[] = res.data.rows
+            .filter((value) => value.name.substring(0, 4) !== "_Sys")
+            .map((item, id) => {
+              const date = new Date(item.created_at);
+              let all: number = 0;
+              let finished: number = 0;
+              item.final?.forEach((value) => {
+                all += value[0];
+                finished += value[1] ? value[0] : 0;
+              });
+              const progress = finished / all;
+              return {
+                id: id,
+                uid: item.uid,
+                title: item.name,
+                summary: item.summary,
+                studio: item.studio,
+                shareType: "my",
+                role: item.role,
+                type: item.type,
+                publicity: item.status,
+                createdAt: date.getTime(),
+                final: item.final,
+                progress: progress,
+              };
             });
-            const progress = finished / all;
-            return {
-              id: id,
-              uid: item.uid,
-              title: item.name,
-              summary: item.summary,
-              studio: item.studio,
-              shareType: "my",
-              role: item.role,
-              type: item.type,
-              publicity: item.status,
-              createdAt: date.getTime(),
-              final: item.final,
-              progress: progress,
-            };
-          });
-        //当前被选择的
-        const currChannel = items.filter((value) =>
-          selectedRowKeys.includes(value.uid)
-        );
-        let show = selectedRowKeys;
-        //有进度的
-        const progressing = items.filter(
-          (value) => value.progress > 0 && !show.includes(value.uid)
-        );
-        show = [...show, ...progressing.map((item) => item.uid)];
-        //我自己的
-        const myChannel = items.filter(
-          (value) => value.role === "owner" && !show.includes(value.uid)
-        );
-        show = [...show, ...myChannel.map((item) => item.uid)];
-        //其他的
-        const others = items.filter(
-          (value) => !show.includes(value.uid) && value.role !== "member"
-        );
-        console.log("user:", user);
-        setSelectedRowKeys(selectedRowKeys);
-        const channelData = [
-          ...currChannel,
-          ...progressing,
-          ...myChannel,
-          ...others,
-        ];
-        console.log("channel list ", channelData);
-        return {
-          total: res.data.count,
-          succcess: true,
-          data: channelData,
-        };
-      }}
-      rowKey="uid"
-      bordered
-      options={false}
-      search={{
-        filterType: "light",
-      }}
-      toolBarRender={() => [
-        multiSelect ? (
+          //当前被选择的
+          const currChannel = items.filter((value) =>
+            selectedRowKeys.includes(value.uid)
+          );
+          let show = selectedRowKeys;
+          //有进度的
+          const progressing = items.filter(
+            (value) => value.progress > 0 && !show.includes(value.uid)
+          );
+          show = [...show, ...progressing.map((item) => item.uid)];
+          //我自己的
+          const myChannel = items.filter(
+            (value) => value.role === "owner" && !show.includes(value.uid)
+          );
+          show = [...show, ...myChannel.map((item) => item.uid)];
+          //其他的
+          const others = items.filter(
+            (value) => !show.includes(value.uid) && value.role !== "member"
+          );
+          setSelectedRowKeys(selectedRowKeys);
+          const channelData = [
+            ...currChannel,
+            ...progressing,
+            ...myChannel,
+            ...others,
+          ];
+          return {
+            total: res.data.count,
+            succcess: true,
+            data: channelData,
+          };
+        }}
+        rowKey="uid"
+        bordered
+        options={false}
+        search={{
+          filterType: "light",
+        }}
+        toolBarRender={() => [
+          multiSelect ? (
+            <Button
+              onClick={() => {
+                setShowCheckBox(true);
+              }}
+            >
+              选择
+            </Button>
+          ) : undefined,
           <Button
+            type="link"
             onClick={() => {
-              setShowCheckBox(true);
-              console.log("user:", user);
+              ref.current?.reload();
             }}
-          >
-            选择
-          </Button>
-        ) : undefined,
-        <Button
-          type="link"
-          onClick={() => {
-            ref.current?.reload();
-          }}
-          icon={<ReloadOutlined />}
-        />,
-      ]}
-      metas={{
-        title: {
-          render(dom, entity, index, action, schema) {
-            let pIcon = <></>;
-            switch (entity.publicity) {
-              case 10:
-                pIcon = <LockIcon />;
-                break;
-              case 30:
-                pIcon = <GlobalOutlined />;
-                break;
-            }
+            icon={<ReloadOutlined />}
+          />,
+        ]}
+        metas={{
+          title: {
+            render(dom, entity, index, action, schema) {
+              let pIcon = <></>;
+              switch (entity.publicity) {
+                case 10:
+                  pIcon = <LockIcon />;
+                  break;
+                case 30:
+                  pIcon = <GlobalOutlined />;
+                  break;
+              }
 
-            return (
-              <div
-                key={index}
-                style={{
-                  width: "100%",
-                  borderRadius: 5,
-                  padding: "0 5px",
-                  background:
-                    selectedKeys.includes(entity.uid) && !showCheckBox
-                      ? "linear-gradient(to left, rgb(109 245 135), rgba(0, 0, 0, 0))"
-                      : undefined,
-                }}
-              >
-                <div key="info" style={{ overflowX: "clip", display: "flex" }}>
-                  <Space>
-                    {pIcon}
-                    {entity.role !== "member" ? <EditOutlined /> : undefined}
-                  </Space>
-                  <Button
-                    type="link"
-                    onClick={() => {
-                      if (typeof onSelect !== "undefined") {
-                        const e: IChannel = {
-                          name: entity.title,
-                          id: entity.uid,
-                        };
-                        onSelect([e]);
-                      }
-                    }}
+              return (
+                <div
+                  key={index}
+                  style={{
+                    width: "100%",
+                    borderRadius: 5,
+                    padding: "0 5px",
+                    background:
+                      selectedKeys.includes(entity.uid) && !showCheckBox
+                        ? "linear-gradient(to left, rgb(63 255 165 / 54%), rgba(0, 0, 0, 0))"
+                        : undefined,
+                  }}
+                >
+                  <div
+                    key="info"
+                    style={{ overflowX: "clip", display: "flex" }}
                   >
                     <Space>
-                      <StudioName data={entity.studio} showName={false} />
-                      {entity.title}
+                      {pIcon}
+                      {entity.role !== "member" ? <EditOutlined /> : undefined}
                     </Space>
-                  </Button>
-                </div>
-                <div key="progress">
-                  <ProgressSvg data={entity.final} width={200} />
+                    <Button
+                      type="link"
+                      onClick={() => {
+                        if (typeof onSelect !== "undefined") {
+                          const e: IChannel = {
+                            name: entity.title,
+                            id: entity.uid,
+                          };
+                          onSelect([e]);
+                        }
+                      }}
+                    >
+                      <Space>
+                        <StudioName data={entity.studio} showName={false} />
+                        {entity.title}
+                      </Space>
+                    </Button>
+                  </div>
+                  <div key="progress">
+                    <ProgressSvg data={entity.final} width={200} />
+                  </div>
                 </div>
-              </div>
-            );
+              );
+            },
+            search: false,
           },
-          search: false,
-        },
-        actions: {
-          render: (dom, entity, index, action, schema) => {
-            return (
-              <Dropdown
-                key={index}
-                trigger={["click"]}
-                menu={{
-                  items: [
-                    {
-                      key: "copy_to",
-                      label: (
-                        <CopyToModal
-                          trigger={intl.formatMessage({
-                            id: "buttons.copy.to",
-                          })}
-                          channel={{
+          actions: {
+            render: (dom, entity, index, action, schema) => {
+              return (
+                <Dropdown
+                  key={index}
+                  trigger={["click"]}
+                  menu={{
+                    items: [
+                      {
+                        key: "copy-to",
+                        label: intl.formatMessage({
+                          id: "buttons.copy.to",
+                        }),
+                        icon: <CopyOutlined />,
+                      },
+                    ],
+                    onClick: (e) => {
+                      switch (e.key) {
+                        case "copy-to":
+                          setCopyChannel({
                             id: entity.uid,
                             name: entity.title,
                             type: entity.type,
-                          }}
-                        />
-                      ),
-                      icon: <CopyOutlined />,
-                    },
-                  ],
-                  onClick: (e) => {
-                    console.log("click ", e);
-                    switch (e.key) {
-                      case "copy_to":
-                        break;
+                          });
+                          setCopyOpen(true);
+                          break;
 
-                      default:
-                        break;
-                    }
-                  },
-                }}
-                placement="bottomRight"
-              >
-                <Button
-                  type="link"
-                  size="small"
-                  icon={<MoreOutlined />}
-                ></Button>
-              </Dropdown>
-            );
-          },
-        },
-        status: {
-          // 自己扩展的字段，主要用于筛选，不在列表中显示
-          title: "版本筛选",
-          valueType: "select",
-          valueEnum: {
-            all: { text: "全部", status: "Default" },
-            my: {
-              text: "我的",
-            },
-            closed: {
-              text: "协作",
+                        default:
+                          break;
+                      }
+                    },
+                  }}
+                  placement="bottomRight"
+                >
+                  <Button
+                    type="link"
+                    size="small"
+                    icon={<MoreOutlined />}
+                  ></Button>
+                </Dropdown>
+              );
             },
-            processing: {
-              text: "社区公开",
+          },
+          status: {
+            // 自己扩展的字段，主要用于筛选，不在列表中显示
+            title: "版本筛选",
+            valueType: "select",
+            valueEnum: {
+              all: { text: "全部", status: "Default" },
+              my: {
+                text: "我的",
+              },
+              closed: {
+                text: "协作",
+              },
+              processing: {
+                text: "社区公开",
+              },
             },
           },
-        },
-      }}
-    />
+        }}
+      />
+      <CopyToModal
+        channel={copyChannel}
+        open={copyOpen}
+        onClose={() => setCopyOpen(false)}
+      />
+    </>
   );
 };
 

dashboard/src/components/channel/CopyToModal.tsx

@@ -1,28 +1,38 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { Modal } from "antd";
 
 import CopyToStep from "./CopyToStep";
 import { IChannel } from "./Channel";
 
 interface IWidget {
-  trigger: JSX.Element | string;
+  trigger?: JSX.Element | string;
   channel?: IChannel;
+  open?: boolean;
+  onClose?: Function;
 }
-const CopyToModalWidget = ({ trigger, channel }: IWidget) => {
-  const [isModalOpen, setIsModalOpen] = useState(false);
+const CopyToModalWidget = ({ trigger, channel, open, onClose }: IWidget) => {
+  const [isModalOpen, setIsModalOpen] = useState(open);
   const [initStep, setInitStep] = useState(0);
 
+  useEffect(() => setIsModalOpen(open), [open]);
+
   const showModal = () => {
     setIsModalOpen(true);
     setInitStep(0);
   };
 
-  const handleOk = () => {
+  const modalClose = () => {
     setIsModalOpen(false);
+    if (typeof onClose !== "undefined") {
+      onClose();
+    }
+  };
+  const handleOk = () => {
+    modalClose();
   };
 
   const handleCancel = () => {
-    setIsModalOpen(false);
+    modalClose();
   };
 
   return (