editable.js

import React, { Component } from 'react';
import { cn, NavLink, withRouter, withApollo, gql } from 'olymp';
import { Icon } from 'antd';
import {
  SortableContainer as sortableContainer,
  SortableElement as sortableElement,
  SortableHandle as sortableHandle,
  arrayMove,
} from 'react-sortable-hoc';

// const Handle = sortableHandle(() => <span className="grippy" style={{ zIndex: 1, position: 'absolute', right: 0, top: 'calc(50% - 9px)', width: '15px', height: '100%' }} />);
const Handle = sortableHandle(() =>
  <Icon type="appstore" className="sortHandle" />
);
const Li = sortableElement((props) => {
  const { editable, children, page, location, router, isSubmenu } = props;
  const { query, pathname } = location;
  const navigation = !!query && query.navigation;

  let matches = [];
  page.children.forEach((e) => {
    matches = matches.concat(
      e.children.filter(child => child.id === navigation)
    );
  });
  const visible = navigation === page.id || !!matches.length;

  return (
    <div
      className={cn(
        isSubmenu ? 'dropdown-item' : 'nav-item',
        page.path === pathname ? 'active' : null,
        visible ? 'focus' : null
      )}
    >
      {page.blocks || editable
        ? <NavLink to={page.path || page.slug} className="nav-link">
          {page.name}
        </NavLink>
        : <span
          onClick={() =>
              router.push({ pathname, query: { navigation: page.id } })}
          className="nav-link"
        >
          {page.name}
        </span>}
      {children}
      {editable && !page.noOrdering ? <Handle /> : null}
    </div>
  );
});
const Ul = sortableContainer(
  ({
    axis,
    useDragHandle,
    onSortEnd,
    sortEndCreator,
    hideSortableGhost,
    ...rest
  }) => <div {...rest} />
);

@withRouter
@withApollo
export default class Navbar extends Component {
  onSortEnd = children => ({ oldIndex, newIndex }) => {
    const { client } = this.props;
    const newChildren = arrayMove(children, oldIndex, newIndex);

    client.mutate({
      mutation: gql`
        mutation reorderPages($ids: [String]) {
          reorderPages(ids: $ids) {
            id, order
          }
        }
      `,
      variables: {
        ids: newChildren.map(x => x.id),
      },
      optimisticResponse: {
        __typename: 'Mutation',
        reorderPages: newChildren.map(({ id }, order) => ({ id, order })),
      },
    });
  };

  getMenu = (page, i, isSubmenu) => {
    const { location, editable } = this.props;

    return (
      <Li
        {...this.props}
        page={page}
        isSubmenu={isSubmenu}
        index={i}
        key={page.id}
      >
        {editable || (page.children && page.children.length)
          ? <Ul
            onSortEnd={this.onSortEnd(page.children)}
            sortEndCreator={this.onSortEnd}
            axis="y"
            useDragHandle
            className="dropdown-menu"
          >
            {(page.children || [])
                .map((child, i) => this.getMenu(child, i, true))}
            {editable
                ? <li className="nav-item">
                  <NavLink
                    to={{ ...location, query: { '@new-page': page.id } }}
                    className="nav-link"
                  >
                    <Icon type="plus-circle" />
                  </NavLink>
                </li>
                : null}
          </Ul>
          : null}
      </Li>
    );
  };

  render() {
    const {
      editable,
      router,
      brand,
      fill,
      pages,
      location,
      dark,
      light,
    } = this.props;
    const { query, pathname } = location;
    const navigation = !!query && query.navigation !== undefined; // null/page.id => true, undefined => false

    return (
      <div className="bootstrap">
        <nav
          className={cn(
            'navbar navbar-toggleable-sm',
            { 'navbar-inverse': dark },
            { 'navbar-light': light }
          )}
        >
          {brand
            ? <NavLink to="/" className="navbar-brand">{brand}</NavLink>
            : null}

          <button
            onClick={() =>
              router.push({
                pathname,
                query: { navigation: navigation ? undefined : null },
              })}
            className="navbar-toggler hidden-md-up"
          >
            <span className="navbar-toggler-icon" />
          </button>

          <div
            className={`navbar-collapse${!navigation ? ' hidden-sm-down' : ''}`}
          >
            <Ul
              onSortEnd={this.onSortEnd(pages)}
              sortEndCreator={this.onSortEnd}
              axis="x"
              useDragHandle
              className={cn('navbar-nav', { 'nav-fill': fill })}
            >
              {(pages || []).map((page, i) => this.getMenu(page, i))}
              {editable
                ? <div className="nav-item">
                  <NavLink
                    to={{ ...location, query: { '@new-page': null } }}
                    className="nav-link"
                  >
                    <Icon type="plus-circle" />
                  </NavLink>
                </div>
                : null}
            </Ul>
          </div>
        </nav>
      </div>
    );
  }
}