@xqmsg/ui-core 0.22.4 → 0.23.1-rc.1

package/src/components/input/StackedPilledInput/index.tsx

@@ -17,6 +17,9 @@ export interface StackedPilledInputProps extends InputFieldProps {
   setError: UseFormSetError<FieldValues>;
   clearErrors: UseFormClearErrors<FieldValues>;
   control: Control<FieldValues, any>;
+  separators?: string[];
+  variant?: string;
+  label?: string;
 }
 
 /**
@@ -25,318 +28,359 @@ export interface StackedPilledInputProps extends InputFieldProps {
 const StackedPilledInput = React.forwardRef<
   HTMLInputElement,
   StackedPilledInputProps
->(({ name, setValue, control, placeholder, disabled }, _ref) => {
-  const watchedValue = useWatch({ control, name: name as string });
-  const [lastestFormValueToArray, setLatestFormValueToArray] = useState<
-    string[]
-  >([]);
-
-  const inputRef = useRef<HTMLInputElement>(null);
-  const inputWrapperRef = useRef(null);
-  const scrollRef = useRef<HTMLDivElement>(null);
-
-  const [tokenIndex, setTokenIndex] = useState<number | null>(null);
-  const [isFocussed, setIsFocussed] = useState(false);
-  const [localValue, setLocalValue] = useState('');
-
-  const latestTokenElement = document.getElementById(
-    `${name}_token_${lastestFormValueToArray.length - 1}`
-  );
-
-  // gets latest watched form value (common delimited) from RHF state and creates a list
-  useEffect(() => {
-    if (watchedValue !== undefined && !watchedValue.length) {
-      setLatestFormValueToArray([]);
-    }
-
-    if (watchedValue !== undefined && watchedValue?.length) {
-      setLatestFormValueToArray(
-        watchedValue
-          .split(';')
-          .join(',')
-          .split(',')
-          .filter(Boolean)
-      );
+>(
+  (
+    {
+      name,
+      setValue,
+      control,
+      placeholder,
+      disabled,
+      separators = ['Enter', ' ', ',', ';', 'Tab'],
+      variant,
+      label,
+    },
+    _ref
+  ) => {
+    const watchedValue = useWatch({ control, name: name as string });
+    const [lastestFormValueToArray, setLatestFormValueToArray] = useState<
+      string[]
+    >([]);
+
+    const inputRef = useRef<HTMLInputElement>(null);
+    const inputWrapperRef = useRef(null);
+    const scrollRef = useRef<HTMLDivElement>(null);
+
+    const [tokenIndex, setTokenIndex] = useState<number | null>(null);
+    const [isFocussed, setIsFocussed] = useState(false);
+    const [localValue, setLocalValue] = useState('');
+
+    const latestTokenElement = document.getElementById(
+      `${name}_token_${lastestFormValueToArray.length - 1}`
+    );
 
-      if (latestTokenElement) {
-        latestTokenElement.scrollIntoView({
-          block: 'end',
-          inline: 'center',
-          behavior: 'smooth',
-        });
+    // gets latest watched form value (common delimited) from RHF state and creates a list
+    useEffect(() => {
+      if (watchedValue !== undefined && !watchedValue.length) {
+        setLatestFormValueToArray([]);
       }
-    }
-  }, [latestTokenElement, watchedValue]);
-
-  const onHandleKeyDown = (e: React.KeyboardEvent) => {
-    if (e.key === 'Enter') {
-      e.stopPropagation();
-      e.preventDefault();
-    }
-
-    if (
-      (e.key === 'Enter' ||
-        e.key === ',' ||
-        e.key === ';' ||
-        e.key === 'Tab') &&
-      localValue.trim().length
-    ) {
-      if (
-        e.key === 'Enter' &&
-        !localValue.trim().length &&
-        tokenIndex !== null
-      ) {
-        setLocalValue(lastestFormValueToArray[tokenIndex]);
 
-        const filteredUniqueValues = Array.from(
-          new Set(
-            lastestFormValueToArray.filter(
-              value => value !== lastestFormValueToArray[tokenIndex]
-            )
-          )
+      if (watchedValue !== undefined && watchedValue?.length) {
+        setLatestFormValueToArray(
+          watchedValue
+            .split(';')
+            .join(',')
+            .split(',')
+            .filter(Boolean)
         );
 
-        setValue(name as string, filteredUniqueValues.toString(), {
-          shouldValidate: true,
-          shouldDirty: true,
-        });
-
-        return setTokenIndex(null);
+        if (latestTokenElement) {
+          latestTokenElement.scrollIntoView({
+            block: 'end',
+            inline: 'center',
+            behavior: 'smooth',
+          });
+        }
       }
+    }, [latestTokenElement, watchedValue]);
 
-      const filteredUniqueValues = Array.from(
-        new Set([
-          ...lastestFormValueToArray,
-          ...localValue
+    const handleOnChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      if (tokenIndex === null) {
+        setLocalValue(
+          e.target.value
             .trim()
-            .split(';')
-            .join(',')
-            .split(','),
-        ])
-      );
+            .replace(',', '')
+            .replace(';', '').length
+            ? e.target.value
+            : ''
+        );
+      }
+    };
 
-      setLocalValue('');
+    const onHandleKeyDown = (e: React.KeyboardEvent) => {
+      if (e.key === 'Enter') {
+        e.stopPropagation();
+        e.preventDefault();
+      }
 
-      return setValue(name as string, filteredUniqueValues.toString(), {
-        shouldValidate: true,
-        shouldDirty: true,
-      });
-    }
+      if (separators.includes(e.key)) {
+        if (
+          e.key === 'Enter' &&
+          !localValue.trim().length &&
+          tokenIndex !== null
+        ) {
+          setLocalValue(lastestFormValueToArray[tokenIndex]);
+
+          const filteredUniqueValues = Array.from(
+            new Set(
+              lastestFormValueToArray.filter(
+                value => value !== lastestFormValueToArray[tokenIndex]
+              )
+            )
+          );
 
-    if (!localValue.trim().length && lastestFormValueToArray.length) {
-      if (e.key === 'Backspace' && tokenIndex !== null) {
-        setLocalValue(
-          lastestFormValueToArray[tokenIndex].substring(
-            0,
-            lastestFormValueToArray[tokenIndex].length
-          )
-        );
+          setValue(name as string, filteredUniqueValues.toString(), {
+            shouldValidate: true,
+            shouldDirty: true,
+          });
+
+          return setTokenIndex(null);
+        }
 
         const filteredUniqueValues = Array.from(
-          new Set(
-            [...lastestFormValueToArray].filter(
-              value => value !== lastestFormValueToArray[tokenIndex]
-            )
-          )
+          new Set([
+            ...lastestFormValueToArray,
+            ...localValue
+              .trim()
+              .split(';')
+              .join(',')
+              .split(','),
+          ])
         );
 
-        setValue(name as string, filteredUniqueValues.toString(), {
+        setLocalValue('');
+
+        return setValue(name as string, filteredUniqueValues.toString(), {
           shouldValidate: true,
           shouldDirty: true,
         });
-
-        return setTokenIndex(null);
       }
 
-      if (e.key === 'ArrowLeft') {
-        if (tokenIndex === 0) return;
+      if (!localValue.trim().length && lastestFormValueToArray.length) {
+        if (e.key === 'Backspace' && tokenIndex !== null) {
+          setLocalValue(
+            lastestFormValueToArray[tokenIndex].substring(
+              0,
+              lastestFormValueToArray[tokenIndex].length
+            )
+          );
+
+          const filteredUniqueValues = Array.from(
+            new Set(
+              [...lastestFormValueToArray].filter(
+                value => value !== lastestFormValueToArray[tokenIndex]
+              )
+            )
+          );
+
+          setValue(name as string, filteredUniqueValues.toString(), {
+            shouldValidate: true,
+            shouldDirty: true,
+          });
 
-        if (!tokenIndex) {
-          return setTokenIndex(lastestFormValueToArray.length - 1);
+          return setTokenIndex(null);
         }
 
-        setTokenIndex(prevTokenIndex => (prevTokenIndex as number) - 1);
+        if (e.key === 'ArrowLeft') {
+          if (tokenIndex === 0) return;
 
-        const tokenElement = document.getElementById(
-          `${name}_token_${tokenIndex}`
-        );
+          if (!tokenIndex) {
+            return setTokenIndex(lastestFormValueToArray.length - 1);
+          }
 
-        if (!tokenElement || !scrollRef.current) return;
+          setTokenIndex(prevTokenIndex => (prevTokenIndex as number) - 1);
 
-        return scrollRef.current.scrollBy({
-          left: -1 * tokenElement.getBoundingClientRect().width,
-          behavior: 'smooth',
-        });
-      }
+          const tokenElement = document.getElementById(
+            `${name}_token_${tokenIndex}`
+          );
 
-      if (e.key === 'ArrowRight') {
-        if (tokenIndex === null) return;
+          if (!tokenElement || !scrollRef.current) return;
 
-        if (tokenIndex === lastestFormValueToArray.length - 1) {
-          return setTokenIndex(null);
+          return scrollRef.current.scrollBy({
+            left: -1 * tokenElement.getBoundingClientRect().width,
+            behavior: 'smooth',
+          });
         }
-        setTokenIndex(prevTokenIndex => (prevTokenIndex as number) + 1);
 
-        const tokenElement = document.getElementById(
-          `${name}_token_${tokenIndex}`
-        );
+        if (e.key === 'ArrowRight') {
+          if (tokenIndex === null) return;
 
-        if (!tokenElement || !scrollRef.current) return;
-
-        return scrollRef.current.scrollBy({
-          left: tokenElement.getBoundingClientRect().width,
-          behavior: 'smooth',
-        });
-      }
-    }
-  };
+          if (tokenIndex === lastestFormValueToArray.length - 1) {
+            return setTokenIndex(null);
+          }
+          setTokenIndex(prevTokenIndex => (prevTokenIndex as number) + 1);
 
-  const onRemoveTag = (index: number) => {
-    const filteredUniqueValues = lastestFormValueToArray.filter(
-      (_, i) => i !== index
-    );
+          const tokenElement = document.getElementById(
+            `${name}_token_${tokenIndex}`
+          );
 
-    setLatestFormValueToArray(filteredUniqueValues);
+          if (!tokenElement || !scrollRef.current) return;
 
-    setValue(name as string, filteredUniqueValues.toString(), {
-      shouldValidate: true,
-      shouldDirty: true,
-    });
-  };
+          return scrollRef.current.scrollBy({
+            left: tokenElement.getBoundingClientRect().width,
+            behavior: 'smooth',
+          });
+        }
+      }
+    };
 
-  const onBlur = () => {
-    if (localValue.trim().length) {
-      const filteredUniqueValues = Array.from(
-        new Set([...lastestFormValueToArray, ...localValue.trim().split(',')])
+    const onRemoveTag = (index: number) => {
+      const filteredUniqueValues = lastestFormValueToArray.filter(
+        (_, i) => i !== index
       );
 
+      setLatestFormValueToArray(filteredUniqueValues);
+
       setValue(name as string, filteredUniqueValues.toString(), {
         shouldValidate: true,
         shouldDirty: true,
       });
-      setLocalValue('');
-    }
-    setIsFocussed(false);
-  };
-
-  useOutsideClick({
-    ref: inputWrapperRef,
-    handler: () => {
-      onBlur();
-    },
-  });
-
-  return (
-    <Box position="relative">
-      <Flex
-        fontSize="13px"
-        border={isFocussed ? '2px solid' : '.5px solid'}
-        borderColor={isFocussed ? colors.border.focus : colors.border.default}
-        pl="8px"
-        borderRadius="4px"
-        alignItems="center"
-        justifyContent="space-between"
-        onClick={() => {
-          if (isFocussed && tokenIndex !== null) {
-            setTokenIndex(null);
-          }
+    };
 
-          if (!disabled) {
-            inputRef.current?.focus();
-          }
-        }}
-        bg={disabled ? colors.fill.light.quaternary : '#ffffff'}
-        cursor={disabled ? 'not-allowed' : 'pointer'}
-        ref={inputWrapperRef}
-        h="26px"
-      >
+    const onBlur = () => {
+      if (localValue.trim().length) {
+        const filteredUniqueValues = Array.from(
+          new Set([...lastestFormValueToArray, ...localValue.trim().split(',')])
+        );
+
+        setValue(name as string, filteredUniqueValues.toString(), {
+          shouldValidate: true,
+          shouldDirty: true,
+        });
+        setLocalValue('');
+      }
+      setIsFocussed(false);
+    };
+
+    useOutsideClick({
+      ref: inputWrapperRef,
+      handler: () => {
+        onBlur();
+      },
+    });
+    const isMobile = variant === 'mobile';
+
+    return (
+      <Box position="relative">
         <Flex
-          h="100%"
+          fontSize={isMobile ? '17px' : '13px'}
+          border={isFocussed ? '2px solid' : '.5px solid'}
+          borderColor={isFocussed ? colors.border.focus : colors.border.default}
+          pl="8px"
+          borderRadius={isMobile ? '0' : '4px'}
           alignItems="center"
-          overflowX="scroll"
-          overflowY="hidden"
-          maxWidth={isFocussed ? '80%' : '100%'}
-          style={{
-            scrollbarWidth: 'none' /* Firefox */,
-            msOverflowStyle: 'none',
-          }}
-          sx={{
-            '::-webkit-scrollbar': {
-              display: 'none',
-            },
+          justifyContent="space-between"
+          style={
+            isMobile
+              ? {
+                  cursor: 'pointer',
+                  height: '48px',
+                  fontSize: '17px',
+                  lineHeight: '20px',
+                  fontWeight: 400,
+                  padding: '12px 16px 12px 0px',
+                  borderRadius: 0,
+                  border: '0.5px solid rgba(153, 153, 153, 0.1)',
+                  borderLeft: 'none',
+                  borderRight: 'none',
+                }
+              : undefined
+          }
+          onClick={() => {
+            if (isFocussed && tokenIndex !== null) {
+              setTokenIndex(null);
+            }
+
+            if (!disabled) {
+              inputRef.current?.focus();
+            }
           }}
-          ref={scrollRef}
-          zIndex={100}
-          onKeyDown={onHandleKeyDown}
+          bg={disabled ? colors.fill.light.quaternary : '#ffffff'}
+          cursor={disabled ? 'not-allowed' : 'pointer'}
+          ref={inputWrapperRef}
+          h={isMobile ? '48px' : '26px'}
         >
-          {lastestFormValueToArray.length
-            ? lastestFormValueToArray.map((label, index) => (
-                <Box
-                  key={index}
-                  mr="4px"
-                  border={
-                    tokenIndex === index
-                      ? `1px solid ${colors.border.focus}`
-                      : 'none'
-                  }
-                  borderRadius="full"
-                  onClick={() => setTokenIndex(index)}
-                  width="100%"
-                  id={`${name}_token_${index}`}
-                >
-                  <Token
-                    label={label}
-                    onDelete={(e: any) => {
-                      e.stopPropagation();
-                      e.preventDefault();
-                      onRemoveTag(index);
-                    }}
-                  />
-                </Box>
-              ))
-            : null}
-          {!lastestFormValueToArray.length && !isFocussed ? (
-            <Text color={colors.label.secondary.light} fontSize="13px">
-              {placeholder}
-            </Text>
-          ) : null}
-        </Flex>
-        {!disabled && (
-          <Flex flex={1} minWidth={isFocussed && !tokenIndex ? '20%' : 0}>
-            <Input
-              onKeyDown={onHandleKeyDown}
-              type="text"
-              padding={0}
-              alignContent="flex-start"
-              float="right"
-              border="none"
-              height="auto"
-              color={tokenIndex !== null ? 'transparent' : colors.label.primary}
-              _focus={{ boxShadow: 'none !important' }}
-              value={localValue}
-              onChange={e =>
-                tokenIndex === null &&
-                setLocalValue(
-                  e.target.value
-                    .trim()
-                    .replace(',', '')
-                    .replace(';', '').length
-                    ? e.target.value
-                    : ''
-                )
-              }
-              ref={inputRef}
-              onFocus={() => setIsFocussed(true)}
-              onBlur={() => {
-                setIsFocussed(false);
-                return setTokenIndex(null);
-              }}
-            />
+          <Flex
+            h="100%"
+            alignItems="center"
+            overflowX="scroll"
+            overflowY="hidden"
+            maxWidth={isFocussed ? '80%' : '100%'}
+            style={{
+              scrollbarWidth: 'none' /* Firefox */,
+              msOverflowStyle: 'none',
+            }}
+            sx={{
+              '::-webkit-scrollbar': {
+                display: 'none',
+              },
+            }}
+            ref={scrollRef}
+            zIndex={100}
+            onKeyDown={onHandleKeyDown}
+          >
+            {lastestFormValueToArray.length
+              ? lastestFormValueToArray.map((label, index) => (
+                  <Box
+                    key={index}
+                    mr="4px"
+                    border={
+                      tokenIndex === index
+                        ? `1px solid ${colors.border.focus}`
+                        : 'none'
+                    }
+                    borderRadius="full"
+                    onClick={() => setTokenIndex(index)}
+                    width="100%"
+                    id={`${name}_token_${index}`}
+                  >
+                    <Token
+                      label={label}
+                      onDelete={(e: any) => {
+                        e.stopPropagation();
+                        e.preventDefault();
+                        onRemoveTag(index);
+                      }}
+                      isMobile={isMobile}
+                    />
+                  </Box>
+                ))
+              : null}
+            {!lastestFormValueToArray.length && !isFocussed ? (
+              <Text
+                color={colors.label.secondary.light}
+                fontSize={isMobile ? '17px' : '13px'}
+              >
+                {placeholder}
+              </Text>
+            ) : null}
           </Flex>
-        )}
-      </Flex>
-    </Box>
-  );
-});
+          {!disabled && (
+            <Flex flex={1} minWidth={isFocussed && !tokenIndex ? '20%' : 0}>
+              <Input
+                onKeyDown={onHandleKeyDown}
+                type="text"
+                padding={0}
+                alignContent="flex-start"
+                float="right"
+                border="none"
+                height="auto"
+                color={
+                  tokenIndex !== null ? 'transparent' : colors.label.primary
+                }
+                _focus={{ boxShadow: 'none !important' }}
+                value={localValue}
+                onChange={handleOnChange}
+                ref={inputRef}
+                onFocus={() => setIsFocussed(true)}
+                onBlur={() => {
+                  setIsFocussed(false);
+                  return setTokenIndex(null);
+                }}
+                placeholder={
+                  isMobile && label && lastestFormValueToArray.length === 0
+                    ? (label as string)
+                    : ''
+                }
+                variant={variant}
+                style={isMobile ? { border: 'none' } : undefined}
+              />
+            </Flex>
+          )}
+        </Flex>
+      </Box>
+    );
+  }
+);
 
 export default StackedPilledInput;