Class: Shadcn::MessageScroller::Button::Component

Inherits:
Button::Component show all
Defined in:
app/components/shadcn/message_scroller/button/component.rb

Overview

The floating "jump to the end" control, and its start-side twin.

A Button with different defaults — secondary, icon-sm — plus the positioning and the transition, so it subclasses rather than being declared with part … from:, which restamps the slot and leaves the arguments alone.

data-active is the controller's to write and decides everything visible: the button is not hidden when there is nowhere to scroll, it is scaled, faded and pushed off its edge, with a slower easing on the way out than on the way in. Rendered false so it starts out of sight without a frame of flicker before the controller connects.

Constant Summary

Constants inherited from ApplicationViewComponent

ApplicationViewComponent::CONTENTS_STYLE, ApplicationViewComponent::VOID_TAGS

Instance Attribute Summary collapse

Attributes inherited from Button::Component

#size, #variant

Attributes inherited from ApplicationViewComponent

#attributes

Instance Method Summary collapse

Methods inherited from Button::Component

#style_variants, variant_classes

Methods inherited from ApplicationViewComponent

#css_classes, default_tag, #merged_style, #render_element, #shadcn_t, slot_name, #style_variants, #tag_name

Constructor Details

#initialize(direction: :end, variant: :secondary, size: :"icon-sm", **attributes) ⇒ Component

Returns a new instance of Component.



42
43
44
45
 
# File 'app/components/shadcn/message_scroller/button/component.rb', line 42

def initialize(direction: :end, variant: :secondary, size: :"icon-sm", **attributes)
  @direction = direction&.to_sym || :end
  super(variant:, size:, **attributes)
end

Instance Attribute Details

#direction ⇒ Object (readonly)

Returns the value of attribute direction.



40
41
42
 
# File 'app/components/shadcn/message_scroller/button/component.rb', line 40

def direction
  @direction
end

Instance Method Details

#call ⇒ Object

The chevron and its name. Upstream renders one arrow and rotates it for the start direction (message-scroller.tsx:108-115), which is why there is one icon here and a rotate-180 in the classes above.



64
65
66
67
68
69
70
71
72
73
74
 
# File 'app/components/shadcn/message_scroller/button/component.rb', line 64

def call
  return render_element(body: content) if content.present?

  render_element(
    body: safe_join([
      render(Shadcn::Icon::Component.new("chevron-down")),
      tag.span(shadcn_t("message_scroller.#{direction == :end ? 'scroll_to_end' : 'scroll_to_start'}"),
               class: "sr-only")
    ])
  )
end

#element_attributes(**defaults) ⇒ Object 



47
48
49
50
51
52
53
54
55
56
57
58
59
 
# File 'app/components/shadcn/message_scroller/button/component.rb', line 47

def element_attributes(**defaults)
  super(**{
    "data-direction" => direction,
    "data-active" => "false",
    # Out of the tab order while there is nowhere to scroll, as the
    # primitive does (components.tsx:400). It is invisible and
    # `pointer-events-none` in that state, so leaving it tabbable would
    # give a keyboard a stop that a pointer does not have.
    tabindex: -1,
    "data-shadcn--message-scroller-target" => "button",
    "data-action" => "shadcn--message-scroller#jump"
  }.merge(defaults))
end