Class: Keystone::Ui::FileUploadComponent

Inherits:
ViewComponent::Base
  • Object
show all
Defined in:
app/components/keystone/ui/file_upload_component.rb

Constant Summary collapse

WRAPPER_CLASSES = 
"space-y-1"
LABEL_CLASSES = 
"block text-sm font-medium text-gray-700 dark:text-gray-300"
DROP_ZONE_CLASSES = 
"mt-1 flex justify-center rounded-md border-2 border-dashed border-gray-300 px-6 py-8 cursor-pointer dark:border-zinc-600 transition-colors"
DROP_ZONE_ACTIVE_CLASSES = 
"border-accent-500 bg-accent-50 dark:bg-accent-900/10"
DROP_ZONE_INNER_CLASSES = 
"space-y-2 text-center"
ICON_CLASSES = 
"mx-auto h-10 w-10 text-gray-400 dark:text-gray-500"
PROMPT_CLASSES = 
"text-sm text-gray-600 dark:text-gray-400"
BROWSE_CLASSES = 
"font-semibold text-accent-600 hover:text-accent-500 dark:text-accent-400 dark:hover:text-accent-300"
HINT_CLASSES = 
"mt-1 text-xs text-gray-500 dark:text-gray-400"
FILE_NAME_CLASSES = 
"mt-2 text-sm text-gray-700 dark:text-gray-300 truncate"
FILE_INPUT_CLASSES = 
"sr-only"
UPLOAD_ICON = 
<<~SVG.freeze
  <svg class="#{ICON_CLASSES}" stroke="currentColor" fill="none" viewBox="0 0 48 48" aria-hidden="true">
    <path d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
  </svg>
SVG

Instance Method Summary collapse

Constructor Details

#initialize(name:, label: nil, accept: nil, multiple: false, hint: nil) ⇒ FileUploadComponent

Returns a new instance of FileUploadComponent.



24
25
26
27
28
29
30
 
# File 'app/components/keystone/ui/file_upload_component.rb', line 24

def initialize(name:, label: nil, accept: nil, multiple: false, hint: nil)
  @name = name
  @label = label
  @accept = accept
  @multiple = multiple
  @hint = hint
end

Instance Method Details

#accept ⇒ Object 



40
41
42
 
# File 'app/components/keystone/ui/file_upload_component.rb', line 40

def accept
  @accept
end

#drop_zone_data ⇒ Object 



64
65
66
 
# File 'app/components/keystone/ui/file_upload_component.rb', line 64

def drop_zone_data
  { "file-upload-target": "dropZone" }
end

#hint? ⇒ Boolean

Returns:

  • (Boolean) 


48
49
50
 
# File 'app/components/keystone/ui/file_upload_component.rb', line 48

def hint?
  !@hint.nil?
end

#hint_text ⇒ Object 



52
53
54
 
# File 'app/components/keystone/ui/file_upload_component.rb', line 52

def hint_text
  @hint
end

#input_data ⇒ Object 



68
69
70
 
# File 'app/components/keystone/ui/file_upload_component.rb', line 68

def input_data
  { "file-upload-target": "input", action: "change->file-upload#select" }
end

#input_name ⇒ Object 



32
33
34
 
# File 'app/components/keystone/ui/file_upload_component.rb', line 32

def input_name
  @name
end

#label_text ⇒ Object 



36
37
38
 
# File 'app/components/keystone/ui/file_upload_component.rb', line 36

def label_text
  @label || "Choose file"
end

#multiple? ⇒ Boolean

Returns:

  • (Boolean) 


44
45
46
 
# File 'app/components/keystone/ui/file_upload_component.rb', line 44

def multiple?
  @multiple
end

#prompt_text ⇒ Object 



56
57
58
 
# File 'app/components/keystone/ui/file_upload_component.rb', line 56

def prompt_text
  multiple? ? "Drop files here or" : "Drop file here or"
end

#tag_options ⇒ Object 



72
73
74
75
76
77
78
79
80
81
82
 
# File 'app/components/keystone/ui/file_upload_component.rb', line 72

def tag_options
  options = {
    type: "file",
    name: @name,
    class: FILE_INPUT_CLASSES,
    data: { "file-upload-target": "input", action: "change->file-upload#select" }
  }
  options[:accept] = @accept if @accept
  options[:multiple] = true if @multiple
  options
end

#wrapper_data ⇒ Object 



60
61
62
 
# File 'app/components/keystone/ui/file_upload_component.rb', line 60

def wrapper_data
  { controller: "file-upload" }
end