Class: Bulmacomp::DropdownComponent

Inherits:
ViewComponent::Base
  • Object
show all
Defined in:
app/components/bulmacomp/dropdown_component.rb

Overview

Make an html structure for a bulma dropdown

Examples:

empty dropdown

render Bulmacomp::DropdownComponent.new()

<div class="dropdown">
  <div class="dropdown-trigger">
    <button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
      <span class="icon is-small"><i class="fas fa-angle-down" aria-hidden="true"></i></span>
    </button>
 </div>
 <div class="dropdown-menu" role="menu">
   <div class="dropdown-content"></div>
  </div>
</div>

dropdown with title and elements

render Bulmacomp::DropdownComponent.new(title: 'title', elements: [1,2])

<div class="dropdown">
  <div class="dropdown-trigger">
    <button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
      <span>title</span>
      <span class="icon is-small"><i class="fas fa-angle-down" aria-hidden="true"></i></span>
    </button>
 </div>
 <div class="dropdown-menu" role="menu">
   <div class="dropdown-content">
     <div class="dropdown-item">1</div>
     <div class="dropdown-item">2</div>
   </div>
  </div>
</div>

dropdown with yield, elements and other option

= render Bulmacomp::DropdownComponent.new(title: 'title', elements: [1,2], id: 'menu',
                              button_options: {class: 'button is-success'}, icon: nil) do
  some content

<div class="dropdown">
  <div class="dropdown-trigger">
    <button class="button is-success" aria-haspopup="true" aria-controls="dropdown-menu">
      <span>title</span>
    </button>
 </div>
 <div class="dropdown-menu" role="menu">
   <div class="dropdown-content">
     <div class="dropdown-item">1</div>
     <div class="dropdown-item">2</div>
     some content
   </div>
  </div>
</div>

Instance Method Summary collapse

Constructor Details

#initialize(title: nil, elements: [], icon: default_icon, button_options: {}, **opts) {|optional| ... } ⇒ DropdownComponent

Returns a new instance of DropdownComponent.

Parameters:

  • opts (Hash) —

    options to generate content

Options Hash (**opts):

  • title (String) —

    Content of button, default empty string

  • elements (Array<String>) —

    collection of dropdown-item

  • icon (String) —

    icon span class content for button, default: <i class=“fas fa-angle-down” aria-hidden=“true”></i>

  • button_options (Hash) —

    options for button tag

  • :* (String) —

    each key going as content tag option, default is class: ‘dropdown’

Yields:

  • (optional) —

    dropdown content



72
73
74
75
76
77
78
 
# File 'app/components/bulmacomp/dropdown_component.rb', line 72

def initialize(title: nil, elements: [], icon: default_icon, button_options: {}, **opts)
  @title = tag.span title if title.present?
  @elements = elements
  @icon = tag.span icon, class: "icon is-small" if icon.present?
  @button_options = default_button_options.merge(button_options)
  @opts = default_opts.merge(opts)
end

Instance Method Details

#call ⇒ String

Generated html string for bulma dropdown

Returns:

  • (String) 


97
98
99
 
# File 'app/components/bulmacomp/dropdown_component.rb', line 97

def call
  tag.div safe_join([ tag_trigger, tag_content ]), **@opts
end

#default_button_options ⇒ Object

return [Hash] default option for button tag



91
92
93
 
# File 'app/components/bulmacomp/dropdown_component.rb', line 91

def default_button_options
  { class: "button", aria: { haspopup: "true", controls: "dropdown-menu" } }
end

#default_icon ⇒ String

Returns default content for button icon.

Returns:

  • (String) —

    default content for button icon



81
82
83
 
# File 'app/components/bulmacomp/dropdown_component.rb', line 81

def default_icon
  '<i class="fas fa-angle-down" aria-hidden="true"></i>'.html_safe
end

#default_opts ⇒ Hash

Returns default option for content tag.

Returns:

  • (Hash) —

    default option for content tag



86
87
88
 
# File 'app/components/bulmacomp/dropdown_component.rb', line 86

def default_opts
  { class: "dropdown" }
end

#tag_content ⇒ String

generated html for ‘.dropdown-content’ div. Map each content of elements in a ‘.dropdown-item’ div and add yield content

Returns:

  • (String) 


110
111
112
 
# File 'app/components/bulmacomp/dropdown_component.rb', line 110

def tag_content
  tag.div safe_join([ @elements.map { |e| tag.div(e, class: "dropdown-item") }, content ]), class: "dropdown-content"
end

#tag_trigger ⇒ String

generated html for ‘.dropdown-trigger’ div

Returns:

  • (String) 


103
104
105
 
# File 'app/components/bulmacomp/dropdown_component.rb', line 103

def tag_trigger
  tag.div tag.button(safe_join([ @title, @icon ]), **@button_options), class: "dropdown-trigger"
end