Created
July 21, 2022 11:02
-
-
Save alvincrespo/a5d3258cc899f3d39c129123b338733a to your computer and use it in GitHub Desktop.
TailwindUI + will_paginate renderer
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
module ApplicationHelper | |
def will_paginate(coll_or_options = nil, options = {}) | |
if coll_or_options.is_a? Hash | |
options = coll_or_options | |
coll_or_options = nil | |
end | |
options = options.merge renderer: TailwindUIPaginationRenderer unless options[:renderer] | |
super(*[coll_or_options, options].compact) | |
end | |
end |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<span class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium"> | |
… | |
</span> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<% if page %> | |
<a href="<%= target %>" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"> | |
<%= text %> | |
</a> | |
<% else %> | |
<span class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 bg-dark-blue near-white"> | |
<%= text %> | |
</span> | |
<% end %> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<% if page == current_page %> | |
<span class="z-10 bg-indigo-50 border-indigo-500 text-indigo-600 relative inline-flex items-center px-4 py-2 border text-sm font-medium"><%= page %></span> | |
<% else %> | |
<a href="<%= target %>" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium"><%= page %></a> | |
<% end %> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<% if page %> | |
<a href="<%= target %>" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"> | |
<%= text %> | |
</a> | |
<% else %> | |
<span class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 bg-dark-blue near-white"> | |
<%= text %> | |
</span> | |
<% end %> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
module.exports = { | |
content: [ | |
'./app/views/**/*.html.erb', | |
'./app/components/**/*.html.erb', | |
'./app/helpers/**/*.rb', | |
'./config/initializers/*.rb', | |
'./app/javascript/**/*.js' | |
] | |
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
require 'will_paginate/view_helpers/link_renderer' | |
require 'will_paginate/view_helpers/action_view' | |
# https://github.com/mislav/will_paginate/blob/v3.3.1/lib/will_paginate/view_helpers/link_renderer.rb | |
class TailwindUIPaginationRenderer < WillPaginate::ActionView::LinkRenderer | |
CLASSES = { container: 'relative z-0 inline-flex rounded-md shadow-sm -space-x-px' }.freeze | |
def container_attributes | |
{ class: CLASSES[:container] } | |
end | |
def page_number(page) | |
render('will_paginate/page_number', | |
{ locals: { page: page, current_page: current_page, classes: CLASSES, | |
target: url(page) } }) | |
end | |
def gap | |
render('will_paginate/gap') | |
end | |
def previous_page | |
num = @collection.current_page > 1 && (@collection.current_page - 1) | |
render('will_paginate/previous', | |
{ locals: { page: num, target: url(num), text: @options[:previous_label] } }) | |
end | |
def next_page | |
num = @collection.current_page < total_pages && (@collection.current_page + 1) | |
render('will_paginate/next', | |
{ locals: { page: num, target: url(num), text: @options[:next_label] } }) | |
end | |
private | |
def render(template, options = {}) | |
# Setting layout to false bypasses Warden | |
# ref: https://github.com/heartcombo/devise/issues/4271#issuecomment-704182728 | |
ApplicationController.render({ template: template, layout: false }.merge(options)) | |
end | |
end |
I confirm, it's been useful, thanks a lot for sharing this gist!
Great job, Thanks.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Still a WIP but hopefully someone out there will find this useful 😄