|
1 | | -import React from 'react'; |
2 | | -import PropTypes from 'prop-types'; |
3 | | -import {defaultProps, propTypes} from '../components/{{cookiecutter.component_name}}.react'; |
4 | | - |
5 | | -/** |
6 | | - * ExampleComponent is an example component. |
7 | | - * It takes a property, `label`, and |
8 | | - * displays it. |
9 | | - * It renders an input with the property `value` |
10 | | - * which is editable by the user. |
11 | | - */ |
12 | | -const {{cookiecutter.component_name}} = (props) => { |
13 | | - const {id, label, setProps, value} = props; |
14 | | - |
15 | | - return ( |
16 | | - <div id={id}> |
17 | | - ExampleComponent: {label} |
18 | | - <input |
19 | | - value={value} |
20 | | - onChange={ |
21 | | - /* |
22 | | - * Send the new value to the parent component. |
23 | | - * setProps is a prop that is automatically supplied |
24 | | - * by dash's front-end ("dash-renderer"). |
25 | | - * In a Dash app, this will update the component's |
26 | | - * props and send the data back to the Python Dash |
27 | | - * app server if a callback uses the modified prop as |
28 | | - * Input or State. |
29 | | - */ |
30 | | - e => setProps({ value: e.target.value }) |
31 | | - } |
32 | | - /> |
33 | | - </div> |
34 | | - ); |
35 | | -} |
36 | | - |
37 | | - |
38 | | -{{cookiecutter.component_name}}.defaultProps = defaultProps; |
39 | | -{{cookiecutter.component_name}}.propTypes = propTypes; |
40 | | - |
41 | | -export default {{cookiecutter.component_name}}; |
| 1 | +{% if cookiecutter.component_type == "Function Component" -%} |
| 2 | + {%- include 'cookiecutter_templates/FunctionComponent.react.js' -%} |
| 3 | +{%- else -%} |
| 4 | + {%- include 'cookiecutter_templates/ClassComponent.react.js' -%} |
| 5 | +{%- endif -%} |
0 commit comments