fix(table): use flex replace Space (#6426)

* fix(table): use flex replace Space * chore: unuse space * fix: updayte snapshot * fix: updayte snapshot * fix: updayte snapshot * fix: updayte snapshot * remove loading
ant-design · Dec 26, 2022 · 53699f8 · 53699f8
1 parent 0fb584c
commit 53699f8
Show file tree

Hide file tree

Showing 19 changed files with 11,180 additions and 14,661 deletions.
diff --git a/packages/card/package.json b/packages/card/package.json
@@ -37,11 +37,9 @@
     "@babel/runtime": "^7.18.0",
     "classnames": "^2.2.6",
     "omit.js": "^2.0.2",
+    "rc-resize-observer": "^1.0.0",
     "rc-util": "^5.4.0"
   },
-  "devDependencies": {
-    "rc-resize-observer": "^0.2.3"
-  },
   "peerDependencies": {
     "antd": ">=4.23.0",
     "react": ">=16.9.0"

diff --git a/packages/form/src/components/QueryFilter/demos/light-filter.tsx b/packages/form/src/components/QueryFilter/demos/light-filter.tsx
@@ -135,11 +135,11 @@ export default () => {
         <ProFormTreeSelect
           initialValue={['0-0', '0-1']}
           label="树形下拉选择器"
-          request={async () => treeData}
           fieldProps={{
             fieldNames: {
               label: 'title',
             },
+            treeData,
             treeCheckable: true,
             showCheckedStrategy: TreeSelect.SHOW_PARENT,
             placeholder: 'Please select',

diff --git a/packages/form/src/components/SchemaForm/demos/dependency.tsx b/packages/form/src/components/SchemaForm/demos/dependency.tsx
@@ -1,4 +1,5 @@
-import { ProForm, ProFormColumnsType } from '@ant-design/pro-components';
+import type { ProFormColumnsType } from '@ant-design/pro-components';
+import { ProForm } from '@ant-design/pro-components';
 import { BetaSchemaForm } from '@ant-design/pro-components';
 
 const valueEnum = {

diff --git a/packages/form/src/demos/base.tsx b/packages/form/src/demos/base.tsx
@@ -1,4 +1,4 @@
-import { ProFormInstance } from '@ant-design/pro-components';
+import type { ProFormInstance } from '@ant-design/pro-components';
 import {
   ProForm,
   ProFormCascader,
@@ -219,11 +219,11 @@ export default () => {
         initialValue={['0-0-0']}
         label="树形下拉选择器"
         width={600}
-        request={async () => treeData}
         fieldProps={{
           fieldNames: {
             label: 'title',
           },
+          treeData,
           treeCheckable: true,
           showCheckedStrategy: TreeSelect.SHOW_PARENT,
           placeholder: 'Please select',

diff --git a/packages/table/package.json b/packages/table/package.json
@@ -41,11 +41,11 @@
     "classnames": "^2.2.6",
     "dayjs": "^1.11.4",
     "omit.js": "^2.0.2",
+    "rc-resize-observer": "^1.0.0",
     "rc-util": "^5.0.1",
     "react-sortable-hoc": "^2.0.0",
     "unstated-next": "^1.1.0",
-    "use-json-comparison": "^1.0.5",
-    "use-media-antd-query": "^1.1.0"
+    "use-json-comparison": "^1.0.5"
   },
   "peerDependencies": {
     "antd": ">=4.23.0",

diff --git a/packages/table/src/components/ListToolBar/index.tsx b/packages/table/src/components/ListToolBar/index.tsx
@@ -5,10 +5,10 @@ import { ConfigProvider, Input, Space, Tabs, Tooltip } from 'antd';
 import type { LabelTooltipType } from 'antd/es/form/FormItemLabel';
 import type { SearchProps } from 'antd/es/input';
 import classNames from 'classnames';
-import React, { useContext, useMemo } from 'react';
-import useAntdMediaQuery from 'use-media-antd-query';
+import React, { useContext, useMemo, useState } from 'react';
 import type { ListToolBarHeaderMenuProps } from './HeaderMenu';
 import HeaderMenu from './HeaderMenu';
+import ResizeObserver from 'rc-resize-observer';
 import { useStyle } from './style';
 
 export type ListToolBarSetting = {
@@ -106,6 +106,9 @@ const ListToolBarTabBar: React.FC<{
     <div className={`${prefixCls}-extra-line`}>
       {tabs.items && tabs.items.length ? (
         <Tabs
+          style={{
+            width: '100%',
+          }}
           activeKey={tabs.activeKey}
           //@ts-ignore
           items={tabs.items.map((item, index) => ({
@@ -150,9 +153,7 @@ const ListToolBar: React.FC<ListToolBarProps> = ({
 
   const intl = useIntl();
 
-  const colSize = useAntdMediaQuery();
-
-  const isMobile = colSize === 'sm' || colSize === 'xs';
+  const [isMobile, setIsMobile] = useState(false);
 
   const placeholder = intl.getMessage('tableForm.inputPlaceholder', '请输入');
 
@@ -246,7 +247,7 @@ const ListToolBar: React.FC<ListToolBarProps> = ({
       );
     }
     return (
-      <Space className={`${prefixCls}-left ${hashId}`}>
+      <div className={`${prefixCls}-left ${hashId}`}>
         {hasTitle && !menu && (
           <div className={`${prefixCls}-title ${hashId}`}>
             <LabelIconTip tooltip={tooltip} label={title} subTitle={subTitle} />
@@ -256,26 +257,24 @@ const ListToolBar: React.FC<ListToolBarProps> = ({
         {!hasTitle && searchNode ? (
           <div className={`${prefixCls}-search ${hashId}`}>{searchNode}</div>
         ) : null}
-      </Space>
+      </div>
     );
   }, [hasLeft, hasRight, hasTitle, hashId, menu, prefixCls, searchNode, subTitle, title, tooltip]);
 
   const rightTitleDom = useMemo(() => {
     if (!hasRight) return null;
     return (
-      <Space
+      <div
         className={`${prefixCls}-right ${hashId}`}
-        direction={isMobile ? 'vertical' : 'horizontal'}
-        size={8}
-        align={isMobile ? 'end' : 'center'}
+        style={isMobile ? {} : { alignItems: 'center' }}
       >
         {!multipleLine ? filtersNode : null}
         {hasTitle && searchNode ? (
           <div className={`${prefixCls}-search ${hashId}`}>{searchNode}</div>
         ) : null}
         {actionDom}
         {settings?.length ? (
-          <Space size={12} align="center" className={`${prefixCls}-setting-items ${hashId}`}>
+          <div className={`${prefixCls}-setting-items ${hashId}`}>
             {settings.map((setting, index) => {
               const settingItem = getSettingItem(setting);
               return (
@@ -285,9 +284,9 @@ const ListToolBar: React.FC<ListToolBarProps> = ({
                 </div>
               );
             })}
-          </Space>
+          </div>
         ) : null}
-      </Space>
+      </div>
     );
   }, [
     hasRight,
@@ -316,15 +315,21 @@ const ListToolBar: React.FC<ListToolBarProps> = ({
   }, [hasLeft, hasRight, hashId, isMobile, leftTitleDom, prefixCls, rightTitleDom]);
 
   return wrapSSR(
-    <div style={style} className={classNames(prefixCls, hashId, className)}>
-      {titleNode}
-      <ListToolBarTabBar
-        filtersNode={filtersNode}
-        prefixCls={prefixCls}
-        tabs={tabs}
-        multipleLine={multipleLine}
-      />
-    </div>,
+    <ResizeObserver
+      onResize={(size) => {
+        setIsMobile(size.width < 375);
+      }}
+    >
+      <div style={style} className={classNames(prefixCls, hashId, className)}>
+        {titleNode}
+        <ListToolBarTabBar
+          filtersNode={filtersNode}
+          prefixCls={prefixCls}
+          tabs={tabs}
+          multipleLine={multipleLine}
+        />
+      </div>
+    </ResizeObserver>,
   );
 };
 

diff --git a/packages/table/src/components/ListToolBar/style.ts b/packages/table/src/components/ListToolBar/style.ts
@@ -40,9 +40,25 @@ const genProListStyle: GenerateStyle<ProListToken> = (token) => {
           color: token.colorPrimary,
         },
       },
-      '&-left': { display: 'flex', alignItems: 'center', justifyContent: 'flex-start' },
-      '&-right': { display: 'flex', justifyContent: 'flex-end' },
+      '&-left': {
+        display: 'flex',
+        flexWrap: 'wrap',
+        alignItems: 'center',
+        gap: 8,
+        justifyContent: 'flex-start',
+        maxWidth: 'calc(100% - 200px)',
+        [`${token.antCls}-tabs`]: {
+          width: '100%',
+        },
+      },
+      '&-right': { display: 'flex', flexWrap: 'wrap', justifyContent: 'flex-end', gap: 8 },
       '&-extra-line': { marginBlockEnd: token.margin },
+      '&-setting-items': {
+        display: 'flex',
+        gap: 8,
+        lineHeight: '32px',
+        alignItems: 'center',
+      },
       '&-filter': {
         '&:not(:last-child)': { marginInlineEnd: token.margin },
         display: 'flex',
@@ -77,10 +93,10 @@ const genProListStyle: GenerateStyle<ProListToken> = (token) => {
         textAlign: 'center',
         cursor: 'pointer',
       },
-      '@media (max-width: 575px)': {
+      '@media (max-width: 768px)': {
         [token.componentCls]: {
-          '&-container': { display: 'flex', flexWrap: 'wrap' },
-          '&-left': { marginBlockEnd: '16px' },
+          '&-container': { display: 'flex', flexWrap: 'wrap', flexDirection: 'column' },
+          '&-left': { marginBlockEnd: '16px', maxWidth: '100%' },
         },
       },
     },
@@ -93,7 +109,6 @@ export function useStyle(prefixCls: string) {
       ...token,
       componentCls: `.${prefixCls}`,
     };
-
     return [genProListStyle(proListToken)];
   });
 }
diff --git a/packages/table/src/demos/ListToolBar/menu.tsx b/packages/table/src/demos/ListToolBar/menu.tsx
@@ -97,7 +97,7 @@ export default () => {
           </Button>,
         ],
         menu: {
-          type: 'dropdown',
+          type: 'tab',
           items: [
             {
               label: '全部事项',
@@ -107,6 +107,30 @@ export default () => {
               label: '已办事项',
               key: 'done',
             },
+            {
+              key: 'tab1',
+              label: <span>应用</span>,
+            },
+            {
+              key: 'tab2',
+              label: <span>项目</span>,
+            },
+            {
+              key: 'tab3',
+              label: <span>文章</span>,
+            },
+            {
+              key: 'tab4',
+              label: <span>文章1</span>,
+            },
+            {
+              key: 'tab5',
+              label: <span>文章2</span>,
+            },
+            {
+              key: 'tab6',
+              label: <span>文章3</span>,
+            },
           ],
           onChange: (activeKey) => {
             console.log('activeKey', activeKey);

diff --git a/packages/table/src/utils/columnRender.tsx b/packages/table/src/utils/columnRender.tsx
@@ -6,7 +6,6 @@ import type {
   UseEditableUtilType,
 } from '@ant-design/pro-utils';
 import { genCopyable, isNil, LabelIconTip } from '@ant-design/pro-utils';
-import { Space } from 'antd';
 import get from 'rc-util/lib/utils/get';
 import React from 'react';
 import { isMergeCell } from '.';
@@ -124,12 +123,19 @@ export function columnRender<T>({
   if (mode === 'edit') {
     if (columnProps.valueType === 'option') {
       return (
-        <Space size={16}>
+        <div
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            gap: 12,
+          }}
+        >
           {editableUtils.actionRender({
             ...rowData,
             index: columnProps.index || index,
           })}
-        </Space>
+        </div>
       );
     }
     return dom;
@@ -162,7 +168,18 @@ export function columnRender<T>({
   }
 
   if (renderDom && columnProps.valueType === 'option' && Array.isArray(renderDom)) {
-    return <Space size={16}>{renderDom}</Space>;
+    return (
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          gap: 8,
+        }}
+      >
+        {renderDom}
+      </div>
+    );
   }
   return renderDom as React.ReactNode;
 }
diff --git a/tests/form/__snapshots__/demo.test.ts.snap b/tests/form/__snapshots__/demo.test.ts.snap
@@ -16900,32 +16900,8 @@ exports[`form demos 📸 renders ./packages/form/src/components/QueryFilter/demo
                             <div
                               class="ant-spin-nested-loading"
                             >
-                              <div>
-                                <div
-                                  aria-busy="true"
-                                  aria-live="polite"
-                                  class="ant-spin ant-spin-spinning"
-                                >
-                                  <span
-                                    class="ant-spin-dot ant-spin-dot-spin"
-                                  >
-                                    <i
-                                      class="ant-spin-dot-item"
-                                    />
-                                    <i
-                                      class="ant-spin-dot-item"
-                                    />
-                                    <i
-                                      class="ant-spin-dot-item"
-                                    />
-                                    <i
-                                      class="ant-spin-dot-item"
-                                    />
-                                  </span>
-                                </div>
-                              </div>
                               <div
-                                class="ant-spin-container ant-spin-blur"
+                                class="ant-spin-container"
                               >
                                 <div
                                   class="ant-select ant-tree-select ant-select-borderless ant-select-in-form-item ant-pro-field-tree-select ant-select-multiple ant-select-show-search"
@@ -50396,15 +50372,11 @@ exports[`form demos 📸 renders ./packages/form/src/demos/pro-form-editableTabl
                                           class="ant-table-cell"
                                         >
                                           <div
-                                            class="ant-space ant-space-horizontal ant-space-align-center"
+                                            style="display: flex; align-items: center; justify-content: center; gap: 12px;"
                                           >
-                                            <div
-                                              class="ant-space-item"
-                                            >
-                                              <a>
-                                                删除
-                                              </a>
-                                            </div>
+                                            <a>
+                                              删除
+                                            </a>
                                           </div>
                                         </td>
                                       </tr>
@@ -50623,15 +50595,11 @@ exports[`form demos 📸 renders ./packages/form/src/demos/pro-form-editableTabl
                                           class="ant-table-cell"
                                         >
                                           <div
-                                            class="ant-space ant-space-horizontal ant-space-align-center"
+                                            style="display: flex; align-items: center; justify-content: center; gap: 12px;"
                                           >
-                                            <div
-                                              class="ant-space-item"
-                                            >
-                                              <a>
-                                                删除
-                                              </a>
-                                            </div>
+                                            <a>
+                                              删除
+                                            </a>
                                           </div>
                                         </td>
                                       </tr>