Skip to content

Commit

Permalink
Merge pull request #3365 from cardano-foundation/fix/MET-2108-pool-fi…
Browse files Browse the repository at this point in the history 
…lter-options-where-there-is-a-bar-there-should-be-text-input

fix: MET 2018 Pools filter options where there is a bar there should …
  • Loading branch information
@thuyetsato
thuyetsato committed Apr 25, 2024
2 parents aa630f4 + 9f58f99 commit 5741df7
Show file tree
Hide file tree
Showing 2 changed files with 86 additions and 16 deletions.
93 changes: 85 additions & 8 deletions src/components/commons/CustomFilterMultiRange/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -160,6 +160,42 @@ const CustomFilterMultiRange: React.FC = () => {
[filterParams]
);

const groupInputRange = (
minValue: number,
maxValue: number,
keyOnChangeMin: string,
keyOnChangeMax: string,
maxValueDefault: number
) => {
return (
<Box display="flex" alignItems="center" gap="30px">
<StyledInput
data-testid={`filterRange.${keyOnChangeMin}`}
sx={{
fontSize: "14px",
width: "100% !important",
color: theme.isDark ? theme.palette.secondary.main : theme.palette.secondary.light
}}
value={minValue || 0}
onChange={({ target: { value } }) => setFilterParams({ ...filterParams, [keyOnChangeMin]: +value })}
onKeyPress={handleKeyPress}
/>
<Box sx={{ width: "15px", height: "2px", background: theme.palette.info.light }}></Box>
<StyledInput
data-testid={`filterRange.${keyOnChangeMax}`}
sx={{
fontSize: "14px",
width: "100% !important",
color: theme.isDark ? theme.palette.secondary.main : theme.palette.secondary.light
}}
value={maxValue || maxValueDefault}
onChange={({ target: { value } }) => setFilterParams({ ...filterParams, [keyOnChangeMax]: value })}
onKeyPress={handleKeyPress}
/>
</Box>
);
};

return (
<ClickAwayListener onClickAway={() => setOpen(false)}>
<FilterWrapper>
Expand Down Expand Up @@ -289,23 +325,29 @@ const CustomFilterMultiRange: React.FC = () => {
</Box>
</AccordionSummary>
<AccordionDetailsFilter sx={{ background: "unset" }}>
<Box display="flex" alignItems="center" mb="30px" sx={{ gap: "14px" }}>
<Box display="flex" alignItems="center" mb={1} sx={{ gap: "14px" }}>
<Typography>{formatADA(dataRange?.minPoolSize, LARGE_NUMBER_ABBREVIATIONS, 6, 2) || 0}</Typography>
<StyledSlider
valueLabelFormat={(value) => formatADA(value, LARGE_NUMBER_ABBREVIATIONS, 6, 2)}
data-testid="filterRange.poolSizeValue"
getAriaLabel={() => "Minimum distance"}
defaultValue={[filterParams.minPoolSize || 0, initParams.maxPoolSize || 0]}
onChange={(e, newValue) => handleChangeValueRange(e, newValue, "minPoolSize", "maxPoolSize")}
valueLabelDisplay="auto"
value={[filterParams.minPoolSize || 0, filterParams.maxPoolSize ?? (initParams.maxPoolSize || 0)]}
disableSwap
min={dataRange?.minPoolSize || 0}
disableSwap
step={1000000}
max={dataRange?.maxPoolSize || 0}
/>
<Typography>{formatADA(dataRange?.maxPoolSize, LARGE_NUMBER_ABBREVIATIONS, 6, 2) || 0}</Typography>
</Box>
{groupInputRange(
filterParams.minPoolSize || 0,
filterParams.maxPoolSize || 0,
"minPoolSize",
"maxPoolSize",
initParams.maxPoolSize
)}
</AccordionDetailsFilter>
</AccordionContainer>
<AccordionContainer
Expand All @@ -331,7 +373,7 @@ const CustomFilterMultiRange: React.FC = () => {
</Box>
</AccordionSummary>
<AccordionDetailsFilter sx={{ background: "unset" }}>
<Box display="flex" alignItems="center" mb="30px" sx={{ gap: "14px" }}>
<Box display="flex" alignItems="center" mb={1} sx={{ gap: "14px" }}>
<Typography>{formatADA(dataRange?.minPledge, LARGE_NUMBER_ABBREVIATIONS, 6, 2) || 0}</Typography>
<StyledSlider
valueLabelFormat={(value) => formatADA(value, LARGE_NUMBER_ABBREVIATIONS, 6, 2)}
Expand All @@ -348,6 +390,13 @@ const CustomFilterMultiRange: React.FC = () => {
/>
<Typography>{formatADA(dataRange?.maxPledge, LARGE_NUMBER_ABBREVIATIONS, 6, 2) || 0}</Typography>
</Box>
{groupInputRange(
filterParams.minPledge || 0,
filterParams.maxPledge || 0,
"minPledge",
"maxPledge",
initParams.maxPledge
)}
</AccordionDetailsFilter>
</AccordionContainer>
<AccordionContainer
Expand Down Expand Up @@ -377,7 +426,7 @@ const CustomFilterMultiRange: React.FC = () => {
</Box>
</AccordionSummary>
<AccordionDetailsFilter sx={{ background: "unset" }}>
<Box display="flex" alignItems="center" mb="30px" sx={{ gap: "14px" }}>
<Box display="flex" alignItems="center" mb={1} sx={{ gap: "14px" }}>
<Typography>{formatPercent((dataRange?.minSaturation || 0) / 100) || `0%`}</Typography>
<StyledSlider
valueLabelFormat={(value) => formatPercent(value / 100) || `0%`}
Expand All @@ -397,6 +446,13 @@ const CustomFilterMultiRange: React.FC = () => {

<Typography>{formatPercent((dataRange?.maxSaturation || 0) / 100) || `0%`}</Typography>
</Box>
{groupInputRange(
filterParams.minSaturation || 0,
filterParams.maxSaturation || 0,
"minSaturation",
"maxSaturation",
initParams.maxSaturation
)}
</AccordionDetailsFilter>
</AccordionContainer>
<AccordionContainer
Expand Down Expand Up @@ -426,7 +482,7 @@ const CustomFilterMultiRange: React.FC = () => {
</Box>
</AccordionSummary>
<AccordionDetailsFilter sx={{ background: "unset" }}>
<Box display="flex" alignItems="center" mb="30px" sx={{ gap: "14px" }}>
<Box display="flex" alignItems="center" mb={1} sx={{ gap: "14px" }}>
<Typography>{dataRange?.minLifetimeBlock || 0}</Typography>
<StyledSlider
data-testid="filterRange.blocksLifeTimeValue"
Expand All @@ -446,6 +502,13 @@ const CustomFilterMultiRange: React.FC = () => {
/>
<Typography>{dataRange?.maxLifetimeBlock || 0}</Typography>
</Box>
{groupInputRange(
filterParams.minBlockLifetime || 0,
filterParams.maxBlockLifetime || 0,
"minBlockLifetime",
"maxBlockLifetime",
initParams.maxBlockLifetime
)}
</AccordionDetailsFilter>
</AccordionContainer>
{FF_GLOBAL_IS_CONWAY_ERA && (
Expand Down Expand Up @@ -477,7 +540,7 @@ const CustomFilterMultiRange: React.FC = () => {
</Box>
</AccordionSummary>
<AccordionDetailsFilter sx={{ background: "unset" }}>
<Box display="flex" alignItems="center" mb="30px" sx={{ gap: "14px" }}>
<Box display="flex" alignItems="center" mb={1} sx={{ gap: "14px" }}>
<Typography>{formatPercent(dataRange?.minGovParticipationRate) || `0%`}</Typography>
<StyledSlider
valueLabelFormat={(value) => formatPercent(value)}
Expand All @@ -502,6 +565,13 @@ const CustomFilterMultiRange: React.FC = () => {
/>
<Typography>{formatPercent(dataRange?.maxGovParticipationRate || 0) || `0%`}</Typography>
</Box>
{groupInputRange(
filterParams.minGovParticipationRate || 0,
filterParams.maxGovParticipationRate || 0,
"minGovParticipationRate",
"maxGovParticipationRate",
initParams.maxGovParticipationRate
)}
</AccordionDetailsFilter>
</AccordionContainer>
<AccordionContainer
Expand Down Expand Up @@ -531,7 +601,7 @@ const CustomFilterMultiRange: React.FC = () => {
</Box>
</AccordionSummary>
<AccordionDetailsFilter sx={{ background: "unset" }}>
<Box display="flex" alignItems="center" mb="30px" sx={{ gap: "14px" }}>
<Box display="flex" alignItems="center" mb={1} sx={{ gap: "14px" }}>
<Typography>{formatPercent(dataRange?.minVotingPower || 0)}</Typography>
<StyledSlider
valueLabelFormat={(value) => formatPercent(value)}
Expand All @@ -553,6 +623,13 @@ const CustomFilterMultiRange: React.FC = () => {
/>
<Typography>{formatPercent(dataRange?.maxVotingPower || 0)}</Typography>
</Box>
{groupInputRange(
filterParams.minVotingPower || 0,
filterParams.maxVotingPower || 0,
"minVotingPower",
"maxVotingPower",
initParams.maxVotingPower
)}
</AccordionDetailsFilter>
</AccordionContainer>
</>
Expand Down
9 changes: 1 addition & 8 deletions src/components/commons/CustomFilterMultiRange/styles.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,14 +50,7 @@ export const StyledSlider = styled(Slider)`
& .MuiSlider-valueLabel,
.MuiSlider-valueLabelLabe,
.MuiSlider-valueLabelOpen {
transform: translateY(160%) scale(1) !important;
background: ${(props) => props.theme.palette.secondary[600]} !important;
padding: 6px 8px;
font-weight: 400;
bottom: 4px;
&::before {
top: -8px !important;
}
display: none;
}
& .MuiSlider-thumb {
Expand Down

0 comments on commit 5741df7

Please sign in to comment.