Skip to content

Commit

Permalink
fix(react): fix support for custom classNames
Browse files Browse the repository at this point in the history
  • Loading branch information
@Grsmto
Grsmto committed Jan 19, 2023
1 parent 0208be1 commit 79e111c
Show file tree
Hide file tree
Showing 2 changed files with 39 additions and 79 deletions.
29 changes: 17 additions & 12 deletions packages/simplebar-react/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,11 @@ const SimpleBar = React.forwardRef<SimpleBarCore | null, Props>(
}
});

const classNames = {
...SimpleBarCore.defaultOptions.classNames,
...options.classNames,
};

React.useEffect(() => {
let instance: SimpleBarCore | null;
scrollableNodeRef.current = scrollableNodeFullProps.ref
Expand Down Expand Up @@ -89,12 +94,12 @@ const SimpleBar = React.forwardRef<SimpleBarCore | null, Props>(

return (
<div data-simplebar="init" ref={elRef} {...rest}>
<div className="simplebar-wrapper">
<div className="simplebar-height-auto-observer-wrapper">
<div className="simplebar-height-auto-observer" />
<div className={classNames.wrapper}>
<div className={classNames.heightAutoObserverWrapperEl}>
<div className={classNames.heightAutoObserverEl} />
</div>
<div className="simplebar-mask">
<div className="simplebar-offset">
<div className={classNames.mask}>
<div className={classNames.offset}>
{typeof children === 'function' ? (
children({
scrollableNodeRef,
Expand All @@ -104,24 +109,24 @@ const SimpleBar = React.forwardRef<SimpleBarCore | null, Props>(
},
contentNodeRef,
contentNodeProps: {
className: 'simplebar-content',
className: classNames.contentEl,
ref: contentNodeRef,
},
})
) : (
<div {...scrollableNodeFullProps}>
<div className="simplebar-content">{children}</div>
<div className={classNames.contentEl}>{children}</div>
</div>
)}
</div>
</div>
<div className="simplebar-placeholder" />
<div className={classNames.placeholder} />
</div>
<div className="simplebar-track simplebar-horizontal">
<div className="simplebar-scrollbar" />
<div className={`${classNames.track} simplebar-horizontal`}>
<div className={classNames.scrollbar} />
</div>
<div className="simplebar-track simplebar-vertical">
<div className="simplebar-scrollbar" />
<div className={`${classNames.track} simplebar-vertical`}>
<div className={classNames.scrollbar} />
</div>
</div>
);
Expand Down
89 changes: 22 additions & 67 deletions packages/simplebar-react/tests/__snapshots__/index.test.tsx.snap
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`renders with object as option 1`] = `
<div>
<div
data-simplebar="init"
>
<div
class="custom-class"
>
Expand Down Expand Up @@ -29,69 +31,21 @@ exports[`renders with object as option 1`] = `
<div
class="simplebar-content"
>
<div
class="simplebar-wrapper"
data-simplebar="init"
>
<div
class="simplebar-height-auto-observer-wrapper"
>
<div
class="simplebar-height-auto-observer"
/>
</div>
<div
class="simplebar-mask"
>
<div
class="simplebar-offset"
>
<div
aria-label="scrollable content"
class="simplebar-content-wrapper"
role="region"
tabindex="0"
>
<div
class="simplebar-content"
>
<p>
Some content
</p>
<p>
Some content
</p>
<p>
Some content
</p>
<p>
Some content
</p>
<p>
Some content
</p>
</div>
</div>
</div>
</div>
<div
class="simplebar-placeholder"
/>
</div>
<div
class="simplebar-track simplebar-horizontal"
>
<div
class="simplebar-scrollbar"
/>
</div>
<div
class="simplebar-track simplebar-vertical"
>
<div
class="simplebar-scrollbar"
/>
</div>
<p>
Some content
</p>
<p>
Some content
</p>
<p>
Some content
</p>
<p>
Some content
</p>
<p>
Some content
</p>
</div>
</div>
</div>
Expand Down Expand Up @@ -125,10 +79,10 @@ exports[`renders with object as option 1`] = `
exports[`renders with options 1`] = `
<div
class="simplebar-scrollable-y"
data-simplebar="init"
>
<div
class="simplebar-wrapper"
data-simplebar="init"
>
<div
class="simplebar-height-auto-observer-wrapper"
Expand Down Expand Up @@ -201,10 +155,11 @@ exports[`renders with options 1`] = `

exports[`renders without crashing 1`] = `
<div>
<div>
<div
data-simplebar="init"
>
<div
class="simplebar-wrapper"
data-simplebar="init"
>
<div
class="simplebar-height-auto-observer-wrapper"
Expand Down

1 comment on commit 79e111c

@DenisSvistoplasov
Copy link
Contributor

@DenisSvistoplasov DenisSvistoplasov commented on 79e111c Feb 3, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

packages/simplebar-react/index.tsx:
Lines 125 and 128 assume that properties 'horizontal' and 'vertical' of classNames passed in props of SimpleBar component do not have an effect. Is this done on purpose and should be reflected in Readme?
And if so, should there be a limited version of the ClassNames type, which would show the class of which elements the user can overwrite?

Please sign in to comment.