chrissewell/hetty
1
0
Fork 0
mirror of https://github.com/dstotijn/hetty.git synced 2025-07-01 18:47:29 -04:00
Code Issues Packages Projects Releases Wiki Activity

Fix input fields for key-value pair tables losing focus

Browse Source
This commit is contained in:
David Stotijn
2022-02-26 09:55:43 +01:00
parent 7e43479b54
commit d2858a2be4
1 changed files with 20 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
admin/src/lib/components/KeyValuePair.tsx
View File

@ -9,7 +9,6 @@ import {
Table, Table,
TableBody, TableBody,
TableCell, TableCell,
TableCellProps,
TableContainer, TableContainer,
TableHead, TableHead,
TableRow, TableRow,
@ -74,19 +73,6 @@ export function KeyValuePairTable({ items, onChange, onDelete }: KeyValuePairTab
setCopyConfOpen(false); setCopyConfOpen(false);
}; };
const baseCellStyle = {
"&:hover": {
cursor: "copy",
},
};
const KeyTableCell = styled(TableCell)<TableCellProps>(() => (!onChange ? baseCellStyle : {}));
const ValueTableCell = styled(TableCell)<TableCellProps>(() => ({
...(!onChange && baseCellStyle),
width: "60%",
wordBreak: "break-all",
}));
return ( return (
<div> <div>
<Snackbar open={copyConfOpen} autoHideDuration={3000} onClose={handleCopyConfClose}> <Snackbar open={copyConfOpen} autoHideDuration={3000} onClose={handleCopyConfClose}>
@ -118,12 +104,19 @@ export function KeyValuePairTable({ items, onChange, onDelete }: KeyValuePairTab
> >
{items.map(({ key, value }, idx) => ( {items.map(({ key, value }, idx) => (
<StyledTableRow key={idx} hover> <StyledTableRow key={idx} hover>
<KeyTableCell <TableCell
component="th" component="th"
scope="row" scope="row"
onClick={(e) => { onClick={(e) => {
!onChange && handleCellClick(e); !onChange && handleCellClick(e);
}} }}
sx={{
...(!onChange && {
"&:hover": {
cursor: "copy",
},
}),
}}
> >
{!onChange && <span>{key}</span>} {!onChange && <span>{key}</span>}
{onChange && ( {onChange && (
@ -137,11 +130,20 @@ export function KeyValuePairTable({ items, onChange, onDelete }: KeyValuePairTab
}} }}
/> />
)} )}
</KeyTableCell> </TableCell>
<ValueTableCell <TableCell
onClick={(e) => { onClick={(e) => {
!onChange && handleCellClick(e); !onChange && handleCellClick(e);
}} }}
sx={{
width: "60%",
wordBreak: "break-all",
...(!onChange && {
"&:hover": {
cursor: "copy",
},
}),
}}
> >
{!onChange && value} {!onChange && value}
{onChange && ( {onChange && (
@ -155,7 +157,7 @@ export function KeyValuePairTable({ items, onChange, onDelete }: KeyValuePairTab
}} }}
/> />
)} )}
</ValueTableCell> </TableCell>
{onDelete && ( {onDelete && (
<TableCell> <TableCell>
<div className="delete-button"> <div className="delete-button">