refactor: remove react and antd warnings (#11527)

9 months ago · e23cbff914
24 changed files with 87 additions and 67 deletions
--- a/src/pages/account/center/components/Applications/index.tsx
+++ b/src/pages/account/center/components/Applications/index.tsx
@ -77,8 +77,10 @@ const Applications: React.FC = () => {
        <List.Item key={item.id}>
          <Card
            hoverable
-            bodyStyle={{
-              paddingBottom: 20,
+            styles={{
+              body: {
+                paddingBottom: 20,
+              },
            }}
            actions={[
              <Tooltip key="download" title="下载">
--- a/src/pages/account/center/index.tsx
+++ b/src/pages/account/center/index.tsx
@ -219,7 +219,7 @@ const Center: React.FC = () => {
      <Row gutter={24}>
        <Col lg={7} md={24}>
          <Card
-            bordered={false}
+            variant="borderless"
            style={{
              marginBottom: 24,
            }}
--- a/src/pages/dashboard/analysis/components/Charts/ChartCard/index.tsx
+++ b/src/pages/dashboard/analysis/components/Charts/ChartCard/index.tsx
@ -1,7 +1,7 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
 import { Card } from 'antd';
 import type { CardProps } from 'antd/es/card';
 import classNames from 'classnames';
+import omit from 'rc-util/lib/omit';
 import React from 'react';
 import useStyles from './index.style';

@ -92,6 +92,7 @@ const ChartCard: React.FC<ChartCardProps> = (props) => {
  };

  const { loading = false, ...rest } = props;
+  const cardProps = omit(rest, ['total', 'contentHeight', 'action']);
  return (
    <Card
      loading={loading}
@ -100,7 +101,7 @@ const ChartCard: React.FC<ChartCardProps> = (props) => {
          padding: '20px 24px 8px 24px',
        },
      }}
-      {...rest}
+      {...cardProps}
    >
      {renderContent()}
    </Card>
--- a/src/pages/dashboard/analysis/components/Charts/MiniProgress/index.tsx
+++ b/src/pages/dashboard/analysis/components/Charts/MiniProgress/index.tsx
@ -4,7 +4,7 @@ export type MiniProgressProps = {
  target: number;
  targetLabel?: string;
  color?: string;
-  strokeWidth?: number;
+  size?: number;
  percent?: number;
  style?: React.CSSProperties;
 };
@ -12,7 +12,7 @@ const MiniProgress: React.FC<MiniProgressProps> = ({
  targetLabel,
  target,
  color = 'rgb(19, 194, 194)',
-  strokeWidth,
+  size,
  percent,
 }) => {
  return (
@ -39,7 +39,7 @@ const MiniProgress: React.FC<MiniProgressProps> = ({
        style={{
          backgroundColor: color || undefined,
          width: percent ? `${percent}%` : undefined,
-          height: strokeWidth || undefined,
+          height: size || undefined,
        }}
      />
    </div>
--- a/src/pages/dashboard/analysis/components/IntroduceRow.tsx
+++ b/src/pages/dashboard/analysis/components/IntroduceRow.tsx
@ -30,7 +30,7 @@ const IntroduceRow = ({
    <Row gutter={24}>
      <Col {...topColResponsiveProps}>
        <ChartCard
-          bordered={false}
+          variant="borderless"
          title="总销售额"
          action={
            <Tooltip title="指标说明">
@ -65,7 +65,7 @@ const IntroduceRow = ({

      <Col {...topColResponsiveProps}>
        <ChartCard
-          bordered={false}
+          variant="borderless"
          loading={loading}
          title="访问量"
          action={
@ -97,7 +97,7 @@ const IntroduceRow = ({
      </Col>
      <Col {...topColResponsiveProps}>
        <ChartCard
-          bordered={false}
+          variant="borderless"
          loading={loading}
          title="支付笔数"
          action={
@ -123,7 +123,7 @@ const IntroduceRow = ({
      <Col {...topColResponsiveProps}>
        <ChartCard
          loading={loading}
-          bordered={false}
+          variant="borderless"
          title="运营活动效果"
          action={
            <Tooltip title="指标说明">
--- a/src/pages/dashboard/analysis/components/OfflineData.tsx
+++ b/src/pages/dashboard/analysis/components/OfflineData.tsx
@ -61,7 +61,7 @@ const OfflineData = ({
    <Card
      loading={loading}
      className={styles.offlineCard}
-      bordered={false}
+      variant="borderless"
      style={{
        marginTop: 32,
      }}
--- a/src/pages/dashboard/analysis/components/TopSearch.tsx
+++ b/src/pages/dashboard/analysis/components/TopSearch.tsx
@ -76,7 +76,7 @@ const TopSearch = ({
  return (
    <Card
      loading={loading}
-      bordered={false}
+      variant="borderless"
      title="线上热门搜索"
      extra={dropdownGroup}
      style={{
--- a/src/pages/dashboard/monitor/index.tsx
+++ b/src/pages/dashboard/monitor/index.tsx
@ -9,7 +9,6 @@ import MonitorMap from './components/Map';
 import { queryTags } from './service';
 import useStyles from './style.style';

-const { Countdown } = Statistic;
 const deadline = Date.now() + 1000 * 60 * 60 * 24 * 2 + 1000 * 30; // Moment is also OK

 const Monitor: FC = () => {
@ -35,7 +34,7 @@ const Monitor: FC = () => {
            marginBottom: 24,
          }}
        >
-          <Card title="活动实时交易情况" bordered={false}>
+          <Card title="活动实时交易情况" variant="borderless">
            <Row>
              <Col md={6} sm={12} xs={24}>
                <Statistic
@ -48,7 +47,8 @@ const Monitor: FC = () => {
                <Statistic title="销售目标完成率" value="92%" />
              </Col>
              <Col md={6} sm={12} xs={24}>
-                <Countdown
+                <Statistic.Timer
+                  type="countdown"
                  title="活动剩余时间"
                  value={deadline}
                  format="HH:mm:ss:SSS"
@ -73,7 +73,7 @@ const Monitor: FC = () => {
            style={{
              marginBottom: 24,
            }}
-            bordered={false}
+            variant="borderless"
          >
            <ActiveChart />
          </Card>
@ -82,10 +82,12 @@ const Monitor: FC = () => {
            style={{
              marginBottom: 24,
            }}
-            bodyStyle={{
-              textAlign: 'center',
+            styles={{
+              body: {
+                textAlign: 'center',
+              },
            }}
-            bordered={false}
+            variant="borderless"
          >
            <Gauge
              height={180}
@ -126,7 +128,7 @@ const Monitor: FC = () => {
            marginBottom: 24,
          }}
        >
-          <Card title="各品类占比" bordered={false}>
+          <Card title="各品类占比" variant="borderless">
            <Row
              style={{
                padding: '16px 0',
@ -156,9 +158,11 @@ const Monitor: FC = () => {
          <Card
            title="热门搜索"
            loading={loading}
-            bordered={false}
-            bodyStyle={{
-              overflow: 'hidden',
+            variant="borderless"
+            styles={{
+              body: {
+                overflow: 'hidden',
+              },
            }}
          >
            <WordCloud
@ -181,11 +185,13 @@ const Monitor: FC = () => {
        >
          <Card
            title="资源剩余"
-            bodyStyle={{
-              textAlign: 'center',
-              fontSize: 0,
+            styles={{
+              body: {
+                textAlign: 'center',
+                fontSize: 0,
+              },
            }}
-            bordered={false}
+            variant="borderless"
          >
            <Liquid height={160} percent={0.35} />
          </Card>
--- a/src/pages/form/advanced-form/index.tsx
+++ b/src/pages/form/advanced-form/index.tsx
@ -190,7 +190,7 @@ const AdvancedForm: FC<Record<string, any>> = () => {
      onFinishFailed={onFinishFailed}
    >
      <PageContainer content="高级表单常见于一次性输入和提交大批量数据的场景。">
-        <Card title="仓库管理" className={styles.card} bordered={false}>
+        <Card title="仓库管理" className={styles.card} variant="borderless">
          <Row gutter={16}>
            <Col lg={6} md={12} sm={24}>
              <ProFormText
@ -363,7 +363,7 @@ const AdvancedForm: FC<Record<string, any>> = () => {
            </Col>
          </Row>
        </Card>
-        <Card title="任务管理" className={styles.card} bordered={false}>
+        <Card title="任务管理" className={styles.card} variant="borderless">
          <Row gutter={16}>
            <Col lg={6} md={12} sm={24}>
              <ProFormText
@ -527,7 +527,7 @@ const AdvancedForm: FC<Record<string, any>> = () => {
            </Col>
          </Row>
        </Card>
-        <Card title="成员管理" bordered={false}>
+        <Card title="成员管理" variant="borderless">
          <ProForm.Item name="members">
            <EditableProTable<TableFormDateType>
              recordCreatorProps={{
--- a/src/pages/form/basic-form/index.tsx
+++ b/src/pages/form/basic-form/index.tsx
@ -28,7 +28,7 @@ const BasicForm: FC<Record<string, any>> = () => {
  };
  return (
    <PageContainer content="表单页用于向用户收集或验证信息，基础表单常见于数据项较少的表单场景。">
-      <Card bordered={false}>
+      <Card variant="borderless">
        <ProForm
          hideRequiredMark
          style={{
--- a/src/pages/form/step-form/index.tsx
+++ b/src/pages/form/step-form/index.tsx
@ -85,7 +85,7 @@ const StepForm: React.FC<Record<string, any>> = () => {
  const formRef = useRef<FormInstance>(null);
  return (
    <PageContainer content="将一个冗长或用户不熟悉的表单任务分成多个步骤，指导用户完成。">
-      <Card bordered={false}>
+      <Card variant="borderless">
        <StepsForm
          current={current}
          onCurrentChange={setCurrent}
--- a/src/pages/list/basic-list/components/OperationModal.tsx
+++ b/src/pages/list/basic-list/components/OperationModal.tsx
@ -40,7 +40,7 @@ const OperationModal: FC<OperationModalProps> = (props) => {
      trigger={children}
      modalProps={{
        onCancel: () => onDone(),
-        destroyOnClose: true,
+        destroyOnHidden: true,
        bodyStyle: done
          ? {
              padding: '72px 0',
--- a/src/pages/list/basic-list/index.tsx
+++ b/src/pages/list/basic-list/index.tsx
@ -62,7 +62,7 @@ const ListContent = ({
        <Progress
          percent={percent}
          status={status}
-          strokeWidth={6}
+          size={6}
          style={{
            width: 180,
          }}
@ -191,7 +191,7 @@ export const BasicList: FC = () => {
    <div>
      <PageContainer>
        <div className={styles.standardList}>
-          <Card bordered={false}>
+          <Card variant="borderless">
            <Row>
              <Col sm={8} xs={24}>
                <Info title="我的待办" value="8个任务" bordered />
--- a/src/pages/list/search/applications/index.tsx
+++ b/src/pages/list/search/applications/index.tsx
@ -90,7 +90,7 @@ export const Applications: FC<Record<string, any>> = () => {

  return (
    <div className={styles.filterCardList}>
-      <Card bordered={false}>
+      <Card variant="borderless">
        <Form
          onValuesChange={(_, values) => {
            run(values);
@ -185,8 +185,10 @@ export const Applications: FC<Record<string, any>> = () => {
          <List.Item key={item.id}>
            <Card
              hoverable
-              bodyStyle={{
-                paddingBottom: 20,
+              styles={{
+                body: {
+                  paddingBottom: 20,
+                },
              }}
              actions={[
                <Tooltip key="download" title="下载">
--- a/src/pages/list/search/articles/index.tsx
+++ b/src/pages/list/search/articles/index.tsx
@ -132,7 +132,7 @@ const Articles: FC = () => {

  return (
    <>
-      <Card bordered={false}>
+      <Card variant="borderless">
        <Form
          layout="inline"
          form={form}
@ -211,8 +211,12 @@ const Articles: FC = () => {
      </Card>
      <Card
        style={{ marginTop: 24 }}
-        bordered={false}
-        bodyStyle={{ padding: '8px 32px 32px 32px' }}
+        variant="borderless"
+        styles={{
+          body: {
+            padding: '8px 32px 32px 32px',
+          },
+        }}
      >
        <List<ListItemDataType>
          size="large"
--- a/src/pages/list/search/projects/index.tsx
+++ b/src/pages/list/search/projects/index.tsx
@ -89,7 +89,7 @@ const Projects: FC = () => {
  };
  return (
    <div className={styles.coverCardList}>
-      <Card bordered={false}>
+      <Card variant="borderless">
        <Form
          layout="inline"
          onValuesChange={(_, values) => {
--- a/src/pages/list/table-list/components/CreateForm.tsx
+++ b/src/pages/list/table-list/components/CreateForm.tsx
@ -12,7 +12,7 @@ const CreateForm: React.FC<CreateFormProps> = (props) => {

  return (
    <Modal
-      destroyOnClose
+      destroyOnHidden
      title="新建规则"
      open={modalVisible}
      onCancel={() => onCancel()}
--- a/src/pages/list/table-list/components/UpdateForm.tsx
+++ b/src/pages/list/table-list/components/UpdateForm.tsx
@ -35,10 +35,12 @@ const UpdateForm: React.FC<UpdateFormProps> = (props) => {
        return (
          <Modal
            width={640}
-            bodyStyle={{
-              padding: '32px 40px 48px',
+            styles={{
+              body: {
+                padding: '32px 40px 48px',
+              },
            }}
-            destroyOnClose
+            destroyOnHidden
            title="规则配置"
            open={props.updateModalVisible}
            footer={submitter}
--- a/src/pages/profile/advanced/index.tsx
+++ b/src/pages/profile/advanced/index.tsx
@ -33,7 +33,6 @@ import { queryAdvancedProfile } from './service';
 import useStyles from './style.style';

 const { Step } = Steps;
-const ButtonGroup = Button.Group;

 const action = (
  <RouteContext.Consumer>
@ -67,7 +66,7 @@ const action = (
      }
      return (
        <Space>
-          <ButtonGroup>
+          <Space.Compact>
            <Button>操作一</Button>
            <Button>操作二</Button>
            <Dropdown
@ -93,7 +92,7 @@ const action = (
                <EllipsisOutlined />
              </Button>
            </Dropdown>
-          </ButtonGroup>
+          </Space.Compact>
          <Button type="primary">主操作</Button>
        </Space>
      );
@ -262,7 +261,9 @@ const Advanced: FC = () => {
      return (
        <Popover
          placement="topLeft"
-          arrowPointAtCenter
+          arrow={{
+            pointAtCenter: true,
+          }}
          content={popoverContent}
        >
          <span>{dot}</span>
@ -362,7 +363,7 @@ const Advanced: FC = () => {
            style={{
              marginBottom: 24,
            }}
-            bordered={false}
+            variant="borderless"
          >
            <Descriptions
              style={{
@ -473,12 +474,12 @@ const Advanced: FC = () => {
            style={{
              marginBottom: 24,
            }}
-            bordered={false}
+            variant="borderless"
          >
            <Empty />
          </Card>
          <Card
-            bordered={false}
+            variant="borderless"
            tabList={operationTabList}
            onTabChange={onOperationTabChange}
          >
--- a/src/pages/profile/basic/index.tsx
+++ b/src/pages/profile/basic/index.tsx
@ -166,7 +166,7 @@ const Basic: FC = () => {
  ];
  return (
    <PageContainer>
-      <Card bordered={false}>
+      <Card variant="borderless">
        <Descriptions
          title="退款申请"
          style={{
--- a/src/pages/result/fail/index.tsx
+++ b/src/pages/result/fail/index.tsx
@ -1,13 +1,12 @@
 import { CloseCircleOutlined, RightOutlined } from '@ant-design/icons';
 import { GridContent } from '@ant-design/pro-components';
 import { Button, Card, Result } from 'antd';
-import { Fragment } from 'react';
 import useStyles from './index.style';

 export default () => {
  const { styles } = useStyles();
  const Content = (
-    <Fragment>
+    <>
      <div className={styles.title}>
        <span>您提交的内容有如下错误：</span>
      </div>
@ -49,11 +48,11 @@ export default () => {
          <RightOutlined />
        </a>
      </div>
-    </Fragment>
+    </>
  );
  return (
    <GridContent>
-      <Card bordered={false}>
+      <Card variant="borderless">
        <Result
          status="error"
          title="提交失败"
--- a/src/pages/result/success/index.tsx
+++ b/src/pages/result/success/index.tsx
@ -1,7 +1,6 @@
 import { DingdingOutlined } from '@ant-design/icons';
 import { GridContent } from '@ant-design/pro-components';
 import { Button, Card, Descriptions, Result, Steps } from 'antd';
-import { Fragment } from 'react';
 import useStyles from './index.style';

 const { Step } = Steps;
@ -112,15 +111,15 @@ export default () => {
    </>
  );
  const extra = (
-    <Fragment>
+    <>
      <Button type="primary">返回列表</Button>
      <Button>查看项目</Button>
      <Button>打印</Button>
-    </Fragment>
+    </>
  );
  return (
    <GridContent>
-      <Card bordered={false}>
+      <Card variant="borderless">
        <Result
          status="success"
          title="提交成功"
--- a/src/pages/table-list/components/UpdateForm.tsx
+++ b/src/pages/table-list/components/UpdateForm.tsx
@ -78,8 +78,12 @@ const UpdateForm: React.FC<UpdateFormProps> = (props) => {
          return (
            <Modal
              width={640}
-              bodyStyle={{ padding: '32px 40px 48px' }}
-              destroyOnClose
+              styles={{
+                body: {
+                  padding: '32px 40px 48px',
+                },
+              }}
+              destroyOnHidden
              title={intl.formatMessage({
                id: 'pages.searchTable.updateForm.ruleConfig',
                defaultMessage: '规则配置',
--- a/src/pages/user/register/index.tsx
+++ b/src/pages/user/register/index.tsx
@ -140,7 +140,7 @@ const Register: FC = () => {
      >
        <Progress
          status={passwordProgressMap[passwordStatus]}
-          strokeWidth={6}
+          size={6}
          percent={value.length * 10 > 100 ? 100 : value.length * 10}
          showInfo={false}
        />