Merge pull request #157 from aeltanawy/add-function-component

Add function components

Author: T4rk1n

cookiecutter.json

@@ -9,6 +9,7 @@
   "github_org": "",
   "description": "Project Description",
   "use_async": ["False", "True"],
+  "component_type": ["Function Component", "Class Component"],
   "license": [
     "MIT License",
     "BSD License",

hooks/post_gen_project.py

@@ -50,7 +50,6 @@ def _execute_command(cmd):
     os.remove(os.path.join(os.getcwd(), 'src', 'lib', 'LazyLoader.js'))
 
 
-
 if install_deps != 'True':
     print('`install_dependencies` is false!!', file=sys.stderr)
     print('Please create a venv in your project root'

…cutter_templates/AsyncComponent.react.js …emplates/AsyncFunctionComponent.react.js{{cookiecutter.project_shortname}}/cookiecutter_templates/AsyncComponent.react.js renamed to {{cookiecutter.project_shortname}}/cookiecutter_templates/AsyncFunctionComponent.react.js {{cookiecutter.project_shortname}}/cookiecutter_templates/AsyncComponent.react.js renamed to {{cookiecutter.project_shortname}}/cookiecutter_templates/AsyncFunctionComponent.react.js

@@ -1,4 +1,4 @@
-import React, {Component} from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import { {{cookiecutter.component_name}} as RealComponent } from '../LazyLoader';
 
@@ -9,15 +9,13 @@ import { {{cookiecutter.component_name}} as RealComponent } from '../LazyLoader'
  * It renders an input with the property `value`
  * which is editable by the user.
  */
-export default class {{cookiecutter.component_name}} extends Component {
-    render() {
-        return (
-            <React.Suspense fallback={null}>
-                <RealComponent {...this.props}/>
-            </React.Suspense>
-        );
-    }
-}
+const {{cookiecutter.component_name}} = (props) => {
+    return (
+        <React.Suspense fallback={null}>
+            <RealComponent {...props}/>
+        </React.Suspense>
+    );
+};
 
 {{cookiecutter.component_name}}.defaultProps = {};
 
@@ -44,6 +42,7 @@ export default class {{cookiecutter.component_name}} extends Component {
     setProps: PropTypes.func
 };
 
+export default {{cookiecutter.component_name}};
 
 export const defaultProps = {{cookiecutter.component_name}}.defaultProps;
-export const propTypes = {{cookiecutter.component_name}}.propTypes;
+export const propTypes = {{ cookiecutter.component_name }}.propTypes;

…ookiecutter_templates/Component.react.js …cutter_templates/ClassComponent.react.js{{cookiecutter.project_shortname}}/cookiecutter_templates/Component.react.js renamed to {{cookiecutter.project_shortname}}/cookiecutter_templates/ClassComponent.react.js {{cookiecutter.project_shortname}}/cookiecutter_templates/Component.react.js renamed to {{cookiecutter.project_shortname}}/cookiecutter_templates/ClassComponent.react.js

@@ -0,0 +1,61 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+
+/**
+ * ExampleComponent is an example component.
+ * It takes a property, `label`, and
+ * displays it.
+ * It renders an input with the property `value`
+ * which is editable by the user.
+ */
+const {{cookiecutter.component_name}} = (props) => {
+    const {id, label, setProps, value} = props;
+
+    return (
+        <div id={id}>
+            ExampleComponent: {label}&nbsp;
+            <input
+                value={value}
+                onChange={
+                    /*
+                        * Send the new value to the parent component.
+                        * setProps is a prop that is automatically supplied
+                        * by dash's front-end ("dash-renderer").
+                        * In a Dash app, this will update the component's
+                        * props and send the data back to the Python Dash
+                        * app server if a callback uses the modified prop as
+                        * Input or State.
+                        */
+                    e => setProps({ value: e.target.value })
+                }
+            />
+        </div>
+    );
+}
+
+{{cookiecutter.component_name}}.defaultProps = {};
+
+{{cookiecutter.component_name}}.propTypes = {
+    /**
+     * The ID used to identify this component in Dash callbacks.
+     */
+    id: PropTypes.string,
+
+    /**
+     * A label that will be printed when this component is rendered.
+     */
+    label: PropTypes.string.isRequired,
+
+    /**
+     * The value displayed in the input.
+     */
+    value: PropTypes.string,
+
+    /**
+     * Dash-assigned callback that should be called to report property changes
+     * to Dash, to make them available for callbacks.
+     */
+    setProps: PropTypes.func
+};
+
+export default {{cookiecutter.component_name}};

{{cookiecutter.project_shortname}}/cookiecutter_templates/FunctionComponent.react.js

@@ -1,32 +1,24 @@
 /* eslint no-magic-numbers: 0 */
-import React, {Component} from 'react';
+import React, { useState } from 'react';
 
 import { {{cookiecutter.component_name}} } from '../lib';
 
-class App extends Component {
+const App = () => {
 
-    constructor(props) {
-        super(props);
-        this.state = {
-            value: ''
+    const [state, setState] = useState({value:'', label:'Type Here'});
+    const setProps = (newProps) => {
+            setState(newProps);
         };
-        this.setProps = this.setProps.bind(this);
-    }
 
-    setProps(newProps) {
-        this.setState(newProps);
-    }
+    return (
+        <div>
+            <{{cookiecutter.component_name}}
+                setProps={setProps}
+                {...state}
+            />
+        </div>
+    )
+};
 
-    render() {
-        return (
-            <div>
-                <{{cookiecutter.component_name}}
-                    setProps={this.setProps}
-                    {...this.state}
-                />
-            </div>
-        )
-    }
-}
 
 export default App;

{{cookiecutter.project_shortname}}/src/demo/App.js

@@ -1,5 +1,7 @@
 {%- if cookiecutter.use_async == "True" -%}
-    {%- include 'cookiecutter_templates/AsyncComponent.react.js' -%}
+    {%- include 'cookiecutter_templates/AsyncFunctionComponent.react.js' -%}
+{%- elif cookiecutter.component_type == "Function Component" -%}
+    {%- include 'cookiecutter_templates/FunctionComponent.react.js' -%}
 {%- else -%}
-    {%- include 'cookiecutter_templates/Component.react.js' -%}
-{%- endif -%}
+    {%- include 'cookiecutter_templates/ClassComponent.react.js' -%}
+{%- endif -%}

{{cookiecutter.project_shortname}}/src/lib/components/{{cookiecutter.component_name}}.react.js

@@ -1,41 +1,5 @@
-import React, {Component} from 'react';
-import PropTypes from 'prop-types';
-import {defaultProps, propTypes} from '../components/{{cookiecutter.component_name}}.react';
-
-/**
- * ExampleComponent is an example component.
- * It takes a property, `label`, and
- * displays it.
- * It renders an input with the property `value`
- * which is editable by the user.
- */
-export default class {{cookiecutter.component_name}} extends Component {
-    render() {
-        const {id, label, setProps, value} = this.props;
-
-        return (
-            <div id={id}>
-                ExampleComponent: {label}&nbsp;
-                <input
-                    value={value}
-                    onChange={
-                        /*
-                         * Send the new value to the parent component.
-                         * setProps is a prop that is automatically supplied
-                         * by dash's front-end ("dash-renderer").
-                         * In a Dash app, this will update the component's
-                         * props and send the data back to the Python Dash
-                         * app server if a callback uses the modified prop as
-                         * Input or State.
-                         */
-                        e => setProps({ value: e.target.value })
-                    }
-                />
-            </div>
-        );
-    }
-}
-
-
-{{cookiecutter.component_name}}.defaultProps = defaultProps;
-{{cookiecutter.component_name}}.propTypes = propTypes;
+{% if cookiecutter.component_type == "Function Component" -%}
+    {%- include 'cookiecutter_templates/FunctionComponent.react.js' -%}
+{%- else -%}
+    {%- include 'cookiecutter_templates/ClassComponent.react.js' -%}
+{%- endif -%}