gaiety/sortable-recipes
1
0
Fork 0
Code Activity

Refactored how actions were passed

Browse source
This commit is contained in:
Ava Wroten 2020-03-05 10:21:52 -06:00
parent 450d8b4036
commit d30bf89db3
3 changed files with 16 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
ember-ui/app/components/meal-item.hbs
View file

@ -1,4 +1,5 @@
<LinkTo <LinkTo
{{on 'focus' @handleFocus}}
{{on 'blur' @handleBlur}} {{on 'blur' @handleBlur}}
@route="meal" @route="meal"
@model={{@meal}} @model={{@meal}}

11
ember-ui/app/components/meal-list.hbs
View file

@ -1,6 +1,6 @@
<SortableGroupAccessible <SortableGroupAccessible
@models={{this.sortedItems}} @models={{this.sortedItems}}
as |groupHasFocus selectedIndex orderItemDown orderItemUp handleBlur|> as |groupHasFocus selectedIndex groupActions|>
<SortableGroup <SortableGroup
@onChange={{action this.reorderMeals}} @onChange={{action this.reorderMeals}}
as |group|> as |group|>
@ -9,16 +9,17 @@
@groupHasFocus={{groupHasFocus}} @groupHasFocus={{groupHasFocus}}
@currentIndex={{index}} @currentIndex={{index}}
@selectedIndex={{selectedIndex}} @selectedIndex={{selectedIndex}}
@orderItemDown={{orderItemDown}} @orderItemDown={{groupActions.orderItemDown}}
@orderItemUp={{orderItemUp}} @orderItemUp={{groupActions.orderItemUp}}
@handleBlur={{handleBlur}}> @handleBlur={{groupActions.handleBlur}}>
<SortableItem <SortableItem
@model={{meal}} @model={{meal}}
@group={{group}} @group={{group}}
data-test-id="meal-item"> data-test-id="meal-item">
<MealItem <MealItem
@meal={{meal}} @meal={{meal}}
@handleBlur={{handleBlur}} @handleFocus={{groupActions.handleFocus}}
@handleBlur={{groupActions.handleBlur}}
/> />
</SortableItem> </SortableItem>
</SortableItemAccessible> </SortableItemAccessible>

10
ember-ui/app/components/sortable-group-accessible.hbs
View file

@ -8,5 +8,13 @@
{{key-down this.preventDefault key='ArrowDown'}} {{key-down this.preventDefault key='ArrowDown'}}
tabindex="0" tabindex="0"
class="shadow-md bg-gray-200 outline-none border border-gray-400 focus:border-teal-400 focus:shadow-lg"> class="shadow-md bg-gray-200 outline-none border border-gray-400 focus:border-teal-400 focus:shadow-lg">
{{yield this.groupHasFocus this.selectedIndex (action 'orderItemDown') (action 'orderItemUp') (action 'handleBlur')}} {{yield
this.groupHasFocus
this.selectedIndex
(hash
orderItemDown=(action 'orderItemDown')
orderItemUp=(action 'orderItemUp')
handleFocus=(action 'handleFocus')
handleBlur=(action 'handleBlur')
)}}
</div> </div>