more flexibility to Autocomplete creatable

CartoDB · Jun 19, 2024 · 6d489e9 · 6d489e9
1 parent 547e3f0
commit 6d489e9
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 27 deletions.
diff --git a/packages/react-ui/src/components/molecules/Autocomplete.js b/packages/react-ui/src/components/molecules/Autocomplete.js
@@ -66,30 +66,39 @@ const Autocomplete = forwardRef(
 
     const creatableRenderOption = (props, option) => (
       <React.Fragment key={option.inputValue || option.title}>
-        {option.inputValue && <Divider />}
-        <MenuItem
-          {...props}
-          fixed={option.fixed}
-          subtitle={option.subtitle}
-          extended={option.extended}
-          iconColor={option.iconColor}
-        >
-          {option.inputValue && (
-            <ListItemIcon>{newItemIcon || <AddCircleOutlineOutlined />}</ListItemIcon>
-          )}
-          {option.startAdornment && !option.inputValue && (
-            <ListItemIcon>{option.startAdornment}</ListItemIcon>
-          )}
-          <ListItemText>
-            {option.alternativeTitle || option.title}
-            {option.secondaryText && (
-              <Typography component='p' variant='caption' color='text.secondary'>
-                {option.secondaryText}
-              </Typography>
-            )}
-          </ListItemText>
-          {option.endAdornment}
-        </MenuItem>
+        {option.divider ? (
+          <Divider />
+        ) : (
+          <>
+            {option.inputValue && <Divider />}
+            <MenuItem
+              {...props}
+              fixed={option.fixed}
+              extended={option.extended}
+              dense={option.dense}
+              destructive={option.destructive}
+              disabled={option.disabled}
+              subtitle={option.subtitle}
+              iconColor={option.iconColor}
+            >
+              {option.inputValue && (
+                <ListItemIcon>{newItemIcon || <AddCircleOutlineOutlined />}</ListItemIcon>
+              )}
+              {option.startAdornment && !option.inputValue && (
+                <ListItemIcon>{option.startAdornment}</ListItemIcon>
+              )}
+              <ListItemText>
+                {option.alternativeTitle || option.title}
+                {option.secondaryText && (
+                  <Typography component='p' variant='caption' color='text.secondary'>
+                    {option.secondaryText}
+                  </Typography>
+                )}
+              </ListItemText>
+              {option.endAdornment}
+            </MenuItem>
+          </>
+        )}
       </React.Fragment>
     );
 

diff --git a/packages/react-ui/storybook/stories/molecules/Autocomplete.stories.js b/packages/react-ui/storybook/stories/molecules/Autocomplete.stories.js
@@ -138,7 +138,8 @@ const top100Films = [
   {
     title: 'The Godfather: Part II',
     year: 1974,
-    startAdornment: <AccessAlarmOutlined />
+    startAdornment: <AccessAlarmOutlined />,
+    dense: true
   },
   {
     title: 'The Dark Knight',
@@ -159,7 +160,12 @@ const top100Films = [
     endAdornment: <Chip size='small' label='type' color='default' variant='outlined' />
   },
   { title: 'Subtitle', subtitle: true },
-  { title: 'Pulp Fiction', year: 1994, startAdornment: <AnalyticsOutlined /> },
+  {
+    title: 'Pulp Fiction',
+    year: 1994,
+    startAdornment: <AnalyticsOutlined />,
+    disabled: true
+  },
   {
     title: 'The Lord of the Rings: The Return of the King',
     year: 2003,
@@ -183,10 +189,12 @@ const top100Films = [
   },
   { title: 'Forrest Gump', year: 1994, startAdornment: <BuildOutlined /> },
   { title: 'Inception', year: 2010, startAdornment: <MovieOutlined /> },
+  { title: 'divider', divider: true },
   {
     title: 'The Lord of the Rings: The Two Towers',
     year: 2002,
-    startAdornment: <CheckCircleOutlined />
+    startAdornment: <CheckCircleOutlined />,
+    destructive: true
   }
 ];
 
@@ -1070,6 +1078,7 @@ const CreatableWithPrefixAndSuffixTemplate = ({
     <IntlProvider locale='en'>
       <Autocomplete
         {...args}
+        open
         creatable
         options={creatableTop100Films}
         onChange={(event, newValue) => {