@tipp/ui 1.4.17 → 1.4.19

package/src/molecules/tag-selector.tsx

@@ -37,6 +37,7 @@ export interface TagSelectorProps<T extends Item> {
   maxCount?: number;
   style?: React.CSSProperties;
   size?: 'large' | 'medium' | 'small';
+  readOnly?: boolean;
 
   onChange?: (selected: ID[]) => void;
   tagRender?: (item: T) => React.ReactElement;
@@ -65,6 +66,7 @@ export function TagSelector<T extends Item>(
     DropdownContainer = DefaultDropdownContainer,
     onChange,
     size = 'medium',
+    readOnly,
   } = props;
   const [selected, setSelected] = useState<string[]>(props.selected || []);
   const [value, setValue] = useState<string>('');
@@ -252,55 +254,77 @@ export function TagSelector<T extends Item>(
     }
   }, [size]);
 
+  const focusClassName = focus ? ' focused' : '';
+  const readOnlyClassName = readOnly ? ' read-only' : '';
+
+  const readonlyContent = (
+    <Flex gap="1">
+      {selectedItem.map((item) => {
+        return tagRender ? (
+          tagRender(item)
+        ) : (
+          <Badge key={item.id} size={badgeSize}>
+            {item.name}
+          </Badge>
+        );
+      })}
+    </Flex>
+  );
+
+  const editContent = (
+    <>
+      <Flex
+        align="center"
+        gap="1"
+        maxWidth="100%"
+        overflow="hidden"
+        wrap="wrap"
+      >
+        {selectedItem.map((item) => {
+          return tagRender ? (
+            tagRender(item)
+          ) : (
+            <Badge key={item.id} size={badgeSize}>
+              {item.name}
+              <Button
+                onClick={() => {
+                  onDelete(item.id);
+                }}
+                variant="transparent"
+              >
+                <Cross1Icon />
+              </Button>
+            </Badge>
+          );
+        })}
+        {placeholderVisible ? (
+          <Typo color="gray" variant={placeholderVariant}>
+            {placeholder}
+          </Typo>
+        ) : null}
+        <AutoSizingInput
+          onBlur={onBlur}
+          onChange={onChangeValue}
+          onFocus={onFocus}
+          onKeyDown={handleKeyDown}
+          ref={fieldRef}
+          value={value}
+        />
+      </Flex>
+      {focus ? <MagnifyingGlassIcon /> : <ChevronRightIcon />}
+    </>
+  );
   return (
     <Popover.Root open={Boolean(filteredOptions.length) && open}>
-      <Popover.Trigger>
+      <Popover.Trigger style={{ position: 'relative' }}>
         <Grid
           align="center"
-          className={`tag-selector ${focus ? 'focused' : ''} ${size}`}
+          className={`tag-selector ${size} ${focusClassName}${readOnlyClassName}`}
           columns="1fr auto"
           gap="1"
-          onClick={() => fieldRef.current?.focus()}
+          onClick={() => !readOnly && fieldRef.current?.focus()}
         >
-          <Flex
-            align="center"
-            gap="1"
-            maxWidth="100%"
-            overflow="hidden"
-            wrap="wrap"
-          >
-            {selectedItem.map((item) => {
-              return tagRender ? (
-                tagRender(item)
-              ) : (
-                <Badge key={item.id} size={badgeSize}>
-                  {item.name}
-                  <Button
-                    onClick={() => {
-                      onDelete(item.id);
-                    }}
-                    variant="transparent"
-                  >
-                    <Cross1Icon />
-                  </Button>
-                </Badge>
-              );
-            })}
-            {placeholderVisible ? (
-              <Typo color="gray" variant={placeholderVariant}>
-                {placeholder}
-              </Typo>
-            ) : null}
-            <AutoSizingInput
-              onBlur={onBlur}
-              onChange={onChangeValue}
-              onFocus={onFocus}
-              onKeyDown={handleKeyDown}
-              ref={fieldRef}
-              value={value}
-            />
-          </Flex>
-          {focus ? <MagnifyingGlassIcon /> : <ChevronRightIcon />}
+          {readOnly ? readonlyContent : editContent}
         </Grid>
       </Popover.Trigger>