From 37d454f7e08942beb9de1f0ff8bbbc855e20f5f0 Mon Sep 17 00:00:00 2001
From: harrisonn <griffin.harrisonn@gmail.com>
Date: Fri, 4 Sep 2020 11:05:59 -0400
Subject: [PATCH] remove unnecessary props from test components

---
 .../src/components/MyPersistedComponent.js    | 149 ++---------------
 .../components/MyPersistedComponentNested.js  | 151 ++----------------
 2 files changed, 22 insertions(+), 278 deletions(-)

diff --git a/@plotly/dash-test-components/src/components/MyPersistedComponent.js b/@plotly/dash-test-components/src/components/MyPersistedComponent.js
index eb21e5be36..d64a0bb33e 100644
--- a/@plotly/dash-test-components/src/components/MyPersistedComponent.js
+++ b/@plotly/dash-test-components/src/components/MyPersistedComponent.js
@@ -1,19 +1,8 @@
 import React, {PureComponent} from 'react';
 import PropTypes from 'prop-types';
 
-// simple function to substitute is-numeric for our use case
-const isNumber = (n) => {
-    return !isNaN(parseFloat(n)) && isFinite(n);
-}
-
-// eslint-disable-next-line no-implicit-coercion
-const convert = val => (isNumber(val) ? +val : NaN);
-
 const isEquivalent = (v1, v2) => v1 === v2 || (isNaN(v1) && isNaN(v2));
 
-// using these inline functions instead of ramda
-const isNil = val => val == null
-
 const omit = (key, obj) => {
     const { [key]: omitted, ...rest } = obj;
     return rest;
@@ -22,14 +11,12 @@ const omit = (key, obj) => {
 /**
  * Adapted dcc input component for persistence tests.
  *
- * Note that some unnecessary props have been removed.
+ * Note that unnecessary props have been removed.
  */
 export default class MyPersistedComponent extends PureComponent {
     constructor(props) {
         super(props);
-
         this.input = React.createRef();
-
         this.onChange = this.onChange.bind(this);
         this.onEvent = this.onEvent.bind(this);
         this.onKeyPress = this.onKeyPress.bind(this);
@@ -39,55 +26,37 @@ export default class MyPersistedComponent extends PureComponent {
 
     UNSAFE_componentWillReceiveProps(nextProps) {
         const {value} = this.input.current;
-        const valueAsNumber = convert(value);
         this.setInputValue(
-            isNil(valueAsNumber) ? value : valueAsNumber,
+            value,
             nextProps.value
         );
-        if (this.props.type !== 'number') {
-            this.setState({value: nextProps.value});
-        }
+        this.setState({value: nextProps.value});
     }
 
     componentDidMount() {
         const {value} = this.input.current;
-        const valueAsNumber = convert(value);
         this.setInputValue(
-            isNil(valueAsNumber) ? value : valueAsNumber,
+            value,
             this.props.value
         );
     }
 
     UNSAFE_componentWillMount() {
-        if (this.props.type !== 'number') {
-            this.setState({value: this.props.value});
-        }
+        this.setState({value: this.props.value})
     }
 
     render() {
-        const valprops =
-            this.props.type === 'number' ? {} : {value: this.state.value};
-        const {loading_state} = this.props;
+        const valprops = {value: this.state.value}
         return (
             <input
-                data-dash-is-loading={
-                    (loading_state && loading_state.is_loading) || undefined
-                }
                 ref={this.input}
                 onChange={this.onChange}
                 onKeyPress={this.onKeyPress}
                 {...valprops}
                 {...omit(
                     [
-                        'debounce',
                         'value',
-                        'n_submit',
-                        'n_submit_timestamp',
-                        'selectionDirection',
-                        'selectionEnd',
-                        'selectionStart',
                         'setProps',
-                        'loading_state',
                     ],
                     this.props
                 )}
@@ -96,19 +65,14 @@ export default class MyPersistedComponent extends PureComponent {
     }
 
     setInputValue(base, value) {
-        const __value = value;
-        base = this.input.current.checkValidity() ? convert(base) : NaN;
-        value = convert(value);
+        base = NaN;
 
         if (!isEquivalent(base, value)) {
-            this.input.current.value = isNumber(value) ? value : __value;
+            this.input.current.value = value
         }
     }
 
     setPropValue(base, value) {
-        base = convert(base);
-        value = this.input.current.checkValidity() ? convert(value) : NaN;
-
         if (!isEquivalent(base, value)) {
             this.props.setProps({value});
         }
@@ -116,42 +80,19 @@ export default class MyPersistedComponent extends PureComponent {
 
     onEvent() {
         const {value} = this.input.current;
-        const valueAsNumber = convert(value);
-        if (this.props.type === 'number') {
-            this.setPropValue(
-                this.props.value,
-                isNil(valueAsNumber) ? value : valueAsNumber
-            );
-        } else {
-            this.props.setProps({value});
-        }
+        this.props.setProps({value})
     }
 
     onKeyPress(e) {
-        if (e.key === 'Enter') {
-            this.props.setProps({
-                n_submit: this.props.n_submit + 1,
-                n_submit_timestamp: Date.now(),
-            });
-            this.input.current.checkValidity();
-        }
-        return this.props.debounce && e.key === 'Enter' && this.onEvent();
+        return this.onEvent();
     }
 
     onChange() {
-        if (!this.props.debounce) {
-            this.onEvent();
-        } else if (this.props.type !== 'number') {
-            this.setState({value: this.input.current.value});
-        }
+        this.onEvent()
     }
 }
 
 MyPersistedComponent.defaultProps = {
-    type: 'text',
-    n_submit: 0,
-    n_submit_timestamp: -1,
-    debounce: false,
     persisted_props: ['value'],
     persistence_type: 'local',
 };
@@ -169,84 +110,16 @@ MyPersistedComponent.propTypes = {
      */
     value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 
-    /**
-     * The input's inline styles
-     */
-    style: PropTypes.object,
-
-    /**
-     * The class of the input element
-     */
-    className: PropTypes.string,
-
-    /**
-     * If true, changes to input will be sent back to the Dash server only on enter or when losing focus.
-     * If it's false, it will sent the value back on every change.
-     */
-    debounce: PropTypes.bool,
-
-    /**
-     * The type of control to render.
-     */
-    type: PropTypes.oneOf([
-        // Only allowing the input types with wide browser compatibility
-        'text',
-        'number',
-        'password',
-        'email',
-        'range',
-        'search',
-        'tel',
-        'url',
-        'hidden',
-    ]),
-
     /**
      * The name of the control, which is submitted with the form data.
      */
     name: PropTypes.string,
 
-    /**
-     * A regular expression that the control's value is checked against. The pattern must match the entire value, not just some subset. Use the title attribute to describe the pattern to help the user. This attribute applies when the value of the type attribute is text, search, tel, url, email, or password, otherwise it is ignored. The regular expression language is the same as JavaScript RegExp algorithm, with the 'u' parameter that makes it treat the pattern as a sequence of unicode code points. The pattern is not surrounded by forward slashes.
-     */
-    pattern: PropTypes.string,
-
-    /**
-     * A hint to the user of what can be entered in the control . The placeholder text must not contain carriage returns or line-feeds. Note: Do not use the placeholder attribute instead of a <label> element, their purposes are different. The <label> attribute describes the role of the form element (i.e. it indicates what kind of information is expected), and the placeholder attribute is a hint about the format that the content should take. There are cases in which the placeholder attribute is never displayed to the user, so the form must be understandable without it.
-     */
-    placeholder: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-
-    /**
-     * Number of times the `Enter` key was pressed while the input had focus.
-     */
-    n_submit: PropTypes.number,
-    /**
-     * Last time that `Enter` was pressed.
-     */
-    n_submit_timestamp: PropTypes.number,
-
     /**
      * Dash-assigned callback that gets fired when the value changes.
      */
     setProps: PropTypes.func,
 
-    /**
-     * Object that holds the loading state object coming from dash-renderer
-     */
-    loading_state: PropTypes.shape({
-        /**
-         * Determines if the component is loading or not
-         */
-        is_loading: PropTypes.bool,
-        /**
-         * Holds which property is loading
-         */
-        prop_name: PropTypes.string,
-        /**
-         * Holds the name of the component that is loading
-         */
-        component_name: PropTypes.string,
-    }),
 
     /**
      * Used to allow user interactions in this component to be persisted when
diff --git a/@plotly/dash-test-components/src/components/MyPersistedComponentNested.js b/@plotly/dash-test-components/src/components/MyPersistedComponentNested.js
index 1d341b8e2b..c18d5a1bad 100644
--- a/@plotly/dash-test-components/src/components/MyPersistedComponentNested.js
+++ b/@plotly/dash-test-components/src/components/MyPersistedComponentNested.js
@@ -1,19 +1,8 @@
 import React, {PureComponent} from 'react';
 import PropTypes from 'prop-types';
 
-// simple function to substitute is-numeric for our use case
-const isNumber = (n) => {
-    return !isNaN(parseFloat(n)) && isFinite(n);
-}
-
-// eslint-disable-next-line no-implicit-coercion
-const convert = val => (isNumber(val) ? +val : NaN);
-
 const isEquivalent = (v1, v2) => v1 === v2 || (isNaN(v1) && isNaN(v2));
 
-// using these inline functions instead of ramda
-const isNil = val => val == null
-
 const omit = (key, obj) => {
     const { [key]: omitted, ...rest } = obj;
     return rest;
@@ -22,14 +11,12 @@ const omit = (key, obj) => {
 /**
  * Adapted dcc input component for persistence tests.
  *
- * Note that some unnecessary props have been removed.
+ * Note that unnecessary props have been removed.
  */
 export default class MyPersistedComponentNested extends PureComponent {
     constructor(props) {
         super(props);
-
         this.input = React.createRef();
-
         this.onChange = this.onChange.bind(this);
         this.onEvent = this.onEvent.bind(this);
         this.onKeyPress = this.onKeyPress.bind(this);
@@ -39,55 +26,37 @@ export default class MyPersistedComponentNested extends PureComponent {
 
     UNSAFE_componentWillReceiveProps(nextProps) {
         const {value} = this.input.current;
-        const valueAsNumber = convert(value);
         this.setInputValue(
-            isNil(valueAsNumber) ? value : valueAsNumber,
+            value,
             nextProps.value
         );
-        if (this.props.type !== 'number') {
-            this.setState({value: nextProps.value});
-        }
+        this.setState({value: nextProps.value});
     }
 
     componentDidMount() {
         const {value} = this.input.current;
-        const valueAsNumber = convert(value);
         this.setInputValue(
-            isNil(valueAsNumber) ? value : valueAsNumber,
+            value,
             this.props.value
         );
     }
 
     UNSAFE_componentWillMount() {
-        if (this.props.type !== 'number') {
-            this.setState({value: this.props.value});
-        }
+        this.setState({value: this.props.value})
     }
 
     render() {
-        const valprops =
-            this.props.type === 'number' ? {} : {value: this.state.value};
-        const {loading_state} = this.props;
+        const valprops = {value: this.state.value}
         return (
             <input
-                data-dash-is-loading={
-                    (loading_state && loading_state.is_loading) || undefined
-                }
                 ref={this.input}
                 onChange={this.onChange}
                 onKeyPress={this.onKeyPress}
                 {...valprops}
                 {...omit(
                     [
-                        'debounce',
                         'value',
-                        'n_submit',
-                        'n_submit_timestamp',
-                        'selectionDirection',
-                        'selectionEnd',
-                        'selectionStart',
                         'setProps',
-                        'loading_state',
                     ],
                     this.props
                 )}
@@ -96,19 +65,14 @@ export default class MyPersistedComponentNested extends PureComponent {
     }
 
     setInputValue(base, value) {
-        const __value = value;
-        base = this.input.current.checkValidity() ? convert(base) : NaN;
-        value = convert(value);
+        base = NaN;
 
         if (!isEquivalent(base, value)) {
-            this.input.current.value = isNumber(value) ? value : __value;
+            this.input.current.value = value
         }
     }
 
     setPropValue(base, value) {
-        base = convert(base);
-        value = this.input.current.checkValidity() ? convert(value) : NaN;
-
         if (!isEquivalent(base, value)) {
             this.props.setProps({value});
         }
@@ -116,42 +80,19 @@ export default class MyPersistedComponentNested extends PureComponent {
 
     onEvent() {
         const {value} = this.input.current;
-        const valueAsNumber = convert(value);
-        if (this.props.type === 'number') {
-            this.setPropValue(
-                this.props.value,
-                isNil(valueAsNumber) ? value : valueAsNumber
-            );
-        } else {
-            this.props.setProps({value});
-        }
+        this.props.setProps({value})
     }
 
     onKeyPress(e) {
-        if (e.key === 'Enter') {
-            this.props.setProps({
-                n_submit: this.props.n_submit + 1,
-                n_submit_timestamp: Date.now(),
-            });
-            this.input.current.checkValidity();
-        }
-        return this.props.debounce && e.key === 'Enter' && this.onEvent();
+        return this.onEvent();
     }
 
     onChange() {
-        if (!this.props.debounce) {
-            this.onEvent();
-        } else if (this.props.type !== 'number') {
-            this.setState({value: this.input.current.value});
-        }
+        this.onEvent()
     }
 }
 
 MyPersistedComponentNested.defaultProps = {
-    type: 'text',
-    n_submit: 0,
-    n_submit_timestamp: -1,
-    debounce: false,
     persisted_props: ['value.nested_value'],
     persistence_type: 'local',
 };
@@ -169,84 +110,16 @@ MyPersistedComponentNested.propTypes = {
      */
     value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 
-    /**
-     * The input's inline styles
-     */
-    style: PropTypes.object,
-
-    /**
-     * The class of the input element
-     */
-    className: PropTypes.string,
-
-    /**
-     * If true, changes to input will be sent back to the Dash server only on enter or when losing focus.
-     * If it's false, it will sent the value back on every change.
-     */
-    debounce: PropTypes.bool,
-
-    /**
-     * The type of control to render.
-     */
-    type: PropTypes.oneOf([
-        // Only allowing the input types with wide browser compatibility
-        'text',
-        'number',
-        'password',
-        'email',
-        'range',
-        'search',
-        'tel',
-        'url',
-        'hidden',
-    ]),
-
     /**
      * The name of the control, which is submitted with the form data.
      */
     name: PropTypes.string,
 
-    /**
-     * A regular expression that the control's value is checked against. The pattern must match the entire value, not just some subset. Use the title attribute to describe the pattern to help the user. This attribute applies when the value of the type attribute is text, search, tel, url, email, or password, otherwise it is ignored. The regular expression language is the same as JavaScript RegExp algorithm, with the 'u' parameter that makes it treat the pattern as a sequence of unicode code points. The pattern is not surrounded by forward slashes.
-     */
-    pattern: PropTypes.string,
-
-    /**
-     * A hint to the user of what can be entered in the control . The placeholder text must not contain carriage returns or line-feeds. Note: Do not use the placeholder attribute instead of a <label> element, their purposes are different. The <label> attribute describes the role of the form element (i.e. it indicates what kind of information is expected), and the placeholder attribute is a hint about the format that the content should take. There are cases in which the placeholder attribute is never displayed to the user, so the form must be understandable without it.
-     */
-    placeholder: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-
-    /**
-     * Number of times the `Enter` key was pressed while the input had focus.
-     */
-    n_submit: PropTypes.number,
-    /**
-     * Last time that `Enter` was pressed.
-     */
-    n_submit_timestamp: PropTypes.number,
-
     /**
      * Dash-assigned callback that gets fired when the value changes.
      */
     setProps: PropTypes.func,
 
-    /**
-     * Object that holds the loading state object coming from dash-renderer
-     */
-    loading_state: PropTypes.shape({
-        /**
-         * Determines if the component is loading or not
-         */
-        is_loading: PropTypes.bool,
-        /**
-         * Holds which property is loading
-         */
-        prop_name: PropTypes.string,
-        /**
-         * Holds the name of the component that is loading
-         */
-        component_name: PropTypes.string,
-    }),
 
     /**
      * Used to allow user interactions in this component to be persisted when
@@ -292,7 +165,5 @@ MyPersistedComponentNested.persistenceTransforms = {
           apply: storedValue => storedValue,
 
       }
-
   },
 };
-