119 lines
2.9 KiB
JavaScript
119 lines
2.9 KiB
JavaScript
import React, { useState } from "react";
|
|
import { useQuery } from "@apollo/client";
|
|
import { StyleSheet, Text, View } from "react-native";
|
|
import { Dropdown } from "react-native-element-dropdown";
|
|
import { connect } from "react-redux";
|
|
import { createStructuredSelector } from "reselect";
|
|
|
|
//TODO Justin currently inprogress
|
|
import {
|
|
selectCurrentTimeTicketJob,
|
|
selectCurrentTimeTicketJobId,
|
|
} from "../../redux/app/app.selectors";
|
|
import { selectBodyshop } from "../../redux/user/user.selectors";
|
|
import { QUERY_EMPLOYEE_BY_ID } from "../../graphql/employees.queries";
|
|
|
|
const data = [
|
|
{ label: "Item 1", value: "1" },
|
|
{ label: "Item 2", value: "2" },
|
|
{ label: "Item 3", value: "3" },
|
|
{ label: "Item 4", value: "4" },
|
|
{ label: "Item 5", value: "5" },
|
|
{ label: "Item 6", value: "6" },
|
|
{ label: "Item 7", value: "7" },
|
|
{ label: "Item 8", value: "8" },
|
|
];
|
|
|
|
// const mapStateToProps = createStructuredSelector({
|
|
// bodyshop: selectBodyshop,
|
|
// timeTicketJobId: selectCurrentTimeTicketJobId,
|
|
// timeTicketJob: selectCurrentTimeTicketJob,
|
|
// });
|
|
|
|
const mapDispatchToProps = {};
|
|
|
|
export function SelectCostCenter(props) {
|
|
|
|
|
|
const [value, setValue] = useState(null);
|
|
const [isFocus, setIsFocus] = useState(false);
|
|
|
|
|
|
// const { loading, error, data } = useQuery(QUERY_EMPLOYEE_BY_ID, {
|
|
// variables: { id: technician.id,},
|
|
// fetchPolicy: "network-only",
|
|
// nextFetchPolicy: "network-only",
|
|
// }
|
|
// );
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
<Dropdown
|
|
style={[styles.dropdown, isFocus && { borderColor: "blue" }]}
|
|
placeholderStyle={styles.placeholderStyle}
|
|
selectedTextStyle={styles.selectedTextStyle}
|
|
inputSearchStyle={styles.inputSearchStyle}
|
|
iconStyle={styles.iconStyle}
|
|
data={data}
|
|
search
|
|
maxHeight={300}
|
|
labelField="label"
|
|
valueField="value"
|
|
placeholder={!isFocus ? "Select Cost Center" : "..."}
|
|
searchPlaceholder="Search..."
|
|
value={value}
|
|
onFocus={() => setIsFocus(true)}
|
|
onBlur={() => setIsFocus(false)}
|
|
onChange={(item) => {
|
|
setValue(item.value);
|
|
setIsFocus(false);
|
|
}}
|
|
/>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
export default connect(null, mapDispatchToProps)(SelectCostCenter);
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
backgroundColor: "white",
|
|
padding: 16,
|
|
justifyContent: "center",
|
|
alignContent: "center",
|
|
},
|
|
dropdown: {
|
|
height: 50,
|
|
borderColor: "gray",
|
|
borderWidth: 0.5,
|
|
borderRadius: 8,
|
|
paddingHorizontal: 8,
|
|
},
|
|
icon: {
|
|
marginRight: 5,
|
|
},
|
|
label: {
|
|
position: "absolute",
|
|
backgroundColor: "white",
|
|
left: 22,
|
|
top: 8,
|
|
zIndex: 999,
|
|
paddingHorizontal: 8,
|
|
fontSize: 14,
|
|
},
|
|
placeholderStyle: {
|
|
fontSize: 16,
|
|
},
|
|
selectedTextStyle: {
|
|
fontSize: 16,
|
|
},
|
|
iconStyle: {
|
|
width: 20,
|
|
height: 20,
|
|
},
|
|
inputSearchStyle: {
|
|
height: 40,
|
|
fontSize: 16,
|
|
},
|
|
});
|