diff options
author | Starfall <us@starfall.systems> | 2023-04-14 19:22:47 -0500 |
---|---|---|
committer | Starfall <us@starfall.systems> | 2023-04-14 19:22:47 -0500 |
commit | 4fe1689de43f4404eb9530fcfbcbfb26d6c1c13a (patch) | |
tree | 6811b845bb7f4966b10dcefa3dea404246f161c7 /app/javascript/flavours/glitch/features/ui/components/columns_area.js | |
parent | 65c1e53a32cabcdbb7bca57002bb0f6acdebe07e (diff) | |
parent | bed63f6dae0879ac840066b031229e0d139089cd (diff) |
Diffstat (limited to 'app/javascript/flavours/glitch/features/ui/components/columns_area.js')
-rw-r--r-- | app/javascript/flavours/glitch/features/ui/components/columns_area.js | 183 |
1 files changed, 0 insertions, 183 deletions
diff --git a/app/javascript/flavours/glitch/features/ui/components/columns_area.js b/app/javascript/flavours/glitch/features/ui/components/columns_area.js deleted file mode 100644 index 993a50796..000000000 --- a/app/javascript/flavours/glitch/features/ui/components/columns_area.js +++ /dev/null @@ -1,183 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import ImmutablePropTypes from 'react-immutable-proptypes'; -import ImmutablePureComponent from 'react-immutable-pure-component'; -import BundleContainer from '../containers/bundle_container'; -import ColumnLoading from './column_loading'; -import DrawerLoading from './drawer_loading'; -import BundleColumnError from './bundle_column_error'; -import { - Compose, - Notifications, - HomeTimeline, - CommunityTimeline, - PublicTimeline, - HashtagTimeline, - DirectTimeline, - FavouritedStatuses, - BookmarkedStatuses, - ListTimeline, - Directory, -} from '../../ui/util/async-components'; -import ComposePanel from './compose_panel'; -import NavigationPanel from './navigation_panel'; - -import { supportsPassiveEvents } from 'detect-passive-events'; -import { scrollRight } from 'flavours/glitch/scroll'; - -const componentMap = { - 'COMPOSE': Compose, - 'HOME': HomeTimeline, - 'NOTIFICATIONS': Notifications, - 'PUBLIC': PublicTimeline, - 'REMOTE': PublicTimeline, - 'COMMUNITY': CommunityTimeline, - 'HASHTAG': HashtagTimeline, - 'DIRECT': DirectTimeline, - 'FAVOURITES': FavouritedStatuses, - 'BOOKMARKS': BookmarkedStatuses, - 'LIST': ListTimeline, - 'DIRECTORY': Directory, -}; - -export default class ColumnsArea extends ImmutablePureComponent { - - static contextTypes = { - router: PropTypes.object.isRequired, - }; - - static propTypes = { - columns: ImmutablePropTypes.list.isRequired, - singleColumn: PropTypes.bool, - children: PropTypes.node, - navbarUnder: PropTypes.bool, - openSettings: PropTypes.func, - }; - - // Corresponds to (max-width: $no-gap-breakpoint + 285px - 1px) in SCSS - mediaQuery = 'matchMedia' in window && window.matchMedia('(max-width: 1174px)'); - - state = { - renderComposePanel: !(this.mediaQuery && this.mediaQuery.matches), - } - - componentDidMount() { - if (!this.props.singleColumn) { - this.node.addEventListener('wheel', this.handleWheel, supportsPassiveEvents ? { passive: true } : false); - } - - if (this.mediaQuery) { - if (this.mediaQuery.addEventListener) { - this.mediaQuery.addEventListener('change', this.handleLayoutChange); - } else { - this.mediaQuery.addListener(this.handleLayoutChange); - } - this.setState({ renderComposePanel: !this.mediaQuery.matches }); - } - - this.isRtlLayout = document.getElementsByTagName('body')[0].classList.contains('rtl'); - } - - componentWillUpdate(nextProps) { - if (this.props.singleColumn !== nextProps.singleColumn && nextProps.singleColumn) { - this.node.removeEventListener('wheel', this.handleWheel); - } - } - - componentDidUpdate(prevProps) { - if (this.props.singleColumn !== prevProps.singleColumn && !this.props.singleColumn) { - this.node.addEventListener('wheel', this.handleWheel, supportsPassiveEvents ? { passive: true } : false); - } - } - - componentWillUnmount () { - if (!this.props.singleColumn) { - this.node.removeEventListener('wheel', this.handleWheel); - } - - if (this.mediaQuery) { - if (this.mediaQuery.removeEventListener) { - this.mediaQuery.removeEventListener('change', this.handleLayoutChange); - } else { - this.mediaQuery.removeListener(this.handleLayoutChange); - } - } - } - - handleChildrenContentChange() { - if (!this.props.singleColumn) { - const modifier = this.isRtlLayout ? -1 : 1; - this._interruptScrollAnimation = scrollRight(this.node, (this.node.scrollWidth - window.innerWidth) * modifier); - } - } - - handleLayoutChange = (e) => { - this.setState({ renderComposePanel: !e.matches }); - } - - handleWheel = () => { - if (typeof this._interruptScrollAnimation !== 'function') { - return; - } - - this._interruptScrollAnimation(); - } - - setRef = (node) => { - this.node = node; - } - - renderLoading = columnId => () => { - return columnId === 'COMPOSE' ? <DrawerLoading /> : <ColumnLoading multiColumn />; - } - - renderError = (props) => { - return <BundleColumnError multiColumn errorType='network' {...props} />; - } - - render () { - const { columns, children, singleColumn, navbarUnder, openSettings } = this.props; - const { renderComposePanel } = this.state; - - if (singleColumn) { - return ( - <div className='columns-area__panels'> - <div className='columns-area__panels__pane columns-area__panels__pane--compositional'> - <div className='columns-area__panels__pane__inner'> - {renderComposePanel && <ComposePanel />} - </div> - </div> - - <div className='columns-area__panels__main'> - <div className='tabs-bar__wrapper'><div id='tabs-bar__portal' /></div> - <div className='columns-area columns-area--mobile'>{children}</div> - </div> - - <div className='columns-area__panels__pane columns-area__panels__pane--start columns-area__panels__pane--navigational'> - <div className='columns-area__panels__pane__inner'> - <NavigationPanel onOpenSettings={openSettings} /> - </div> - </div> - </div> - ); - } - - return ( - <div className='columns-area' ref={this.setRef}> - {columns.map(column => { - const params = column.get('params', null) === null ? null : column.get('params').toJS(); - const other = params && params.other ? params.other : {}; - - return ( - <BundleContainer key={column.get('uuid')} fetchComponent={componentMap[column.get('id')]} loading={this.renderLoading(column.get('id'))} error={this.renderError}> - {SpecificComponent => <SpecificComponent columnId={column.get('uuid')} params={params} multiColumn {...other} />} - </BundleContainer> - ); - })} - - {React.Children.map(children, child => React.cloneElement(child, { multiColumn: true }))} - </div> - ); - } - -} |