fix(Dropdown): extra out DefaultItemTemplate

ynput · Dec 2, 2024 · f5e4fcc · f5e4fcc
1 parent d3dbab6
commit f5e4fcc
Show file tree

Hide file tree

Showing 7 changed files with 111 additions and 55 deletions.
diff --git a/src/Dropdowns/Dropdown/DefaultItemTemplate.tsx b/src/Dropdowns/Dropdown/DefaultItemTemplate.tsx
@@ -0,0 +1,86 @@
+import { HTMLAttributes } from 'react'
+import clsx from 'clsx'
+import styled from 'styled-components'
+import { Icon } from '../../Icon'
+
+export const DefaultItemStyled = styled.span`
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  height: 32px;
+  padding: 0 8px;
+
+  &.selected {
+    background-color: var(--md-sys-color-primary-container);
+    color: var(--md-sys-color-on-primary-container);
+
+    &:hover {
+      background-color: var(--md-sys-color-primary-container-hover);
+    }
+
+    &.error {
+      background-color: var(--md-sys-color-error-container);
+      color: var(--md-sys-color-on-error-container);
+
+      &:hover {
+        background-color: var(--md-sys-color-error-container-hover);
+      }
+    }
+  }
+
+  .remove {
+    margin-left: auto;
+    margin-right: 4px;
+  }
+`
+
+export interface DefaultItemTemplateProps extends HTMLAttributes<HTMLSpanElement> {
+  option: any
+  dataKey: string
+  labelKey: string
+  selected?: string[]
+  mixedSelected?: string[]
+  value: string[] | null
+  multiSelect?: boolean
+  minSelected?: number
+  itemClassName?: string
+  itemStyle?: React.CSSProperties
+  endContent?: React.ReactNode
+  startContent?: React.ReactNode
+}
+
+export const DefaultItemTemplate = ({
+  option,
+  dataKey,
+  labelKey,
+  selected = [],
+  mixedSelected = [],
+  value,
+  multiSelect,
+  minSelected = 0,
+  itemClassName,
+  itemStyle,
+  endContent,
+  startContent,
+  ...props
+}: DefaultItemTemplateProps) => {
+  return (
+    <DefaultItemStyled
+      {...props}
+      className={clsx('option-child', itemClassName, {
+        selected: !!selected?.includes(option[dataKey]),
+        active: value && value.includes(option[dataKey]),
+        error: !!option.error,
+      })}
+      style={itemStyle}
+    >
+      {startContent}
+      {option.icon && <Icon icon={option.icon} />}
+      <span>{option[labelKey] || option[dataKey]}</span>
+      {multiSelect &&
+        [...selected, ...mixedSelected]?.includes(option[dataKey]) &&
+        selected.length > minSelected && <Icon icon={'close'} className="remove" />}
+      {endContent}
+    </DefaultItemStyled>
+  )
+}
diff --git a/src/Dropdowns/Dropdown/Dropdown.styled.ts b/src/Dropdowns/Dropdown/Dropdown.styled.ts
@@ -256,37 +256,6 @@ export const ListItem = styled.li<{
   }
 `
 
-export const DefaultItem = styled.span`
-  display: flex;
-  gap: 8px;
-  align-items: center;
-  height: 32px;
-  padding: 0 8px;
-
-  &.selected {
-    background-color: var(--md-sys-color-primary-container);
-    color: var(--md-sys-color-on-primary-container);
-
-    &:hover {
-      background-color: var(--md-sys-color-primary-container-hover);
-    }
-
-    &.error {
-      background-color: var(--md-sys-color-error-container);
-      color: var(--md-sys-color-on-error-container);
-
-      &:hover {
-        background-color: var(--md-sys-color-error-container-hover);
-      }
-    }
-  }
-
-  .remove {
-    margin-left: auto;
-    margin-right: 4px;
-  }
-`
-
 export const StartContent = styled.div`
   background-color: var(--md-sys-color-surface-container-low);
   border-radius: var(--border-radius-m) var(--border-radius-m) 0 0;

diff --git a/src/Dropdowns/Dropdown/Dropdown.tsx b/src/Dropdowns/Dropdown/Dropdown.tsx
@@ -6,7 +6,7 @@ import { compact, isEqual, isNull } from 'lodash'
 import { useMemo } from 'react'
 import { InputText } from '../../Inputs/InputText'
 import { Icon, IconType } from '../../Icon'
-import { DefaultValueTemplate } from '.'
+import { DefaultValueTemplate, DefaultItemTemplate, DefaultItemStyled } from '.'
 import TagsValueTemplate from './TagsValueTemplate'
 import 'overlayscrollbars/overlayscrollbars.css'
 import { createPortal } from 'react-dom'
@@ -969,22 +969,18 @@ export const Dropdown = forwardRef<DropdownRef, DropdownProps>(
                           mixedSelected,
                         )
                       ) : (
-                        <Styled.DefaultItem
-                          className={clsx('option-child', itemClassName, {
-                            selected: !!selected?.includes(option[dataKey]),
-                            active: value && value.includes(option[dataKey]),
-                            error: !!option.error,
-                          })}
-                          style={itemStyle}
-                        >
-                          {option.icon && <Icon icon={option.icon} />}
-                          <span>{option[labelKey] || option[dataKey]}</span>
-                          {multiSelect &&
-                            [...selected, ...mixedSelected]?.includes(option[dataKey]) &&
-                            selected.length > minSelected && (
-                              <Icon icon={'close'} className="remove" />
-                            )}
-                        </Styled.DefaultItem>
+                        <DefaultItemTemplate
+                          option={option}
+                          dataKey={dataKey}
+                          labelKey={labelKey}
+                          selected={selected}
+                          mixedSelected={mixedSelected}
+                          value={value}
+                          multiSelect={multiSelect}
+                          minSelected={minSelected}
+                          itemClassName={itemClassName}
+                          itemStyle={itemStyle}
+                        />
                       )}
                     </Styled.ListItem>
                   ))}
@@ -996,9 +992,9 @@ export const Dropdown = forwardRef<DropdownRef, DropdownProps>(
                         focused: false,
                       })}
                     >
-                      <Styled.DefaultItem className="option-child hidden">
+                      <DefaultItemStyled className="option-child hidden">
                         <span>{`Show ${50} more...`}</span>
-                      </Styled.DefaultItem>
+                      </DefaultItemStyled>
                     </Styled.ListItem>
                   )}
                 </Styled.Options>

diff --git a/src/Dropdowns/Dropdown/index.tsx b/src/Dropdowns/Dropdown/index.tsx
@@ -1,2 +1,3 @@
 export * from './Dropdown'
 export * from './DefaultValueTemplate'
+export * from './DefaultItemTemplate'
diff --git a/src/Dropdowns/TagsSelect/TagsSelect.styled.ts b/src/Dropdowns/TagsSelect/TagsSelect.styled.ts
@@ -1,6 +1,6 @@
 import styled, { css } from 'styled-components'
 import { DefaultValueTemplate, Dropdown } from '../Dropdown'
-export { DefaultItem } from '../Dropdown/Dropdown.styled'
+export { DefaultItemStyled as DefaultItem } from '../Dropdown'
 
 export const TagSelectDropdown = styled(Dropdown)<{ $width: number }>`
   .options {

diff --git a/src/Dropdowns/WatcherSelect/WatcherSelect.styled.ts b/src/Dropdowns/WatcherSelect/WatcherSelect.styled.ts
@@ -1,5 +1,4 @@
-import styled, { keyframes } from 'styled-components'
-import { Button } from '../../Button'
+import styled from 'styled-components'
 import { AssigneeSelect as AS } from '../AssigneeSelect'
 import { theme } from '../..'
 

diff --git a/src/index.tsx b/src/index.tsx
@@ -52,8 +52,13 @@ export { ShortcutTag } from './ShortcutTag'
 export type { ShortcutTagProps } from './ShortcutTag'
 
 // dropdown
-export { Dropdown, DefaultValueTemplate } from './Dropdowns/Dropdown'
-export type { DropdownProps, DefaultValueTemplateProps, DropdownRef } from './Dropdowns/Dropdown'
+export { Dropdown, DefaultValueTemplate, DefaultItemTemplate } from './Dropdowns/Dropdown'
+export type {
+  DropdownProps,
+  DefaultValueTemplateProps,
+  DefaultItemTemplateProps,
+  DropdownRef,
+} from './Dropdowns/Dropdown'
 
 // FileUpload
 export { FileUpload } from './FileUpload'