"lodash.set": "^4.3.2",
"md5": "^2.2.1",
"moment": "^2.18.1",
+ "perfect-scrollbar": "^1.4.0",
"prop-types": "^15.6.1",
"qs": "^6.5.2",
"react": "^16.2.0",
@import 'components/loader';
@import 'components/tree';
@import 'components/customModal';
-
-
+@import 'components/scrollbars';
--- /dev/null
+.ps__rail-x {
+ opacity: 1;
+ height: 4px;
+ /* there must be 'bottom' or 'top' for ps__rail-x */
+ bottom: 0px;
+}
+
+.ps__rail-y {
+ opacity: 1;
+ width: 4px;
+ /* there must be 'right' or 'left' for ps__rail-y */
+ right: 0;
+}
+
+.ps__thumb-x {
+ background-color: $light-gray;
+ border-radius: 0px;
+ height: 4px;
+ /* there must be 'bottom' for ps__thumb-x */
+ bottom: 0px;
+}
+
+.ps__thumb-y {
+ background-color: $light-gray;
+ border-radius: 0px;
+ width: 4px;
+ /* there must be 'right' for ps__thumb-y */
+ right: 0px;
+}
+
+.ps:hover > .ps__rail-x,
+.ps:hover > .ps__rail-y,
+.ps--focus > .ps__rail-x,
+.ps--focus > .ps__rail-y,
+.ps--scrolling-x > .ps__rail-x,
+.ps--scrolling-y > .ps__rail-y {
+ opacity: 1;
+ background-color: transparent;
+}
+
+.ps .ps__rail-x:hover,
+.ps .ps__rail-y:hover,
+.ps .ps__rail-x:focus,
+.ps .ps__rail-y:focus,
+.ps .ps__rail-x.ps--clicking,
+.ps .ps__rail-y.ps--clicking {
+ opacity: 1;
+ background-color: transparent;
+}
+
+.ps__rail-x:hover > .ps__thumb-x,
+.ps__rail-x:focus > .ps__thumb-x,
+.ps__rail-x.ps--clicking .ps__thumb-x {
+ background-color: $light-gray;
+ height: 4px;
+}
+
+.ps__rail-y:hover > .ps__thumb-y,
+.ps__rail-y:focus > .ps__thumb-y,
+.ps__rail-y.ps--clicking .ps__thumb-y {
+ background-color: $light-gray;
+ width: 4px;
+}
}
&__table {
- min-height: 102px;
- max-height: calc(100vh - 202px);
- overflow-y: auto;
&__thead {
background-color: $silver;
@include body-1-emphasis;
- position: -webkit-sticky;
- position: sticky;
- top: 0px;
- z-index: 1;
}
+ .scrollbars {
+ min-height: 102px;
+ max-height: calc(100vh - 243px);
+ overflow: auto;
+ position: relative;
+ }
+
&__tbody {
}
}
flex: 1;
display: flex;
align-items: center;
- padding: 20px 17px;
+ padding: 22px 17px;
&--empty {
padding: 20px;
color: $dark-gray;
.sdc-label__error {
margin: unset;
position: absolute;
- bottom: -20px;
+ bottom: -22px;
}
}
}
@import '../../node_modules/bpmn-js/dist/assets/bpmn-font/css/bpmn.css';
@import 'common';
@import '../../node_modules/sdc-ui/lib/css/style.css';
+@import '../../node_modules/perfect-scrollbar/css/perfect-scrollbar.css';
@import 'components';
@import 'features';
import cn from 'classnames';
import { SVGIcon } from 'sdc-ui/lib/react';
+import Scrollbars from 'shared/scroll/Scrollbars';
import SearchInput from 'shared/searchInput/SearchInput';
import { getValidationsError } from 'features/version/inputOutput/inputOutputValidations';
import Tab from 'features/version/inputOutput/views/Tab';
<div className="input-output__table">
<TableHead />
<TableBody isCertified={isCertified}>
- {dataRowsView}
+ <Scrollbars className="scrollbars">
+ {dataRowsView}
+ </Scrollbars>
</TableBody>
</div>
</div>
--- /dev/null
+/*
+* Copyright © 2018 European Support Limited
+*
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+* http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import PerfectScrollbar from 'perfect-scrollbar';
+
+class Scrollbars extends React.Component {
+ containerRef = React.createRef();
+ scrollbars = null;
+
+ componentDidMount() {
+ const container = this.containerRef.current;
+
+ this.scrollbars = new PerfectScrollbar(container);
+ }
+
+ componentDidUpdate() {
+ if (this.scrollbars) {
+ this.scrollbars.update();
+ }
+ }
+
+ componentWillUnmount() {
+ this.scrollbars.destroy();
+ this.scrollbars = null;
+ }
+
+ render() {
+ const { children, className } = this.props;
+
+ return (
+ <div className={className} ref={this.containerRef}>
+ {children}
+ </div>
+ );
+ }
+}
+
+Scrollbars.propTypes = {
+ children: PropTypes.node,
+ className: PropTypes.string
+};
+
+export default Scrollbars;
safe-buffer "^5.0.1"
sha.js "^2.4.8"
+perfect-scrollbar@^1.4.0:
+ version "1.4.0"
+ resolved "https://registry.yarnpkg.com/perfect-scrollbar/-/perfect-scrollbar-1.4.0.tgz#5d014ef9775e1f43058a1dbae9ed1daf0e7091f1"
+
performance-now@^2.1.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"