feat: ListTable component add props to customize draw width

msgbyte · Jul 25, 2024 · 3c7d5ae · 3c7d5ae
1 parent 8777266
commit 3c7d5ae
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 2 deletions.
diff --git a/packages/tushan/client/components/list/ListTable.tsx b/packages/tushan/client/components/list/ListTable.tsx
@@ -67,6 +67,7 @@ export interface ListTableProps {
   defaultFilter?: FilterPayload;
   showTotal?: boolean;
   showSizeChanger?: boolean;
+  drawerWidth?: number;
   /**
    * Allow pass table props into table element
    */
@@ -124,7 +125,9 @@ export const ListTable: React.FC<ListTableProps> = React.memo((props) => {
   } = useGetList(resource, listParams);
   const action = props.action;
   const batchAction = props.batchAction;
-  const { showTableDrawer, drawerEl } = useListTableDrawer(props.fields);
+  const { showTableDrawer, drawerEl } = useListTableDrawer(props.fields, {
+    drawerWidth: props.drawerWidth,
+  });
   const filterFields = props.filter ?? [];
   const [selectedRowKeys, setSelectedRowKeys] = useState<Identifier[]>([]);
 

diff --git a/packages/tushan/client/components/list/ListTableDrawer.tsx b/packages/tushan/client/components/list/ListTableDrawer.tsx
@@ -14,6 +14,10 @@ export interface ListTableDrawerProps {
   fields: FieldHandler[];
   record: BasicRecord | null;
   viewType: ViewType;
+  /**
+   * Drawer width
+   * @default 680
+   */
   width?: number;
 }
 export const ListTableDrawer: React.FC<ListTableDrawerProps> = React.memo(

diff --git a/packages/tushan/client/components/list/useListTableDrawer.tsx b/packages/tushan/client/components/list/useListTableDrawer.tsx
@@ -5,7 +5,10 @@ import { useEvent } from '../../hooks/useEvent';
 import type { FieldHandler } from '../fields';
 import { ListTableDrawer } from './ListTableDrawer';
 
-export function useListTableDrawer(fields: FieldHandler[]) {
+export function useListTableDrawer(
+  fields: FieldHandler[],
+  options?: { drawerWidth?: number }
+) {
   const [visible, setVisible] = useState(false);
   const [viewType, setViewType] = useState<ViewType>('detail');
   const [record, setRecord] = useState<BasicRecord | null>(null);
@@ -26,6 +29,7 @@ export function useListTableDrawer(fields: FieldHandler[]) {
         viewType={viewType}
         fields={fields}
         record={record}
+        width={options?.drawerWidth}
       />
     ),
   };