|
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