Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(ui5-calendar): introduce new component. #2424

Merged
merged 31 commits into from
Nov 30, 2020

Conversation

unazko
Copy link
Contributor

@unazko unazko commented Oct 30, 2020

feat(ui5-calendar): component is now public and can be used standalone.

  • "CalendarSelection" enumeration is introduced with single, multiple and
    range selection modes.
  • DayPicker component uses the new "CalendarSelection" class,
    in order to provide support for the three selection modes.
  • Selection of multiple dates can be configured via the "selection"
    property of the Calendar component. Holding control keyboard key doesn't
    allow multiple dates selection.
  • The logic for selecting a range of dates is moved from
    the DateRangePicker component into the DayPicker component.
  • Selecting a range of dates via mouse now doesn't cause flickering
    on the hovered items.
  • Updating the selected date range into the DateRangePicker component
    input field is now reflected visually, when the popover is opened.
  • DateRangePicker now works properly with only start date of the range
    typed into the input field.
  • Calendar navigation is now compliant with the specification.
  • Playground sample is created.

Fixes #1730

Copy link
Member

@ilhan007 ilhan007 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I can see that the "selection" property is added, but I can't see its implementation. I mean is it possible to switch between single selection and range selection by using this property.

packages/main/src/Calendar.js Outdated Show resolved Hide resolved
 - "CalendarSelection" enum class is introduced with single, multiple and
 range selection modes.
 - DayPicker component uses the new "CalendarSelection" class,
 in order to provide support for the three selection modes.
 - Selection of multiple dates can be configured via the "selection"
 property of the Calendar component. Holding control keyboard key doesn't
 allow multiple dates selection.
 - The logic for selecting a range of dates is moved from
 the DateRangePicker component into the DayPicker component.
 - Selecting a range of dates via mouse now doesn't cause flickering
 on the hovered items.
 - Updating the selected date range into the DateRangePicker component
 input field is now reflected visually, when the popover is opened.
@CLAassistant
Copy link

CLAassistant commented Nov 10, 2020

CLA assistant check
All committers have signed the CLA.

Copy link
Contributor

@NHristov-sap NHristov-sap left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There are two comments, please fix!

@unazko
Copy link
Contributor Author

unazko commented Nov 16, 2020

I can see that the "selection" property is added, but I can't see its implementation. I mean is it possible to switch between single selection and range selection by using this property.

The "selection" property value could be changed. There is currently no getter implemented.

A new range can be selected if there is already a selected range.
The selected range from the input field is now
applied to the Calendar component only when the popover is opened.
in the on before rendering hook.
When a new range is being selected by user interaction
the input field is getting cleared.
in order to change the current item navigation tab index.
 - The tab index of the calendar header buttons is changed
 through the calendar header template.
@unazko
Copy link
Contributor Author

unazko commented Nov 25, 2020

There are failing tests in relation to the ui5-calendar component after merging the conflicts. Adjustments are needed.

@unazko unazko requested a review from ilhan007 November 25, 2020 14:33
 - ui5-calendar tests adjusted
 - When "Range" or "Multiple" type of selection is configured,
 then the last selected date by user interaction is also the
 navigated date.
 - ui5-daterange-picker now works properly with only the start
 date of the range typed into the input field.
- playground sample since tag is added
- playground sample visualization is adjusted
@ilhan007 ilhan007 changed the title feat(ui5-calendar): component is no public and can be used standalone. feat(ui5-calendar): introduce new component. Nov 27, 2020
Copy link
Member

@ilhan007 ilhan007 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  • add test about the selection in combination with the event firing
  • mark the Calendar as new for the playground by adding it in this array
// Add new components here
// packages/playground/build-scripts/samples-prepare.js

const newComponents = [
	"MultiInput",
	"RangeSlider",
	"Slider",
	"Wizard",
];

 is now added in the component metadata.
 - ui5-calendar selection types are now tested.
 - ui5-calendar component is marked as new in the playground.
@unazko
Copy link
Contributor Author

unazko commented Nov 30, 2020

  • add test about the selection in combination with the event firing
  • mark the Calendar as new for the playground by adding it in this array
// Add new components here
// packages/playground/build-scripts/samples-prepare.js

const newComponents = [
	"MultiInput",
	"RangeSlider",
	"Slider",
	"Wizard",
];

Tests are added and the component is added as new for the playground. Done.

@unazko unazko requested a review from ilhan007 November 30, 2020 08:17
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Calendar] What's the exact type of selectedDates in the Calendar component
5 participants