feat: add limit to tag selector

ONEARMY · Nov 20, 2024 · ec0ba97 · ec0ba97
1 parent fbaad63
commit ec0ba97
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 6 deletions.
diff --git a/packages/components/src/Select/Select.tsx b/packages/components/src/Select/Select.tsx
@@ -53,15 +53,14 @@ export const Select = (props: Props) => {
       },
     }),
 
-    option: (
-      provided,
-      { data, isFocused }: { data: any; isFocused: boolean },
-    ) => ({
+    option: (provided, { data, isFocused, isDisabled }: any) => ({
       ...provided,
       backgroundColor: isFocused ? theme.colors.white : theme.colors.background,
       boxShadow: 'none',
       cursor: 'pointer',
-      color: data.color || theme.colors.black,
+      color: !isDisabled
+        ? data.color || theme.colors.black
+        : theme.colors.lightgrey,
     }),
 
     menu: (provided) => ({
@@ -225,6 +224,7 @@ export const Select = (props: Props) => {
       onChange={(v) => props.onChange && props.onChange(v)}
       value={props.value}
       onInputChange={props.onInputChange}
+      isOptionDisabled={props.isOptionDisabled}
     />
   )
 }
diff --git a/src/common/Tags/TagsSelect.tsx b/src/common/Tags/TagsSelect.tsx
@@ -15,6 +15,7 @@ export interface IProps extends Partial<FieldRenderProps<any, any>> {
   styleVariant?: 'selector' | 'filter'
   placeholder?: string
   tagsSource?: ITag[]
+  maxTotal?: number
 }
 interface IState {
   selectedTags: string[]
@@ -58,6 +59,9 @@ const TagsSelect = (props: IProps) => {
     return selectedJson
   }
 
+  const isOptionDisabled = () =>
+    state.selectedTags.length >= (props.maxTotal || 4)
+
   return (
     <FieldContainer
       // provide a data attribute that can be used to see if tags populated
@@ -68,11 +72,12 @@ const TagsSelect = (props: IProps) => {
         options={allTagsData}
         placeholder={props.placeholder}
         isClearable={true}
+        isOptionDisabled={isOptionDisabled}
         isMulti={true}
         value={_getSelected(allTagsData)}
         getOptionLabel={(tag: ITag) => tag.label}
         getOptionValue={(tag: ITag) => tag._id}
-        onChange={(values) => onSelectedTagsChanged(values as ITag[])}
+        onChange={onSelectedTagsChanged}
       />
     </FieldContainer>
   )

diff --git a/src/pages/UserSettings/content/sections/ProfileTags.section.tsx b/src/pages/UserSettings/content/sections/ProfileTags.section.tsx
@@ -24,6 +24,7 @@ export const ProfileTags = ({ isMemberProfile }: IProps) => {
         value={input.value}
         onChange={(tags) => input.onChange(tags)}
         tagsSource={profileTags}
+        maxTotal={5}
         isForm
         {...rest}
       />