fix(drawer): use percent width

DTStack · Jan 22, 2025 · 20f67a4 · 20f67a4
1 parent 7a40fef
commit 20f67a4
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 16 deletions.
diff --git a/src/drawer/__tests/__snapshots__/index.test.tsx.snap b/src/drawer/__tests/__snapshots__/index.test.tsx.snap
@@ -18,7 +18,7 @@ exports[`test Drawer  snapshot match 1`] = `
         />
         <div
           class="dtc-drawer-content-wrapper"
-          style="width: 1000px;"
+          style="width: 69.44444444444444%;"
         >
           <div
             aria-modal="true"

diff --git a/src/drawer/__tests/index.test.tsx b/src/drawer/__tests/index.test.tsx
@@ -62,7 +62,7 @@ describe('test Drawer ', () => {
             </Drawer>
         );
         expect(document.querySelector('.dtc-drawer-content-wrapper')).toHaveStyle({
-            width: '1256px',
+            width: `${(1256 / 1440) * 100}%`,
         });
     });
     test('should render className/style correct', () => {

diff --git a/src/drawer/index.tsx b/src/drawer/index.tsx
@@ -22,6 +22,12 @@ export enum DrawerType {
     Normal = 'normal',
 }
 
+enum DrawerSize {
+    Small = 720,
+    Default = 1000,
+    Large = 1256,
+}
+
 interface NormalDrawerProps extends Omit<AntdDrawerProps, 'placement'> {
     size?: 'small' | 'default' | 'large';
     loading?: boolean;
@@ -53,12 +59,12 @@ function isControlled<T extends readOnlyTab>(props: DrawerProps<T>): props is Ta
     return 'activeKey' in props;
 }
 
-export type DrawerProps<T extends readOnlyTab> = TabsDrawerProps<T> | NormalDrawerProps;
+export type DrawerProps<T extends readOnlyTab = any> = TabsDrawerProps<T> | NormalDrawerProps;
 
 const getWidthFromSize = (size: NormalDrawerProps['size']) => {
-    if (size === 'small') return 720;
-    if (size === 'large') return 1256;
-    return 1000;
+    if (size === 'small') return `${(DrawerSize.Small / 1440) * 100}%`;
+    if (size === 'large') return `${(DrawerSize.Large / 1440) * 100}%`;
+    return `${(DrawerSize.Default / 1440) * 100}%`;
 };
 
 const isValidBanner = (banner: NormalDrawerProps['banner']): banner is AlertProps['message'] => {
@@ -67,7 +73,7 @@ const isValidBanner = (banner: NormalDrawerProps['banner']): banner is AlertProp
 };
 
 const Drawer = <T extends readOnlyTab>(props: DrawerProps<T>) => {
-    const slidePrefixCls = 'dtc-drawer';
+    const drawerPrefixCls = 'dtc-drawer';
 
     const {
         open,
@@ -89,7 +95,7 @@ const Drawer = <T extends readOnlyTab>(props: DrawerProps<T>) => {
     const finalWidth = width ?? getWidthFromSize(size);
     const isFormType = type === DrawerType.Form;
 
-    const [internalTabKey, setInternalTabKey] = useState('');
+    const [internalTabKey, setInternalTabKey] = useState<TabKey<T>>('');
 
     useEffect(() => {
         open &&
@@ -102,7 +108,7 @@ const Drawer = <T extends readOnlyTab>(props: DrawerProps<T>) => {
     const renderButton = () => {
         return (
             <img
-                className={`${slidePrefixCls}-icon`}
+                className={`${drawerPrefixCls}-icon`}
                 onClick={onClose}
                 src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAABwCAYAAAAE0LDPAAAAAXNSR0IArs4c6QAAAnlJREFUaEPtmk9IVHEQx78jufpw7ykouuEaBG6dEmrXOmRRt476VgvyEngKlNqQMu3PoSU7iCBq4CW2olNdRMRr7HasnnZb0y57WGODzUDjt/RIonbeyzfQYd51h/m8+c7395u3MOSs5Xexr4dKRLt5AhYJtbPRaNO7velo/4Bf6YhoB8B0R3vzNSLaNr8ECnBRRLTc0d583kBEAJU3J5o6HG0ZkgTs1OBATAxgqqghTIoCiPBeFABQSRggZFOxg/anC0ElYq9JlUglYhVgA9RFKhGrABugLlKJWAXYAHWRSsQqwAaoi1QiVgE2gHVRejKDUKgWQ1cvmj/XbMLfA3jA42dwVvPo7+tBd/xo8ICNzQLG7y3AskIYvz2IcEO9LwhbgcmWebGCpeUcEvEYBvrOBg8ol7cxOjaP4lYJqZEkIm2NniGeKjDZ3mQ/YPbJa7S1NiI1YntuuGeAgTx8lMHqx3XYvWdwOnHMUxW+AJufC7hzdwH1VggTt64gHLZYiC+Ayfb85QoWl3KIn+jEpeS54AHlb98xOjaHYrGEG8M2DkWaqkJ8V2CyZd86mJl7hdaWg7h5PVm14f8EMJD0zxM+ePkCuo4f+WsV/ycgm3MwMy8k0d4mp4ZtRIJusmvTxMlODNgB21T8oLlXRbK3B6cS3maDZxeJXnbudb315Wvl9AZ+XbsDpzseQ3/QA+fTRgET9wVHpvmqcNbWK6PSjEy/D9vkB+mnaLDq5D5b/L6x7+8iBbBNVolUItYDKpFKxCrABqiLVCJWATZAXaQSsQqwAeoilYhVgA1QFzESCS8wia9giS6Rma1B0TU40UU+sVVEoWXK6uugPwBjVkdxauLcgwAAAABJRU5ErkJggg=="
                 alt="closeBtn"
@@ -122,19 +128,19 @@ const Drawer = <T extends readOnlyTab>(props: DrawerProps<T>) => {
             mask={isFormType ? true : mask}
             maskClosable={isFormType ? false : maskClosable}
             width={finalWidth}
-            prefixCls={slidePrefixCls}
+            prefixCls={drawerPrefixCls}
             onClose={onClose}
             {...rest}
             {...motionProps}
         >
             {!isFormType && renderButton()}
-            <Spin wrapperClassName={`${slidePrefixCls}-nested-loading`} spinning={loading}>
+            <Spin wrapperClassName={`${drawerPrefixCls}-nested-loading`} spinning={loading}>
                 {title && (
-                    <div className={`${slidePrefixCls}-header`}>
+                    <div className={`${drawerPrefixCls}-header`}>
                         {title}
                         {isFormType && (
                             <CloseOutlined
-                                className={`${slidePrefixCls}-header--icon`}
+                                className={`${drawerPrefixCls}-header--icon`}
                                 onClick={onClose}
                             />
                         )}
@@ -152,21 +158,21 @@ const Drawer = <T extends readOnlyTab>(props: DrawerProps<T>) => {
                         destroyInactiveTabPane
                         activeKey={currentKey}
                         onChange={handleChangeKey}
-                        className={`${slidePrefixCls}-tabs`}
+                        className={`${drawerPrefixCls}-tabs`}
                     >
                         {props.tabs?.map((tab: { key: string; title: React.ReactNode }) => (
                             <Tabs.TabPane tab={tab.title} key={tab.key} />
                         ))}
                     </Tabs>
                 )}
                 <div
-                    className={classNames(`${slidePrefixCls}-body`, bodyClassName)}
+                    className={classNames(`${drawerPrefixCls}-body`, bodyClassName)}
                     style={bodyStyle}
                 >
                     {isFunction(props) ? props.children?.(currentKey ?? '') : props.children}
                 </div>
                 {footer ? (
-                    <div className={classNames(`${slidePrefixCls}-footer`)}>{footer}</div>
+                    <div className={classNames(`${drawerPrefixCls}-footer`)}>{footer}</div>
                 ) : null}
             </Spin>
         </RcDrawer>