Protei/PromucFlow_constructor
2
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

Fix - Remove delete icon when there are no filters in table widget (#2605)

Browse Source
This commit is contained in:
vicky-primathon 2021-01-22 15:17:14 +05:30 committed by GitHub
parent a9e0b5b678
commit a309107623
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 16 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
app/client/src/components/designSystems/appsmith/CascadeFields.tsx
View File

@ -28,6 +28,9 @@ const StyledRemoveIcon = styled(
padding: 0; padding: 0;
position: relative; position: relative;
cursor: pointer; cursor: pointer;
&.hide-icon {
display: none;
}
`; `;
const LabelWrapper = styled.div` const LabelWrapper = styled.div`
@ -290,6 +293,7 @@ type CascadeFieldProps = {
value: any; value: any;
operator: Operator; operator: Operator;
index: number; index: number;
hasAnyFilters: boolean;
applyFilter: (filter: ReactTableFilter, index: number) => void; applyFilter: (filter: ReactTableFilter, index: number) => void;
removeFilter: (index: number) => void; removeFilter: (index: number) => void;
}; };
@ -447,7 +451,7 @@ const CascadeField = (props: CascadeFieldProps) => {
}; };
const Fields = (props: CascadeFieldProps & { state: CascadeFieldState }) => { const Fields = (props: CascadeFieldProps & { state: CascadeFieldState }) => {
const { index, removeFilter, applyFilter } = props; const { index, removeFilter, applyFilter, hasAnyFilters } = props;
const [state, dispatch] = React.useReducer(CaseCaseFieldReducer, props.state); const [state, dispatch] = React.useReducer(CaseCaseFieldReducer, props.state);
const handleRemoveFilter = () => { const handleRemoveFilter = () => {
dispatch({ type: CascadeFieldActionTypes.DELETE_FILTER }); dispatch({ type: CascadeFieldActionTypes.DELETE_FILTER });
@ -515,7 +519,9 @@ const Fields = (props: CascadeFieldProps & { state: CascadeFieldState }) => {
height={16} height={16}
width={16} width={16}
color={Colors.RIVER_BED} color={Colors.RIVER_BED}
className="t--table-filter-remove-btn" className={`t--table-filter-remove-btn ${
hasAnyFilters ? "" : "hide-icon"
}`}
/> />
{index === 1 ? ( {index === 1 ? (
<DropdownWrapper width={75}> <DropdownWrapper width={75}>

12
app/client/src/components/designSystems/appsmith/TableFilters.tsx
View File

@ -151,8 +151,11 @@ const TableFilters = (props: TableFilterProps) => {
}; };
}, },
); );
const showAddFilter = const hasAnyFilters = !!(
filters.length >= 1 && filters[0].column && filters[0].condition; filters.length >= 1 &&
filters[0].column &&
filters[0].condition
);
return ( return (
<Popover <Popover
minimal minimal
@ -170,7 +173,7 @@ const TableFilters = (props: TableFilterProps) => {
className="t--table-filter-toggle-btn" className="t--table-filter-toggle-btn"
selected={selected} selected={selected}
icon={ icon={
showAddFilter ? ( hasAnyFilters ? (
<SelectedFilterWrapper>{filters.length}</SelectedFilterWrapper> <SelectedFilterWrapper>{filters.length}</SelectedFilterWrapper>
) : null ) : null
} }
@ -194,6 +197,7 @@ const TableFilters = (props: TableFilterProps) => {
condition={filter.condition} condition={filter.condition}
value={filter.value} value={filter.value}
columns={columns} columns={columns}
hasAnyFilters={hasAnyFilters}
applyFilter={(filter: ReactTableFilter, index: number) => { applyFilter={(filter: ReactTableFilter, index: number) => {
const updatedFilters = props.filters const updatedFilters = props.filters
? [...props.filters] ? [...props.filters]
@ -215,7 +219,7 @@ const TableFilters = (props: TableFilterProps) => {
/> />
); );
})} })}
{showAddFilter ? ( {hasAnyFilters ? (
<ButtonWrapper className={Classes.POPOVER_DISMISS}> <ButtonWrapper className={Classes.POPOVER_DISMISS}>
<Button <Button
intent="primary" intent="primary"