@janiscommerce/ui-native/dist/components/organisms/SwipeItemSelectionList/index.js

components library for Janis app

import React, { useState } from 'react';
import SwipeList from '../../molecules/SwipeList';
import ItemSelectionButton from '../../molecules/ItemSelectionButton';
const SwipeItemSelectionList = React.forwardRef(({ data, radioButton = false, multiselect = false, leftSelection = false, rightSelection = false, onSelection = () => { }, ...props }, ref) => {
    const [selectedElementId, setSelectedElementId] = useState('');
    const [selectedElementsIds, setSelectedElementsIds] = useState([]);
    if (!data || !data.length) {
        return null;
    }
    const checkIfElementIsSelected = (id, isElementSelected) => {
        if (isElementSelected) {
            return multiselect
                ? setSelectedElementsIds((prevState) => prevState.filter((includedId) => includedId !== id)
                // eslint-disable-next-line no-mixed-spaces-and-tabs
                )
                : setSelectedElementId('');
        }
        return multiselect
            ? setSelectedElementsIds((prevState) => [...prevState, id])
            : setSelectedElementId(id);
    };
    const renderItem = (element) => {
        const { id, name } = element;
        const isElementSelected = multiselect
            ? selectedElementsIds.includes(id)
            : selectedElementId === id;
        const onSelectElement = () => {
            checkIfElementIsSelected(id, isElementSelected);
            return onSelection(id);
        };
        return (<ItemSelectionButton key={id} radioButton={radioButton} leftSelection={leftSelection} rightSelection={rightSelection} selected={isElementSelected} onSelection={onSelectElement} name={name}/>);
    };
    return (<SwipeList ref={ref} {...props}>
				{data.map((element) => renderItem(element))}
			</SwipeList>);
});
export default SwipeItemSelectionList;