119 lines
3.1 KiB
JavaScript
119 lines
3.1 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";
|
|
|
|
import { selectBodyshop } from "../../redux/user/user.selectors";
|
|
import { QUERY_EMPLOYEE_BY_ID } from "../../graphql/employees.queries";
|
|
import { useEffect } from "react";
|
|
|
|
const data = [
|
|
{ label: "Item 1", value: "1" },
|
|
{ label: "Item 2", value: "3" },
|
|
{ label: "Item 3", value: "3" },
|
|
];
|
|
|
|
// const mapStateToProps = createStructuredSelector({
|
|
// bodyshop: selectBodyshop,
|
|
// timeTicketJobId: selectCurrentTimeTicketJobId,
|
|
// timeTicketJob: selectCurrentTimeTicketJob,
|
|
// });
|
|
|
|
// const mapDispatchToProps = {};
|
|
|
|
export function CostCenterSelect(props) {
|
|
const currentRatesNCostCenters = props.currentRatesNCostCenters;
|
|
|
|
const [value, setValue] = useState(null);
|
|
const [isFocus, setIsFocus] = useState(false);
|
|
const [costCenters, setCostCenters] = useState([]);
|
|
|
|
useEffect(() => {
|
|
if (typeof currentRatesNCostCenters !== "undefined") {
|
|
var count = Object.keys(currentRatesNCostCenters).length;
|
|
let selectDataArray = [];
|
|
for (let i = 0; i < count; i++) {
|
|
selectDataArray.push({
|
|
value: currentRatesNCostCenters[i].cost_center,
|
|
label: currentRatesNCostCenters[i].cost_center,
|
|
rate: currentRatesNCostCenters[i].rate,
|
|
});
|
|
}
|
|
setCostCenters(selectDataArray);
|
|
}
|
|
}, [currentRatesNCostCenters]);
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
<Dropdown
|
|
style={[styles.dropdown, isFocus && { borderColor: "blue" }]}
|
|
placeholderStyle={styles.placeholderStyle}
|
|
selectedTextStyle={styles.selectedTextStyle}
|
|
inputSearchStyle={styles.inputSearchStyle}
|
|
iconStyle={styles.iconStyle}
|
|
search
|
|
maxHeight={300}
|
|
labelField="label"
|
|
valueField="value"
|
|
placeholder={!isFocus ? "Select Cost Center" : "..."}
|
|
searchPlaceholder="Search..."
|
|
onFocus={() => setIsFocus(true)}
|
|
onBlur={() => setIsFocus(false)}
|
|
data={costCenters}
|
|
value={props.currentValue?.value}
|
|
onChange={(item) => {
|
|
props.onValueSelected(item);
|
|
//setValue(item.value);
|
|
setIsFocus(false);
|
|
}}
|
|
/>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
export default connect(null, null)(CostCenterSelect);
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
marginVertical: 4,
|
|
marginHorizontal: 16,
|
|
justifyContent: "center",
|
|
alignContent: "center",
|
|
},
|
|
dropdown: {
|
|
height: 48,
|
|
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,
|
|
},
|
|
});
|