Migrate ./components/widgets/icons/fa_warning_icon.tsx from Class Component to Function Component (#25644)

* chore: migrate fa_warning_icon to functional component

* test: updated snapshots

* removed injectIntl funtion call

* test: updated snapshots
Этот коммит содержится в:
Aditi Patel
2023-12-13 09:16:02 -06:00
коммит произвёл GitHub
родитель f8d191b7cb
Коммит 440039ba98
2 изменённых файлов: 23 добавлений и 109 удалений

Просмотреть файл

@@ -115,54 +115,12 @@ exports[`components/admin_console/request_button/request_button.jsx should match
<div <div
className="alert alert-warning" className="alert alert-warning"
> >
<injectIntl(WarningIcon)> <Memo(WarningIcon)>
<WarningIcon <i
intl={ className="fa fa-warning"
Object { title="Warning Icon"
"$t": [Function], />
"defaultFormats": Object {}, </Memo(WarningIcon)>
"defaultLocale": "en",
"defaultRichTextElements": undefined,
"fallbackOnEmptyString": true,
"formatDate": [Function],
"formatDateTimeRange": [Function],
"formatDateToParts": [Function],
"formatDisplayName": [Function],
"formatList": [Function],
"formatListToParts": [Function],
"formatMessage": [Function],
"formatNumber": [Function],
"formatNumberToParts": [Function],
"formatPlural": [Function],
"formatRelativeTime": [Function],
"formatTime": [Function],
"formatTimeToParts": [Function],
"formats": Object {},
"formatters": Object {
"getDateTimeFormat": [Function],
"getDisplayNames": [Function],
"getListFormat": [Function],
"getMessageFormat": [Function],
"getNumberFormat": [Function],
"getPluralRules": [Function],
"getRelativeTimeFormat": [Function],
},
"locale": "en",
"messages": Object {},
"onError": [Function],
"onWarn": [Function],
"textComponent": "span",
"timeZone": "Etc/UTC",
"wrapRichTextChunksInFragment": undefined,
}
}
>
<i
className="fa fa-warning"
title="Warning Icon"
/>
</WarningIcon>
</injectIntl(WarningIcon)>
<FormattedMessage <FormattedMessage
defaultMessage="Error Message: {error}" defaultMessage="Error Message: {error}"
id="error.message" id="error.message"
@@ -282,54 +240,12 @@ exports[`components/admin_console/request_button/request_button.jsx should match
<div <div
className="alert alert-warning" className="alert alert-warning"
> >
<injectIntl(WarningIcon)> <Memo(WarningIcon)>
<WarningIcon <i
intl={ className="fa fa-warning"
Object { title="Warning Icon"
"$t": [Function], />
"defaultFormats": Object {}, </Memo(WarningIcon)>
"defaultLocale": "en",
"defaultRichTextElements": undefined,
"fallbackOnEmptyString": true,
"formatDate": [Function],
"formatDateTimeRange": [Function],
"formatDateToParts": [Function],
"formatDisplayName": [Function],
"formatList": [Function],
"formatListToParts": [Function],
"formatMessage": [Function],
"formatNumber": [Function],
"formatNumberToParts": [Function],
"formatPlural": [Function],
"formatRelativeTime": [Function],
"formatTime": [Function],
"formatTimeToParts": [Function],
"formats": Object {},
"formatters": Object {
"getDateTimeFormat": [Function],
"getDisplayNames": [Function],
"getListFormat": [Function],
"getMessageFormat": [Function],
"getNumberFormat": [Function],
"getPluralRules": [Function],
"getRelativeTimeFormat": [Function],
},
"locale": "en",
"messages": Object {},
"onError": [Function],
"onWarn": [Function],
"textComponent": "span",
"timeZone": "Etc/UTC",
"wrapRichTextChunksInFragment": undefined,
}
}
>
<i
className="fa fa-warning"
title="Warning Icon"
/>
</WarningIcon>
</injectIntl(WarningIcon)>
<FormattedMessage <FormattedMessage
defaultMessage="Error Message: {error}" defaultMessage="Error Message: {error}"
id="error.message" id="error.message"

Просмотреть файл

@@ -3,22 +3,20 @@
import classNames from 'classnames'; import classNames from 'classnames';
import React from 'react'; import React from 'react';
import {injectIntl, type IntlShape} from 'react-intl'; import {useIntl} from 'react-intl';
type Props = { type Props = {
additionalClassName?: string; additionalClassName?: string;
intl: IntlShape;
} }
class WarningIcon extends React.PureComponent<Props> { const WarningIcon = ({additionalClassName}: Props) => {
public render(): JSX.Element { const {formatMessage} = useIntl();
return ( return (
<i <i
className={classNames('fa fa-warning', this.props.additionalClassName)} className={classNames('fa fa-warning', additionalClassName)}
title={this.props.intl.formatMessage({id: 'generic_icons.warning', defaultMessage: 'Warning Icon'})} title={formatMessage({id: 'generic_icons.warning', defaultMessage: 'Warning Icon'})}
/> />
); );
} };
}
export default injectIntl(WarningIcon); export default React.memo(WarningIcon);