Extract Tag to its own component (#8309)

src/components/views/elements/Tag.tsx

@@ -0,0 +1,44 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from "react";
+
+import AccessibleButton from "./AccessibleButton";
+import { Icon as CancelRounded } from "../../../../res/img/element-icons/cancel-rounded.svg";
+
+interface IProps {
+    icon?: () => JSX.Element;
+    label: string;
+    onDeleteClick?: () => void;
+    disabled?: boolean;
+}
+
+export const Tag = ({
+    icon,
+    label,
+    onDeleteClick,
+    disabled = false,
+}: IProps) => {
+    return <div className='mx_Tag'>
+        { icon?.() }
+        { label }
+        { onDeleteClick && (
+            <AccessibleButton className="mx_Tag_delete" onClick={onDeleteClick} disabled={disabled}>
+                <CancelRounded />
+            </AccessibleButton>
+        ) }
+    </div>;
+};

src/components/views/elements/TagComposer.tsx

@@ -19,6 +19,7 @@ import React, { ChangeEvent, FormEvent } from "react";
 import Field from "./Field";
 import { _t } from "../../../languageHandler";
 import AccessibleButton from "./AccessibleButton";
+import { Tag } from "./Tag";
 
 interface IProps {
     tags: string[];
@@ -80,10 +81,13 @@ export default class TagComposer extends React.PureComponent<IProps, IState> {
                 </AccessibleButton>
             </form>
             <div className='mx_TagComposer_tags'>
-                { this.props.tags.map((t, i) => (<div className='mx_TagComposer_tag' key={i}>
-                    <span>{ t }</span>
-                    <AccessibleButton onClick={this.onRemove.bind(this, t)} disabled={this.props.disabled} />
-                </div>)) }
+                { this.props.tags.map((t, i) => (
+                    <Tag
+                        label={t}
+                        key={t}
+                        onDeleteClick={this.onRemove.bind(this, t)}
+                        disabled={this.props.disabled} />
+                )) }
             </div>
         </div>;
     }