Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

List: Sortable list interactions update #1541

Merged
merged 15 commits into from
Aug 23, 2022
Merged

List: Sortable list interactions update #1541

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
7bd6207
style(list): update sortable interaction styles
philschanely Aug 1, 2022
7e3d76f
feat(list): update list interaction (rails)
philschanely Aug 1, 2022
b15e6b3
feat(list): update list interaction (react)
philschanely Aug 1, 2022
415e4f5
style(lists): ensure older lists styles don't conflict with new list
philschanely Aug 1, 2022
e9c76d7
feat(list): wip adding advanced drag features
philschanely Aug 12, 2022
86c23e8
chore(list): convert button handle back to just icon
philschanely Aug 15, 2022
6b6f0ff
feat(list): add fallback and improved documentation
philschanely Aug 16, 2022
27237c5
feat(lsit): cleanup
philschanely Aug 17, 2022
9cc8253
feat(list): remove `hide_first_border` property that is no longer needed
philschanely Aug 17, 2022
c98ad63
chore(list): clean up linting and documentation exception
philschanely Aug 17, 2022
608e608
chore(list): clean up from feedback
philschanely Aug 18, 2022
f2f43db
feat(list): adjust handle affordance for clarity
philschanely Aug 22, 2022
d677c8a
chore: lint
philschanely Aug 22, 2022
14c6be0
chore(list): clean up from feedback
philschanely Aug 23, 2022
62c7bf1
chore: adjust from feedback
philschanely Aug 23, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions docs/app/views/examples/components/list/_preview.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,10 +88,10 @@ that will be called after the user finishes sorting an item.
} %>

<h3 class="<%= SageClassnames::TYPE::HEADING_6 %>">Fully draggable row</h3>
<%= md("
<%= md('
By default only the drag handle is active for dragging/sorting a row.
However, `draggable_anywhere` can be set to `true` in order to allow the whole row to be draggable instead.
", use_sage_type: true) %>
However, `drag_handle_type` can be set to `"row"` in order to allow the whole row to be draggable instead.
', use_sage_type: true) %>

<%= sage_component SageList, {
sortable: true,
Expand Down
9 changes: 6 additions & 3 deletions docs/lib/sage_rails/app/views/sage_components/_sage_list.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,16 @@
<%
tag = component.tag.present? ? component.tag : "ul"
drag_handle_type = component.tag.present? ? component.tag : "default"
tag = component.sortable ? "ol" : "ul"
if component.tag.present?
ju-Skinner marked this conversation as resolved.
Show resolved Hide resolved
tag = component.tag
end
drag_handle_type = component.drag_handle_type.present? ? component.drag_handle_type : "default"
%>
<<%= tag %>
class="
sage-list
<%= component.generated_css_classes %>
<%= "sage-list--sortable" if component.sortable %>
<%= "sage-list--draggable-by-row" if component.drag_handle_type == "row" %>
<%= "sage-list--draggable-by-row" if drag_handle_type == "row" %>
"
<%= "data-js-list-sortable=#{component.sortable_resource}" if component.sortable_resource.present? %>
<%= component.generated_html_attributes.html_safe %>
Expand Down
15 changes: 9 additions & 6 deletions packages/sage-react/lib/List/List.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,10 @@ export const List = ({
);
};

const Tag = tag;
let Tag = sortable ? 'ol' : 'ul';
if (tag) {
Tag = tag;
}

return sortable ? (
<ReactSortable
Expand Down Expand Up @@ -91,13 +94,13 @@ List.defaultProps = {
children: null,
className: null,
items: [],
itemRenderer: null,
itemRenderer: () => null,
dragHandleType: List.DRAG_HANDLE_TYPES.DEFAULT,
onEnd: null,
onStart: null,
setList: null,
onEnd: () => null,
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this is the equivalent to what you had before...you can do one of two things

  1. () => {} // returns undefined <- this is common
  2. () => ( undefined ) // explicitly returns undefined

onStart: () => null,
setList: () => [],
sortable: false,
tag: 'ul',
tag: null,
};

List.propTypes = {
Expand Down