mirrors/OverlayScrollbars
2
0
Fork 0
mirror of https://github.com/tenrok/OverlayScrollbars.git synced 2026-06-08 23:42:31 +03:00
Code Issues Packages Projects Releases Wiki Activity

version 1.12.0

Browse Source
This commit is contained in:
Rene
2020-04-05 16:21:56 +02:00
parent 8a9f312f12
commit a01273a3d3
43 changed files with 3796 additions and 3155 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/overlayscrollbars-react/src/OverlayScrollbarsComponent.tsx
+20 -3
View File
@@ -27,6 +27,7 @@ export class OverlayScrollbarsComponent extends Component<OverlayScrollbarsCompo
componentDidMount() {
this._osInstance = OverlayScrollbars(this.osTarget(), this.props.options || {}, this.props.extensions);
mergeHostClassNames(this._osInstance, this.props.className);
}
componentWillUnmount() {
@@ -39,11 +40,15 @@ export class OverlayScrollbarsComponent extends Component<OverlayScrollbarsCompo
componentDidUpdate(prevProps: OverlayScrollbarsComponentProps) {
if (OverlayScrollbars.valid(this._osInstance)) {
this._osInstance.options(this.props.options);
if (prevProps.className !== this.props.className) {
mergeHostClassNames(this._osInstance, this.props.className);
}
}
}
render() {
let {
const {
options,
extensions,
children,
@@ -52,12 +57,12 @@ export class OverlayScrollbarsComponent extends Component<OverlayScrollbarsCompo
} = this.props;
return (
<div className={`${className} os-host`} {...divProps} ref={this._osTargetRef}>
<div className="os-host" {...divProps} ref={this._osTargetRef}>
<div className="os-resize-observer-host"></div>
<div className="os-padding">
<div className="os-viewport">
<div className="os-content">
{...this.props.children}
{this.props.children}
</div>
</div>
</div>
@@ -75,4 +80,16 @@ export class OverlayScrollbarsComponent extends Component<OverlayScrollbarsCompo
</div>
);
}
}
function mergeHostClassNames(osInstance: OverlayScrollbars, className: string) {
if (OverlayScrollbars.valid(osInstance)) {
const { host } = osInstance.getElements();
const regex = new RegExp(`(^os-host([-_].+|)$)|${osInstance.options().className.replace(/\s/g, "$|")}$`, 'g');
const osClassNames = host.className.split(' ')
.filter(name => name.match(regex))
.join(' ');
host.className = `${osClassNames} ${className || ''}`;
}
}