[MM-56294] Convert ./components/admin_console/group_settings/group_details/group_profile.tsx from Class Component to Function Component (#25766)

* [MM-56294] Convert `./components/admin_console/group_settings/group_details/group_profile.tsx` from Class Component to Function Component

* refactor: update snapshots
This commit is contained in:
Syed Ali Abbas Zaidi
2023-12-22 14:35:17 +05:00
committed by GitHub
parent ec4fdba04e
commit 11ae867ce3
2 changed files with 43 additions and 47 deletions

View File

@@ -9,7 +9,7 @@ exports[`components/admin_console/group_settings/group_details/GroupProfileAndSe
titleDefault="Group Profile"
titleId="admin.group_settings.group_detail.groupProfileTitle"
>
<GroupProfile
<Memo(GroupProfile)
customID="groupDisplayName"
isDisabled={true}
name="GroupProfileAndSettings"
@@ -49,7 +49,7 @@ exports[`components/admin_console/group_settings/group_details/GroupProfileAndSe
titleDefault="Group Profile"
titleId="admin.group_settings.group_detail.groupProfileTitle"
>
<GroupProfile
<Memo(GroupProfile)
customID="groupDisplayName"
isDisabled={true}
name="GroupProfileAndSettings"
@@ -77,7 +77,7 @@ exports[`components/admin_console/group_settings/group_details/GroupProfileAndSe
/>
</div>
</div>
<GroupProfile
<Memo(GroupProfile)
customID="groupMention"
name="GroupProfileAndSettings"
onChange={[MockFunction]}

View File

@@ -1,7 +1,7 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import React from 'react';
import React, {memo} from 'react';
import {FormattedMessage} from 'react-intl';
import MentionsIcon from 'components/widgets/icons/mentions_icon';
@@ -16,49 +16,45 @@ type Props = {
onChange?: React.ChangeEventHandler<HTMLInputElement>;
}
export default class GroupProfile extends React.PureComponent<Props> {
render = () => {
const {
name,
title,
titleDefault,
customID,
isDisabled,
showAtMention,
onChange,
} = this.props;
return (
<div
className='group-profile form-horizontal'
id={customID}
>
<div className='group-profile-field form-group mb-0'>
<label className='control-label col-sm-4'>
<FormattedMessage
id={title}
defaultMessage={titleDefault}
const GroupProfile = ({
name,
title,
titleDefault,
customID,
isDisabled,
showAtMention,
onChange,
}: Props) => (
<div
className='group-profile form-horizontal'
id={customID}
>
<div className='group-profile-field form-group mb-0'>
<label className='control-label col-sm-4'>
<FormattedMessage
id={title}
defaultMessage={titleDefault}
/>
</label>
<div className='col-sm-8'>
<div className='icon-over-input'>
{showAtMention && (
<MentionsIcon
className='icon icon__mentions'
aria-hidden='true'
/>
</label>
<div className='col-sm-8'>
<div className='icon-over-input'>
{showAtMention && (
<MentionsIcon
className='icon icon__mentions'
aria-hidden='true'
/>
)}
</div>
<input
type='text'
className='form-control group-at-mention-input'
value={name}
disabled={isDisabled}
onChange={onChange}
/>
</div>
)}
</div>
<input
type='text'
className='form-control group-at-mention-input'
value={name}
disabled={isDisabled}
onChange={onChange}
/>
</div>
);
};
}
</div>
</div>
);
export default memo(GroupProfile);