fix(layout): 统一 PageContainer 计算到 styles.ts 中 (#7699)

* fix: change css in style.ts fiels * fix: delete useless code * fix: ts error fixed * fix: ts fixd * fix: lint ci fixed * feat: update snapshot * merge * fix tets * fix --------- Co-authored-by: 期贤 <[email protected]>
ant-design · Sep 22, 2023 · ed5c61c · ed5c61c
1 parent 874cc23
commit ed5c61c
Show file tree

Hide file tree

Showing 41 changed files with 33,423 additions and 20,058 deletions.
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
@@ -20,7 +20,7 @@ jobs:
         uses: pnpm/action-setup@v2
         with:
           version: 8.6.7
-      - run: pnpm install --no-frozen-lockfile
+      - run: pnpm install 
       - run: pnpm run build
         env:
           PRO_COMPONENTS_CI: CI

diff --git a/.github/workflows/coverage.yml b/.github/workflows/coverage.yml
@@ -18,7 +18,7 @@ jobs:
         with:
           version: 8.6.7
 
-      - run: pnpm install --no-frozen-lockfile
+      - run: pnpm install
         if: |
           steps.cache-pnpm-cache.outputs.cache-hit != 'true' ||
           steps.cache-node-modules.outputs.cache-hit != 'true'

diff --git a/.github/workflows/preview-build.yml b/.github/workflows/preview-build.yml
@@ -20,7 +20,7 @@ jobs:
         env:
           TEST_UI: 'preview'
         run: |
-          pnpm install --no-frozen-lockfile
+          pnpm install 
           pnpm run build
           pnpm run dumi
 

diff --git a/package.json b/package.json
@@ -26,7 +26,7 @@
     "start": "npm run version && dumi dev",
     "sync:tnpm": "node -e 'require(\"./scripts/syncTNPM\")()'",
     "test": "npm run version && cross-env TZ=UTC vitest",
-    "test:coverage": "npm run version && cross-env TZ=UTC TEST_LOG=none vitest --threads=false --coverage",
+    "test:coverage": "npm run version && cross-env TZ=UTC TEST_LOG=none vitest  --coverage",
     "test:update": "pnpm run version && cross-env TZ=UTC  vitest -u",
     "tsc": "tsc --noEmit",
     "tsc:duplicate": "tsc -p ./tests/tsconfig.duplicate.json",

diff --git a/packages/form/src/components/Checkbox/index.tsx b/packages/form/src/components/Checkbox/index.tsx
@@ -1,5 +1,5 @@
 import { runFunction } from '@ant-design/pro-utils';
-import type { CheckboxProps } from 'antd';
+import type { CheckboxProps, CheckboxRef } from 'antd';
 import { Checkbox } from 'antd';
 import type { CheckboxGroupProps } from 'antd/lib/checkbox';
 import React from 'react';
@@ -56,18 +56,15 @@ const CheckboxGroup: React.FC<ProFormCheckboxGroupProps> = React.forwardRef(
   ),
 );
 
-export type ProFormCheckboxProps = ProFormFieldItemProps<
-  CheckboxProps,
-  HTMLInputElement
->;
+export type ProFormCheckboxProps = ProFormFieldItemProps<CheckboxProps>;
 
 /**
  * 多选框的
  *
  * @param
  */
 const ProFormCheckboxComponents: React.FC<ProFormCheckboxProps> =
-  React.forwardRef<any, ProFormCheckboxProps>(
+  React.forwardRef<CheckboxRef, ProFormCheckboxProps>(
     ({ fieldProps, children }, ref) => {
       return (
         <Checkbox ref={ref} {...fieldProps}>

diff --git a/packages/form/src/layouts/DrawerForm/index.tsx b/packages/form/src/layouts/DrawerForm/index.tsx
@@ -280,7 +280,7 @@ function DrawerForm<T = Record<string, any>, U = Record<string, any>>({
       const offsetRight: number | string = ((document.body.offsetWidth ||
         1000) -
         (e.clientX - document.body.offsetLeft)) as number | string;
-      const minWidth = resizeInfo?.minWidth ?? width;
+      const minWidth = resizeInfo?.minWidth ?? (width || 800);
       const maxWidth = resizeInfo?.maxWidth ?? window.innerWidth * 0.8;
 
       if (offsetRight < minWidth) {

diff --git a/packages/layout/src/components/PageContainer/demos/token.tsx b/packages/layout/src/components/PageContainer/demos/token.tsx
@@ -65,7 +65,7 @@ export default () => (
         ],
       }}
     >
-      <ProTable />
+      <ProTable search={false} />
     </PageContainer>
   </div>
 );
diff --git a/packages/layout/src/components/PageContainer/index.tsx b/packages/layout/src/components/PageContainer/index.tsx
@@ -410,15 +410,14 @@ const PageContainerBase: React.FC<PageContainerProps> = (props) => {
       <>
         <div
           className={classNames(
-            `${basePageContainer}-children-container ${hashId}`.trim(),
+            hashId,
+            `${basePageContainer}-children-container`,
+            {
+              [`${basePageContainer}-children-container-no-header`]:
+                !props?.header,
+            },
           )}
-          // 没有 header 存在需要给 container 加上 BlockStart，正常时间不需要
-          style={{
-            paddingBlockStart: props?.header
-              ? 0
-              : token?.layout?.pageContainer?.paddingBlockPageContainerContent,
-            ...childrenContentStyle,
-          }}
+          style={childrenContentStyle}
         >
           {children}
         </div>

diff --git a/packages/layout/src/components/PageContainer/style/index.ts b/packages/layout/src/components/PageContainer/style/index.ts
@@ -12,11 +12,16 @@ const genPageContainerStyle: GenerateStyle<PageContainerToken> = (token) => {
     [token.componentCls]: {
       position: 'relative',
       '&-children-container': {
+        paddingBlockStart: 0,
         paddingBlockEnd:
           token.layout?.pageContainer?.paddingBlockPageContainerContent,
         paddingInline:
           token.layout?.pageContainer?.paddingInlinePageContainerContent,
       },
+      '&-children-container-no-header': {
+        paddingBlockStart:
+          token.layout?.pageContainer?.paddingBlockPageContainerContent,
+      },
       '&-affix': {
         [`${token.antCls}-affix`]: {
           [`${token.componentCls}-warp`]: {

diff --git a/packages/layout/src/components/SiderMenu/BaseMenu.tsx b/packages/layout/src/components/SiderMenu/BaseMenu.tsx
@@ -546,7 +546,9 @@ const BaseMenu: React.FC<BaseMenuProps & PrivateSiderMenuProps> = (props) => {
     menu?.defaultOpenAll,
   );
 
-  const [openKeys, setOpenKeys] = useMountMergeState<WithFalse<React.Key[]>>(
+  const [openKeys, setOpenKeys] = useMountMergeState<
+    (string | number)[] | false
+  >(
     () => {
       if (menu?.defaultOpenAll) {
         return getOpenKeysFromMenuData(menuData) || [];
@@ -605,7 +607,7 @@ const BaseMenu: React.FC<BaseMenuProps & PrivateSiderMenuProps> = (props) => {
         propsOpenKeys !== false &&
         matchMenuKeys.join('-') !== (openKeys || []).join('-')
       ) {
-        let newKeys: React.Key[] = matchMenuKeys;
+        let newKeys: (string | number)[] | false = matchMenuKeys;
         // 如果不自动关闭，我需要把 openKeys 放进去
         if (menu?.autoClose === false) {
           newKeys = Array.from(
@@ -697,7 +699,7 @@ const BaseMenu: React.FC<BaseMenuProps & PrivateSiderMenuProps> = (props) => {
         [`${baseClassName}-collapsed`]: props.collapsed,
       })}
       items={menuUtils.getNavMenuItems(finallyData, 0)}
-      onOpenChange={(_openKeys: React.Key[]) => {
+      onOpenChange={(_openKeys) => {
         if (!props.collapsed) {
           setOpenKeys(_openKeys);
         }

diff --git a/packages/layout/src/components/WaterMark/index.tsx b/packages/layout/src/components/WaterMark/index.tsx
@@ -85,7 +85,7 @@ export const WaterMark: React.FC<WaterMarkProps> = (props) => {
     rotate = -22, // 默认旋转 -22 度
     image,
     offsetLeft,
-    offsetTop,
+    offsetTop: outOffsetTop,
     fontStyle = 'normal',
     fontWeight = 'normal',
     fontColor = token.colorFill,
@@ -108,7 +108,7 @@ export const WaterMark: React.FC<WaterMarkProps> = (props) => {
     const canvasWidth = `${(gapX + width) * ratio}px`;
     const canvasHeight = `${(gapY + height) * ratio}px`;
     const canvasOffsetLeft = offsetLeft || gapX / 2;
-    const canvasOffsetTop = offsetTop || gapY / 2;
+    const canvasOffsetTop = outOffsetTop || gapY / 2;
 
     canvas.setAttribute('width', canvasWidth);
     canvas.setAttribute('height', canvasHeight);
@@ -119,6 +119,12 @@ export const WaterMark: React.FC<WaterMarkProps> = (props) => {
       return;
     }
 
+    // 旋转字符 rotate
+    ctx.translate(canvasOffsetLeft * ratio, canvasOffsetTop * ratio);
+    ctx.rotate((Math.PI / 180) * Number(rotate));
+    const markWidth = width * ratio;
+    const markHeight = height * ratio;
+
     const writeContent = (
       contentText: string | string[],
       offsetTop: number = 0,
@@ -136,12 +142,6 @@ export const WaterMark: React.FC<WaterMarkProps> = (props) => {
       setBase64Url(canvas.toDataURL());
     };
 
-    // 旋转字符 rotate
-    ctx.translate(canvasOffsetLeft * ratio, canvasOffsetTop * ratio);
-    ctx.rotate((Math.PI / 180) * Number(rotate));
-    const markWidth = width * ratio;
-    const markHeight = height * ratio;
-
     if (image) {
       const img = new Image();
       img.crossOrigin = 'anonymous';
@@ -165,7 +165,7 @@ export const WaterMark: React.FC<WaterMarkProps> = (props) => {
     gapX,
     gapY,
     offsetLeft,
-    offsetTop,
+    outOffsetTop,
     rotate,
     fontStyle,
     fontWeight,

diff --git a/packages/list/src/demos/expand.tsx b/packages/list/src/demos/expand.tsx
@@ -1,6 +1,6 @@
 import { ProList } from '@ant-design/pro-components';
 import { Button, Progress, Space, Tag } from 'antd';
-import type { ReactText } from 'react';
+import type { Key } from 'react';
 import { useState } from 'react';
 
 const dataSource = [
@@ -27,9 +27,7 @@ const dataSource = [
 ];
 
 export default () => {
-  const [expandedRowKeys, setExpandedRowKeys] = useState<readonly ReactText[]>(
-    [],
-  );
+  const [expandedRowKeys, setExpandedRowKeys] = useState<readonly Key[]>([]);
 
   return (
     <ProList<{ title: string }>

diff --git a/packages/list/src/demos/selectedRow.tsx b/packages/list/src/demos/selectedRow.tsx
@@ -1,6 +1,6 @@
 import { ProList } from '@ant-design/pro-components';
 import { Button, Progress } from 'antd';
-import type { ReactText } from 'react';
+import type { Key } from 'react';
 import { useState } from 'react';
 
 const dataSource = [
@@ -27,10 +27,10 @@ const dataSource = [
 ];
 
 export default () => {
-  const [selectedRowKeys, setSelectedRowKeys] = useState<ReactText[]>([]);
+  const [selectedRowKeys, setSelectedRowKeys] = useState<Key[]>([]);
   const rowSelection = {
     selectedRowKeys,
-    onChange: (keys: ReactText[]) => setSelectedRowKeys(keys),
+    onChange: (keys: Key[]) => setSelectedRowKeys(keys),
   };
 
   return (

diff --git a/packages/list/src/demos/size.tsx b/packages/list/src/demos/size.tsx
@@ -1,6 +1,6 @@
 import { ProList } from '@ant-design/pro-components';
 import { Button, Progress, Select } from 'antd';
-import type { ReactText } from 'react';
+import type { Key } from 'react';
 import { useState } from 'react';
 
 const dataSource = [
@@ -27,17 +27,15 @@ const dataSource = [
 ];
 
 export default () => {
-  const [selectedRowKeys, setSelectedRowKeys] = useState<ReactText[]>([]);
-  const [expandedRowKeys, setExpandedRowKeys] = useState<readonly ReactText[]>(
-    [],
-  );
+  const [selectedRowKeys, setSelectedRowKeys] = useState<Key[]>([]);
+  const [expandedRowKeys, setExpandedRowKeys] = useState<readonly Key[]>([]);
   const [size, setSize] = useState<'small' | 'default' | 'large' | undefined>(
     'default',
   );
   const [split, setSplit] = useState<0 | 1>(1);
   const rowSelection = {
     selectedRowKeys,
-    onChange: (keys: ReactText[]) => setSelectedRowKeys(keys),
+    onChange: (keys: Key[]) => setSelectedRowKeys(keys),
   };
 
   return (

diff --git a/packages/list/src/demos/special.tsx b/packages/list/src/demos/special.tsx
@@ -1,7 +1,7 @@
 import { EllipsisOutlined } from '@ant-design/icons';
 import { ProList } from '@ant-design/pro-components';
 import { Button, Progress, Tag } from 'antd';
-import type { ReactText } from 'react';
+import type { Key } from 'react';
 import { useState } from 'react';
 
 const types = ['top', 'inline', 'new'];
@@ -51,13 +51,11 @@ const data = [
 }));
 
 export default () => {
-  const [expandedRowKeys, setExpandedRowKeys] = useState<readonly ReactText[]>(
-    [],
-  );
-  const [selectedRowKeys, setSelectedRowKeys] = useState<ReactText[]>([]);
+  const [expandedRowKeys, setExpandedRowKeys] = useState<readonly Key[]>([]);
+  const [selectedRowKeys, setSelectedRowKeys] = useState<Key[]>([]);
   const rowSelection = {
     selectedRowKeys,
-    onChange: (keys: ReactText[]) => setSelectedRowKeys(keys),
+    onChange: (keys: Key[]) => setSelectedRowKeys(keys),
   };
   const [dataSource, setDataSource] = useState<any[]>([...data] as any[]);
 

diff --git a/packages/list/src/demos/testConfigProvider.tsx b/packages/list/src/demos/testConfigProvider.tsx
@@ -1,6 +1,6 @@
 import { ProList } from '@ant-design/pro-components';
 import { ConfigProvider, Progress } from 'antd';
-import type { ReactText } from 'react';
+import type { Key } from 'react';
 import { useState } from 'react';
 
 const dataSource = [
@@ -12,10 +12,10 @@ const dataSource = [
 ];
 
 export default () => {
-  const [selectedRowKeys, setSelectedRowKeys] = useState<ReactText[]>([]);
+  const [selectedRowKeys, setSelectedRowKeys] = useState<Key[]>([]);
   const rowSelection = {
     selectedRowKeys,
-    onChange: (keys: ReactText[]) => setSelectedRowKeys(keys),
+    onChange: (keys: Key[]) => setSelectedRowKeys(keys),
   };
 
   return (

diff --git a/packages/provider/src/intl.ts b/packages/provider/src/intl.ts
@@ -22,10 +22,10 @@ import skSK from './locale/sk_SK';
 import srRS from './locale/sr_RS';
 import thTH from './locale/th_TH';
 import trTR from './locale/tr_TR';
+import ukUA from './locale/uk_UA';
 import viVN from './locale/vi_VN';
 import zhCN from './locale/zh_CN';
 import zhTW from './locale/zh_TW';
-import ukUA from './locale/uk_UA';
 
 /**
  * 安全的从一个对象中读取相应的值

diff --git a/packages/provider/src/locale/uk_UA.tsx b/packages/provider/src/locale/uk_UA.tsx
@@ -51,9 +51,9 @@ export default {
     densitySmall: 'Стислий',
   },
   stepsForm: {
-      next: 'Наступний',
-        prev: 'Попередній',
-        submit: 'Завершити',
+    next: 'Наступний',
+    prev: 'Попередній',
+    submit: 'Завершити',
   },
   loginForm: {
     submitText: 'Вхіх',

diff --git a/packages/table/src/Store/Provide.tsx b/packages/table/src/Store/Provide.tsx
@@ -11,7 +11,7 @@ import {
 } from 'react';
 import type { DensitySize } from '../components/ToolBar/DensityIcon';
 import type { ProTableProps } from '../index';
-import type { ActionType } from '../typing';
+import type { ActionType, ProColumns } from '../typing';
 import { genColumnKey } from '../utils';
 
 export type ColumnsState = {
@@ -33,7 +33,7 @@ export type UseContainerProps<T = any> = {
   size?: DensitySize;
   defaultSize?: DensitySize;
   onSizeChange?: (size: DensitySize) => void;
-  columns?: ProTableColumn<T>[];
+  columns?: ProTableColumn<T>[] | ProColumns<T, T>[];
   columnsState?: ProTableProps<any, any, any>['columnsState'];
 };
 

diff --git a/packages/table/src/Table.tsx b/packages/table/src/Table.tsx
@@ -28,6 +28,7 @@ import type {
 import classNames from 'classnames';
 import type Summary from 'rc-table/lib/Footer/Summary';
 import React, {
+  Key,
   useCallback,
   useContext,
   useEffect,
@@ -478,7 +479,7 @@ const ProTable = <
 
   /** 单选多选的相关逻辑 */
   const [selectedRowKeys, setSelectedRowKeys] = useMountMergeState<
-    (string | number)[] | undefined
+    (string | number)[] | Key[] | undefined
   >(
     propsRowSelection
       ? propsRowSelection?.defaultSelectedRowKeys || []
@@ -692,7 +693,7 @@ const ProTable = <
     setSelectedRowKeys([]);
   }, [propsRowSelection, setSelectedRowKeys]);
 
-  counter.propsRef.current = props;
+  counter.propsRef.current = props as ProTableProps<any, any, any>;
 
   /** 可编辑行的相关配置 */
   const editableUtils = useEditableArray<any>({