From 42dc96de4e887b4a8457fbd0cfa6bc65315ff330 Mon Sep 17 00:00:00 2001
From: kunzheng <58841788+kunzms@users.noreply.github.com>
Date: Sun, 9 Feb 2020 18:30:05 -0800
Subject: [PATCH] fix: hide current tag type/format from dropdown (#16)

* fix: hide current tag type/format from dropdown

* Update tagInput.tsx
---
 .../components/common/tagInput/tagInput.tsx     | 17 ++++++-----------
 .../common/tagInput/tagTypeFormat.tsx           | 10 +++++++---
 2 files changed, 13 insertions(+), 14 deletions(-)

diff --git a/src/react/components/common/tagInput/tagInput.tsx b/src/react/components/common/tagInput/tagInput.tsx
index b06a112b..e7ff135e 100644
--- a/src/react/components/common/tagInput/tagInput.tsx
+++ b/src/react/components/common/tagInput/tagInput.tsx
@@ -354,14 +354,15 @@ export class TagInput extends React.Component<ITagInputProps, ITagInputState> {
                                 {
                                     this.state.showDropDown &&
                                     <TagTypeFormat
-                                    key={this.state.editingTag.name}
-                                    tag={this.state.editingTag}
-                                    onChange={this.props.onTagChanged}
-                                    />
+                                        key={this.state.editingTag.name}
+                                        tag={this.state.editingTag}
+                                        onChange={this.props.onTagChanged}
+                                        />
                                 }
                             </div>
                         </Align>
-                        , this.state.fieldPortalElement)}
+                        , this.state.fieldPortalElement)
+                }
             </div>
         );
     }
@@ -376,10 +377,6 @@ export class TagInput extends React.Component<ITagInputProps, ITagInputState> {
             points: [`${alignCorner}r`, `${alignCorner}l`],
             // Offset source node by 0px in x and 6px in y
             offset: [0, verticalOffset],
-            // Offset targetNode by 30% of target node width in x and 40% of target node height
-            // targetOffset: ["30%", "40%"],
-            // Auto adjust position when source node is overflowed
-            // overflow: {adjustX: true, adjustY: true}
         };
     }
 
@@ -389,8 +386,6 @@ export class TagInput extends React.Component<ITagInputProps, ITagInputState> {
             points: ["tr", "br"],
             // Offset source node by 6px in x and 3px in y
             offset: [6, 3],
-            // Offset targetNode by 30% of target node width in x and 40% of target node height
-            // targetOffset: ["30%", "40%"],
             // Auto adjust position when source node is overflowed
             overflow: {adjustX: true, adjustY: true},
         };
diff --git a/src/react/components/common/tagInput/tagTypeFormat.tsx b/src/react/components/common/tagInput/tagTypeFormat.tsx
index 0134bf25..140c719a 100644
--- a/src/react/components/common/tagInput/tagTypeFormat.tsx
+++ b/src/react/components/common/tagInput/tagTypeFormat.tsx
@@ -88,7 +88,9 @@ export default class TagTypeFormat extends React.Component<ITagTypeFormatProps,
                         <div className = {this.showHideType()}>
                             <ol className = "format-items-list">
                                 {
-                                    types.map((type) => {
+                                    types.filter((type) => {
+                                        return FieldType[type] !== tag.type;
+                                    }).map((type) => {
                                         return(
                                             this.getTypeListItem(this, type)
                                         );
@@ -102,11 +104,13 @@ export default class TagTypeFormat extends React.Component<ITagTypeFormatProps,
                         <div onClick={this.handleFormatShow} className = "field-background-container">
                             <span>{tag.format}</span>
                             <span className={dropdownIconClass}></span>
-                         </div>
+                        </div>
                         <div className = {this.showHideFormat()}>
                             <ol className = "format-items-list">
                                 {
-                                    formats.map((format) => {
+                                    formats.filter((format) => {
+                                        return format !== tag.format;
+                                    }).map((format) => {
                                         return (
                                             this.getFormatListItem(this, format)
                                         );