react-components: Add render custom tags to autocomplete (#162)

* chore(react-components): rename Select * chore(react-components): rename Autocomplete * chore(react-components): add new Autocomplete * chore(react-components): fix storybook * chore(react-components): update snapshot * chore(react-components): removed extra changes * chore(react-components): added showing chip in multiple mode * chore(react-components): fix label * chore(react-components): replace handleDeleteAllValues * chore(react-components): add disabled state * chore(react-components): add disabled state * chore(react-components): fix focus trap * chore(react-components): fix focus trap * chore(react-components): fix console error * chore(react-components): add arrow up/down control * chore(react-components): fix jumping in medium size * chore(react-components): add focus trap * chore(react-components): add simple unit test * chore(react-components): update test * chore(react-components): fix clear in read only mode * chore(react-components): add custom tags * chore(react-components): make similar with renderOption --------- Co-authored-by: donskov <[email protected]>
PeculiarVentures · Oct 24, 2024 · 2fbc9ef · 2fbc9ef
1 parent 9b7d39e
commit 2fbc9ef
Showing 1 changed file with 24 additions and 11 deletions.
diff --git a/packages/react-components/src/Autocomplete/autocomplete.tsx b/packages/react-components/src/Autocomplete/autocomplete.tsx
@@ -98,6 +98,10 @@ export type AutocompleteOwnProps<
    * Render the option, use `getOptionLabel` by default.
    */
   renderOption?: (props: object, option: T) => React.ReactNode;
+  /**
+   * Render the tags elements.
+   */
+  renderTag?: (props: object, option: T) => React.ReactNode;
   /**
    * The label to display when the tags are truncated (`limitTags`).
    */
@@ -417,6 +421,7 @@ export const Autocomplete = <
     errorText,
     renderRoot: renderRootProp,
     renderOption: renderOptionProp,
+    renderTag: renderTagProp,
     getLimitTagsText = (more) => `${more} more`,
     groupBy,
     onCreate,
@@ -503,6 +508,24 @@ export const Autocomplete = <
     </li>
   );
 
+  const defaultRenderTag: AutocompleteOwnProps<T, Multiple>['renderTag'] = (propsOption, option) => (
+    <AutocompleteTag
+      {...propsOption}
+      color="secondary"
+      variant="contained"
+      size={size}
+      disabled={disabled}
+    >
+      {getOptionLabel(option)}
+    </AutocompleteTag>
+  );
+  const renderRenderTag = renderTagProp || defaultRenderTag;
+  const renderListTag = (option: T, index: number) => {
+    const optionProps = getTagProps(option, index);
+
+    return renderRenderTag(optionProps, option);
+  };
+
   const renderValue = () => {
     if (!value || (Array.isArray(value) && value.length === 0)) {
       return null;
@@ -515,17 +538,7 @@ export const Autocomplete = <
 
       return (
         <>
-          {valueLimits.map((v, index) => (
-            <AutocompleteTag
-              {...getTagProps(v, index)}
-              color="secondary"
-              variant="contained"
-              size={size}
-              disabled={disabled}
-            >
-              {getOptionLabel(v)}
-            </AutocompleteTag>
-          ))}
+          {valueLimits.map(renderListTag)}
           {!!more && (
             <AutocompleteTagSize
               variant="c2"