diff --git a/src/packages/backtop/backtop.tsx b/src/packages/backtop/backtop.tsx index 8f6fd59d789b238db416f06df93f73c334114b6d..b7de190591da1faf38077b26b18daeeeca14f9d7 100644 --- a/src/packages/backtop/backtop.tsx +++ b/src/packages/backtop/backtop.tsx @@ -52,8 +52,8 @@ export const BackTop: FunctionComponent> = (props) => { } const [backTop, SetBackTop] = useState(false) const [scrollTop, SetScrollTop] = useState(0) - const [startTime, SetStartTime] = useState(0) - let scrollEl: any = elId ? useRef(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> = (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> = (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> = (props) => { const goTop = (e: any) => { backTopClick(e) let otime = +new Date() - SetStartTime(otime) + startTime = otime isAnimation && duration > 0 ? scrollAnimation() : scroll() } diff --git a/src/packages/toast/Notification-copy.tsx b/src/packages/toast/Notification-copy.tsx new file mode 100644 index 0000000000000000000000000000000000000000..d2eeb0864c54be1e75a337a5905ee8397bdd0e41 --- /dev/null +++ b/src/packages/toast/Notification-copy.tsx @@ -0,0 +1,144 @@ +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 { + 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 ( + <> +
+
+ {icon ? ( +

+ +

+ ) : null} + + {msg} +
+
+ + ) + } +} + +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(, element) +} diff --git a/src/packages/toast/Notification.tsx b/src/packages/toast/Notification.tsx index ac20ca2f656563963420b826549f4272cf2099d3..f5966b28e0841de0a7af685228ea53b669aa5050 100644 --- a/src/packages/toast/Notification.tsx +++ b/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 ) : null} - {message} + {msg} diff --git a/src/packages/toast/toast-copy.tsx b/src/packages/toast/toast-copy.tsx new file mode 100644 index 0000000000000000000000000000000000000000..6d8a2a2d15d70a981f718875306e0d5591f6c275 --- /dev/null +++ b/src/packages/toast/toast-copy.tsx @@ -0,0 +1,119 @@ +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 = {}) { + const { duration = 2 } = option + options.duration = duration + }, +} diff --git a/src/packages/toast/toast.tsx b/src/packages/toast/toast.tsx index d8b675911f3605e8845f888f53e45441fd578f07..98c5426681ab3f115819f8b047dcbcaced0f208e 100644 --- a/src/packages/toast/toast.tsx +++ b/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) {