From 63d63ea6974f355820d5b962521871f9e42a4a1e Mon Sep 17 00:00:00 2001 From: Simona Domnisoru Date: Mon, 12 Aug 2024 14:42:26 +0200 Subject: [PATCH] refactor: replace material ui TextField for Input --- i18n/en.pot | 16 +- .../FormFields/AgeField/AgeField.component.js | 234 ------------------ .../EmailField/EmailField.component.js | 50 ---- .../Generic/D2TextField.component.js | 16 +- .../PhoneNumber/PhoneNumber.component.js | 50 ---- 5 files changed, 10 insertions(+), 356 deletions(-) delete mode 100644 src/core_modules/capture-core/components/FormFields/AgeField/AgeField.component.js delete mode 100644 src/core_modules/capture-core/components/FormFields/EmailField/EmailField.component.js delete mode 100644 src/core_modules/capture-core/components/FormFields/PhoneNumber/PhoneNumber.component.js diff --git a/i18n/en.pot b/i18n/en.pot index b2d551ac19..e19c3035a1 100644 --- a/i18n/en.pot +++ b/i18n/en.pot @@ -5,8 +5,8 @@ msgstr "" "Content-Type: text/plain; charset=utf-8\n" "Content-Transfer-Encoding: 8bit\n" "Plural-Forms: nplurals=2; plural=(n != 1)\n" -"POT-Creation-Date: 2024-08-02T09:44:11.640Z\n" -"PO-Revision-Date: 2024-08-02T09:44:11.640Z\n" +"POT-Creation-Date: 2024-08-08T08:57:10.390Z\n" +"PO-Revision-Date: 2024-08-08T08:57:10.390Z\n" msgid "Choose one or more dates..." msgstr "Choose one or more dates..." @@ -490,18 +490,6 @@ msgstr "Contains text" msgid "Yes" msgstr "Yes" -msgid "mm/dd/yyyy" -msgstr "mm/dd/yyyy" - -msgid "Years" -msgstr "Years" - -msgid "Months" -msgstr "Months" - -msgid "Days" -msgstr "Days" - msgid "Uploading file" msgstr "Uploading file" diff --git a/src/core_modules/capture-core/components/FormFields/AgeField/AgeField.component.js b/src/core_modules/capture-core/components/FormFields/AgeField/AgeField.component.js deleted file mode 100644 index 70b96df9f9..0000000000 --- a/src/core_modules/capture-core/components/FormFields/AgeField/AgeField.component.js +++ /dev/null @@ -1,234 +0,0 @@ -// @flow -import React, { Component } from 'react'; -import i18n from '@dhis2/d2-i18n'; -import moment from 'moment'; -import TextField from '@material-ui/core/TextField'; -import { IconCross16 } from '@dhis2/ui'; -import { D2Date } from '../DateAndTime/D2Date/D2Date.component'; - -type Props = { - onBlur: (value: string, event: UiEventData) => void, -}; - -const containerStyle = { - display: 'flex', - flexDirection: 'row', - flexWrap: 'nowrap', -}; - -const datePickerStyle = { - marginTop: 16, -}; - -const textFieldStyle = { - marginLeft: 8, - width: 60, -}; - -const labelStyle = { - color: 'rgba(0, 0, 0, 0.54)', - fontSize: '1em', -}; - -const clearIconStyle = { - cursor: 'pointer', - marginTop: 20, - marginLeft: 10, -}; - -function monthsDiff(d) { - const now = new Date(); - let months = (now.getFullYear() - d.getFullYear()) * 12; - months += now.getMonth() - d.getMonth(); - - if (now.getDate() < d.getDate()) { - months -= 1; - } - - return months; -} - -function daysDiff(d) { - const now = new Date(); - - if (d.getDate() === now.getDate()) { - return 0; - } - - if (now.getDate() > d.getDate()) { - return now.getDate() - d.getDate(); - } - - if (d.getDate() > now.getDate()) { - const lastDate = new Date(d.getFullYear(), d.getMonth() + 1, 0); - const d2 = new Date(d.getFullYear(), d.getMonth() + 1, now.getDate()); - let diff = lastDate.getDate() - d.getDate(); - diff += d2.getDate(); - return diff; - } - - return 0; -} - -function calculatedValues(d) { - const totalMonths = monthsDiff(d); - const years = Math.floor(totalMonths / 12); - const months = totalMonths % 12; - const days = daysDiff(d); - - return { - days, - months, - years, - }; -} - -export class AgeField extends Component { - static defaultProps = { - value: '', - }; - - constructor(props: Props) { - super(props); - - let years = ''; - let months = ''; - let days = ''; - // $FlowFixMe[prop-missing] automated comment - if (props.value) { - // $FlowFixMe[incompatible-call] automated comment - const v = calculatedValues(new Date(props.value)); - years = v.years; - months = v.months; - days = v.days; - } - - // $FlowFixMe[incompatible-type] automated comment - this.state = { - // $FlowFixMe[prop-missing] automated comment - date: props.value, - years, - months, - days, - }; - } - - emitChange = () => { - // $FlowFixMe[incompatible-call] automated comment - // $FlowFixMe[incompatible-use] automated comment - this.props.onBlur(this.state.date); - } - - updateDate = () => { - // $FlowFixMe[incompatible-use] automated comment - let { years, months, days } = this.state; - - years = years === '' ? 0 : years; - months = months === '' ? 0 : months; - days = days === '' ? 0 : days; - - years = parseInt(years, 10); - months = parseInt(months, 10); - days = parseInt(days, 10); - - const d = moment(); - d.subtract(years, 'years'); - d.subtract(months, 'months'); - d.subtract(days, 'days'); - - // $FlowFixMe[incompatible-call] automated comment - this.setState({ - ...calculatedValues(d.toDate()), - date: d.format('MM/DD/YYYY'), - }, this.emitChange); - } - - // $FlowFixMe[missing-annot] automated comment - // $FlowFixMe[incompatible-call] automated comment - onYearsChange = evt => this.setState({ years: evt.target.value }) - // $FlowFixMe[missing-annot] automated comment - // $FlowFixMe[incompatible-call] automated comment - onMonthsChange = evt => this.setState({ months: evt.target.value }) - // $FlowFixMe[missing-annot] automated comment - // $FlowFixMe[incompatible-call] automated comment - onDaysChange = evt => this.setState({ days: evt.target.value }) - - // $FlowFixMe[missing-annot] automated comment - handleCalendarBlur = (date) => { - if (!date) { - return; - } - - // $FlowFixMe[incompatible-call] automated comment - this.setState({ - date, - ...calculatedValues(new Date(date)), - }, this.emitChange); - } - - onClear = () => { - // $FlowFixMe[incompatible-call] automated comment - this.setState({ - date: '', - years: '', - months: '', - days: '', - }); - } - - render() { - return ( -
- {/* $FlowFixMe[prop-missing] automated comment */} -
{this.props.label}
-
-
- -
- - - -
- -
-
-
- ); - } -} diff --git a/src/core_modules/capture-core/components/FormFields/EmailField/EmailField.component.js b/src/core_modules/capture-core/components/FormFields/EmailField/EmailField.component.js deleted file mode 100644 index 5b9e3dfe39..0000000000 --- a/src/core_modules/capture-core/components/FormFields/EmailField/EmailField.component.js +++ /dev/null @@ -1,50 +0,0 @@ -// @flow -import React, { Component } from 'react'; -import TextField from '@material-ui/core/TextField'; - -type Props = { - onChange: (value: string, event: UiEventData) => void, - onBlur: (value: string, event: UiEventData) => void, -}; - -export class D2EmailField extends Component { - materialUIInstance: any; - materialUIContainerInstance: any; - handleChange: (event: UiEventData) => void; - handleBlur: (event: UiEventData) => void; - - static defaultProps = { - value: '', - }; - - constructor(props: Props) { - super(props); - this.handleChange = this.handleChange.bind(this); - this.handleBlur = this.handleBlur.bind(this); - } - - handleChange(event: UiEventData) { - this.props.onChange(event.target.value, event); - } - - handleBlur(event: UiEventData) { - this.props.onBlur(event.target.value, event); - } - - render() { - const { onChange, onBlur, ...passOnProps } = this.props; - - return ( -
{ this.materialUIContainerInstance = containerInstance; }}> - {/* $FlowFixMe[cannot-spread-inexact] automated comment */} - { this.materialUIInstance = inst; }} - {...passOnProps} - type="email" - onChange={this.handleChange} - onBlur={this.handleBlur} - /> -
- ); - } -} diff --git a/src/core_modules/capture-core/components/FormFields/Generic/D2TextField.component.js b/src/core_modules/capture-core/components/FormFields/Generic/D2TextField.component.js index eee2c72b52..5a6aca542a 100644 --- a/src/core_modules/capture-core/components/FormFields/Generic/D2TextField.component.js +++ b/src/core_modules/capture-core/components/FormFields/Generic/D2TextField.component.js @@ -1,10 +1,10 @@ // @flow +import { Input } from '@dhis2/ui'; import React, { Component } from 'react'; -import TextField from '@material-ui/core/TextField'; type Props = { - onChange?: ?(value: string, event: SyntheticEvent) => void, - onBlur?: ?(value: string, event: SyntheticEvent) => void, + onChange?: ?(value: string, event: HTMLInputElement) => void, + onBlur?: ?(value: string, event: HTMLInputElement) => void, value: ?string, }; @@ -21,12 +21,12 @@ export class D2TextField extends Component { this.handleBlur = this.handleBlur.bind(this); } - handleChange = (event: SyntheticEvent) => { - this.props.onChange && this.props.onChange(event.currentTarget.value, event); + handleChange = (event: HTMLInputElement) => { + this.props.onChange && this.props.onChange(event.value, event); } - handleBlur = (event: SyntheticEvent) => { - this.props.onBlur && this.props.onBlur(event.currentTarget.value, event); + handleBlur = (event: HTMLInputElement) => { + this.props.onBlur && this.props.onBlur(event.value, event); } focus() { @@ -39,7 +39,7 @@ export class D2TextField extends Component { return (
{ this.materialUIContainerInstance = containerInstance; }}> {/* $FlowFixMe[cannot-spread-inexact] automated comment */} - { this.materialUIInstance = inst; }} value={value || ''} onChange={this.handleChange} diff --git a/src/core_modules/capture-core/components/FormFields/PhoneNumber/PhoneNumber.component.js b/src/core_modules/capture-core/components/FormFields/PhoneNumber/PhoneNumber.component.js deleted file mode 100644 index e4219b238c..0000000000 --- a/src/core_modules/capture-core/components/FormFields/PhoneNumber/PhoneNumber.component.js +++ /dev/null @@ -1,50 +0,0 @@ -// @flow -import React, { Component } from 'react'; -import TextField from '@material-ui/core/TextField'; - -type Props = { - onChange: (value: string, event: UiEventData) => void, - onBlur: (value: string, event: UiEventData) => void, -}; - -export class D2PhoneNumber extends Component { - materialUIInstance: any; - materialUIContainerInstance: any; - handleChange: (event: UiEventData) => void; - handleBlur: (event: UiEventData) => void; - - static defaultProps = { - value: '', - }; - - constructor(props: Props) { - super(props); - this.handleChange = this.handleChange.bind(this); - this.handleBlur = this.handleBlur.bind(this); - } - - handleChange(event: UiEventData) { - this.props.onChange(event.target.value, event); - } - - handleBlur(event: UiEventData) { - this.props.onBlur(event.target.value, event); - } - - render() { - const { onChange, onBlur, ...passOnProps } = this.props; - - return ( -
{ this.materialUIContainerInstance = containerInstance; }}> - {/* $FlowFixMe[cannot-spread-inexact] automated comment */} - { this.materialUIInstance = inst; }} - {...passOnProps} - type="text" - onChange={this.handleChange} - onBlur={this.handleBlur} - /> -
- ); - } -}