From a0c70ec928cd441eed17ff14cc70cc1f8caa692f Mon Sep 17 00:00:00 2001 From: Alice Rosa Date: Fri, 2 Sep 2022 08:24:04 +0300 Subject: [PATCH] AllowTextInput #2943 Still has issues due to onSelectDate being called twice: https://github.com/microsoft/fluentui/issues/22283 The second time it's called with a null value and it just resets the field. --- samples/react-list-form/package.json | 2 +- .../components/formFields/DateFormField.tsx | 114 +++++++++++------- .../components/formFields/SPFieldDateEdit.tsx | 2 +- 3 files changed, 74 insertions(+), 44 deletions(-) diff --git a/samples/react-list-form/package.json b/samples/react-list-form/package.json index 78b7049c9..7f1aa1dd3 100755 --- a/samples/react-list-form/package.json +++ b/samples/react-list-form/package.json @@ -25,7 +25,7 @@ "@types/webpack-env": "1.13.1", "@uifabric/icons": "^7.3.14", "moment": "^2.24.0", - "office-ui-fabric-react": "^6.189.2", + "office-ui-fabric-react": "^7.197.1", "react-dnd": "~2.5.4", "react-dnd-html5-backend": "~2.5.4", "react-html-parser": "^2.0.2", diff --git a/samples/react-list-form/src/webparts/listForm/components/formFields/DateFormField.tsx b/samples/react-list-form/src/webparts/listForm/components/formFields/DateFormField.tsx index 346e4fe7c..6a35e4406 100644 --- a/samples/react-list-form/src/webparts/listForm/components/formFields/DateFormField.tsx +++ b/samples/react-list-form/src/webparts/listForm/components/formFields/DateFormField.tsx @@ -16,42 +16,27 @@ export interface IDateFormFieldProps extends IDatePickerProps { value: any; } export interface IDateFormFieldState { - date?: Date; - hours: number; - minutes: number; + date: Date, + options: { + hours: IComboBoxOption[], + minutes: IComboBoxOption[] + } } export default class DateFormField extends React.Component { constructor(props) { super(props); - this._createComboBoxHours = this._createComboBoxHours.bind(this); - this._createComboBoxMinutes = this._createComboBoxMinutes.bind(this); this.state = { - hours: 0, - minutes: 0 + date: this._parseDateString(this.props.value), + options: { + hours: this._createComboBoxHours(), + minutes: this._createComboBoxMinutes() + } }; } - public componentDidUpdate(prevProps: IDateFormFieldProps, prevState: IDateFormFieldState) { - //Component Value property got updated from List State - if (this.props.value && prevProps.value != this.props.value) { - let momentDate = moment(this.props.value, moment.localeData(this.props.locale).longDateFormat('L')); - this.setState({ - hours: momentDate.hour(), - minutes: momentDate.minute(), - date: momentDate.toDate() - }); - } - //Component value updated - if (this.state.date && this.state.date != prevState.date) { - let result = this.props.fieldSchema.DisplayFormat == 1 ? - this.state.date.toLocaleDateString(this.props.locale) + " " + this.state.date.toLocaleTimeString(this.props.locale, { hour: "2-digit", minute: "2-digit" }) : //Date + Time - this.state.date.toLocaleDateString(this.props.locale); //Only date - this.props.valueChanged(result); - } - } - public render() { + return ( (typeof date.toLocaleDateString === 'function') ? date.toLocaleDateString(this.props.locale) : ''} + formatDate={(date: Date) => (date && typeof date.toLocaleDateString === 'function') ? date.toLocaleDateString(this.props.locale) : ''} isRequired={this.props.isRequired} onSelectDate={this._onSelectDate} - parseDateFromString={(dateStr: string) => new Date(Date.parse(dateStr))} + parseDateFromString={this._parseDateString} placeholder={this.props.placeholder} strings={strings} value={this.state.date} @@ -72,20 +57,20 @@ export default class DateFormField extends React.Component @@ -95,28 +80,73 @@ export default class DateFormField extends React.Component { - let date = inputDate ? moment(inputDate) : moment(); - date.hour(this.state.hours); - date.minute(this.state.minutes); - this.setState({ date: date.toDate() }); + console.log("Date has been selected" + !inputDate ? "" : inputDate.toLocaleDateString()); + if (inputDate) { + + this.setState(prevState => { + return { + date: inputDate, + ...prevState + }; + }); + //this._onValueChanged(inputDate); + } } private _onHoursChanged = (event: React.FormEvent, option?: IComboBoxOption): void => { + console.log(event); + console.log(option); if (option) { - let date = this.state.date ? moment(this.state.date) : moment(); let hours = parseInt(option.key.toString()); - date.hour(hours); - this.setState({ date: date.toDate(), hours }); + this.setState(prevState => { + let momentDate = prevState.date ? moment(prevState.date) : moment(); + momentDate.hour(hours); + let date = momentDate.toDate() + //this._onValueChanged(date); + return { + date: date, + ...prevState + }; + }); } } private _onMinutesChanged = (event: React.FormEvent, option?: IComboBoxOption): void => { if (option) { - let date = this.state.date ? moment(this.state.date) : moment(); let minutes = parseInt(option.key.toString()); - date.minute(minutes); - this.setState({ date: date.toDate(), minutes }); + this.setState(prevState => { + let momentDate = prevState.date ? moment(prevState.date) : moment(); + momentDate.minutes(minutes); + let date = momentDate.toDate() + // this._onValueChanged(date); + return { + date: date, + ...prevState + }; + }); } } + private _onValueChanged(date: Date) { + let result = ''; + if (date) { + result = this.props.fieldSchema.DisplayFormat == 1 ? + date.toLocaleDateString(this.props.locale) + " " + date.toLocaleTimeString(this.props.locale, { hour: "2-digit", minute: "2-digit" }) : //Date + Time + date.toLocaleDateString(this.props.locale); //Only date + } + this.props.valueChanged(result); + } + + private _parseDateString(inputDate: string): Date { + if (!inputDate) { + return null; + } + + let momentDate = this.props.fieldSchema.DisplayFormat == 1 ? + moment(inputDate, moment.localeData(this.props.locale).longDateFormat('LT')) : + moment(inputDate, moment.localeData(this.props.locale).longDateFormat('L')) + return momentDate.toDate() + } + + private _createComboBoxHours(): IComboBoxOption[] { let results = new Array(); if (this.props.fieldSchema.HoursOptions) { diff --git a/samples/react-list-form/src/webparts/listForm/components/formFields/SPFieldDateEdit.tsx b/samples/react-list-form/src/webparts/listForm/components/formFields/SPFieldDateEdit.tsx index 7b6bc024d..5879285bc 100644 --- a/samples/react-list-form/src/webparts/listForm/components/formFields/SPFieldDateEdit.tsx +++ b/samples/react-list-form/src/webparts/listForm/components/formFields/SPFieldDateEdit.tsx @@ -17,7 +17,7 @@ const SPFieldDateEdit: React.SFC = (props) => { ariaLabel={props.fieldSchema.Title} locale={locale} firstDayOfWeek={props.fieldSchema.FirstDayOfWeek} - allowTextInput + allowTextInput={true} fieldSchema={props.fieldSchema} value={props.value} valueChanged={props.valueChanged}