Elgato_dark/ToolJet
1
0
Fork 0
mirror of https://github.com/ToolJet/ToolJet synced 2026-05-24 01:18:23 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

[ hotfix ] : [ Table Widget ] filter pop-up and dropdown inside it are not scrollable (#4098)

Browse source 
* hotfix : filter pop-up and dropdown inside it are  not scrollable

* removes useMenuPortal

* removed selectSearch import from the Filter.jsx
This commit is contained in:
Manish Kushare 2022-10-06 17:22:17 +05:30 committed by GitHub
parent 19d09c6157
commit 1edc915bd2
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 19 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
frontend/src/Editor/Components/Table/Filter.jsx
View file

@ -1,11 +1,12 @@
import React from 'react';
import SelectSearch, { fuzzySearch } from 'react-select-search';
import Select from '@/_ui/Select';
import defaultStyles from '@/_ui/Select/styles';
import { useTranslation } from 'react-i18next';
export function Filter(props) {
const { t } = useTranslation();
const { mergeToFilterDetails, filterDetails, setAllFilters } = props;
const { mergeToFilterDetails, filterDetails, setAllFilters, darkMode } = props;
const { filters } = filterDetails;
function filterColumnChanged(index, value) {
@ -61,6 +62,16 @@ export function Filter(props) {
setAllFilters([]);
}
const selectStyles = (width) => {
return {
...defaultStyles(darkMode, width),
menuPortal: (provided) => ({ ...provided, zIndex: 999 }),
menuList: (base) => ({
...base,
}),
};
};
return (
<div className="table-filters card">
<div className="card-header row">
@ -80,19 +91,19 @@ export function Filter(props) {
<small>{index > 0 ? 'and' : 'where'}</small>
</div>
<div className="col">
<SelectSearch
<Select
options={props.columns}
value={filter.id}
search={true}
onChange={(value) => {
filterColumnChanged(index, value);
}}
filterOptions={fuzzySearch}
placeholder={t('globals.select', 'Select') + '...'}
styles={selectStyles('100%')}
/>
</div>
<div className="col" style={{ maxWidth: '180px' }}>
<SelectSearch
<Select
options={[
{ name: 'contains', value: 'contains' },
{ name: 'matches', value: 'matches' },
@ -109,8 +120,8 @@ export function Filter(props) {
onChange={(value) => {
filterOperationChanged(index, value);
}}
filterOptions={fuzzySearch}
placeholder="Select.."
placeholder={t('globals.select', 'Select') + '...'}
styles={selectStyles('100%')}
/>
</div>
<div className="col">
@ -125,7 +136,7 @@ export function Filter(props) {
<div className="col-auto">
<button
onClick={() => removeFilter(index)}
className={`btn ${props.darkMode ? 'btn-dark' : 'btn-light'} btn-sm p-2 text-danger font-weight-bold`}
className={`btn ${darkMode ? 'btn-dark' : 'btn-light'} btn-sm p-2 text-danger font-weight-bold`}
>
x
</button>