From b5b6963dc11ed7e2138327327fd9c2679c6f22d0 Mon Sep 17 00:00:00 2001 From: Krzysztof Gutkowski Date: Fri, 11 Nov 2016 10:14:01 +0100 Subject: [PATCH] addFiles property seems missleading #4 (#5) * replaced addFiles property with addStyleFiles #4 * 1.1.0 * removed console.log --- CHANGELOG.md | 3 +++ README.md | 8 ++++---- package.json | 2 +- src/stories/index.js | 2 +- src/tests/index.js | 4 ++-- src/themeit.js | 13 ++++++++++--- 6 files changed, 21 insertions(+), 11 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index b9227bd..a1fb051 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,8 @@ # Change Log +### v1.1.0 +- **enhanced** ```addFiles``` property replace with ```addStyleFiles```, as it's more self-explanatory (#4 by @BonneVoyager) + ### v1.0.0 - **enhanced** ```addFiles``` now can actually handle multiple files (#3) - **new** ```mergeContext``` option (#2) diff --git a/README.md b/README.md index 2466212..91e5814 100644 --- a/README.md +++ b/README.md @@ -58,7 +58,7 @@ export default () => ( require(['./additionalStyles.less', './someMoreStyles.css'], cb) } + addStyleFiles={cb => require(['./additionalStyles.less', './someMoreStyles.css'], cb) } /> ); ``` @@ -73,7 +73,7 @@ export default () => ( `})` A component which is wrapped with *themeit* accepts these additional props: -- `addFiles` *(func)*: a function to pass additional theme classes to the component +- `addStyleFiles` *(func)*: a function to pass additional theme classes to the component - `styles` *(object)*: additional js css styles to be passed to the component (will be processed with *aphrodite*) The target component will receive the combined style classes in a property called `styles`. @@ -137,9 +137,9 @@ You might want to define themes / style information for the keys with themeit. If you were to use the calculator widget however, you'd also want to pass new/additional style information for the keys to the calculator widget. -One way to deal with this would be to accept a separate prop like ```stylesForKeys``` or ```addFilesForKeys``` and pass these props down to each individual key. However, this sucks. +One way to deal with this would be to accept a separate prop like ```stylesForKeys``` or ```addStyleFilesForKeys``` and pass these props down to each individual key. However, this sucks. -Instead, you may just use the ```addFiles``` prop to pass style information for the whole widget + its themeable child components. And utilize the ```mergeContext``` option to merge all style information for the Key components. +Instead, you may just use the ```addStyleFiles``` prop to pass style information for the whole widget + its themeable child components. And utilize the ```mergeContext``` option to merge all style information for the Key components. **b)** Ignore parent styles information and create a new styles context from the component diff --git a/package.json b/package.json index 4379d4f..5ecb89f 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-themeit", - "version": "1.0.0", + "version": "1.1.0", "description": "themeit makes it easy to create and use different themes for your react components while using CSS Modules or JS style objects.", "repository": { "type": "git", diff --git a/src/stories/index.js b/src/stories/index.js index 1394f52..990bb55 100644 --- a/src/stories/index.js +++ b/src/stories/index.js @@ -29,6 +29,6 @@ storiesOf('Label', module) .add('additional .css file', () => ( )); diff --git a/src/tests/index.js b/src/tests/index.js index f26c1f3..6f01f83 100644 --- a/src/tests/index.js +++ b/src/tests/index.js @@ -31,11 +31,11 @@ describe('themeit', () => { expect(html.match(/boldText_/g)).to.have.length(1); }); - it('should accept multiple files passed by addFiles property function', () => { + it('should accept multiple files passed by addStyleFiles property function', () => { const comp = mount( cb( + addStyleFiles={cb => cb( require('./styles/test1'), require('./styles/test2') )} diff --git a/src/themeit.js b/src/themeit.js index 66f4db4..ae9bd2c 100644 --- a/src/themeit.js +++ b/src/themeit.js @@ -48,7 +48,7 @@ export default function themeit(opts) { styles: PropTypes.object, // optional css imports to be added // (must be a function which calls cb(classMap1, classMap2)) - addFiles: PropTypes.func, + addStyleFiles: PropTypes.func, }; static defaultProps = { @@ -129,8 +129,15 @@ export default function themeit(opts) { // add styles from defined themes to our styles array styles = styles.concat(parseThemes(theme, themes)); - // if addFiles is defined, push the addFiles function to the styles array - if (props.addFiles) styles.push(props.addFiles); + // if addStyleFiles is defined, push the addStyleFiles function to the styles array + if (props.addStyleFiles) styles.push(props.addStyleFiles); + + // if addStyleFiles is defined, push the addStyleFiles function to the styles array + if (props.addFiles) { + console.warn("(react-themeit) 'addFiles' is deprecated and will be removed " + + "in the next major version. Use 'addStyleFiles' instead."); + styles.push(props.addFiles); + } // if a styles object is defined in props, add it also to our styles array if (props.styles) styles.push(props.styles);