multiple-item-selection-rn v1.0.2

multiple-item-selection-rn

Multiple Item Selection RN es un componente creado para React Native destinado a la selección de múltiples elementos. El componente ofrece muchas funciones, como clasificación de elementos, agrupación de categorías, vibración y personalización del componentes de selección o checkboxes.

Instalación

Ejemplo de implementación :fa-heart:

Usando MultipleItemSelection.

import { MultipleItemSelection } from 'multiple-item-selection-rn'
...

const [modalState, setModalState] = useState(true)
const [selectedOption, setSelectedOptions] = useState([])

const [optionsList, setOptionsList] = useState([
    {
        index: 0,
        disabled: false,
        category: "Vegetales",
        label: "Ensalada César con brócoli.",
        value: "valor 1",
        precio: '$ 1.80',
        labelRight: 'Label 2'
    },
])

<MultipleSelectionComponent
    optionsList={optionsList}

    modalState={modalState}
    setModalState={setModalState}

    selectedOption={selectedOption}
    setSelectedOptions={setSelectedOptions}
/>
...

Props

Definición de props

Prop: activateVibration

Valores y definición

Props requeridos

optionsList

Propiedades requeridas

[
		{
					index: 0,
					disabled: false,
					category: "Vegetales",
					label: "Ensalada César con brócoli.",
					labelRight: '12',
					...: "...",
					...: '...',
		},
]

En caso de querer mostrar otro valor de otra propiedad en label o labelRight en la lista de artículos, debe usar el componente personalizable ComponentCustomItem que recibe valueSwitch, setSwitch, item como parametros.

Ejemplo

ComponentCustomItem={ ({item, setSwitch} ) => {
    return <Pressable onPress={() => setSwitch()} style={{backgroundColor: 'red',width: '85%'}}>
        <Text >{item.title}</Text>
    </Pressable>
}}

Esto mostrará un solo texto en la propiedad title para cada artículo.

Otro ejemplo

<View style={{ flex: 1, flexDirection: 'row' }}>
    <Pressable style={{ flex: 1, padding: 10, paddingLeft: 0 }}
        onPress={() => setSwitch()} onLongPress={() => showLabelToast(item.label)}>
        <Text style={[{ color: SetTheme[Theme].color }, styles.textItem]} numberOfLines={1}>
            {item.label}
        </Text>
    </Pressable>
    <View style={{ justifyContent: 'center' }}>
        <Text style={[{ color: SetTheme[Theme].color, fontWeight: 'bold' }]}>
            {item.precio}
        </Text>
    </View>
</View>

Esto mostrará un texto a la izquierda y otro a la derecha de cada artículo usando la propiedad ComponentCustomItem.

Ejemplo

export default function App() {
    const [orderBy] = useState('asc')
    const [groupByCategory] = useState(true)
    const [modalState, setModalState] = useState(true)
    const [selectedOption, setSelectedOptions] = useState([])

    const [optionsList, setOptionsList] = useState([
        {
            index: 0,
            disabled: false,
            category: "Vegetales",
            label: "Ensalada César con brócoli.",
            labelRight: '12',
            value: "valor 1",
            precio: '$ 1.80',
        }
    ])

    return (
        <View style={styles.container}>

            <Text style={{ marginVertical: 10 }}>
                {JSON.stringify(selectedOption)}
            </Text>

            <MultipleSelectionComponent 
                optionsList={optionsList}

                modalState={modalState}
                setModalState={setModalState}

                selectedOption={selectedOption}
                setSelectedOptions={setSelectedOptions} 

                typeCheck = 'CheckSquare'
                orderBy={orderBy}
                groupByCategory={groupByCategory}

                showButtonScroll={true}
            />
            <StatusBar style="auto" />
        </View>
    );
}

Ejemplo simple

<MultipleSelectionComponent 
    optionsList={optionsList}

    modalState={modalState} 
    setModalState={setModalState}

    selectedOption={selectedOption}
    setSelectedOptions={setSelectedOptions}  
/>

Ejemplos avanzados

Usando tipo de check opcional llamado CheckRadius.

<MultipleSelectionComponent
    optionsList={optionsList}

    modalState={modalState}
    setModalState={setModalState}

    selectedOption={selectedOption}
    setSelectedOptions={setSelectedOptions}

    typeCheck='CheckSquare'
/>

Usando CheckRadius y agrupando por categoria

<MultipleSelectionComponent
    optionsList={optionsList}

    modalState={modalState}
    setModalState={setModalState}

    selectedOption={selectedOption}
    setSelectedOptions={setSelectedOptions}

    typeCheck='CheckRadius'

    groupByCategory={true}
/>

Usando el package @expo/vector-icons

<MultipleSelectionComponent
    optionsList={optionsList}

    modalState={modalState}
    setModalState={setModalState}

    selectedOption={selectedOption}
    setSelectedOptions={setSelectedOptions}

    ComponentCustomCheck={({ valueSwitch, setSwitch }) => <Fontisto name={valueSwitch ? "checkbox-active" : "checkbox-passive"} size={24} color="black" onPress={() =>setSwitch(!valueSwitch)} />}
    typeCheck='Custom'
/>

<MultipleSelectionComponent
    optionsList={optionsList}

    modalState={modalState}
    setModalState={setModalState}

    selectedOption={selectedOption}
    setSelectedOptions={setSelectedOptions}

    ComponentCustomHeader={() => <View style={{ backgroundColor: 'rgba(225,225,225,.4)' }}>
        <Text style={{ padding: 15, fontSize: 30, textAlign: 'center' }}>Platos del día</Text>
    </View>}

    ComponentCustomFooter={({ modalState, setModalDisplay }) => {
        return <View>
            <Button title="Ocultar Modal" onPress={() => setModalDisplay(!modalState)} />
        </View>
    }}
/>

SelectionRadioButtom

Usando SelectionRadioButtom.

Selection Radio Button, es otro componente de selección del mismo paquete de un solo valor parecido a los radio buttons de HTML.

Props

Definición de props

import { SelectionRadioButtom } from 'multiple-item-selection-rn'

import { Fontisto } from '@expo/vector-icons';

export default () => {
    const [selectedOption, setSelectedOptions] = useState({})
    const [modalState, setModalState] = useState(true)
    const [optionsList, setOptionsList] = useState([
        {
            index: 0,
            disabled: false,
            category: "Vegetales",
            label: "Ensalada César con brócoli.",
            value: "valor 1",
            //precio: '$ 1.80',
            labelRight: '12'
        },
        {
            index: 1,
            disabled: false,
            category: "Carne",
            label: "Calabacines rellenos de pollo y piquillos.",
            value: "valor 2",
            //precio: '$ 1.00',
            labelRight: '5'
        }
    ])
    return (
        <View  style={{marginTop: 50}}> 
            <Button title="Open Options" onPress={() => setModalState(!modalState)} />
            <SelectionRadioButtom 
                optionsList={optionsList} 
                modalState={modalState}
                setModalState={setModalState}
                selectedOption={selectedOption} 
                setSelectedOptions={setSelectedOptions}    
 
                ComponentCustomCheck={({status, index, item, selectItem, ThemeTextColor}) => <> 
                    <Fontisto name={status?"radio-btn-active":"radio-btn-passive"} size={24} color={ThemeTextColor} onPress={() => selectItem(index, item)} />
                </>}
            />
        </View>
    )
}

Se mostrarán otros detalles dependiendo de futuras actualizaciones.

Autor

Benjamin Canario

Si quieres hacerme una donación hazlo mediante este link paypal.me/LuisCanarioDO

Contactame para mejoras benjamincanario7@gmail.com