import React, { Fragment, useEffect, useRef, useState } from 'react';
import { View, Text, TouchableOpacity, LayoutAnimation, Platform, UIManager, ScrollView, FlatList, StyleSheet } from 'react-native';
import { PopupLayout, useLayoutAction } from '~/Components/Layouts/PopupLayout';
import { SearchBoxIcon, DefaultButton, PrimaryButton } from '~/Components/Listing/Search';
import { DefaultAction } from '~/Components/UIControls/Popup/Context';
import { DragDrop, DragDropProvider } from '~/Components/UIControls/dragdrop';
import Icon from '~/Components/UIControls/Icon';
import { Util } from '~/Utils/utils';
if (Platform.OS === 'android' && UIManager.setLayoutAnimationEnabledExperimental) {
UIManager.setLayoutAnimationEnabledExperimental(true);
}
const styles = StyleSheet.create({
container: {
flexDirection: 'row',
width: '100%',
height: '100%',
},
destination: {
backgroundColor: 'white',
borderRightWidth: 1,
borderColor: '#dedede',
width: '50%',
},
destitem: {
backgroundColor: '#ee4035',
padding: 10,
margin: 5,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
borderRadius: 7,
},
destitemtext: {
color: 'white',
marginVertical: 5,
},
src: {
backgroundColor: 'white',
width: '50%',
},
srcitem: {
backgroundColor: '#005b96',
padding: 10,
margin: 5,
flexDirection: 'row',
alignItems: 'center',
borderRadius: 7,
},
srcitemtext: {
color: 'white',
marginVertical: 5,
},
});
export default Popup = ({ siteId = 0, popup = DefaultAction }) => {
const [items, setItems] = useState([]);
const [selectItems, setSelectItems] = useState([]);
const src = useRef();
const dest = useRef();
const destMeasure = useRef(null);
const lastSelectItem = useRef();
const lastSelectItemMeasure = useRef(null);
const updateMeasure = async () => {
destMeasure.current = await Util.getMeasure(dest.current);
if (lastSelectItem.current) {
lastSelectItemMeasure.current = await Util.getMeasure(lastSelectItem.current);
}
};
const handleDraggableCheck = (e, gesture) => {
if (e.nativeEvent.locationX <= 80) {
src.current.setNativeProps({ scrollEnabled: false });
updateMeasure();
return true;
} else {
src.current.setNativeProps({ scrollEnabled: true });
return false;
}
};
const handleDragStart = (e, gesture) => {};
const handleDragEnd = (gesture, item) => {
src.current.setNativeProps({ scrollEnabled: true });
if (selectItems.findIndex((value) => value.name == item.name) != -1) {
return false;
}
if (
!!destMeasure.current &&
gesture.moveX >= destMeasure.current.pageX &&
gesture.moveX <= destMeasure.current.pageX + destMeasure.current.width &&
gesture.moveY >= destMeasure.current.pageY &&
gesture.moveY <= destMeasure.current.pageY + destMeasure.current.height
) {
if (selectItems.length > 0 && lastSelectItemMeasure.current) {
return {
dropX: lastSelectItemMeasure.current.pageX,
dropY: lastSelectItemMeasure.current.pageY + lastSelectItemMeasure.current.height,
};
} else {
return {
dropX: destMeasure.current.pageX,
dropY: destMeasure.current.pageY,
};
}
}
return false;
};
const appendSelected = (item) => {
if (selectItems.findIndex((value) => value.name == item.name) != -1) return;
LayoutAnimation.configureNext(LayoutAnimation.create(150, LayoutAnimation.Types.easeInEaseOut, LayoutAnimation.Properties.opacity));
setSelectItems([...selectItems, { name: item.name }]);
};
const removeSelected = (item) => {
const newItems = selectItems.filter((value) => value.name != item.name);
LayoutAnimation.configureNext(LayoutAnimation.create(150, LayoutAnimation.Types.easeInEaseOut, LayoutAnimation.Properties.opacity));
setSelectItems(newItems);
};
const actionHandler = (action, parameter = {}) => {
const actions = {
onClose: () => {
console.log('close...');
popup.close();
},
onSelect: () => {
console.log('select...');
const names = selectItems.map((item) => item.name).join(',');
popup.select(names);
},
};
actions[action]();
};
useEffect(() => {
let list = [];
for (let i = 1; i < 200; i++) {
list = [...list, { id: i, name: `이름${i}` }];
}
setItems(list);
}, []);
return (
{selectItems.map((item, index) => {
const last = selectItems.length - 1 == index;
return (
{item.name}
removeSelected(item)}>
);
})}
`item-${index}`}
renderItem={({ item, index }) => {
return (
{
return handleDragEnd(gesture, item);
}}
hideWhenDrop={true}
onRemove={() => {
appendSelected(item);
}}
>
{item.name}
);
}}
/>
);
};
const Header = () => {
const { callAction } = useLayoutAction();
return (
{
callAction('onClose');
}}
>
닫기
{
callAction('onSelect');
}}
>
선택
);
};