From f5e4fccd1df48550bc5532d8866a00be620d7b6f Mon Sep 17 00:00:00 2001 From: Innders <49156310+Innders@users.noreply.github.com> Date: Mon, 2 Dec 2024 16:07:54 +0000 Subject: [PATCH] fix(Dropdown): extra out DefaultItemTemplate --- .../Dropdown/DefaultItemTemplate.tsx | 86 +++++++++++++++++++ src/Dropdowns/Dropdown/Dropdown.styled.ts | 31 ------- src/Dropdowns/Dropdown/Dropdown.tsx | 34 ++++---- src/Dropdowns/Dropdown/index.tsx | 1 + src/Dropdowns/TagsSelect/TagsSelect.styled.ts | 2 +- .../WatcherSelect/WatcherSelect.styled.ts | 3 +- src/index.tsx | 9 +- 7 files changed, 111 insertions(+), 55 deletions(-) create mode 100644 src/Dropdowns/Dropdown/DefaultItemTemplate.tsx diff --git a/src/Dropdowns/Dropdown/DefaultItemTemplate.tsx b/src/Dropdowns/Dropdown/DefaultItemTemplate.tsx new file mode 100644 index 00000000..8c9eb6cf --- /dev/null +++ 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 { + 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 ( + + {startContent} + {option.icon && } + {option[labelKey] || option[dataKey]} + {multiSelect && + [...selected, ...mixedSelected]?.includes(option[dataKey]) && + selected.length > minSelected && } + {endContent} + + ) +} diff --git a/src/Dropdowns/Dropdown/Dropdown.styled.ts b/src/Dropdowns/Dropdown/Dropdown.styled.ts index 508293d2..253cdc20 100644 --- 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 index f70b5f4a..529ec5b0 100644 --- 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( mixedSelected, ) ) : ( - - {option.icon && } - {option[labelKey] || option[dataKey]} - {multiSelect && - [...selected, ...mixedSelected]?.includes(option[dataKey]) && - selected.length > minSelected && ( - - )} - + )} ))} @@ -996,9 +992,9 @@ export const Dropdown = forwardRef( focused: false, })} > - + {`Show ${50} more...`} - + )} diff --git a/src/Dropdowns/Dropdown/index.tsx b/src/Dropdowns/Dropdown/index.tsx index 8bf1a189..bf30d48e 100644 --- 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 index 71000ee0..a912d235 100644 --- 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 index 52de5273..6eed6939 100644 --- 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 index db307c6b..c7156348 100644 --- 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'