Skip to content
This repository has been archived by the owner on Oct 12, 2023. It is now read-only.

Commit

Permalink
Refactor components to not use unsafe react methods (#155)
Browse files Browse the repository at this point in the history
  • Loading branch information
@PatoBeltran
PatoBeltran authored Jan 9, 2020
1 parent c9b42c0 commit 3aad552
Show file tree
Hide file tree
Showing 6 changed files with 101 additions and 155 deletions.
8 changes: 4 additions & 4 deletions lib/components/Balloon/Balloon.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,10 +75,10 @@ export class Balloon extends React.Component<BalloonProps, BalloonState> {
};
}

UNSAFE_componentWillReceiveProps(newProps: BalloonProps) {
this.setState({
visible: this.state.hovered || newProps.expanded,
});
static getDerivedStateFromProps(props: BalloonProps, state: BalloonState): Partial<BalloonState> | null {
return {
visible: state.hovered || props.expanded
};
}

shouldComponentUpdate(newProps: BalloonProps, newState: BalloonState): boolean {
Expand Down
61 changes: 32 additions & 29 deletions lib/components/DateTime/Calendar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,26 +78,24 @@ export class Calendar extends React.Component<CalendarProps, Partial<CalendarSta
}
};

private value: MethodDate;
private monthNames: string[];
private dayNames: string[];
private _container: HTMLDivElement;
private nextFocusRow?: number;
private nextFocusCol?: number;


constructor(props: CalendarProps) {
super(props);

let currentDate: MethodDate;
if (typeof (this.props.value) === 'string') {
this.value = MethodDate.fromString(this.props.localTimezone, this.props.value);
currentDate = MethodDate.fromString(this.props.localTimezone, this.props.value);
} else if (this.props.value) {
this.value = MethodDate.fromDate(this.props.localTimezone, this.props.value);
currentDate = MethodDate.fromDate(this.props.localTimezone, this.props.value);
} else {
this.value = new MethodDate(this.props.localTimezone);
currentDate = new MethodDate(this.props.localTimezone);
}

let currentDate = this.value.copy();
if (props.year > 0) {
currentDate.year = props.year;
}
Expand All @@ -120,33 +118,29 @@ export class Calendar extends React.Component<CalendarProps, Partial<CalendarSta
this.setContainerRef = this.setContainerRef.bind(this);
}

UNSAFE_componentWillReceiveProps(newProps: CalendarProps) {
const date = this.state.currentDate.copy();
static getDerivedStateFromProps(props: CalendarProps, state: CalendarState): Partial<CalendarState> | null {
const date = state.currentDate.copy();
let update = false;
if (newProps.year !== this.props.year && newProps.year > 0) {
date.year = newProps.year;

if (props.year > 0) {
date.year = props.year;
update = true;
}
if (
typeof (newProps.month) === 'number' &&
newProps.month !== this.props.month &&
(newProps.month === 0 || newProps.month > 0)

if (typeof (props.month) === 'number' &&
(props.month === 0 || props.month > 0)
) {
date.month = newProps.month;
date.month = props.month;
update = true;
}
if (update && !this.state.detached && date.isValid()) {
this.setState({ currentDate: date });
}
if (this.props.value !== newProps.value || this.props.localTimezone !== newProps.localTimezone) {
if (typeof (newProps.value) === 'string') {
this.value = MethodDate.fromString(newProps.localTimezone, newProps.value);
} else if (newProps.value) {
this.value = MethodDate.fromDate(newProps.localTimezone, newProps.value);
} else {
this.value = new MethodDate(newProps.localTimezone);
}

if (update && !state.detached && date.isValid()) {
return {
currentDate: date
};
}

return null;
}

componentDidUpdate() {
Expand Down Expand Up @@ -283,6 +277,15 @@ export class Calendar extends React.Component<CalendarProps, Partial<CalendarSta
const curYear = this.state.currentDate.year;
const curMonth = this.state.currentDate.month;

let currentDate: MethodDate;
if (typeof (this.props.value) === 'string') {
currentDate = MethodDate.fromString(this.props.localTimezone, this.props.value);
} else if (this.props.value) {
currentDate = MethodDate.fromDate(this.props.localTimezone, this.props.value);
} else {
currentDate = new MethodDate(this.props.localTimezone);
}

const weekdays = this.dayNames.map(day => {
return (
<Attr.div key={day} attr={this.props.attr.weekDayHeader}>
Expand Down Expand Up @@ -351,9 +354,9 @@ export class Calendar extends React.Component<CalendarProps, Partial<CalendarSta
if (this.props.value) {
const isSelected = (
this.props.value &&
date === this.value.date &&
col.month === this.value.month &&
col.year === this.value.year
date === currentDate.date &&
col.month === currentDate.month &&
col.year === currentDate.year
);
if (isSelected) {
return (
Expand Down
38 changes: 14 additions & 24 deletions lib/components/DateTime/DatePicker.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -124,7 +124,7 @@ export class DatePicker extends React.Component<DatePickerProps, Partial<DatePic
constructor(props: DatePickerProps) {
super(props);

const newState = this.getInitialState(props, '');
const newState = DatePicker.getInitialState(props, '');
this.state = {
...newState,
expanded: false,
Expand All @@ -140,23 +140,23 @@ export class DatePicker extends React.Component<DatePickerProps, Partial<DatePic
*
* @param props DatePickerProps
*/
getInitialState(props: DatePickerProps, currentValue: string): DatePickerState {
static getInitialState(props: DatePickerProps, currentValue: string, currentInitialValue?: MethodDate): DatePickerState {
const local = props.localTimezone;
let value = currentValue;
let initialValue: MethodDate = null;
if (props.initialValue) {
if (props.initialValue === 'invalid') {
if (this.state && this.state.initialValue) {
if (currentInitialValue) {
initialValue = MethodDate.fromString(
props.localTimezone,
this.state.initialValue.dateObject.toJSON()
currentInitialValue.dateObject.toJSON()
);
}
} else if (typeof(props.initialValue) === 'string') {
const date = MethodDate.fromString(local, props.initialValue);
if (date && dateIsValid(date.dateObject, local)) {
initialValue = date;
const parsed = this.parse(currentValue);
const parsed = DatePicker.parse(currentValue, props.format, props.localTimezone);
if (
date.year !== parsed.year ||
date.month !== (parsed.month - 1) ||
Expand Down Expand Up @@ -203,18 +203,8 @@ export class DatePicker extends React.Component<DatePickerProps, Partial<DatePic
};
}

/**
* Update the Date/Time object used internally with a new initialValue
*
* @param newProps new DatePickerProps
*/
UNSAFE_componentWillReceiveProps(newProps: DatePickerProps) {
if ((this.props.initialValue !== newProps.initialValue || this.props.localTimezone !== newProps.localTimezone) && newProps.initialValue !== 'invalid') {
const newState = this.getInitialState(newProps, this.input.value);
this.setState({
...newState,
});
}
static getDerivedStateFromProps(props: DatePickerProps, state: DatePickerState): Partial<DatePickerState> | null {
return DatePicker.getInitialState(props, state.value, state.initialValue);
}

componentDidMount() {
Expand All @@ -227,7 +217,7 @@ export class DatePicker extends React.Component<DatePickerProps, Partial<DatePic
window.removeEventListener('keydown', this.onKeydown);
}

parse(newValue: string) {
static parse(newValue: string, format: DateFormat, localTimezone: boolean) {
let valid = true;

let split = newValue.split('/');
Expand All @@ -239,17 +229,17 @@ export class DatePicker extends React.Component<DatePickerProps, Partial<DatePic
}

let year, month, date;
if (this.props.format === DateFormat.DDMMYYYY) {
if (format === DateFormat.DDMMYYYY) {
year = parseInt(split[2]);
month = parseInt(split[1]);
date = parseInt(split[0]);
}
else if (this.props.format === DateFormat.MMDDYYYY) {
else if (format === DateFormat.MMDDYYYY) {
year = parseInt(split[2]);
month = parseInt(split[0]);
date = parseInt(split[1]);
}
else if (this.props.format === DateFormat.YYYYMMDD) {
else if (format === DateFormat.YYYYMMDD) {
year = parseInt(split[0]);
month = parseInt(split[1]);
date = parseInt(split[2]);
Expand All @@ -271,7 +261,7 @@ export class DatePicker extends React.Component<DatePickerProps, Partial<DatePic

if (valid) {
let parsed = new MethodDate(
this.props.localTimezone,
localTimezone,
year,
month - 1,
date
Expand Down Expand Up @@ -305,7 +295,7 @@ export class DatePicker extends React.Component<DatePickerProps, Partial<DatePic
this.setState({value: newValue});
}
} else {
let result = this.parse(newValue);
let result = DatePicker.parse(newValue, this.props.format, this.props.localTimezone);
if (result.valid) {
const initialValue = this.state.initialValue;
const dateValue = new MethodDate(
Expand Down Expand Up @@ -387,7 +377,7 @@ export class DatePicker extends React.Component<DatePickerProps, Partial<DatePic

const placeholder = placeholders[this.props.format];

const parsed = this.parse(this.state.value);
const parsed = DatePicker.parse(this.state.value, this.props.format, this.props.localTimezone);
const inputClassName = css('date-picker-input', {
'error': !!this.props.error || (
!parsed.valid && !!this.props.initialValue
Expand Down
10 changes: 4 additions & 6 deletions lib/components/DateTime/DateTimeField.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -133,10 +133,10 @@ export class DateTimeField extends React.Component<DateTimeFieldProps, Partial<D
constructor(props: DateTimeFieldProps) {
super(props);

this.state = this.getInitialState(props);
this.state = DateTimeField.getInitialState(props);
}

getInitialState(props: DateTimeFieldProps): DateTimeFieldState {
static getInitialState(props: DateTimeFieldProps): DateTimeFieldState {
const local = props.localTimezone;
let invalid = false;
let initialValue = null;
Expand Down Expand Up @@ -212,10 +212,8 @@ export class DateTimeField extends React.Component<DateTimeFieldProps, Partial<D
};
}

UNSAFE_componentWillReceiveProps(newProps: DateTimeFieldProps) {
if (this.props.initialValue !== newProps.initialValue || this.props.localTimezone !== newProps.localTimezone) {
this.setState(this.getInitialState(newProps));
}
static getDerivedStateFromProps(props: DateTimeFieldProps, _state: DateTimeFieldState): Partial<DateTimeFieldState> | null {
return DateTimeField.getInitialState(props);
}

onDatePaste = (newDate: string): boolean => {
Expand Down
Loading

0 comments on commit 3aad552

Please sign in to comment.