2020-10-16 13:16:01 +00:00
|
|
|
import React from "react";
|
|
|
|
import PropTypes from "prop-types";
|
2022-05-05 10:46:39 +00:00
|
|
|
import { isMobile } from "@appserver/components/utils/device";
|
2021-02-08 07:44:16 +00:00
|
|
|
import StyledScrollbar from "./styled-scrollbar";
|
2019-08-07 10:57:54 +00:00
|
|
|
const Scrollbar = React.forwardRef((props, ref) => {
|
2019-07-16 12:27:35 +00:00
|
|
|
const scrollbarType = {
|
|
|
|
smallWhite: {
|
2020-10-16 13:16:01 +00:00
|
|
|
thumbV: {
|
|
|
|
width: "2px",
|
|
|
|
marginLeft: "2px",
|
|
|
|
borderRadius: "inherit",
|
|
|
|
},
|
|
|
|
thumbH: {
|
|
|
|
height: "2px",
|
|
|
|
marginTop: "2px",
|
|
|
|
borderRadius: "inherit",
|
|
|
|
},
|
|
|
|
view: { outline: "none", WebkitOverflowScrolling: "auto" },
|
2019-07-16 12:27:35 +00:00
|
|
|
},
|
|
|
|
smallBlack: {
|
2020-10-16 13:16:01 +00:00
|
|
|
thumbV: {
|
|
|
|
width: "3px",
|
|
|
|
marginLeft: "2px",
|
|
|
|
borderRadius: "inherit",
|
|
|
|
},
|
|
|
|
thumbH: {
|
|
|
|
height: "3px",
|
|
|
|
marginTop: "2px",
|
|
|
|
borderRadius: "inherit",
|
|
|
|
},
|
|
|
|
view: { outline: "none", WebkitOverflowScrolling: "auto" },
|
2019-07-16 12:27:35 +00:00
|
|
|
},
|
|
|
|
mediumBlack: {
|
2020-10-16 13:16:01 +00:00
|
|
|
thumbV: {
|
|
|
|
width: "8px",
|
|
|
|
borderRadius: "inherit",
|
|
|
|
},
|
|
|
|
thumbH: {
|
|
|
|
height: "8px",
|
|
|
|
borderRadius: "inherit",
|
|
|
|
},
|
|
|
|
view: {
|
2022-05-05 10:46:39 +00:00
|
|
|
paddingRight: isMobile() ? "8px" : "16px",
|
2020-10-16 13:16:01 +00:00
|
|
|
outline: "none",
|
|
|
|
WebkitOverflowScrolling: "auto",
|
|
|
|
},
|
2019-07-29 16:42:44 +00:00
|
|
|
},
|
|
|
|
preMediumBlack: {
|
2020-10-16 13:16:01 +00:00
|
|
|
thumbV: {
|
|
|
|
width: "5px",
|
|
|
|
borderRadius: "inherit",
|
|
|
|
cursor: "default",
|
|
|
|
},
|
|
|
|
thumbH: {
|
|
|
|
height: "5px",
|
|
|
|
borderRadius: "inherit",
|
|
|
|
cursor: "default",
|
|
|
|
},
|
|
|
|
view: { outline: "none", WebkitOverflowScrolling: "auto" },
|
2019-07-16 12:27:35 +00:00
|
|
|
},
|
|
|
|
};
|
2019-12-03 13:03:44 +00:00
|
|
|
|
2019-07-23 12:25:43 +00:00
|
|
|
const stype = scrollbarType[props.stype];
|
2019-07-16 12:27:35 +00:00
|
|
|
|
|
|
|
const thumbV = stype ? stype.thumbV : {};
|
|
|
|
const thumbH = stype ? stype.thumbH : {};
|
2019-11-14 13:25:38 +00:00
|
|
|
const view = stype ? stype.view : {};
|
2019-07-16 12:27:35 +00:00
|
|
|
|
|
|
|
const renderNavThumbVertical = ({ style, ...props }) => (
|
2020-10-16 13:16:01 +00:00
|
|
|
<div
|
|
|
|
{...props}
|
|
|
|
className="nav-thumb-vertical"
|
|
|
|
style={{ ...style, ...thumbV }}
|
|
|
|
/>
|
2019-07-16 12:27:35 +00:00
|
|
|
);
|
|
|
|
|
|
|
|
const renderNavThumbHorizontal = ({ style, ...props }) => (
|
2020-10-16 13:16:01 +00:00
|
|
|
<div
|
|
|
|
className="nav-thumb-horizontal"
|
|
|
|
{...props}
|
|
|
|
style={{ ...style, ...thumbH }}
|
|
|
|
/>
|
2019-07-16 12:27:35 +00:00
|
|
|
);
|
|
|
|
|
2021-06-18 14:17:59 +00:00
|
|
|
const renderView = ({ style, ...rest }) => (
|
2020-10-16 13:16:01 +00:00
|
|
|
<div
|
2021-06-18 14:17:59 +00:00
|
|
|
{...rest}
|
2020-10-16 13:16:01 +00:00
|
|
|
style={{ ...style, ...view }}
|
|
|
|
tabIndex={-1}
|
2021-06-18 14:17:59 +00:00
|
|
|
className={`${props.scrollclass} scroll-body`}
|
2020-10-16 13:16:01 +00:00
|
|
|
/>
|
2019-11-14 13:04:42 +00:00
|
|
|
);
|
|
|
|
|
2019-07-16 12:27:35 +00:00
|
|
|
return (
|
2021-02-08 07:44:16 +00:00
|
|
|
<StyledScrollbar
|
2020-10-16 13:16:01 +00:00
|
|
|
renderView={renderView}
|
|
|
|
renderThumbVertical={renderNavThumbVertical}
|
|
|
|
renderThumbHorizontal={renderNavThumbHorizontal}
|
|
|
|
{...props}
|
|
|
|
ref={ref}
|
|
|
|
/>
|
2019-07-16 12:27:35 +00:00
|
|
|
);
|
2019-08-07 10:57:54 +00:00
|
|
|
});
|
2019-07-16 12:27:35 +00:00
|
|
|
|
2019-12-03 13:03:44 +00:00
|
|
|
Scrollbar.propTypes = {
|
2021-03-10 11:43:48 +00:00
|
|
|
/** Scrollbar style type */
|
2019-12-03 13:03:44 +00:00
|
|
|
stype: PropTypes.string,
|
2021-03-10 11:43:48 +00:00
|
|
|
/** Accepts class */
|
2019-12-03 13:03:44 +00:00
|
|
|
className: PropTypes.string,
|
2021-03-10 11:43:48 +00:00
|
|
|
/** Accepts id */
|
2019-12-03 13:03:44 +00:00
|
|
|
id: PropTypes.string,
|
2021-03-10 11:43:48 +00:00
|
|
|
/** Accepts css style */
|
2020-10-16 13:16:01 +00:00
|
|
|
style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
|
2019-12-03 13:03:44 +00:00
|
|
|
};
|
|
|
|
|
2019-07-23 12:25:43 +00:00
|
|
|
Scrollbar.defaultProps = {
|
2022-04-28 13:01:28 +00:00
|
|
|
stype: "mediumBlack",
|
2019-07-23 12:25:43 +00:00
|
|
|
};
|
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
export default Scrollbar;
|