Enhancement field level changes #1
Conversation
Kousika13
commented
Nov 19, 2018
•
Kousika13
commented
- Removed the wrapper components
- Added validations for time picker
- Fixed issues in converting moment object of ant design time picker value to JS date object
- Fixed mapping issues in the schema
- Added submit button
- Moved the transformation function inside the component
- Passed the rest of the properties to the antd component using filterDOMProps()
- Made the transform date function reusable
client/main.js
Outdated
| schema={schema} | ||
| onChange={onChange} | ||
| spacing={3} | ||
| modelTransform={transformModel} |
There was a problem hiding this comment.
The component should be make the transform inside itself
There was a problem hiding this comment.
Hi @cesarve77 , I have moved the transform function into the component
| }, | ||
| }); | ||
|
|
||
| schema.messages({ |
There was a problem hiding this comment.
It is a different approach and works, and in fact should be in the code for double checking
But the task is about a component, thats why schema.js and app.js are given.
You can solve this in the component, disabling not allowed hours.
But is ok, are easy fixes which solve with better communication
There was a problem hiding this comment.
okay @cesarve77. Could you please let me know whether should I move the validations into the component ?
There was a problem hiding this comment.
You can use the followings properties of TimePicker to disabled not allowed times
disabledHours | to specify the hours that cannot be selected
disabledMinutes | to specify the minutes that cannot be selected
disabledSeconds | to specify the seconds that cannot be selected
There was a problem hiding this comment.
@cesarve77, I have disabled the end time based on the start time selected in the time picker.
|
|
||
| const DateRange = ({onChange, value: { start, stop }}) => ( | ||
| <RangePicker value={[start, stop]} onChange={dates => onChange({start:dates[0], stop: dates[1]})} /> | ||
| ); |
There was a problem hiding this comment.
Will be great add the rest of the properties
const DateRange = ({onChange, value: { start, stop },...props}) => ( <RangePicker value={[start, stop]} onChange={dates => onChange({start:dates[0], stop: dates[1]})} {... filterDOMProps(props)} /> );
Now we can pass properties to the antd component
There was a problem hiding this comment.
@cesarve77 , I have passed the props to the antd component using filterDOMProps()
Kousika13
force-pushed
the
enhancement-field-level-changes
branch
from
510fe92
to
475c904
Compare
