Refactor DatePicker to be compatible with Form

[luacmartins]

With the implementation of our new Form component we need to refactor DatePicker to be Form compatible. Here are the changes that need to be made:

1. An optional isFormInput prop.
2. If isFormInput is true, require a inputID prop. Use getInputIDPropTypes to enforce this propType rule.
3. Add an optional shouldSaveDraft prop. Defaults to false.
4. Make the value prop optional.
5. In the input’s onBlur method, call props.onBlur().
6. In the input’s onChange method (or equivalent e.g. onTextChange, etc), call props.onChange().
7. Remove the hasError prop.
8. Add an optional errorText prop. Defaults to an empty string.
9. Update the error message to display if errorText is truthy.
10. Update the inline error display style so it is left aligned with the label and input value. See example image for TextInput:
    
11. Make sure that props.ref is attached to the appropriate DOM node. This could involve forwarding the ref to a child component. This is important so we can call ref.focus().
12. Add the input to the test Form stories and make sure that it works. You can check this by running npm run storybook and testing the component in the example form.
13. Remove any unused code.

There's an example of a refactor to TextInput in this PR.

Job Post https://www.upwork.com/jobs/~015dde9db58cb60ea3

[MelvinBot]

Triggered auto assignment to @kevinksullivan (External), see https://stackoverflow.com/c/expensify/questions/8582 for more details.

[kevinksullivan]

https://www.upwork.com/jobs/~015dde9db58cb60ea3

[MelvinBot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @rushatgabhane (Exported)

[MelvinBot]

Triggered auto assignment to @Luke9389 (Exported), see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[sig5]

Proposal
Can I take this up? The changes needed in the problem seem explanatory in the issue itself.

[rushatgabhane]

@sig5 how will you implement shouldSaveDraft?

[sig5]

Hi @rushatgabhane, as far as I can observe, shouldsaveDraft is used to see if the form element needs to save value as the draft.
It is handled here.

App/src/components/Form.js

Lines 144 to 167 in 4c48227

	// We clone the child passing down all form props
	const inputID = child.props.inputID;
	const defaultValue = this.props.draftValues[inputID] || child.props.defaultValue;
	this.inputValues[inputID] = defaultValue;
	return React.cloneElement(child, {
	ref: node => this.inputRefs[inputID] = node,
	defaultValue,
	errorText: this.state.errors[inputID] || '',
	onBlur: () => {
	this.setTouchedInput(inputID);
	this.validate(this.inputValues);
	},
	onChange: (value) => {
	this.inputValues[inputID] = value;
	if (child.props.shouldSaveDraft) {
	FormActions.setDraftValues(this.props.formID, {[inputID]: value});
	}
	this.validate(this.inputValues);
	},
	});
	});
	}

So adding a propType in the component along with a defaultProp should suffice to trigger it save in Onyx, which can be fetched next time it is mounted.Please correct me if I am misunderstanding the problem.

[luacmartins]

@sig5 you are correct! Passing the shouldSaveDraft and calling the onChange prop as described in the OP is all we need here!

[rushatgabhane]

OP is all we need here

I agree.

[rushatgabhane]

Thanks @sig5, just wanted to verify if you understand the details.

🎀️ 👀️ 🎀 C+ reviewed

@Luke9389 I think @sig5 is good for this job.

[Luke9389]

Ok cool! Go ahead and start the PR @sig5. Thanks @rushatgabhane and @luacmartins

[kevinksullivan]

FYI @sig5 I hired you for the job in upwork.

[sig5]

@luacmartins Just a clarification, What is the expected behaviour of Datepicker on Android/iOS if this.inputRef.focus() is called?

[rushatgabhane]

@sig5 I believe it should just open 📅

It should do nothing because input is not editable. Now, the question is should it open the datepicker? I don't think so, because showing the date picker after clicking submit will be confusing.

So let's do nothing :)

[luacmartins]

@sig5 are you referring to the fix the errors link? If so, the expected behavior is to just scroll the input into view. In this case, I think it's fine if we don't open the calendar immediately.

[sig5]

Yes, I was referring exactly that. Thanks for the clarification 😄!

[MelvinBot]

This issue has not been updated in over 15 days. @kevinksullivan, @rushatgabhane, @Luke9389 eroding to Monthly issue.

P.S. Is everyone reading this sure this is really a near-term priority? Be brave: if you disagree, go ahead and close it out. If someone disagrees, they'll reopen it, and if they don't: one less thing to do!

[luacmartins]

Still weekly!

[melvin-bot]

This issue has not been updated in over 15 days. @kevinksullivan, @rushatgabhane, @Luke9389 eroding to Monthly issue.

P.S. Is everyone reading this sure this is really a near-term priority? Be brave: if you disagree, go ahead and close it out. If someone disagrees, they'll reopen it, and if they don't: one less thing to do!

[rushatgabhane]

Waiting for @sig5 to address @ luacmartins' comments in the PR

[luacmartins]

@sig5 won't be able to complete the PR as per this comment. I'll move this issue to internal and work on it to push this project forward.

@rushatgabhane please let @kevinksullivan know if any C+ payment is due. Thanks!

[rushatgabhane]

@kevinksullivan no C+ payments due here.

[luacmartins]

@kevinksullivan this was made Internal, please delete the Upwork job when you get a chance. Removing the Exported label.

[kevinksullivan]

All set, post is not longer accepting proposals and I cancelled out the contract.