Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

Commit f76c46c

Browse filesBrowse files
mrholekmrholek
committed
feat(CAccordion): allow defining custom class names and overriding existing ones
1 parent 3bef184 commit f76c46c
Copy full SHA for f76c46c

File tree

5 files changed

+23
-14
lines changed
Filter options

5 files changed

+23
-14
lines changed

‎packages/coreui-react/src/components/accordion/CAccordion.tsx

Copy file name to clipboardExpand all lines: packages/coreui-react/src/components/accordion/CAccordion.tsx
+3-3Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -89,16 +89,16 @@ export const CAccordion = forwardRef<HTMLDivElement, CAccordionProps>(
8989
) => {
9090
const [_activeItemKey, setActiveKey] = useState(activeItemKey)
9191

92-
const _classNames = mergeClassNames<typeof ACCORDION_CLASS_NAMES>(
92+
const mergedClassNames = mergeClassNames<typeof ACCORDION_CLASS_NAMES>(
9393
ACCORDION_CLASS_NAMES,
9494
customClassNames,
9595
)
9696

9797
return (
9898
<div
9999
className={classNames(
100-
_classNames.ACCORDION,
101-
{ [_classNames.ACCORDION_FLUSH]: flush },
100+
mergedClassNames.ACCORDION,
101+
{ [mergedClassNames.ACCORDION_FLUSH]: flush },
102102
className,
103103
)}
104104
{...rest}

‎packages/coreui-react/src/components/accordion/CAccordionBody.tsx

Copy file name to clipboardExpand all lines: packages/coreui-react/src/components/accordion/CAccordionBody.tsx
+3-3Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -51,14 +51,14 @@ export const CAccordionBody = forwardRef<HTMLDivElement, CAccordionBodyProps>(
5151
({ children, className, customClassNames, ...rest }, ref) => {
5252
const { id, visible } = useContext(CAccordionItemContext)
5353

54-
const _classNames = mergeClassNames<typeof ACCORDION_BODY_CLASS_NAMES>(
54+
const mergedClassNames = mergeClassNames<typeof ACCORDION_BODY_CLASS_NAMES>(
5555
ACCORDION_BODY_CLASS_NAMES,
5656
customClassNames,
5757
)
5858

5959
return (
60-
<CCollapse id={id} className={_classNames.ACCORDION_COLLAPSE} visible={visible}>
61-
<div className={classNames(_classNames.ACCORDION_BODY, className)} {...rest} ref={ref}>
60+
<CCollapse id={id} className={mergedClassNames.ACCORDION_COLLAPSE} visible={visible}>
61+
<div className={classNames(mergedClassNames.ACCORDION_BODY, className)} {...rest} ref={ref}>
6262
{children}
6363
</div>
6464
</CCollapse>

‎packages/coreui-react/src/components/accordion/CAccordionButton.tsx

Copy file name to clipboardExpand all lines: packages/coreui-react/src/components/accordion/CAccordionButton.tsx
+7-2Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,12 +36,17 @@ export const CLASS_NAMES = {
3636
export const CAccordionButton = forwardRef<HTMLButtonElement, CAccordionButtonProps>(
3737
({ children, className, customClassNames, ...rest }, ref) => {
3838
const { id, visible, setVisible } = useContext(CAccordionItemContext)
39-
const _classNames = mergeClassNames<typeof CLASS_NAMES>(CLASS_NAMES, customClassNames)
39+
40+
const mergedClassNames = mergeClassNames<typeof CLASS_NAMES>(CLASS_NAMES, customClassNames)
4041

4142
return (
4243
<button
4344
type="button"
44-
className={classNames(_classNames.ACCORDION_BUTTON, { collapsed: !visible }, className)}
45+
className={classNames(
46+
mergedClassNames.ACCORDION_BUTTON,
47+
{ collapsed: !visible },
48+
className,
49+
)}
4550
aria-controls={id}
4651
aria-expanded={visible}
4752
onClick={() => setVisible(!visible)}

‎packages/coreui-react/src/components/accordion/CAccordionHeader.tsx

Copy file name to clipboardExpand all lines: packages/coreui-react/src/components/accordion/CAccordionHeader.tsx
+5-3Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -43,13 +43,15 @@ export const ACCORDION_HEADER_CLASS_NAMES = {
4343

4444
export const CAccordionHeader = forwardRef<HTMLDivElement, CAccordionHeaderProps>(
4545
({ children, className, customClassNames, ...rest }, ref) => {
46-
const _classNames = mergeClassNames<typeof ACCORDION_HEADER_CLASS_NAMES>(
46+
const mergedClassNames = mergeClassNames<typeof ACCORDION_HEADER_CLASS_NAMES>(
4747
ACCORDION_HEADER_CLASS_NAMES,
4848
customClassNames,
4949
)
5050
return (
51-
<div className={classNames(_classNames.ACCORDION_HEADER, className)} {...rest} ref={ref}>
52-
<CAccordionButton className={_classNames.ACCORDION_HEADER}>{children}</CAccordionButton>
51+
<div className={classNames(mergedClassNames.ACCORDION_HEADER, className)} {...rest} ref={ref}>
52+
<CAccordionButton className={mergedClassNames.ACCORDION_HEADER}>
53+
{children}
54+
</CAccordionButton>
5355
</div>
5456
)
5557
},

‎packages/coreui-react/src/components/accordion/CAccordionItem.tsx

Copy file name to clipboardExpand all lines: packages/coreui-react/src/components/accordion/CAccordionItem.tsx
+5-3Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -65,21 +65,23 @@ export const CAccordionItem = forwardRef<HTMLDivElement, CAccordionItemProps>(
6565
const { _activeItemKey, alwaysOpen, setActiveKey } = useContext(CAccordionContext)
6666
const [visible, setVisible] = useState(Boolean(_activeItemKey === _itemKey.current))
6767

68-
const _classNames = mergeClassNames<typeof ACCORDION_ITEM_CLASS_NAMES>(
68+
const mergedClassNames = mergeClassNames<typeof ACCORDION_ITEM_CLASS_NAMES>(
6969
ACCORDION_ITEM_CLASS_NAMES,
7070
customClassNames,
7171
)
7272

7373
useEffect(() => {
74-
!alwaysOpen && visible && setActiveKey(_itemKey.current)
74+
if (!alwaysOpen && visible) {
75+
setActiveKey(_itemKey.current)
76+
}
7577
}, [visible])
7678

7779
useEffect(() => {
7880
setVisible(Boolean(_activeItemKey === _itemKey.current))
7981
}, [_activeItemKey])
8082

8183
return (
82-
<div className={classNames(_classNames.ACCORDION_ITEM, className)} {...rest} ref={ref}>
84+
<div className={classNames(mergedClassNames.ACCORDION_ITEM, className)} {...rest} ref={ref}>
8385
<CAccordionItemContext.Provider value={{ id, setVisible, visible }}>
8486
{children}
8587
</CAccordionItemContext.Provider>

0 commit comments

Comments
0 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.