-
Notifications
You must be signed in to change notification settings - Fork 106
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
refactor: Refactor Notification with pure hooks version (#206)
* chore: init * feat: open & close * chore: base func * test: notification test * test: more test case * test: more test case * docs: Demo update
- Loading branch information
Showing
21 changed files
with
1,365 additions
and
1,026 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,97 +1,136 @@ | ||
| @notificationPrefixCls: rc-notification; | ||
|
|
||
| .@{notificationPrefixCls} { | ||
| // ====================== Notification ====================== | ||
| position: fixed; | ||
| z-index: 1000; | ||
| display: flex; | ||
| max-height: 100vh; | ||
| padding: 10px; | ||
| overflow-y: auto; | ||
| align-items: flex-end; | ||
|
|
||
| // Position | ||
| &-top, | ||
| &-topLeft, | ||
| &-topRight { | ||
| top: 0; | ||
| flex-direction: column; | ||
| } | ||
|
|
||
| &-topRight { | ||
| right: 0; | ||
| } | ||
|
|
||
| // ========================= Notice ========================= | ||
| &-notice { | ||
| padding: 7px 20px 7px 10px; | ||
| border-radius: 3px 3px; | ||
| border: 1px solid #999;; | ||
| box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); | ||
| border: 0px solid rgba(0, 0, 0, 0);; | ||
| background: #fff; | ||
| position: relative; | ||
| display: block; | ||
| box-sizing: border-box; | ||
| width: auto; | ||
| margin: 12px 0; | ||
| line-height: 1.5; | ||
| position: relative; | ||
| margin: 10px 0; | ||
| background: #fff; | ||
| border: 1px solid #999; | ||
| border: 0px solid rgba(0, 0, 0, 0); | ||
| border-radius: 3px 3px; | ||
| box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); | ||
|
|
||
| &-closable { | ||
| // Content | ||
| &-content { | ||
| padding: 7px 20px 7px 10px; | ||
| } | ||
|
|
||
| &-closable &-content { | ||
| padding-right: 20px; | ||
| } | ||
|
|
||
| &-close { | ||
| position: absolute; | ||
| right: 5px; | ||
| top: 3px; | ||
| right: 5px; | ||
| color: #000; | ||
| cursor: pointer; | ||
| outline: none; | ||
| font-size: 16px; | ||
| font-weight: 700; | ||
| font-size: 16px; | ||
| line-height: 1; | ||
| text-decoration: none; | ||
| text-shadow: 0 1px 0 #fff; | ||
| outline: none; | ||
| cursor: pointer; | ||
| opacity: 0.2; | ||
| filter: alpha(opacity=20); | ||
| opacity: .2; | ||
| text-decoration: none; | ||
|
|
||
| &-x:after { | ||
| content: '×'; | ||
| } | ||
|
|
||
| &:hover { | ||
| text-decoration: none; | ||
| opacity: 1; | ||
| filter: alpha(opacity=100); | ||
| text-decoration: none; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| .fade-effect() { | ||
| animation-duration: 0.3s; | ||
| animation-fill-mode: both; | ||
| animation-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2); | ||
| &-fade { | ||
| overflow: hidden; | ||
| transition: all 0.3s; | ||
| } | ||
|
|
||
| &-fade-appear, | ||
| &-fade-enter { | ||
| &-fade-appear-start { | ||
| transform: translateX(100%); | ||
| opacity: 0; | ||
| .fade-effect(); | ||
| animation-play-state: paused; | ||
| } | ||
|
|
||
| &-fade-leave { | ||
| .fade-effect(); | ||
| animation-play-state: paused; | ||
| &-fade-appear-active { | ||
| transform: translateX(0); | ||
| opacity: 1; | ||
| } | ||
|
|
||
| &-fade-appear&-fade-appear-active, | ||
| &-fade-enter&-fade-enter-active { | ||
| animation-name: rcNotificationFadeIn; | ||
| animation-play-state: running; | ||
| } | ||
| // .fade-effect() { | ||
| // animation-duration: 0.3s; | ||
| // animation-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2); | ||
| // animation-fill-mode: both; | ||
| // } | ||
|
|
||
| &-fade-leave&-fade-leave-active { | ||
| animation-name: rcDialogFadeOut; | ||
| animation-play-state: running; | ||
| } | ||
| // &-fade-appear, | ||
| // &-fade-enter { | ||
| // opacity: 0; | ||
| // animation-play-state: paused; | ||
| // .fade-effect(); | ||
| // } | ||
|
|
||
| @keyframes rcNotificationFadeIn { | ||
| 0% { | ||
| opacity: 0; | ||
| } | ||
| 100% { | ||
| opacity: 1; | ||
| } | ||
| } | ||
| // &-fade-leave { | ||
| // .fade-effect(); | ||
| // animation-play-state: paused; | ||
| // } | ||
|
|
||
| @keyframes rcDialogFadeOut { | ||
| 0% { | ||
| opacity: 1; | ||
| } | ||
| 100% { | ||
| opacity: 0; | ||
| } | ||
| } | ||
| // &-fade-appear&-fade-appear-active, | ||
| // &-fade-enter&-fade-enter-active { | ||
| // animation-name: rcNotificationFadeIn; | ||
| // animation-play-state: running; | ||
| // } | ||
|
|
||
| // &-fade-leave&-fade-leave-active { | ||
| // animation-name: rcDialogFadeOut; | ||
| // animation-play-state: running; | ||
| // } | ||
|
|
||
| // @keyframes rcNotificationFadeIn { | ||
| // 0% { | ||
| // opacity: 0; | ||
| // } | ||
| // 100% { | ||
| // opacity: 1; | ||
| // } | ||
| // } | ||
|
|
||
| // @keyframes rcDialogFadeOut { | ||
| // 0% { | ||
| // opacity: 1; | ||
| // } | ||
| // 100% { | ||
| // opacity: 0; | ||
| // } | ||
| // } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| ## context | ||
|
|
||
| <code src="../examples/context.tsx"> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| ## maxCount | ||
|
|
||
| <code src="../examples/maxCount.tsx"> |
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,41 @@ | ||
| /* eslint-disable no-console */ | ||
| import React from 'react'; | ||
| import '../../assets/index.less'; | ||
| import { useNotification } from '../../src'; | ||
| import motion from './motion'; | ||
|
|
||
| const Context = React.createContext({ name: 'light' }); | ||
|
|
||
| const NOTICE = { | ||
| content: <span>simple show</span>, | ||
| onClose() { | ||
| console.log('simple close'); | ||
| }, | ||
| // duration: null, | ||
| }; | ||
|
|
||
| const Demo = () => { | ||
| const [{ open }, holder] = useNotification({ motion }); | ||
|
|
||
| return ( | ||
| <Context.Provider value={{ name: 'bamboo' }}> | ||
| <button | ||
| type="button" | ||
| onClick={() => { | ||
| open({ | ||
| ...NOTICE, | ||
| content: <Context.Consumer>{({ name }) => `Hi ${name}!`}</Context.Consumer>, | ||
| props: { | ||
| 'data-testid': 'my-data-testid', | ||
| }, | ||
| }); | ||
| }} | ||
| > | ||
| simple show | ||
| </button> | ||
| {holder} | ||
| </Context.Provider> | ||
| ); | ||
| }; | ||
|
|
||
| export default Demo; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,48 +1,91 @@ | ||
| /* eslint-disable no-console */ | ||
| import React from 'react'; | ||
| import Notification from 'rc-notification'; | ||
| import '../../assets/index.less'; | ||
| import { NotificationInstance } from 'rc-notification/Notification'; | ||
| import { useNotification } from '../../src'; | ||
| import motion from './motion'; | ||
|
|
||
| let notificationInstance: NotificationInstance = null; | ||
| Notification.newInstance({}, n => { | ||
| notificationInstance = n; | ||
| }); | ||
| export default () => { | ||
| const [notice, contextHolder] = useNotification({ motion, closable: true }); | ||
|
|
||
| const Context = React.createContext({ name: 'light' }); | ||
| return ( | ||
| <> | ||
| <div> | ||
| <div> | ||
| {/* Default */} | ||
| <button | ||
| onClick={() => { | ||
| notice.open({ | ||
| content: `${new Date().toISOString()}`, | ||
| }); | ||
| }} | ||
| > | ||
| Basic | ||
| </button> | ||
|
|
||
| const NOTICE = { | ||
| content: <span>simple show</span>, | ||
| onClose() { | ||
| console.log('simple close'); | ||
| }, | ||
| // duration: null, | ||
| }; | ||
| {/* Not Close */} | ||
| <button | ||
| onClick={() => { | ||
| notice.open({ | ||
| content: `${new Date().toISOString()}`, | ||
| duration: null, | ||
| }); | ||
| }} | ||
| > | ||
| Not Auto Close | ||
| </button> | ||
| </div> | ||
|
|
||
| const Demo = () => { | ||
| const [notice, holder] = notificationInstance.useNotification(); | ||
| <div> | ||
| {/* No Closable */} | ||
| <button | ||
| onClick={() => { | ||
| notice.open({ | ||
| content: `No Close! ${new Date().toISOString()}`, | ||
| duration: null, | ||
| closable: false, | ||
| key: 'No Close', | ||
| onClose: () => { | ||
| console.log('Close!!!'); | ||
| }, | ||
| }); | ||
| }} | ||
| > | ||
| No Closable | ||
| </button> | ||
|
|
||
| return ( | ||
| <Context.Provider value={{ name: 'bamboo' }}> | ||
| <button | ||
| type="button" | ||
| onClick={() => { | ||
| notificationInstance.notice({ ...NOTICE }); | ||
| notice({ | ||
| ...NOTICE, | ||
| content: <Context.Consumer>{({ name }) => `Hi ${name}!`}</Context.Consumer>, | ||
| props: { | ||
| 'data-testid': 'my-data-testid', | ||
| }, | ||
| }); | ||
| notificationInstance.notice({ ...NOTICE }); | ||
| }} | ||
| > | ||
| simple show | ||
| </button> | ||
| {holder} | ||
| </Context.Provider> | ||
| {/* Force Close */} | ||
| <button | ||
| onClick={() => { | ||
| notice.close('No Close'); | ||
| }} | ||
| > | ||
| Force Close No Closable | ||
| </button> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div> | ||
| {/* Destroy All */} | ||
| <button | ||
| onClick={() => { | ||
| notice.destroy(); | ||
| }} | ||
| > | ||
| Destroy All | ||
| </button> | ||
| </div> | ||
|
|
||
| <div> | ||
| {/* Top & Bottom */} | ||
| <button | ||
| onClick={() => { | ||
| notice.destroy(); | ||
| }} | ||
| > | ||
| Destroy All | ||
| </button> | ||
| </div> | ||
| {contextHolder} | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| export default Demo; |
Oops, something went wrong.
2a2dd67There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Successfully deployed to the following URLs:
notification – ./
notification-react-component.vercel.app
notification-iota.vercel.app
notification-git-master-react-component.vercel.app