Mirrors/hetty
2
0
Fork 0
mirror of https://github.com/dstotijn/hetty synced 2024-11-10 06:04:19 +00:00
Code Issues Projects Releases Packages 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
No known key found for this signature in database
GPG key ID: B23243A9C47CEE2D
1 changed files with 20 additions and 18 deletions
Show stats 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,
TableBody,
TableCell,
TableCellProps,
TableContainer,
TableHead,
TableRow,
@ -74,19 +73,6 @@ export function KeyValuePairTable({ items, onChange, onDelete }: KeyValuePairTab
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 (
<div>
<Snackbar open={copyConfOpen} autoHideDuration={3000} onClose={handleCopyConfClose}>
@ -118,12 +104,19 @@ export function KeyValuePairTable({ items, onChange, onDelete }: KeyValuePairTab
>
{items.map(({ key, value }, idx) => (
<StyledTableRow key={idx} hover>
<KeyTableCell
<TableCell
component="th"
scope="row"
onClick={(e) => {
!onChange && handleCellClick(e);
}}
sx={{
...(!onChange && {
"&:hover": {
cursor: "copy",
},
}),
}}
>
{!onChange && <span>{key}</span>}
{onChange && (
@ -137,11 +130,20 @@ export function KeyValuePairTable({ items, onChange, onDelete }: KeyValuePairTab
}}
/>
)}
</KeyTableCell>
<ValueTableCell
</TableCell>
<TableCell
onClick={(e) => {
!onChange && handleCellClick(e);
}}
sx={{
width: "60%",
wordBreak: "break-all",
...(!onChange && {
"&:hover": {
cursor: "copy",
},
}),
}}
>
{!onChange && value}
{onChange && (
@ -155,7 +157,7 @@ export function KeyValuePairTable({ items, onChange, onDelete }: KeyValuePairTab
}}
/>
)}
</ValueTableCell>
</TableCell>
{onDelete && (
<TableCell>
<div className="delete-button">