From 4cb6e5a5415d676746906e69880bd62bc3afeca2 Mon Sep 17 00:00:00 2001 From: jinhojang6 Date: Thu, 16 Feb 2023 01:10:18 +0900 Subject: [PATCH] refactor: refactor breadcrumb component --- .../Breadcrumb/Breadcrumb.classes.ts | 8 -- .../Breadcrumb/Breadcrumb.stories.tsx | 7 -- .../Breadcrumb/Breadcrumb.styles.ts | 13 +-- .../src/components/Breadcrumb/Breadcrumb.tsx | 88 ++++++++----------- .../BreadcrumbItem/BreadcrumbItem.classes.ts | 10 +-- .../BreadcrumbItem/BreadcrumbItem.styles.ts | 17 ++-- .../BreadcrumbItem/BreadcrumbItem.tsx | 26 +++--- packages/lsd-react/src/index.ts | 2 + 8 files changed, 67 insertions(+), 104 deletions(-) diff --git a/packages/lsd-react/src/components/Breadcrumb/Breadcrumb.classes.ts b/packages/lsd-react/src/components/Breadcrumb/Breadcrumb.classes.ts index 921cfc2..0238f2d 100644 --- a/packages/lsd-react/src/components/Breadcrumb/Breadcrumb.classes.ts +++ b/packages/lsd-react/src/components/Breadcrumb/Breadcrumb.classes.ts @@ -2,15 +2,7 @@ export const breadcrumbClasses = { root: `lsd-breadcrumb`, list: `lsd-breadcrumb-list`, - trigger: `lsd-breadcrumb-trigger`, - triggerLabel: `lsd-breadcrumb-trigger__label`, - triggerIcons: `lsd-breadcrumb-trigger-icons`, - triggerIcon: `lsd-breadcrumb-trigger-icons__icon`, - triggerMenuIcon: `lsd-breadcrumb-trigger-icons__menu-icon`, - listBox: 'lsd-breadcrumb-list-box', - listBoxLarge: 'lsd-breadcrumb-list-box-large', - listBoxMedium: 'lsd-breadcrumb-list-box-medium', open: 'lsd-breadcrumb--open', disabled: 'lsd-breadcrumb--disabled', diff --git a/packages/lsd-react/src/components/Breadcrumb/Breadcrumb.stories.tsx b/packages/lsd-react/src/components/Breadcrumb/Breadcrumb.stories.tsx index b2698f3..ab03c81 100644 --- a/packages/lsd-react/src/components/Breadcrumb/Breadcrumb.stories.tsx +++ b/packages/lsd-react/src/components/Breadcrumb/Breadcrumb.stories.tsx @@ -11,13 +11,6 @@ export default { value: ['small', 'medium', 'large'], }, }, - maxItems: { - control: { - type: 'number', - min: 2, - max: 6, - }, - }, }, } as Meta diff --git a/packages/lsd-react/src/components/Breadcrumb/Breadcrumb.styles.ts b/packages/lsd-react/src/components/Breadcrumb/Breadcrumb.styles.ts index f5b0fbd..d8710cc 100644 --- a/packages/lsd-react/src/components/Breadcrumb/Breadcrumb.styles.ts +++ b/packages/lsd-react/src/components/Breadcrumb/Breadcrumb.styles.ts @@ -26,21 +26,12 @@ export const BreadcrumbStyles = css` display: flex; flex-direction: column; max-height: 400px; - max-width: 148px; overflow: auto; border: 1px solid rgb(var(--lsd-border-primary)); margin-top: 10px; + margin-left: 20px; position: absolute; - } - - // Portal cannot be ralatively positioned - .${breadcrumbClasses.listBoxLarge} { - margin-left: 92px; - } - - // Portal cannot be ralatively positioned - .${breadcrumbClasses.listBoxMedium} { - margin-left: 82px; + width: auto !important; } .${breadcrumbClasses.listBox} > a { diff --git a/packages/lsd-react/src/components/Breadcrumb/Breadcrumb.tsx b/packages/lsd-react/src/components/Breadcrumb/Breadcrumb.tsx index 66f9a27..ab2b2eb 100644 --- a/packages/lsd-react/src/components/Breadcrumb/Breadcrumb.tsx +++ b/packages/lsd-react/src/components/Breadcrumb/Breadcrumb.tsx @@ -39,8 +39,29 @@ export const Breadcrumb: React.FC & { options = [], ...props }) => { - const ref = useRef(null) - const [open, setOpen] = useState(false) + const ellipsisRef = useRef(null) + const [open, setOpen] = useState(false) + + maxItems = Math.max(1, Math.min(maxItems || 1, options.length)) + + const [root, ...rest] = options + const [collapsed, visible] = !ellipsis + ? [[], rest] + : [ + rest.slice(0, rest.length - maxItems + 1), + rest.slice(rest.length - maxItems + 1), + ] + + const renderItems = (items: BreadcrumbOption[]) => + items.map((item, idx) => ( + + )) const onTrigger = () => { !disabled && setOpen((value) => !value) @@ -61,64 +82,33 @@ export const Breadcrumb: React.FC & { open && breadcrumbClasses.open, )} > -
    - {!ellipsis || maxItems === options.length - ? options.map((opt, idx) => ( - - )) - : options.map((opt, idx) => { - if (idx === 1) - return ( - - ) - else if ( - maxItems && - maxItems > 1 && - maxItems < options.length && - idx > 1 && - idx < options.length - maxItems + 1 - ) - return null - else - return ( - - ) - })} +
      + {root && renderItems([root])} + {collapsed.length > 0 && ( + + )} + {renderItems(visible)}
    - {ellipsis && maxItems && ( + {ellipsisRef?.current != null && ellipsis && maxItems && ( setOpen(false)} - className={clsx( - breadcrumbClasses.listBox, - size === 'large' - ? breadcrumbClasses.listBoxLarge - : breadcrumbClasses.listBoxMedium, - )} + className={clsx(breadcrumbClasses.listBox)} > - {options.slice(1, options.length - maxItems + 1).map((opt) => ( + {collapsed.map((opt) => ( {opt.value} diff --git a/packages/lsd-react/src/components/BreadcrumbItem/BreadcrumbItem.classes.ts b/packages/lsd-react/src/components/BreadcrumbItem/BreadcrumbItem.classes.ts index c6c8541..9656b90 100644 --- a/packages/lsd-react/src/components/BreadcrumbItem/BreadcrumbItem.classes.ts +++ b/packages/lsd-react/src/components/BreadcrumbItem/BreadcrumbItem.classes.ts @@ -1,13 +1,9 @@ export const breadcrumbItemClasses = { root: `lsd-breadcrumb-item`, - label: `lsd-breadcrumb-item__label`, - listElement: `lsd-breadcrumb-item-list-element`, - listElementCurrentPage: `lsd-breadcrumb-item-list-element-current-page`, - listElementLink: `lsd-breadcrumb-item-list-element__link`, - - disabled: 'lsd-breadcrumb-item--disabled', - selected: 'lsd-breadcrumb-item--selected', + element: `lsd-breadcrumb-item-element`, + elementCurrentPage: `lsd-breadcrumb-item-element--current-page`, + elementLink: `lsd-breadcrumb-item-element-link`, small: `lsd-breadcrumb-item--small`, medium: `lsd-breadcrumb-item--medium`, diff --git a/packages/lsd-react/src/components/BreadcrumbItem/BreadcrumbItem.styles.ts b/packages/lsd-react/src/components/BreadcrumbItem/BreadcrumbItem.styles.ts index f8d963b..70e0086 100644 --- a/packages/lsd-react/src/components/BreadcrumbItem/BreadcrumbItem.styles.ts +++ b/packages/lsd-react/src/components/BreadcrumbItem/BreadcrumbItem.styles.ts @@ -12,22 +12,22 @@ export const BreadcrumbItemStyles = css` content: '/'; } - .${breadcrumbItemClasses.listElement} { + .${breadcrumbItemClasses.element} { list-style-type: none; } - .${breadcrumbItemClasses.listElementLink} { + .${breadcrumbItemClasses.elementLink} { text-decoration: none; cursor: pointer; } - .${breadcrumbItemClasses.listElementCurrentPage} { - border: 1px solid #000000; + .${breadcrumbItemClasses.elementCurrentPage} { + border: 1px solid rgb(var(--lsd-border-primary)); padding: 4px 12px; } .${breadcrumbClasses.root}:not(.${breadcrumbClasses.disabled}) { - .${breadcrumbItemClasses.listElementLink} { + .${breadcrumbItemClasses.elementLink} { &:hover, &:focus { text-decoration: underline; @@ -35,13 +35,6 @@ export const BreadcrumbItemStyles = css` } } - .${breadcrumbItemClasses.label} { - } - - .${breadcrumbItemClasses.disabled} { - opacity: 0.34; - } - .${breadcrumbItemClasses.small} { padding: 6px 10px; } diff --git a/packages/lsd-react/src/components/BreadcrumbItem/BreadcrumbItem.tsx b/packages/lsd-react/src/components/BreadcrumbItem/BreadcrumbItem.tsx index 2b4ead4..8db0488 100644 --- a/packages/lsd-react/src/components/BreadcrumbItem/BreadcrumbItem.tsx +++ b/packages/lsd-react/src/components/BreadcrumbItem/BreadcrumbItem.tsx @@ -10,31 +10,37 @@ export type BreadcrumbItemProps = React.HTMLAttributes & { current?: boolean disabled?: boolean selected?: boolean + ellipsisRef?: React.RefObject onClick?: () => void } export const BreadcrumbItem: React.FC & { classes: typeof breadcrumbItemClasses -} = ({ label, link, size = 'large', current, onClick, selected }) => { +} = ({ + label, + link, + size = 'large', + current, + selected, + ellipsisRef, + onClick, +}) => { return (
  • {label} diff --git a/packages/lsd-react/src/index.ts b/packages/lsd-react/src/index.ts index 0b1233a..9891a23 100644 --- a/packages/lsd-react/src/index.ts +++ b/packages/lsd-react/src/index.ts @@ -7,3 +7,5 @@ export * from './components/ListBox' export * from './components/TabItem' export * from './components/Tabs' export * from './components/Theme' +export * from './components/Breadcrumb' +export * from './components/BreadcrumbItem'