fix: 操作列自定义dropdwon渲染&修复属性提示

Barrior · Jul 4, 2024 · a7b88d6 · a7b88d6
1 parent 6f4e063
commit a7b88d6
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 23 deletions.
diff --git a/packages/search-table-react/src/constants/style.tsx b/packages/search-table-react/src/constants/style.tsx
@@ -1,8 +1,3 @@
-export const STYLE_ICON_MORE = {
-  marginInlineStart: 2,
-  fontSize: 12,
-}
-
 export const STYLE_CODE = {
   backgroundColor: '#ececec',
   padding: 16,

diff --git a/packages/search-table-react/src/hooks/useColumns/helpers/actions.tsx b/packages/search-table-react/src/hooks/useColumns/helpers/actions.tsx
@@ -1,44 +1,63 @@
 import { DownOutlined } from '@ant-design/icons'
 import type { IObjectAny } from '@schema-render/core-react'
 import { utils } from '@schema-render/core-react'
-import type { MenuProps } from 'antd'
+import { cij } from '@schema-render/form-render-react'
 import { Button, Dropdown, Popconfirm } from 'antd'
 import type { ReactNode } from 'react'
+import { Fragment } from 'react'
 
 import ButtonLoading from '../../../components/ButtonLoading'
-import { STYLE_ICON_MORE } from '../../../constants/style'
 import type { ISearchTableProps } from '../../../typings'
 import type { IActionItem } from '../../../typings/table.d'
 
 const { isArray } = utils
 
+const dropdownCls = cij`
+  background-color: #fff;
+  border-radius: 8px;
+  box-shadow: 0 4px 12px 0 #ececec;
+  min-width: 70px;
+  padding: 6px;
+
+  > * {
+    display: block;
+    width: 100%;
+    height: auto;
+    padding: 3px 6px;
+
+    &:hover {
+      background: #f6f6f6 !important;
+    }
+  }
+`
+
 /**
  * 创建「操作栏」按钮
  */
 export function createActionItem(item: IActionItem, index: number) {
-  const handleClick = item.onClick
+  const { text, confirmAgain, confirmProps, onClick, ...restItem } = item
 
   const content = (
     <ButtonLoading
       key={index}
       type="link"
       size="small"
-      {...item}
-      onClick={(e) => !item.confirmAgain && handleClick?.(e)}
+      {...restItem}
+      onClick={(e) => !confirmAgain && onClick?.(e)}
     >
-      {item.text}
+      {text}
     </ButtonLoading>
   )
 
   // 增加二次确认
-  if (item.confirmAgain) {
+  if (confirmAgain) {
     return (
       <Popconfirm
         key={index}
         title="温馨提示"
         description="请二次确认您的操作！"
-        {...item.confirmProps}
-        onConfirm={handleClick as never}
+        {...confirmProps}
+        onConfirm={onClick as never}
       >
         {content}
       </Popconfirm>
@@ -80,7 +99,7 @@ export function createActions({
 
   if (displayableItems.length > actionItemsCount) {
     const displayedItems: IActionItem[] = []
-    const dropdownItems: MenuProps['items'] = []
+    const dropdownItems: ReactNode[] = []
 
     displayableItems.forEach((item, i) => {
       /**
@@ -89,10 +108,7 @@ export function createActions({
       if (i < actionItemsCount - 1) {
         displayedItems.push(item)
       } else {
-        dropdownItems.push({
-          key: i,
-          label: createActionItem(item, i),
-        })
+        dropdownItems.push(createActionItem(item, i))
       }
     })
 
@@ -102,10 +118,16 @@ export function createActions({
         <Dropdown
           placement="bottomRight"
           {...actionItemsDropdownProps}
-          menu={{ items: dropdownItems }}
+          dropdownRender={() => (
+            <div className={dropdownCls}>
+              {dropdownItems.map((label, i) => (
+                <Fragment key={i}>{label}</Fragment>
+              ))}
+            </div>
+          )}
         >
-          <Button type="link" size="small">
-            更多 <DownOutlined style={STYLE_ICON_MORE} />
+          <Button type="link" size="small" style={{ gap: 2 }}>
+            更多 <DownOutlined />
           </Button>
         </Dropdown>
       </>

diff --git a/packages/search-table-react/src/hooks/useColumns/useFinalColumns.tsx b/packages/search-table-react/src/hooks/useColumns/useFinalColumns.tsx
@@ -78,7 +78,7 @@ export default function useFinalColumns({ table, sortColumns }: IParams) {
         title: '操作',
         align: 'center',
         fixed: 'right',
-        width: 140,
+        width: 134,
         render: actionsRender,
         key: EColumnsKeys.actions,
         ...actionItemsColumnData,