Skip to content
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

Fix theme prop usage in StyledNativeComponent #2576

Merged
Changes from all commits
Commits
File filter...
Filter file types
Jump to…
Jump to file or symbol
Failed to load files and symbols.

Always

Just for now

@@ -6,6 +6,9 @@ _The format is based on [Keep a Changelog](http://keepachangelog.com/) and this

## Unreleased

- Fix `theme` prop for styled native components, also fixes `theme` in
`defaultProps` for them.

- Remove validation in Babel macro, by [@mAAdhaTTah](http://github.com/mAAdhaTTah) (see [#2427](https://github.com/styled-components/styled-components/pull/2427))

## [v4.2.0] - 2019-03-23
@@ -184,7 +184,7 @@ function useStyledComponentImpl<Config: {}, Instance>(
// NOTE: the non-hooks version only subscribes to this when !componentStyle.isStatic,
// but that'd be against the rules-of-hooks. We could be naughty and do it anyway as it
// should be an immutable value, but behave for now.
const theme = determineTheme((props: any), useContext(ThemeContext), defaultProps);
const theme = determineTheme((props: any), useContext(ThemeContext), defaultProps) || EMPTY_OBJECT;

const utils = useDeprecationWarnings(displayName);
const [context, attrs] = useResolvedAttrs(theme, props, componentAttrs, utils);
@@ -76,13 +76,10 @@ class StyledNativeComponent extends Component<*, *> {

const { defaultProps, displayName, target } = forwardedComponent;

let generatedStyles;
if (theme !== undefined) {
const themeProp = determineTheme(this.props, theme, defaultProps);
generatedStyles = this.generateAndInjectStyles(themeProp, this.props);
} else {
generatedStyles = this.generateAndInjectStyles(theme || EMPTY_OBJECT, this.props);
}
const generatedStyles = this.generateAndInjectStyles(
determineTheme(this.props, theme, defaultProps) || EMPTY_OBJECT,
this.props,
);

const propsForElement = {
...this.attrs,
@@ -295,6 +295,37 @@ describe('native', () => {
style: [{}],
});
});

it('theme prop works', () => {
const Comp = styled.Text`
color: ${({theme}) => theme.myColor};
`;

const wrapper = TestRenderer.create(
<Comp theme={{myColor: 'red'}}>Something else</Comp>
);
const text = wrapper.root.findByType('Text');

expect(text.props.style).toMatchObject(
[{"color": "red"}],
);
});

it('theme in defaultProps works', () => {
const Comp = styled.Text`
color: ${({theme}) => theme.myColor};
`;
Comp.defaultProps = {theme: {myColor: 'red'}}

const wrapper = TestRenderer.create(
<Comp>Something else</Comp>
);
const text = wrapper.root.findByType('Text');

expect(text.props.style).toMatchObject(
[{"color": "red"}],
);
});
});

describe('expanded API', () => {
ProTip! Use n and p to navigate between commits in a pull request.
You can’t perform that action at this time.