-
-
Notifications
You must be signed in to change notification settings - Fork 32.5k
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
[POC] Styled render callback component and refactored withStyles #9503
Changes from 1 commit
1362466
a36895b
f045ce6
73fbad0
bf74fdd
a56befa
0fe9008
8be0604
52e2603
bb911be
f42d156
c042d5c
caece9a
926db46
8ff4562
e4934e5
7abdf6d
7717eba
7060920
ff5a53d
a41f9e8
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,18 +1,27 @@ | ||
import React from 'react'; | ||
import PropTypes from 'prop-types'; | ||
import hoistNonReactStatics from 'hoist-non-react-statics'; | ||
import wrapDisplayName from 'recompose/wrapDisplayName'; | ||
import Styled from './Styled'; | ||
|
||
// Wrap a component in `Styled` to provide classes. | ||
const withStyles = (stylesOrCreator, options = {}) => Component => { | ||
const Style = props => { | ||
const { classes, ...componentProps } = props; | ||
return ( | ||
<Styled styles={stylesOrCreator} options={options} Component={Component}> | ||
{styledProps => <Component {...styledProps} {...props} />} | ||
<Styled classes={classes} Component={Component} options={options} styles={stylesOrCreator}> | ||
{styledProps => <Component {...styledProps} {...componentProps} />} | ||
</Styled> | ||
); | ||
}; | ||
|
||
Style.propTypes = { | ||
/** | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Do we need this? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I mean, the propTypes ? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
|
||
* Useful to extend the style applied to components. | ||
*/ | ||
classes: PropTypes.object, | ||
}; | ||
|
||
if (process.env.NODE_ENV !== 'production') { | ||
Style.displayName = wrapDisplayName(Component, 'withStyles'); | ||
} | ||
|
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.
This is an example where the render callback pattern is better.
withTheme
andinnerRef
are HOC options not necessary usingStyled
. With a render callback pattern, the child chooses what it uses and what it ignores (e.g.theme
), and theinnerRef
indirection is unnecessary because the parent can put theref
where ever it chooses. This code shows what it took to match the various current usage patterns of the HOC.