-
Notifications
You must be signed in to change notification settings - Fork 55
[WIP] BREAKING(refs): add support of automatic refs #509
Conversation
status={{ | ||
color: 'green', | ||
icon: 'check', | ||
title: 'Available', | ||
size: Status.defaultProps.size * 1.5, | ||
size: 48, |
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 will move this to a separate PR.
/** | ||
* A status graphically represents someone's or something's state. | ||
*/ | ||
export default forwardRefFactory(Status) |
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.
One of side effects, a component's description should be on export
.
export const isForwardRefComponent = (Component: React.ReactType): boolean => | ||
// Heads up! | ||
// Any is used there because type's definitions do not contain this internal property. | ||
typeof Component === 'object' && (Component as any).$$typeof === ForwardRef |
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.
is it part of public API?
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.
Nope, and it's a problem. I don't know any other way to perform this check, I have even made a codesandbox that shows my problem: https://codesandbox.io/s/kwkw3pq1k3
I'm open for better proposals there.
22513db
to
91c086d
Compare
91c086d
to
1a6c0bd
Compare
Refs #417.
This PR will add automatic refs to all our components. The basic idea of this is quite simple, I tried to document it in comments however I also want to describe it separately in this PR.
1. Wrap all our components with
forwardRef()
forwardRef()
is a single API that allows you to pass down refs to elements. In fact,forwardRefFactory()
is only a wrapper around it. We will wrap all components with it.This means that we will receive a
ref
in our factory and catch it:2. Pass down intercepted refs
forwardRefSymbol
prop.forwardRefSymbol
is a simple prop we will have it in unhandled propsElementType
element it will work without any code changes