diff --git a/src/index.js b/src/index.js index a4b01a2..bd7a1d8 100644 --- a/src/index.js +++ b/src/index.js @@ -11,3 +11,8 @@ export default theme => (key, ...names) => { { key, className: styles.join(' ') } : { key, style: assign({}, ...styles) }; }; + +export const autokey = (fnc) => { + let autoKey = 1 + return (...names) => fnc(autoKey++, ...names) +} diff --git a/test/index.js b/test/index.js index f367437..d403752 100644 --- a/test/index.js +++ b/test/index.js @@ -1,6 +1,5 @@ -import themeable from '../src'; +import themeable, { autokey } from '../src'; import { expect } from 'chai'; - describe('className', () => { const classes = { foo: 'aaa', bar: 'bbb' }; const classTheme = themeable(classes); @@ -79,3 +78,59 @@ describe('style', () => { }); }); + +describe('autokey', () => { + const classes = { foo: 'aaa', bar: 'bbb' }; + const styles = { + foo: { + color: 'red', + fontSize: '16px' + }, + bar: { + color: 'blue', + fontWeight: 'bold' + } + }; + const classTheme = autokey(themeable(classes)); + const styleTheme = autokey(themeable(styles)); + + it('should return a single class', () => { + expect(classTheme('foo')) + .to.deep.equal({ + key: 1, + className: classes.foo + }); + }); + + it('should return multiple classes', () => { + expect(classTheme('foo', 'bar')) + .to.deep.equal({ + key: 2, + className: `${classes.foo} ${classes.bar}` + }); + }); + + it('should return a single style', () => { + expect(styleTheme('foo')) + .to.deep.equal({ + key: 1, + style: { + color: 'red', + fontSize: '16px' + } + }); + }); + + it('should return multiple styles merged', () => { + expect(styleTheme('foo', 'bar')) + .to.deep.equal({ + key: 2, + style: { + fontSize: '16px', + color: 'blue', + fontWeight: 'bold' + } + }); + }); + +});