Fixed: Scrolling of modals with tabular content in iOS

Co-Authored-By: Mark McDowall <markus101@users.noreply.github.com>
pull/900/head
Mark McDowall 5 years ago committed by Qstick
parent 87cb97407a
commit e555d790e6

@ -1,5 +1,6 @@
import PropTypes from 'prop-types';
import React from 'react';
import { scrollDirections } from 'Helpers/Props';
import Button from 'Components/Link/Button';
import ModalContent from 'Components/Modal/ModalContent';
import ModalHeader from 'Components/Modal/ModalHeader';
@ -20,7 +21,7 @@ function AlbumInteractiveSearchModalContent(props) {
Interactive Search {albumId != null && `- ${albumTitle}`}
</ModalHeader>
<ModalBody>
<ModalBody scrollDirection={scrollDirections.BOTH}>
<InteractiveSearchConnector
type="album"
searchPayload={{

@ -144,6 +144,7 @@ class FileBrowserModalContent extends Component {
<Scroller
ref={this.setScrollerRef}
className={styles.scroller}
scrollDirection={scrollDirections.BOTH}
>
{
!!error &&
@ -152,7 +153,10 @@ class FileBrowserModalContent extends Component {
{
isPopulated && !error &&
<Table columns={columns}>
<Table
horizontalScroll={false}
columns={columns}
>
<TableBody>
{
emptyParent &&

@ -48,7 +48,7 @@ ModalBody.propTypes = {
className: PropTypes.string,
innerClassName: PropTypes.string,
children: PropTypes.node,
scrollDirection: PropTypes.oneOf([scrollDirections.NONE, scrollDirections.HORIZONTAL, scrollDirections.VERTICAL])
scrollDirection: PropTypes.oneOf(scrollDirections.all)
};
ModalBody.defaultProps = {

@ -2,6 +2,7 @@
@add-mixin scrollbar;
@add-mixin scrollbarTrack;
@add-mixin scrollbarThumb;
-webkit-overflow-scrolling: touch;
}
.none {
@ -26,3 +27,11 @@
overflow-x: auto;
}
}
.both {
overflow: scroll;
&.autoScroll {
overflow: auto;
}
}

@ -66,7 +66,7 @@ class Scroller extends Component {
Scroller.propTypes = {
className: PropTypes.string,
scrollDirection: PropTypes.oneOf([scrollDirections.NONE, scrollDirections.HORIZONTAL, scrollDirections.VERTICAL]).isRequired,
scrollDirection: PropTypes.oneOf(scrollDirections.all).isRequired,
autoScroll: PropTypes.bool.isRequired,
scrollTop: PropTypes.number,
children: PropTypes.node,

@ -1,5 +1,7 @@
.tableContainer {
overflow-x: auto;
&.horizontalScroll {
overflow-x: auto;
}
}
.table {
@ -10,7 +12,12 @@
@media only screen and (max-width: $breakpointSmall) {
.tableContainer {
overflow-y: hidden;
width: 100%;
min-width: 100%;
width: fit-content;
&.horizontalScroll {
overflow-y: hidden;
width: 100%;
}
}
}

@ -1,6 +1,7 @@
import _ from 'lodash';
import PropTypes from 'prop-types';
import React from 'react';
import classNames from 'classnames';
import { icons, scrollDirections } from 'Helpers/Props';
import IconButton from 'Components/Link/IconButton';
import Scroller from 'Components/Scroller/Scroller';
@ -28,6 +29,7 @@ function getTableHeaderCellProps(props) {
function Table(props) {
const {
className,
horizontalScroll,
selectAll,
columns,
optionsComponent,
@ -41,14 +43,22 @@ function Table(props) {
return (
<Scroller
className={styles.tableContainer}
scrollDirection={scrollDirections.HORIZONTAL}
className={classNames(
styles.tableContainer,
horizontalScroll && styles.horizontalScroll
)}
scrollDirection={
horizontalScroll ?
scrollDirections.HORIZONTAL :
scrollDirections.NONE
}
>
<table className={className}>
<TableHeader>
{
selectAll &&
<TableSelectAllHeaderCell {...otherProps} />
selectAll ?
<TableSelectAllHeaderCell {...otherProps} /> :
null
}
{
@ -111,6 +121,7 @@ function Table(props) {
Table.propTypes = {
className: PropTypes.string,
horizontalScroll: PropTypes.bool.isRequired,
selectAll: PropTypes.bool.isRequired,
columns: PropTypes.arrayOf(PropTypes.object).isRequired,
optionsComponent: PropTypes.elementType,
@ -123,6 +134,7 @@ Table.propTypes = {
Table.defaultProps = {
className: styles.table,
horizontalScroll: true,
selectAll: false
};

@ -1,5 +1,6 @@
export const NONE = 'none';
export const BOTH = 'both';
export const HORIZONTAL = 'horizontal';
export const VERTICAL = 'vertical';
export const all = [NONE, HORIZONTAL, VERTICAL];
export const all = [NONE, HORIZONTAL, VERTICAL, BOTH];

@ -5,7 +5,7 @@ import getErrorMessage from 'Utilities/Object/getErrorMessage';
import getSelectedIds from 'Utilities/Table/getSelectedIds';
import selectAll from 'Utilities/Table/selectAll';
import toggleSelected from 'Utilities/Table/toggleSelected';
import { align, icons, kinds } from 'Helpers/Props';
import { align, icons, kinds, scrollDirections } from 'Helpers/Props';
import Button from 'Components/Link/Button';
import Icon from 'Components/Icon';
import LoadingIndicator from 'Components/Loading/LoadingIndicator';
@ -305,7 +305,7 @@ class InteractiveImportModalContent extends Component {
Manual Import - {title || folder}
</ModalHeader>
<ModalBody>
<ModalBody scrollDirection={scrollDirections.BOTH}>
<div className={styles.filterContainer}>
{
showFilterExistingFiles &&
@ -393,6 +393,7 @@ class InteractiveImportModalContent extends Component {
isPopulated && !!items.length && !isFetching && !isFetching &&
<Table
columns={columns}
horizontalScroll={false}
selectAll={true}
allSelected={allSelected}
allUnselected={allUnselected}

Loading…
Cancel
Save