104 lines
3.6 KiB
JavaScript
104 lines
3.6 KiB
JavaScript
import React, { useState } from 'react'
|
|
//components
|
|
import ModalAddItem from '../../modals/groceries/ModalAddItem'
|
|
import ModalAddList from '../../modals/groceries/ModalAddList'
|
|
//styles
|
|
import { WrapperButtons, WrapperAddItem, WrapperAddList, WrapperRemove, WrapperSelect, PlusIcon, MenuIcon, RemoveIcon, CheckIcon, ListIcon } from './styles/buttons'
|
|
//redux
|
|
import { useSelector, useDispatch } from 'react-redux'
|
|
import { itemsRemoved, checkAll } from '../../../redux/slices/groceryList/itemsSlice'
|
|
import { selectOpenListId } from '../../../redux/slices/groceryList/listsSlice'
|
|
import { Alert, LayoutAnimation, Platform, UIManager } from 'react-native'
|
|
|
|
if (
|
|
Platform.OS === "android" &&
|
|
UIManager.setLayoutAnimationEnabledExperimental
|
|
) {
|
|
UIManager.setLayoutAnimationEnabledExperimental(true);
|
|
}
|
|
|
|
const SelectAllItemsButton = (props) => {
|
|
const dispatch = useDispatch()
|
|
const listId = useSelector(selectOpenListId)
|
|
const [toggleAnim, setToggleAnim] = useState(false)
|
|
const handlePress = () => {
|
|
listId && dispatch(checkAll(listId));
|
|
listId && setToggleAnim(!toggleAnim)
|
|
}
|
|
return (
|
|
<WrapperSelect toggle={toggleAnim} visible={props.visible} onPress={handlePress}>
|
|
<CheckIcon />
|
|
</WrapperSelect>
|
|
)
|
|
}
|
|
const RemoveItemsButton = (props) => {
|
|
const dispatch = useDispatch()
|
|
const [toggleAnim, setToggleAnim] = useState(false)
|
|
const handlePress = () => {
|
|
Alert.alert(
|
|
"Warning",
|
|
"Are you sure you want to remove the selected items?",
|
|
[
|
|
{ text: "Cancel", },
|
|
{
|
|
text: "Remove", onPress: () => {
|
|
dispatch(itemsRemoved())
|
|
setToggleAnim(!toggleAnim)
|
|
}
|
|
}
|
|
],
|
|
{ cancelable: true, }
|
|
)
|
|
}
|
|
return (
|
|
<WrapperRemove toggle={toggleAnim} visible={props.visible} onPress={handlePress}>
|
|
<RemoveIcon />
|
|
</WrapperRemove>
|
|
)
|
|
}
|
|
|
|
export const ContainerButtons = (props) => {
|
|
const [visible, setVisible] = useState(false);
|
|
const toggleAnimation = () => {
|
|
LayoutAnimation.configureNext({
|
|
duration: 500,
|
|
create: { type: 'linear', property: 'opacity' },
|
|
update: { type: 'spring', springDamping: 0.8 },
|
|
delete: { type: 'linear', property: 'opacity' }
|
|
})
|
|
setVisible(!visible)
|
|
}
|
|
return (
|
|
<>
|
|
<SelectAllItemsButton visible={visible} />
|
|
<RemoveItemsButton visible={visible} />
|
|
<WrapperButtons toggle={visible} onPress={toggleAnimation}>
|
|
<MenuIcon />
|
|
</WrapperButtons >
|
|
</>
|
|
)
|
|
}
|
|
|
|
export const AddItemButton = (props) => {
|
|
const [visibleItem, setVisibleItem] = useState(false);
|
|
const [visibleList, setVisibleList] = useState(false);
|
|
const lists = useSelector(state => state.lists.entities)
|
|
if (lists.find((list) => list.open === true)) {
|
|
return (
|
|
<>
|
|
<WrapperAddItem toggle={visibleItem} onPress={() => setVisibleItem(true)}>
|
|
<PlusIcon />
|
|
<ModalAddItem visible={visibleItem} closeModal={() => setVisibleItem(false)} />
|
|
</WrapperAddItem>
|
|
</>
|
|
)
|
|
}
|
|
return (
|
|
<>
|
|
<WrapperAddList toggle={visibleList} onPress={() => setVisibleList(true)}>
|
|
<ListIcon />
|
|
</WrapperAddList>
|
|
<ModalAddList visible={visibleList} closeModal={() => setVisibleList(false)} />
|
|
</>
|
|
)
|
|
} |