CODEWITHSUNDEEP
reactjsreactive-programmingreaction-commerce
Anish
Anish

Reputation: 391

How to hide TagNav in profile page in reactioncommerce

In reactionCommerce I want to hide TagNav in Navbar in profile component/page based on some condition. I am new into reactionCommerce

Upvotes: 1

Views: 35

Answers (1)

Loan Laux
Loan Laux

Reputation: 71

You need to override TagNav using Reaction Commerce's Component API.

Since you only want to customize the way the component is rendered, I suggest using getRawComponent to get Reaction's default TagNav component without its HOCs, then extending it and replacing it using 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);

Upvotes: 1

Related Questions