Protei/PromucFlow_constructor
2
0
Fork 0
Code Issues Pull Requests Actions 4 Packages Projects Releases Wiki Activity

BUG-4058 : Inconsistence in the meta properties fallbacks in widgets (#4167)

Browse Source 
Datepicker selected data and formatted date will not be empty on clear and not fallback to default date. This is consistent with other widget behaviour
This commit is contained in:
Paul Li 2021-07-16 08:26:39 -04:00 committed by GitHub
parent c5a909ddc8
commit b6703ebe11
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 47 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/client/src/components/ads/DatePickerComponent.tsx
View File

@ -97,7 +97,7 @@ interface DatePickerComponentProps {
value: Date | null;
onChange?: (selectedDate: Date, isUserChange: boolean) => void;
formatDate?: (date: Date) => string;
parseDate?: (dateStr: string) => Date;
parseDate?: (dateStr: string) => Date | null;
}
function DatePickerComponent(props: DatePickerComponentProps) {

26
app/client/src/components/designSystems/blueprint/DatePickerComponent.tsx
View File

@ -108,9 +108,13 @@ class DatePickerComponent extends React.Component<
.clone()
.set({ month: 11, date: 31, year: year + 20 })
.toDate();
const isValid = this.state.selectedDate
? this.isValidDate(this.parseDate(this.state.selectedDate))
: true;
const parsedDate = this.state.selectedDate
? this.parseDate(this.state.selectedDate)
: null;
const isValid =
this.state.selectedDate && parsedDate
? this.isValidDate(parsedDate)
: true;
const value =
isValid && this.state.selectedDate
? this.parseDate(this.state.selectedDate)
@ -192,12 +196,16 @@ class DatePickerComponent extends React.Component<
return moment(date).format(dateFormat);
};
parseDate = (dateStr: string): Date => {
const dateFormat = this.props.dateFormat || ISO_DATE_FORMAT;
const date = moment(dateStr, dateFormat);
parseDate = (dateStr: string): Date | null => {
if (!dateStr) {
return null;
} else {
const dateFormat = this.props.dateFormat || ISO_DATE_FORMAT;
const date = moment(dateStr, dateFormat);
if (date.isValid()) return moment(dateStr, dateFormat).toDate();
else return moment().toDate();
if (date.isValid()) return moment(dateStr, dateFormat).toDate();
else return moment().toDate();
}
};
/**
@ -207,7 +215,7 @@ class DatePickerComponent extends React.Component<
*
* @param selectedDate
*/
onDateSelected = (selectedDate: Date, isUserChange: boolean) => {
onDateSelected = (selectedDate: Date | null, isUserChange: boolean) => {
if (isUserChange) {
const { onDateSelected } = this.props;

19
app/client/src/components/designSystems/blueprint/DatePickerComponent2.tsx
View File

@ -194,11 +194,17 @@ class DatePickerComponent extends React.Component<
return moment(date).format(dateFormat);
};
parseDate = (dateStr: string): Date => {
const date = moment(dateStr);
const dateFormat = this.props.dateFormat || ISO_DATE_FORMAT;
if (date.isValid()) return moment(dateStr, dateFormat).toDate();
else return moment().toDate();
parseDate = (dateStr: string): Date | null => {
//when user clears date field the value of dateStr will be empty
//and that means user is clearing date field
if (!dateStr) {
return null;
} else {
const date = moment(dateStr);
const dateFormat = this.props.dateFormat || ISO_DATE_FORMAT;
if (date.isValid()) return moment(dateStr, dateFormat).toDate();
else return moment().toDate();
}
};
/**
@ -208,7 +214,8 @@ class DatePickerComponent extends React.Component<
*
* @param selectedDate
*/
onDateSelected = (selectedDate: Date, isUserChange: boolean) => {
onDateSelected = (selectedDate: Date | null, isUserChange: boolean) => {
console.log({ selectedDate, isUserChange });
if (isUserChange) {
const { onDateSelected } = this.props;

24
app/client/src/components/propertyControls/DatePickerControl.tsx
View File

@ -105,14 +105,14 @@ class DatePickerControl extends BaseControl<
*
* @param date
*/
onDateSelected = (date: Date, isUserChange: boolean): void => {
onDateSelected = (date: Date | null, isUserChange: boolean): void => {
if (isUserChange) {
const selectedDate = date
? this.props.widgetProperties.version === 2
? date.toISOString()
: this.formatDate(date)
: undefined;
const isValid = this.validateDate(date);
const isValid = date ? this.validateDate(date) : true;
if (!isValid) return;
// if everything is ok, put date in state
this.setState({ selectedDate: selectedDate });
@ -137,15 +137,19 @@ class DatePickerControl extends BaseControl<
return moment(date).format(dateFormat);
};
parseDate = (dateStr: string): Date => {
const dateFormat =
this.props.widgetProperties.version === 2
? ISO_DATE_FORMAT
: this.props.widgetProperties.dateFormat || ISO_DATE_FORMAT;
const date = moment(dateStr, dateFormat);
parseDate = (dateStr: string): Date | null => {
if (!dateStr) {
return null;
} else {
const dateFormat =
this.props.widgetProperties.version === 2
? ISO_DATE_FORMAT
: this.props.widgetProperties.dateFormat || ISO_DATE_FORMAT;
const date = moment(dateStr, dateFormat);
if (date.isValid()) return moment(dateStr, dateFormat).toDate();
else return moment().toDate();
if (date.isValid()) return moment(dateStr, dateFormat).toDate();
else return moment().toDate();
}
};
static getControlType() {

4
app/client/src/widgets/DatePickerWidget2.tsx
View File

@ -194,8 +194,8 @@ class DatePickerWidget extends BaseWidget<DatePickerWidget2Props, WidgetState> {
static getDerivedPropertiesMap(): DerivedPropertiesMap {
return {
isValid: `{{ this.isRequired ? !!this.selectedDate : true }}`,
selectedDate: `{{ this.value ? moment(this.value).toISOString() : (this.defaultDate ? moment(this.defaultDate).toISOString() : "")}}`,
formattedDate: `{{ this.value ? moment(this.value).format(this.dateFormat) : (this.defaultDate ? moment(this.defaultDate).format(this.dateFormat) : "")}}`,
selectedDate: `{{ this.value ? moment(this.value).toISOString() : "" }}`,
formattedDate: `{{ this.value ? moment(this.value).format(this.dateFormat) : "" }}`,
};
}