"lodash": "4.17.21",
"lunr": "2.3.9",
"react": "16.14.0",
- "react-day-picker": "7.4.10",
+ "react-day-picker": "8.5.1",
"react-dom": "16.14.0",
"react-draggable": "4.4.5",
"react-helmet-async": "1.3.0",
</div>
<footer className="modal-foot">
- <ResetButtonLink onClick={this.props.onClose}>{translate('Done')}</ResetButtonLink>
+ <ResetButtonLink onClick={this.props.onClose}>{translate('done')}</ResetButtonLink>
</footer>
</Modal>
);
<ResetButtonLink
onClick={[MockFunction]}
>
- Done
+ done
</ResetButtonLink>
</footer>
</Modal>
<footer className="modal-foot">
<a className="js-modal-close" href="#" onClick={this.handleCloseClick}>
- {translate('Done')}
+ {translate('done')}
</a>
</footer>
</Modal>
/>
</div>
<footer className="modal-foot">
- <ResetButtonLink onClick={props.onClose}>{translate('Done')}</ResetButtonLink>
+ <ResetButtonLink onClick={props.onClose}>{translate('done')}</ResetButtonLink>
</footer>
</Modal>
);
href="#"
onClick={[Function]}
>
- Done
+ done
</a>
</footer>
</Modal>
<ResetButtonLink
onClick={[MockFunction]}
>
- Done
+ done
</ResetButtonLink>
</footer>
</Modal>
--- /dev/null
+/*
+ * SonarQube
+ * Copyright (C) 2009-2023 SonarSource SA
+ * mailto:info AT sonarsource DOT com
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
+ */
+
+.rdp {
+ --rdp-cell-size: 30px;
+ --rdp-outline: none;
+}
+
+.rdp-day_selected {
+ background-color: var(--blue) !important;
+}
+
+.date-input-control {
+ position: relative;
+ display: inline-block;
+ cursor: pointer;
+}
+
+.date-input-control-input {
+ width: 130px;
+ padding-left: var(--controlHeight) !important;
+ cursor: pointer;
+}
+
+.date-input-control-input.is-filled {
+ padding-right: 16px !important;
+}
+
+.date-input-control-icon {
+ position: absolute;
+ top: 4px;
+ left: 4px;
+}
+
+.date-input-control-icon path {
+ fill: var(--neutral600);
+ opacity: 0.9;
+}
+
+.date-input-control-input:focus + .date-input-control-icon path {
+ fill: var(--info500);
+}
+
+.date-input-control-reset {
+ position: absolute;
+ top: 4px;
+ right: 4px;
+ border: none;
+}
+
+.date-input-calendar {
+ position: absolute;
+ z-index: var(--dropdownMenuZIndex);
+ top: 100%;
+ left: 0;
+ border: 1px solid var(--barBorderColor);
+ background-color: #fff;
+ box-shadow: var(--defaultShadow);
+}
+
+.date-input-calendar.align-right {
+ left: initial;
+ right: 0;
+}
+
+.date-input-calendar-nav {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding-top: var(--gridSize);
+ padding-left: var(--gridSize);
+ padding-right: var(--gridSize);
+}
+
+.date-input-calender-month {
+ display: flex;
+ justify-content: center;
+}
+
+.date-input-calender-month .date-input-calender-month-select {
+ width: 70px;
+}
import { addMonths, setMonth, setYear, subMonths } from 'date-fns';
import { range } from 'lodash';
import * as React from 'react';
-import DayPicker, { DayModifiers, Modifier, Modifiers } from 'react-day-picker';
+import { ActiveModifiers, DayPicker, Matcher } from 'react-day-picker';
+import 'react-day-picker/dist/style.css';
import { injectIntl, WrappedComponentProps } from 'react-intl';
import { ButtonIcon, ClearButton } from '../../components/controls/buttons';
import OutsideClickHandler from '../../components/controls/OutsideClickHandler';
getMonthName,
getShortMonthName,
getShortWeekDayName,
- getWeekDayName,
translate,
translateWithParameters,
} from '../../helpers/l10n';
-import './DayPicker.css';
+import './DateInput.css';
import EscKeydownHandler from './EscKeydownHandler';
import FocusOutHandler from './FocusOutHandler';
import Select from './Select';
-import './styles.css';
interface Props {
alignRight?: boolean;
lastHovered?: Date;
}
-type Week = [string, string, string, string, string, string, string];
-
-const MONTH_IN_YEAR = 12;
+const MONTHS_IN_YEAR = 12;
+const YEARS_TO_DISPLAY = 10;
export default class DateInput extends React.PureComponent<Props, State> {
input?: HTMLInputElement | null;
this.setState({ open: false });
};
- handleDayClick = (day: Date, modifiers: DayModifiers) => {
+ handleDayClick = (day: Date, modifiers: ActiveModifiers) => {
if (!modifiers.disabled) {
this.closeCalendar();
this.props.onChange(day);
}
};
- handleDayMouseEnter = (day: Date, modifiers: DayModifiers) => {
+ handleDayMouseEnter = (day: Date, modifiers: ActiveModifiers) => {
this.setState({ lastHovered: modifiers.disabled ? undefined : day });
};
getPreviousMonthAriaLabel = () => {
const { currentMonth } = this.state;
- const previous = (currentMonth.getMonth() + MONTH_IN_YEAR - 1) % MONTH_IN_YEAR;
+ const previous = (currentMonth.getMonth() + MONTHS_IN_YEAR - 1) % MONTHS_IN_YEAR;
return translateWithParameters(
'show_month_x_of_year_y',
getMonthName(previous),
- currentMonth.getFullYear() - Math.floor(previous / (MONTH_IN_YEAR - 1))
+ currentMonth.getFullYear() - Math.floor(previous / (MONTHS_IN_YEAR - 1))
);
};
getNextMonthAriaLabel = () => {
const { currentMonth } = this.state;
- const next = (currentMonth.getMonth() + MONTH_IN_YEAR + 1) % MONTH_IN_YEAR;
+ const next = (currentMonth.getMonth() + MONTHS_IN_YEAR + 1) % MONTHS_IN_YEAR;
return translateWithParameters(
'show_month_x_of_year_y',
getMonthName(next),
- currentMonth.getFullYear() + 1 - Math.ceil(next / (MONTH_IN_YEAR - 1))
+ currentMonth.getFullYear() + 1 - Math.ceil(next / (MONTHS_IN_YEAR - 1))
);
};
highlightFrom,
highlightTo,
minDate,
- value,
+ value: selectedDay,
name,
className,
inputClassName,
const after = this.props.maxDate || new Date();
- const months = range(MONTH_IN_YEAR);
- const years = range(new Date().getFullYear() - 10, new Date().getFullYear() + 1);
-
- const selectedDays: Modifier[] = value ? [value] : [];
- let modifiers: Partial<Modifiers> | undefined;
- const lastHoveredOrValue = lastHovered || value;
+ const years = range(new Date().getFullYear() - YEARS_TO_DISPLAY, new Date().getFullYear() + 1);
+ const yearOptions = years.map((year) => ({ label: String(year), value: year }));
+ const monthOptions = range(MONTHS_IN_YEAR).map((month) => ({
+ label: getShortMonthName(month),
+ value: month,
+ }));
+ let highlighted: Matcher = false;
+ const lastHoveredOrValue = lastHovered || selectedDay;
if (highlightFrom && lastHoveredOrValue) {
- modifiers = { highlighted: { from: highlightFrom, to: lastHoveredOrValue } };
- selectedDays.push(highlightFrom);
+ highlighted = { from: highlightFrom, to: lastHoveredOrValue };
}
if (highlightTo && lastHoveredOrValue) {
- modifiers = { highlighted: { from: lastHoveredOrValue, to: highlightTo } };
- selectedDays.push(highlightTo);
+ highlighted = { from: lastHoveredOrValue, to: highlightTo };
}
- const weekdaysLong = range(7).map(getWeekDayName) as Week;
- const weekdaysShort = range(7).map(getShortWeekDayName) as Week;
-
- const monthOptions = months.map((month) => ({
- label: getShortMonthName(month),
- value: month,
- }));
- const yearOptions = years.map((year) => ({ label: String(year), value: year }));
-
return (
<FocusOutHandler onFocusOut={this.closeCalendar}>
<OutsideClickHandler onClickOutside={this.closeCalendar}>
<span className={classNames('date-input-control', className)}>
<InputWrapper
className={classNames('date-input-control-input', inputClassName, {
- 'is-filled': value !== undefined,
+ 'is-filled': selectedDay !== undefined,
})}
id={id}
innerRef={(node: HTMLInputElement | null) => (this.input = node)}
placeholder={placeholder}
readOnly={true}
type="text"
- value={value}
+ value={selectedDay}
/>
<CalendarIcon className="date-input-control-icon" fill="" />
- {value !== undefined && (
+ {selectedDay !== undefined && (
<ClearButton
aria-label={translate('reset_date')}
className="button-tiny date-input-control-reset"
</ButtonIcon>
</fieldset>
<DayPicker
- captionElement={<NullComponent />}
- disabledDays={{ after, before: minDate }}
- firstDayOfWeek={1}
- modifiers={modifiers}
+ mode="default"
+ disableNavigation={true}
+ components={{ CaptionLabel: () => null }}
+ disabled={{ after, before: minDate }}
+ weekStartsOn={1}
+ formatters={{
+ formatWeekdayName: (date) => getShortWeekDayName(date.getDay()),
+ }}
+ modifiers={{ highlighted }}
+ modifiersClassNames={{ highlighted: 'highlighted' }}
month={currentMonth}
- navbarElement={<NullComponent />}
+ selected={selectedDay}
onDayClick={this.handleDayClick}
onDayMouseEnter={this.handleDayMouseEnter}
- selectedDays={selectedDays}
- weekdaysLong={weekdaysLong}
- weekdaysShort={weekdaysShort}
/>
</form>
)}
}
}
-function NullComponent() {
- return null;
-}
-
type InputWrapperProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value'> &
WrappedComponentProps & {
innerRef: React.Ref<HTMLInputElement>;
+++ /dev/null
-/*
- * SonarQube
- * Copyright (C) 2009-2023 SonarSource SA
- * mailto:info AT sonarsource DOT com
- *
- * This program is free software; you can redistribute it and/or
- * modify it under the terms of the GNU Lesser General Public
- * License as published by the Free Software Foundation; either
- * version 3 of the License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
- * Lesser General Public License for more details.
- *
- * You should have received a copy of the GNU Lesser General Public License
- * along with this program; if not, write to the Free Software Foundation,
- * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
- */
-.DayPicker {
- display: inline-block;
-}
-
-.DayPicker-wrapper {
- position: relative;
- user-select: none;
- padding-bottom: var(--gridSize);
- flex-direction: row;
-}
-
-.DayPicker-Months {
- display: flex;
- flex-wrap: wrap;
- justify-content: center;
-}
-
-.DayPicker-Month {
- display: table;
- border-collapse: collapse;
- border-spacing: 0;
- user-select: none;
- margin: 0 var(--gridSize);
- margin-top: var(--gridSize);
-}
-
-.DayPicker-Weekdays {
- display: table-header-group;
-}
-
-.DayPicker-WeekdaysRow {
- display: table-row;
-}
-
-.DayPicker-Weekday {
- display: table-cell;
- padding: var(--gridSize);
- font-size: var(--smallFontSize);
- text-align: center;
-}
-
-.DayPicker-Weekday abbr[title] {
- border-bottom: none;
- text-decoration: none;
-}
-
-.DayPicker-Body {
- display: table-row-group;
-}
-
-.DayPicker-Week {
- display: table-row;
-}
-
-.DayPicker-Day {
- display: table-cell;
- line-height: 15px;
- padding: var(--gridSize);
- text-align: center;
- cursor: pointer;
- vertical-align: top;
- outline: none;
-}
-
-.DayPicker--interactionDisabled .DayPicker-Day {
- cursor: default;
-}
-
-.DayPicker-Footer {
- padding-top: var(--gridSize);
-}
-
-/* Default modifiers */
-
-.DayPicker-Day--today {
- font-weight: bold;
-}
-
-.DayPicker-Day--outside {
- cursor: default;
- color: #8b9898;
-}
-
-.DayPicker-Day--disabled {
- color: var(--gray80);
- cursor: not-allowed;
-}
-
-.DayPicker-Day--selected:not(.DayPicker-Day--disabled):not(.DayPicker-Day--outside) {
- background-color: var(--blue);
- color: #fff;
-}
-
-.DayPicker:not(.DayPicker--interactionDisabled)
- .DayPicker-Day:not(.DayPicker-Day--disabled):not(.DayPicker-Day--selected):not(
- .DayPicker-Day--highlighted
- ):not(.DayPicker-Day--outside):hover {
- background-color: var(--barBackgroundColor);
-}
-
-.DayPicker-Day--highlighted:not(.DayPicker-Day--disabled):not(.DayPicker-Day--selected):not(
- .DayPicker-Day--outside
- ) {
- background-color: var(--lightBlue);
-}
import { addDays, setMonth, setYear, subDays, subMonths } from 'date-fns';
import { shallow } from 'enzyme';
import * as React from 'react';
+import { DayPicker } from 'react-day-picker';
import { parseDate } from '../../../helpers/dates';
import DateInput from '../DateInput';
const { wrapper, instance } = shallowRender({ onChange });
wrapper.setState({ open: true });
- instance.handleDayClick(dateA, { disabled: true, outside: undefined, today: undefined });
+ instance.handleDayClick(dateA, { disabled: true });
expect(onChange).not.toHaveBeenCalled();
expect(wrapper.state().open).toBe(true);
- instance.handleDayClick(dateA, { outside: undefined, today: undefined });
+ instance.handleDayClick(dateA, {});
expect(onChange).toHaveBeenLastCalledWith(dateA);
wrapper.update();
expect(wrapper.state().open).toBe(false);
wrapper.setState({ open: true });
const dateC = addDays(dateA, 3);
- instance.handleDayMouseEnter(dateC, { outside: undefined, today: undefined });
+ instance.handleDayMouseEnter(dateC, {});
wrapper.update();
- const dayPicker = wrapper.find('DayPicker');
- expect(dayPicker.prop('modifiers')).toEqual({ highlighted: { from: dateA, to: dateC } });
- expect(dayPicker.prop('selectedDays')).toEqual([dateA]);
+ const dayPicker = wrapper.find(DayPicker);
+ expect(dayPicker.props().modifiers).toEqual({ highlighted: { from: dateA, to: dateC } });
});
it('should hightlightTo range', () => {
wrapper.setState({ open: true });
const dateC = subDays(dateB, 5);
- instance.handleDayMouseEnter(dateC, { outside: undefined, today: undefined });
+ instance.handleDayMouseEnter(dateC, {});
wrapper.update();
- const dayPicker = wrapper.find('DayPicker');
- expect(dayPicker.prop('modifiers')).toEqual({ highlighted: { from: dateC, to: dateB } });
- expect(dayPicker.prop('selectedDays')).toEqual([dateB]);
+ const dayPicker = wrapper.find(DayPicker);
+ expect(dayPicker.props().modifiers).toEqual({ highlighted: { from: dateC, to: dateB } });
});
it('should announce the proper month and year for next/previous buttons aria label', () => {
</ButtonIcon>
</fieldset>
<DayPicker
- canChangeMonth={true}
- captionElement={<NullComponent />}
- classNames={
+ components={
{
- "body": "DayPicker-Body",
- "caption": "DayPicker-Caption",
- "container": "DayPicker",
- "day": "DayPicker-Day",
- "disabled": "disabled",
- "footer": "DayPicker-Footer",
- "interactionDisabled": "DayPicker--interactionDisabled",
- "month": "DayPicker-Month",
- "months": "DayPicker-Months",
- "navBar": "DayPicker-NavBar",
- "navButtonInteractionDisabled": "DayPicker-NavButton--interactionDisabled",
- "navButtonNext": "DayPicker-NavButton DayPicker-NavButton--next",
- "navButtonPrev": "DayPicker-NavButton DayPicker-NavButton--prev",
- "outside": "outside",
- "selected": "selected",
- "today": "today",
- "todayButton": "DayPicker-TodayButton",
- "week": "DayPicker-Week",
- "weekNumber": "DayPicker-WeekNumber",
- "weekday": "DayPicker-Weekday",
- "weekdays": "DayPicker-Weekdays",
- "weekdaysRow": "DayPicker-WeekdaysRow",
- "wrapper": "DayPicker-wrapper",
+ "CaptionLabel": [Function],
}
}
- disabledDays={
+ disableNavigation={true}
+ disabled={
{
"after": 2018-02-05T00:00:00.000Z,
"before": 2018-01-17T00:00:00.000Z,
}
}
- enableOutsideDaysClick={true}
- firstDayOfWeek={1}
- fixedWeeks={false}
- labels={
+ formatters={
{
- "nextMonth": "Next Month",
- "previousMonth": "Previous Month",
+ "formatWeekdayName": [Function],
}
}
- locale="en"
- localeUtils={
+ mode="default"
+ modifiers={
{
- "default": {
- "formatDay": [Function],
- "formatMonthTitle": [Function],
- "formatWeekdayLong": [Function],
- "formatWeekdayShort": [Function],
- "getFirstDayOfWeek": [Function],
- "getMonths": [Function],
- },
- "formatDay": [Function],
- "formatMonthTitle": [Function],
- "formatWeekdayLong": [Function],
- "formatWeekdayShort": [Function],
- "getFirstDayOfWeek": [Function],
- "getMonths": [Function],
+ "highlighted": false,
+ }
+ }
+ modifiersClassNames={
+ {
+ "highlighted": "highlighted",
}
}
month={2018-01-17T00:00:00.000Z}
- navbarElement={<NullComponent />}
- numberOfMonths={1}
onDayClick={[Function]}
onDayMouseEnter={[Function]}
- pagedNavigation={false}
- renderDay={[Function]}
- renderWeek={[Function]}
- reverseMonths={false}
- selectedDays={
- [
- 2018-01-17T00:00:00.000Z,
- ]
- }
- showOutsideDays={false}
- showWeekDays={true}
- showWeekNumbers={false}
- tabIndex={0}
- weekdayElement={<Weekday />}
- weekdaysLong={
- [
- "Sunday",
- "Monday",
- "Tuesday",
- "Wednesday",
- "Thursday",
- "Friday",
- "Saturday",
- ]
- }
- weekdaysShort={
- [
- "Sun",
- "Mon",
- "Tue",
- "Wed",
- "Thu",
- "Fri",
- "Sat",
- ]
- }
+ selected={2018-01-17T00:00:00.000Z}
+ weekStartsOn={1}
/>
</form>
</span>
+++ /dev/null
-/*
- * SonarQube
- * Copyright (C) 2009-2023 SonarSource SA
- * mailto:info AT sonarsource DOT com
- *
- * This program is free software; you can redistribute it and/or
- * modify it under the terms of the GNU Lesser General Public
- * License as published by the Free Software Foundation; either
- * version 3 of the License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
- * Lesser General Public License for more details.
- *
- * You should have received a copy of the GNU Lesser General Public License
- * along with this program; if not, write to the Free Software Foundation,
- * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
- */
-.date-input-control {
- position: relative;
- display: inline-block;
- cursor: pointer;
-}
-
-.date-input-control-input {
- width: 130px;
- padding-left: var(--controlHeight) !important;
- cursor: pointer;
-}
-
-.date-input-control-input.is-filled {
- padding-right: 16px !important;
-}
-
-.date-input-control-icon {
- position: absolute;
- top: 4px;
- left: 4px;
-}
-
-.date-input-control-icon path {
- fill: var(--neutral600);
- opacity: 0.9;
-}
-
-.date-input-control-input:focus + .date-input-control-icon path {
- fill: var(--info500);
-}
-
-.date-input-control-reset {
- position: absolute;
- top: 4px;
- right: 4px;
- border: none;
-}
-
-.date-input-calendar {
- position: absolute;
- z-index: var(--dropdownMenuZIndex);
- top: 100%;
- left: 0;
- border: 1px solid var(--barBorderColor);
- background-color: #fff;
- box-shadow: var(--defaultShadow);
-}
-
-.date-input-calendar.align-right {
- left: initial;
- right: 0;
-}
-
-.date-input-calendar-nav {
- display: flex;
- justify-content: space-between;
- align-items: center;
- padding-top: var(--gridSize);
- padding-left: var(--gridSize);
- padding-right: var(--gridSize);
-}
-
-.date-input-calender-month {
- display: flex;
- justify-content: center;
-}
-
-.date-input-calender-month .date-input-calender-month-select {
- width: 70px;
-}
postcss-custom-properties: 12.1.11
prettier: 2.8.3
react: 16.14.0
- react-day-picker: 7.4.10
+ react-day-picker: 8.5.1
react-dom: 16.14.0
react-draggable: 4.4.5
react-helmet-async: 1.3.0
languageName: node
linkType: hard
-"react-day-picker@npm:7.4.10":
- version: 7.4.10
- resolution: "react-day-picker@npm:7.4.10"
- dependencies:
- prop-types: ^15.6.2
+"react-day-picker@npm:8.5.1":
+ version: 8.5.1
+ resolution: "react-day-picker@npm:8.5.1"
peerDependencies:
- react: ~0.13.x || ~0.14.x || ^15.0.0 || ^16.0.0 || ^17.0.0
- checksum: 33a4614bb4d457a3e72462d092fa131d3d7ec1ba858ac7e70d65b59e464606ffc039afdd226db37ead1326e248ca9a103007ee0bb829b277cd7297e5f5807ad1
+ date-fns: ^2.28.0
+ react: ^16.8.0 || ^17.0.0 || ^18.0.0
+ checksum: 0d444710bccf07db869673f19975e68962b44a1de8a176710e2a0297e0c7d98e610b7d7e5b24a19dc695dac7e3745191cfef3f656d87f6fbafc1ecc8833a212c
languageName: node
linkType: hard
dismiss_permanently=Dismiss permanently
display=Display
documentation=documentation
+done=Done
download_verb=Download
duplications=Duplications
end_date=End Date
#------------------------------------------------------------------------------
#
-# CALENDAR
+# DAY PICKER
#
#------------------------------------------------------------------------------
-Done=Done
-Prev=Prev
-Next=Next
-Today=Today
January=January
February=February
March=March
Fr=Fr
Sa=Sa
select_month=Select a month
-show_month_x_of_year_y=Show {0} of {1}
select_year=Select a year
+show_month_x_of_year_y=Show {0} of {1}
date.select_month_and_year_x=Select the month and year, currently {0}
#------------------------------------------------------------------------------
projects / sonarqube.git / commitdiff