Class: Mayu::VDOM::CSSAttributes

Inherits:
Object
  • Object
show all
Extended by:
T::Sig
Defined in:
lib/mayu/vdom/css_attributes.rb

Constant Summary collapse

UNITLESS_PROPERTIES =

CSS properties which accept numbers but are not in units of "px". Copied from React: https://github.com/facebook/react/blob/a7c57268fb71163e4abb5e386c0d0e63290baaae/packages/react-dom/src/shared/CSSProperty.js

T.let(
  [
    :animation_iteration_count,
    :aspect_ratio,
    :border_image_outset,
    :border_image_slice,
    :border_image_width,
    :box_flex,
    :box_flex_group,
    :box_ordinal_group,
    :column_count,
    :columns,
    :flex,
    :flex_grow,
    :flex_positive,
    :flex_shrink,
    :flex_negative,
    :flex_order,
    :grid_area,
    :grid_row,
    :grid_row_end,
    :grid_row_span,
    :grid_row_start,
    :grid_column,
    :grid_column_end,
    :grid_column_span,
    :grid_column_start,
    :font_weight,
    :line_clamp,
    :line_height,
    :opacity,
    :order,
    :orphans,
    :tab_size,
    :widows,
    :z_index,
    :zoom,
    # SVG-related properties
    :fill_opacity,
    :flood_opacity,
    :stop_opacity,
    :stroke_dasharray,
    :stroke_dashoffset,
    :stroke_miterlimit,
    :stroke_opacity,
    :stroke_width
  ].freeze,
  T::Array[Symbol]
)

Instance Attribute Summary collapse

Instance Method Summary collapse

Constructor Details

#initialize(**properties) ⇒ CSSAttributes

Returns a new instance of CSSAttributes.



69
70
71
 
# File 'lib/mayu/vdom/css_attributes.rb', line 69

def initialize(**properties)
  @properties = properties
end

Instance Attribute Details

#properties ⇒ Object (readonly)

Returns the value of attribute properties.



66
67
68
 
# File 'lib/mayu/vdom/css_attributes.rb', line 66

def properties
  @properties
end

Instance Method Details

#patch(ctx, vnode, other) ⇒ Object 



89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
 
# File 'lib/mayu/vdom/css_attributes.rb', line 89

def patch(ctx, vnode, other)
  (properties.keys | other.properties.keys).sort.each do |property|
    old_value = properties[property]
    new_value = other.properties[property]

    next if old_value == new_value

    unless new_value
      ctx.css(vnode, transform_property(property))
      next
    end

    ctx.css(
      vnode,
      transform_property(property),
      transform_value(property, new_value)
    )
  end
end

#to_s ⇒ Object 



74
75
76
77
78
79
80
81
82
83
84
 
# File 'lib/mayu/vdom/css_attributes.rb', line 74

def to_s
  @properties
    .map do |property, value|
      format(
        "%s:%s;",
        transform_property(property),
        transform_value(property, value)
      )
    end
    .join
end