Component is not updating dropzone (djsConfig) options base on parent props #154
Description
@felixrieseberg I am trying to update djsConfig based on parent props but options are not updating.
Please find my use case.
I want to disabled click of dropzone if uploadLoading is in progress so I have passed clickable:false if loadingUploadButton is true.
I have debugged into the code and I found that https://github.com/felixrieseberg/React-Dropzone-Component/blob/master/src/react-dropzone.js#L107 you are not updating newProps i.e this.props. djsConfig has the old value you need to replace with newProps.
see this Answers: https://stackoverflow.com/a/32414771, https://stackoverflow.com/a/35919008
Parent Component.
export default class CAddArtifact extends BaseComponent {
constructor(props) {
super(props);
let self = this;
this.state = {
loadingUploadButton: false
}
}
updateButton(){
/****** I am updating loadingUploadButton state here ******/
}
render() {
return (<VAddArtifact {...this.props} {...this.state} loadingUploadButton={this.state.loadingUploadButton} eventHandlers={this.eventHandlers} />);
}
}
Chilled Component.
export default class V_AddArtifact extends BaseComponent {
constructor(props) {
super(props);
this.dropzoneRef = null;
this.modal = null;
}
render() {
const {loadingUploadButton} = this.props;
const componentConfig = {
showFiletypeIcon: true,
postUrl: postUrl
};
const djsConfig = {
addRemoveLinks: true,
timeout: 660000, // 3 mins timeout
dictDefaultMessage: "To upload, click or drop files in the gray box",
acceptedFiles: Constants.mimeTypeFormat.dropzone,
processingmultiple: true,
autoProcessQueue: false,
withCredentials: true,
paramName: "mmFile",
parallelUploads: 5,
dictFileTooBig: "File is too big ({{filesize}}MB). Max filesize: {{maxFilesize}}MB.",
maxFilesize: 50,
maxFiles: 5,
params: {
artifactDetail: null
}
};
return (<DropzoneComponent ref={(ref) => this.dropzoneRef = ref}
config={componentConfig}
eventHandlers={eventHandlers}
djsConfig={loadingUploadButton ? _.extend({}, djsConfig, {clickable: false}): djsConfig}/>);
}
}
Based on loadingUploadButton props changing the djsConfig:
return (<DropzoneComponent ref={(ref) => this.dropzoneRef = ref}
config={componentConfig}
eventHandlers={eventHandlers}
djsConfig={loadingUploadButton ? _.extend({}, djsConfig, {clickable: false}): djsConfig}/>);