rx/presenters

require_relative '../helpers/indented_grid'

Voom::Presenters.define(:text_fields) do
  helpers Demo::Helpers::IndentedGrid
  attach :top_nav
  attach :component_drawer
  page_title 'Text Fields'

  indented_grid do
    headline 'Text'

    text_field name: :text do
      label 'Text...'
    end

    title 'Restricted Input'
    grid do
      column 3 do
        text_field name: :password, password: true do
          label 'Password'
        end
      end
      column 3 do
        text_field name: :upper, case_type: :upper do
          label 'Upper Only'
        end
      end
      column 3 do
        text_field name: :lower, case_type: :lower do
          label 'Lower Only'
        end
      end
    end

    headline 'Numeric'
    # Client side validation with hints
    title 'With Hints'
    text_field name: :numeric do
      label 'Number...'
      pattern /-?[0-9]*(\.[0-9]+)?/
      hint 'Input should be a number!'
    end

    title 'With Leading Icon'
    text_field name: :numeric do
      label 'Amount'
      icon :attach_money, position: :left
    end

    title 'With Trailing Icon'
    text_field name: :numeric do
      label 'Name'
      icon :remove_red_eye
    end

    blank
    card do
      headline 'Client Side Validations'
      body 'This demonstrates client side validations for text fields '
      text_field id: :my_required_field, name: :field1, required: true do
        label 'Data to post'
        hint 'Hint: You must enter a valid number in the field above'
        validation_error 'This is a custom validation error. This field is required and must be a number.'
        pattern /-?[0-9]*(\.[0-9]+)?/
      end
      text_field name: :field2, required: true do
        label 'More data to post'
      end
      button 'Submit' do
        event :click do
          posts '/_echo_'
          snackbar 'Posted to _echo_'
        end
      end
    end

    blank
    card do
      headline 'Field Level Events'
      title 'Text Fields'
      body 'This demonstrates that a change event will submit the field value to the event action. '\
                 'This works with posts and replace actions'
      text_field name: :myfield do
        label 'Data to post'
        event :change do
          replaces :context_list, :context_list
        end
      end
      attach :context_list
    end

    blank
    card do
      form do
        headline 'Form Level Events'
        title 'Array of Text Fields'
        text_field name: 'myfield[]' do
          label 'Data to post'
        end
        text_field name: 'myfield[]' do
          label 'More data to post'
        end
        button 'Submit' do
          event :click do
            posts '/_echo_'
            snackbar 'Posted to _echo_'
          end
        end
      end
    end

    attach :code, file: __FILE__
  end
end