serp-doc-react.js

import data from '../../data'
import createHistory from 'history/createBrowserHistory'
import React from 'react'
import {decl} from 'bem-react-core'
import Content from 'b:Content'
import NavBar from 'b:NavBar'

export default decl({
    block: 'Doc',
    willInit (props) {
        let level, groupName, blockName, propertyStack

        if (!level) {
            level = 'touch'
        }

        if (!groupName) {
            groupName = data.getGroupName({
                groupIndex: 0
            })
        }

        if (!blockName) {
            blockName = data.getBlockName({
                level: level,
                groupName: groupName,
                blockIndex: 0,
            })
        }

        if (!propertyStack) {
            propertyStack = []
        }

        this.onNavBarChange = this.onNavBarChange.bind(this)
        this.getBlockData = this.getBlockData.bind(this)
        this.onScopeKeyClick = this.onScopeKeyClick.bind(this)

        this._history = createHistory({
            hashType: 'noslash',
            basename: '/',
        })

        this._history.listen((location, action) => {
            if (location.state) {
                let state = {
                    groupName: location.state.groupName,
                    blockName: location.state.blockName,
                    level: location.state.level,
                    propertyStack: location.state.propertyStack,
                }

                if (this.state) {
                    this.setState(state)
                } else {
                    this.state = state
                }
            }
        })

        this.setLocation({
            groupName: groupName,
            blockName: blockName,
            level: level,
            propertyStack: propertyStack,
        })
    },
    content (props) {
        return [
            <NavBar
                key="n"
                onChange={this.onNavBarChange}
                activeGroup={this.state.groupName}
                activeItem={this.state.blockName}
                itemsByGroup={
                    data.getBlockNamesByGroup({
                        level: this.state.level
                    })
                }
            />,
            <Content
                key="c"
                blockName={this.state.blockName}
                getBlockData={this.getBlockData}
                onScopeKeyClick={this.onScopeKeyClick}
                propertyStack={this.state.propertyStack}
            />,
        ]
    },
    setLocation ({level, groupName, blockName, propertyStack}) {
        if (level === undefined) level = this.state.level
        if (groupName === undefined) groupName = this.state.groupName
        if (blockName === undefined) blockName = this.state.blockName
        if (propertyStack === undefined) propertyStack = this.state.propertyStack

        this._history.push(`/${level}/${groupName}/${blockName}/${propertyStack.join('/')}`, {
            groupName: groupName,
            blockName: blockName,
            level: level,
            propertyStack: propertyStack,
        })
    },
    onNavBarChange ({item, group}) {
        this.setLocation({
            groupName: group,
            blockName: item,
        })
    },
    getBlockData ({blockName, typeName}) {
        return data.getBlock({
            blockName,
            typeName,
            level: this.state.level,
        })
    },
    onScopeKeyClick ({propertyStack}) {
        this.setLocation({
            propertyStack: propertyStack,
        })
    }
})