mirror of
https://github.com/tenrok/OverlayScrollbars.git
synced 2026-06-16 19:20:35 +03:00
v1.10.0
This commit is contained in:
Rene
@@ -55,8 +55,19 @@ class OverlayScrollbarsComponent extends Component {
|
||||
}
|
||||
}
|
||||
render() {
|
||||
let _a = this.props, divProps = __rest(_a, ["options", "extensions", "children"]);
|
||||
return (React.createElement("div", Object.assign({}, divProps, { ref: this._osTargetRef }), this.props.children));
|
||||
let _a = this.props, { options, extensions, children, className } = _a, divProps = __rest(_a, ["options", "extensions", "children", "className"]);
|
||||
return (React.createElement("div", Object.assign({ className: `${className} os-host` }, divProps, { ref: this._osTargetRef }),
|
||||
React.createElement("div", { className: "os-resize-observer-host" }),
|
||||
React.createElement("div", { className: "os-padding" },
|
||||
React.createElement("div", { className: "os-viewport" },
|
||||
React.createElement("div", { className: "os-content" }, this.props.children))),
|
||||
React.createElement("div", { className: "os-scrollbar os-scrollbar-horizontal " },
|
||||
React.createElement("div", { className: "os-scrollbar-track" },
|
||||
React.createElement("div", { className: "os-scrollbar-handle" }))),
|
||||
React.createElement("div", { className: "os-scrollbar os-scrollbar-vertical" },
|
||||
React.createElement("div", { className: "os-scrollbar-track" },
|
||||
React.createElement("div", { className: "os-scrollbar-handle" }))),
|
||||
React.createElement("div", { className: "os-scrollbar-corner" })));
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1 +1 @@
|
||||
{"version":3,"file":"overlayscrollbars-react.esm.js","sources":["../src/OverlayScrollbarsComponent.tsx"],"sourcesContent":["import React, { Component, RefObject } from 'react';\nimport OverlayScrollbars from \"overlayscrollbars\";\n\nexport interface OverlayScrollbarsComponentProps extends React.HTMLAttributes<HTMLDivElement> {\n children?: any;\n options?: OverlayScrollbars.Options;\n extensions?: OverlayScrollbars.Extensions;\n}\nexport interface OverlayScrollbarsComponentState { }\n\nexport class OverlayScrollbarsComponent extends Component<OverlayScrollbarsComponentProps, OverlayScrollbarsComponentState> {\n private _osInstance: OverlayScrollbars | null = null;\n private _osTargetRef: RefObject<HTMLDivElement>;\n\n constructor(props: OverlayScrollbarsComponentProps) {\n super(props);\n this._osTargetRef = React.createRef();\n }\n\n osInstance(): OverlayScrollbars | null {\n return this._osInstance;\n }\n\n osTarget(): HTMLDivElement | null {\n return this._osTargetRef.current || null;\n }\n\n componentDidMount() {\n this._osInstance = OverlayScrollbars(this.osTarget(), this.props.options || {}, this.props.extensions);\n }\n\n componentWillUnmount() {\n if (OverlayScrollbars.valid(this._osInstance)) {\n this._osInstance.destroy();\n this._osInstance = null;\n }\n }\n\n componentDidUpdate(prevProps: OverlayScrollbarsComponentProps) {\n if (OverlayScrollbars.valid(this._osInstance)) {\n this._osInstance.options(this.props.options);\n }\n }\n\n render() {\n let {\n options,\n extensions,\n children,\n ...divProps\n } = this.props;\n\n return (\n <div {...divProps} ref={this._osTargetRef}>\n {...this.props.children}\n </div>\n );\n }\n}"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAUa,0BAA2B,SAAQ,SAA2E;IAIvH,YAAY,KAAsC;QAC9C,KAAK,CAAC,KAAK,CAAC,CAAC;QAJT,gBAAW,GAA6B,IAAI,CAAC;QAKjD,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC,SAAS,EAAE,CAAC;KACzC;IAED,UAAU;QACN,OAAO,IAAI,CAAC,WAAW,CAAC;KAC3B;IAED,QAAQ;QACJ,OAAO,IAAI,CAAC,YAAY,CAAC,OAAO,IAAI,IAAI,CAAC;KAC5C;IAED,iBAAiB;QACb,IAAI,CAAC,WAAW,GAAG,iBAAiB,CAAC,IAAI,CAAC,QAAQ,EAAE,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,IAAI,EAAE,EAAE,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC;KAC1G;IAED,oBAAoB;QAChB,IAAI,iBAAiB,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE;YAC3C,IAAI,CAAC,WAAW,CAAC,OAAO,EAAE,CAAC;YAC3B,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;SAC3B;KACJ;IAED,kBAAkB,CAAC,SAA0C;QACzD,IAAI,iBAAiB,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE;YAC3C,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;SAChD;KACJ;IAED,MAAM;QACF,IAAI,eAKU,EALV,AAIA,4DACU,CAAC;QAEf,QACI,6CAAS,QAAQ,IAAE,GAAG,EAAE,IAAI,CAAC,YAAY,KACjC,IAAI,CAAC,KAAK,CAAC,QAAQ,CACrB,EACR;KACL;CACJ;;;;"}
|
||||
{"version":3,"file":"overlayscrollbars-react.esm.js","sources":["../src/OverlayScrollbarsComponent.tsx"],"sourcesContent":["import React, { Component, RefObject } from 'react';\nimport OverlayScrollbars from \"overlayscrollbars\";\n\nexport interface OverlayScrollbarsComponentProps extends React.HTMLAttributes<HTMLDivElement> {\n children?: any;\n options?: OverlayScrollbars.Options;\n extensions?: OverlayScrollbars.Extensions;\n}\nexport interface OverlayScrollbarsComponentState { }\n\nexport class OverlayScrollbarsComponent extends Component<OverlayScrollbarsComponentProps, OverlayScrollbarsComponentState> {\n private _osInstance: OverlayScrollbars | null = null;\n private _osTargetRef: RefObject<HTMLDivElement>;\n\n constructor(props: OverlayScrollbarsComponentProps) {\n super(props);\n this._osTargetRef = React.createRef();\n }\n\n osInstance(): OverlayScrollbars | null {\n return this._osInstance;\n }\n\n osTarget(): HTMLDivElement | null {\n return this._osTargetRef.current || null;\n }\n\n componentDidMount() {\n this._osInstance = OverlayScrollbars(this.osTarget(), this.props.options || {}, this.props.extensions);\n }\n\n componentWillUnmount() {\n if (OverlayScrollbars.valid(this._osInstance)) {\n this._osInstance.destroy();\n this._osInstance = null;\n }\n }\n\n componentDidUpdate(prevProps: OverlayScrollbarsComponentProps) {\n if (OverlayScrollbars.valid(this._osInstance)) {\n this._osInstance.options(this.props.options);\n }\n }\n\n render() {\n let {\n options,\n extensions,\n children,\n className,\n ...divProps\n } = this.props;\n\n return (\n <div className={`${className} os-host`} {...divProps} ref={this._osTargetRef}>\n <div className=\"os-resize-observer-host\"></div>\n <div className=\"os-padding\">\n <div className=\"os-viewport\">\n <div className=\"os-content\">\n {...this.props.children}\n </div>\n </div>\n </div>\n <div className=\"os-scrollbar os-scrollbar-horizontal \">\n <div className=\"os-scrollbar-track\">\n <div className=\"os-scrollbar-handle\"></div>\n </div>\n </div>\n <div className=\"os-scrollbar os-scrollbar-vertical\">\n <div className=\"os-scrollbar-track\">\n <div className=\"os-scrollbar-handle\"></div>\n </div>\n </div>\n <div className=\"os-scrollbar-corner\"></div>\n </div>\n );\n }\n}"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAUa,0BAA2B,SAAQ,SAA2E;IAIvH,YAAY,KAAsC;QAC9C,KAAK,CAAC,KAAK,CAAC,CAAC;QAJT,gBAAW,GAA6B,IAAI,CAAC;QAKjD,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC,SAAS,EAAE,CAAC;KACzC;IAED,UAAU;QACN,OAAO,IAAI,CAAC,WAAW,CAAC;KAC3B;IAED,QAAQ;QACJ,OAAO,IAAI,CAAC,YAAY,CAAC,OAAO,IAAI,IAAI,CAAC;KAC5C;IAED,iBAAiB;QACb,IAAI,CAAC,WAAW,GAAG,iBAAiB,CAAC,IAAI,CAAC,QAAQ,EAAE,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,IAAI,EAAE,EAAE,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC;KAC1G;IAED,oBAAoB;QAChB,IAAI,iBAAiB,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE;YAC3C,IAAI,CAAC,WAAW,CAAC,OAAO,EAAE,CAAC;YAC3B,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;SAC3B;KACJ;IAED,kBAAkB,CAAC,SAA0C;QACzD,IAAI,iBAAiB,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE;YAC3C,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;SAChD;KACJ;IAED,MAAM;QACF,IAAI,eAMU,EANV,EACA,OAAO,EACP,UAAU,EACV,QAAQ,EACR,SAAS,OAEC,EADV,yEACU,CAAC;QAEf,QACI,2CAAK,SAAS,EAAE,GAAG,SAAS,UAAU,IAAM,QAAQ,IAAE,GAAG,EAAE,IAAI,CAAC,YAAY;YACxE,6BAAK,SAAS,EAAC,yBAAyB,GAAO;YAC/C,6BAAK,SAAS,EAAC,YAAY;gBACvB,6BAAK,SAAS,EAAC,aAAa;oBACxB,6BAAK,SAAS,EAAC,YAAY,IACnB,IAAI,CAAC,KAAK,CAAC,QAAQ,CACrB,CACJ,CACJ;YACN,6BAAK,SAAS,EAAC,uCAAuC;gBAClD,6BAAK,SAAS,EAAC,oBAAoB;oBAC/B,6BAAK,SAAS,EAAC,qBAAqB,GAAO,CACzC,CACJ;YACN,6BAAK,SAAS,EAAC,oCAAoC;gBAC/C,6BAAK,SAAS,EAAC,oBAAoB;oBAC/B,6BAAK,SAAS,EAAC,qBAAqB,GAAO,CACzC,CACJ;YACN,6BAAK,SAAS,EAAC,qBAAqB,GAAO,CACzC,EACR;KACL;CACJ;;;;"}
|
||||
@@ -88,8 +88,19 @@
|
||||
}
|
||||
};
|
||||
OverlayScrollbarsComponent.prototype.render = function () {
|
||||
var _a = this.props, options = _a.options, extensions = _a.extensions, children = _a.children, divProps = __rest(_a, ["options", "extensions", "children"]);
|
||||
return (React__default.createElement("div", __assign({}, divProps, { ref: this._osTargetRef }), this.props.children));
|
||||
var _a = this.props, options = _a.options, extensions = _a.extensions, children = _a.children, className = _a.className, divProps = __rest(_a, ["options", "extensions", "children", "className"]);
|
||||
return (React__default.createElement("div", __assign({ className: className + " os-host" }, divProps, { ref: this._osTargetRef }),
|
||||
React__default.createElement("div", { className: "os-resize-observer-host" }),
|
||||
React__default.createElement("div", { className: "os-padding" },
|
||||
React__default.createElement("div", { className: "os-viewport" },
|
||||
React__default.createElement("div", { className: "os-content" }, this.props.children))),
|
||||
React__default.createElement("div", { className: "os-scrollbar os-scrollbar-horizontal " },
|
||||
React__default.createElement("div", { className: "os-scrollbar-track" },
|
||||
React__default.createElement("div", { className: "os-scrollbar-handle" }))),
|
||||
React__default.createElement("div", { className: "os-scrollbar os-scrollbar-vertical" },
|
||||
React__default.createElement("div", { className: "os-scrollbar-track" },
|
||||
React__default.createElement("div", { className: "os-scrollbar-handle" }))),
|
||||
React__default.createElement("div", { className: "os-scrollbar-corner" })));
|
||||
};
|
||||
return OverlayScrollbarsComponent;
|
||||
}(React.Component));
|
||||
|
||||
@@ -1 +1 @@
|
||||
{"version":3,"file":"overlayscrollbars-react.js","sources":["../src/OverlayScrollbarsComponent.tsx"],"sourcesContent":["import React, { Component, RefObject } from 'react';\nimport OverlayScrollbars from \"overlayscrollbars\";\n\nexport interface OverlayScrollbarsComponentProps extends React.HTMLAttributes<HTMLDivElement> {\n children?: any;\n options?: OverlayScrollbars.Options;\n extensions?: OverlayScrollbars.Extensions;\n}\nexport interface OverlayScrollbarsComponentState { }\n\nexport class OverlayScrollbarsComponent extends Component<OverlayScrollbarsComponentProps, OverlayScrollbarsComponentState> {\n private _osInstance: OverlayScrollbars | null = null;\n private _osTargetRef: RefObject<HTMLDivElement>;\n\n constructor(props: OverlayScrollbarsComponentProps) {\n super(props);\n this._osTargetRef = React.createRef();\n }\n\n osInstance(): OverlayScrollbars | null {\n return this._osInstance;\n }\n\n osTarget(): HTMLDivElement | null {\n return this._osTargetRef.current || null;\n }\n\n componentDidMount() {\n this._osInstance = OverlayScrollbars(this.osTarget(), this.props.options || {}, this.props.extensions);\n }\n\n componentWillUnmount() {\n if (OverlayScrollbars.valid(this._osInstance)) {\n this._osInstance.destroy();\n this._osInstance = null;\n }\n }\n\n componentDidUpdate(prevProps: OverlayScrollbarsComponentProps) {\n if (OverlayScrollbars.valid(this._osInstance)) {\n this._osInstance.options(this.props.options);\n }\n }\n\n render() {\n let {\n options,\n extensions,\n children,\n ...divProps\n } = this.props;\n\n return (\n <div {...divProps} ref={this._osTargetRef}>\n {...this.props.children}\n </div>\n );\n }\n}"],"names":["tslib_1.__extends","React","Component"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAUgDA,8CAA2E;QAIvH,oCAAY,KAAsC;YAAlD,YACI,kBAAM,KAAK,CAAC,SAEf;YANO,iBAAW,GAA6B,IAAI,CAAC;YAKjD,KAAI,CAAC,YAAY,GAAGC,cAAK,CAAC,SAAS,EAAE,CAAC;;SACzC;QAED,+CAAU,GAAV;YACI,OAAO,IAAI,CAAC,WAAW,CAAC;SAC3B;QAED,6CAAQ,GAAR;YACI,OAAO,IAAI,CAAC,YAAY,CAAC,OAAO,IAAI,IAAI,CAAC;SAC5C;QAED,sDAAiB,GAAjB;YACI,IAAI,CAAC,WAAW,GAAG,iBAAiB,CAAC,IAAI,CAAC,QAAQ,EAAE,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,IAAI,EAAE,EAAE,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC;SAC1G;QAED,yDAAoB,GAApB;YACI,IAAI,iBAAiB,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE;gBAC3C,IAAI,CAAC,WAAW,CAAC,OAAO,EAAE,CAAC;gBAC3B,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;aAC3B;SACJ;QAED,uDAAkB,GAAlB,UAAmB,SAA0C;YACzD,IAAI,iBAAiB,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE;gBAC3C,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;aAChD;SACJ;QAED,2CAAM,GAAN;YACI,IAAI,eAKU,EAJV,oBAAO,EACP,0BAAU,EACV,sBAAQ,EACR,4DACU,CAAC;YAEf,QACIA,iDAAS,QAAQ,IAAE,GAAG,EAAE,IAAI,CAAC,YAAY,KACjC,IAAI,CAAC,KAAK,CAAC,QAAQ,CACrB,EACR;SACL;QACL,iCAAC;IAAD,CAhDA,CAAgDC,eAAS;;;;;;;;;;;;"}
|
||||
{"version":3,"file":"overlayscrollbars-react.js","sources":["../src/OverlayScrollbarsComponent.tsx"],"sourcesContent":["import React, { Component, RefObject } from 'react';\nimport OverlayScrollbars from \"overlayscrollbars\";\n\nexport interface OverlayScrollbarsComponentProps extends React.HTMLAttributes<HTMLDivElement> {\n children?: any;\n options?: OverlayScrollbars.Options;\n extensions?: OverlayScrollbars.Extensions;\n}\nexport interface OverlayScrollbarsComponentState { }\n\nexport class OverlayScrollbarsComponent extends Component<OverlayScrollbarsComponentProps, OverlayScrollbarsComponentState> {\n private _osInstance: OverlayScrollbars | null = null;\n private _osTargetRef: RefObject<HTMLDivElement>;\n\n constructor(props: OverlayScrollbarsComponentProps) {\n super(props);\n this._osTargetRef = React.createRef();\n }\n\n osInstance(): OverlayScrollbars | null {\n return this._osInstance;\n }\n\n osTarget(): HTMLDivElement | null {\n return this._osTargetRef.current || null;\n }\n\n componentDidMount() {\n this._osInstance = OverlayScrollbars(this.osTarget(), this.props.options || {}, this.props.extensions);\n }\n\n componentWillUnmount() {\n if (OverlayScrollbars.valid(this._osInstance)) {\n this._osInstance.destroy();\n this._osInstance = null;\n }\n }\n\n componentDidUpdate(prevProps: OverlayScrollbarsComponentProps) {\n if (OverlayScrollbars.valid(this._osInstance)) {\n this._osInstance.options(this.props.options);\n }\n }\n\n render() {\n let {\n options,\n extensions,\n children,\n className,\n ...divProps\n } = this.props;\n\n return (\n <div className={`${className} os-host`} {...divProps} ref={this._osTargetRef}>\n <div className=\"os-resize-observer-host\"></div>\n <div className=\"os-padding\">\n <div className=\"os-viewport\">\n <div className=\"os-content\">\n {...this.props.children}\n </div>\n </div>\n </div>\n <div className=\"os-scrollbar os-scrollbar-horizontal \">\n <div className=\"os-scrollbar-track\">\n <div className=\"os-scrollbar-handle\"></div>\n </div>\n </div>\n <div className=\"os-scrollbar os-scrollbar-vertical\">\n <div className=\"os-scrollbar-track\">\n <div className=\"os-scrollbar-handle\"></div>\n </div>\n </div>\n <div className=\"os-scrollbar-corner\"></div>\n </div>\n );\n }\n}"],"names":["tslib_1.__extends","React","Component"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAUgDA,8CAA2E;QAIvH,oCAAY,KAAsC;YAAlD,YACI,kBAAM,KAAK,CAAC,SAEf;YANO,iBAAW,GAA6B,IAAI,CAAC;YAKjD,KAAI,CAAC,YAAY,GAAGC,cAAK,CAAC,SAAS,EAAE,CAAC;;SACzC;QAED,+CAAU,GAAV;YACI,OAAO,IAAI,CAAC,WAAW,CAAC;SAC3B;QAED,6CAAQ,GAAR;YACI,OAAO,IAAI,CAAC,YAAY,CAAC,OAAO,IAAI,IAAI,CAAC;SAC5C;QAED,sDAAiB,GAAjB;YACI,IAAI,CAAC,WAAW,GAAG,iBAAiB,CAAC,IAAI,CAAC,QAAQ,EAAE,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,IAAI,EAAE,EAAE,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC;SAC1G;QAED,yDAAoB,GAApB;YACI,IAAI,iBAAiB,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE;gBAC3C,IAAI,CAAC,WAAW,CAAC,OAAO,EAAE,CAAC;gBAC3B,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;aAC3B;SACJ;QAED,uDAAkB,GAAlB,UAAmB,SAA0C;YACzD,IAAI,iBAAiB,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE;gBAC3C,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;aAChD;SACJ;QAED,2CAAM,GAAN;YACI,IAAI,eAMU,EALV,oBAAO,EACP,0BAAU,EACV,sBAAQ,EACR,wBAAS,EACT,yEACU,CAAC;YAEf,QACIA,+CAAK,SAAS,EAAK,SAAS,aAAU,IAAM,QAAQ,IAAE,GAAG,EAAE,IAAI,CAAC,YAAY;gBACxEA,sCAAK,SAAS,EAAC,yBAAyB,GAAO;gBAC/CA,sCAAK,SAAS,EAAC,YAAY;oBACvBA,sCAAK,SAAS,EAAC,aAAa;wBACxBA,sCAAK,SAAS,EAAC,YAAY,IACnB,IAAI,CAAC,KAAK,CAAC,QAAQ,CACrB,CACJ,CACJ;gBACNA,sCAAK,SAAS,EAAC,uCAAuC;oBAClDA,sCAAK,SAAS,EAAC,oBAAoB;wBAC/BA,sCAAK,SAAS,EAAC,qBAAqB,GAAO,CACzC,CACJ;gBACNA,sCAAK,SAAS,EAAC,oCAAoC;oBAC/CA,sCAAK,SAAS,EAAC,oBAAoB;wBAC/BA,sCAAK,SAAS,EAAC,qBAAqB,GAAO,CACzC,CACJ;gBACNA,sCAAK,SAAS,EAAC,qBAAqB,GAAO,CACzC,EACR;SACL;QACL,iCAAC;IAAD,CAnEA,CAAgDC,eAAS;;;;;;;;;;;;"}
|
||||
+39
-15
@@ -2827,7 +2827,8 @@
|
||||
},
|
||||
"ansi-regex": {
|
||||
"version": "2.1.1",
|
||||
"bundled": true
|
||||
"bundled": true,
|
||||
"optional": true
|
||||
},
|
||||
"aproba": {
|
||||
"version": "1.2.0",
|
||||
@@ -3192,7 +3193,8 @@
|
||||
},
|
||||
"safe-buffer": {
|
||||
"version": "5.1.2",
|
||||
"bundled": true
|
||||
"bundled": true,
|
||||
"optional": true
|
||||
},
|
||||
"safer-buffer": {
|
||||
"version": "2.1.2",
|
||||
@@ -3240,6 +3242,7 @@
|
||||
"strip-ansi": {
|
||||
"version": "3.0.1",
|
||||
"bundled": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"ansi-regex": "^2.0.0"
|
||||
}
|
||||
@@ -3278,11 +3281,13 @@
|
||||
},
|
||||
"wrappy": {
|
||||
"version": "1.0.2",
|
||||
"bundled": true
|
||||
"bundled": true,
|
||||
"optional": true
|
||||
},
|
||||
"yallist": {
|
||||
"version": "3.0.3",
|
||||
"bundled": true
|
||||
"bundled": true,
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
@@ -6691,7 +6696,8 @@
|
||||
},
|
||||
"ansi-regex": {
|
||||
"version": "2.1.1",
|
||||
"bundled": true
|
||||
"bundled": true,
|
||||
"optional": true
|
||||
},
|
||||
"aproba": {
|
||||
"version": "1.2.0",
|
||||
@@ -6709,11 +6715,13 @@
|
||||
},
|
||||
"balanced-match": {
|
||||
"version": "1.0.0",
|
||||
"bundled": true
|
||||
"bundled": true,
|
||||
"optional": true
|
||||
},
|
||||
"brace-expansion": {
|
||||
"version": "1.1.11",
|
||||
"bundled": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"balanced-match": "^1.0.0",
|
||||
"concat-map": "0.0.1"
|
||||
@@ -6726,15 +6734,18 @@
|
||||
},
|
||||
"code-point-at": {
|
||||
"version": "1.1.0",
|
||||
"bundled": true
|
||||
"bundled": true,
|
||||
"optional": true
|
||||
},
|
||||
"concat-map": {
|
||||
"version": "0.0.1",
|
||||
"bundled": true
|
||||
"bundled": true,
|
||||
"optional": true
|
||||
},
|
||||
"console-control-strings": {
|
||||
"version": "1.1.0",
|
||||
"bundled": true
|
||||
"bundled": true,
|
||||
"optional": true
|
||||
},
|
||||
"core-util-is": {
|
||||
"version": "1.0.2",
|
||||
@@ -6837,7 +6848,8 @@
|
||||
},
|
||||
"inherits": {
|
||||
"version": "2.0.3",
|
||||
"bundled": true
|
||||
"bundled": true,
|
||||
"optional": true
|
||||
},
|
||||
"ini": {
|
||||
"version": "1.3.5",
|
||||
@@ -6847,6 +6859,7 @@
|
||||
"is-fullwidth-code-point": {
|
||||
"version": "1.0.0",
|
||||
"bundled": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"number-is-nan": "^1.0.0"
|
||||
}
|
||||
@@ -6859,17 +6872,20 @@
|
||||
"minimatch": {
|
||||
"version": "3.0.4",
|
||||
"bundled": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"brace-expansion": "^1.1.7"
|
||||
}
|
||||
},
|
||||
"minimist": {
|
||||
"version": "0.0.8",
|
||||
"bundled": true
|
||||
"bundled": true,
|
||||
"optional": true
|
||||
},
|
||||
"minipass": {
|
||||
"version": "2.3.5",
|
||||
"bundled": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"safe-buffer": "^5.1.2",
|
||||
"yallist": "^3.0.0"
|
||||
@@ -6886,6 +6902,7 @@
|
||||
"mkdirp": {
|
||||
"version": "0.5.1",
|
||||
"bundled": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"minimist": "0.0.8"
|
||||
}
|
||||
@@ -6958,7 +6975,8 @@
|
||||
},
|
||||
"number-is-nan": {
|
||||
"version": "1.0.1",
|
||||
"bundled": true
|
||||
"bundled": true,
|
||||
"optional": true
|
||||
},
|
||||
"object-assign": {
|
||||
"version": "4.1.1",
|
||||
@@ -6968,6 +6986,7 @@
|
||||
"once": {
|
||||
"version": "1.4.0",
|
||||
"bundled": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"wrappy": "1"
|
||||
}
|
||||
@@ -7043,7 +7062,8 @@
|
||||
},
|
||||
"safe-buffer": {
|
||||
"version": "5.1.2",
|
||||
"bundled": true
|
||||
"bundled": true,
|
||||
"optional": true
|
||||
},
|
||||
"safer-buffer": {
|
||||
"version": "2.1.2",
|
||||
@@ -7073,6 +7093,7 @@
|
||||
"string-width": {
|
||||
"version": "1.0.2",
|
||||
"bundled": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"code-point-at": "^1.0.0",
|
||||
"is-fullwidth-code-point": "^1.0.0",
|
||||
@@ -7090,6 +7111,7 @@
|
||||
"strip-ansi": {
|
||||
"version": "3.0.1",
|
||||
"bundled": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"ansi-regex": "^2.0.0"
|
||||
}
|
||||
@@ -7128,11 +7150,13 @@
|
||||
},
|
||||
"wrappy": {
|
||||
"version": "1.0.2",
|
||||
"bundled": true
|
||||
"bundled": true,
|
||||
"optional": true
|
||||
},
|
||||
"yallist": {
|
||||
"version": "3.0.3",
|
||||
"bundled": true
|
||||
"bundled": true,
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -4,6 +4,7 @@ import OverlayScrollbars from 'overlayscrollbars';
|
||||
import { OverlayScrollbarsComponent } from 'overlayscrollbars-react';
|
||||
|
||||
export interface AppState {
|
||||
loremList: Array<string>;
|
||||
componentContent: string;
|
||||
osComponentOptions: OverlayScrollbars.Options;
|
||||
}
|
||||
@@ -23,6 +24,7 @@ export default class App extends React.Component<any, AppState> {
|
||||
this.osComponentRef2 = React.createRef<OverlayScrollbarsComponent>();
|
||||
this.state = {
|
||||
componentContent: 'Lorem Ipsum',
|
||||
loremList: [],
|
||||
osComponentOptions: {
|
||||
resize: 'both',
|
||||
paddingAbsolute: true,
|
||||
@@ -69,10 +71,9 @@ export default class App extends React.Component<any, AppState> {
|
||||
}
|
||||
|
||||
onBtnChangeContent() {
|
||||
let loremIpsums = [this.loremIpsumLong, this.loremIpsumMedium, this.loremIpsumShort];
|
||||
let random = Math.floor(Math.random() * loremIpsums.length);
|
||||
this.setState({
|
||||
componentContent: this.state.componentContent + '\r\n' + loremIpsums[random]
|
||||
componentContent: this.state.componentContent + '\r\n' + this.randomIpsum(),
|
||||
loremList: [...this.state.loremList, this.randomIpsum()]
|
||||
});
|
||||
}
|
||||
|
||||
@@ -90,6 +91,11 @@ export default class App extends React.Component<any, AppState> {
|
||||
console.log(this.osComponentRef2.current!.osTarget());
|
||||
}
|
||||
|
||||
randomIpsum(): string {
|
||||
let loremIpsums = [this.loremIpsumLong, this.loremIpsumMedium, this.loremIpsumShort];
|
||||
return loremIpsums[Math.floor(Math.random() * loremIpsums.length)];
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className="App">
|
||||
@@ -133,7 +139,7 @@ export default class App extends React.Component<any, AppState> {
|
||||
<OverlayScrollbarsComponent ref={this.osComponentRef1}
|
||||
options={this.state.osComponentOptions}
|
||||
style={{ maxHeight: '350px' }}
|
||||
className={`custom-class-name-test ${this.framework}`}
|
||||
className={`${this.framework} custom-class-name-test`}
|
||||
>
|
||||
<div className="bonus-content">
|
||||
{this.state.componentContent}
|
||||
@@ -159,6 +165,11 @@ export default class App extends React.Component<any, AppState> {
|
||||
<br />
|
||||
<br />
|
||||
{this.loremIpsumLong}
|
||||
{
|
||||
this.state.loremList.map((item, index) => {
|
||||
return <div key={index} data-key={index}><br />{item}</div>;
|
||||
})
|
||||
}
|
||||
</OverlayScrollbarsComponent>
|
||||
|
||||
<div className="buttons">
|
||||
|
||||
+30
-11
@@ -1184,7 +1184,8 @@
|
||||
"ansi-regex": {
|
||||
"version": "2.1.1",
|
||||
"bundled": true,
|
||||
"dev": true
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"aproba": {
|
||||
"version": "1.2.0",
|
||||
@@ -1205,12 +1206,14 @@
|
||||
"balanced-match": {
|
||||
"version": "1.0.0",
|
||||
"bundled": true,
|
||||
"dev": true
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"brace-expansion": {
|
||||
"version": "1.1.11",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"balanced-match": "^1.0.0",
|
||||
"concat-map": "0.0.1"
|
||||
@@ -1225,17 +1228,20 @@
|
||||
"code-point-at": {
|
||||
"version": "1.1.0",
|
||||
"bundled": true,
|
||||
"dev": true
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"concat-map": {
|
||||
"version": "0.0.1",
|
||||
"bundled": true,
|
||||
"dev": true
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"console-control-strings": {
|
||||
"version": "1.1.0",
|
||||
"bundled": true,
|
||||
"dev": true
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"core-util-is": {
|
||||
"version": "1.0.2",
|
||||
@@ -1352,7 +1358,8 @@
|
||||
"inherits": {
|
||||
"version": "2.0.3",
|
||||
"bundled": true,
|
||||
"dev": true
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"ini": {
|
||||
"version": "1.3.5",
|
||||
@@ -1364,6 +1371,7 @@
|
||||
"version": "1.0.0",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"number-is-nan": "^1.0.0"
|
||||
}
|
||||
@@ -1378,6 +1386,7 @@
|
||||
"version": "3.0.4",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"brace-expansion": "^1.1.7"
|
||||
}
|
||||
@@ -1385,12 +1394,14 @@
|
||||
"minimist": {
|
||||
"version": "0.0.8",
|
||||
"bundled": true,
|
||||
"dev": true
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"minipass": {
|
||||
"version": "2.3.5",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"safe-buffer": "^5.1.2",
|
||||
"yallist": "^3.0.0"
|
||||
@@ -1409,6 +1420,7 @@
|
||||
"version": "0.5.1",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"minimist": "0.0.8"
|
||||
}
|
||||
@@ -1489,7 +1501,8 @@
|
||||
"number-is-nan": {
|
||||
"version": "1.0.1",
|
||||
"bundled": true,
|
||||
"dev": true
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"object-assign": {
|
||||
"version": "4.1.1",
|
||||
@@ -1501,6 +1514,7 @@
|
||||
"version": "1.4.0",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"wrappy": "1"
|
||||
}
|
||||
@@ -1586,7 +1600,8 @@
|
||||
"safe-buffer": {
|
||||
"version": "5.1.2",
|
||||
"bundled": true,
|
||||
"dev": true
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"safer-buffer": {
|
||||
"version": "2.1.2",
|
||||
@@ -1622,6 +1637,7 @@
|
||||
"version": "1.0.2",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"code-point-at": "^1.0.0",
|
||||
"is-fullwidth-code-point": "^1.0.0",
|
||||
@@ -1641,6 +1657,7 @@
|
||||
"version": "3.0.1",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"ansi-regex": "^2.0.0"
|
||||
}
|
||||
@@ -1684,12 +1701,14 @@
|
||||
"wrappy": {
|
||||
"version": "1.0.2",
|
||||
"bundled": true,
|
||||
"dev": true
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"yallist": {
|
||||
"version": "3.0.3",
|
||||
"bundled": true,
|
||||
"dev": true
|
||||
"dev": true,
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
@@ -47,12 +47,31 @@ export class OverlayScrollbarsComponent extends Component<OverlayScrollbarsCompo
|
||||
options,
|
||||
extensions,
|
||||
children,
|
||||
className,
|
||||
...divProps
|
||||
} = this.props;
|
||||
|
||||
return (
|
||||
<div {...divProps} ref={this._osTargetRef}>
|
||||
{...this.props.children}
|
||||
<div className={`${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}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="os-scrollbar os-scrollbar-horizontal ">
|
||||
<div className="os-scrollbar-track">
|
||||
<div className="os-scrollbar-handle"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="os-scrollbar os-scrollbar-vertical">
|
||||
<div className="os-scrollbar-track">
|
||||
<div className="os-scrollbar-handle"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="os-scrollbar-corner"></div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user