diff --git a/src/app/atoms/Input.react.js b/src/app/atoms/Input.react.js index 739a392..c90d9bd 100644 --- a/src/app/atoms/Input.react.js +++ b/src/app/atoms/Input.react.js @@ -8,7 +8,6 @@ import * as colors from '../styles/Colors'; export default class Input extends Component { static propTypes = { inheritedStyles: RPT.oneOfType([RPT.array, RPT.object]), - key: RPT.string, kind: RPT.oneOf([ 'inputDefault', 'inputSearch' diff --git a/src/app/component/Variants.react.js b/src/app/component/Variants.react.js index df4fed8..d9b9d84 100644 --- a/src/app/component/Variants.react.js +++ b/src/app/component/Variants.react.js @@ -1,12 +1,14 @@ +import _ from 'lodash'; import AtomPreview from '../atoms/AtomPreview.react'; import Component from 'react-pure-render/component'; -import {fromJS} from 'immutable'; import headingStyles from '../styles/Headings'; import Radium from 'radium'; import React, {PropTypes as RPT} from 'react'; import renderProp from '../../libraries/renderProp'; import SourceCode from './SourceCode.react'; import styles from '../styles/Sources'; +import variantChecksum from '../../libraries/variantChecksum'; +import {fromJS} from 'immutable'; @Radium export default class Variants extends Component { @@ -53,13 +55,36 @@ export default class Variants extends Component { renderEnumVariant(key, name, value) { if (typeof value === 'object') - return this.renderVariants(key, name, value.map(text => text.get('value').replace(/\'/g, ''))) + return this.renderVariants(key, name, value.map(text => text.get('value').replace(/\'/g, '')).toJS()) return null } + collectVariants(key, type, variants) { + const {atom, componentProps} = this.props + + return variants.map(variant => { + const variantProps = componentProps.set(key, variant) + + return { + atom, + key, + type, + variant, + variantProps, + checksum: variantChecksum({atom, variantProps, context: this.context}), + } + }) + } + renderVariants(key, type, variants) { const {headingColor} = this.props + const collection = this.collectVariants(key, type, variants); + const uniqCollection = _.uniqBy(collection, i => i.checksum); + + if (uniqCollection.length < 2) + return null; + return (
@@ -69,15 +94,13 @@ export default class Variants extends Component { > Prop variant: {key} - {variants.map(variant => this.renderVariant(key, type, variant))} + {collection.map(item => this.renderVariant(item))}
) } - renderVariant(key, type, variant) { - const {atom, componentProps} = this.props - const variantProps = componentProps.set(key, variant) + renderVariant({atom, key, type, variant, variantProps}) { const source = `<${atom.get('componentName')} ${renderProp(key, type, variant)} />` return ( diff --git a/src/libraries/variantChecksum.js b/src/libraries/variantChecksum.js new file mode 100644 index 0000000..31f518c --- /dev/null +++ b/src/libraries/variantChecksum.js @@ -0,0 +1,34 @@ +import AtomPreview from '../app/atoms/AtomPreview.react'; +import React, {PropTypes as RPT} from 'react'; +import ReactDOM from 'react-dom/server'; + +const variantChecksum = ({atom, variantProps, context}) => { + const Context = contextCreator(context); + const html = ReactDOM.renderToStaticMarkup( + + + + ) + const pureHtml = html.replace(/<([a-zA-Z]+)\s?([^>])+>/ig, '<$1>'); + const style = (html.match(/style="[^"]+"/ig) || []).toString(); + const classes = (html.match(/class="[^"]+"/ig) || []).toString(); + return JSON.stringify([pureHtml, style, classes]); +} + +const contextCreator = (context) => class ContextProvider extends React.Component { + static childContextTypes = Object.keys(context).reduce((out, key)=> ({...out, [key]: RPT.any}), {}); + + static propTypes = { + children: RPT.node + } + + getChildContext() { + return context; + } + + render() { + return this.props.children; + } +} + +export default variantChecksum;