feat: sync and update with all changes from fork (#720)
* feat: sync and update with all changes from fork * refactor: extract clipboard copy logic into custom hook * fix: correct spelling of DEFAULT_REFRESH_FREQUENCY_MS in Stamps and WalletBalance providers * refactor(ui-tests): replace fixed sleeps with condition-based waits * fix: handle null values for size and granteeCount in infoGroups * fix(lint): add newline at end of file in useClipboardCopy hook * fix(ui-tests): page.goto URL * refactor: update import paths for useClipboardCopy --------- Co-authored-by: Ferenc Sárai <sarai.ferenc@gmail.com>
This commit is contained in:
Bálint Ujvári
GitHub
@@ -1,53 +1,52 @@
|
||||
import { Box, Grid, IconButton, InputBase, ListItem, Typography } from '@material-ui/core'
|
||||
import Collapse from '@material-ui/core/Collapse'
|
||||
import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
|
||||
import { ChangeEvent, ReactElement, useState } from 'react'
|
||||
import { Box, IconButton, InputBase, ListItemButton, Typography } from '@mui/material'
|
||||
import Collapse from '@mui/material/Collapse'
|
||||
import React, { ChangeEvent, ReactElement, useState } from 'react'
|
||||
import type { RemixiconReactIconProps } from 'remixicon-react'
|
||||
import Check from 'remixicon-react/CheckLineIcon'
|
||||
import X from 'remixicon-react/CloseLineIcon'
|
||||
import Edit from 'remixicon-react/PencilLineIcon'
|
||||
import Minus from 'remixicon-react/SubtractLineIcon'
|
||||
import { makeStyles } from 'tss-react/mui'
|
||||
|
||||
import ExpandableListItemActions from './ExpandableListItemActions'
|
||||
import ExpandableListItemNote from './ExpandableListItemNote'
|
||||
import { SwarmButton } from './SwarmButton'
|
||||
|
||||
const useStyles = makeStyles((theme: Theme) =>
|
||||
createStyles({
|
||||
header: {
|
||||
backgroundColor: theme.palette.background.paper,
|
||||
marginBottom: theme.spacing(0.25),
|
||||
borderLeft: `${theme.spacing(0.25)}px solid rgba(0,0,0,0)`,
|
||||
wordBreak: 'break-word',
|
||||
const useStyles = makeStyles()(theme => ({
|
||||
header: {
|
||||
backgroundColor: theme.palette.background.paper,
|
||||
marginBottom: theme.spacing(0.25),
|
||||
borderLeft: `${theme.spacing(0.25)}px solid rgba(0,0,0,0)`,
|
||||
wordBreak: 'break-word',
|
||||
},
|
||||
headerOpen: {
|
||||
borderLeft: `${theme.spacing(0.25)}px solid ${theme.palette.primary.main}`,
|
||||
},
|
||||
copyValue: {
|
||||
cursor: 'pointer',
|
||||
padding: theme.spacing(1),
|
||||
borderRadius: 0,
|
||||
'&:hover': {
|
||||
backgroundColor: '#fcf2e8',
|
||||
color: theme.palette.primary.main,
|
||||
},
|
||||
headerOpen: {
|
||||
borderLeft: `${theme.spacing(0.25)}px solid ${theme.palette.primary.main}`,
|
||||
},
|
||||
copyValue: {
|
||||
cursor: 'pointer',
|
||||
padding: theme.spacing(1),
|
||||
borderRadius: 0,
|
||||
'&:hover': {
|
||||
backgroundColor: '#fcf2e8',
|
||||
color: theme.palette.primary.main,
|
||||
},
|
||||
},
|
||||
content: {
|
||||
marginTop: theme.spacing(1),
|
||||
marginBottom: theme.spacing(1),
|
||||
},
|
||||
keyMargin: {
|
||||
marginRight: theme.spacing(1),
|
||||
},
|
||||
unselectableLabel: {
|
||||
cursor: 'default',
|
||||
userSelect: 'none',
|
||||
// Many browsers don't support yet the general user-select css property
|
||||
WebkitUserSelect: 'none',
|
||||
MozUserSelect: 'none',
|
||||
msUserSelect: 'none',
|
||||
},
|
||||
}),
|
||||
)
|
||||
},
|
||||
content: {
|
||||
marginTop: theme.spacing(1),
|
||||
marginBottom: theme.spacing(1),
|
||||
},
|
||||
keyMargin: {
|
||||
marginRight: theme.spacing(1),
|
||||
},
|
||||
unselectableLabel: {
|
||||
cursor: 'default',
|
||||
userSelect: 'none',
|
||||
// Many browsers don't support yet the general user-select css property
|
||||
WebkitUserSelect: 'none',
|
||||
MozUserSelect: 'none',
|
||||
msUserSelect: 'none',
|
||||
},
|
||||
}))
|
||||
|
||||
interface Props {
|
||||
label: string
|
||||
@@ -65,99 +64,118 @@ interface Props {
|
||||
locked?: boolean
|
||||
}
|
||||
|
||||
export default function ExpandableListItemKey({
|
||||
export default function ExpandableListItemInput({
|
||||
label,
|
||||
value,
|
||||
onConfirm,
|
||||
onChange,
|
||||
value = '',
|
||||
placeholder,
|
||||
helperText,
|
||||
expandedOnly,
|
||||
confirmLabel,
|
||||
confirmLabelDisabled,
|
||||
confirmIcon,
|
||||
expandedOnly,
|
||||
helperText,
|
||||
placeholder,
|
||||
loading,
|
||||
onChange,
|
||||
onConfirm,
|
||||
mapperFn,
|
||||
locked,
|
||||
}: Props): ReactElement | null {
|
||||
const classes = useStyles()
|
||||
const { classes } = useStyles()
|
||||
const [open, setOpen] = useState(Boolean(expandedOnly))
|
||||
const [inputValue, setInputValue] = useState<string>(value || '')
|
||||
const toggleOpen = () => setOpen(!open)
|
||||
const handleChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
|
||||
const handleChange = (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
|
||||
let newValue = e.target.value
|
||||
|
||||
if (mapperFn) {
|
||||
e.target.value = mapperFn(e.target.value)
|
||||
newValue = mapperFn(newValue)
|
||||
}
|
||||
setInputValue(newValue)
|
||||
|
||||
setInputValue(e.target.value.trim())
|
||||
|
||||
if (onChange) onChange(e.target.value.trim())
|
||||
if (onChange) onChange(newValue)
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<ListItem className={`${classes.header} ${open ? classes.headerOpen : ''}`}>
|
||||
<Grid container direction="column" justifyContent="space-between" alignItems="stretch">
|
||||
<Grid container direction="row" justifyContent="space-between" alignItems="center">
|
||||
{label && (
|
||||
<Typography variant="body1" className={classes.unselectableLabel}>
|
||||
<ListItemButton className={`${classes.header} ${open ? classes.headerOpen : ''}`}>
|
||||
<Box display="flex" flexDirection="column" width="100%">
|
||||
<Box display="flex" flexDirection="row" alignItems="center" width="100%">
|
||||
{label && (
|
||||
<Box flex={1} minWidth={0}>
|
||||
<Typography variant="body1" className={classes.unselectableLabel} component="span">
|
||||
{label}
|
||||
</Typography>
|
||||
</Box>
|
||||
)}
|
||||
<Box flex={3} display="flex" alignItems="center" justifyContent="flex-end" minWidth={0} gap={1}>
|
||||
{!open && value && (
|
||||
<Typography
|
||||
variant="body2"
|
||||
component="span"
|
||||
sx={{ minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}
|
||||
>
|
||||
{value}
|
||||
</Typography>
|
||||
)}
|
||||
<Typography variant="body2">
|
||||
<div>
|
||||
{!open && value}
|
||||
{!expandedOnly && !locked && (
|
||||
<IconButton size="small" className={classes.copyValue} onClick={toggleOpen}>
|
||||
{open ? <Minus strokeWidth={1} /> : <Edit strokeWidth={1} />}
|
||||
</IconButton>
|
||||
)}
|
||||
</div>
|
||||
</Typography>
|
||||
</Grid>
|
||||
<Collapse in={open} timeout="auto" unmountOnExit>
|
||||
<InputBase
|
||||
value={inputValue}
|
||||
placeholder={placeholder}
|
||||
onChange={handleChange}
|
||||
fullWidth
|
||||
className={classes.content}
|
||||
autoFocus
|
||||
hidden={locked}
|
||||
/>
|
||||
</Collapse>
|
||||
</Grid>
|
||||
</ListItem>
|
||||
<Collapse in={open} timeout="auto" unmountOnExit>
|
||||
{helperText && <ExpandableListItemNote>{helperText}</ExpandableListItemNote>}
|
||||
<Box mt={2}>
|
||||
<ExpandableListItemActions>
|
||||
<SwarmButton
|
||||
disabled={
|
||||
loading ||
|
||||
inputValue === value ||
|
||||
Boolean(confirmLabelDisabled) || // Disable if external validation is provided
|
||||
(inputValue === '' && value === undefined) // Disable if no initial value was not provided and the field is empty. The undefined check is improtant so that it is possible to submit with empty input in other cases
|
||||
}
|
||||
loading={loading}
|
||||
iconType={confirmIcon ?? Check}
|
||||
onClick={() => {
|
||||
if (onConfirm) onConfirm(inputValue)
|
||||
}}
|
||||
>
|
||||
{confirmLabel || 'Save'}
|
||||
</SwarmButton>
|
||||
<SwarmButton
|
||||
disabled={loading || inputValue === value || inputValue === ''}
|
||||
iconType={X}
|
||||
onClick={() => setInputValue(value || '')}
|
||||
cancel
|
||||
>
|
||||
Cancel
|
||||
</SwarmButton>
|
||||
</ExpandableListItemActions>
|
||||
{!expandedOnly && !locked && (
|
||||
<IconButton size="small" className={classes.copyValue} onClick={toggleOpen}>
|
||||
{open ? <Minus strokeWidth={1} /> : <Edit strokeWidth={1} />}
|
||||
</IconButton>
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
</Collapse>
|
||||
</>
|
||||
<Collapse in={open} timeout="auto" unmountOnExit>
|
||||
<Box display="flex" flexDirection="column" width="100%">
|
||||
<Box display="flex" alignItems="center" width="100%" minWidth={0}>
|
||||
<InputBase
|
||||
value={inputValue}
|
||||
placeholder={placeholder}
|
||||
onChange={handleChange}
|
||||
fullWidth
|
||||
className={classes.content}
|
||||
autoFocus
|
||||
hidden={locked}
|
||||
inputProps={{
|
||||
style: {
|
||||
width: '100%',
|
||||
minWidth: 220,
|
||||
whiteSpace: 'nowrap',
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
},
|
||||
maxLength: 512,
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
{helperText && <ExpandableListItemNote>{helperText}</ExpandableListItemNote>}
|
||||
<Box mt={2}>
|
||||
<ExpandableListItemActions>
|
||||
<SwarmButton
|
||||
disabled={
|
||||
loading ||
|
||||
inputValue === value ||
|
||||
Boolean(confirmLabelDisabled) ||
|
||||
(inputValue === '' && value === undefined)
|
||||
}
|
||||
loading={loading}
|
||||
iconType={confirmIcon ?? Check}
|
||||
onClick={() => {
|
||||
onConfirm?.(inputValue.trim())
|
||||
}}
|
||||
>
|
||||
{confirmLabel || 'Save'}
|
||||
</SwarmButton>
|
||||
<SwarmButton
|
||||
disabled={loading || inputValue === value || inputValue === ''}
|
||||
iconType={X}
|
||||
onClick={() => setInputValue(value || '')}
|
||||
cancel
|
||||
>
|
||||
Cancel
|
||||
</SwarmButton>
|
||||
</ExpandableListItemActions>
|
||||
</Box>
|
||||
</Box>
|
||||
</Collapse>
|
||||
</Box>
|
||||
</ListItemButton>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user