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