65 lines
1.6 KiB
JavaScript
65 lines
1.6 KiB
JavaScript
import React from 'react'
|
|
import styled from 'styled-components'
|
|
import { Text, TouchableOpacity, View } from 'react-native'
|
|
|
|
const WrapperDropdown = styled(View)`
|
|
display: flex;
|
|
flex-direction: column;
|
|
position: absolute;
|
|
z-index:2;
|
|
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
|
|
background-color: ${({ theme }) => theme.colors.dp01 + 'cc'};
|
|
width: 200px;
|
|
max-height: 100px;
|
|
border-bottom-left-radius: 10px;
|
|
border-bottom-right-radius: 10px;
|
|
`
|
|
const DropdownItem = styled(TouchableOpacity)`
|
|
color: ${({ theme }) => theme.colors.textW2};
|
|
font-size: 20px;
|
|
`
|
|
const HorizontalSeperator = styled(View)`
|
|
width: 100%;
|
|
height: 1px;
|
|
background-color: ${({ theme }) => theme.colors.dp02};
|
|
`
|
|
|
|
const Dropdown = (props) => {
|
|
let text = props.text
|
|
text = text.replace(/\W/g, '')
|
|
let regex = new RegExp(text, "i");
|
|
|
|
let newArray = props.array.filter((element) =>
|
|
regex.test(element)
|
|
)
|
|
if (newArray.length === 1 && newArray[0] === text) {
|
|
newArray = [];
|
|
}
|
|
let dropdownList = newArray.map((element, index) => {
|
|
return (
|
|
<View key={index}>
|
|
<DropdownItem onPress={() => props.setElement(element)}>{element}</DropdownItem>
|
|
<HorizontalSeperator />
|
|
</View>
|
|
)
|
|
})
|
|
return (
|
|
<WrapperDropdown>
|
|
{dropdownList}
|
|
</WrapperDropdown>
|
|
)
|
|
}
|
|
|
|
export const QtDropdown = (props) => {
|
|
const quantities = ["g", "kg", "mL", "L"]
|
|
return <Dropdown
|
|
array={quantities}
|
|
text={props.text}
|
|
setElement={props.setElement} />
|
|
}
|
|
|
|
|
|
export default Dropdown |