feat: notification js2css

packages/semi-ui/notification/index.tsx

@@ -1,24 +1,30 @@
-import React, { CSSProperties } from 'react';
+import React, {CSSProperties} from 'react';
 import ReactDOM from 'react-dom';
 import cls from 'classnames';
 import PropTypes from 'prop-types';
-import ConfigContext, { ContextValue } from '../configProvider/context';
+import ConfigContext, {ContextValue} from '../configProvider/context';
 import NotificationListFoundation, {
     ConfigProps, NotificationListAdapter,
     NotificationListProps,
     NotificationListState
 } from '@douyinfe/semi-foundation/notification/notificationListFoundation';
-import { cssClasses, strings } from '@douyinfe/semi-foundation/notification/constants';
+import {cssClasses, strings} from '@douyinfe/semi-foundation/notification/constants';
 import Notice from './notice';
 import BaseComponent from '../_base/baseComponent';
 import '@douyinfe/semi-foundation/notification/notification.scss';
 import getUuid from '@douyinfe/semi-foundation/utils/uuid';
 import useNotification from './useNotification';
-import { NoticeInstance, NoticePosition, NoticeProps, NoticeState } from '@douyinfe/semi-foundation/notification/notificationFoundation';
+import {
+    NoticeInstance,
+    NoticePosition,
+    NoticeProps,
+    NoticeState
+} from '@douyinfe/semi-foundation/notification/notificationFoundation';
 import CSSAnimation from "../_cssAnimation";
+
 // TODO: Automatic folding + unfolding function when there are more than N
 
-export interface NoticeReactProps extends NoticeProps{
+export interface NoticeReactProps extends NoticeProps {
     style?: CSSProperties;
 }
 
@@ -29,7 +35,8 @@ export type {
     ConfigProps
 };
 
-export type NoticesInPosition = { top: NoticeInstance[];
+export type NoticesInPosition = {
+    top: NoticeInstance[];
     topLeft: NoticeInstance[];
     topRight: NoticeInstance[];
     bottom: NoticeInstance[];
@@ -83,7 +90,7 @@ class NotificationList extends BaseComponent<NotificationListProps, Notification
                 this.noticeStorage = [...notices];
                 this.removeItemStorage = [...removedItems];
                 // setState is async sometimes and react often merges state, so use "this" , make sure other code always get right data.
-                this.setState({ notices, removedItems });
+                this.setState({notices, removedItems});
             },
             getNotices: () => this.noticeStorage,
         };
@@ -92,7 +99,7 @@ class NotificationList extends BaseComponent<NotificationListProps, Notification
     static addNotice(notice: NoticeProps) {
         const id = getUuid('notification');
         if (!ref) {
-            const { getPopupContainer } = notice;
+            const {getPopupContainer} = notice;
             const div = document.createElement('div');
             if (!this.wrapperId) {
                 this.wrapperId = getUuid('notification-wrapper').slice(0, 32);
@@ -106,11 +113,11 @@ class NotificationList extends BaseComponent<NotificationListProps, Notification
             } else {
                 document.body.appendChild(div);
             }
-            ReactDOM.render(React.createElement(NotificationList, { ref: instance => (ref = instance) }), div, () => {
-                ref.add({ ...notice, id });
+            ReactDOM.render(React.createElement(NotificationList, {ref: instance => (ref = instance)}), div, () => {
+                ref.add({...notice, id});
             });
         } else {
-            ref.add({ ...notice, id });
+            ref.add({...notice, id});
         }
         return id;
     }
@@ -124,23 +131,23 @@ class NotificationList extends BaseComponent<NotificationListProps, Notification
     }
 
     static info(opts: NoticeProps) {
-        return this.addNotice({ ...defaultConfig, ...opts, type: 'info' });
+        return this.addNotice({...defaultConfig, ...opts, type: 'info'});
     }
 
     static success(opts: NoticeProps) {
-        return this.addNotice({ ...defaultConfig, ...opts, type: 'success' });
+        return this.addNotice({...defaultConfig, ...opts, type: 'success'});
     }
 
     static error(opts: NoticeProps) {
-        return this.addNotice({ ...defaultConfig, ...opts, type: 'error' });
+        return this.addNotice({...defaultConfig, ...opts, type: 'error'});
     }
 
     static warning(opts: NoticeProps) {
-        return this.addNotice({ ...defaultConfig, ...opts, type: 'warning' });
+        return this.addNotice({...defaultConfig, ...opts, type: 'warning'});
     }
 
     static open(opts: NoticeProps) {
-        return this.addNotice({ ...defaultConfig, ...opts, type: 'default' });
+        return this.addNotice({...defaultConfig, ...opts, type: 'default'});
     }
 
     static close(id: string) {
@@ -196,41 +203,25 @@ class NotificationList extends BaseComponent<NotificationListProps, Notification
             return (
                 // @ts-ignore
                 <div placement={position} key={position} className={className} style={style}>
-                    {notices.map((notice, index) =>{
-                            const isRemoved = removedItems.find(removedItem=>removedItem===notice.id) !== undefined;
-                        return <CSSAnimation  key={notice.id}
-                                              animationState={isRemoved?"leave":"enter"}
-                                              startClassName={`${cssClasses.NOTICE}-animation-${isRemoved?"hide":"show"}_${position}`}>
-                            {({animationClassName,animationEventsNeedBind,isAnimating})=>{
-                                return isRemoved && !isAnimating ? null : <Notice
-                                    {...notice}
-                                    className={cls({
-                                        [notice.className]:Boolean(notice.className),
-                                        [animationClassName]:true,
-                                    })}
-                                    {...animationEventsNeedBind}
-                                    style={{...notice.style}}
-                                    close={this.remove}
-                                />
-                            }}
-                        </CSSAnimation>
-                    }
-                        // (notice.motion ? (
-                        //     <NoticeTransition key={notice.id || index} position={position} motion={notice.motion}>
-                        //         {removedItems.find(item => item.id === notice.id) ?
-                        //             null :
-                        //             transitionStyle => (
-                        //                 <Notice
-                        //                     {...notice}
-                        //                     style={{ ...transitionStyle, ...notice.style }}
-                        //                     key={notice.id}
-                        //                     close={this.remove}
-                        //                 />
-                        //             )}
-                        //     </NoticeTransition>
-                        // ) : (
-                        //     <Notice {...notice} style={{ ...notice.style }} key={notice.id} close={this.remove} />
-                        // ))
+                    {notices.map((notice, index) => {
+                            const isRemoved = removedItems.find(removedItem => removedItem.id === notice.id) !== undefined;
+                            return <CSSAnimation key={notice.id}
+                                                 animationState={isRemoved ? "leave" : "enter"}
+                                                 startClassName={`${cssClasses.NOTICE}-animation-${isRemoved ? "hide" : "show"}_${position}`}>
+                                {({animationClassName, animationEventsNeedBind, isAnimating}) => {
+                                    return isRemoved && !isAnimating ? null : <Notice
+                                        {...notice}
+                                        className={cls({
+                                            [notice.className]: Boolean(notice.className),
+                                            [animationClassName]: true,
+                                        })}
+                                        {...animationEventsNeedBind}
+                                        style={{...notice.style}}
+                                        close={this.remove}
+                                    />
+                                }}
+                            </CSSAnimation>
+                        }
                     )}
                 </div>
             );
@@ -250,8 +241,8 @@ class NotificationList extends BaseComponent<NotificationListProps, Notification
     }
 
     render() {
-        let { notices } = this.state;
-        const { removedItems } = this.state;
+        let {notices} = this.state;
+        const {removedItems} = this.state;
         notices = Array.from(new Set([...notices, ...removedItems]));
         const noticesInPosition: NoticesInPosition = {
             top: [],

packages/semi-ui/toast/index.tsx

@@ -221,7 +221,7 @@ const createBaseToast = () => class ToastList extends BaseComponent<ToastListPro
         return (
             <React.Fragment>
                 {list.map((item, index) =>{
-                    const isRemoved = removedItems.find(removedItem=>removedItem===item) !== undefined;
+                    const isRemoved = removedItems.find(removedItem=>removedItem.id===item.id) !== undefined;
                     return <CSSAnimation key={item.id} motion={item.motion} animationState={isRemoved?"leave":"enter"} startClassName={isRemoved?`${cssClasses.PREFIX}-animation-hide`:`${cssClasses.PREFIX}-animation-show`}>
                         {
                             ({animationClassName,animationEventsNeedBind,isAnimating})=>{