refactor(Drawer): 重构Drawer,移除Icon组件依赖 (#893,#845)

uiwjs · Aug 6, 2022 · 77cd515 · 77cd515
1 parent 607f977
commit 77cd515
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 7 deletions.
diff --git a/packages/react-drawer/README.md b/packages/react-drawer/README.md
@@ -18,6 +18,7 @@ import Drawer from '@uiw/react-drawer';
 ```jsx mdx:preview&background=#fff&codeSandbox=true&codePen=true
 import React from 'react';
 import { Drawer, ButtonGroup, Button } from 'uiw';
+import { Information } from '@uiw/icons/lib/Information'
 
 class Demo extends React.Component {
   constructor() {
@@ -39,6 +40,7 @@ class Demo extends React.Component {
           title="抽屉标题"
           isOpen={this.state.visible}
           onClose={this.onClose.bind(this)}
+          icon={<Information style={{ width: 16 }}/>}
         >
           React 可以非常轻松地创建用户交互界面。为你应用的每一个状态设计简洁的视图，在数据改变时 React 也可以高效地更新渲染界面。
           <br /><br />
@@ -69,6 +71,7 @@ export default Demo
 ```jsx mdx:preview&background=#fff&codeSandbox=true&codePen=true
 import React from 'react';
 import { Drawer, ButtonGroup, Button } from 'uiw';
+import { Information } from '@uiw/icons/lib/Information'
 
 class Demo extends React.Component {
   constructor() {
@@ -89,7 +92,7 @@ class Demo extends React.Component {
       <div>
         <Drawer
           title="抽屉标题"
-          icon="information"
+          icon={<Information style={{ width: 16 }}/>}
           placement={this.state.placement}
           isOpen={this.state.visible}
           footer="页脚，可以放点内容"
@@ -183,7 +186,7 @@ export default Demo
 | 参数 | 说明 | 类型 | 默认值 |
 |--------- |-------- |--------- |-------- |
 | title | 抽屉标题 | String | - |
-| icon | 设置对话框右上角图标 | String/Element | - |
+| icon | 设置对话框右上角图标 | React.ReactNode | - |
 | isOpen | 是否可见 | Boollean | - |
 | closable | 是否显示右上角的关闭按钮 | Boollean | `true` |
 | placement | 抽屉的方向 | Enum{`top`, `right`, `bottom`, `left`} | `right` |

diff --git a/packages/react-drawer/src/index.tsx b/packages/react-drawer/src/index.tsx
@@ -1,7 +1,8 @@
 import React, { useMemo } from 'react';
-import Overlay, { OverlayProps } from '@uiw/react-overlay';
-import Icon, { IconProps } from '@uiw/react-icon';
+import { OverlayProps } from '@uiw/react-overlay';
+import { Close } from '@uiw/icons/lib/Close';
 import Button from '@uiw/react-button';
+import { IconStyleBase } from '@uiw/react-icon';
 import { HTMLDivProps } from '@uiw/utils';
 import {
   DrawerWrap,
@@ -15,7 +16,7 @@ import {
 
 export interface DrawerProps extends OverlayProps {
   footer?: React.ReactNode;
-  icon?: IconProps['type'];
+  icon?: React.ReactNode;
   title?: React.ReactNode;
   bodyProps?: HTMLDivProps;
   placement?: 'top' | 'right' | 'bottom' | 'left';
@@ -54,7 +55,7 @@ export default (props: DrawerProps = {}) => {
     () => (footer ? <DrawerFooterWrap className={`${prefixCls}-footer`}>{footer}</DrawerFooterWrap> : null),
     [footer],
   );
-  const iconView = useMemo(() => (icon ? <Icon type={icon} /> : null), [icon]);
+  const iconView = icon; // useMemo(() => (icon ? <Icon type={icon} /> : null), [icon]);
   const titleView = useMemo(() => (title ? <h4>{title}</h4> : null), [title]);
 
   return (
@@ -71,7 +72,9 @@ export default (props: DrawerProps = {}) => {
           <DrawerHeaderWrap className={`${prefixCls}-header`}>
             {iconView}
             {titleView}
-            {title && isCloseButtonShown && <Button basic onClick={props.onClose} icon="close" type="light" />}
+            {title && isCloseButtonShown && (
+              <Button basic onClick={props.onClose} icon={<IconStyleBase as={Close} />} type="light" />
+            )}
           </DrawerHeaderWrap>
         )}
         <DrawerBodyWrap className={`${prefixCls}-body`}>