Commitf76c46c

committed

feat(CAccordion): allow defining custom class names and overriding existing ones

1 parent3bef184 commitf76c46cCopy full SHA for f76c46c

File tree

+23

-14

lines changed

+23

-14

lines changed

Lines changed: 3 additions & 3 deletions

Original file line number	Diff line number	Diff line change
`@@ -89,16 +89,16 @@ export const CAccordion = forwardRef<HTMLDivElement, CAccordionProps>(`
`89`	`89`	`)=>{`
`90`	`90`	`const[_activeItemKey,setActiveKey]=useState(activeItemKey)`
`91`	`91`
`92`		`-const_classNames=mergeClassNames<typeofACCORDION_CLASS_NAMES>(`
	`92`	`+constmergedClassNames=mergeClassNames<typeofACCORDION_CLASS_NAMES>(`
`93`	`93`	`ACCORDION_CLASS_NAMES,`
`94`	`94`	`customClassNames,`
`95`	`95`	`)`
`96`	`96`
`97`	`97`	`return(`
`98`	`98`	`<div`
`99`	`99`	`className={classNames(`
`100`		`-_classNames.ACCORDION,`
`101`		`-{[_classNames.ACCORDION_FLUSH]:flush},`
	`100`	`+mergedClassNames.ACCORDION,`
	`101`	`+{[mergedClassNames.ACCORDION_FLUSH]:flush},`
`102`	`102`	`className,`
`103`	`103`	`)}`
`104`	`104`	`{...rest}`

Lines changed: 3 additions & 3 deletions

Original file line number	Diff line number	Diff line change
`@@ -51,14 +51,14 @@ export const CAccordionBody = forwardRef<HTMLDivElement, CAccordionBodyProps>(`
`51`	`51`	`({ children, className, customClassNames, ...rest},ref)=>{`
`52`	`52`	`const{ id, visible}=useContext(CAccordionItemContext)`
`53`	`53`
`54`		`-const_classNames=mergeClassNames<typeofACCORDION_BODY_CLASS_NAMES>(`
	`54`	`+constmergedClassNames=mergeClassNames<typeofACCORDION_BODY_CLASS_NAMES>(`
`55`	`55`	`ACCORDION_BODY_CLASS_NAMES,`
`56`	`56`	`customClassNames,`
`57`	`57`	`)`
`58`	`58`
`59`	`59`	`return(`
`60`		`-<CCollapseid={id}className={_classNames.ACCORDION_COLLAPSE}visible={visible}>`
`61`		`-<divclassName={classNames(_classNames.ACCORDION_BODY,className)}{...rest}ref={ref}>`
	`60`	`+<CCollapseid={id}className={mergedClassNames.ACCORDION_COLLAPSE}visible={visible}>`
	`61`	`+<divclassName={classNames(mergedClassNames.ACCORDION_BODY,className)}{...rest}ref={ref}>`
`62`	`62`	`{children}`
`63`	`63`	`</div>`
`64`	`64`	`</CCollapse>`

Lines changed: 7 additions & 2 deletions

Original file line number	Diff line number	Diff line change
`@@ -36,12 +36,17 @@ export const CLASS_NAMES = {`
`36`	`36`	`exportconstCAccordionButton=forwardRef<HTMLButtonElement,CAccordionButtonProps>(`
`37`	`37`	`({ children, className, customClassNames, ...rest},ref)=>{`
`38`	`38`	`const{ id, visible, setVisible}=useContext(CAccordionItemContext)`
`39`		`-const_classNames=mergeClassNames<typeofCLASS_NAMES>(CLASS_NAMES,customClassNames)`
	`39`	`+`
	`40`	`+constmergedClassNames=mergeClassNames<typeofCLASS_NAMES>(CLASS_NAMES,customClassNames)`
`40`	`41`
`41`	`42`	`return(`
`42`	`43`	`<button`
`43`	`44`	`type="button"`
`44`		`-className={classNames(_classNames.ACCORDION_BUTTON,{collapsed:!visible},className)}`
	`45`	`+className={classNames(`
	`46`	`+mergedClassNames.ACCORDION_BUTTON,`
	`47`	`+{collapsed:!visible},`
	`48`	`+className,`
	`49`	`+)}`
`45`	`50`	`aria-controls={id}`
`46`	`51`	`aria-expanded={visible}`
`47`	`52`	`onClick={()=>setVisible(!visible)}`

Lines changed: 5 additions & 3 deletions

Original file line number	Diff line number	Diff line change
`@@ -43,13 +43,15 @@ export const ACCORDION_HEADER_CLASS_NAMES = {`
`43`	`43`
`44`	`44`	`exportconstCAccordionHeader=forwardRef<HTMLDivElement,CAccordionHeaderProps>(`
`45`	`45`	`({ children, className, customClassNames, ...rest},ref)=>{`
`46`		`-const_classNames=mergeClassNames<typeofACCORDION_HEADER_CLASS_NAMES>(`
	`46`	`+constmergedClassNames=mergeClassNames<typeofACCORDION_HEADER_CLASS_NAMES>(`
`47`	`47`	`ACCORDION_HEADER_CLASS_NAMES,`
`48`	`48`	`customClassNames,`
`49`	`49`	`)`
`50`	`50`	`return(`
`51`		`-<divclassName={classNames(_classNames.ACCORDION_HEADER,className)}{...rest}ref={ref}>`
`52`		`-<CAccordionButtonclassName={_classNames.ACCORDION_HEADER}>{children}</CAccordionButton>`
	`51`	`+<divclassName={classNames(mergedClassNames.ACCORDION_HEADER,className)}{...rest}ref={ref}>`
	`52`	`+<CAccordionButtonclassName={mergedClassNames.ACCORDION_HEADER}>`
	`53`	`+{children}`
	`54`	`+</CAccordionButton>`
`53`	`55`	`</div>`
`54`	`56`	`)`
`55`	`57`	`},`

Lines changed: 5 additions & 3 deletions

Original file line number	Diff line number	Diff line change
`@@ -65,21 +65,23 @@ export const CAccordionItem = forwardRef<HTMLDivElement, CAccordionItemProps>(`
`65`	`65`	`const{ _activeItemKey, alwaysOpen, setActiveKey}=useContext(CAccordionContext)`
`66`	`66`	`const[visible,setVisible]=useState(Boolean(_activeItemKey===_itemKey.current))`
`67`	`67`
`68`		`-const_classNames=mergeClassNames<typeofACCORDION_ITEM_CLASS_NAMES>(`
	`68`	`+constmergedClassNames=mergeClassNames<typeofACCORDION_ITEM_CLASS_NAMES>(`
`69`	`69`	`ACCORDION_ITEM_CLASS_NAMES,`
`70`	`70`	`customClassNames,`
`71`	`71`	`)`
`72`	`72`
`73`	`73`	`useEffect(()=>{`
`74`		`-!alwaysOpen&&visible&&setActiveKey(_itemKey.current)`
	`74`	`+if(!alwaysOpen&&visible){`
	`75`	`+setActiveKey(_itemKey.current)`
	`76`	`+}`
`75`	`77`	`},[visible])`
`76`	`78`
`77`	`79`	`useEffect(()=>{`
`78`	`80`	`setVisible(Boolean(_activeItemKey===_itemKey.current))`
`79`	`81`	`},[_activeItemKey])`
`80`	`82`
`81`	`83`	`return(`
`82`		`-<divclassName={classNames(_classNames.ACCORDION_ITEM,className)}{...rest}ref={ref}>`
	`84`	`+<divclassName={classNames(mergedClassNames.ACCORDION_ITEM,className)}{...rest}ref={ref}>`
`83`	`85`	`<CAccordionItemContext.Providervalue={{ id, setVisible, visible}}>`
`84`	`86`	`{children}`
`85`	`87`	`</CAccordionItemContext.Provider>`

Comments

(0)