Skip to content

Commit

Permalink
Fix React.ComponentProps<typeof Calendar> incorrectly marking default…
Browse files Browse the repository at this point in the history
…Props as required
  • Loading branch information
wojtekmaj committed Apr 5, 2023
1 parent c82d464 commit 912b22d
Showing 1 changed file with 33 additions and 25 deletions.
58 changes: 33 additions & 25 deletions src/Calendar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@ const defaultProps = {
showNeighboringMonth: true,
};

type CalendarProps = typeof defaultProps & {
type CalendarProps = {
activeStartDate?: Date;
allowPartialRange?: boolean;
calendarType?: CalendarType;
Expand Down Expand Up @@ -123,6 +123,8 @@ type CalendarProps = typeof defaultProps & {
view?: View;
};

type CalendarPropsWithDefaults = typeof defaultProps & CalendarProps;

type CalendarState = {
action?: Action;
activeStartDate?: Date | null;
Expand Down Expand Up @@ -256,7 +258,7 @@ function getActiveStartDate(
return getBegin(rangeType, valueFrom);
}

function getInitialActiveStartDate(props: CalendarProps) {
function getInitialActiveStartDate(props: CalendarPropsWithDefaults) {
const {
activeStartDate,
defaultActiveStartDate,
Expand Down Expand Up @@ -370,14 +372,18 @@ export default class Calendar extends Component<CalendarProps, CalendarState> {
};

get activeStartDate() {
const { activeStartDate: activeStartDateProps } = this.props;
const { activeStartDate: activeStartDateProps } = this.props as CalendarPropsWithDefaults;
const { activeStartDate: activeStartDateState } = this.state;

return activeStartDateProps || activeStartDateState || getInitialActiveStartDate(this.props);
return (
activeStartDateProps ||
activeStartDateState ||
getInitialActiveStartDate(this.props as CalendarPropsWithDefaults)
);
}

get value(): Value {
const { selectRange, value: valueProps } = this.props;
const { selectRange, value: valueProps } = this.props as CalendarPropsWithDefaults;
const { value: valueState } = this.state;

const rawValue = (() => {
Expand All @@ -401,26 +407,26 @@ export default class Calendar extends Component<CalendarProps, CalendarState> {
}

get valueType() {
const { maxDetail } = this.props;
const { maxDetail } = this.props as CalendarPropsWithDefaults;

return getValueType(maxDetail);
}

get view() {
const { minDetail, maxDetail, view: viewProps } = this.props;
const { minDetail, maxDetail, view: viewProps } = this.props as CalendarPropsWithDefaults;
const { view: viewState } = this.state;

return getView(viewProps || viewState, minDetail, maxDetail);
}

get views() {
const { minDetail, maxDetail } = this.props;
const { minDetail, maxDetail } = this.props as CalendarPropsWithDefaults;

return getLimitedViews(minDetail, maxDetail);
}

get hover() {
const { selectRange } = this.props;
const { selectRange } = this.props as CalendarPropsWithDefaults;
const { hover } = this.state;

return selectRange ? hover : null;
Expand All @@ -442,7 +448,7 @@ export default class Calendar extends Component<CalendarProps, CalendarState> {
* Gets current value in a desired format.
*/
getProcessedValue(value: Date) {
const { minDate, maxDate, maxDetail, returnValue } = this.props;
const { minDate, maxDate, maxDetail, returnValue } = this.props as CalendarPropsWithDefaults;

const processFunction = (() => {
switch (returnValue) {
Expand Down Expand Up @@ -477,8 +483,8 @@ export default class Calendar extends Component<CalendarProps, CalendarState> {
) => {
const { activeStartDate: previousActiveStartDate, view: previousView } = this;

const { allowPartialRange, onActiveStartDateChange, onChange, onViewChange, selectRange } =
this.props;
const { allowPartialRange, onActiveStartDateChange, onChange, onViewChange, selectRange } = this
.props as CalendarPropsWithDefaults;

const prevArgs = {
action: undefined,
Expand Down Expand Up @@ -571,7 +577,7 @@ export default class Calendar extends Component<CalendarProps, CalendarState> {
this.onClickTile(nextActiveStartDate, event);

const { view, views } = this;
const { onDrillDown } = this.props;
const { onDrillDown } = this.props as CalendarPropsWithDefaults;

const nextView = views[views.indexOf(view) + 1];

Expand All @@ -596,7 +602,7 @@ export default class Calendar extends Component<CalendarProps, CalendarState> {
}

const { activeStartDate, view, views } = this;
const { onDrillUp } = this.props;
const { onDrillUp } = this.props as CalendarPropsWithDefaults;

const nextView = views[views.indexOf(view) - 1];

Expand All @@ -619,7 +625,7 @@ export default class Calendar extends Component<CalendarProps, CalendarState> {

onChange = (value: Date, event: React.MouseEvent<HTMLButtonElement>) => {
const { value: previousValue } = this;
const { goToRangeStartOnSelect, selectRange } = this.props;
const { goToRangeStartOnSelect, selectRange } = this.props as CalendarPropsWithDefaults;

this.onClickTile(value, event);

Expand Down Expand Up @@ -659,7 +665,7 @@ export default class Calendar extends Component<CalendarProps, CalendarState> {
// Range selection turned on, second value, goToRangeStartOnSelect toggled on
goToRangeStartOnSelect
? getActiveStartDate({
...this.props,
...(this.props as CalendarPropsWithDefaults),
value: nextValue,
})
: null;
Expand All @@ -678,7 +684,8 @@ export default class Calendar extends Component<CalendarProps, CalendarState> {

onClickTile = (value: Date, event: React.MouseEvent<HTMLButtonElement>) => {
const { view } = this;
const { onClickDay, onClickDecade, onClickMonth, onClickYear } = this.props;
const { onClickDay, onClickDecade, onClickMonth, onClickYear } = this
.props as CalendarPropsWithDefaults;

const callback = (() => {
switch (view) {
Expand Down Expand Up @@ -723,7 +730,7 @@ export default class Calendar extends Component<CalendarProps, CalendarState> {
tileClassName,
tileContent,
tileDisabled,
} = this.props;
} = this.props as CalendarPropsWithDefaults;
const { hover } = this;

const activeStartDate = next
Expand All @@ -749,17 +756,17 @@ export default class Calendar extends Component<CalendarProps, CalendarState> {

switch (view) {
case 'century': {
const { formatYear } = this.props;
const { formatYear } = this.props as CalendarPropsWithDefaults;

return <CenturyView formatYear={formatYear} {...commonProps} />;
}
case 'decade': {
const { formatYear } = this.props;
const { formatYear } = this.props as CalendarPropsWithDefaults;

return <DecadeView formatYear={formatYear} {...commonProps} />;
}
case 'year': {
const { formatMonth, formatMonthYear } = this.props;
const { formatMonth, formatMonthYear } = this.props as CalendarPropsWithDefaults;

return (
<YearView formatMonth={formatMonth} formatMonthYear={formatMonthYear} {...commonProps} />
Expand All @@ -776,7 +783,7 @@ export default class Calendar extends Component<CalendarProps, CalendarState> {
showFixedNumberOfWeeks,
showNeighboringMonth,
showWeekNumbers,
} = this.props;
} = this.props as CalendarPropsWithDefaults;
const { onMouseLeave } = this;

return (
Expand Down Expand Up @@ -805,7 +812,7 @@ export default class Calendar extends Component<CalendarProps, CalendarState> {
}

renderNavigation() {
const { showNavigation } = this.props;
const { showNavigation } = this.props as CalendarPropsWithDefaults;

if (!showNavigation) {
return null;
Expand All @@ -830,7 +837,7 @@ export default class Calendar extends Component<CalendarProps, CalendarState> {
prevAriaLabel,
prevLabel,
showDoubleView,
} = this.props;
} = this.props as CalendarPropsWithDefaults;

return (
<Navigation
Expand Down Expand Up @@ -861,7 +868,8 @@ export default class Calendar extends Component<CalendarProps, CalendarState> {
}

render() {
const { className, inputRef, selectRange, showDoubleView } = this.props;
const { className, inputRef, selectRange, showDoubleView } = this
.props as CalendarPropsWithDefaults;
const { onMouseLeave, value } = this;
const valueArray = Array.isArray(value) ? value : [value];

Expand Down

0 comments on commit 912b22d

Please sign in to comment.