adding asTag functionality to TgSelect

TeselaGen · Jun 4, 2024 · f088e61 · f088e61
1 parent 889565f
commit f088e61
Show file tree

Hide file tree

Showing 4 changed files with 91 additions and 5 deletions.
diff --git a/packages/ui/demo/src/examples/TgSelectDemo.js b/packages/ui/demo/src/examples/TgSelectDemo.js
@@ -32,9 +32,14 @@ export default class TgSelectDemo extends React.Component {
       multi,
       isTagSelect,
       val,
+      noToggle,
+      small,
       creatable,
       disallowClear,
+      doNotFillWidth,
       hasError,
+      backgroundColor,
+      asTag,
       withStaticOptions
     } = this.state;
 
@@ -51,6 +56,26 @@ export default class TgSelectDemo extends React.Component {
             type: "disallowClear"
             // type: "reactSelectFieldcreatable"
           })}
+          {renderToggle({
+            that: this,
+            type: "small"
+          })}
+          {renderToggle({
+            that: this,
+            type: "asTag"
+          })}
+          {renderToggle({
+            that: this,
+            type: "backgroundColor"
+          })}
+          {renderToggle({
+            that: this,
+            type: "doNotFillWidth"
+          })}
+          {renderToggle({
+            that: this,
+            type: "noToggle"
+          })}
           {renderToggle({
             that: this,
             type: "hasError"
@@ -83,7 +108,15 @@ export default class TgSelectDemo extends React.Component {
             intent={hasError ? "danger" : ""}
             creatable={creatable}
             disallowClear={disallowClear}
+            doNotFillWidth={doNotFillWidth}
+            backgroundColor={backgroundColor && "red"}
+            noToggle={noToggle}
+            small={small}
             value={val}
+            asTag={asTag}
+            {...(asTag && {
+              backgroundColor: "red"
+            })}
             autoFocus
             options={
               withStaticOptions

diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@teselagen/ui",
-  "version": "0.4.7",
+  "version": "0.4.8",
   "main": "./src/index.js",
   "type": "module",
   "exports": {

diff --git a/packages/ui/src/TgSelect/index.js b/packages/ui/src/TgSelect/index.js
@@ -223,8 +223,9 @@ class TgSelect extends React.Component {
   };
 
   render() {
-    const {
+    let {
       multi,
+      asTag,
       options,
       unfilteredOptions,
       value,
@@ -237,6 +238,10 @@ class TgSelect extends React.Component {
       noResultsText,
       noResults: _noResults,
       inputProps,
+      backgroundColor,
+      doNotFillWidth,
+      noToggle,
+      small,
       placeholder,
       isLoading,
       disallowClear,
@@ -248,6 +253,14 @@ class TgSelect extends React.Component {
       renderCreateNewOption: _renderCreateNewOption = renderCreateNewOption,
       ...rest
     } = this.props;
+    if (asTag) {
+      small = true;
+      placeholder = " ";
+      backgroundColor = "red";
+      disallowClear = true;
+      doNotFillWidth = true;
+      noToggle = true;
+    }
     let noResults = _noResults;
 
     // Null is also a valid value for a React Component, noResultsDefault should only be appplied when noResults is undefined
@@ -270,7 +283,7 @@ class TgSelect extends React.Component {
             onClick={this.handleClear}
           />
         )}
-        {noResults !== null && (
+        {noResults !== null && !noToggle && (
           <Button
             onClick={e => {
               if (this.state.isOpen) {
@@ -301,7 +314,7 @@ class TgSelect extends React.Component {
         opt => opt && opt.value === ((value && value.value) || value)
       );
     });
-    return (
+    const toRet = (
       <MultiSelect
         onActiveItemChange={this.handleActiveItemChange}
         closeOnSelect={!multi}
@@ -318,7 +331,10 @@ class TgSelect extends React.Component {
           captureDismiss: true,
           minimal: true,
           className: classNames("tg-select", "tg-stop-dialog-form-enter", {
-            "tg-single-select": !multi
+            "tg-single-select": !multi,
+            "tg-select-as-tag": asTag,
+            "do-not-fill-width": doNotFillWidth,
+            "tg-small": small
           }),
           wrapperTagName: "div",
           canEscapeKeyClose: true,
@@ -387,6 +403,23 @@ class TgSelect extends React.Component {
         {...rest}
       />
     );
+    if (backgroundColor) {
+      return (
+        <div
+          style={{
+            backgroundColor: backgroundColor,
+            borderRadius: "4px 4px 4px 4px",
+            overflow: "hidden",
+            width: "fit-content",
+            color: "white",
+            border: "2px solid white"
+          }}
+        >
+          {toRet}
+        </div>
+      );
+    }
+    return toRet;
   }
 }
 

diff --git a/packages/ui/src/TgSelect/style.css b/packages/ui/src/TgSelect/style.css
@@ -2,6 +2,26 @@
   width: 100%;
   min-width: 170px;
 }
+.tg-select.tg-select-as-tag .bp3-tag.bp3-minimal.bp3-intent-primary {
+  color: white !important;
+}
+.tg-select.do-not-fill-width {
+  width: auto;
+  min-width: 50px;
+}
+.tg-select.tg-small .bp3-input {
+  min-height: 25px;
+  height: 25px;
+}
+.tg-select.tg-small input {
+  line-height: 10.5px;
+}
+.tg-select.tg-small .bp3-tag-input .bp3-input-ghost {
+  line-height: 10.5px;
+}
+.tg-select.tg-small .bp3-tag-input .bp3-tag-input-values {
+  margin-top: 2px;
+}
 .tg-select input {
   font-size: 14px;
 }