diff --git a/src/components/SwipeableContainer/index.tsx b/src/components/SwipeableContainer/index.tsx new file mode 100644 index 00000000..e2cbbef8 --- /dev/null +++ b/src/components/SwipeableContainer/index.tsx @@ -0,0 +1,109 @@ +import React, {useState} from 'react'; +import { + View, + Text, + StyleSheet, + Animated, + Dimensions, + PanResponder, +} from 'react-native'; + +const {width} = Dimensions.get('window'); +const gestureDelay = -35; + +const SwipeableContainer = (props: any) => { + const [position, setPosition] = useState(new Animated.ValueXY()); + + let scrollViewEnabled = true; + const panResponder = PanResponder.create({ + onStartShouldSetPanResponder: (evt, gestureState) => false, + onMoveShouldSetPanResponder: (evt, gestureState) => true, + onPanResponderTerminationRequest: (evt, gestureState) => false, + onPanResponderMove: (evt, gestureState) => { + if (gestureState.dx < 0) { + setScrollViewEnabled(false); + let newX = gestureState.dx + gestureDelay; + position.setValue({x: newX, y: 0}); + } + }, + onPanResponderRelease: (evt, gestureState) => { + if (gestureState.dx > -50) { + Animated.timing(position, { + toValue: {x: 0, y: 0}, + duration: 150, + useNativeDriver: false, + }).start(() => { + setScrollViewEnabled(true); + }); + } else { + Animated.timing(position, { + toValue: {x: -100, y: 0}, + duration: 300, + useNativeDriver: false, + }).start(() => { + // props.success(props.text); + setScrollViewEnabled(true); + }); + } + }, + }); + + // this.panResponder = panResponder; + // this.state = {position}; + + const setScrollViewEnabled = (enabled: boolean) => { + if (scrollViewEnabled !== enabled) { + // props.setScrollEnabled(enabled); + scrollViewEnabled = enabled; + } + }; + + return ( + + + + {props.children} + + + DELETE + + + + ); +}; + +const styles = StyleSheet.create({ + listItem: { + height: 80, + marginRight: -100, + justifyContent: 'center', + backgroundColor: 'red', + position: 'relative' + }, + absoluteCell: { + position: 'absolute', + // top: 0, + // bottom: 0, + right: 0, + width: 100, + flexDirection: 'row', + // justifyContent: 'flex-end', + alignItems: 'center', + }, + absoluteCellText: { + margin: 16, + color: '#FFF', + }, + innerCell: { + // width: width + 100, + height: 80, + marginRight: 100, + backgroundColor: 'yellow', + // justifyContent: 'center', + // alignItems: 'center', + }, +}); + +export default SwipeableContainer; diff --git a/src/components/screens/allCases/AllCases.tsx b/src/components/screens/allCases/AllCases.tsx index 5eed666c..a0a20b5a 100644 --- a/src/components/screens/allCases/AllCases.tsx +++ b/src/components/screens/allCases/AllCases.tsx @@ -1,49 +1,63 @@ import TextInput from '../../../../RN-UI-LIB/src/components/TextInput'; import React, {useEffect} from 'react'; import { - ListRenderItemInfo, StyleSheet, + ListRenderItemInfo, + StyleSheet, View, - VirtualizedList + VirtualizedList, } from 'react-native'; -import { useDispatch, useSelector } from 'react-redux'; +import {useDispatch, useSelector} from 'react-redux'; import Heading from '../../../../RN-UI-LIB/src/components/Heading'; import Text from '../../../../RN-UI-LIB/src/components/Text'; -import { GenericStyles } from '../../../../RN-UI-LIB/src/styles'; -import { COLORS } from '../../../../RN-UI-LIB/src/styles/colors'; +import {GenericStyles} from '../../../../RN-UI-LIB/src/styles'; +import {COLORS} from '../../../../RN-UI-LIB/src/styles/colors'; import data from '../../../data/cases.json'; -import { RootState } from '../../../store/store'; -import { setCasesListData } from './allCasesSlice'; -import { caseStatus, caseVerdict, Data, taskStatus, Type } from './interface'; +import {RootState} from '../../../store/store'; +import {resetTodoList, setCasesListData, setCasesListMapData, setIntermediateTodoList} from './allCasesSlice'; +import {caseStatus, Data, Type} from './interface'; import ListItem from './ListItem'; import SearchIcon from '../../../../RN-UI-LIB/src/Icons/SearchIcon'; -import InfoIcon from '../../../../RN-UI-LIB/src/Icons/InfoIcon'; - +import Button from '../../../../RN-UI-LIB/src/components/Button'; +import { navigateToScreen } from '../../utlis/navigationUtlis'; interface IItem { data: ListRenderItemInfo; todoList: Array; } -const Item: React.FC = (props) => { +const Item: React.FC = props => { const propData = props.data.item; const todoList = props.todoList; let completedCount = 0; - todoList.forEach(todo =>{ - if(todo.caseStatus === caseStatus.CLOSED){ + todoList.forEach(todo => { + if (todo.caseStatus === caseStatus.CLOSED) { completedCount++; } }); switch (propData.type) { case Type.FILTER: return ( - - } placeholder='Search by name, address' /> + + } + placeholder="Search by name, address" + /> ); case Type.CASES_HEADER: return ( - + Other cases @@ -51,7 +65,12 @@ const Item: React.FC = (props) => { ); case Type.TODO_HEADER: return ( - + Today's to do list @@ -74,37 +93,65 @@ const Item: React.FC = (props) => { ); default: - return ; + return ; } }; -const Seperator = () => ; +export const Seperator = () => ; -const getItem = (item: Array, index: number) => item[index]; +export const getItem = (item: Array, index: number) => item[index]; const AllCases = () => { - - const {compiledList, todoList} = useSelector((state: RootState) => state.allCases); + const {casesList, compiledList, todoList, newlyPinnedCases} = useSelector( + (state: RootState) => state.allCases, + ); const dispatch = useDispatch(); useEffect(() => { - dispatch(setCasesListData(data.allCases)); + dispatch(setCasesListData(data.allCases)) }, []) + useEffect(() => { + dispatch(setCasesListMapData(casesList)); + }, [casesList]); + + const handleTodoProceedClick = () => { + dispatch(setIntermediateTodoList()); + } + + const handleCancelTodoList = () => { + dispatch(resetTodoList()); + } + return ( - + } stickyHeaderIndices={[0]} initialNumToRender={4} - renderItem={row => ( - - )} + renderItem={row => } keyExtractor={item => item.caseId} getItemCount={item => item.length} getItem={getItem} ItemSeparatorComponent={} /> + {newlyPinnedCases ? ( + +