-
Notifications
You must be signed in to change notification settings - Fork 90
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat(Toaster): add "has" method #439
Conversation
Preview is ready. |
dc6a46b
to
e1c6a68
Compare
e1c6a68
to
b378f6b
Compare
src/components/Toaster/README.md
Outdated
| type | `string` | | `undefined` | Notification type. Possible values: `error`, `success`. If `type` is set, icon (success/error) will be added into notification title. _By default there is no icon_ | | ||
| isClosable | `boolean` | | `true` | Configuration that manages visibility of cross icon, which allows to close notification | | ||
| actions | `ToastAction[]` | | `undefined` | Array of [actions](./types.ts#L9) which displays after `content` | | ||
| onMount | `ToastLifecycleCallback` | | `undefined` | Callback. Fired when corresponding toast component mount | |
There 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.
I think callback
word is redundant
onUnmount({props, element: heightProps.ref.current}); | ||
} | ||
}; | ||
}, []); |
There 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.
Why there are no onMount
, onUnmount
dependencies here?
There 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.
I don't want to do smth when onMount
or onUnmount
changes.
onMount
and onUnmount
should fired only once during corresponding stages.
Using React.useEffect
without deps is common pattern for this case as I know.
Actual value of these functions will be used when time comes.
There 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.
I think it is a little bit unfair. Component does not detect changing of this props. Maybe you should add ref that stores value isMount
and use it in effect
There 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.
Ok. I'll leave it up to Alexey @ogonkov :)
There 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.
What task do we solve here? We need callbacks for toast addition and deletion events, right? If so, it is better to call them from appropriate methods from ToasterProvider
(add, remove, removeAll).
The main goal is to provide API that helps developers to understand when they cannot reuse (update) old toast and have to create another one. I chose to provide unmount event because it is easy to understand API and solves my problem not ideal but well enough. The problem with Maybe it will be better to provide a |
b378f6b
to
2dc4998
Compare
Can you provide example of usage of this api? |
I need smth like this:
There is several ways to solve my problem:
As I already mentioned. But may be you suggest the best way! |
eb3cf89
to
70e73ca
Compare
describe('api.has', () => { | ||
it('should return false when toast is not added', () => { | ||
const providerAPI = setup(); | ||
expect(providerAPI.has('unexisted toasts')).toBeFalsy(); |
There 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.
toBe(false)
you interested in returning boolean from api, not some falsy value
There 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.
Fixed!
c0cfcc9
to
4061b95
Compare
@@ -60,20 +60,28 @@ export const ToasterProvider = React.forwardRef<ToasterPublicMethods, Props>( | |||
[], | |||
); | |||
|
|||
const toastsRef = React.useRef<InternalToastProps[]>(); | |||
toastsRef.current = toasts; |
There 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.
React documentation recommends not writing or reading ref.current
during rendering https://beta.reactjs.org/reference/react/useRef#caveats
There 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.
Fixed
3f3335a
to
a5ee38a
Compare
No description provided.