Class: Primer::OpenProject::TreeView::Node

Inherits:
Component
  • Object
show all
Defined in:
app/components/primer/open_project/tree_view/node.rb

Overview

A generic TreeView node.

This component is part of the <%= link_to_component(Primer::OpenProject::TreeView) %> component and should not be used directly.

Constant Summary collapse

DEFAULT_NODE_VARIANT = 
Primer::OpenProject::TreeView::DEFAULT_NODE_VARIANT
NODE_VARIANT_TAG_MAP = 
{ DEFAULT_NODE_VARIANT => :div, :button => :button, :anchor => :a }.freeze
NODE_VARIANT_TAG_OPTIONS = 
NODE_VARIANT_TAG_MAP.keys.freeze
DEFAULT_SELECT_VARIANT = 
:none
SELECT_VARIANT_OPTIONS = 
[
  :multiple,
  DEFAULT_SELECT_VARIANT
].freeze
DEFAULT_CHECKED_STATE = 
false
CHECKED_STATES = 
[
  DEFAULT_CHECKED_STATE,
  true,
  "mixed"
]

Constants inherited from Component

Component::INVALID_ARIA_LABEL_TAGS

Constants included from Status::Dsl

Status::Dsl::STATUSES

Constants included from ViewHelper

ViewHelper::HELPERS

Constants included from TestSelectorHelper

TestSelectorHelper::TEST_SELECTOR_TAG

Constants included from FetchOrFallbackHelper

FetchOrFallbackHelper::InvalidValueError

Constants included from AttributesHelper

AttributesHelper::PLURAL_ARIA_ATTRIBUTES, AttributesHelper::PLURAL_DATA_ATTRIBUTES

Instance Attribute Summary collapse

Instance Method Summary collapse

Methods inherited from Component

deprecated?, generate_id

Methods included from JoinStyleArgumentsHelper

#join_style_arguments

Methods included from TestSelectorHelper

#add_test_selector

Methods included from FetchOrFallbackHelper

#fetch_or_fallback, #fetch_or_fallback_boolean, #silence_deprecations?

Methods included from ClassNameHelper

#class_names

Methods included from AttributesHelper

#aria, #data, #extract_data, #merge_aria, #merge_data, #merge_prefixed_attribute_hashes

Methods included from ExperimentalSlotHelpers

included

Methods included from ExperimentalRenderHelpers

included

Constructor Details

#initialize(path:, node_variant:, href: nil, current: false, select_variant: DEFAULT_SELECT_VARIANT, checked: DEFAULT_CHECKED_STATE, **content_arguments) ⇒ Node

Returns a new instance of Node.

Parameters:

  • path (Array<String>) —

    The node’s “path,” i.e. this node’s label and the labels of all its ancestors. This node should be reachable by traversing the tree following this path.

  • node_variant (Symbol) —

    The node variant to use for the node’s content, i.e. the :button or :div. <%= one_of(Primer::OpenProject::TreeView::NODE_VARIANT_OPTIONS) %>

  • href (String) (defaults to: nil) —

    The URL to use as the href attribute for this node. If set to a truthy value, the tag: parameter is ignored and assumed to be :a.

  • current (Boolean) (defaults to: false) —

    Whether or not this node is the current node. The current node is styled differently than regular nodes and is the first element that receives focus when tabbing to the TreeView component.

  • select_variant (Symbol) (defaults to: DEFAULT_SELECT_VARIANT) —

    Controls the type of checkbox that appears. <%= one_of(Primer::OpenProject::TreeView::Node::SELECT_VARIANT_OPTIONS) %>

  • checked (Boolean | String) (defaults to: DEFAULT_CHECKED_STATE) —

    The checked state of the node’s checkbox. <%= one_of(Primer::OpenProject::TreeView::Node::CHECKED_STATES) %>

  • content_arguments (Hash) —

    Arguments attached to the node’s content, i.e the ‘<button>` or `<a>` element. <%= link_to_system_arguments_docs %>



71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
 
# File 'app/components/primer/open_project/tree_view/node.rb', line 71

def initialize(
  path:,
  node_variant:,
  href: nil,
  current: false,
  select_variant: DEFAULT_SELECT_VARIANT,
  checked: DEFAULT_CHECKED_STATE,
  **content_arguments
)
  @system_arguments = {
    tag: :li,
    role: :none,
    classes: "TreeViewItem"
  }

  @content_arguments = content_arguments

  @path = path
  @current = current
  @select_variant = fetch_or_fallback(SELECT_VARIANT_OPTIONS, select_variant, DEFAULT_SELECT_VARIANT)
  @checked = fetch_or_fallback(CHECKED_STATES, checked, DEFAULT_CHECKED_STATE)
  @node_variant = fetch_or_fallback(NODE_VARIANT_TAG_OPTIONS, node_variant, DEFAULT_NODE_VARIANT)

  @content_arguments[:tag] = NODE_VARIANT_TAG_MAP[@node_variant]
  @content_arguments[:href] = href if href
  @content_arguments[:id] = content_id
  @content_arguments[:role] = :treeitem
  @content_arguments[:tabindex] = current? ? 0 : -1
  @content_arguments[:classes] = class_names(
    @content_arguments.delete(:classes),
    "TreeViewItemContent"
  )

  @content_arguments[:aria] = merge_aria(
    @content_arguments, {
      aria: {
        level: level,
        selected: false,
        checked: checked,
        labelledby: content_id
      }
    }
  )

  @content_arguments[:data] = merge_data(
    @content_arguments,
    { data: { path: @path.to_json } }
  )

  return unless current?

  @content_arguments[:aria] = merge_aria(
    @content_arguments,
    { aria: { current: true } }
  )
end

Instance Attribute Details

#checked ⇒ String (readonly)

This node’s checked state.

Returns:

  • (String) 


39
40
41
 
# File 'app/components/primer/open_project/tree_view/node.rb', line 39

def checked
  @checked
end

#current ⇒ Boolean (readonly) Also known as: current?

Wether or not this node is the current node.

Returns:

  • (Boolean) 


33
34
35
 
# File 'app/components/primer/open_project/tree_view/node.rb', line 33

def current
  @current
end

#node_variant ⇒ Symbol (readonly)

This node’s variant, eg. :button, :div, etc.

Returns:

  • (Symbol) 


49
50
51
 
# File 'app/components/primer/open_project/tree_view/node.rb', line 49

def node_variant
  @node_variant
end

#select_variant ⇒ Symbol (readonly)

This node’s select variant (i.e. check box variant).

Returns:

  • (Symbol) 


44
45
46
 
# File 'app/components/primer/open_project/tree_view/node.rb', line 44

def select_variant
  @select_variant
end

Instance Method Details

#level ⇒ Integer

The numeric depth of this node.

Returns:

  • (Integer) —

    This node’s depth.



131
132
133
 
# File 'app/components/primer/open_project/tree_view/node.rb', line 131

def level
  @level ||= @path.size
end

#merge_system_arguments!(**other_arguments) ⇒ Object

Merges the given arguments into the current hash of system arguments provided when the component was initially constructed. This method can be used to add additional arguments just before rendering.

Parameters:

  • other_arguments (Hash) —

    The other hash of system arguments to merge into the current one.



139
140
141
142
143
144
145
146
147
148
149
150
151
 
# File 'app/components/primer/open_project/tree_view/node.rb', line 139

def merge_system_arguments!(**other_arguments)
  @content_arguments[:aria] = merge_aria(
    @content_arguments,
    other_arguments
  )

  @content_arguments[:data] = merge_data(
    @content_arguments,
    other_arguments
  )

  @content_arguments.merge!(**other_arguments)
end