feat(alert): support className and ref (#1713)

Co-authored-by: maxin <maxin@growingio.com>
growingio · Dec 22, 2021 · 573c24c · 573c24c · vercel · Dec 22, 2021
1 parent 6e11233
commit 573c24c
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 59 deletions.
diff --git a/src/alert/Alert.tsx b/src/alert/Alert.tsx
@@ -12,62 +12,62 @@ import {
 import IconButton from '../button/IconButton';
 import { AlertProps } from './interfaces';
 
-export const Alert: React.FC<AlertProps> = ({
-  message,
-  description,
-  closeable,
-  showIcon = false,
-  onClose,
-  icon,
-  type = 'info',
-  style,
-  ...restProps
-}: AlertProps) => {
-  const prefixCls = usePrefixCls('alert');
-  const [alertStatus, setAlertStatus] = useState(true);
+export const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
+  (
+    { message, description, closeable, showIcon = false, onClose, icon, type = 'info', className, ...restProps },
+    ref
+  ) => {
+    const prefixCls = usePrefixCls('alert');
+    const [alertStatus, setAlertStatus] = useState(true);
 
-  const getIcon = () => {
-    switch (type) {
-      case 'success':
-        return <CheckCircleFilled />;
-      case 'warning':
-        return <WarningCircleFilled />;
-      case 'error':
-        return <CloseCircleFilled />;
-      case 'info':
-        return <InfoCircleFilled />;
-      default:
-        return icon || <InfoCircleFilled />;
-    }
-  };
+    const getIcon = () => {
+      switch (type) {
+        case 'success':
+          return <CheckCircleFilled />;
+        case 'warning':
+          return <WarningCircleFilled />;
+        case 'error':
+          return <CloseCircleFilled />;
+        case 'info':
+          return <InfoCircleFilled />;
+        default:
+          return icon || <InfoCircleFilled />;
+      }
+    };
 
-  const closeAlert = () => {
-    setAlertStatus(false);
-    onClose?.();
-  };
+    const closeAlert = () => {
+      setAlertStatus(false);
+      onClose?.();
+    };
 
-  return alertStatus ? (
-    <div style={style} className={classnames(prefixCls, `${prefixCls}-${type}`)} data-testid="alert" {...restProps}>
-      {showIcon && <div className={classnames(`${prefixCls}-icon`)}>{getIcon()}</div>}
-      <div className={classnames(showIcon ? null : `${prefixCls}-content-no-icon`, `${prefixCls}-content`)}>
-        {message && <div className={classnames(`${prefixCls}-content-title`)}>{message}</div>}
-        {message && description && <div className={classnames(`${prefixCls}-content-gap`)} />}
-        {description && <div className={classnames(`${prefixCls}-content-description`)}>{description}</div>}
+    return alertStatus ? (
+      <div
+        className={classnames(prefixCls, `${prefixCls}-${type}`, className)}
+        data-testid="alert"
+        ref={ref}
+        {...restProps}
+      >
+        {showIcon && <div className={classnames(`${prefixCls}-icon`)}>{getIcon()}</div>}
+        <div className={classnames(`${prefixCls}-content`, { [`${prefixCls}-content-no-icon`]: !showIcon })}>
+          {message && <div className={classnames(`${prefixCls}-content-title`)}>{message}</div>}
+          {message && description && <div className={classnames(`${prefixCls}-content-gap`)} />}
+          {description && <div className={classnames(`${prefixCls}-content-description`)}>{description}</div>}
+        </div>
+        {closeable && (
+          <IconButton
+            className={classnames(`${prefixCls}-closeButton`)}
+            onClick={closeAlert}
+            tabIndex={0}
+            onKeyPress={_.noop}
+            type="text"
+            size="small"
+          >
+            <CloseOutlined />
+          </IconButton>
+        )}
       </div>
-      {closeable && (
-        <IconButton
-          className={classnames(`${prefixCls}-closeButton`)}
-          onClick={closeAlert}
-          tabIndex={0}
-          onKeyPress={_.noop}
-          type="text"
-          size="small"
-        >
-          <CloseOutlined />
-        </IconButton>
-      )}
-    </div>
-  ) : null;
-};
+    ) : null;
+  }
+);
 
 export default Alert;
diff --git a/src/alert/interfaces.ts b/src/alert/interfaces.ts
@@ -1,4 +1,4 @@
-export interface AlertProps {
+export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
   /**
    指定警告提示的样式
    */
@@ -27,8 +27,4 @@ export interface AlertProps {
    关闭时触发的回调函数
    */
   onClose?: () => void;
-  /**
-   外层div样式
-   */
-  style?: React.CSSProperties;
 }
diff --git a/src/alert/style/index.less b/src/alert/style/index.less
@@ -48,7 +48,7 @@
     width: 30px;
     margin: 0;
     padding: 0;
-    font-weight: @weight-font-semi-bold;
+    font-weight: 600;
     border: none;
     cursor: pointer;
   }