imporve(): Drawer add extra & Modify style

packages/design/src/drawer/Drawer.tsx

@@ -6,55 +6,83 @@ import React, { useContext } from 'react';
 import { isBoolean } from 'lodash';
 import classNames from 'classnames';
 import ConfigProvider from '../config-provider';
+import type { ConfigConsumerProps } from '../config-provider';
+import defaultLocale from '../locale/en-US';
 import useStyle from './style';
 export * from 'antd/es/drawer';
 
+export interface DrawerLocale {
+  okText?: string;
+  cancelText?: string;
+}
+
 export interface DrawerProps extends AntDrawerProps {
   onOk?: (e) => void;
   onCancel?: (e) => void;
   confirmLoading?: boolean;
   footer?: React.ReactNode | boolean;
+  extra?: React.ReactNode;
   cancelText?: string;
   okText?: string;
   okButtonProps?: ButtonProps;
+  locale?: DrawerLocale;
 }
 
 const Drawer = ({
+  locale: customLocale,
   children,
   onOk,
+  onClose,
   onCancel,
-  cancelText = '取消',
-  okText = '确定',
+  cancelText, // = '取消',
+  okText, // = '确定',
   okButtonProps,
   confirmLoading = false,
   footer = true,
+  extra,
   className,
   prefixCls: customizePrefixCls,
   style = {},
   ...restProps
 }: DrawerProps) => {
+  const { locale: contextLocale = defaultLocale } = React.useContext<ConfigConsumerProps>(
+    ConfigProvider.ConfigContext
+  );
+
+  const drawerLocale: DrawerLocale = { ...contextLocale?.Drawer, ...customLocale };
+
   const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
   const prefixCls = getPrefixCls('drawer', customizePrefixCls);
   const { wrapSSR } = useStyle(prefixCls);
   const drawerCls = classNames(prefixCls, className);
 
   return wrapSSR(
     <AntDrawer
+      destroyOnClose={true}
       className={`${drawerCls}`}
       prefixCls={customizePrefixCls}
+      styles={{
+        body: {
+          marginBottom: footer ? 80 : 0,
+        },
+      }}
       style={{
         ...style,
       }}
+      onClose={onClose || onCancel}
       {...restProps}
     >
       {children}
-      {footer && (
+      {(footer || extra) && (
         <div className={`${prefixCls}-footer-content`}>
+          <div>{extra}</div>
           {isBoolean(footer) ? (
             <Space>
-              <Button onClick={onCancel}>{cancelText}</Button>
+              <Button onClick={onCancel || onClose}>
+                {cancelText || drawerLocale?.cancelText}
+              </Button>
               <Button onClick={onOk} type="primary" loading={confirmLoading} {...okButtonProps}>
-                {okText}
+                {okText || drawerLocale?.okText}
               </Button>
             </Space>
           ) : (

packages/design/src/drawer/demo/basic.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import { Drawer, Button } from '@oceanbase/design';
+import overHeight from '../../modal/demo/over-height';
 
 export default () => {
   const [open, setOpen] = useState(false);
@@ -17,19 +18,17 @@ export default () => {
       <Drawer
         open={open}
         title="Title"
-        onClose={() => {
-          setOpen(false);
-        }}
         onOk={() => {
           setOpen(false);
         }}
         onCancel={() => {
           setOpen(false);
-        }}>
-        <p>Some contents...</p>
-        <p>Some contents...</p>
-        <p>Some contents...</p>
+        }}
+      >
+        <p style={{ height: 500 }}>Some contents...</p>
+        <p style={{ height: 500 }}>Some contents...</p>
+        <p style={{ height: 500 }}>Some contents...</p>
       </Drawer>
     </>
-  )
+  );
 };

packages/design/src/drawer/demo/custom-footer.tsx

@@ -20,36 +20,31 @@ export default () => {
         onClose={() => {
           setOpen(false);
         }}
+        extra="底部说明文案"
         footer={
-          <div style={{
-            display: 'flex',
-            justifyContent: 'space-between',
-            alignItems: 'center',
-            width: '100%'
-          }}>
-            <div>底部说明文案</div>
-            <Space>
-              <Button
-                onClick={() => {
-                  setOpen(false);
-                }}>
-                取消
-              </Button>
-              <Button
-                type="primary"
-                onClick={() => {
-                  setOpen(false);
-                }}>
-                确认
-              </Button>
-            </Space>
-          </div>
+          <Space>
+            <Button
+              onClick={() => {
+                setOpen(false);
+              }}
+            >
+              取消
+            </Button>
+            <Button
+              type="primary"
+              onClick={() => {
+                setOpen(false);
+              }}
+            >
+              确认
+            </Button>
+          </Space>
         }
       >
         <p>Some contents...</p>
         <p>Some contents...</p>
         <p>Some contents...</p>
-      </Drawer >
+      </Drawer>
     </>
-  )
+  );
 };

packages/design/src/drawer/index.md

@@ -12,6 +12,7 @@ nav:
 - 🆕 新增 `cancelText` 和 `okText` 属性，用于设置 `取消` 和 `确定` 按钮的文字。
 - 🆕 新增 `okButtonProps` 属性，用于设置 `确定` 按钮的属性。
 - 🆕 新增 `confirmLoading` 属性，用于设置 `确定` 按钮的加载态。
+- 🆕 新增 `extra` 属性，用于设置 `footer` 的额外说明文案。
 
 ## 代码演示
 
@@ -29,14 +30,15 @@ nav:
 
 ## API
 
-| 参数           | 说明               | 类型                 | 默认值 | 版本 |
-| :------------- | :----------------- | :------------------- | :----- | :--- |
-| footer         | 抽屉的页脚         | boolean \| ReactNode | true   | -    |
-| onOk           | 点击确定回调       | function(e)          | -      | -    |
-| onCancel       | 点击取消按钮的回调 | function(e)          | -      | -    |
-| cancelText     | 设置取消按钮文字   | string               | 取消   | -    |
-| okText         | 确认按钮文字       | string               | 确定   | -    |
-| okButtonProps  | ok 按钮 props      | ButtonProps          | -      | -    |
-| confirmLoading | 确定按钮 loading   | boolean              | false  | -    |
+| 参数           | 说明                   | 类型                 | 默认值 | 版本 |
+| :------------- | :--------------------- | :------------------- | :----- | :--- |
+| footer         | 抽屉的页脚             | boolean \| ReactNode | true   | -    |
+| extra          | 抽屉页脚的额外说明文案 | string               | -      | -    |
+| onOk           | 点击确定回调           | function(e)          | -      | -    |
+| onCancel       | 点击取消按钮的回调     | function(e)          | -      | -    |
+| cancelText     | 设置取消按钮文字       | string               | 取消   | -    |
+| okText         | 确认按钮文字           | string               | 确定   | -    |
+| okButtonProps  | ok 按钮 props          | ButtonProps          | -      | -    |
+| confirmLoading | 确定按钮 loading       | boolean              | false  | -    |
 
 - 更多 API 详见 antd Drawer 文档: https://ant.design/components/drawer-cn

packages/design/src/drawer/style/index.ts

@@ -11,19 +11,21 @@ export const genDrawerStyle: GenerateStyle<DrawerToken> = (token: DrawerToken):
     [`${componentCls}`]: {
       [`${componentCls}-header`]: {
         padding: '20px 24px 0',
-        borderBottom: 'none',
+        borderBottom: 'none !important',
       },
       [`${componentCls}-footer-content`]: {
         position: 'absolute',
         right: 0,
         bottom: 0,
-        width: 'calc(100% - 32px)',
+        width: '100%',
         padding: 24,
-        paddingLeft: 0,
         background: token.colorBgContainer,
         zIndex: 10,
+        // display: 'flex',
+        // justifyContent: 'end',
+        // alignItems: 'center',
         display: 'flex',
-        justifyContent: 'end',
+        justifyContent: 'space-between',
         alignItems: 'center',
       },
     },

packages/design/src/locale/en-US.ts

@@ -13,4 +13,11 @@ export default {
       open: 'Open',
     },
   },
+  Drawer: {
+    // ...enUS?.Drawer,
+    // drawerFooter: {
+    okText: 'OK',
+    cancelText: 'Cancel',
+    // }
+  },
 } as Locale;

packages/design/src/locale/index.ts

@@ -1,8 +1,10 @@
 import type { Locale as AntLocale } from 'antd/es/locale';
 import type { TableLocale } from '../table';
+import type { DrawerLocale } from '../drawer';
 
 export * from 'antd/es/locale';
 
 export interface Locale extends AntLocale {
   Table?: TableLocale;
+  Drawer?: DrawerLocale;
 }

packages/design/src/locale/zh-CN.ts

@@ -13,4 +13,11 @@ export default {
       open: '展开',
     },
   },
+  Drawer: {
+    // ...zhCN?.Drawer,
+    // drawerFooter: {
+    okText: '确定',
+    cancelText: '取消',
+    // }
+  },
 } as Locale;

packages/design/src/locale/zh-TW.ts

@@ -13,4 +13,11 @@ export default {
       open: '展開',
     },
   },
+  Drawer: {
+    // ...zhTW?.Drawer,
+    // drawerFooter: {
+    okText: '确定',
+    cancelText: '取消',
+    // }
+  },
 } as Locale;