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

Can't pass both classes and styles in #2

Open
serle opened this issue Sep 30, 2015 · 1 comment
Open

Can't pass both classes and styles in #2

serle opened this issue Sep 30, 2015 · 1 comment

Comments

@serle
Copy link

serle commented Sep 30, 2015

Scenario, I have a width property on a control. The user of the control can either pass in a classname or a pixel width. The rest of my themes are specified in the theme object as global classes. The theme function picks either style or className, but does not allow a mix.

Here is my re-write:

require('babel-polyfill');

function is_string(str) {
return (typeof(str) === 'string' || str instanceof String);
}

export default theme => (key, ...names) => {
const classes = names
.map(name => theme[name])
.filter(v => is_string(v))
.filter(v => v);

const styles = names
.map(name => theme[name])
.filter(v => !is_string(v))
.filter(v => v);

let result = { key: key };
if (classes.length > 0) result.className = classes.join(' ');
if (styles.length > 0) result.style = Object.assign({}, ...styles);

return result;
};

@dmfutcher
Copy link

Just ran into this problem, can be worked around with className hacks right now, but frustrating. Do you intend to add support for this @markdalgleish?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants