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

Go to download
Show more of this group Show more artifacts with this name
Show all versions of n2o-react
There is a newer version: 7.28.3
import React, { useMemo } from 'react'
import { connect } from 'react-redux'
import { compose, withHandlers, withProps, mapProps } from 'recompose'
import { createStructuredSelector } from 'reselect'
import classNames from 'classnames'
import get from 'lodash/get'
import PropTypes from 'prop-types'
import debounce from 'lodash/debounce'
import { set } from 'lodash'

import Alert from '../../snippets/Alerts/Alert'
import { PageTitle, PageTitle as DocumentTitle } from '../../core/PageTitle'
import { BreadcrumbContainer } from '../../core/Breadcrumb/BreadcrumbContainer'
import Toolbar from '../../buttons/Toolbar'
import PageRegions from '../PageRegions'
// eslint-disable-next-line import/no-named-as-default
import SearchBar from '../../snippets/SearchBar/SearchBar'
import { FILTER_DELAY } from '../../../constants/time'
import { dataSourceModelsSelector } from '../../../ducks/datasource/selectors'
import { dataRequest } from '../../../ducks/datasource/store'
import { setModel } from '../../../ducks/models/store'
import { usePageRegister } from '../usePageRegister'
import { ModelPrefix } from '../../../core/datasource/const'

function SearchablePage({
    id,
    metadata = {},
    toolbar,
    pageId,
    error,
    regions,
    disabled,
    onSearch,
    searchBar,
    filterValue,
    withToolbar,
    initSearchValue,
    dispatch,
}) {
    const { style, className, datasources, page, breadcrumb } = metadata
    const { title, htmlTitle, datasource, model: modelPrefix } = page
    const searchHandler = useMemo(() => debounce(onSearch, FILTER_DELAY), [onSearch])

    usePageRegister(datasources, dispatch, pageId)

    return (
        
            {error && }
            
            
                
            
            
                
                
                
            
            
                
                
                
            
            
            {withToolbar && (
                
                    
                    
                    
                
            )}
        
    )
}

const mapStateToProps = createStructuredSelector({
    filterModel: (state, { datasource }) => dataSourceModelsSelector(datasource)(state),
})

const enhance = compose(
    withProps(props => ({
        searchBar: get(props, 'metadata.searchBar', {}),
        // fixme убрать || после того как бек поменяет формат данных на новый
        fieldId: get(props, 'metadata.searchBar.fieldId') || get(props, 'metadata.searchModelKey'),
        datasource: get(props, 'metadata.searchBar.datasource') || get(props, 'metadata.searchWidgetId'),
        toolbar: get(props, 'metadata.toolbar', {}),
    })),
    withHandlers({
        onSearch: ({
            dispatch,
            datasource,
            filterModel,
            fieldId,
        }) => (value) => {
            const newModel = { ...filterModel }

            set(newModel, fieldId, value)
            dispatch(setModel(ModelPrefix.filter, datasource, newModel))
            dispatch(dataRequest(datasource))
        },
    }),
    connect(mapStateToProps),
    mapProps(({ filterModel, fieldId, ...rest }) => ({
        ...rest,
        filterValue: get(filterModel, fieldId),
    })),
)

SearchablePage.propTypes = {
    id: PropTypes.string,
    metadata: PropTypes.object,
    toolbar: PropTypes.object,
    pageId: PropTypes.string,
    error: PropTypes.object,
    regions: PropTypes.object,
    disabled: PropTypes.bool,
    onSearch: PropTypes.func,
    dispatch: PropTypes.func,
    searchBar: PropTypes.object,
    filterValue: PropTypes.string,
    withToolbar: PropTypes.bool,
    initSearchValue: PropTypes.string,
}

SearchablePage.defaultProps = {
    toolbar: {},
    searchBar: {},
    withToolbar: true,
}

export { SearchablePage }
export default enhance(SearchablePage)