• Home
• net.n2oapp.framework
• n2o-react
• 7.28.2
• source code
• TopLeftRightPage.jsx

×

Project download

Many resources are needed to download a project. Please understand that we have to compensate our server costs. Thank you in advance.
Project price only 1 $

You can buy this project and download/modify it how often you want.

components.pages.TopLeftRightPage.TopLeftRightPage.jsx Maven / Gradle / Ivy

import React, { useContext } from 'react'
import PropTypes from 'prop-types'
import {
    compose,
    withState,
    mapProps,
    withHandlers,
    lifecycle,
} from 'recompose'
import get from 'lodash/get'
import map from 'lodash/map'
import classNames from 'classnames'
import { Button } from 'reactstrap'

import { REGIONS } from '../../../core/factory/factoryLevels'
// eslint-disable-next-line import/no-named-as-default
import Factory from '../../../core/factory/Factory'
import DefaultPage from '../DefaultPage'
import { ScrollContext } from '../../snippets/ScrollContainer/ScrollContainer'

import FixedContainer from './FixedContainer'

const FixedPlace = {
    TOP: 'top',
    LEFT: 'left',
    RIGHT: 'right',
}

let timeoutId = null

function TopLeftRightPage({
    id,
    regions,
    isFixed,
    style,
    scrollTo,
    showScrollButton,
    places,
    ...rest
}) {
    const topRegion = get(regions, 'top', null)
    const leftRegion = get(regions, 'left', null)
    const rightRegion = get(regions, 'right', null)

    return (
        
            

                
                    {map(topRegion, (region, index) => (
                        
                    ))}
                

                

                    
                        {map(leftRegion, (region, index) => (
                            
                        ))}
                    

                    
                        {map(rightRegion, (region, index) => (
                            
                        ))}
                    
                
                
                    
                
            

        
    )
}

TopLeftRightPage.propTypes = {
    id: PropTypes.string,
    regions: PropTypes.object,
    width: PropTypes.object,
    isFixed: PropTypes.bool,
    style: PropTypes.object,
    scrollTo: PropTypes.func,
    showScrollButton: PropTypes.bool,
    places: PropTypes.object,
}

TopLeftRightPage.defaultProps = {
    regions: {},
    width: {},
}

const withContext = (Context, mapper) => Component => (props) => {
    const contextValue = useContext(Context)
    const mappedValue = mapper(contextValue)

    return ()
}

const enhance = compose(
    withContext(ScrollContext, scrollContext => ({ scrollContext })),
    withState('isFixed', 'setFixed', null),
    withState('style', 'setStyle', {}),
    withState('showScrollButton', 'setShowScrollButton', false),
    mapProps(props => ({
        ...props,
        places: get(props, 'metadata.places', {}),
        needScrollButton: get(props, 'metadata.needScrollButton', false),
    })),
    withHandlers({
        addScrollEvent: ({
            setShowScrollButton,
            needScrollButton,
        }) => (scrollContext) => {
            if (timeoutId) { clearTimeout(timeoutId) }

            timeoutId = setTimeout(() => {
                if (needScrollButton) {
                    setShowScrollButton(scrollContext.scrollTop > 100)
                }
            }, 100)
        },
        scrollTo: ({ setShowScrollButton, scrollContext }) => () => {
            scrollContext.scrollTo({
                top: 0,
                behavior: 'smooth',
            })
            setShowScrollButton(false)
        },
    }),
    lifecycle({
        componentDidUpdate({ scrollContext: prevScrollContext }) {
            const {
                addScrollEvent,
                scrollContext,
            } = this.props

            if (scrollContext.scrollTop !== prevScrollContext.scrollTop) {
                addScrollEvent(scrollContext)
            }
        },
    }),
)

export { TopLeftRightPage }
export default enhance(TopLeftRightPage)