new

src/pages/rules/components/CopyRule/comp/RuleCheckCard.tsx

@@ -0,0 +1,88 @@
+import { CheckCard, ProCard } from '@ant-design/pro-components';
+import { useRequest } from '@umijs/max';
+import { Col, Row, Spin } from 'antd';
+import { useContext, useState } from 'react';
+import { getRuleList } from '@/services/api';
+import { $t } from '@/utils/i18n';
+import { RuleCardBodyInfo } from '../../RuleCardBody';
+import { MultiCopyPopupContext } from '../Multi‌CopyPopup';
+
+type RuleCheckCardProps = {
+  dataSourceId: string | number;
+  onChange?: (id: string | number) => void;
+};
+const RuleCheckCard = ({ dataSourceId }: RuleCheckCardProps) => {
+  const [ruleList, setRuleList] = useState<API.RuleListItem[]>([]);
+
+  const { ruleMeta, currentRuleType, setSelectRules } = useContext(
+    MultiCopyPopupContext,
+  );
+
+  const { loading } = useRequest(
+    () =>
+      getRuleList({
+        type: currentRuleType,
+        dataSourceId,
+      }),
+    {
+      // manual: true,
+      refreshDeps: [dataSourceId, currentRuleType],
+      onSuccess: ({ data = [] }: { data: API.RuleListItem[] }) => {
+        setRuleList(data);
+        setSelectRules(data);
+      },
+      onError: () => {
+        setRuleList([]);
+      },
+    },
+  );
+
+  if (!dataSourceId) return <div>{$t('pages.clones.step1.tips')}</div>;
+  if (loading) return <Spin />;
+
+  // const
+
+  return (
+    <ProCard
+      title={$t('pages.clones.step1.sourceRules', {
+        count: ruleList?.length,
+        ruleType: ruleMeta?.title || '-',
+      })}
+      collapsible
+      defaultCollapsed
+      className="clone-rule-card"
+    >
+      <CheckCard.Group
+        multiple
+        onChange={(value) => {
+          if (Array.isArray(value)) {
+            const selectedRules = value.map((item) =>
+              ruleList.find((rule) => rule.id === item),
+            ) as API.RuleListItem[];
+            setSelectRules(selectedRules);
+          }
+        }}
+        className="w-100"
+        defaultValue={ruleList.map((item) => item.id)}
+      >
+        <Row gutter={12} style={{ maxHeight: '45vh', overflowY: 'auto' }}>
+          {ruleList.map((rule) => (
+            <Col span={8} key={rule.id}>
+              <CheckCard
+                title={$t('pages.rules.ruleName')}
+                extra={rule.name || 'N/A'}
+                value={rule.id}
+                description={
+                  <RuleCardBodyInfo ruleMeta={ruleMeta} rule={rule} />
+                }
+                className="w-100"
+              />
+            </Col>
+          ))}
+        </Row>
+      </CheckCard.Group>
+    </ProCard>
+  );
+};
+
+export default RuleCheckCard;