Add dash subcomponents receive additional parameters passed by the pa…

[insistence]

When we develop dash components based on react components in Dash, some react components themselves inject additional parameters into child elements, which are very useful in many scenarios. However, when we develop this react component into a dash component, the dash component will lose this additional injection parameter. I hope to still receive this additional injected parameter in dash. Closes #2814

[T4rk1n]

Can we add a test with a new test component that receives those extra props?

[T4rk1n]

There is no need for the prefix naming _dash, I would just call it extraProps.

[insistence]

Of course, the example code repository address is https://github.com/insistence/feffery-antd-components/tree/dash-test, please use the dash-test branch. I encapsulate dash components based on Ant Design's form component, formItem component, and input component. In Ant Design, the formItem component injects relevant parameters such as value, onChange, etc. into its child elements. These parameters are crucial for completing the form validation function. There are six images below. The first three images are test cases completed based on dash2.16.1 version. It will be found that BaseTreeContainer received the relevant parameters injected by formItem, but these injected parameters have been lost in CheckedComponent, and the corresponding AntdInput does not have these parameters, so I am unable to complete the form validation function. The last three images are test cases completed based on the dash version of this PR. It will be found that BaseTreeContainer successfully received the parameters injected by formItem, and these parameters were not lost in CheckedComponent and AntdInput, so I can complete the form validation function.

[insistence]

By the way, running usage.py from the example code repository above can yield the results shown in the screenshot.

[CNFeffery]

@T4rk1n In the native Ant Design (antd) FormItem component, it's capable of automatically accessing the onChange methods of a large batch of form input child components. This enables many form-related functionalities to be implemented automatically. However, in Dash, due to the incomplete transference of additional props, similar shortcut functionalities cannot operate normally.

[T4rk1n]

Look like those variables are not used and fail the linting, maybe disable for that line or use ramda.without to get the rest.

[insistence]

Thank you very much. This feature is very important for us to develop dash components. I would like to know if this feature will be supported after modifying the code as required, or what else do I need to do.

[T4rk1n]

@insistence I would just like to add a test if possible and a changelog entry then it's good to go.

For the test, looking at antd Form Item code it does React.cloneElement

Could add two components in @plotly/dash-test-components like this:

import React from "react";
import PropTypes from "prop-types";

const AddPropsComponent = (props) => {
    const { children, id } = props;

    return (
        <div id={id}>
            {children.map((c, i) =>
                React.cloneElement(children, {
                    receive: `Element #${i}`,
                    id: `${id}-element-${i}`,
                })
            )}
        </div>
    );
};

AddPropsComponent.propTypes = {
    id: PropTypes.string,
    children: PropTypes.node,
};

export default AddPropsComponent;

And

import React from 'react';
import PropTypes from 'prop-types';

const ReceivePropsComponent = (props) => {
    const {id, text, receive} = props;

    return (
        <div id={id}>
            {receive || text}
        </div>
    );
}
ReceivePropsComponent.propTypes = {
    id: PropTypes.string,
    text: PropTypes.string,
    receive: PropTypes.string,
}

export default ReceivePropsComponent;

Then in a test you can check it receive the new prop.

[insistence]

@T4rk1n I have modified the code and added a test. Due to my unfamiliarity with dash testing, I am unsure if this test complies with dash's testing rules.

[insistence]

@T4rk1n This PR has passed all the checks. Is there anything else that needs to be modified in this PR?

[T4rk1n]

💃

The new test looks really good, thank you for your contribution.

[insistence]

💃

The new test looks really good, thank you for your contribution.

Thank you for your merger. Looking forward to the next version of Dash.