Skip to content

Instantly share code, notes, and snippets.

@ajwagner777
Created March 14, 2016 13:27
Show Gist options
  • Save ajwagner777/3e24635fa9327e39dacc to your computer and use it in GitHub Desktop.
Save ajwagner777/3e24635fa9327e39dacc to your computer and use it in GitHub Desktop.
A way to dynamically specify React.js components
import React, { Component } from "react"
import OCFacetText from "./oc-facet-text"
import OCFacetNumber from "./oc-facet-number"
import OCFacetNumberRange from "./oc-facet-numberrange"
import OCFacetBoolean from "./oc-facet-boolean"
import OCFacetCheckbox from "./oc-facet-checkbox"
import OCFacetRadio from "./oc-facet-radio"
import OCFacetDate from "./oc-facet-date"
import OCFacetDateTime from "./oc-facet-datetime"
import OCFacetDateRange from "./oc-facet-daterange"
import OCFacetDateTimeRange from "./oc-facet-datetimerange"
import OCFacetSelect from "./oc-facet-select"
class OffCanvas extends Component {
constructor(props) {
super(props)
}
componentDidMount() {
// Removed stuff that is not relevant
}
render() {
let facetMap = {
"text": OCFacetText,
"number": OCFacetNumber,
"numberrange": OCFacetNumberRange,
"boolean": OCFacetBoolean,
"checkbox": OCFacetCheckbox,
"radio": OCFacetRadio,
"date": OCFacetDate,
"datetime": OCFacetDateTime,
"daterange": OCFacetDateRange,
"datetimerange": OCFacetDateTimeRange,
"select": OCFacetSelect
},
facetComps = props.facets.map(function (f) {
var CompName = facetMap[f.type]
return <CompName key={f.id}
id={f.id}
data={f.data}
{...f.options} />
})
return (
<div>
{facetComps}
</div>
)
}
}
OffCanvas.propTypes = {
title: React.PropTypes.string,
helperText: React.PropTypes.string,
cancelText: React.PropTypes.string,
submitText: React.PropTypes.string
};
OffCanvas.defaultProps = {
title: "Filter",
cancelText: "Clear",
submitText: "Apply"
};
export {
OffCanvas
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment