feat: 返回顶部增加动画过渡

src/packages/backtop/backtop.tsx

@@ -52,8 +52,8 @@ export const BackTop: FunctionComponent<Partial<BackTopProps>> = (props) => {
   }
   const [backTop, SetBackTop] = useState(false)
   const [scrollTop, SetScrollTop] = useState(0)
-  const [startTime, SetStartTime] = useState(0)
-  let scrollEl: any = elId ? useRef<HTMLElement>(document.getElementById(elId)) : (window as Window)
+  let startTime = 0
+  let scrollEl: any = elId ? document.getElementById(elId) : (window as Window)
   //初始化
   useEffect(() => {
     init()
@@ -85,9 +85,7 @@ export const BackTop: FunctionComponent<Partial<BackTopProps>> = (props) => {
     if (scrollEl instanceof Window) {
       window.scrollTo(0, y)
     } else {
-      let dom = document.getElementById(elId)
-      dom?.scrollTo(0, y)
-      //   scrollEl.scrollTop = y
+      scrollEl.scrollTop = y
     }
   }
 
@@ -95,7 +93,6 @@ export const BackTop: FunctionComponent<Partial<BackTopProps>> = (props) => {
     let cid = requestAniFrame()(function fn() {
       var t = duration - Math.max(0, startTime - +new Date() + duration)
       var y = (t * -scrollTop) / duration + scrollTop
-      //   console.log('animi', t, y, startTime, duration, scrollTop)
       scroll(y)
       cid = requestAniFrame()(fn)
       if (t == duration || y == 0) {
@@ -132,7 +129,7 @@ export const BackTop: FunctionComponent<Partial<BackTopProps>> = (props) => {
   const goTop = (e: any) => {
     backTopClick(e)
     let otime = +new Date()
-    SetStartTime(otime)
+    startTime = otime
     isAnimation && duration > 0 ? scrollAnimation() : scroll()
   }
 

src/packages/toast/Notification-copy.tsx

+import * as React from 'react'
+import * as ReactDOM from 'react-dom'
+import bem from '@/utils/bem'
+import Icon from '../icon/index'
+import './toast.scss'
+export interface NotificationProps {
+  prefixCls?: string
+  style?: React.CSSProperties
+  icon?: string
+  msg: string | React.ReactNode
+  bottom?: boolean
+  duration?: number
+  center: boolean
+  type: string
+  customClass: string
+  size: string | number
+  textAlignCenter: boolean
+  loadingRotate: boolean
+  bgColor: string
+  cover: boolean
+  coverColor: string
+  closeOnClickOverlay: boolean
+  onClose: () => void
+  className?: string
+}
+
+interface State {
+  show: boolean
+}
+
+export default class Notification extends React.PureComponent<NotificationProps, State> {
+  static defaultProps = {
+    // prefixCls: 'nut-toast',
+    style: {},
+    show: false,
+    duration: 3,
+    msg: '',
+    id: '',
+    center: true, // 未实现
+    type: 'text',
+    customClass: '', // 未实现
+    bottom: 30, // 未实现
+    size: 'base', // 未实现
+    icon: null, // 未实现
+    textAlignCenter: true, // 未实现
+    loadingRotate: true, // 未实现
+    bgColor: 'rgba(0, 0, 0, .8)',
+    onClose: null, // 未实现
+    cover: false, //透明遮罩层 // 未实现
+    coverColor: 'rgba(0, 0, 0, 0)', // 未实现
+    closeOnClickOverlay: false, // 未实现
+  }
+  private closeTimer: number | undefined
+  static newInstance: (properties: NotificationProps, callback: any) => void
+  constructor(props: NotificationProps) {
+    super(props)
+    this.close = this.close.bind(this)
+    this.startCloseTimer = this.startCloseTimer.bind(this)
+    this.clearCloseTimer = this.clearCloseTimer.bind(this)
+    this.close = this.close.bind(this)
+    this.state = {
+      show: true,
+    }
+  }
+
+  close() {
+    this.setState({
+      show: false,
+    })
+    this.clearCloseTimer()
+    this.props.onClose()
+  }
+
+  startCloseTimer() {
+    const { duration } = this.props
+    if (duration) {
+      this.closeTimer = window.setTimeout(() => {
+        this.close()
+      }, duration * 1000)
+    }
+  }
+
+  clearCloseTimer() {
+    if (this.closeTimer) {
+      clearTimeout(this.closeTimer)
+      this.closeTimer = -1
+    }
+  }
+
+  componentDidMount() {
+    this.startCloseTimer()
+  }
+
+  componentWillUnmount() {
+    this.clearCloseTimer()
+  }
+
+  render() {
+    const { style, icon, msg, bottom } = this.props
+    const { show } = this.state
+    const toastBem = bem('toast')
+    return (
+      <>
+        <div className={toastBem()} style={{ bottom: 'auto', backgroundColor: 'rgba(0, 0, 0, 0)' }}>
+          <div
+            className={toastBem('inner')}
+            style={{ bottom: 'auto', backgroundColor: 'rgba(0, 0, 0, .8)' }}
+          >
+            {icon ? (
+              <p className={toastBem('icon-wrapper')}>
+                <Icon name={icon ? icon : ''} size="20" />
+              </p>
+            ) : null}
+
+            <span className={toastBem('text')}>{msg}</span>
+          </div>
+        </div>
+      </>
+    )
+  }
+}
+
+Notification.newInstance = (properties, callback) => {
+  const element = document.createElement('div')
+  document.body.appendChild(element)
+
+  let called = false
+  function ref(instance: any) {
+    if (called) {
+      return
+    }
+    called = true
+
+    callback({
+      component: instance,
+      destroy() {
+        ReactDOM.unmountComponentAtNode(element)
+        element && element.parentNode && element.parentNode.removeChild(element)
+      },
+    })
+  }
+
+  ReactDOM.render(<Notification {...properties} ref={ref} />, element)
+}

src/packages/toast/Notification.tsx

@@ -7,7 +7,7 @@ export interface NotificationProps {
   prefixCls?: string
   style?: React.CSSProperties
   icon?: string
-  message: string | React.ReactNode
+  msg: string | React.ReactNode
   bottom?: boolean
   duration?: number
   onClose: () => void
@@ -72,7 +72,7 @@ export default class Notification extends React.PureComponent<NotificationProps,
   }
 
   render() {
-    const { style, icon, message, bottom } = this.props
+    const { style, icon, msg, bottom } = this.props
     const { show } = this.state
     const toastBem = bem('toast')
     return (
@@ -88,7 +88,7 @@ export default class Notification extends React.PureComponent<NotificationProps,
               </p>
             ) : null}
 
-            <span className={toastBem('text')}>{message}</span>
+            <span className={toastBem('text')}>{msg}</span>
           </div>
         </div>
       </>

src/packages/toast/toast-copy.tsx

+import * as React from 'react'
+import Icon from '../icon/index'
+import Notification, { NotificationProps } from './Notification'
+import classNames from 'classnames'
+// const { JiaZai } = Icon
+let messageInstance: any = null
+interface IToastOptions {
+  id: string
+  msg: string
+  duration: number
+  center: boolean
+  type: string
+  customClass: string
+  bottom: number
+  size: string | number
+  icon: string
+  textAlignCenter: boolean
+  loadingRotate: boolean
+  bgColor: string
+  onClose: Function
+  cover: boolean
+  coverColor: string
+  closeOnClickOverlay: boolean
+}
+// const SHORT = 3//展示秒数
+const options: IToastOptions = {
+  msg: '',
+  id: '',
+  duration: 1.5,
+  center: true, // 未实现
+  type: 'text',
+  customClass: '', // 未实现
+  bottom: 30, // 未实现
+  size: 'base', // 未实现
+  icon: '', // 未实现
+  textAlignCenter: true, // 未实现
+  loadingRotate: true, // 未实现
+  bgColor: 'rgba(0, 0, 0, .8)',
+  onClose: () => {}, // 未实现
+  cover: false, //透明遮罩层 // 未实现
+  coverColor: 'rgba(0, 0, 0, 0)', // 未实现
+  closeOnClickOverlay: false, // 未实现
+}
+
+function getInstance(props: NotificationProps, callback: (notification: any) => void) {
+  if (messageInstance) {
+    messageInstance.destroy()
+    messageInstance = null
+  }
+
+  Notification.newInstance(props, (notification: any) => {
+    return callback && callback(notification)
+  })
+}
+
+function notice(
+  msg: string | React.ReactNode,
+  icon: any,
+  duration = options.duration,
+  onClose: (() => void) | undefined | null
+) {
+  function close() {
+    if (messageInstance) {
+      messageInstance.destroy()
+      messageInstance = null
+    }
+    if (onClose) {
+      onClose()
+    }
+  }
+
+  getInstance(
+    {
+      msg,
+      icon,
+      duration,
+      onClose: close,
+    },
+    (notification: any) => {
+      messageInstance = notification
+    }
+  )
+}
+
+export default {
+  text(msg: string | React.ReactNode, duration?: number, onClose?: () => void) {
+    return notice(msg, null, duration, onClose)
+  },
+  success(msg: string | React.ReactNode, duration?: number, icon?: string, onClose?: () => void) {
+    return notice(msg, icon ? icon : 'success', duration, onClose)
+  },
+  fail(msg: string | React.ReactNode, duration?: number, icon?: string, onClose?: () => void) {
+    return notice(msg, icon ? icon : 'failure', duration, onClose)
+  },
+  loading(msg: string | React.ReactNode, duration?: number, icon?: string, onClose?: () => void) {
+    return notice(msg, icon ? icon : 'loading', duration, onClose)
+  },
+  warn(msg: string | React.ReactNode, duration?: number, icon?: string, onClose?: () => void) {
+    return notice(msg, icon ? icon : 'tips', duration, onClose)
+  },
+  customIcon(
+    msg: string | React.ReactNode,
+    duration?: number,
+    icon?: string,
+    onClose?: () => void
+  ) {
+    return notice(msg, icon ? icon : null, duration, onClose)
+  },
+  hide() {
+    if (messageInstance) {
+      messageInstance.destroy()
+      messageInstance = null
+    }
+  },
+  config(option: Partial<IToastOptions> = {}) {
+    const { duration = 2 } = option
+    options.duration = duration
+  },
+}

src/packages/toast/toast.tsx

@@ -23,7 +23,7 @@ function getInstance(props: NotificationProps, callback: (notification: any) =>
 }
 
 function notice(
-  message: string | React.ReactNode,
+  msg: string | React.ReactNode,
   icon: any,
   duration = options.duration,
   onClose: (() => void) | undefined | null
@@ -40,7 +40,7 @@ function notice(
 
   getInstance(
     {
-      message,
+      msg,
       icon,
       duration,
       onClose: close,
@@ -54,38 +54,28 @@ function notice(
 export default {
   SHORT,
   LONG: 8,
-  text(message: string | React.ReactNode, duration?: number, onClose?: () => void) {
-    return notice(message, null, duration, onClose)
+  text(msg: string | React.ReactNode, duration?: number, onClose?: () => void) {
+    return notice(msg, null, duration, onClose)
   },
-  success(
-    message: string | React.ReactNode,
-    duration?: number,
-    icon?: string,
-    onClose?: () => void
-  ) {
-    return notice(message, icon ? icon : 'success', duration, onClose)
+  success(msg: string | React.ReactNode, duration?: number, icon?: string, onClose?: () => void) {
+    return notice(msg, icon ? icon : 'success', duration, onClose)
   },
-  fail(message: string | React.ReactNode, duration?: number, icon?: string, onClose?: () => void) {
-    return notice(message, icon ? icon : 'failure', duration, onClose)
+  fail(msg: string | React.ReactNode, duration?: number, icon?: string, onClose?: () => void) {
+    return notice(msg, icon ? icon : 'failure', duration, onClose)
   },
-  loading(
-    message: string | React.ReactNode,
-    duration?: number,
-    icon?: string,
-    onClose?: () => void
-  ) {
-    return notice(message, icon ? icon : 'loading', duration, onClose)
+  loading(msg: string | React.ReactNode, duration?: number, icon?: string, onClose?: () => void) {
+    return notice(msg, icon ? icon : 'loading', duration, onClose)
   },
-  warn(message: string | React.ReactNode, duration?: number, icon?: string, onClose?: () => void) {
-    return notice(message, icon ? icon : 'tips', duration, onClose)
+  warn(msg: string | React.ReactNode, duration?: number, icon?: string, onClose?: () => void) {
+    return notice(msg, icon ? icon : 'tips', duration, onClose)
   },
   customIcon(
-    message: string | React.ReactNode,
+    msg: string | React.ReactNode,
     duration?: number,
     icon?: string,
     onClose?: () => void
   ) {
-    return notice(message, icon ? icon : null, duration, onClose)
+    return notice(msg, icon ? icon : null, duration, onClose)
   },
   hide() {
     if (messageInstance) {