react-native-bouncy-checkbox-group/build/dist/lib/BouncyCheckboxGroup.js

Fully customizable bouncy checkbox group for React Native

import * as React from "react";
import { View } from "react-native";
import BouncyCheckbox from "react-native-bouncy-checkbox";
import styles from "./BouncyCheckboxGroup.style";
import useStateWithCallback from "./helpers/useStateWithCallback";
const BouncyCheckboxGroup = ({ style, checkboxProps, initial, data, onChange, multiple = false, alwaysSelect = false, animationDuration = 300, spacing = 0, itemContainerStyle, }) => {
    const [selectedItems, setSelectedItems] = useStateWithCallback(React.useMemo(() => {
        if (!initial) {
            if (alwaysSelect && !multiple && data.length > 0) {
                return [data[0]];
            }
            return [];
        }
        const initialIds = Array.isArray(initial)
            ? initial.map(id => String(id))
            : [String(initial)];
        return data.filter(item => initialIds.includes(String(item.id)));
    }, [initial, data, alwaysSelect, multiple]));
    React.useEffect(() => {
        if (selectedItems.length === 0) {
            let initialItems = [];
            if (initial) {
                const initialIds = Array.isArray(initial)
                    ? initial.map(id => String(id))
                    : [String(initial)];
                initialItems = data.filter(item => initialIds.includes(String(item.id)));
            }
            else if (alwaysSelect && !multiple && data.length > 0) {
                initialItems = [data[0]];
            }
            if (initialItems.length > 0) {
                setSelectedItems(initialItems, (newItems) => {
                    onChange && onChange(multiple ? newItems : newItems[0]);
                });
            }
        }
    }, []);
    const handleItemPress = (item) => {
        if (multiple) {
            const isAlreadySelected = selectedItems.some((selectedItem) => String(selectedItem.id) === String(item.id));
            let newSelectedItems;
            if (isAlreadySelected) {
                newSelectedItems = selectedItems.filter((selectedItem) => String(selectedItem.id) !== String(item.id));
            }
            else {
                newSelectedItems = [...selectedItems, item];
            }
            setSelectedItems(newSelectedItems, (newItems) => {
                onChange && onChange(newItems);
            });
        }
        else {
            const isAlreadySelected = selectedItems.length === 1 &&
                String(selectedItems[0].id) === String(item.id);
            if (isAlreadySelected && alwaysSelect) {
                return;
            }
            setSelectedItems([item], (newItems) => {
                onChange && onChange(newItems[0]);
            });
        }
    };
    const isItemSelected = (item) => {
        return selectedItems.some((selectedItem) => String(selectedItem.id) === String(item.id));
    };
    const renderBouncyCheckbox = (item, isActive) => {
        const { id, ...checkboxItemProps } = item;
        const isUntoggleable = alwaysSelect && !multiple && isActive && selectedItems.length === 1;
        return (<BouncyCheckbox innerIconStyle={{ borderWidth: 0 }} bounceEffect={0.8} bounceFriction={10} useNativeDriver={true} {...checkboxProps} {...checkboxItemProps} isChecked={isActive} useBuiltInState={!isUntoggleable} onPress={() => handleItemPress(item)}/>);
    };
    return (<View style={[styles.container, style]}>
      {data &&
            data.map((item) => {
                const isActive = isItemSelected(item);
                const { id } = item;
                return (<View key={String(id)} style={[
                        { marginRight: spacing },
                        itemContainerStyle
                    ]}>
              {renderBouncyCheckbox(item, isActive)}
            </View>);
            })}
    </View>);
};
export default BouncyCheckboxGroup;
//# sourceMappingURL=BouncyCheckboxGroup.js.map