Skip to content

Commit

Permalink
Refactored ItemTableFilter to allow the label to hide label overlfow …
Browse files Browse the repository at this point in the history
…in X direction without hiding overlfow in the Y direction
  • Loading branch information
wrigh393 committed Dec 30, 2020
1 parent 38445fe commit db5f1a1
Showing 1 changed file with 17 additions and 19 deletions.
36 changes: 17 additions & 19 deletions src/components/ItemTableFilter/ItemTableFilter.js
Original file line number Diff line number Diff line change
@@ -1,35 +1,33 @@
import React, { useState } from 'react';
import React from 'react';
import PropTypes from 'prop-types';
import { makeStyles, TextField } from "@material-ui/core";
import { Box, FormControl, InputLabel, makeStyles, OutlinedInput,} from "@material-ui/core";

export default function ItemTableFilter({ label, onChange }) {

const useStyles = makeStyles({
labelRoot: {
overflow: "hidden"
},
labelFocused: {
overflow: "visible"
filterContainer: {
overflowX: "hidden"
},
});
const classes = useStyles();

const [isFocused, setIsFocused] = useState(false);

return (
<TextField
label={label}
onChange={onChange}
onFocus={() => setIsFocused(true)}
onBlur={() => setIsFocused(false)}
className={ isFocused ? classes.labelFocused : classes.labelRoot }
<Box classes={{ root: classes.filterContainer }} >
<FormControl
color="secondary"
type="search"
fullWidth
margin="dense"
size="small"
variant="outlined"
/>
>
<InputLabel htmlFor={label}>{label}</InputLabel>
<OutlinedInput
id="component-outlined"
onChange={onChange}
label={label}
/>
</FormControl>
</Box>
);

};

ItemTableFilter.propTypes = {
Expand Down

0 comments on commit db5f1a1

Please sign in to comment.