how to use it with formotion rubymotion?

[gaurav6192]

i want to change the style of a row in formotion rubymotion. Is pixate compatible with formotion yet? How to do it?

[pcolton]

As long as you can set a styleId or styleClass to any view, you should be able to style it.

[davidacji]

I want all forms look the same or customize specific rows, headers or footers if i want.

I'm working currently in this. I would appreciate any suggestions.

app/extensions/formotion/form_controller.rb

 module Formotion
  class Form < Formotion::Base

    # Usage:
    # @form = Formotion::Form.new(
    #{
    #    # No style: Final class  => 'formotion-form'
    #    style: {
    #        id: 'my-example-form',
    #        class: 'my-form-class' # Not override: Final class  => 'formotion-form my-form-class'
    #    },
    #    sections: [
    #        {
    #            title: 'Title Text',
    #            footer: 'Footer Text',
    #            # No style: Final header class  => 'header' No id
    #            # No style: Final footer class  => 'footer' No id
    #            style: {
    #                header: {
    #                    id: 'my-section-header',
    #                    class: 'my-section-header-class'
    #                },
    #                footer: {
    #                    id: 'my-section-footer',
    #                    class: 'my-section-footer-class' # Not override: Final class  => 'footer my-section-footer-class'
    #                }
    #            },
    #            rows: [
    #                {
    #                    title: 'Name',
    #                    key: :name,
    #                    type: :string,
    #                    style: {
    #                        id: 'my-name-id',
    #                        class: 'my-row-custom-class',
    #                        override_class: true # Override: Final class => 'my-row-custom-class'
    #                    }
    #                },
    #                {
    #                    title: 'Last Name',
    #                    key: :last_name,
    #                    type: :string,
    #                    style: {
    #                        id: 'my-last-name-id',
    #                        # No class => Final class 'row string'
    #                    }
    #                },
    #                {
    #                    title: 'Email',
    #                    key: :email,
    #                    placeholder: '[email protected]',
    #                    type: :email,
    #                    style: {
    #                        override_class: true
    #                        # No class with override class => Final class ''
    #                    }
    #                },
    #                {
    #                    title: 'Address',
    #                    key: :address,
    #                    type: :text,
    #                    # No style: Final class  => 'row text', no id
    #                }
    #            ]
    #        }, {
    #            rows: [
    #                {
    #                    title: 'Submit',
    #                    type: :submit,
    #                    style: {
    #                        id: 'my-submit-id',
    #                        class: 'my-submit-custom-class' # Not override: Final class  => 'row submit my-submit-custom-class'
    #                    }
    #                }
    #
    #            ]
    #        }
    #    ]
    #}
    def tableView(tableView, willDisplayCell: cell, forRowAtIndexPath: indexPath)
      tableView.styleClass ||= style_class('formotion-form')
      tableView.styleId ||= style_id
      sect = sections[indexPath.section]
      row = sect.rows[indexPath.row]
      cell.styleId = row.style_id
      cell.styleClass = row.style_class("row #{row.type}")
      cell.updateStyles
    end

    def tableView(tableView, willDisplayHeaderView: view, forSection: section)
      sect = sections[section]
      view.styleClass = sect.header_style_class('header')
      view.styleId = sect.header_style_id
    end

    def tableView(tableView, willDisplayFooterView: view, forSection: section)
      sect = sections[section]
      view.styleClass = sect.footer_style_class('footer')
      view.styleId = sect.footer_style_id
    end

  end
end

module FormotionPixateStylizable

  def style_class(default_class = nil, style_props = nil)
    style_props ||= style || {}
    style_props[:override_class] ? style_props[:class] : "#{default_class} #{style_props[:class]}"
  end

  def style_id(style_props = nil)
    style_props ||= style || {}
    style_props[:id] if style_props
  end

end

module FormotionSectionPixateStylizable

  def header_style
    style[:header] || {}
  end

  def footer_style
    style[:footer]
  end

  def footer_style_id
    footer_style[:id]
  end

  def header_style_id
    header_style[:id]
  end

  def header_style_class(default_class=nil)
    style_class(default_class, header_style)
  end

  def footer_style_class(default_class=nil)
    style_class(default_class, footer_style)
  end

end

[Formotion::Form, Formotion::Section, Formotion::Row].each do |class_name|
  class_name.class_eval do
    _ADDITIONS = :style
    class_name.const_get('PROPERTIES').push *_ADDITIONS
    attr_accessor *_ADDITIONS
    class_name.const_get('SERIALIZE_PROPERTIES').push *_ADDITIONS
    include FormotionPixateStylizable
  end
end

Formotion::Section.class_eval do
  include FormotionSectionPixateStylizable
end

Add your desired style

sass/default.scss

//All forms
.formotion-form {

  .header {

    label {

    }
  }

  .footer {
    label {

    }

  }

  .row {

    label:first-child {

    }

  }

  .submit {

    label:first-child {

    }
  }

  .string {

    label {

    }
  }
}

//Custom some forms

#my-example-form {

  .my-section-header-class {

  }

}

.my-form-class {

}

Mostly thanks to this clayallsopp/formotion#32 (comment) and this https://github.com/clayallsopp/formotion/wiki/Pixate-support-style_class-and-style_id-for-rows