feat: add datepicker as a fragment component#262
Conversation
Signed-off-by: Max You <max.you@outlook.com>
✅ Deploy Preview for carbon-components-builder ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
zvonimirfras
left a comment
There was a problem hiding this comment.
- Shouldn't be able to take focus and type inside in the editor.
- Date format doesn't seem to be reflected correctly from config.
- Range looks broken when label is set
- "Date picker range start" and "end" feel misleading
- Exporting undefined seems pointless, also defining empty strings when they are default shouldn't be a thing in export
- This is also wrong?
- size in angular export is incorrectly applied
- angular export doesn't follow the same pattern as other angular exports, when it comes to inputs
- type "text" is not a thing in datepicker afaik
etc...
Signed-off-by: Max You <max.you@outlook.com>
Signed-off-by: Max You <max.you@outlook.com>
Signed-off-by: Max You <max.you@outlook.com>
Signed-off-by: Max You <max.you@outlook.com>
Signed-off-by: Max You <max.you@outlook.com>
Signed-off-by: Max You <max.you@outlook.com>
Signed-off-by: Max You <max.you@outlook.com>
Signed-off-by: Max You <max.you@outlook.com>
Signed-off-by: Max You <max.you@outlook.com>
| sendSignal(state.id, 'valueChange', [event[0].toISOString()], { ...state, value: event[0].toISOString() }); | ||
| }}> | ||
| <DatePickerInput | ||
| id={`${state.id} + '-start'`} |
There was a problem hiding this comment.
We don't need the "-start", do we?
There was a problem hiding this comment.
yes, we need something to differentiate the start date and end date if type is selecting a date range instead of a single date
| datePickerType={componentObj.datePickerType} | ||
| light={componentObj.light}> | ||
| <DatePickerInput | ||
| id={`${componentObj.id} + '-start'`} |
There was a problem hiding this comment.
yes, this is the date range selection
| placeholder: 'mm/dd/yyyy', | ||
| size: 'md', | ||
| datePickerType: 'simple', | ||
| dateFormat: 'm/d/Y', | ||
| rangeStartLabel: 'Start Label' |
There was a problem hiding this comment.
Do we need all these? 'Start Label' feels wrong
There was a problem hiding this comment.
yes, we need it to select a date range (eg., start and end date)
| imports: ['DatePicker', 'DatePickerInput'], | ||
| code: ({ json }) => { | ||
| return `<DatePicker | ||
| ${reactClassNamesFromComponentObj(json)} |
There was a problem hiding this comment.
Indentation for this block looks wrong...
| imports: ['DatePicker', 'DatePickerInput'], | ||
| code: ({ json }) => { | ||
| return `<DatePicker | ||
| ${reactClassNamesFromComponentObj(json)} |
There was a problem hiding this comment.
block indentation looks off
Signed-off-by: Max You <max.you@outlook.com>
Signed-off-by: Max You <JianzhongMax.You@ibm.com>
|
Verified that the component features and export works. |
Signed-off-by: Akshat Patel <akshat@live.ca>
Signed-off-by: Akshat Patel <akshat@live.ca>
Signed-off-by: Akshat Patel <akshat@live.ca>
Signed-off-by: Max You <JianzhongMax.You@ibm.com>
Signed-off-by: Akshat Patel <akshat@live.ca>
Signed-off-by: Akshat Patel <akshat@live.ca>
Signed-off-by: Akshat Patel <akshat@live.ca>
Signed-off-by: Max You <JianzhongMax.You@ibm.com>
Signed-off-by: Max You <JianzhongMax.You@ibm.com>
zvonimirfras
left a comment
There was a problem hiding this comment.
- linting errors
- indentation and ternaries
| const componentAttributes = selectedComponent; | ||
|
|
||
| if (!checked) { | ||
| // Deleting the attributes from the model | ||
| delete componentAttributes.rangePlaceholder; | ||
| } else { | ||
| // Restore user set range placeholder | ||
| componentAttributes.rangePlaceholder = rangePlaceholder; | ||
| } | ||
|
|
||
| setComponent({ | ||
| ...componentAttributes | ||
| }); |
There was a problem hiding this comment.
note: spread the operator and only set the rangePlaceholder
Signed-off-by: Max You <JianzhongMax.You@ibm.com>
Signed-off-by: Max You <JianzhongMax.You@ibm.com>
Signed-off-by: Max You <JianzhongMax.You@ibm.com>
|
|
||
| export interface DatePickerState { | ||
| type: string; | ||
| placeholder: string; |



for #131