Как спрятать TagNav на странице профиля в реакции комерции - PullRequest
Новая
       7

Как спрятать TagNav на странице профиля в реакции комерции

0 голосов
/ 27 июня 2018

В responseCommerce я хочу скрыть TagNav в Navbar в компоненте профиля / странице, основываясь на некоторых условиях. Я новичок в реакцииCommerce

1 Ответ

0 голосов
/ 20 июля 2018

Вам нужно переопределить TagNav с помощью API Component Reaction Commerce.

Поскольку вам нужно только настроить способ визуализации компонента, я предлагаю использовать getRawComponent, чтобы получить компонент по умолчанию TagNav для реакции без его HOC, а затем расширить его и заменить на replaceComponent. 

import React from "react";
import { Components, getRawComponent, replaceComponent } from "@reactioncommerce/reaction-components";

const TagNav = getRawComponent("TagNav");

class CustomTagNav extends TagNav {
  /**
   * This implementation of render will override TagNav's default
   */
  render() {
    const { navbarOrientation, navbarPosition, navbarAnchor, navbarVisibility } = this.props;
    
    // Provided that you want to return a whole different component tree if your condition matches
    
    if (yourCondition) {
      return (
        {/* What you want to return if TagNav isn't shown */}
      );
    }
    
    return (
      <div className={`rui tagnav ${navbarOrientation} ${navbarPosition} ${navbarAnchor} ${navbarVisibility}`}>
        <div className="navbar-header">
          <Components.Button
            primary={true}
            icon="times"
            status="default"
            className="close-button"
            onClick={this.props.closeNavbar}
          />
          {this.props.children}
        </div>
        {this.renderShopSelect()}
        <div className="navbar-items">
          <Components.DragDropProvider>
            <Components.TagList
              {...this.props}
              isTagNav={true}
              draggable={true}
              enableNewTagForm={true}
            >
              <div className="dropdown-container">
                <Components.TagGroup
                  {...this.props}
                  editable={this.props.editable === true}
                  tagGroupProps={this.tagGroupProps(this.state.selectedTag || {})}
                  onMove={this.props.onMoveTag}
                  onTagInputBlur={this.handleTagSave}
                  onTagMouseOut={this.handleTagMouseOut}
                  onTagMouseOver={this.handleTagMouseOver}
                  onTagSave={this.handleTagSave}
                />
              </div>
            </Components.TagList>
          </Components.DragDropProvider>
          {this.props.canEdit && this.renderEditButton()}
        </div>
      </div>
    );
  }
}

replaceComponent("TagNav", CustomTagNav);
...